@univerjs/ui 0.24.0 → 0.25.0-insiders.20260608-e4336f7

package/lib/index.js

@@ -8,9 +8,8 @@ import { Button, ColorPicker, ConfigContext, ConfigProvider, Confirm, Dialog, Dr
 import { IRenderManagerService, UniverRenderEnginePlugin, ptToPx } from "@univerjs/engine-render";
 import { map as map$1, scan as scan$1, startWith as startWith$1 } from "rxjs/operators";
 import { createPortal } from "react-dom";
-import localforage from "localforage";
 
-//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -21,7 +20,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -34,14 +33,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -110,7 +109,7 @@ const ToggleShortcutPanelOperation = {
 		} else {
 			shortcutPanelService.open();
 			sidebarService.open({
-				header: { title: "shortcut-panel.title" },
+				header: { title: "ui.shortcut-panel.title" },
 				children: { label: ShortcutPanelComponentName }
 			});
 		}
@@ -338,9 +337,13 @@ function getMenuHiddenObservable(accessor, targetUniverType, matchUnitId, needHi
 			subscriber.next(univerType !== targetUniverType);
 		});
 		const focusedUniverInstance = univerInstanceService.getFocusedUnit();
-		if (focusedUniverInstance == null) return subscriber.next(true);
-		const univerType = univerInstanceService.getUnitType(focusedUniverInstance.getUnitId());
-		subscriber.next(univerType !== targetUniverType);
+		if (focusedUniverInstance == null) {
+			const currentUnit = univerInstanceService.getCurrentUnitOfType(targetUniverType);
+			subscriber.next(currentUnit == null);
+		} else {
+			const univerType = univerInstanceService.getUnitType(focusedUniverInstance.getUnitId());
+			subscriber.next(univerType !== targetUniverType);
+		}
 		return () => subscription.unsubscribe();
 	});
 }
@@ -354,9 +357,11 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 			subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
 		});
 		const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
-		if (docDataModel == null) return subscriber.next(true);
-		const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
-		subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
+		if (docDataModel == null) subscriber.next(true);
+		else {
+			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
+			subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
+		}
 		return () => subscription.unsubscribe();
 	});
 }
@@ -765,7 +770,7 @@ const configSymbol = Symbol(UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -773,7 +778,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -787,67 +792,67 @@ const IFontService = createIdentifier("univer.font-service");
 const DEFAULT_FONT_LIST = [
 	{
 		value: "Arial",
-		label: "fontFamily.arial",
+		label: "ui.fontFamily.arial",
 		category: "sans-serif"
 	},
 	{
 		value: "Times New Roman",
-		label: "fontFamily.times-new-roman",
+		label: "ui.fontFamily.times-new-roman",
 		category: "serif"
 	},
 	{
 		value: "Tahoma",
-		label: "fontFamily.tahoma",
+		label: "ui.fontFamily.tahoma",
 		category: "sans-serif"
 	},
 	{
 		value: "Verdana",
-		label: "fontFamily.verdana",
+		label: "ui.fontFamily.verdana",
 		category: "sans-serif"
 	},
 	{
 		value: "Microsoft YaHei",
-		label: "fontFamily.microsoft-yahei",
+		label: "ui.fontFamily.microsoft-yahei",
 		category: "sans-serif"
 	},
 	{
 		value: "SimSun",
-		label: "fontFamily.simsun",
+		label: "ui.fontFamily.simsun",
 		category: "serif"
 	},
 	{
 		value: "SimHei",
-		label: "fontFamily.simhei",
+		label: "ui.fontFamily.simhei",
 		category: "sans-serif"
 	},
 	{
 		value: "Kaiti",
-		label: "fontFamily.kaiti",
+		label: "ui.fontFamily.kaiti",
 		category: "serif"
 	},
 	{
 		value: "FangSong",
-		label: "fontFamily.fangsong",
+		label: "ui.fontFamily.fangsong",
 		category: "serif"
 	},
 	{
 		value: "NSimSun",
-		label: "fontFamily.nsimsun",
+		label: "ui.fontFamily.nsimsun",
 		category: "serif"
 	},
 	{
 		value: "STXinwei",
-		label: "fontFamily.stxinwei",
+		label: "ui.fontFamily.stxinwei",
 		category: "serif"
 	},
 	{
 		value: "STXingkai",
-		label: "fontFamily.stxingkai",
+		label: "ui.fontFamily.stxingkai",
 		category: "serif"
 	},
 	{
 		value: "STLiti",
-		label: "fontFamily.stliti",
+		label: "ui.fontFamily.stliti",
 		category: "serif"
 	}
 ];
@@ -1136,7 +1141,7 @@ const FontFamilyItem = ({ id, value }) => {
 			type: "button",
 			onClick: () => handleSelectFont(font.value),
 			children: [localeService.t(font.label), !fontService.isFontSupported(font.value) && /* @__PURE__ */ jsx(Tooltip, {
-				title: localeService.t("fontFamily.not-supported"),
+				title: localeService.t("ui.fontFamily.not-supported"),
 				children: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
 			})]
 		}) }, font.value))
@@ -1244,35 +1249,35 @@ const FONT_SIZE_LIST = [
 ];
 const HEADING_LIST = [
 	{
-		label: "toolbar.heading.normal",
+		label: "ui.toolbar.heading.normal",
 		value: NamedStyleType.NORMAL_TEXT
 	},
 	{
-		label: "toolbar.heading.title",
+		label: "ui.toolbar.heading.title",
 		value: NamedStyleType.TITLE
 	},
 	{
-		label: "toolbar.heading.subTitle",
+		label: "ui.toolbar.heading.subTitle",
 		value: NamedStyleType.SUBTITLE
 	},
 	{
-		label: "toolbar.heading.1",
+		label: "ui.toolbar.heading.1",
 		value: NamedStyleType.HEADING_1
 	},
 	{
-		label: "toolbar.heading.2",
+		label: "ui.toolbar.heading.2",
 		value: NamedStyleType.HEADING_2
 	},
 	{
-		label: "toolbar.heading.3",
+		label: "ui.toolbar.heading.3",
 		value: NamedStyleType.HEADING_3
 	},
 	{
-		label: "toolbar.heading.4",
+		label: "ui.toolbar.heading.4",
 		value: NamedStyleType.HEADING_4
 	},
 	{
-		label: "toolbar.heading.5",
+		label: "ui.toolbar.heading.5",
 		value: NamedStyleType.HEADING_5
 	}
 ];
@@ -1464,12 +1469,6 @@ const useVirtualList = (list, options) => {
 	}];
 };
 
-//#endregion
-//#region src/components/hooks/locale.ts
-function t(localeService, key, ...args) {
-	return localeService.t(key);
-}
-
 //#endregion
 //#region src/components/progress-bar/ProgressBar.tsx
 /**
@@ -1981,15 +1980,17 @@ function whenEditorFocusedButNotCellEditor(contextService) {
 }
 const CopyShortcutItem = {
 	id: CopyCommand.id,
-	description: "shortcut.copy",
+	description: "ui.shortcut.copy",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 67 | 4096,
 	preconditions: whenEditorFocused
 };
 const CutShortcutItem = {
 	id: CutCommand.id,
-	description: "shortcut.cut",
+	description: "ui.shortcut.cut",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 88 | 4096,
 	preconditions: whenEditorFocused
 };
@@ -1998,22 +1999,25 @@ const CutShortcutItem = {
 */
 const OnlyDisplayPasteShortcutItem = {
 	id: PasteCommand.id,
-	description: "shortcut.paste",
+	description: "ui.shortcut.paste",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 86 | 4096,
 	preconditions: () => false
 };
 const UndoShortcutItem = {
 	id: UndoCommand.id,
-	description: "shortcut.undo",
+	description: "ui.shortcut.undo",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 90 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
 const RedoShortcutItem = {
 	id: RedoCommand.id,
-	description: "shortcut.redo",
+	description: "ui.shortcut.redo",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 89 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
@@ -2150,6 +2154,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 			["ribbon"]: {
 				["ribbon.start"]: {
 					order: 0,
+					title: "ui.ribbon.start",
 					["ribbon.start.history"]: { order: 0 },
 					["ribbon.start.format"]: { order: 1 },
 					["ribbon.start.layout"]: { order: 2 },
@@ -2157,17 +2162,20 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				},
 				["ribbon.insert"]: {
 					order: 1,
+					title: "ui.ribbon.insert",
 					["ribbon.insert.edit"]: { order: 0 },
 					["ribbon.insert.media"]: { order: 1 },
 					["ribbon.insert.others"]: { order: 2 }
 				},
 				["ribbon.formulas"]: {
 					order: 2,
+					title: "ui.ribbon.formulas",
 					["ribbon.formulas.basic"]: { order: 0 },
 					["ribbon.formulas.others"]: { order: 1 }
 				},
 				["ribbon.data"]: {
 					order: 3,
+					title: "ui.ribbon.data",
 					["ribbon.data.formulas"]: { order: 0 },
 					["ribbon.data.rules"]: { order: 1 },
 					["ribbon.data.organization"]: { order: 2 },
@@ -2175,12 +2183,14 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				},
 				["ribbon.view"]: {
 					order: 4,
+					title: "ui.ribbon.view",
 					["ribbon.view.display"]: { order: 0 },
 					["ribbon.view.Visibility"]: { order: 0 },
 					["ribbon.view.others"]: { order: 0 }
 				},
 				["ribbon.others"]: {
 					order: 5,
+					title: "ui.ribbon.others",
 					["ribbon.others.others"]: { order: 0 }
 				}
 			},
@@ -2275,7 +2285,8 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				order: value.order,
 				title: value.title,
 				contextual: value.contextual,
-				quickLayout: value.quickLayout
+				quickLayout: value.quickLayout,
+				tiny: value.tiny
 			};
 			if (value.menuItemFactory) {
 				const item = this._injector.invoke(value.menuItemFactory);
@@ -2293,7 +2304,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				if (menuItem.item || menuItem.children) result.push(menuItem);
 			}
 		}
-		return result;
+		return result.sort((a, b) => normalizeMenuOrder(a.order) - normalizeMenuOrder(b.order));
 	}
 	/**
 	* Get menu schema by position key
@@ -2334,6 +2345,9 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 	}
 };
 MenuManagerService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IConfigService)], MenuManagerService);
+function normalizeMenuOrder(order) {
+	return order !== null && order !== void 0 ? order : 0;
+}
 
 //#endregion
 //#region src/views/components/shortcut-panel/ShortcutPanel.tsx
@@ -2363,6 +2377,7 @@ function ShortcutPanel() {
 	const updateShortcuts = useCallback(() => {
 		const shortcutGroups = /* @__PURE__ */ new Map();
 		const shortcuts = shortcutService.getAllShortcuts().filter((item) => !!item.group);
+		const groupTitles = /* @__PURE__ */ new Map();
 		for (const shortcut of shortcuts) {
 			var _shortcut$description;
 			const group = shortcut.group;
@@ -2370,16 +2385,18 @@ function ShortcutPanel() {
 				title: localeService.t((_shortcut$description = shortcut.description) !== null && _shortcut$description !== void 0 ? _shortcut$description : shortcut.id),
 				shortcut: shortcutService.getShortcutDisplay(shortcut)
 			};
-			if (!/\d+_[a-zA-Z0-9]/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
+			if (!/^\d+_/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
+			if (!shortcut.groupTitle) throw new Error(`[ShortcutPanel]: Shortcut group "${group}" must provide a groupTitle!`);
+			if (!groupTitles.has(group)) groupTitles.set(group, shortcut.groupTitle);
 			if (!shortcutGroups.has(group)) shortcutGroups.set(group, []);
 			shortcutGroups.get(group).push(shortcutItem);
 		}
 		setShortcutItems(Array.from(shortcutGroups.entries()).map(([name, items]) => {
 			const groupSequence = name.split("_")[0];
-			const groupName = name.slice(groupSequence.length + 1);
+			const localeKey = groupTitles.get(name);
 			return {
 				sequence: +groupSequence,
-				name: localeService.t(groupName),
+				name: localeService.t(localeKey),
 				items: dedupeBy(items, (item) => item.title + item.shortcut)
 			};
 		}).sort((a, b) => a.sequence - b.sequence));
@@ -2416,8 +2433,9 @@ function ShortcutPanel() {
 const ToggleShortcutPanelShortcut = {
 	id: ToggleShortcutPanelOperation.id,
 	binding: 4096 | 220,
-	description: "shortcut.shortcut-panel",
-	group: "10_global-shortcut"
+	description: "ui.shortcut.shortcut-panel",
+	group: "10_global-shortcut",
+	groupTitle: "ui.global-shortcut"
 };
 let ShortcutPanelController = class ShortcutPanelController extends Disposable {
 	constructor(injector, componentManager, shortcutService, _menuManagerService, commandService) {
@@ -2468,7 +2486,7 @@ function UndoMenuItemFactory(accessor) {
 		type: 0,
 		icon: "UndoIcon",
 		title: "Undo",
-		tooltip: "toolbar.undo",
+		tooltip: "ui.shortcut.undo",
 		disabled$: undoRedoDisableFactory$(accessor, true)
 	};
 }
@@ -2478,7 +2496,7 @@ function RedoMenuItemFactory(accessor) {
 		type: 0,
 		icon: "RedoIcon",
 		title: "Redo",
-		tooltip: "toolbar.redo",
+		tooltip: "ui.shortcut.redo",
 		disabled$: undoRedoDisableFactory$(accessor, false)
 	};
 }
@@ -2488,8 +2506,8 @@ function RedoMenuItemFactory(accessor) {
 function ShortcutPanelMenuItemFactory() {
 	return {
 		id: ToggleShortcutPanelOperation.id,
-		title: "toggle-shortcut-panel",
-		tooltip: "toggle-shortcut-panel",
+		title: "ui.toggle-shortcut-panel",
+		tooltip: "ui.toggle-shortcut-panel",
 		icon: "ShortcutIcon",
 		type: 0
 	};
@@ -3039,6 +3057,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		_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) {
@@ -3071,6 +3090,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		}));
 	}
 	_updateRibbon() {
+		var _this$_hiddenSubscrip;
 		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
 		const hiddenObservableMap = [];
 		const hiddenKeyMap = [];
@@ -3087,7 +3107,8 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 			this._setRibbon(ribbon);
 			return;
 		}
-		combineLatest(hiddenObservableMap).pipe(startWith$1(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
+		(_this$_hiddenSubscrip = this._hiddenSubscription) === null || _this$_hiddenSubscrip === void 0 || _this$_hiddenSubscrip.unsubscribe();
+		this._hiddenSubscription = combineLatest(hiddenObservableMap).pipe(startWith$1(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
 			const newRibbon = [];
 			const hiddenPathMap = hiddenMap.map((hidden, index) => {
 				if (hidden) return hiddenKeyMap[index];
@@ -3128,7 +3149,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 				})) newRibbon.push(newGroup);
 			}
 			this._setRibbon(newRibbon);
-		}).unsubscribe();
+		});
 	}
 	_filterContextualTabs(ribbon) {
 		this._contextualTabs.clear();
@@ -3144,12 +3165,27 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 			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, IUniverInstanceService)], DesktopRibbonService);
 
@@ -3192,14 +3228,14 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-flex univer-size-full univer-items-center univer-justify-center univer-gap-1 univer-overflow-x-auto univer-rounded-md univer-bg-gray-50 univer-px-3 dark:!univer-bg-gray-900",
 		role: "tablist",
-		"aria-label": localeService.t("ribbon.menu"),
+		"aria-label": localeService.t("ui.ribbon.menu"),
 		children: ribbon.map((group) => {
 			const isActive = activatedTab === group.key;
 			return /* @__PURE__ */ jsx("button", {
 				type: "button",
 				role: "tab",
 				"aria-selected": isActive,
-				title: localeService.t(group.key),
+				title: localeService.t(group.title || group.key),
 				onClick: () => onSelectTab(group),
 				className: clsx("univer-focus:outline-none univer-focus:ring-2 univer-focus:ring-primary-500 dark:!univer-focus:ring-primary-300 univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors", isActive ? `
                               univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm
@@ -3210,7 +3246,7 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
                               univer-bg-transparent univer-text-gray-700
                               dark:!univer-text-gray-200
                             `),
-				children: localeService.t(group.key)
+				children: localeService.t(group.title || group.key)
 			}, group.key);
 		})
 	});
@@ -3227,7 +3263,9 @@ const iconMap = {
 	["ribbon.others"]: MoreFunctionIcon
 };
 function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
+	var _ribbon$find;
 	const localeService = useDependency(LocaleService);
+	const activatedTabTitle = ((_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.title) || activatedTab;
 	const [groupSelectorVisible, setGroupSelectorVisible] = useState(false);
 	function handleSelectTab(tab) {
 		onSelectTab(tab);
@@ -3254,10 +3292,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 						className: "univer-flex univer-flex-col",
 						children: [/* @__PURE__ */ jsx("strong", {
 							className: "univer-text-sm univer-font-semibold univer-text-gray-800 dark:!univer-text-gray-200",
-							children: localeService.t(group.key)
+							children: localeService.t(group.title || group.key)
 						}), /* @__PURE__ */ jsx("span", {
 							className: "univer-text-xs univer-text-gray-400",
-							children: localeService.t(`${group.key}Desc`)
+							children: localeService.t(`${group.title || group.key}Desc`)
 						})]
 					})]
 				}, group.key);
@@ -3267,7 +3305,7 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		children: /* @__PURE__ */ 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(activatedTab), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
+			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
 		})
 	});
 }
@@ -3358,8 +3396,13 @@ function useToolbarItemStatus(menuItem) {
 		disabled$ && subscriptions.push(disabled$.subscribe((disabled) => setDisabled(disabled)));
 		hidden$ && subscriptions.push(hidden$.subscribe((hidden) => setHidden(hidden)));
 		activated$ && subscriptions.push(activated$.subscribe((activated) => setActivated(activated)));
-		value$ && subscriptions.push(value$.subscribe((value) => setValue(value)));
-		selectionsValue$ && subscriptions.push(selectionsValue$.subscribe((value) => setSelectionsValue(value)));
+		value$ && subscriptions.push(value$.subscribe((value) => {
+			setValue(value);
+		}));
+		selectionsValue$ && subscriptions.push(selectionsValue$.subscribe((value) => {
+			setSelectionsValue(value);
+			setValue(value);
+		}));
 		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
 	}, [
 		activated$,
@@ -3489,6 +3532,10 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	function handleVisibleChange(visible) {
 		setDropdownVisible(visible);
 	}
+	function handleOptionSelect(option) {
+		onOptionSelect(option);
+		setDropdownVisible(false);
+	}
 	useEffect(() => {
 		const subscriptions = [];
 		menuItems.forEach((item) => {
@@ -3527,7 +3574,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		overlay: options.map((option, index) => /* @__PURE__ */ jsx(Label, {
 			value,
 			option,
-			onOptionSelect
+			onOptionSelect: handleOptionSelect
 		}, index)),
 		children
 	});
@@ -3541,15 +3588,16 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					icon: option.icon,
 					value,
 					option,
-					onOptionSelect
+					onOptionSelect: handleOptionSelect
 				}),
 				disabled: option.disabled,
 				onSelect: () => {
 					if (typeof option.value === "undefined") return;
-					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({ ...option });
+					handleOptionSelect({ ...option });
 				}
 			};
 		});
+		if (filteredMenuItems.length) items.push({ type: "separator" });
 		for (const menuItem of filteredMenuItems) {
 			if (!menuItem.item) continue;
 			const { title, id, commandId, icon } = menuItem.item;
@@ -3565,7 +3613,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					} }
 				}),
 				onSelect: () => {
-					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+					handleOptionSelect({
 						commandId,
 						id
 					});
@@ -3598,7 +3646,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 						} }
 					}),
 					onSelect: () => {
-						onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+						handleOptionSelect({
 							commandId,
 							id
 						});
@@ -3624,7 +3672,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
 	const componentManager = useDependency(ComponentManager);
-	const { value, hidden, disabled, activated, selectionsValue } = useToolbarItemStatus(props);
+	const { value, hidden, disabled, activated } = useToolbarItemStatus(props);
 	const executeCommand = (commandId, params) => {
 		layoutService.focus();
 		commandService.executeCommand(commandId, params);
@@ -3685,7 +3733,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 				children: /* @__PURE__ */ jsx(CustomLabel, {
 					icon: iconToDisplay,
 					title,
-					value: selectionsValue !== null && selectionsValue !== void 0 ? selectionsValue : value,
+					value,
 					label,
 					onChange: handleSelectionsValueChange
 				})
@@ -3804,13 +3852,17 @@ function Ribbon(props) {
 		}
 		return ribbonData;
 	}, [ribbonType, ribbonData]);
