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

package/lib/cjs/index.js

@@ -2574,9 +2574,11 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		var _popup$excludeRects$;
 		return (_popup$excludeRects$ = popup.excludeRects$) === null || _popup$excludeRects$ === void 0 ? void 0 : _popup$excludeRects$.pipe((0, rxjs.throttleTime)(0, rxjs.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 = (0, _wendellhu_redi_react_bindings.useObservable)(hideOnInvisible ? () => (0, rxjs.combineLatest)([anchorRect$, hiddenRects$]).pipe((0, rxjs.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) => {
@@ -2584,10 +2586,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
 	]);
@@ -2744,7 +2748,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 					onClick: () => handleSelectTab(group),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-size-9 univer-flex-shrink-0 univer-items-center univer-justify-center univer-rounded-lg", _univerjs_design.borderClassName),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "univer-text-gray-500 dark:!univer-text-gray-300" })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							className: "univer-text-gray-500 dark:!univer-text-gray-300",
+							preserveStrokeWidth: true
+						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "univer-flex univer-flex-col",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
@@ -2762,7 +2769,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 			className: "univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700 univer-pl-3 univer-pr-2 univer-text-sm univer-text-gray-0 dark:!univer-bg-gray-200 dark:!univer-text-gray-800",
 			onClick: () => setGroupSelectorVisible(true),
-			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
+			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {
+				className: "univer-text-gray-200 dark:!univer-text-gray-500",
+				preserveStrokeWidth: true
+			})]
 		})
 	});
 }
@@ -2882,7 +2892,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 = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
@@ -2906,7 +2916,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) {
@@ -3067,6 +3078,7 @@ function ToolbarTooltip(props) {
 	}, [popupOpen]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
 		...tooltipProps,
+		className: (0, _univerjs_design.clsx)("univer-fill-mode-backwards univer-delay-100", tooltipProps.className),
 		visible: !popupOpen && tooltipVisible,
 		onVisibleChange: (visible) => {
 			if (!popupOpen) setTooltipVisible(visible);
@@ -3155,7 +3167,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({
@@ -3172,6 +3184,7 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 				className: "univer-text-sm",
 				icon,
+				preserveStrokeWidth,
 				value$: option.value$,
 				value: option.value,
 				label: option.label,
@@ -3179,7 +3192,10 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 			})
 		}), hasCheckMark && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "univer-ml-auto univer-flex univer-w-4 univer-flex-shrink-0 univer-justify-end",
-			children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-text-primary-600" })
+			children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, {
+				className: "univer-text-primary-600",
+				preserveStrokeWidth
+			})
 		})]
 	});
 }
@@ -3187,7 +3203,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 } = (0, react.useContext)(TooltipWrapperContext);
 	(0, react.useEffect)(() => {
 		if (disabled) setDropdownVisible(false);
@@ -3231,6 +3247,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		overlay: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 			value,
 			option,
+			preserveStrokeWidth,
 			onOptionSelect: handleOptionSelect
 		}, getOptionKey(option))),
 		children
@@ -3250,6 +3267,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					icon: option.icon,
 					value,
 					option,
+					preserveStrokeWidth,
 					onOptionSelect: handleOptionSelect
 				}),
 				disabled: option.disabled,
@@ -3269,6 +3287,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 					icon,
 					value,
+					preserveStrokeWidth,
 					option: { label: {
 						name: title,
 						selectable: false
@@ -3305,6 +3324,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 						icon,
 						value,
+						preserveStrokeWidth,
 						option: { label: {
 							name: title,
 							selectable: false
@@ -3422,7 +3442,7 @@ const ToolbarItem = (0, react.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,
@@ -3492,6 +3512,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
 					iconSize,
+					preserveStrokeWidth,
 					title: titleToDisplay,
 					value: iconColor ?? value,
 					label,
@@ -3503,6 +3524,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				value,
 				options,
 				disabled,
+				preserveStrokeWidth,
 				onOptionSelect: handleSelect,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, _univerjs_design.clsx)(toolbarButtonSelectorTriggerVariants({
@@ -3513,7 +3535,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 						"univer-h-full": grid && !large
 					}),
 					"data-disabled": disabled,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { preserveStrokeWidth })
 				})
 			})]
 		});
@@ -3523,6 +3545,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			value,
 			options,
 			disabled,
+			preserveStrokeWidth,
 			onOptionSelect: handleSelect,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-u-command": id,
@@ -3537,7 +3560,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				}, grid && !large && !icon && _univerjs_design.borderClassName),
 				children: grid && large ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
-					iconSize
+					iconSize,
+					preserveStrokeWidth
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: (0, _univerjs_design.clsx)(toolbarSelectorTriggerVariants({ disabled }), "univer-h-4 univer-justify-center univer-gap-0.5"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -3545,17 +3569,18 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 						value,
 						label,
 						onChange: handleSelectionsValueChange
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { preserveStrokeWidth })]
 				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
 					iconSize,
+					preserveStrokeWidth,
 					title: titleToDisplay,
 					value,
 					label,
 					onChange: handleSelectionsValueChange
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, _univerjs_design.clsx)(toolbarSelectorTriggerVariants({ disabled }), { "univer-ml-auto rtl:univer-ml-0 rtl:univer-mr-auto": grid && !large && !icon }),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { preserveStrokeWidth })
 				})] })
 			})
 		});
@@ -3601,6 +3626,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			children: icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 				icon,
 				iconSize,
+				preserveStrokeWidth,
 				title: grid && (large || showLabel) ? gridLabel : void 0
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { title })
 		});
@@ -3654,7 +3680,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__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3789,6 +3816,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__ */ (0, react_jsx_runtime.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,
@@ -3866,7 +3894,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__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
+								...child.item,
+								preserveStrokeWidth: true
+							}, child.key)))
 						}) }, groupItem.key);
 					}), collapsedIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "univer-pl-2 rtl:univer-pr-2",
@@ -3884,7 +3915,13 @@ function Ribbon(props) {
 										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 }, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (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);
 								})
@@ -3892,7 +3929,7 @@ function Ribbon(props) {
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: toolbarButtonClassName,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, {})
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, { preserveStrokeWidth: true })
 							})
 						})
 					})] }, activatedTab)
@@ -3962,12 +3999,34 @@ var ThemeSwitcherService = class extends _univerjs_core.Disposable {
 //#endregion
 //#region src/services/workbench/workbench.service.ts
 const IWorkbenchService = (0, _univerjs_core.createIdentifier)("univer.ui.workbench.service");
-var WorkbenchService = class extends _univerjs_core.Disposable {
-	constructor(..._args) {
-		super(..._args);
+let WorkbenchService = class WorkbenchService extends _univerjs_core.Disposable {
+	constructor(univerInstanceService) {
+		super();
 		_defineProperty(this, "_tokens", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_subscriptions", new rxjs.Subscription());
+		_defineProperty(this, "_rootUnitId", null);
+		_defineProperty(this, "_rootUnitType$", new rxjs.BehaviorSubject(null));
 		_defineProperty(this, "_skeletonVisible$", new rxjs.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");
@@ -3980,11 +4039,18 @@ var WorkbenchService = class extends _univerjs_core.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, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService))], WorkbenchService);
+function isWorkbenchRootUnit(unitId, options) {
+	return !(0, _univerjs_core.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
@@ -4274,6 +4340,7 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 				})
 			}, item.key);
 			return showTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+				className: "univer-fill-mode-backwards univer-delay-100",
 				title: item.tooltip,
 				children: ele
 			}, item.key) : ele;
@@ -6262,7 +6329,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#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
@@ -23608,7 +23675,10 @@ function MobileRibbon(props) {
 						disabled: activeIndex === 0,
 						"aria-label": localeService.t("ui.navigation.previous"),
 						onClick: () => selectTab(activeIndex - 1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-rotate-180 univer-text-sm" })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {
+							className: "univer-rotate-180 univer-text-sm",
+							preserveStrokeWidth: true
+						})
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -23645,7 +23715,10 @@ function MobileRibbon(props) {
 						disabled: activeIndex >= ribbon.length - 1,
 						"aria-label": localeService.t("ui.navigation.next"),
 						onClick: () => selectTab(activeIndex + 1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-text-sm" })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {
+							className: "univer-text-sm",
+							preserveStrokeWidth: true
+						})
 					}), hasHeaderMenu && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
@@ -23665,7 +23738,10 @@ function MobileRibbon(props) {
 					disabled: !canScrollLeft,
 					"aria-label": localeService.t("ui.navigation.previous"),
 					onClick: () => scrollToolbar("left"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-text-sm" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {
+						className: "univer-text-sm",
+						preserveStrokeWidth: true
+					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: toolbarScrollRef,
@@ -23679,7 +23755,10 @@ function MobileRibbon(props) {
 							className: (0, _univerjs_design.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", { [_univerjs_design.borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item })
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
+									...child.item,
+									preserveStrokeWidth: true
+								})
 							}, child.key))
 						}, groupItem.key);
 					})
@@ -23694,7 +23773,10 @@ function MobileRibbon(props) {
 					disabled: !canScrollRight,
 					"aria-label": localeService.t("ui.navigation.next"),
 					onClick: () => scrollToolbar("right"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-text-sm" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {
+						className: "univer-text-sm",
+						preserveStrokeWidth: true
+					})
 				})
 			]
 		})]
@@ -25341,6 +25423,43 @@ let DesktopNotificationService = class DesktopNotificationService extends _unive
 };
 DesktopNotificationService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopNotificationService);
 
+//#endregion
+//#region src/services/presence/unit-presence-ui-adapter.service.ts
+const IUnitPresenceUIAdapterRegistry = (0, _univerjs_core.createIdentifier)("ui.unit-presence-adapter-registry");
+const EMPTY_ADAPTERS = Object.freeze([]);
+var UnitPresenceUIAdapterRegistry = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_adapters", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_adapters$", new rxjs.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 (0, _univerjs_core.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 _univerjs_core.Disposable {
@@ -25412,6 +25531,61 @@ var DesktopSidebarService = class extends _univerjs_core.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, (0, _univerjs_core.generateRandomId)(8), mode, action);
+	}
+	createRunner(unitId, mode = "append") {
+		const groupId = (0, _univerjs_core.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 : (0, _univerjs_core.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, _univerjs_core.IUndoRedoService)], UndoRedoGroupService);
+
 //#endregion
 //#region src/mobile-plugin.ts
 const DISABLE_AUTO_FOCUS_KEY$1 = "DISABLE_AUTO_FOCUS";
@@ -25433,6 +25607,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[IconManager],
 			[ComponentsController],
 			[ThemeSwitcherService],
+			[UndoRedoGroupService],
 			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ZIndexManager],
 			[ShortcutPanelService],
@@ -25441,6 +25616,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[IRibbonService, { useClass: DesktopRibbonService }],
 			[IShortcutService, { useClass: ShortcutService }],
 			[IPlatformService, { useClass: PlatformService }],
+			[IUnitPresenceUIAdapterRegistry, { useClass: UnitPresenceUIAdapterRegistry }],
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
@@ -25515,98 +25691,6 @@ UniverMobileUIPlugin = __decorate([
 	__decorateParam(3, _univerjs_core.IConfigService)
 ], UniverMobileUIPlugin);
 
-//#endregion
-//#region src/services/presence/unit-presence-ui-adapter.service.ts
-const IUnitPresenceUIAdapterRegistry = (0, _univerjs_core.createIdentifier)("ui.unit-presence-adapter-registry");
-const EMPTY_ADAPTERS = Object.freeze([]);
-var UnitPresenceUIAdapterRegistry = class extends _univerjs_core.Disposable {
-	constructor(..._args) {
-		super(..._args);
-		_defineProperty(this, "_adapters", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_adapters$", new rxjs.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 (0, _univerjs_core.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, (0, _univerjs_core.generateRandomId)(8), mode, action);
-	}
-	createRunner(unitId, mode = "append") {
-		const groupId = (0, _univerjs_core.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 : (0, _univerjs_core.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, _univerjs_core.IUndoRedoService)], UndoRedoGroupService);
-
 //#endregion
 //#region src/plugin.ts
 const DISABLE_AUTO_FOCUS_KEY = "DISABLE_AUTO_FOCUS";
@@ -26803,7 +26887,12 @@ Object.defineProperty(exports, 'WithDependency', {
     return _wendellhu_redi_react_bindings.WithDependency;
   }
 });
-exports.WorkbenchService = WorkbenchService;
+Object.defineProperty(exports, 'WorkbenchService', {
+  enumerable: true,
+  get: function () {
+    return WorkbenchService;
+  }
+});
 exports.ZIndexManager = ZIndexManager;
 exports.ZoomInput = ZoomInput;
 Object.defineProperty(exports, 'connectDependencies', {