@univerjs/ui 1.0.0-beta.1 → 1.0.0-beta.2

package/lib/es/index.js

@@ -1,5 +1,5 @@
 import { BaselineOffset, BorderStyleTypes, ColorKit, CommandType, DependentOn, Disposable, DocumentDataModel, DocumentFlavor, EDITOR_ACTIVATED, ErrorService, FOCUSING_FX_BAR_EDITOR, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IConfirmService, IContextService, ILocalStorageService, ILogService, IUndoRedoService, IUniverInstanceService, Inject, Injector, LifecycleService, LifecycleStages, LifecycleUnreachableError, LocaleService, NAMED_STYLE_MAP, NamedStyleType, Optional, Plugin, Quantity, RedoCommand, SHEET_EDITOR_UNITS, ThemeService, Tools, UndoCommand, UniverInstanceType, Workbook, createIdentifier, dedupeBy, generateRandomId, getBorderStyleType, isInternalEditorID, isRealNum, merge, mergeOverrideWithDependencies, registerDependencies, remove, throttle, toDisposable, touchDependencies } from "@univerjs/core";
-import { BehaviorSubject, EMPTY, Observable, Subject, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, isObservable, map, merge as merge$1, of, scan, startWith, switchMap, throttleTime } from "rxjs";
+import { BehaviorSubject, EMPTY, Observable, Subject, Subscription, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, isObservable, map, merge as merge$1, of, scan, startWith, switchMap, throttleTime } from "rxjs";
 import { Fragment, cloneElement, createContext, createElement, forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Button, ColorPicker, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfigContext, ConfigProvider, Confirm, Dialog, Dropdown, DropdownMenu, Gallery, HoverCard, Input, InputNumber, KBD, MessageType, Messager, Popup, Toaster, Tooltip, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, isBrowser, message, removeMessage, render, resetButtonClassName, scrollbarClassName, toast, unmount } from "@univerjs/design";
 import { IRenderManagerService, UniverRenderEnginePlugin, ptToPx } from "@univerjs/engine-render";
@@ -2573,9 +2573,11 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		var _popup$excludeRects$;
 		return (_popup$excludeRects$ = popup.excludeRects$) === null || _popup$excludeRects$ === void 0 ? void 0 : _popup$excludeRects$.pipe(throttleTime(0, animationFrameScheduler));
 	}, [popup.excludeRects$]), popup.excludeRects);
-	const { canvasElement, constrainToCanvas = false, hideOnInvisible = true, hiddenType = "destroy" } = popup;
+	const { boundaryInsets, canvasElement, constrainToCanvas = false, hideOnInvisible = true, hiddenType = "destroy" } = popup;
 	const hidden = useObservable(hideOnInvisible ? () => combineLatest([anchorRect$, hiddenRects$]).pipe(map(([rectWithOffset, hiddenRects]) => {
 		const { top, left, bottom, right } = canvasElement.getBoundingClientRect();
+		const insetTop = constrainToCanvas ? (boundaryInsets === null || boundaryInsets === void 0 ? void 0 : boundaryInsets.top) ?? 0 : 0;
+		const insetLeft = constrainToCanvas ? (boundaryInsets === null || boundaryInsets === void 0 ? void 0 : boundaryInsets.left) ?? 0 : 0;
 		const rectHeight = rectWithOffset.bottom - rectWithOffset.top;
 		const rectWidth = rectWithOffset.right - rectWithOffset.left;
 		const isInHiddenRect = hiddenRects.some((hiddenRect) => {
@@ -2583,10 +2585,12 @@ const SingleCanvasPopup = ({ popup, children }) => {
 			const bufferX = Math.min(.5 * rectWidth, 10);
 			return rectWithOffset.top >= hiddenRect.top - bufferY && rectWithOffset.bottom <= hiddenRect.bottom + bufferY && rectWithOffset.left >= hiddenRect.left - bufferX && rectWithOffset.right <= hiddenRect.right + bufferX;
 		});
-		return rectWithOffset.bottom < top || rectWithOffset.top > bottom || rectWithOffset.right < left || rectWithOffset.left > right || isInHiddenRect;
+		return rectWithOffset.bottom < top + insetTop || rectWithOffset.top > bottom || rectWithOffset.right < left + insetLeft || rectWithOffset.left > right || isInHiddenRect;
 	})) : null, false, false, [
 		anchorRect$,
+		boundaryInsets,
 		canvasElement,
+		constrainToCanvas,
 		hiddenRects$,
 		hideOnInvisible
 	]);
@@ -2743,7 +2747,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 					onClick: () => handleSelectTab(group),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: clsx("univer-box-border univer-flex univer-size-9 univer-flex-shrink-0 univer-items-center univer-justify-center univer-rounded-lg", borderClassName),
-						children: /* @__PURE__ */ jsx(Icon, { className: "univer-text-gray-500 dark:!univer-text-gray-300" })
+						children: /* @__PURE__ */ jsx(Icon, {
+							className: "univer-text-gray-500 dark:!univer-text-gray-300",
+							preserveStrokeWidth: true
+						})
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "univer-flex univer-flex-col",
 						children: [/* @__PURE__ */ jsx("strong", {
@@ -2761,7 +2768,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		children: /* @__PURE__ */ jsxs("a", {
 			className: "univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700 univer-pl-3 univer-pr-2 univer-text-sm univer-text-gray-0 dark:!univer-bg-gray-200 dark:!univer-text-gray-800",
 			onClick: () => setGroupSelectorVisible(true),
-			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
+			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ jsx(MoreDownIcon, {
+				className: "univer-text-gray-200 dark:!univer-text-gray-500",
+				preserveStrokeWidth: true
+			})]
 		})
 	});
 }
@@ -2881,7 +2891,7 @@ function getCells(row, column, rowSpan, columnSpan) {
 * @param props
 */
 function CustomLabel(props) {
-	const { className, iconSize, title, icon, label, value, value$ } = props;
+	const { className, iconSize, preserveStrokeWidth, title, icon, label, value, value$ } = props;
 	const localeService = useDependency(LocaleService);
 	const componentManager = useDependency(ComponentManager);
 	const iconManager = useDependency(IconManager);
@@ -2905,7 +2915,8 @@ function CustomLabel(props) {
 				width: iconSize,
 				height: iconSize
 			} : void 0,
-			extend: { colorChannel1: isValid ? String(realValue) : "var(--univer-primary-600)" }
+			extend: { colorChannel1: isValid ? String(realValue) : "var(--univer-primary-600)" },
+			preserveStrokeWidth
 		}, index++));
 	}
 	if (label) {
@@ -3066,6 +3077,7 @@ function ToolbarTooltip(props) {
 	}, [popupOpen]);
 	return /* @__PURE__ */ jsx(Tooltip, {
 		...tooltipProps,
+		className: clsx("univer-fill-mode-backwards univer-delay-100", tooltipProps.className),
 		visible: !popupOpen && tooltipVisible,
 		onVisibleChange: (visible) => {
 			if (!popupOpen) setTooltipVisible(visible);
@@ -3154,7 +3166,7 @@ function DropdownWrapper(props) {
 		})
 	});
 }
-function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
+function DropdownMenuLabel({ icon, value, option, preserveStrokeWidth, onOptionSelect }) {
 	var _option$label;
 	const onChange = (v) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
@@ -3171,6 +3183,7 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 			children: /* @__PURE__ */ jsx(CustomLabel, {
 				className: "univer-text-sm",
 				icon,
+				preserveStrokeWidth,
 				value$: option.value$,
 				value: option.value,
 				label: option.label,
@@ -3178,7 +3191,10 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 			})
 		}), hasCheckMark && /* @__PURE__ */ jsx("span", {
 			className: "univer-ml-auto univer-flex univer-w-4 univer-flex-shrink-0 univer-justify-end",
-			children: selected && /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-text-primary-600" })
+			children: selected && /* @__PURE__ */ jsx(CheckMarkIcon, {
+				className: "univer-text-primary-600",
+				preserveStrokeWidth
+			})
 		})]
 	});
 }
@@ -3186,7 +3202,7 @@ 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, onOptionSelect }) {
+function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, preserveStrokeWidth, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 	useEffect(() => {
 		if (disabled) setDropdownVisible(false);
@@ -3230,6 +3246,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		overlay: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuLabel, {
 			value,
 			option,
+			preserveStrokeWidth,
 			onOptionSelect: handleOptionSelect
 		}, getOptionKey(option))),
 		children
@@ -3249,6 +3266,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					icon: option.icon,
 					value,
 					option,
+					preserveStrokeWidth,
 					onOptionSelect: handleOptionSelect
 				}),
 				disabled: option.disabled,
@@ -3268,6 +3286,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 				children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 					icon,
 					value,
+					preserveStrokeWidth,
 					option: { label: {
 						name: title,
 						selectable: false
@@ -3304,6 +3323,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 						icon,
 						value,
+						preserveStrokeWidth,
 						option: { label: {
 							name: title,
 							selectable: false
@@ -3421,7 +3441,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 		layoutService.focus();
 		commandService.executeCommand(commandId, params);
 	};
-	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, large, showLabel, iconSize, iconColor, fullWidth } = props;
+	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, large, showLabel, iconSize, iconColor, fullWidth, preserveStrokeWidth } = props;
 	const gridLabel = title ?? tooltip;
 	const shortcutDisplay = useToolbarShortcutDisplay({
 		id,
@@ -3491,6 +3511,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 				children: /* @__PURE__ */ jsx(CustomLabel, {
 					icon: iconToDisplay,
 					iconSize,
+					preserveStrokeWidth,
 					title: titleToDisplay,
 					value: iconColor ?? value,
 					label,
@@ -3502,6 +3523,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 				value,
 				options,
 				disabled,
+				preserveStrokeWidth,
 				onOptionSelect: handleSelect,
 				children: /* @__PURE__ */ jsx("div", {
 					className: clsx(toolbarButtonSelectorTriggerVariants({
@@ -3512,7 +3534,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 						"univer-h-full": grid && !large
 					}),
 					"data-disabled": disabled,
-					children: /* @__PURE__ */ jsx(MoreDownIcon, {})
+					children: /* @__PURE__ */ jsx(MoreDownIcon, { preserveStrokeWidth })
 				})
 			})]
 		});
@@ -3522,6 +3544,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 			value,
 			options,
 			disabled,
+			preserveStrokeWidth,
 			onOptionSelect: handleSelect,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-u-command": id,
@@ -3536,7 +3559,8 @@ const ToolbarItem = forwardRef((props, ref) => {
 				}, grid && !large && !icon && borderClassName),
 				children: grid && large ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CustomLabel, {
 					icon: iconToDisplay,
-					iconSize
+					iconSize,
+					preserveStrokeWidth
 				}), /* @__PURE__ */ jsxs("div", {
 					className: clsx(toolbarSelectorTriggerVariants({ disabled }), "univer-h-4 univer-justify-center univer-gap-0.5"),
 					children: [/* @__PURE__ */ jsx(CustomLabel, {
@@ -3544,17 +3568,18 @@ const ToolbarItem = forwardRef((props, ref) => {
 						value,
 						label,
 						onChange: handleSelectionsValueChange
-					}), /* @__PURE__ */ jsx(MoreDownIcon, {})]
+					}), /* @__PURE__ */ jsx(MoreDownIcon, { preserveStrokeWidth })]
 				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CustomLabel, {
 					icon: iconToDisplay,
 					iconSize,
+					preserveStrokeWidth,
 					title: titleToDisplay,
 					value,
 					label,
 					onChange: handleSelectionsValueChange
 				}), /* @__PURE__ */ jsx("div", {
 					className: clsx(toolbarSelectorTriggerVariants({ disabled }), { "univer-ml-auto rtl:univer-ml-0 rtl:univer-mr-auto": grid && !large && !icon }),
-					children: /* @__PURE__ */ jsx(MoreDownIcon, {})
+					children: /* @__PURE__ */ jsx(MoreDownIcon, { preserveStrokeWidth })
 				})] })
 			})
 		});
@@ -3600,6 +3625,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 			children: icon ? /* @__PURE__ */ jsx(CustomLabel, {
 				icon,
 				iconSize,
+				preserveStrokeWidth,
 				title: grid && (large || showLabel) ? gridLabel : void 0
 			}) : /* @__PURE__ */ jsx(CustomLabel, { title })
 		});
@@ -3653,7 +3679,8 @@ function RibbonGrid({ groups, title, className, ...props }) {
 							large: placement.rowSpan > 1,
 							showLabel: placement.showLabel,
 							iconSize: placement.iconSize,
-							fullWidth: placement.width !== void 0
+							fullWidth: placement.width !== void 0,
+							preserveStrokeWidth: true
 						})
 					}, placement.item.key))
 				}), /* @__PURE__ */ jsx("span", {
@@ -3788,6 +3815,7 @@ function Ribbon(props) {
 					className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
 					children: groupItem.children && ((_groupItem$children2 = groupItem.children) === null || _groupItem$children2 === void 0 ? void 0 : _groupItem$children2.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, {
 						...child.item,
+						preserveStrokeWidth: true,
 						ref: (ref) => {
 							if (ref === null || ref === void 0 ? void 0 : ref.el) toolbarItemRefs.current[child.key] = {
 								el: ref.el,
@@ -3865,7 +3893,10 @@ function Ribbon(props) {
 						var _groupItem$children3, _groupItem$children4;
 						return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
 							className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
-							children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)))
+							children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, {
+								...child.item,
+								preserveStrokeWidth: true
+							}, child.key)))
 						}) }, groupItem.key);
 					}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
 						className: "univer-pl-2 rtl:univer-pr-2",
@@ -3883,7 +3914,13 @@ function Ribbon(props) {
 										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 }, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, { ...groupItem.item }, groupItem.key)
+											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);
 								})
@@ -3891,7 +3928,7 @@ function Ribbon(props) {
 							children: /* @__PURE__ */ jsx("button", {
 								type: "button",
 								className: toolbarButtonClassName,
-								children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
+								children: /* @__PURE__ */ jsx(MoreVerticalIcon, { preserveStrokeWidth: true })
 							})
 						})
 					})] }, activatedTab)
@@ -3961,12 +3998,34 @@ var ThemeSwitcherService = class extends Disposable {
 //#endregion
 //#region src/services/workbench/workbench.service.ts
 const IWorkbenchService = createIdentifier("univer.ui.workbench.service");
-var WorkbenchService = class extends Disposable {
-	constructor(..._args) {
-		super(..._args);
+let WorkbenchService = class WorkbenchService extends Disposable {
+	constructor(univerInstanceService) {
+		super();
 		_defineProperty(this, "_tokens", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_subscriptions", new Subscription());
+		_defineProperty(this, "_rootUnitId", null);
+		_defineProperty(this, "_rootUnitType$", new BehaviorSubject(null));
 		_defineProperty(this, "_skeletonVisible$", new BehaviorSubject(false));
+		_defineProperty(this, "rootUnitType$", this._rootUnitType$.asObservable());
 		_defineProperty(this, "skeletonVisible$", this._skeletonVisible$.asObservable());
+		this._subscriptions.add(univerInstanceService.unitAdded$.subscribe(({ unit, options }) => {
+			const unitId = unit.getUnitId();
+			if ((options === null || options === void 0 ? void 0 : options.makeCurrent) === false || !isWorkbenchRootUnit(unitId, options)) return;
+			this._setRootUnit(unitId, unit.type);
+		}));
+		this._subscriptions.add(univerInstanceService.focused$.subscribe((unitId) => {
+			if (!unitId) return;
+			const unit = univerInstanceService.getUnit(unitId);
+			if (unit && isWorkbenchRootUnit(unitId, univerInstanceService.getUnitCreateOptions(unitId) ?? void 0)) this._setRootUnit(unitId, unit.type);
+		}));
+		this._subscriptions.add(univerInstanceService.unitDisposed$.subscribe((unit) => {
+			const unitId = unit.getUnitId();
+			if (this._rootUnitId === unitId) this._setRootUnit(null, null);
+		}));
+	}
+	_setRootUnit(unitId, unitType) {
+		this._rootUnitId = unitId;
+		if (this._rootUnitType$.getValue() !== unitType) this._rootUnitType$.next(unitType);
 	}
 	acquireSkeleton() {
 		const token = Symbol("workbench-skeleton");
@@ -3979,11 +4038,18 @@ var WorkbenchService = class extends Disposable {
 		return this.disposeWithMe(disposable);
 	}
 	dispose() {
-		super.dispose();
+		this._subscriptions.unsubscribe();
 		this._tokens.clear();
+		this._rootUnitId = null;
+		this._rootUnitType$.complete();
 		this._skeletonVisible$.complete();
+		super.dispose();
 	}
 };
+WorkbenchService = __decorate([__decorateParam(0, Inject(IUniverInstanceService))], WorkbenchService);
+function isWorkbenchRootUnit(unitId, options) {
+	return !isInternalEditorID(unitId) && !(options === null || options === void 0 ? void 0 : options.skipAutoRender) && !(options === null || options === void 0 ? void 0 : options.embeddedRender);
+}
 
 //#endregion
 //#region src/services/contextmenu/contextmenu.service.ts
@@ -4273,6 +4339,7 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 				})
 			}, item.key);
 			return showTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+				className: "univer-fill-mode-backwards univer-delay-100",
 				title: item.tooltip,
 				children: ele
 			}, item.key) : ele;
@@ -6261,7 +6328,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-beta.1";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -23607,7 +23674,10 @@ function MobileRibbon(props) {
 						disabled: activeIndex === 0,
 						"aria-label": localeService.t("ui.navigation.previous"),
 						onClick: () => selectTab(activeIndex - 1),
-						children: /* @__PURE__ */ jsx(MoreLeftIcon, { className: "univer-rotate-180 univer-text-sm" })
+						children: /* @__PURE__ */ jsx(MoreLeftIcon, {
+							className: "univer-rotate-180 univer-text-sm",
+							preserveStrokeWidth: true
+						})
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -23644,7 +23714,10 @@ function MobileRibbon(props) {
 						disabled: activeIndex >= ribbon.length - 1,
 						"aria-label": localeService.t("ui.navigation.next"),
 						onClick: () => selectTab(activeIndex + 1),
-						children: /* @__PURE__ */ jsx(MoreRightIcon, { className: "univer-text-sm" })
+						children: /* @__PURE__ */ jsx(MoreRightIcon, {
+							className: "univer-text-sm",
+							preserveStrokeWidth: true
+						})
 					}), hasHeaderMenu && /* @__PURE__ */ jsx("div", {
 						className: "univer-flex univer-items-center univer-gap-1 [&>*]:univer-m-0 [&>*]:univer-inline-flex [&>*]:univer-min-h-7 [&>*]:univer-min-w-7 [&>*]:univer-appearance-none [&>*]:univer-items-center [&>*]:univer-justify-center [&>*]:univer-rounded-md [&>*]:univer-border-0 [&>*]:univer-px-1.5 [&>*]:univer-leading-none [&>*]:univer-outline-none",
 						children: /* @__PURE__ */ jsx(ComponentContainer, { components: headerMenuComponents })
@@ -23664,7 +23737,10 @@ function MobileRibbon(props) {
 					disabled: !canScrollLeft,
 					"aria-label": localeService.t("ui.navigation.previous"),
 					onClick: () => scrollToolbar("left"),
-					children: /* @__PURE__ */ jsx(MoreLeftIcon, { className: "univer-text-sm" })
+					children: /* @__PURE__ */ jsx(MoreLeftIcon, {
+						className: "univer-text-sm",
+						preserveStrokeWidth: true
+					})
 				}),
 				/* @__PURE__ */ jsx("div", {
 					ref: toolbarScrollRef,
@@ -23678,7 +23754,10 @@ function MobileRibbon(props) {
 							className: clsx("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ jsx("div", {
 								className: clsx("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
-								children: /* @__PURE__ */ jsx(ToolbarItem, { ...child.item })
+								children: /* @__PURE__ */ jsx(ToolbarItem, {
+									...child.item,
+									preserveStrokeWidth: true
+								})
 							}, child.key))
 						}, groupItem.key);
 					})
@@ -23693,7 +23772,10 @@ function MobileRibbon(props) {
 					disabled: !canScrollRight,
 					"aria-label": localeService.t("ui.navigation.next"),
 					onClick: () => scrollToolbar("right"),
-					children: /* @__PURE__ */ jsx(MoreRightIcon, { className: "univer-text-sm" })
+					children: /* @__PURE__ */ jsx(MoreRightIcon, {
+						className: "univer-text-sm",
+						preserveStrokeWidth: true
+					})
 				})
 			]
 		})]
@@ -25340,6 +25422,43 @@ let DesktopNotificationService = class DesktopNotificationService extends Dispos
 };
 DesktopNotificationService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopNotificationService);
 
+//#endregion
+//#region src/services/presence/unit-presence-ui-adapter.service.ts
+const IUnitPresenceUIAdapterRegistry = createIdentifier("ui.unit-presence-adapter-registry");
+const EMPTY_ADAPTERS = Object.freeze([]);
+var UnitPresenceUIAdapterRegistry = class extends Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_adapters", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_adapters$", new BehaviorSubject(EMPTY_ADAPTERS));
+		_defineProperty(this, "adapters$", this._adapters$.asObservable());
+	}
+	dispose() {
+		this._adapters.clear();
+		this._adapters$.complete();
+		super.dispose();
+	}
+	register(adapter) {
+		if (this._adapters.has(adapter.unitType)) throw new Error(`A unit presence adapter is already registered for UniverInstanceType "${adapter.unitType}".`);
+		this._adapters.set(adapter.unitType, adapter);
+		this._emitAdapters();
+		return toDisposable(() => {
+			if (this._adapters.get(adapter.unitType) !== adapter) return;
+			this._adapters.delete(adapter.unitType);
+			this._emitAdapters();
+		});
+	}
+	get(unitType) {
+		return this._adapters.get(unitType) ?? null;
+	}
+	getAll() {
+		return this._adapters$.getValue();
+	}
+	_emitAdapters() {
+		this._adapters$.next(Object.freeze(Array.from(this._adapters.values())));
+	}
+};
+
 //#endregion
 //#region src/services/sidebar/desktop-sidebar.service.ts
 var DesktopSidebarService = class extends Disposable {
@@ -25411,6 +25530,61 @@ var DesktopSidebarService = class extends Disposable {
 	}
 };
 
+//#endregion
+//#region src/services/undo-redo/undo-redo-group.service.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const HISTORY_GROUP_WINDOW = 1e3;
+let UndoRedoGroupService = class UndoRedoGroupService {
+	constructor(_undoRedoService) {
+		this._undoRedoService = _undoRedoService;
+		_defineProperty(this, "_sessions", /* @__PURE__ */ new Map());
+	}
+	run(unitId, action, mode = "append") {
+		return this._run(unitId, generateRandomId(8), mode, action);
+	}
+	createRunner(unitId, mode = "append") {
+		const groupId = generateRandomId(8);
+		return (action) => this._run(unitId, groupId, mode, action);
+	}
+	runTimed(unitId, scope, action, mode = "replace") {
+		const now = Date.now();
+		const sessionKey = `${unitId}:${scope}`;
+		const current = this._sessions.get(sessionKey);
+		const groupId = current && current.expiresAt >= now ? current.id : generateRandomId(8);
+		this._sessions.set(sessionKey, {
+			id: groupId,
+			expiresAt: now + HISTORY_GROUP_WINDOW
+		});
+		if (this._sessions.size > 100) this._sessions.forEach((session, key) => {
+			if (session.expiresAt < now) this._sessions.delete(key);
+		});
+		return this._run(unitId, groupId, mode, action);
+	}
+	_run(unitId, groupId, mode, action) {
+		const group = this._undoRedoService.beginUndoRedoGroup(unitId, groupId, mode);
+		try {
+			return action();
+		} finally {
+			group.dispose();
+		}
+	}
+};
+UndoRedoGroupService = __decorate([__decorateParam(0, IUndoRedoService)], UndoRedoGroupService);
+
 //#endregion
 //#region src/mobile-plugin.ts
 const DISABLE_AUTO_FOCUS_KEY$1 = "DISABLE_AUTO_FOCUS";
@@ -25432,6 +25606,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 			[IconManager],
 			[ComponentsController],
 			[ThemeSwitcherService],
+			[UndoRedoGroupService],
 			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ZIndexManager],
 			[ShortcutPanelService],
@@ -25440,6 +25615,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 			[IRibbonService, { useClass: DesktopRibbonService }],
 			[IShortcutService, { useClass: ShortcutService }],
 			[IPlatformService, { useClass: PlatformService }],