+	const activatedTabTitle = useMemo(() => {
+		var _ribbon$find;
+		return ((_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.title) || activatedTab;
+	}, [ribbon, activatedTab]);
 	const handleSelectTab = useCallback((group) => {
 		toolbarItemRefs.current = {};
 		ribbonService.setActivatedTab(group.key);
 	}, []);
 	const activeGroup = useMemo(() => {
-		var _ribbon$find$children, _ribbon$find;
-		const allGroups = (_ribbon$find$children = (_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
+		var _ribbon$find$children, _ribbon$find2;
+		const allGroups = (_ribbon$find$children = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
 		const visibleGroups = [];
 		const hiddenGroups = [];
 		for (const item of allGroups) if (item.children) {
@@ -3840,14 +3892,14 @@ function Ribbon(props) {
 			for (const entry of entries) {
 				ribbonService.setFakeToolbarVisible(true);
 				timer = requestAnimationFrame(() => {
-					var _ribbon$find$children2, _ribbon$find2;
+					var _ribbon$find$children2, _ribbon$find3;
 					const { width: avaliableWidth } = entry.contentRect;
 					const sortedToolbarItems = Object.values(toolbarItemRefs.current).sort((a, b) => {
 						return a.order - b.order || a.groupOrder - b.groupOrder || a.itemOrder - b.itemOrder;
 					});
 					const newCollapsedIds = [];
 					let totalWidth = 32;
-					const gapWidth = (((_ribbon$find$children2 = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children2 !== void 0 ? _ribbon$find$children2 : []).length - 1) * 8;
+					const gapWidth = (((_ribbon$find$children2 = (_ribbon$find3 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find3 === void 0 ? void 0 : _ribbon$find3.children) !== null && _ribbon$find$children2 !== void 0 ? _ribbon$find$children2 : []).length - 1) * 8;
 					totalWidth += gapWidth;
 					for (const { el, key } of sortedToolbarItems) {
 						const { width } = el.getBoundingClientRect();
@@ -3872,7 +3924,7 @@ function Ribbon(props) {
 			children: activeGroup.allGroups.map((groupItem, index) => {
 				var _groupItem$children, _groupItem$children2;
 				return (((_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.length) || groupItem.item) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-					className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2",
+					className: "\n                              univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2\n                              empty:univer-hidden\n                            ",
 					children: groupItem.children && ((_groupItem$children2 = groupItem.children) === null || _groupItem$children2 === void 0 ? void 0 : _groupItem$children2.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, {
 						...child.item,
 						ref: (ref) => {
@@ -3893,7 +3945,7 @@ function Ribbon(props) {
 		/* @__PURE__ */ jsxs("div", {
 			"data-u-comp": "ribbon-header-menu",
 			className: clsx("univer-relative univer-select-none", { "univer-h-9": ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0 }),
-			children: [ribbonType === "classic" && ribbon.length > 1 && /* @__PURE__ */ jsx(ClassicMenu, {
+			children: [ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ jsx(ClassicMenu, {
 				ribbon,
 				activatedTab,
 				onSelectTab: handleSelectTab
@@ -3904,11 +3956,10 @@ function Ribbon(props) {
 		}),
 		/* @__PURE__ */ jsxs("div", {
 			className: clsx("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
-				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic",
-				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic",
-				"univer-grid-cols-none": ribbon.length === 1
+				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
+				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
 			}, borderBottomClassName),
-			children: [ribbonType === "collapsed" && ribbon.length > 1 && /* @__PURE__ */ jsx(DefaultMenu, {
+			children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ jsx(DefaultMenu, {
 				ribbon,
 				activatedTab,
 				onSelectTab: handleSelectTab
@@ -3917,11 +3968,11 @@ function Ribbon(props) {
 				ref: containerRef,
 				className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
 				role: "toolbar",
-				"aria-label": localeService.t(activatedTab),
+				"aria-label": localeService.t(activatedTabTitle),
 				children: [activeGroup.visibleGroups.map((groupItem) => {
 					var _groupItem$children3, _groupItem$children4;
 					return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2",
+						className: "\n                                  univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2\n                                  empty:univer-hidden\n                                ",
 						children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)))
 					}) }, groupItem.key);
 				}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -3949,7 +4000,7 @@ function Ribbon(props) {
 						children: /* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: toolbarButtonClassName,
-							"aria-label": localeService.t("ribbon.more"),
+							"aria-label": localeService.t("ui.ribbon.more"),
 							"aria-haspopup": "true",
 							children: /* @__PURE__ */ jsx(MoreFunctionIcon, {})
 						})
@@ -4074,7 +4125,7 @@ function DesignTinyMenuGroup({ items }) {
 			const ele = /* @__PURE__ */ jsx("div", {
 				className: clsx("univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-md hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-900", { "univer-bg-gray-50 dark:!univer-bg-gray-900": item.active }, item.className),
 				onClick: () => item.onClick(),
-				children: /* @__PURE__ */ jsx(item.Icon, { className: "univer-size-4 univer-text-gray-900 dark:!univer-text-gray-200" })
+				children: /* @__PURE__ */ jsx(item.Icon, { className: clsx("univer-size-4 univer-text-gray-900 dark:!univer-text-gray-200", item.iconClassName) })
 			}, item.key);
 			return item.tooltip ? /* @__PURE__ */ jsx(Tooltip, {
 				title: item.tooltip,
@@ -4086,8 +4137,21 @@ function DesignTinyMenuGroup({ items }) {
 
 //#endregion
 //#region src/components/menu/desktop/TinyMenuGroup.tsx
+const EMPTY_HIDDEN_ITEM_IDS = [];
+function resolveMenuItemActiveState(itemId, observableActive, activeItemIds) {
+	if (activeItemIds) return Boolean(itemId && activeItemIds.includes(itemId));
+	return observableActive;
+}
+function getTinyMenuChildStateKey(child) {
+	var _child$item$id, _child$item;
+	return (_child$item$id = (_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.id) !== null && _child$item$id !== void 0 ? _child$item$id : child.key;
+}
+function getVisibleTinyMenuChildren(children, hiddenItemKeys) {
+	const hiddenSet = new Set(hiddenItemKeys);
+	return children.filter((child) => !hiddenSet.has(getTinyMenuChildStateKey(child)));
+}
 function QuickTileMenuItem(props) {
-	const { menuSchema, onOptionSelect } = props;
+	const { menuSchema, activeItemIds, onOptionSelect } = props;
 	const componentManager = useDependency(ComponentManager);
 	const localeService = useDependency(LocaleService);
 	const menuItem = menuSchema.item;
@@ -4102,7 +4166,7 @@ function QuickTileMenuItem(props) {
                       univer-cursor-pointer
                       hover:univer-bg-gray-50
                       dark:hover:!univer-bg-gray-600
-                    `, activated && `
+                    `, resolveMenuItemActiveState(menuItem.id, activated, activeItemIds) && `
                   univer-bg-primary-50 univer-text-primary-700 univer-ring-1 univer-ring-primary-600
                   dark:!univer-bg-primary-900 dark:!univer-text-primary-100
                 `),
@@ -4127,20 +4191,21 @@ function QuickTileMenuItem(props) {
 	});
 }
 function UITinyMenuGroup(props) {
-	const { item, onOptionSelect } = props;
+	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
 	const [activeItems, setActiveItems] = useState([]);
+	const [hiddenItems, setHiddenItems] = useState([]);
 	const componentManager = useDependency(ComponentManager);
 	const localeService = useDependency(LocaleService);
 	useEffect(() => {
 		if (!item.children) return;
 		const observables = item.children.map((child) => {
-			var _child$item$activated, _child$item;
-			return convertObservableToBehaviorSubject((_child$item$activated = (_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : of(false), false);
+			var _child$item$activated, _child$item2;
+			return convertObservableToBehaviorSubject((_child$item$activated = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : of(false), false);
 		});
 		const subscription = combineLatest(observables).subscribe((activedArr) => {
 			const actived = activedArr.map((actived, index) => ({
 				actived,
-				item: item.children[index].item.id
+				item: getTinyMenuChildStateKey(item.children[index])
 			})).filter((actived) => actived.actived);
 			if (actived.length === 0) setActiveItems([]);
 			else setActiveItems(actived.map((actived) => actived.item));
@@ -4152,34 +4217,65 @@ function UITinyMenuGroup(props) {
 			});
 		};
 	}, [item]);
+	useEffect(() => {
+		if (!item.children) return;
+		const observables = item.children.map((child) => {
+			var _child$item$hidden$, _child$item3;
+			return convertObservableToBehaviorSubject((_child$item$hidden$ = (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) !== null && _child$item$hidden$ !== void 0 ? _child$item$hidden$ : of(false), false);
+		});
+		const subscription = combineLatest(observables).subscribe((hiddenArr) => {
+			const hidden = hiddenArr.map((hidden, index) => ({
+				hidden,
+				item: getTinyMenuChildStateKey(item.children[index])
+			})).filter((hidden) => hidden.hidden);
+			if (hidden.length === 0) setHiddenItems([]);
+			else setHiddenItems(hidden.map((hidden) => hidden.item));
+		});
+		return () => {
+			subscription.unsubscribe();
+			observables.forEach((observable) => {
+				observable.complete();
+			});
+		};
+	}, [item]);
+	const visibleChildren = useMemo(() => {
+		var _item$children;
+		return getVisibleTinyMenuChildren((_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : [], [...hiddenItems, ...hiddenItemIds]);
+	}, [
+		hiddenItemIds,
+		hiddenItems,
+		item.children
+	]);
 	if (!item.children) return null;
-	return /* @__PURE__ */ jsx(DesignTinyMenuGroup, { items: item.children.map((child) => {
-		var _child$item$id2, _child$item7;
+	return /* @__PURE__ */ jsx(DesignTinyMenuGroup, { items: visibleChildren.map((child) => {
+		var _child$item9, _child$item10, _child$item$id3, _child$item11;
 		return {
 			key: child.key,
 			onClick: () => {
-				var _child$item$id, _child$item2, _child$item3, _child$item4, _child$item5, _child$item6;
+				var _child$item$id2, _child$item4, _child$item5, _child$item6, _child$item7, _child$item8;
 				onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-					label: (_child$item$id = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.id) !== null && _child$item$id !== void 0 ? _child$item$id : child.key,
-					commandId: (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.commandId,
-					id: (_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.id,
-					tooltip: ((_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.tooltip) && localeService.t((_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.tooltip)
+					label: (_child$item$id2 = (_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : child.key,
+					commandId: (_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.commandId,
+					id: (_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.id,
+					tooltip: ((_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.tooltip) && localeService.t((_child$item8 = child.item) === null || _child$item8 === void 0 ? void 0 : _child$item8.tooltip)
 				});
 			},
 			className: "",
+			iconClassName: ((_child$item9 = child.item) === null || _child$item9 === void 0 ? void 0 : _child$item9.icon) === "TextTypeIcon" ? "!univer-size-3.5" : void 0,
 			Icon: componentManager.get(child.item.icon),
-			active: activeItems.includes((_child$item$id2 = (_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : "")
+			active: resolveMenuItemActiveState((_child$item10 = child.item) === null || _child$item10 === void 0 ? void 0 : _child$item10.id, activeItems.includes((_child$item$id3 = (_child$item11 = child.item) === null || _child$item11 === void 0 ? void 0 : _child$item11.id) !== null && _child$item$id3 !== void 0 ? _child$item$id3 : ""), activeItemIds)
 		};
 	}) });
 }
 function UIQuickTileMenuGroup(props) {
-	var _item$children;
-	const { item, onOptionSelect } = props;
-	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
+	var _item$children2;
+	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
+	if (!((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length)) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
-		children: item.children.map((menuSchema) => /* @__PURE__ */ jsx(QuickTileMenuItem, {
+		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ jsx(QuickTileMenuItem, {
 			menuSchema,
+			activeItemIds,
 			onOptionSelect
 		}, menuSchema.key))
 	});
@@ -4191,6 +4287,7 @@ const contentClassName = "univer-inline-flex univer-items-center univer-gap-2";
 const menuViewportPadding = 8;
 const submenuOverlapOffset = 2;
 const submenuVisualGap = 20;
+const CONTEXT_MENU_SUBMENU_CLOSE_DELAY = 500;
 const CONTEXT_MENU_SUBMENU_PORTAL_ATTR = "data-u-context-menu-submenu";
 function isNonSelectableLabel(label) {
 	return typeof label === "object" && (label === null || label === void 0 ? void 0 : label.selectable) === false;
@@ -4198,9 +4295,15 @@ function isNonSelectableLabel(label) {
 function isNonHoverableLabel(label) {
 	return typeof label === "object" && (label === null || label === void 0 ? void 0 : label.hoverable) === false;
 }
+function hasRenderableContextMenuSchema(menuSchema) {
+	var _menuSchema$children;
+	if (menuSchema.item) return true;
+	if (!((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length)) return false;
+	return menuSchema.children.some((childSchema) => Boolean(childSchema.item));
+}
 function ContextMenuPanel(props) {
 	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuSessionVersion = 0, className, onOptionSelect } = props;
+	const { menuType, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, onOptionSelect } = props;
 	const menuManagerService = useDependency(IMenuManagerService);
 	const layoutService = useDependency(ILayoutService);
 	const [menuElement, setMenuElement] = useState(null);
@@ -4244,23 +4347,26 @@ function ContextMenuPanel(props) {
 			menuSchemas: menuItems,
 			menuSessionVersion,
 			submenuPortalContainer,
+			activeItemIds,
+			hiddenItemIds,
 			onOptionSelect,
 			maxMenuHeight
 		})
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuSessionVersion, submenuPortalContainer, activeItemIds, hiddenItemIds, onOptionSelect, maxMenuHeight } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const visibleSchemas = useMemo(() => {
 		return menuSchemas.filter((item) => {
+			if (!hasRenderableContextMenuSchema(item)) return false;
 			if (!item.children) return true;
 			return !hiddenGroupStates[item.key];
 		});
 	}, [hiddenGroupStates, menuSchemas]);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: visibleSchemas.map((menuSchema, index) => {
-		var _menuSchema$children;
+		var _menuSchema$children2;
 		const hasSeparator = index !== visibleSchemas.length - 1;
 		if (menuSchema.item) return /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
@@ -4268,19 +4374,38 @@ function ContextMenuMenu(props) {
 			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
-			maxMenuHeight
+			maxMenuHeight,
+			hiddenItemIds
 		}, menuSchema.key);
-		if (!((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length)) return null;
+		if (!((_menuSchema$children2 = menuSchema.children) === null || _menuSchema$children2 === void 0 ? void 0 : _menuSchema$children2.length)) return null;
 		if (menuSchema.quickLayout) return /* @__PURE__ */ jsx("div", {
 			className: clsx("univer-py-1", hasSeparator && borderBottomClassName),
 			children: menuSchema.quickLayout === "tile" ? /* @__PURE__ */ jsx(UIQuickTileMenuGroup, {
 				item: menuSchema,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect
 			}) : /* @__PURE__ */ jsx(UITinyMenuGroup, {
 				item: menuSchema,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect
 			})
 		}, menuSchema.key);
+		if (menuSchema.tiny) return /* @__PURE__ */ jsx("div", {
+			className: clsx("univer-flex univer-items-center univer-gap-1 univer-py-1", hasSeparator && borderBottomClassName),
+			children: menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ jsx(ContextMenuMenuItem, {
+				menuKey: childSchema.key,
+				menuItem: childSchema.item,
+				menuSessionVersion,
+				submenuPortalContainer,
+				activeItemIds,
+				hiddenItemIds,
+				onOptionSelect,
+				maxMenuHeight,
+				compact: true
+			}, childSchema.key))
+		}, menuSchema.key);
 		return /* @__PURE__ */ jsxs("div", {
 			className: clsx("univer-grid univer-gap-1 univer-py-1", hasSeparator && borderBottomClassName),
 			children: [menuSchema.title && /* @__PURE__ */ jsx("strong", {
@@ -4291,6 +4416,8 @@ function ContextMenuMenu(props) {
 				menuItem: childSchema.item,
 				menuSessionVersion,
 				submenuPortalContainer,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect,
 				maxMenuHeight
 			}, childSchema.key))]
@@ -4298,8 +4425,9 @@ function ContextMenuMenu(props) {
 	}) });
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
-	const direction = useObservable(useDependency(LocaleService).direction$);
+	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, activeItemIds, hiddenItemIds = [], compact = false, onOptionSelect, maxMenuHeight } = props;
+	const localeService = useDependency(LocaleService);
+	const direction = useObservable(localeService.direction$);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const disabled = useObservable(menuItem.disabled$, false);
 	const activated = useObservable(menuItem.activated$, false);
@@ -4317,6 +4445,7 @@ function ContextMenuMenuItem(props) {
 	const [submenuPlacement, setSubmenuPlacement] = useState("right");
 	const menuItemElementRef = useRef(null);
 	const submenuElementRef = useRef(null);
+	const submenuCloseTimerRef = useRef(null);
 	const selections = useMemo(() => {
 		if (menuItem.type !== 1 && menuItem.type !== 2) return [];
 		if (selectionsFromObservable) return selectionsFromObservable;
@@ -4338,9 +4467,23 @@ function ContextMenuMenuItem(props) {
 	const hasSelectionSubmenu = selections.length > 0;
 	const hasSubItemSubmenu = subMenuItems.length > 0;
 	const hasSubmenu = hasSelectionSubmenu || hasSubItemSubmenu;
+	const selectionsCommandId = selectorItem.selectionsCommandId;
+	const clearSubmenuCloseTimer = useCallback(() => {
+		if (submenuCloseTimerRef.current == null) return;
+		clearTimeout(submenuCloseTimerRef.current);
+		submenuCloseTimerRef.current = null;
+	}, []);
+	const scheduleSubmenuClose = useCallback(() => {
+		clearSubmenuCloseTimer();
+		submenuCloseTimerRef.current = setTimeout(() => {
+			submenuCloseTimerRef.current = null;
+			setSubmenuVisible(false);
+		}, 500);
+	}, [clearSubmenuCloseTimer]);
 	useEffect(() => {
 		setInputValue(value);
 	}, [value]);
+	useEffect(() => () => clearSubmenuCloseTimer(), [clearSubmenuCloseTimer]);
 	useEffect(() => {
 		if (!submenuVisible) {
 			setSubmenuPositionReady(false);
@@ -4377,19 +4520,30 @@ function ContextMenuMenuItem(props) {
 		hasSelectionSubmenu,
 		hasSubItemSubmenu
 	]);
-	if (hidden) return null;
+	const hiddenById = menuItem.id != null && hiddenItemIds.includes(menuItem.id) || hiddenItemIds.includes(menuKey);
+	if (hidden || hiddenById) return null;
 	const onChange = (v) => {
 		setInputValue(isRealNum(v) && typeof v === "string" ? Number.parseInt(v) : v);
 	};
 	const onSubmenuOptionSelect = (option) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
+		clearSubmenuCloseTimer();
 		setSubmenuVisible(false);
 	};
-	const itemClassName = clsx("univer-relative univer-flex univer-min-h-8 univer-w-full univer-items-center univer-justify-between univer-gap-3 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white", disabled ? "univer-cursor-not-allowed univer-opacity-60" : `
+	const itemClassName = clsx(compact ? `
+              univer-relative univer-flex univer-size-8 univer-items-center univer-justify-center univer-rounded-md
+              univer-border-none univer-bg-transparent univer-p-0 univer-text-left univer-text-sm
+              dark:!univer-text-white
+            ` : `
+              univer-relative univer-flex univer-min-h-8 univer-w-full univer-items-center univer-justify-between
+              univer-gap-3 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left
+              univer-text-sm
+              dark:!univer-text-white
+            `, disabled ? "univer-cursor-not-allowed univer-opacity-60" : `
               univer-cursor-pointer
               hover:univer-bg-gray-50
               dark:hover:!univer-bg-gray-600
-            `, activated && `
+            `, resolveMenuItemActiveState(menuItem.id, activated, activeItemIds) && `
           univer-bg-gray-200
           dark:!univer-bg-gray-600
         `);
@@ -4397,7 +4551,7 @@ function ContextMenuMenuItem(props) {
 		className: contentClassName,
 		children: [/* @__PURE__ */ jsx(CustomLabel, {
 			value: inputValue,
-			title: menuItem.title,
+			title: compact ? void 0 : menuItem.title,
 			label: menuItem.label,
 			icon: menuItem.icon,
 			onChange
@@ -4413,6 +4567,7 @@ function ContextMenuMenuItem(props) {
 		ref: menuItemElementRef,
 		className: "univer-relative",
 		onMouseEnter: () => {
+			clearSubmenuCloseTimer();
 			if (hasSubmenu && !disabled) {
 				setSubmenuPositionReady(false);
 				setSubmenuVisible(true);
@@ -4423,7 +4578,7 @@ function ContextMenuMenuItem(props) {
 				var _submenuElementRef$cu;
 				const nextTarget = event.relatedTarget;
 				if (nextTarget && ((_submenuElementRef$cu = submenuElementRef.current) === null || _submenuElementRef$cu === void 0 ? void 0 : _submenuElementRef$cu.contains(nextTarget))) return;
-				setSubmenuVisible(false);
+				scheduleSubmenuClose();
 			}
 		},
 		children: [renderAsContainer ? /* @__PURE__ */ jsxs("div", {
@@ -4434,8 +4589,21 @@ function ContextMenuMenuItem(props) {
 			type: "button",
 			className: interactiveItemClassName,
 			disabled,
+			title: compact && typeof menuItem.tooltip === "string" ? localeService.t(menuItem.tooltip) : void 0,
 			onClick: () => {
+				clearSubmenuCloseTimer();
 				if (hasSubmenu) {
+					if (canExecuteItem) {
+						const item = menuItem;
+						onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+							commandId: item.commandId,
+							params: item.params,
+							value: inputValue,
+							id: item.id,
+							label: menuKey
+						});
+						return;
+					}
 					setSubmenuPositionReady(false);
 					setSubmenuVisible(true);
 					return;
@@ -4444,12 +4612,13 @@ function ContextMenuMenuItem(props) {
 				const item = menuItem;
 				onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
 					commandId: item.commandId,
+					params: item.params,
 					value: inputValue,
 					id: item.id,
 					label: menuKey
 				});
 			},
-			children: [contentNode, hasSubmenu && /* @__PURE__ */ jsx(MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
+			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ jsx(MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? createPortal(/* @__PURE__ */ jsx("div", {
 			ref: submenuElementRef,
 			dir: direction,
@@ -4465,11 +4634,12 @@ function ContextMenuMenuItem(props) {
 				visibility: submenuPositionReady ? "visible" : "hidden",
 				pointerEvents: submenuPositionReady ? "auto" : "none"
 			},
+			onMouseEnter: clearSubmenuCloseTimer,
 			onMouseLeave: (event) => {
 				var _menuItemElementRef$c;
 				const nextTarget = event.relatedTarget;
 				if (nextTarget && ((_menuItemElementRef$c = menuItemElementRef.current) === null || _menuItemElementRef$c === void 0 ? void 0 : _menuItemElementRef$c.contains(nextTarget))) return;
-				setSubmenuVisible(false);
+				scheduleSubmenuClose();
 			},
 			onWheel: (event) => event.stopPropagation(),
 			children: /* @__PURE__ */ jsxs("div", {
@@ -4498,12 +4668,13 @@ function ContextMenuMenuItem(props) {
 								label: option.label,
 								icon: option.icon,
 								onChange: (optionValue) => {
+									var _option$commandId;
 									onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 										...option,
 										value: optionValue,
 										id: menuItem.id,
 										label: menuKey,
-										commandId: option.commandId
+										commandId: (_option$commandId = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : selectionsCommandId
 									});
 								}
 							})
@@ -4513,11 +4684,12 @@ function ContextMenuMenuItem(props) {
 							className: optionClassName,
 							disabled: option.disabled,
 							onClick: () => {
+								var _option$commandId2;
 								onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 									...option,
 									id: menuItem.id,
 									label: menuKey,
-									commandId: option.commandId
+									commandId: (_option$commandId2 = option.commandId) !== null && _option$commandId2 !== void 0 ? _option$commandId2 : selectionsCommandId
 								});
 							},
 							children: optionContentNode
@@ -4531,6 +4703,8 @@ function ContextMenuMenuItem(props) {
 					menuSchemas: subMenuItems,
 					menuSessionVersion,
 					submenuPortalContainer,
+					activeItemIds,
+					hiddenItemIds,
 					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
 				})]
@@ -4542,8 +4716,8 @@ function useContextGroupHiddenStates$1(menuSchemas) {
 	const [hiddenStates, setHiddenStates] = useState({});
 	useEffect(() => {
 		const subscriptions = menuSchemas.map((menuSchema) => {
-			var _menuSchema$children2;
-			if (!((_menuSchema$children2 = menuSchema.children) === null || _menuSchema$children2 === void 0 ? void 0 : _menuSchema$children2.length)) return null;
+			var _menuSchema$children3;
+			if (!((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.length)) return null;
 			return combineLatest(menuSchema.children.map((childSchema) => {
 				var _childSchema$item$hid, _childSchema$item;
 				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : of(false);
@@ -4712,7 +4886,9 @@ function DesktopContextMenu() {
 		onRequestClose: handleClose,
 		onOptionSelect: (params) => {
 			const { label: id, commandId, value } = params;
-			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, { value });
+			const rawParams = typeof params.params === "function" ? params.params() : params.params;
+			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
+			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
 			injector.get(ILayoutService).focus();
 			handleClose();
 		}
@@ -5251,7 +5427,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.24.0";
+var version = "0.25.0-insiders.20260608-e4336f7";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5319,7 +5495,7 @@ function MobileRibbon(props) {
 		const container = toolbarScrollRef.current;
 		if (!container) return;
 		container.scrollBy({
-			left: direction === "left" ? -toolbarScrollOffset : toolbarScrollOffset,
+			left: direction === "left" ? -168 : toolbarScrollOffset,
 			behavior: "smooth"
 		});
 	}
@@ -5360,7 +5536,7 @@ function MobileRibbon(props) {
                                       dark:!univer-text-gray-200
                                     `),
 							onClick: () => selectTab(index),
-							children: [localeService.t(group.key), active && /* @__PURE__ */ jsx("span", { className: "\n                                          univer-absolute univer-bottom-0 univer-left-1/2 univer-h-0.5 univer-w-8\n                                          -univer-translate-x-1/2 univer-rounded-full univer-bg-primary-600\n                                          dark:!univer-bg-primary-400\n                                        " })]
+							children: [localeService.t(group.title || group.key), active && /* @__PURE__ */ jsx("span", { className: "\n                                          univer-absolute univer-bottom-0 univer-left-1/2 univer-h-0.5 univer-w-8\n                                          -univer-translate-x-1/2 univer-rounded-full univer-bg-primary-600\n                                          dark:!univer-bg-primary-400\n                                        " })]
 						}, group.key);
 					})
 				}),
@@ -5781,8 +5957,8 @@ function MobileContextMenu() {
 	}
 	const sheetTitle = useMemo(() => {
 		switch (menuType) {
-			case "contextMenu.rowHeader": return localeService.t("row");
-			case "contextMenu.colHeader": return localeService.t("column");
+			case "contextMenu.rowHeader": return localeService.t("ui.row");
+			case "contextMenu.colHeader": return localeService.t("ui.column");
 			default: return "";
 		}
 	}, [localeService, menuType]);
@@ -5792,7 +5968,7 @@ function MobileContextMenu() {
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": localeService.t("rangeSelector.cancel"),
+			"aria-label": localeService.t("ui.rangeSelector.cancel"),
 			className: "univer-absolute univer-inset-0 univer-bg-[rgba(15,23,42,0.32)] univer-backdrop-blur-[2px]",
 			onClick: handleClose
 		}), /* @__PURE__ */ jsxs("section", {
@@ -5813,7 +5989,7 @@ function MobileContextMenu() {
 						})
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": localeService.t("rangeSelector.cancel"),
+						"aria-label": localeService.t("ui.rangeSelector.cancel"),
 						className: "\n                              univer-flex univer-size-8 univer-shrink-0 univer-appearance-none univer-items-center\n                              univer-justify-center univer-rounded-full univer-border-0 univer-bg-white univer-p-0\n                              univer-leading-none univer-text-gray-600 univer-shadow-sm univer-outline-none\n                              univer-ring-0 univer-transition-colors\n                              hover:univer-bg-gray-100\n                              active:univer-bg-gray-200\n                            ",
 						style: { margin: 0 },
 						onClick: handleClose,
@@ -6039,13 +6215,40 @@ const INotificationService = createIdentifier("ui.notification.service");
 //#endregion
 //#region src/services/before-close/before-close.service.ts
 const IBeforeCloseService = createIdentifier("univer.ui.before-close-service");
-let DesktopBeforeCloseService = class DesktopBeforeCloseService {
+let DesktopBeforeCloseService = class DesktopBeforeCloseService extends Disposable {
 	constructor(_notificationService) {
+		super();
 		this._notificationService = _notificationService;
 		_defineProperty(this, "_beforeUnloadCallbacks", []);
 		_defineProperty(this, "_onCloseCallbacks", []);
+		_defineProperty(this, "_beforeUnloadHandler", void 0);
+		_defineProperty(this, "_unloadHandler", void 0);
+		this._beforeUnloadHandler = (_event) => {
+			let event = _event;
+			const message = this._beforeUnloadCallbacks.map((callback) => callback()).filter((m) => !!m).join("\n");
+			if (message) {
+				this._notificationService.show({
+					type: "error",
+					title: "Some changes are not saved",
+					content: message
+				});
+				if (typeof event === "undefined") event = window.event;
+				event.returnValue = message;
+				return message;
+			}
+		};
+		this._unloadHandler = () => {
+			this._onCloseCallbacks.forEach((callback) => callback());
+		};
 		this._init();
 	}
+	dispose() {
+		window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+		window.removeEventListener("unload", this._unloadHandler);
+		this._beforeUnloadCallbacks = [];
+		this._onCloseCallbacks = [];
+		super.dispose();
+	}
 	registerBeforeClose(callback) {
 		this._beforeUnloadCallbacks.push(callback);
 		return { dispose: () => {
@@ -6059,23 +6262,8 @@ let DesktopBeforeCloseService = class DesktopBeforeCloseService {
 		} };
 	}
 	_init() {
-		window.addEventListener("beforeunload", (_event) => {
-			let event = _event;
-			const message = this._beforeUnloadCallbacks.map((callback) => callback()).filter((m) => !!m).join("\n");
-			if (message) {
-				this._notificationService.show({
-					type: "error",
-					title: "Some changes are not saved",
-					content: message
-				});
-				if (typeof event === "undefined") event = window.event;
-				event.returnValue = message;
-				return message;
-			}
-		});
-		window.addEventListener("unload", () => {
-			this._onCloseCallbacks.forEach((callback) => callback());
-		});
+		window.addEventListener("beforeunload", this._beforeUnloadHandler);
+		window.addEventListener("unload", this._unloadHandler);
 	}
 };
 DesktopBeforeCloseService = __decorate([__decorateParam(0, INotificationService)], DesktopBeforeCloseService);
@@ -6263,14 +6451,25 @@ let BrowserClipboardService = class BrowserClipboardService extends Disposable {
 		this._logService = _logService;
 		this._notificationService = _notificationService;
 	}
-	async write(text, html) {
-		if (!this.supportClipboard) return this._legacyCopyHtml(html);
+	async write(text, html, customData) {
+		if (!this.supportClipboard) 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 }),
-				[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE })
+				[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE }),
+				...Object.fromEntries(Object.entries(customData !== null && customData !== void 0 ? customData : {}).map(([type, value]) => [type, new Blob([value], { type })]))
 			})]);
 		} catch (error) {
+			if (customData && Object.keys(customData).length) try {
+				return await navigator.clipboard.write([new ClipboardItem({
+					[PLAIN_TEXT_CLIPBOARD_MIME_TYPE]: new Blob([text], { type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE }),
+					[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE })
+				})]);
+			} catch (fallbackError) {
+				this._logService.error("[BrowserClipboardService]", fallbackError);
+				this._showClipboardAuthenticationNotification();
+				return;
+			}
 			this._logService.error("[BrowserClipboardService]", error);
 			this._showClipboardAuthenticationNotification();
 		}
@@ -6304,17 +6503,34 @@ let BrowserClipboardService = class BrowserClipboardService extends Disposable {
 			return "";
 		}
 	}
-	_legacyCopyHtml(html) {
+	_legacyCopyHtml(text, html) {
 		const activeElement = document.activeElement;
-		const container = createCopyHtmlContainer();
-		document.body.appendChild(container);
-		container.replaceChildren(sanitizeHtmlForClipboard(html));
+		const sanitizedHtml = serializeSanitizedHtmlForClipboard(html);
+		let handledByClipboardEvent = false;
+		const onCopy = (event) => {
+			if (!event.clipboardData) return;
+			event.preventDefault();
+			event.clipboardData.setData(PLAIN_TEXT_CLIPBOARD_MIME_TYPE, text);
+			event.clipboardData.setData(HTML_CLIPBOARD_MIME_TYPE, sanitizedHtml);
+			handledByClipboardEvent = true;
+		};
+		document.addEventListener("copy", onCopy);
 		try {
-			select(container);
 			document.execCommand("copy");
+			if (!handledByClipboardEvent) {
+				const container = createCopyHtmlContainer();
+				document.body.appendChild(container);
+				container.innerHTML = sanitizedHtml;
+				try {
+					select(container);
+					document.execCommand("copy");
+				} finally {
+					document.body.removeChild(container);
+				}
+			}
 		} finally {
+			document.removeEventListener("copy", onCopy);
 			if (activeElement instanceof HTMLElement) activeElement.focus();
-			document.body.removeChild(container);
 		}
 	}
 	_legacyCopyText(text) {
@@ -6334,8 +6550,8 @@ let BrowserClipboardService = class BrowserClipboardService extends Disposable {
 		var _this$_notificationSe;
 		(_this$_notificationSe = this._notificationService) === null || _this$_notificationSe === void 0 || _this$_notificationSe.show({
 			type: "warning",
-			title: this._localeService.t("clipboard.authentication.title"),
-			content: this._localeService.t("clipboard.authentication.content")
+			title: this._localeService.t("ui.clipboard.authentication.title"),
+			content: this._localeService.t("ui.clipboard.authentication.content")
 		});
 	}
 };
@@ -6372,6 +6588,11 @@ function sanitizeHtmlForClipboard(html) {
 	});
 	return fragment;
 }
+function serializeSanitizedHtmlForClipboard(html) {
+	const container = document.createElement("div");
+	container.appendChild(sanitizeHtmlForClipboard(html));
+	return container.innerHTML;
+}
 function sanitizeHtmlNode(node) {
 	if (node.nodeType === Node.TEXT_NODE) {
 		var _node$textContent;
@@ -6768,29 +6989,215 @@ var DesktopLocalFileService = class extends Disposable {
 */
 const ILocalFileService = createIdentifier("univer-ui.local-file.service");
 
+//#endregion
+//#region src/utils/storage-driver.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DB_NAME = "UniverLocalStorage";
+const STORE_NAME = "kv";
+const DB_VERSION = 1;
+var IndexedDBDriver = class {
+	constructor() {
+		_defineProperty(this, "_db", void 0);
+		this._db = this._init();
+	}
+	_init() {
+		return new Promise((resolve, reject) => {
+			const req = indexedDB.open(DB_NAME, DB_VERSION);
+			req.onerror = () => reject(req.error);
+			req.onsuccess = () => resolve(req.result);
+			req.onupgradeneeded = () => {
+				req.result.createObjectStore(STORE_NAME);
+			};
+		});
+	}
+	_store(mode) {
+		return this._db.then((db) => {
+			return db.transaction(STORE_NAME, mode).objectStore(STORE_NAME);
+		});
+	}
+	async getItem(key) {
+		const store = await this._store("readonly");
+		return new Promise((resolve, reject) => {
+			const req = store.get(key);
+			req.onsuccess = () => {
+				var _req$result;
+				return resolve((_req$result = req.result) !== null && _req$result !== void 0 ? _req$result : null);
+			};
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async setItem(key, value) {
+		const store = await this._store("readwrite");
+		return new Promise((resolve, reject) => {
+			const req = store.put(value, key);
+			req.onsuccess = () => resolve(value);
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async removeItem(key) {
+		const store = await this._store("readwrite");
+		return new Promise((resolve, reject) => {
+			const req = store.delete(key);
+			req.onsuccess = () => resolve();
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async clear() {
+		const store = await this._store("readwrite");
+		return new Promise((resolve, reject) => {
+			const req = store.clear();
+			req.onsuccess = () => resolve();
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async key(index) {
+		const store = await this._store("readonly");
+		return new Promise((resolve, reject) => {
+			const req = store.openCursor();
+			let i = 0;
+			req.onsuccess = () => {
+				const cursor = req.result;
+				if (!cursor) return resolve(null);
+				if (i === index) return resolve(cursor.key);
+				i++;
+				cursor.continue();
+			};
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async keys() {
+		const store = await this._store("readonly");
+		return new Promise((resolve, reject) => {
+			const req = store.openCursor();
+			const keys = [];
+			req.onsuccess = () => {
+				const cursor = req.result;
+				if (!cursor) return resolve(keys);
+				keys.push(cursor.key);
+				cursor.continue();
+			};
+			req.onerror = () => reject(req.error);
+		});
+	}
+	async iterate(iteratee) {
+		const store = await this._store("readonly");
+		return new Promise((resolve, reject) => {
+			const req = store.openCursor();
+			let i = 1;
+			let result = void 0;
+			req.onsuccess = () => {
+				const cursor = req.result;
+				if (!cursor) return resolve(result);
+				result = iteratee(cursor.value, cursor.key, i++);
+				if (result !== void 0) return resolve(result);
+				cursor.continue();
+			};
+			req.onerror = () => reject(req.error);
+		});
+	}
+};
+var LocalStorageDriver = class {
+	constructor() {
+		_defineProperty(this, "_prefix", `${DB_NAME}/`);
+	}
+	_key(key) {
+		return this._prefix + key;
+	}
+	_rawKey(key) {
+		return key.startsWith(this._prefix) ? key.slice(this._prefix.length) : key;
+	}
+	async getItem(key) {
+		try {
+			const item = localStorage.getItem(this._key(key));
+			return item ? JSON.parse(item) : null;
+		} catch {
+			return null;
+		}
+	}
+	async setItem(key, value) {
+		localStorage.setItem(this._key(key), JSON.stringify(value));
+		return value;
+	}
+	async removeItem(key) {
+		localStorage.removeItem(this._key(key));
+	}
+	async clear() {
+		const toRemove = [];
+		for (let i = 0; i < localStorage.length; i++) {
+			const k = localStorage.key(i);
+			if (k.startsWith(this._prefix)) toRemove.push(k);
+		}
+		toRemove.forEach((k) => localStorage.removeItem(k));
+	}
+	async key(index) {
+		var _keys$index;
+		return (_keys$index = this._keys()[index]) !== null && _keys$index !== void 0 ? _keys$index : null;
+	}
+	async keys() {
+		return this._keys();
+	}
+	_keys() {
+		const keys = [];
+		for (let i = 0; i < localStorage.length; i++) {
+			const k = localStorage.key(i);
+			if (k.startsWith(this._prefix)) keys.push(this._rawKey(k));
+		}
+		return keys;
+	}
+	async iterate(iteratee) {
+		const keys = this._keys();
+		for (let i = 0; i < keys.length; i++) {
+			const key = keys[i];
+			const result = iteratee(await this.getItem(key), key, i + 1);
+			if (result !== void 0) return result;
+		}
+	}
+};
+function createDriver() {
+	try {
+		if (typeof indexedDB !== "undefined") return new IndexedDBDriver();
+	} catch {}
+	return new LocalStorageDriver();
+}
+const browserStorage = createDriver();
+
 //#endregion
 //#region src/services/local-storage/local-storage.service.ts
 var DesktopLocalStorageService = class {
 	getItem(key) {
-		return localforage.getItem(key);
+		return browserStorage.getItem(key);
 	}
 	setItem(key, value) {
-		return localforage.setItem(key, value);
+		return browserStorage.setItem(key, value);
 	}
 	removeItem(key) {
-		return localforage.removeItem(key);
+		return browserStorage.removeItem(key);
 	}
 	clear() {
-		return localforage.clear();
+		return browserStorage.clear();
 	}
 	key(index) {
-		return localforage.key(index);
+		return browserStorage.key(index);
 	}
 	keys() {
-		return localforage.keys();
+		return browserStorage.keys();
 	}
 	iterate(iteratee) {
-		return localforage.iterate(iteratee);
+		return browserStorage.iterate(iteratee);
 	}
 };
 
@@ -7911,4 +8318,4 @@ const PrintFloatDomSingle = memo((props) => {
 });
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, t, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };