@univerjs/ui 1.2.0 → 1.3.0

package/lib/index.js

@@ -1374,45 +1374,102 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 				["ribbon.start"]: {
 					order: 0,
 					title: "ui.ribbon.start",
-					["ribbon.start.history"]: { order: 0 },
-					["ribbon.start.format"]: { order: 1 },
-					["ribbon.start.layout"]: { order: 2 },
-					["ribbon.start.number"]: { order: 3 },
-					["ribbon.start.others"]: { order: 4 }
+					["ribbon.start.history"]: {
+						order: 0,
+						title: "ui.ribbon.groups.clipboard"
+					},
+					["ribbon.start.format"]: {
+						order: 1,
+						title: "ui.ribbon.groups.font"
+					},
+					["ribbon.start.layout"]: {
+						order: 2,
+						title: "ui.ribbon.groups.layout"
+					},
+					["ribbon.start.number"]: {
+						order: 3,
+						title: "ui.ribbon.groups.number"
+					},
+					["ribbon.start.others"]: {
+						order: 4,
+						title: "ui.ribbon.groups.tools"
+					}
 				},
 				["ribbon.insert"]: {
 					order: 1,
 					title: "ui.ribbon.insert",
-					["ribbon.insert.edit"]: { order: 0 },
-					["ribbon.insert.media"]: { order: 1 },
-					["ribbon.insert.cell"]: { order: 2 },
-					["ribbon.insert.others"]: { order: 3 }
+					["ribbon.insert.edit"]: {
+						order: 0,
+						title: "ui.ribbon.groups.editing"
+					},
+					["ribbon.insert.media"]: {
+						order: 1,
+						title: "ui.ribbon.groups.media"
+					},
+					["ribbon.insert.cell"]: {
+						order: 2,
+						title: "ui.ribbon.groups.cells"
+					},
+					["ribbon.insert.others"]: {
+						order: 3,
+						title: "ui.ribbon.groups.tools"
+					}
 				},
 				["ribbon.formulas"]: {
 					order: 2,
 					title: "ui.ribbon.formulas",
-					["ribbon.formulas.basic"]: { order: 0 },
-					["ribbon.formulas.others"]: { order: 1 }
+					["ribbon.formulas.basic"]: {
+						order: 0,
+						title: "ui.ribbon.groups.formulas"
+					},
+					["ribbon.formulas.others"]: {
+						order: 1,
+						title: "ui.ribbon.groups.tools"
+					}
 				},
 				["ribbon.data"]: {
 					order: 3,
 					title: "ui.ribbon.data",
-					["ribbon.data.formulas"]: { order: 0 },
-					["ribbon.data.rules"]: { order: 1 },
-					["ribbon.data.organization"]: { order: 2 },
-					["ribbon.data.others"]: { order: 3 }
+					["ribbon.data.formulas"]: {
+						order: 0,
+						title: "ui.ribbon.groups.formulas"
+					},
+					["ribbon.data.rules"]: {
+						order: 1,
+						title: "ui.ribbon.groups.rules"
+					},
+					["ribbon.data.organization"]: {
+						order: 2,
+						title: "ui.ribbon.groups.organization"
+					},
+					["ribbon.data.others"]: {
+						order: 3,
+						title: "ui.ribbon.groups.tools"
+					}
 				},
 				["ribbon.view"]: {
 					order: 4,
 					title: "ui.ribbon.view",
-					["ribbon.view.display"]: { order: 0 },
-					["ribbon.view.Visibility"]: { order: 0 },
-					["ribbon.view.others"]: { order: 0 }
+					["ribbon.view.display"]: {
+						order: 0,
+						title: "ui.ribbon.groups.display"
+					},
+					["ribbon.view.Visibility"]: {
+						order: 0,
+						title: "ui.ribbon.groups.visibility"
+					},
+					["ribbon.view.others"]: {
+						order: 0,
+						title: "ui.ribbon.groups.tools"
+					}
 				},
 				["ribbon.others"]: {
 					order: 5,
 					title: "ui.ribbon.others",
-					["ribbon.others.others"]: { order: 0 }
+					["ribbon.others.others"]: {
+						order: 0,
+						title: "ui.ribbon.groups.tools"
+					}
 				}
 			},
 			["contextMenu"]: {
@@ -3375,6 +3432,7 @@ function placeRibbonGridItems(items) {
 		const columnSpan = layout.columnSpan ?? 1;
 		const cells = getCells(layout.row, layout.column, rowSpan, columnSpan);
 		if (!isValidGridGeometry(layout, rowSpan, cells)) {
+			globalThis.console.warn(`[RibbonGrid] Invalid gridLayout for "${item.key}"; using fallback placement.`);
 			fallbackItems.push({ item });
 			continue;
 		}
@@ -3441,6 +3499,83 @@ function getCells(row, column, rowSpan, columnSpan) {
 	return cells;
 }
 
+//#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-px-0 univer-py-0
+univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
+dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600
+disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
+hover:univer-bg-gray-100 whitespace-nowrap univer-w-max
+[&_svg]:univer-shrink-0
+`;
+const toolbarButtonVariants = cva(toolbarButtonClassName, {
+	variants: {
+		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__ */ jsx("button", {
+		type: "button",
+		className: clsx(toolbarButtonVariants({
+			noIcon,
+			active,
+			className
+		})),
+		style,
+		disabled,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		...restProps,
+		children
+	});
+}
+
 //#endregion
 //#region src/views/custom-label/CustomLabel.tsx
 /**
@@ -3543,82 +3678,334 @@ function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 }
 
 //#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-px-0 univer-py-0
-univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
-dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600
-disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
-hover:univer-bg-gray-100 whitespace-nowrap univer-w-max
-[&_svg]:univer-shrink-0
-`;
-const toolbarButtonVariants = cva(toolbarButtonClassName, {
-	variants: {
-		noIcon: {
-			true: "univer-px-2",
-			false: ""
-		},
-		active: {
-			true: "!univer-bg-gray-200 dark:!univer-bg-gray-500",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		noIcon: false,
-		active: false
+//#region src/services/font.service.ts
+const IFontService = createIdentifier("univer.font-service");
+let FontCategory = /* @__PURE__ */ function(FontCategory) {
+	FontCategory["SANS_SERIF"] = "sans-serif";
+	FontCategory["SERIF"] = "serif";
+	FontCategory["MONOSPACE"] = "monospace";
+	FontCategory["DISPLAY"] = "display";
+	FontCategory["HANDWRITING"] = "handwriting";
+	return FontCategory;
+}({});
+const DEFAULT_FONT_LIST = [
+	["宋体", { category: "serif" }],
+	["Arial", { category: "sans-serif" }],
+	["Baskerville", { category: "serif" }],
+	["Comic Sans MS", { category: "handwriting" }],
+	["Courier New", { category: "monospace" }],
+	["Helvetica", { category: "sans-serif" }],
+	["Times New Roman", { category: "serif" }],
+	["Verdana", { category: "sans-serif" }],
+	["Apple LiGothic", { category: "sans-serif" }],
+	["Apple LiSung", { category: "serif" }],
+	["Hei", { category: "sans-serif" }],
+	["Kai", { category: "handwriting" }],
+	["LiHei Pro", { category: "sans-serif" }],
+	["LiSong Pro", { category: "serif" }],
+	["STFangsong", { category: "serif" }],
+	["STHeiti", { category: "sans-serif" }],
+	["STKaiti", { category: "handwriting" }],
+	["STSong", { category: "serif" }],
+	["报隶-繁", { category: "handwriting" }],
+	["报隶-简", { category: "handwriting" }],
+	["冬青黑体简体中文", { category: "sans-serif" }],
+	["黑体-繁", { category: "sans-serif" }],
+	["黑体-简", { category: "sans-serif" }],
+	["华文仿宋", { category: "serif" }],
+	["华文楷体", { category: "handwriting" }],
+	["华文宋体", { category: "serif" }],
+	["楷体-繁", { category: "handwriting" }],
+	["楷体-简", { category: "handwriting" }],
+	["兰亭黑-繁", { category: "sans-serif" }],
+	["兰亭黑-简", { category: "sans-serif" }],
+	["隶变-繁", { category: "handwriting" }],
+	["隶变-简", { category: "handwriting" }],
+	["凌慧体-繁", { category: "handwriting" }],
+	["凌慧体-简", { category: "handwriting" }],
+	["翩翩体-繁", { category: "handwriting" }],
+	["翩翩体-简", { category: "handwriting" }],
+	["苹方-繁", { category: "sans-serif" }],
+	["苹方-港", { category: "sans-serif" }],
+	["苹方-简", { category: "sans-serif" }],
+	["手札体-繁", { category: "handwriting" }],
+	["手札体-简", { category: "handwriting" }],
+	["宋体-繁", { category: "serif" }],
+	["宋体-简", { category: "serif" }],
+	["娃娃体-繁", { category: "handwriting" }],
+	["娃娃体-简", { category: "handwriting" }],
+	["魏碑-繁", { category: "handwriting" }],
+	["魏碑-简", { category: "handwriting" }],
+	["行楷-繁", { category: "handwriting" }],
+	["行楷-简", { category: "handwriting" }],
+	["雅痞-繁", { category: "display" }],
+	["雅痞-简", { category: "display" }],
+	["圆体-繁", { category: "sans-serif" }],
+	["圆体-简", { category: "sans-serif" }],
+	["Arial Black", { category: "sans-serif" }],
+	["Big Caslon", { category: "serif" }],
+	["Courier", { category: "monospace" }],
+	["Didot", { category: "serif" }],
+	["Futura", { category: "sans-serif" }],
+	["Georgia", { category: "serif" }],
+	["Helvetica Neue", { category: "sans-serif" }],
+	["Optima", { category: "sans-serif" }],
+	["Times", { category: "serif" }],
+	["Tahoma", { category: "sans-serif" }],
+	["BIZ UDGothic", { category: "monospace" }],
+	["BIZ UDMincho", { category: "monospace" }],
+	["Hiragino Maru Gothic Pro", { category: "sans-serif" }],
+	["Hiragino Maru Gothic ProN", { category: "sans-serif" }],
+	["Hiragino Mincho Pro", { category: "serif" }],
+	["Hiragino Mincho ProN", { category: "serif" }],
+	["Hiragino Sans", { category: "sans-serif" }],
+	["Klee", { category: "handwriting" }],
+	["Osaka", { category: "sans-serif" }],
+	["Toppan Bunkyu Gothic", { category: "sans-serif" }],
+	["Toppan Bunkyu Midashi Gothic", { category: "sans-serif" }],
+	["Toppan Bunkyu Midashi Mincho", { category: "serif" }],
+	["Toppan Bunkyu Mincho", { category: "serif" }],
+	["Tsukushi A Round Gothic", { category: "sans-serif" }],
+	["Tsukushi B Round Gothic", { category: "sans-serif" }],
+	["YuKyokasho", { category: "handwriting" }],
+	["YuKyokasho Yoko", { category: "handwriting" }],
+	["YuMincho +36p Kana", { category: "serif" }],
+	["American Typewriter", { category: "serif" }],
+	["Andale Mono", { category: "monospace" }],
+	["Apple Chancery", { category: "handwriting" }],
+	["Apple SD Gothic Neo", { category: "sans-serif" }],
+	["Apple Symbols", { category: "display" }],
+	["AppleGothic", { category: "sans-serif" }],
+	["AppleMyungjo", { category: "serif" }],
+	["Arial Unicode MS", { category: "sans-serif" }],
+	["Athelas", { category: "serif" }],
+	["Avenir", { category: "sans-serif" }],
+	["Avenir Next", { category: "sans-serif" }],
+	["Avenir Next Condensed", { category: "sans-serif" }],
+	["Ayuthaya", { category: "sans-serif" }],
+	["Bangla MN", { category: "serif" }],
+	["Bangla Sangam MN", { category: "sans-serif" }],
+	["Bauhaus 93", { category: "display" }],
+	["Bodoni 72", { category: "serif" }],
+	["Bodoni 72 Oldstyle", { category: "serif" }],
+	["Bodoni 72 Smallcaps", { category: "serif" }],
+	["Bodoni Ornaments", { category: "display" }],
+	["Bookshelf Symbol 7", { category: "display" }],
+	["Bradley Hand", { category: "handwriting" }],
+	["Chalkboard", { category: "handwriting" }],
+	["Chalkboard SE", { category: "handwriting" }],
+	["Chalkduster", { category: "handwriting" }],
+	["Charter", { category: "serif" }],
+	["Cochin", { category: "serif" }],
+	["Copperplate", { category: "serif" }],
+	["Devanagari Sangam MN", { category: "sans-serif" }],
+	["Din Alternate", { category: "sans-serif" }],
+	["Euphemia UCAS", { category: "sans-serif" }],
+	["Galvji", { category: "sans-serif" }],
+	["Geneva", { category: "sans-serif" }],
+	["Gill Sans", { category: "sans-serif" }],
+	["Gujarati Sangam MN", { category: "sans-serif" }],
+	["GungSeo", { category: "handwriting" }],
+	["Gurmukhi MN", { category: "serif" }],
+	["Gurmukhi Sangam MN", { category: "sans-serif" }],
+	["HeadLineA", { category: "display" }],
+	["Herculanum", { category: "display" }],
+	["Hiragino Kaku Gothic Pro", { category: "sans-serif" }],
+	["Hiragino Kaku Gothic ProN", { category: "sans-serif" }],
+	["Hiragino Kaku Gothic Std", { category: "sans-serif" }],
+	["Hiragino Kaku Gothic StdN", { category: "sans-serif" }],
+	["Hoefler Text", { category: "serif" }],
+	["Impact", { category: "sans-serif" }],
+	["InaiMathi", { category: "sans-serif" }],
+	["Iowan Old Style", { category: "serif" }],
+	["Kannada MN", { category: "serif" }],
+	["Kannada Sangam MN", { category: "sans-serif" }],
+	["Kefa", { category: "serif" }],
+	["Khmer MN", { category: "serif" }],
+	["Khmer Sangam MN", { category: "sans-serif" }],
+	["Kohinoor Bangla", { category: "sans-serif" }],
+	["Kohinoor Devanagari", { category: "sans-serif" }],
+	["Kohinoor Telugu", { category: "sans-serif" }],
+	["Krungthep", { category: "sans-serif" }],
+	["Lao MN", { category: "serif" }],
+	["Lao Sangam MN", { category: "sans-serif" }],
+	["Lucida Grande", { category: "sans-serif" }],
+	["Luminari", { category: "display" }],
+	["Malayalam MN", { category: "serif" }],
+	["Malayalam Sangam MN", { category: "sans-serif" }],
+	["Marion", { category: "serif" }],
+	["Marker Felt", { category: "handwriting" }],
+	["Menlo", { category: "monospace" }],
+	["Microsoft Sans Serif", { category: "sans-serif" }],
+	["Modern No. 20", { category: "serif" }],
+	["Monaco", { category: "monospace" }],
+	["Mukta Mahee", { category: "sans-serif" }],
+	["Nanum Brush Script", { category: "handwriting" }],
+	["Nanum Gothic", { category: "sans-serif" }],
+	["Nanum Myeongjo", { category: "serif" }],
+	["Nanum Pen Script", { category: "handwriting" }],
+	["Noteworthy", { category: "handwriting" }],
+	["Oriya MN", { category: "serif" }],
+	["Oriya Sangam MN", { category: "sans-serif" }],
+	["Palatino", { category: "serif" }],
+	["Papyrus", { category: "display" }],
+	["PCMyungjo", { category: "monospace" }],
+	["Phosphate", { category: "display" }],
+	["PilGi", { category: "handwriting" }],
+	["Plantagenet Cherokee", { category: "serif" }],
+	["PT Mono", { category: "monospace" }],
+	["PT Sans", { category: "sans-serif" }],
+	["PT Sans Caption", { category: "sans-serif" }],
+	["PT Serif", { category: "serif" }],
+	["PT Serif Caption", { category: "serif" }],
+	["Rockwell", { category: "serif" }],
+	["Sathu", { category: "sans-serif" }],
+	["Savoye LET", { category: "handwriting" }],
+	["Seravek", { category: "sans-serif" }],
+	["Shree Devanagari 714", { category: "sans-serif" }],
+	["SignPainter", { category: "handwriting" }],
+	["Silom", { category: "display" }],
+	["Sinhala MN", { category: "serif" }],
+	["Sinhala Sangam MN", { category: "sans-serif" }],
+	["Skia", { category: "sans-serif" }],
+	["Snell Roundhand", { category: "handwriting" }],
+	["STIXGeneral", { category: "serif" }],
+	["Sukhumvit Set", { category: "sans-serif" }],
+	["Superclarendon", { category: "serif" }],
+	["Tamil MN", { category: "serif" }],
+	["Tamil Sangam MN", { category: "sans-serif" }],
+	["Telugu MN", { category: "serif" }],
+	["Telugu Sangam MN", { category: "sans-serif" }],
+	["Trattatello", { category: "handwriting" }],
+	["Trebuchet MS", { category: "sans-serif" }],
+	["Webdings", { category: "display" }],
+	["Wingdings", { category: "display" }],
+	["Wingdings 2", { category: "display" }],
+	["Wingdings 3", { category: "display" }],
+	["YuGothic", { category: "sans-serif" }],
+	["YuGothic Light", { category: "sans-serif" }],
+	["YuGothic Medium", { category: "sans-serif" }],
+	["Zapfino", { category: "handwriting" }]
+].map(([value, config]) => ({
+	value,
+	label: value,
+	...config
+}));
+let FontService = class FontService {
+	constructor(_configService) {
+		this._configService = _configService;
+		_defineProperty(this, "fonts$", new BehaviorSubject([]));
+		const { customFontFamily } = this._configService.getConfig("ui.config") ?? {};
+		let fonts = [];
+		if (customFontFamily) {
+			if (Array.isArray(customFontFamily)) fonts = [...DEFAULT_FONT_LIST, ...customFontFamily];
+			else if (customFontFamily.override) fonts = [...customFontFamily.list];
+			else fonts = [...DEFAULT_FONT_LIST, ...customFontFamily.list];
+		} else fonts = [...DEFAULT_FONT_LIST];
+		this.fonts$.next(fonts);
 	}
-});
-/**
-* 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);
+	dispose() {
+		this.resetToDefaults();
+		this.fonts$.complete();
+	}
+	getFonts() {
+		return this.fonts$.getValue();
+	}
+	getFontByValue(value) {
+		return this.getFonts().find((font) => font.value === value);
+	}
+	/**
+	* Check if the current browser environment supports the font
+	* @param fontValue
+	* @returns boolean Whether the font is supported
+	*/
+	isFontSupported(fontValue) {
+		const context = document.createElement("canvas").getContext("2d");
+		if (!context) return false;
+		const text = "abcdefghijklmnopqrstuvwxyz0123456789";
+		const size = "72px";
+		const baseFonts = [
+			"monospace",
+			"serif",
+			"sans-serif"
+		];
+		const defaultWidths = {};
+		baseFonts.forEach((base) => {
+			context.font = `${size} ${base}`;
+			defaultWidths[base] = context.measureText(text).width;
+		});
+		return baseFonts.some((base) => {
+			context.font = `${size} "${fontValue}", ${base}`;
+			return context.measureText(text).width !== defaultWidths[base];
+		});
+	}
+	addFont(font) {
+		if (this.getFontByValue(font.value)) throw new Error(`[FontService]: Font with value "${font.value}" already exists.`);
+		const updatedFonts = [...this.getFonts(), font].sort();
+		this.fonts$.next(updatedFonts);
+	}
+	updateFont(value, updates) {
+		const fonts = this.getFonts();
+		const fontIndex = fonts.findIndex((font) => font.value === value);
+		if (fontIndex === -1) throw new Error(`Font with value "${value}" not found.`);
+		const updatedFont = {
+			...fonts[fontIndex],
+			...updates
+		};
+		const updatedFonts = [...fonts];
+		updatedFonts[fontIndex] = updatedFont;
+		this.fonts$.next(updatedFonts);
+	}
+	removeFont(value) {
+		const fonts = this.getFonts();
+		if (fonts.findIndex((font) => font.value === value) === -1) return false;
+		const updatedFonts = fonts.filter((font) => font.value !== value);
+		this.fonts$.next(updatedFonts);
+		return true;
+	}
+	resetToDefaults() {
+		this.fonts$.next([...DEFAULT_FONT_LIST]);
+	}
+};
+FontService = __decorate([__decorateParam(0, IConfigService)], FontService);
+
+//#endregion
+//#region src/views/font-family/use-font-list.ts
+function useFontList() {
+	const fontService = useDependency(IFontService);
+	return {
+		fonts: useObservable(fontService.fonts$, fontService.getFonts()),
+		fontService
 	};
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: clsx(toolbarButtonVariants({
-			noIcon,
-			active,
-			className
-		})),
-		style,
-		disabled,
-		onClick: handleClick,
-		onDoubleClick: handleDoubleClick,
-		...restProps,
-		children
-	});
 }
 
+//#endregion
+//#region src/views/font-family/FontFamilyItem.tsx
+const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+const FontFamilyItem = ({ value, onChange }) => {
+	const localeService = useDependency(LocaleService);
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
+	const { fonts, fontService } = useFontList();
+	function handleSelectFont(nextValue) {
+		onChange(nextValue);
+	}
+	return /* @__PURE__ */ jsx("ul", {
+		dir: direction,
+		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
+		style: { fontFamily: value },
+		children: fonts.map((font) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+			className: "univer-flex univer-h-7 univer-w-full univer-appearance-none univer-items-center univer-justify-between univer-gap-6 univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700",
+			style: { fontFamily: font.value },
+			type: "button",
+			onClick: () => handleSelectFont(font.value),
+			children: [localeService.t(font.label), !fontService.isFontSupported(font.value) && /* @__PURE__ */ jsx(Tooltip, {
+				title: localeService.t("ui.fontFamily.not-supported"),
+				children: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
+			})]
+		}) }, font.value))
+	});
+};
+
 //#endregion
 //#region src/views/components/ribbon/TooltipButtonWrapper.tsx
 const TooltipWrapperContext = createContext({
@@ -3764,10 +4151,6 @@ function DropdownMenuLabel({ icon, value, option, preserveStrokeWidth, onOptionS
 		})]
 	});
 }
-function getOptionKey(option) {
-	var _option$label2;
-	return String(option.id ?? option.commandId ?? option.value ?? (typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name));
-}
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, preserveStrokeWidth, onOptionSelect, dropdownComponent, dropdownMenuComponent: DropdownMenuComponent = DropdownMenu }) {
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 	const shortcutService = useDependency(IShortcutService);
@@ -3900,6 +4283,10 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	function handleEmbedBoundaryFocusOutside(event) {
 		keepInteractionInsideSameEmbedBoundary(event);
 	}
+	function getOptionKey(option) {
+		var _option$label2;
+		return String(option.id ?? option.commandId ?? option.value ?? (typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name));
+	}
 	function handleOptionSelect(option) {
 		var _instanceService$getC, _instanceService$getC2;
 		const target = sheetTarget;
@@ -3931,8 +4318,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			return {
 				type: "item",
 				className: clsx({
-					"focus:univer-bg-gray-0 dark:focus:!univer-bg-gray-800": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false,
-					"!univer-p-0": isSingleEmbeddedCustomPanel
+					"focus:univer-bg-transparent dark:focus:!univer-bg-transparent": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false,
+					"!univer-p-0": isSingleEmbeddedCustomPanel || typeof option.label === "object" && option.label.name === "UI_FONT_FAMILY_ITEM_COMPONENT"
 				}),
 				children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 					icon: option.icon,
@@ -4121,16 +4508,17 @@ const ToolbarItem = forwardRef((props, ref) => {
 	const { value, hidden, disabled, activated } = useToolbarItemStatus(props);
 	const executeCommand = (commandId, params) => {
 		layoutService.focus();
-		commandService.executeCommand(commandId, params);
+		return commandService.executeCommand(commandId, params);
 	};
-	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, large, showLabel, iconSize, iconColor, fullWidth, preserveStrokeWidth, dropdownComponent, dropdownMenuComponent } = props;
+	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, overflow, large, showLabel, iconSize, iconColor, fullWidth, preserveStrokeWidth, dropdownComponent, dropdownMenuComponent } = props;
 	const gridLabel = title ?? tooltip;
 	const shortcutDisplay = useToolbarShortcutDisplay({
 		id,
 		commandId,
 		shortcut
 	});
-	let tooltipTitle = tooltip ? localeService.t(tooltip) : "";
+	const tooltipLabel = tooltip ?? (overflow ? title : void 0);
+	let tooltipTitle = typeof tooltipLabel === "string" ? localeService.t(tooltipLabel) : "";
 	if (shortcutDisplay) tooltipTitle += ` (${shortcutDisplay})`;
 	const { selections } = props;
 	const selections$ = useMemo(() => {
@@ -4157,26 +4545,27 @@ const ToolbarItem = forwardRef((props, ref) => {
 		const selectionsCommandId = props.selectionsCommandId;
 		const bId = commandId ?? id;
 		const sId = selectionsCommandId ?? commandId ?? id;
-		const titleToDisplay = grid ? showLabel ? gridLabel : large ? void 0 : title : title;
 		const customLabelName = typeof label === "string" ? label : (label === null || label === void 0 ? void 0 : label.name) ?? "";
 		const hasCustomLabel = Boolean(componentManager.get(customLabelName));
-		const selectorAriaLabel = tooltip ? localeService.t(tooltip) : typeof titleToDisplay === "string" ? localeService.t(titleToDisplay) : void 0;
+		let titleToDisplay = grid ? showLabel ? gridLabel : large ? void 0 : title : title;
+		if (overflow) titleToDisplay = hasCustomLabel || iconToDisplay && !showLabel ? void 0 : gridLabel;
+		const selectorAriaLabel = tooltip ? localeService.t(tooltip) : typeof title === "string" ? localeService.t(title) : void 0;
 		function handleSelect(option) {
 			if (disabled) return;
 			let commandId = sId;
 			if (option.id) commandId = option.id;
 			const commandParams = typeof option.params === "function" ? option.params(option.value) : option.params;
-			executeCommand(commandId, commandParams ?? { value: option.value });
+			return executeCommand(commandId, commandParams ?? { value: option.value });
 		}
 		function handleSelectionsValueChange(value) {
 			if (disabled) return;
-			executeCommand(sId, { value });
+			return executeCommand(sId, { value });
 		}
 		function handleClick() {
 			if (disabled) return;
 			if (menuType === 2) {
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand(bId, commandParams ?? { value });
+				return executeCommand(bId, commandParams ?? { value });
 			}
 		}
 		if (menuType === 2) return /* @__PURE__ */ jsxs("div", {
@@ -4185,15 +4574,21 @@ const ToolbarItem = forwardRef((props, ref) => {
 			"aria-disabled": disabled,
 			className: clsx(toolbarButtonSelectorRootVariants({ disabled }), {
 				"univer-box-border univer-h-full univer-min-w-14 univer-flex-col !univer-pr-0": grid && large,
-				"univer-box-border univer-h-full": grid && !large
+				"univer-box-border univer-h-full": grid && !large,
+				"!univer-h-auto univer-min-h-7 univer-w-full univer-text-xs": overflow
 			}),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: clsx(toolbarButtonSelectorMainVariants({
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				"aria-label": selectorAriaLabel,
+				"aria-pressed": props.activated$ ? activated : void 0,
+				className: clsx("univer-border-0 univer-bg-transparent univer-text-inherit focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600", 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-6": grid && large,
-					"[&>svg]:univer-size-4": grid && !large
+					"[&>svg]:univer-size-4": grid && !large,
+					"univer-min-h-7 univer-min-w-0 univer-flex-1 univer-gap-1.5 univer-whitespace-normal univer-px-1.5 univer-text-start": overflow
 				}),
 				onClick: handleClick,
 				children: /* @__PURE__ */ jsx(CustomLabel, {
@@ -4215,8 +4610,11 @@ const ToolbarItem = forwardRef((props, ref) => {
 				onOptionSelect: handleSelect,
 				dropdownComponent,
 				dropdownMenuComponent,
-				children: /* @__PURE__ */ jsx("div", {
-					className: clsx(toolbarButtonSelectorTriggerVariants({
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					"aria-label": `${selectorAriaLabel ?? ""} ${localeService.t("ui.ribbon.more")}`,
+					className: clsx("univer-border-0 univer-bg-transparent univer-text-inherit focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600", toolbarButtonSelectorTriggerVariants({
 						disabled,
 						active: activated
 					}), {
@@ -4251,7 +4649,8 @@ const ToolbarItem = forwardRef((props, ref) => {
 					"univer-box-border univer-h-full univer-min-w-14 univer-flex-col univer-justify-center univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-6": grid && large,
 					"univer-box-border univer-h-full": grid && !large,
 					"univer-bg-gray-0 dark:!univer-bg-gray-800": grid && !large && !icon,
-					"[&>svg]:univer-size-4": grid && !large
+					"[&>svg]:univer-size-4": grid && !large,
+					"!univer-h-auto univer-min-h-7 univer-w-full univer-min-w-0 univer-gap-1.5 univer-whitespace-normal univer-px-1.5 univer-text-start univer-text-xs focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 [&>span]:univer-min-w-0 [&>span]:univer-whitespace-normal": overflow
 				}, grid && !large && !icon && borderClassName),
 				children: grid && large ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CustomLabel, {
 					icon: iconToDisplay,
@@ -4283,7 +4682,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 	function renderButtonType() {
 		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (label === null || label === void 0 ? void 0 : label.name) ?? "");
 		const buttonAriaLabel = tooltip ? localeService.t(tooltip) : typeof title === "string" ? localeService.t(title) : void 0;
-		const buttonClassName = clsx(grid && !large && "[&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-6" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0");
+		const buttonClassName = clsx(grid && !large && "[&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-6" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0", overflow && "!univer-h-auto univer-min-h-7 univer-w-full univer-justify-start univer-gap-1.5 univer-whitespace-normal univer-px-1.5 univer-py-1 univer-text-start univer-text-xs focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600");
 		const buttonStyle = grid && large ? {
 			textAlign: "center",
 			whiteSpace: "normal"
@@ -4301,7 +4700,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 				"aria-disabled": disabled,
 				children: /* @__PURE__ */ jsx(CustomLabel, {
 					className: grid && fullWidth ? "!univer-w-full" : void 0,
-					title: grid && showLabel ? gridLabel : title,
+					title: overflow ? void 0 : grid && showLabel ? gridLabel : title,
 					value,
 					label
 				})
@@ -4319,7 +4718,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 			onClick: (event) => {
 				if (props.subId && event.detail > 1) return;
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand(props.commandId ?? props.id, commandParams ?? (typeof value === "undefined" ? void 0 : { value }));
+				return executeCommand(props.commandId ?? props.id, commandParams ?? (typeof value === "undefined" ? void 0 : { value }));
 			},
 			onDoubleClick: () => props.subId && executeCommand(props.subId),
 			children: icon ? /* @__PURE__ */ jsx(CustomLabel, {
@@ -4327,7 +4726,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 				iconSize,
 				preserveStrokeWidth,
 				title: grid && (large || showLabel) ? gridLabel : void 0
-			}) : /* @__PURE__ */ jsx(CustomLabel, { title })
+			}) : /* @__PURE__ */ jsx(CustomLabel, { title: overflow ? gridLabel : title })
 		});
 	}
 	function renderItem() {
@@ -4348,49 +4747,219 @@ const ToolbarItem = forwardRef((props, ref) => {
 	});
 });
 
+//#endregion
+//#region src/views/components/ribbon/RibbonOverflow.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.
+*/
+function RibbonOverflow({ groups, grid = false }) {
+	const localeService = useDependency(LocaleService);
+	const dialogService = useDependency(IDialogService);
+	const sidebarService = useDependency(ISidebarService);
+	const { direction } = useContext(ConfigContext);
+	const [openedGroups, setOpenedGroups] = useState(null);
+	const open = openedGroups === groups;
+	const keyboardRef = useRef(false);
+	const restoreFocusRef = useRef(true);
+	const label = localeService.t("ui.ribbon.more");
+	useEffect(() => {
+		if (!open) return;
+		const closeForPanel = () => {
+			restoreFocusRef.current = false;
+			setOpenedGroups(null);
+		};
+		const sidebar = sidebarService.sidebarOptions$.subscribe((options) => {
+			if (options.visible) closeForPanel();
+		});
+		const dialogs = dialogService.getDialogs$().subscribe((options) => {
+			if (options.some((dialog) => dialog.open)) closeForPanel();
+		});
+		return () => {
+			sidebar.unsubscribe();
+			dialogs.unsubscribe();
+		};
+	}, [
+		open,
+		dialogService,
+		sidebarService
+	]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		open,
+		onOpenChange: (visible) => {
+			if (visible) restoreFocusRef.current = true;
+			setOpenedGroups(visible ? groups : null);
+		},
+		align: direction === "rtl" ? "start" : "end",
+		collisionPadding: 12,
+		"aria-label": label,
+		"data-u-comp": "ribbon-overflow",
+		className: "univer-w-80 univer-max-w-[--radix-popper-available-width] univer-overflow-x-hidden",
+		onOpenAutoFocus: (event) => {
+			if (!keyboardRef.current) event.preventDefault();
+		},
+		onFocusOutside: (event) => {
+			event.preventDefault();
+		},
+		onCloseAutoFocus: (event) => {
+			if (!restoreFocusRef.current) event.preventDefault();
+		},
+		overlay: /* @__PURE__ */ jsx(ToolbarDropdownProvider, { children: /* @__PURE__ */ jsx("div", {
+			className: "univer-px-2 univer-py-1",
+			children: groups.map((group, index) => /* @__PURE__ */ jsxs("section", {
+				"aria-label": group.title ? localeService.t(group.title) : void 0,
+				className: clsx("univer-py-1.5", index > 0 && borderTopClassName),
+				children: [group.title && /* @__PURE__ */ jsx("h3", {
+					className: "univer-m-0 univer-mb-1 univer-px-1 univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-400",
+					children: localeService.t(group.title)
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-flex-wrap univer-items-center univer-gap-1",
+					children: (group.children ?? [group]).map((child) => {
+						var _child$gridLayout, _child$gridLayout2;
+						return child.item && /* @__PURE__ */ jsx("div", {
+							className: "univer-min-w-0 univer-max-w-full [&>span]:univer-block [&>span]:univer-h-full",
+							style: { width: child.item.label && !child.item.icon ? (_child$gridLayout = child.gridLayout) === null || _child$gridLayout === void 0 ? void 0 : _child$gridLayout.width : void 0 },
+							children: /* @__PURE__ */ jsx(ToolbarItem, {
+								...child.item,
+								grid: true,
+								showLabel: (_child$gridLayout2 = child.gridLayout) === null || _child$gridLayout2 === void 0 ? void 0 : _child$gridLayout2.showLabel,
+								fullWidth: true,
+								overflow: true,
+								preserveStrokeWidth: true
+							})
+						}, child.key);
+					})
+				})]
+			}, group.key))
+		}) }),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			onPointerDown: () => {
+				keyboardRef.current = false;
+			},
+			onKeyDown: () => {
+				keyboardRef.current = true;
+			},
+			className: clsx(toolbarButtonClassName, "data-[state=open]:univer-bg-primary-50 data-[state=open]:univer-text-primary-600 focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 dark:data-[state=open]:!univer-bg-gray-700 dark:data-[state=open]:!univer-text-primary-300", grid && "!univer-h-14 !univer-w-14 univer-flex-col univer-gap-1.5 univer-text-xs"),
+			children: grid ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {
+				className: "univer-size-5",
+				preserveStrokeWidth: true
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "univer-flex univer-items-center univer-gap-0.5",
+				children: [label, /* @__PURE__ */ jsx(MoreDownIcon, {
+					className: "univer-size-3",
+					preserveStrokeWidth: true
+				})]
+			})] }) : /* @__PURE__ */ jsx(MoreVerticalIcon, { preserveStrokeWidth: true })
+		})
+	});
+}
+
 //#endregion
 //#region src/views/components/ribbon/RibbonGrid.tsx
 function RibbonGrid({ groups, title, className, ...props }) {
 	const localeService = useDependency(LocaleService);
+	const containerRef = useRef(null);
+	const moreRef = useRef(null);
+	const groupsRef = useRef(/* @__PURE__ */ new Map());
+	const [visibleGroupCount, setVisibleGroupCount] = useState(groups.length);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const measure = () => {
+			var _moreRef$current;
+			const style = getComputedStyle(container);
+			const availableWidth = container.clientWidth - Number.parseFloat(style.paddingLeft || "0") - Number.parseFloat(style.paddingRight || "0");
+			const widths = groups.map((group) => {
+				var _groupsRef$current$ge;
+				return ((_groupsRef$current$ge = groupsRef.current.get(group.key)) === null || _groupsRef$current$ge === void 0 ? void 0 : _groupsRef$current$ge.getBoundingClientRect().width) ?? 0;
+			});
+			const limit = widths.reduce((sum, width) => sum + width, 0) <= availableWidth ? availableWidth : availableWidth - (((_moreRef$current = moreRef.current) === null || _moreRef$current === void 0 ? void 0 : _moreRef$current.getBoundingClientRect().width) ?? 0);
+			let used = 0;
+			let count = 0;
+			for (const width of widths) {
+				if (used + width > limit) break;
+				used += width;
+				count += 1;
+			}
+			setVisibleGroupCount(count);
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		groupsRef.current.forEach((element) => observer.observe(element));
+		if (moreRef.current) observer.observe(moreRef.current);
+		return () => observer.disconnect();
+	}, [groups, visibleGroupCount]);
+	const hiddenGroups = groups.slice(visibleGroupCount);
 	return /* @__PURE__ */ jsx("div", {
 		...props,
+		ref: containerRef,
 		"data-testid": "ribbon-grid-toolbar",
 		"data-u-comp": "ribbon-grid-toolbar",
-		className: clsx("univer-box-border univer-flex univer-overflow-x-auto univer-overflow-y-hidden univer-bg-gray-50 univer-px-2 univer-text-sm dark:!univer-bg-gray-900", borderBottomClassName, scrollbarClassName, className),
+		className: clsx("univer-relative univer-box-border univer-flex univer-h-[73px] univer-min-w-0 univer-overflow-hidden univer-bg-gray-50 univer-px-2 univer-text-sm dark:!univer-bg-gray-900", borderBottomClassName, className),
 		role: "toolbar",
 		"aria-label": localeService.t(title),
-		children: /* @__PURE__ */ jsx(ToolbarDropdownProvider, { children: groups.map((group) => {
-			const placements = placeRibbonGridItems(group.children ?? []);
-			return /* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "ribbon-grid-group",
-				className: "univer-relative univer-box-border univer-flex univer-shrink-0 univer-flex-col univer-px-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-testid": "ribbon-grid-group-grid",
-					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-[repeat(2,1.5rem)] univer-content-center univer-gap-2 univer-py-2 [&>div>span>span]:univer-h-full",
-					children: placements.map((placement) => placement.item.item && /* @__PURE__ */ jsx("div", {
-						className: clsx("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
-						style: {
-							gridRow: `${placement.row} / span ${placement.rowSpan}`,
-							gridColumn: `${placement.column} / span ${placement.columnSpan}`,
-							width: placement.width
-						},
-						children: /* @__PURE__ */ jsx(ToolbarItem, {
-							...placement.item.item,
-							grid: true,
-							large: placement.rowSpan > 1,
-							showLabel: placement.showLabel,
-							iconSize: placement.iconSize,
-							fullWidth: placement.width !== void 0,
-							preserveStrokeWidth: true
-						})
-					}, placement.item.key))
-				}), /* @__PURE__ */ jsx("span", {
-					"data-testid": "ribbon-grid-group-divider",
-					className: 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", borderRightClassName),
-					"aria-hidden": "true"
-				})]
-			}, group.key);
-		}) })
+		children: /* @__PURE__ */ jsxs(ToolbarDropdownProvider, { children: [/* @__PURE__ */ jsx("div", {
+			className: "univer-flex univer-min-w-0 univer-overflow-hidden",
+			children: groups.map((group, index) => {
+				const placements = placeRibbonGridItems(group.children ?? []);
+				return /* @__PURE__ */ jsxs("div", {
+					ref: (element) => {
+						if (element) groupsRef.current.set(group.key, element);
+						else groupsRef.current.delete(group.key);
+					},
+					"data-u-comp": "ribbon-grid-group",
+					"data-group-key": group.key,
+					"aria-hidden": index >= visibleGroupCount || void 0,
+					className: clsx("univer-relative univer-box-border univer-flex univer-w-max univer-shrink-0 univer-flex-col univer-px-2", index >= visibleGroupCount && "univer-pointer-events-none univer-invisible univer-absolute"),
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-testid": "ribbon-grid-group-grid",
+						className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-[repeat(2,1.5rem)] univer-content-center univer-gap-2 univer-py-2 [&>div>span>span]:univer-h-full",
+						children: placements.map((placement) => placement.item.item && /* @__PURE__ */ jsx("div", {
+							className: clsx("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
+							style: {
+								gridRow: `${placement.row} / span ${placement.rowSpan}`,
+								gridColumn: `${placement.column} / span ${placement.columnSpan}`,
+								width: placement.width
+							},
+							children: /* @__PURE__ */ jsx(ToolbarItem, {
+								...placement.item.item,
+								grid: true,
+								large: placement.rowSpan > 1,
+								showLabel: placement.showLabel,
+								iconSize: placement.iconSize,
+								fullWidth: placement.width !== void 0,
+								preserveStrokeWidth: true
+							})
+						}, placement.item.key))
+					}), /* @__PURE__ */ jsx("span", {
+						"data-testid": "ribbon-grid-group-divider",
+						className: 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", borderRightClassName),
+						"aria-hidden": "true"
+					})]
+				}, group.key);
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			ref: moreRef,
+			"aria-hidden": hiddenGroups.length === 0 || void 0,
+			className: clsx("univer-box-border univer-w-16 univer-shrink-0 univer-py-2 univer-pl-2 rtl:univer-pl-0 rtl:univer-pr-2", hiddenGroups.length === 0 && "univer-invisible univer-absolute"),
+			children: hiddenGroups.length > 0 && /* @__PURE__ */ jsx(RibbonOverflow, {
+				groups: hiddenGroups,
+				grid: true
+			})
+		})] }, visibleGroupCount)
 	});
 }
 
@@ -4580,7 +5149,7 @@ function Ribbon(props) {
 			...embedRibbonOverrideAttributes,
 			groups: activeGroup.allGroups,
 			title: activatedTabTitle
-		}),
+		}, effectiveActivatedTab),
 		!hideToolbar && ribbonType !== "grid" && /* @__PURE__ */ jsxs("div", {
 			...embedRibbonOverrideAttributes,
 			className: clsx("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
@@ -4608,37 +5177,7 @@ function Ribbon(props) {
 					}) }, groupItem.key);
 				}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "univer-pl-2 rtl:univer-pr-2",
-					children: /* @__PURE__ */ jsx(Dropdown, {
-						collisionPadding: {
-							right: 12,
-							left: 12
-						},
-						onOpenAutoFocus: (e) => e.preventDefault(),
-						overlay: /* @__PURE__ */ jsx("div", {
-							className: "univer-box-border univer-grid univer-max-w-[--radix-popper-available-width] univer-gap-2 univer-p-2",
-							children: activeGroup.hiddenGroups.map((groupItem) => {
-								var _groupItem$children5;
-								return /* @__PURE__ */ jsx("div", {
-									className: "univer-flex univer-items-center univer-gap-2",
-									children: /* @__PURE__ */ jsx("div", {
-										className: "univer-flex univer-flex-wrap univer-gap-2",
-										children: groupItem.children ? (_groupItem$children5 = groupItem.children) === null || _groupItem$children5 === void 0 ? void 0 : _groupItem$children5.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, {
-											...child.item,
-											preserveStrokeWidth: true
-										}, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, {
-											...groupItem.item,
-											preserveStrokeWidth: true
-										}, groupItem.key)
-									})
-								}, groupItem.key);
-							})
-						}),
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: toolbarButtonClassName,
-							children: /* @__PURE__ */ jsx(MoreVerticalIcon, { preserveStrokeWidth: true })
-						})
-					})
+					children: /* @__PURE__ */ jsx(RibbonOverflow, { groups: activeGroup.hiddenGroups })
 				})] }, effectiveActivatedTab)
 			})]
 		}),
@@ -5774,8 +6313,9 @@ function ContextMenuMenuItem(props) {
 	const scheduleSubmenuClose = useCallback(() => {
 		clearSubmenuCloseTimer();
 		submenuCloseTimerRef.current = setTimeout(() => {
+			var _submenuElementRef$cu;
 			submenuCloseTimerRef.current = null;
-			closeSubmenu();
+			if (!((_submenuElementRef$cu = submenuElementRef.current) === null || _submenuElementRef$cu === void 0 ? void 0 : _submenuElementRef$cu.contains(document.activeElement))) closeSubmenu();
 		}, 500);
 	}, [clearSubmenuCloseTimer, closeSubmenu]);
 	useEffect(() => {
@@ -5791,9 +6331,9 @@ function ContextMenuMenuItem(props) {
 		return preventBrowserZoomInContainers([submenuElement]);
 	}, [submenuVisible]);
 	useLayoutEffect(() => {
-		var _submenuElementRef$cu;
+		var _submenuElementRef$cu2;
 		if (!submenuVisible || !submenuPositionReady || !keyboardSubmenuFocusRequested) return;
-		const firstEnabledButton = (_submenuElementRef$cu = submenuElementRef.current) === null || _submenuElementRef$cu === void 0 ? void 0 : _submenuElementRef$cu.querySelector("button:not(:disabled)");
+		const firstEnabledButton = (_submenuElementRef$cu2 = submenuElementRef.current) === null || _submenuElementRef$cu2 === void 0 ? void 0 : _submenuElementRef$cu2.querySelector("button:not(:disabled)");
 		firstEnabledButton === null || firstEnabledButton === void 0 || firstEnabledButton.focus();
 	}, [
 		keyboardSubmenuFocusRequested,
@@ -5827,10 +6367,13 @@ function ContextMenuMenuItem(props) {
 			setSubmenuPositionReady(true);
 		};
 		const frameId = window.requestAnimationFrame(updateSubmenuPosition);
+		const resizeObserver = new ResizeObserver(updateSubmenuPosition);
+		if (submenuElementRef.current) resizeObserver.observe(submenuElementRef.current);
 		window.addEventListener("resize", updateSubmenuPosition);
 		window.addEventListener("scroll", updateSubmenuPosition, true);
 		return () => {
 			window.cancelAnimationFrame(frameId);
+			resizeObserver.disconnect();
 			window.removeEventListener("resize", updateSubmenuPosition);
 			window.removeEventListener("scroll", updateSubmenuPosition, true);
 		};
@@ -5887,9 +6430,10 @@ function ContextMenuMenuItem(props) {
 		},
 		onMouseLeave: (event) => {
 			if (hasSubmenu) {
-				var _submenuElementRef$cu2;
+				var _submenuElementRef$cu3, _submenuElementRef$cu4;
+				if ((_submenuElementRef$cu3 = submenuElementRef.current) === null || _submenuElementRef$cu3 === void 0 ? void 0 : _submenuElementRef$cu3.contains(document.activeElement)) return;
 				const nextTarget = event.relatedTarget;
-				if (nextTarget && ((_submenuElementRef$cu2 = submenuElementRef.current) === null || _submenuElementRef$cu2 === void 0 ? void 0 : _submenuElementRef$cu2.contains(nextTarget))) return;
+				if (nextTarget && ((_submenuElementRef$cu4 = submenuElementRef.current) === null || _submenuElementRef$cu4 === void 0 ? void 0 : _submenuElementRef$cu4.contains(nextTarget))) return;
 				if (isContextMenuPointerLeaveTarget(nextTarget, menuItemElementRef.current, rootMenuElement)) {
 					closeSubmenu();
 					return;
@@ -5985,7 +6529,8 @@ function ContextMenuMenuItem(props) {
 				onMenuPointerEnter === null || onMenuPointerEnter === void 0 || onMenuPointerEnter();
 			},
 			onMouseLeave: (event) => {
-				var _menuItemElementRef$c;
+				var _submenuElementRef$cu5, _menuItemElementRef$c;
+				if ((_submenuElementRef$cu5 = submenuElementRef.current) === null || _submenuElementRef$cu5 === void 0 ? void 0 : _submenuElementRef$cu5.contains(document.activeElement)) return;
 				const nextTarget = event.relatedTarget;
 				if (nextTarget && ((_menuItemElementRef$c = menuItemElementRef.current) === null || _menuItemElementRef$c === void 0 ? void 0 : _menuItemElementRef$c.contains(nextTarget))) return;
 				if (isContextMenuPointerLeaveTarget(nextTarget, menuItemElementRef.current, rootMenuElement)) {
@@ -7092,7 +7637,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.2.0";
+var version = "1.3.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -23134,299 +23679,6 @@ function MobileEmojiPicker(props) {
 	});
 }
 
-//#endregion
-//#region src/services/font.service.ts
-const IFontService = createIdentifier("univer.font-service");
-const DEFAULT_FONT_LIST = [
-	"宋体",
-	"Arial",
-	"Baskerville",
-	"Comic Sans MS",
-	"Courier New",
-	"Helvetica",
-	"Times New Roman",
-	"Verdana",
-	"Apple LiGothic",
-	"Apple LiSung",
-	"Hei",
-	"Kai",
-	"LiHei Pro",
-	"LiSong Pro",
-	"STFangsong",
-	"STHeiti",
-	"STKaiti",
-	"STSong",
-	"报隶-繁",
-	"报隶-简",
-	"冬青黑体简体中文",
-	"黑体-繁",
-	"黑体-简",
-	"华文仿宋",
-	"华文楷体",
-	"华文宋体",
-	"楷体-繁",
-	"楷体-简",
-	"兰亭黑-繁",
-	"兰亭黑-简",
-	"隶变-繁",
-	"隶变-简",
-	"凌慧体-繁",
-	"凌慧体-简",
-	"翩翩体-繁",
-	"翩翩体-简",
-	"苹方-繁",
-	"苹方-港",
-	"苹方-简",
-	"手札体-繁",
-	"手札体-简",
-	"宋体-繁",
-	"宋体-简",
-	"娃娃体-繁",
-	"娃娃体-简",
-	"魏碑-繁",
-	"魏碑-简",
-	"行楷-繁",
-	"行楷-简",
-	"雅痞-繁",
-	"雅痞-简",
-	"圆体-繁",
-	"圆体-简",
-	"Arial Black",
-	"Big Caslon",
-	"Courier",
-	"Didot",
-	"Futura",
-	"Georgia",
-	"Helvetica Neue",
-	"Optima",
-	"Times",
-	"Tahoma",
-	"BIZ UDGothic",
-	"BIZ UDMincho",
-	"Hiragino Maru Gothic Pro",
-	"Hiragino Maru Gothic ProN",
-	"Hiragino Mincho Pro",
-	"Hiragino Mincho ProN",
-	"Hiragino Sans",
-	"Klee",
-	"Osaka",
-	"Toppan Bunkyu Gothic",
-	"Toppan Bunkyu Midashi Gothic",
-	"Toppan Bunkyu Midashi Mincho",
-	"Toppan Bunkyu Mincho",
-	"Tsukushi A Round Gothic",
-	"Tsukushi B Round Gothic",
-	"YuKyokasho",
-	"YuKyokasho Yoko",
-	"YuMincho +36p Kana",
-	"American Typewriter",
-	"Andale Mono",
-	"Apple Chancery",
-	"Apple SD Gothic Neo",
-	"Apple Symbols",
-	"AppleGothic",
-	"AppleMyungjo",
-	"Arial Unicode MS",
-	"Athelas",
-	"Avenir",
-	"Avenir Next",
-	"Avenir Next Condensed",
-	"Ayuthaya",
-	"Bangla MN",
-	"Bangla Sangam MN",
-	"Bauhaus 93",
-	"Bodoni 72",
-	"Bodoni 72 Oldstyle",
-	"Bodoni 72 Smallcaps",
-	"Bodoni Ornaments",
-	"Bookshelf Symbol 7",
-	"Bradley Hand",
-	"Chalkboard",
-	"Chalkboard SE",
-	"Chalkduster",
-	"Charter",
-	"Cochin",
-	"Copperplate",
-	"Devanagari Sangam MN",
-	"Din Alternate",
-	"Euphemia UCAS",
-	"Galvji",
-	"Geneva",
-	"Gill Sans",
-	"Gujarati Sangam MN",
-	"GungSeo",
-	"Gurmukhi MN",
-	"Gurmukhi Sangam MN",
-	"HeadLineA",
-	"Herculanum",
-	"Hiragino Kaku Gothic Pro",
-	"Hiragino Kaku Gothic ProN",
-	"Hiragino Kaku Gothic Std",
-	"Hiragino Kaku Gothic StdN",
-	"Hoefler Text",
-	"Impact",
-	"InaiMathi",
-	"Iowan Old Style",
-	"Kannada MN",
-	"Kannada Sangam MN",
-	"Kefa",
-	"Khmer MN",
-	"Khmer Sangam MN",
-	"Kohinoor Bangla",
-	"Kohinoor Devanagari",
-	"Kohinoor Telugu",
-	"Krungthep",
-	"Lao MN",
-	"Lao Sangam MN",
-	"Lucida Grande",
-	"Luminari",
-	"Malayalam MN",
-	"Malayalam Sangam MN",
-	"Marion",
-	"Marker Felt",
-	"Menlo",
-	"Microsoft Sans Serif",
-	"Modern No. 20",
-	"Monaco",
-	"Mukta Mahee",
-	"Nanum Brush Script",
-	"Nanum Gothic",
-	"Nanum Myeongjo",
-	"Nanum Pen Script",
-	"Noteworthy",
-	"Oriya MN",
-	"Oriya Sangam MN",
-	"Palatino",
-	"Papyrus",
-	"PCMyungjo",
-	"Phosphate",
-	"PilGi",
-	"Plantagenet Cherokee",
-	"PT Mono",
-	"PT Sans",
-	"PT Sans Caption",
-	"PT Serif",
-	"PT Serif Caption",
-	"Rockwell",
-	"Sathu",
-	"Savoye LET",
-	"Seravek",
-	"Shree Devanagari 714",
-	"SignPainter",
-	"Silom",
-	"Sinhala MN",
-	"Sinhala Sangam MN",
-	"Skia",
-	"Snell Roundhand",
-	"STIXGeneral",
-	"Sukhumvit Set",
-	"Superclarendon",
-	"Tamil MN",
-	"Tamil Sangam MN",
-	"Telugu MN",
-	"Telugu Sangam MN",
-	"Trattatello",
-	"Trebuchet MS",
-	"Webdings",
-	"Wingdings",
-	"Wingdings 2",
-	"Wingdings 3",
-	"YuGothic",
-	"YuGothic Light",
-	"YuGothic Medium",
-	"Zapfino"
-].map((value) => ({
-	value,
-	label: value
-}));
-let FontService = class FontService {
-	constructor(_configService) {
-		this._configService = _configService;
-		_defineProperty(this, "fonts$", new BehaviorSubject([]));
-		const { customFontFamily } = this._configService.getConfig("ui.config") ?? {};
-		let fonts = [];
-		if (customFontFamily) {
-			if (Array.isArray(customFontFamily)) fonts = [...DEFAULT_FONT_LIST, ...customFontFamily];
-			else if (customFontFamily.override) fonts = [...customFontFamily.list];
-			else fonts = [...DEFAULT_FONT_LIST, ...customFontFamily.list];
-		} else fonts = [...DEFAULT_FONT_LIST];
-		this.fonts$.next(fonts);
-	}
-	dispose() {
-		this.resetToDefaults();
-		this.fonts$.complete();
-	}
-	getFonts() {
-		return this.fonts$.getValue();
-	}
-	getFontByValue(value) {
-		return this.getFonts().find((font) => font.value === value);
-	}
-	/**
-	* Check if the current browser environment supports the font
-	* @param fontValue
-	* @returns boolean Whether the font is supported
-	*/
-	isFontSupported(fontValue) {
-		const context = document.createElement("canvas").getContext("2d");
-		if (!context) return false;
-		const text = "abcdefghijklmnopqrstuvwxyz0123456789";
-		const size = "72px";
-		const baseFonts = [
-			"monospace",
-			"serif",
-			"sans-serif"
-		];
-		const defaultWidths = {};
-		baseFonts.forEach((base) => {
-			context.font = `${size} ${base}`;
-			defaultWidths[base] = context.measureText(text).width;
-		});
-		return baseFonts.some((base) => {
-			context.font = `${size} "${fontValue}", ${base}`;
-			return context.measureText(text).width !== defaultWidths[base];
-		});
-	}
-	addFont(font) {
-		if (this.getFontByValue(font.value)) throw new Error(`[FontService]: Font with value "${font.value}" already exists.`);
-		const updatedFonts = [...this.getFonts(), font].sort();
-		this.fonts$.next(updatedFonts);
-	}
-	updateFont(value, updates) {
-		const fonts = this.getFonts();
-		const fontIndex = fonts.findIndex((font) => font.value === value);
-		if (fontIndex === -1) throw new Error(`Font with value "${value}" not found.`);
-		const updatedFont = {
-			...fonts[fontIndex],
-			...updates
-		};
-		const updatedFonts = [...fonts];
-		updatedFonts[fontIndex] = updatedFont;
-		this.fonts$.next(updatedFonts);
-	}
-	removeFont(value) {
-		const fonts = this.getFonts();
-		if (fonts.findIndex((font) => font.value === value) === -1) return false;
-		const updatedFonts = fonts.filter((font) => font.value !== value);
-		this.fonts$.next(updatedFonts);
-		return true;
-	}
-	resetToDefaults() {
-		this.fonts$.next([...DEFAULT_FONT_LIST]);
-	}
-};
-FontService = __decorate([__decorateParam(0, IConfigService)], FontService);
-
-//#endregion
-//#region src/views/font-family/use-font-list.ts
-function useFontList() {
-	const fontService = useDependency(IFontService);
-	return {
-		fonts: useObservable(fontService.fonts$, fontService.getFonts()),
-		fontService
-	};
-}
-
 //#endregion
 //#region src/views/font-family/FontFamily.tsx
 const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
@@ -23502,33 +23754,6 @@ const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onCha
 	});
 };
 
-//#endregion
-//#region src/views/font-family/FontFamilyItem.tsx
-const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
-const FontFamilyItem = ({ value, onChange }) => {
-	const localeService = useDependency(LocaleService);
-	const direction = useObservable(localeService.direction$, localeService.getDirection());
-	const { fonts, fontService } = useFontList();
-	function handleSelectFont(nextValue) {
-		onChange(nextValue);
-	}
-	return /* @__PURE__ */ jsx("ul", {
-		dir: direction,
-		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
-		style: { fontFamily: value },
-		children: fonts.map((font) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-			className: "univer-flex univer-h-7 univer-w-full univer-appearance-none univer-items-center univer-justify-between univer-gap-6 univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700",
-			style: { fontFamily: font.value },
-			type: "button",
-			onClick: () => handleSelectFont(font.value),
-			children: [localeService.t(font.label), !fontService.isFontSupported(font.value) && /* @__PURE__ */ jsx(Tooltip, {
-				title: localeService.t("ui.fontFamily.not-supported"),
-				children: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
-			})]
-		}) }, font.value))
-	});
-};
-
 //#endregion
 //#region src/views/font-size/FontSize.tsx
 const FontSize = (props) => {
@@ -27842,34 +28067,48 @@ function Slider(props) {
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-hidden univer-h-6 univer-items-center sm:!univer-flex",
 				children: /* @__PURE__ */ jsx("div", {
-					className: clsx("univer-relative univer-h-1.5 univer-rounded-full univer-bg-gray-200 univer-px-1.5 univer-transition-colors dark:!univer-bg-gray-600", { "univer-opacity-60": disabled }),
+					className: clsx("univer-relative univer-h-1.5 univer-px-1.5", { "univer-opacity-60": disabled }),
 					style: { width: `${SLIDER_WIDTH}px` },
 					children: /* @__PURE__ */ jsxs("div", {
 						ref: sliderInnerRailRef,
 						role: "track",
-						className: "univer-relative univer-h-1.5 univer-bg-gray-200 dark:!univer-bg-gray-600",
+						className: "univer-relative univer-h-1.5 univer-rounded-full univer-bg-gray-200 univer-transition-colors dark:!univer-bg-gray-600",
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: clsx("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
-							/* @__PURE__ */ jsx("a", {
-								className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-box-border univer-block univer-size-1.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border univer-border-gray-0 univer-bg-gray-400 dark:!univer-border-gray-700 dark:!univer-bg-gray-300",
-								role: "button",
-								tabIndex: disabled ? -1 : 0,
-								"aria-label": localeService.t("ui.accessibility.resetZoom"),
-								"aria-disabled": disabled,
-								onClick: handleReset,
-								onKeyDown: (e) => {
-									if (e.key !== "Enter" && e.key !== " ") return;
-									e.preventDefault();
-									e.stopPropagation();
-									handleReset();
-								}
-							}, "reset-button"),
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-size-6 -univer-translate-x-1/2 -univer-translate-y-1/2",
+								children: /* @__PURE__ */ jsx(Tooltip, {
+									title: `${localeService.t("ui.accessibility.resetZoom")} (${resetPoint}%)`,
+									placement: "top",
+									children: /* @__PURE__ */ jsx(Button, {
+										className: "univer-size-6 univer-p-0 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100",
+										size: "small",
+										variant: "link",
+										type: "button",
+										"data-u-comp": "zoom-reset",
+										"aria-label": localeService.t("ui.accessibility.resetZoom"),
+										disabled,
+										onPointerDown: (e) => e.stopPropagation(),
+										onClick: handleReset,
+										onKeyDown: (e) => {
+											if (e.key !== "Enter" && e.key !== " ") return;
+											e.preventDefault();
+											e.stopPropagation();
+											handleReset();
+										},
+										children: /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "univer-box-border univer-h-3 univer-w-1 univer-rounded-full univer-border univer-border-solid univer-border-gray-0 univer-bg-gray-600 dark:!univer-border-gray-800 dark:!univer-bg-gray-100"
+										})
+									})
+								})
+							}),
 							/* @__PURE__ */ jsx("button", {
-								className: clsx("univer-absolute univer-top-1/2 univer-size-3.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0 univer-shadow-sm univer-transition-all focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100 dark:!univer-bg-gray-800", borderClassName, {
+								className: clsx("univer-absolute univer-top-1/2 univer-size-3.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0 univer-shadow-sm univer-transition focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100 dark:!univer-bg-gray-800", borderClassName, {
 									"univer-cursor-pointer hover:univer-border-primary-600 hover:univer-shadow-md": !disabled,
 									"univer-cursor-not-allowed": disabled,
 									"univer-scale-105 univer-border-primary-600 univer-shadow-md": isDragging
@@ -29934,4 +30173,4 @@ function ProgressBar(props) {
 }
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FloatingObjectToolbarPosition, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HOVER_TRACK_HOST_CLASS_NAME, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, HoverTrack, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IUnitPresenceUIAdapterRegistry, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileCanvasGesture, MobileContextMenu, MobileDialogService, MobileDrawer, MobileFontFamilyDropdown, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, MockMessageService, NativeTextEditorShortcutBehavior, ObjectPermissionButton, ObjectPermissionPanelButton, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoRedoGroupService, UndoShortcutItem, UnitPresenceUIAdapterRegistry, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, WorkbenchService, ZIndexManager, ZoomInput, bindFormatPainterCanvas, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getMobileCanvasPanDelta, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, preventBrowserZoomInContainers, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FloatingObjectToolbarPosition, FontCategory, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HOVER_TRACK_HOST_CLASS_NAME, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, HoverTrack, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IUnitPresenceUIAdapterRegistry, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileCanvasGesture, MobileContextMenu, MobileDialogService, MobileDrawer, MobileFontFamilyDropdown, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, MockMessageService, NativeTextEditorShortcutBehavior, ObjectPermissionButton, ObjectPermissionPanelButton, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoRedoGroupService, UndoShortcutItem, UnitPresenceUIAdapterRegistry, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, WorkbenchService, ZIndexManager, ZoomInput, bindFormatPainterCanvas, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getMobileCanvasPanDelta, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, preventBrowserZoomInContainers, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };