@univerjs/ui 1.2.0 → 1.3.0

package/lib/cjs/index.js

@@ -1375,45 +1375,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"]: {
@@ -3376,6 +3433,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;
 		}
@@ -3442,6 +3500,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 = (0, _univerjs_design.cva)(toolbarButtonClassName, {
+	variants: {
+		noIcon: {
+			true: "univer-px-2",
+			false: ""
+		},
+		active: {
+			true: "!univer-bg-gray-200 dark:!univer-bg-gray-500",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		noIcon: false,
+		active: false
+	}
+});
+/**
+* Button Component
+*/
+function ToolbarButton(props) {
+	const { children, className, style, disabled = false, active = false, noIcon, onClick, onDoubleClick, ...restProps } = props;
+	const handleClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onClick && onClick(e);
+	};
+	const handleDoubleClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onDoubleClick && onDoubleClick(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: (0, _univerjs_design.clsx)(toolbarButtonVariants({
+			noIcon,
+			active,
+			className
+		})),
+		style,
+		disabled,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		...restProps,
+		children
+	});
+}
+
 //#endregion
 //#region src/views/custom-label/CustomLabel.tsx
 /**
@@ -3544,82 +3679,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 = (0, _univerjs_design.cva)(toolbarButtonClassName, {
-	variants: {
-		noIcon: {
-			true: "univer-px-2",
-			false: ""
-		},
-		active: {
-			true: "!univer-bg-gray-200 dark:!univer-bg-gray-500",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		noIcon: false,
-		active: false
+//#region src/services/font.service.ts
+const IFontService = (0, _univerjs_core.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 rxjs.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, _univerjs_core.IConfigService)], FontService);
+
+//#endregion
+//#region src/views/font-family/use-font-list.ts
+function useFontList() {
+	const fontService = (0, _wendellhu_redi_react_bindings.useDependency)(IFontService);
+	return {
+		fonts: (0, _wendellhu_redi_react_bindings.useObservable)(fontService.fonts$, fontService.getFonts()),
+		fontService
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		className: (0, _univerjs_design.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 = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
+	const { fonts, fontService } = useFontList();
+	function handleSelectFont(nextValue) {
+		onChange(nextValue);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+				title: localeService.t("ui.fontFamily.not-supported"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
+			})]
+		}) }, font.value))
+	});
+};
+
 //#endregion
 //#region src/views/components/ribbon/TooltipButtonWrapper.tsx
 const TooltipWrapperContext = (0, react.createContext)({
@@ -3765,10 +4152,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 = _univerjs_design.DropdownMenu }) {
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
 	const shortcutService = (0, _wendellhu_redi_react_bindings.useDependency)(IShortcutService);
@@ -3901,6 +4284,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;
@@ -3932,8 +4319,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			return {
 				type: "item",
 				className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 					icon: option.icon,
@@ -4122,16 +4509,17 @@ const ToolbarItem = (0, react.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$ = (0, react.useMemo)(() => {
@@ -4158,26 +4546,27 @@ const ToolbarItem = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4186,15 +4575,21 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			"aria-disabled": disabled,
 			className: (0, _univerjs_design.clsx)(toolbarButtonSelectorRootVariants({ disabled }), {
 				"univer-box-border univer-h-full univer-min-w-14 univer-flex-col !univer-pr-0": grid && large,
-				"univer-box-border univer-h-full": grid && !large
+				"univer-box-border univer-h-full": grid && !large,
+				"!univer-h-auto univer-min-h-7 univer-w-full univer-text-xs": overflow
 			}),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, _univerjs_design.clsx)(toolbarButtonSelectorMainVariants({
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled,
+				"aria-label": selectorAriaLabel,
+				"aria-pressed": props.activated$ ? activated : void 0,
+				className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -4216,8 +4611,11 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				onOptionSelect: handleSelect,
 				dropdownComponent,
 				dropdownMenuComponent,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.clsx)(toolbarButtonSelectorTriggerVariants({
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					disabled,
+					"aria-label": `${selectorAriaLabel ?? ""} ${localeService.t("ui.ribbon.more")}`,
+					className: (0, _univerjs_design.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
 					}), {
@@ -4252,7 +4650,8 @@ const ToolbarItem = (0, react.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 && _univerjs_design.borderClassName),
 				children: grid && large ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
@@ -4284,7 +4683,7 @@ const ToolbarItem = (0, react.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 = (0, _univerjs_design.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 = (0, _univerjs_design.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"
@@ -4302,7 +4701,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				"aria-disabled": disabled,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.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
 				})
@@ -4320,7 +4719,7 @@ const ToolbarItem = (0, react.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__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -4328,7 +4727,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				iconSize,
 				preserveStrokeWidth,
 				title: grid && (large || showLabel) ? gridLabel : void 0
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { title })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { title: overflow ? gridLabel : title })
 		});
 	}
 	function renderItem() {
@@ -4349,49 +4748,219 @@ const ToolbarItem = (0, react.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 = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
+	const sidebarService = (0, _wendellhu_redi_react_bindings.useDependency)(ISidebarService);
+	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	const [openedGroups, setOpenedGroups] = (0, react.useState)(null);
+	const open = openedGroups === groups;
+	const keyboardRef = (0, react.useRef)(false);
+	const restoreFocusRef = (0, react.useRef)(true);
+	const label = localeService.t("ui.ribbon.more");
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-px-2 univer-py-1",
+			children: groups.map((group, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				"aria-label": group.title ? localeService.t(group.title) : void 0,
+				className: (0, _univerjs_design.clsx)("univer-py-1.5", index > 0 && _univerjs_design.borderTopClassName),
+				children: [group.title && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": label,
+			onPointerDown: () => {
+				keyboardRef.current = false;
+			},
+			onKeyDown: () => {
+				keyboardRef.current = true;
+			},
+			className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreHorizontalIcon, {
+				className: "univer-size-5",
+				preserveStrokeWidth: true
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "univer-flex univer-items-center univer-gap-0.5",
+				children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {
+					className: "univer-size-3",
+					preserveStrokeWidth: true
+				})]
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, { preserveStrokeWidth: true })
+		})
+	});
+}
+
 //#endregion
 //#region src/views/components/ribbon/RibbonGrid.tsx
 function RibbonGrid({ groups, title, className, ...props }) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const containerRef = (0, react.useRef)(null);
+	const moreRef = (0, react.useRef)(null);
+	const groupsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [visibleGroupCount, setVisibleGroupCount] = (0, react.useState)(groups.length);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
+		ref: containerRef,
 		"data-testid": "ribbon-grid-toolbar",
 		"data-u-comp": "ribbon-grid-toolbar",
-		className: (0, _univerjs_design.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", _univerjs_design.borderBottomClassName, _univerjs_design.scrollbarClassName, className),
+		className: (0, _univerjs_design.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", _univerjs_design.borderBottomClassName, className),
 		role: "toolbar",
 		"aria-label": localeService.t(title),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownProvider, { children: groups.map((group) => {
-			const placements = placeRibbonGridItems(group.children ?? []);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-u-comp": "ribbon-grid-group",
-				className: "univer-relative univer-box-border univer-flex univer-shrink-0 univer-flex-col univer-px-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					"data-testid": "ribbon-grid-group-grid",
-					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-[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__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, _univerjs_design.clsx)("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
-						style: {
-							gridRow: `${placement.row} / span ${placement.rowSpan}`,
-							gridColumn: `${placement.column} / span ${placement.columnSpan}`,
-							width: placement.width
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
-							...placement.item.item,
-							grid: true,
-							large: placement.rowSpan > 1,
-							showLabel: placement.showLabel,
-							iconSize: placement.iconSize,
-							fullWidth: placement.width !== void 0,
-							preserveStrokeWidth: true
-						})
-					}, placement.item.key))
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					"data-testid": "ribbon-grid-group-divider",
-					className: (0, _univerjs_design.clsx)("univer-pointer-events-none univer-absolute univer-bottom-1.5 univer-right-0 univer-top-3.5 !univer-border-gray-300 univer-opacity-50 rtl:univer-left-0 rtl:univer-right-auto", _univerjs_design.borderRightClassName),
-					"aria-hidden": "true"
-				})]
-			}, group.key);
-		}) })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarDropdownProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-flex univer-min-w-0 univer-overflow-hidden",
+			children: groups.map((group, index) => {
+				const placements = placeRibbonGridItems(group.children ?? []);
+				return /* @__PURE__ */ (0, react_jsx_runtime.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: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-testid": "ribbon-grid-group-grid",
+						className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-[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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
+							style: {
+								gridRow: `${placement.row} / span ${placement.rowSpan}`,
+								gridColumn: `${placement.column} / span ${placement.columnSpan}`,
+								width: placement.width
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
+								...placement.item.item,
+								grid: true,
+								large: placement.rowSpan > 1,
+								showLabel: placement.showLabel,
+								iconSize: placement.iconSize,
+								fullWidth: placement.width !== void 0,
+								preserveStrokeWidth: true
+							})
+						}, placement.item.key))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-testid": "ribbon-grid-group-divider",
+						className: (0, _univerjs_design.clsx)("univer-pointer-events-none univer-absolute univer-bottom-1.5 univer-right-0 univer-top-3.5 !univer-border-gray-300 univer-opacity-50 rtl:univer-left-0 rtl:univer-right-auto", _univerjs_design.borderRightClassName),
+						"aria-hidden": "true"
+					})]
+				}, group.key);
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: moreRef,
+			"aria-hidden": hiddenGroups.length === 0 || void 0,
+			className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(RibbonOverflow, {
+				groups: hiddenGroups,
+				grid: true
+			})
+		})] }, visibleGroupCount)
 	});
 }
 
@@ -4581,7 +5150,7 @@ function Ribbon(props) {
 			...embedRibbonOverrideAttributes,
 			groups: activeGroup.allGroups,
 			title: activatedTabTitle
-		}),
+		}, effectiveActivatedTab),
 		!hideToolbar && ribbonType !== "grid" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...embedRibbonOverrideAttributes,
 			className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
@@ -4609,37 +5178,7 @@ function Ribbon(props) {
 					}) }, groupItem.key);
 				}), collapsedIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-pl-2 rtl:univer-pr-2",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-						collisionPadding: {
-							right: 12,
-							left: 12
-						},
-						onOpenAutoFocus: (e) => e.preventDefault(),
-						overlay: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "univer-flex univer-items-center univer-gap-2",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
-											...child.item,
-											preserveStrokeWidth: true
-										}, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
-											...groupItem.item,
-											preserveStrokeWidth: true
-										}, groupItem.key)
-									})
-								}, groupItem.key);
-							})
-						}),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: toolbarButtonClassName,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, { preserveStrokeWidth: true })
-						})
-					})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonOverflow, { groups: activeGroup.hiddenGroups })
 				})] }, effectiveActivatedTab)
 			})]
 		}),
@@ -5775,8 +6314,9 @@ function ContextMenuMenuItem(props) {
 	const scheduleSubmenuClose = (0, react.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]);
 	(0, react.useEffect)(() => {
@@ -5792,9 +6332,9 @@ function ContextMenuMenuItem(props) {
 		return preventBrowserZoomInContainers([submenuElement]);
 	}, [submenuVisible]);
 	(0, react.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,
@@ -5828,10 +6368,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);
 		};
@@ -5888,9 +6431,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;
@@ -5986,7 +6530,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)) {
@@ -7093,7 +7638,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#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
@@ -23135,299 +23680,6 @@ function MobileEmojiPicker(props) {
 	});
 }
 
-//#endregion
-//#region src/services/font.service.ts
-const IFontService = (0, _univerjs_core.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 rxjs.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, _univerjs_core.IConfigService)], FontService);
-
-//#endregion
-//#region src/views/font-family/use-font-list.ts
-function useFontList() {
-	const fontService = (0, _wendellhu_redi_react_bindings.useDependency)(IFontService);
-	return {
-		fonts: (0, _wendellhu_redi_react_bindings.useObservable)(fontService.fonts$, fontService.getFonts()),
-		fontService
-	};
-}
-
 //#endregion
 //#region src/views/font-family/FontFamily.tsx
 const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
@@ -23503,33 +23755,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 = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
-	const { fonts, fontService } = useFontList();
-	function handleSelectFont(nextValue) {
-		onChange(nextValue);
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-				title: localeService.t("ui.fontFamily.not-supported"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
-			})]
-		}) }, font.value))
-	});
-};
-
 //#endregion
 //#region src/views/font-size/FontSize.tsx
 const FontSize = (props) => {
@@ -27843,34 +28068,48 @@ function Slider(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-hidden univer-h-6 univer-items-center sm:!univer-flex",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.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: (0, _univerjs_design.clsx)("univer-relative univer-h-1.5 univer-px-1.5", { "univer-opacity-60": disabled }),
 					style: { width: `${SLIDER_WIDTH}px` },
 					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+									title: `${localeService.t("ui.accessibility.resetZoom")} (${resetPoint}%)`,
+									placement: "top",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
-								className: (0, _univerjs_design.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", _univerjs_design.borderClassName, {
+								className: (0, _univerjs_design.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", _univerjs_design.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
@@ -30050,6 +30289,7 @@ exports.FONT_SIZE_LIST = FONT_SIZE_LIST;
 exports.FloatDom = FloatDom;
 exports.FloatDomSingle = FloatDomSingle;
 exports.FloatingObjectToolbarPosition = FloatingObjectToolbarPosition;
+exports.FontCategory = FontCategory;
 exports.FontFamily = FontFamily;
 exports.FontFamilyDropdown = FontFamilyDropdown;
 exports.FontFamilyItem = FontFamilyItem;