+			[IUnitPresenceUIAdapterRegistry, { useClass: UnitPresenceUIAdapterRegistry }],
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
@@ -25514,98 +25690,6 @@ UniverMobileUIPlugin = __decorate([
 	__decorateParam(3, IConfigService)
 ], UniverMobileUIPlugin);
 
-//#endregion
-//#region src/services/presence/unit-presence-ui-adapter.service.ts
-const IUnitPresenceUIAdapterRegistry = createIdentifier("ui.unit-presence-adapter-registry");
-const EMPTY_ADAPTERS = Object.freeze([]);
-var UnitPresenceUIAdapterRegistry = class extends Disposable {
-	constructor(..._args) {
-		super(..._args);
-		_defineProperty(this, "_adapters", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_adapters$", new BehaviorSubject(EMPTY_ADAPTERS));
-		_defineProperty(this, "adapters$", this._adapters$.asObservable());
-	}
-	dispose() {
-		this._adapters.clear();
-		this._adapters$.complete();
-		super.dispose();
-	}
-	register(adapter) {
-		if (this._adapters.has(adapter.unitType)) throw new Error(`A unit presence adapter is already registered for UniverInstanceType "${adapter.unitType}".`);
-		this._adapters.set(adapter.unitType, adapter);
-		this._emitAdapters();
-		return toDisposable(() => {
-			if (this._adapters.get(adapter.unitType) !== adapter) return;
-			this._adapters.delete(adapter.unitType);
-			this._emitAdapters();
-		});
-	}
-	get(unitType) {
-		return this._adapters.get(unitType) ?? null;
-	}
-	getAll() {
-		return this._adapters$.getValue();
-	}
-	_emitAdapters() {
-		this._adapters$.next(Object.freeze(Array.from(this._adapters.values())));
-	}
-};
-
-//#endregion
-//#region src/services/undo-redo/undo-redo-group.service.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const HISTORY_GROUP_WINDOW = 1e3;
-let UndoRedoGroupService = class UndoRedoGroupService {
-	constructor(_undoRedoService) {
-		this._undoRedoService = _undoRedoService;
-		_defineProperty(this, "_sessions", /* @__PURE__ */ new Map());
-	}
-	run(unitId, action, mode = "append") {
-		return this._run(unitId, generateRandomId(8), mode, action);
-	}
-	createRunner(unitId, mode = "append") {
-		const groupId = generateRandomId(8);
-		return (action) => this._run(unitId, groupId, mode, action);
-	}
-	runTimed(unitId, scope, action, mode = "replace") {
-		const now = Date.now();
-		const sessionKey = `${unitId}:${scope}`;
-		const current = this._sessions.get(sessionKey);
-		const groupId = current && current.expiresAt >= now ? current.id : generateRandomId(8);
-		this._sessions.set(sessionKey, {
-			id: groupId,
-			expiresAt: now + HISTORY_GROUP_WINDOW
-		});
-		if (this._sessions.size > 100) this._sessions.forEach((session, key) => {
-			if (session.expiresAt < now) this._sessions.delete(key);
-		});
-		return this._run(unitId, groupId, mode, action);
-	}
-	_run(unitId, groupId, mode, action) {
-		const group = this._undoRedoService.beginUndoRedoGroup(unitId, groupId, mode);
-		try {
-			return action();
-		} finally {
-			group.dispose();
-		}
-	}
-};
-UndoRedoGroupService = __decorate([__decorateParam(0, IUndoRedoService)], UndoRedoGroupService);
-
 //#endregion
 //#region src/plugin.ts
 const DISABLE_AUTO_FOCUS_KEY = "DISABLE_AUTO_FOCUS";

package/lib/index.css

@@ -1431,6 +1431,10 @@
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
+.univer-delay-100 {
+  transition-delay: .1s;
+}
+
 .univer-duration-150 {
   transition-duration: .15s;
 }
@@ -1475,6 +1479,14 @@
   animation-duration: .15s;
 }
 
+.univer-delay-100 {
+  animation-delay: .1s;
+}
+
+.univer-fill-mode-backwards {
+  animation-fill-mode: backwards;
+}
+
 .univer-context-menu-hover-suppressed button:hover:not(:focus) {
   background-color: #0000 !important;
 }