@univerjs/ui 1.0.0-alpha.7 → 1.0.0-alpha.8

package/lib/es/index.js

@@ -1,7 +1,7 @@
-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, 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 { 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 { 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, resizeObserverCtor, scrollbarClassName, toast, unmount } from "@univerjs/design";
+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";
 import { distinctUntilChanged as distinctUntilChanged$1, map as map$1, scan as scan$1, startWith as startWith$1, switchMap as switchMap$1 } from "rxjs/operators";
 import { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, useDependency, useDependency as useDependency$1, useInjector, useObservable, useUpdateBinder } from "@wendellhu/redi/react-bindings";
@@ -57,7 +57,7 @@ function getAttributeValue(target, name) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -68,7 +68,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -81,14 +81,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -99,7 +99,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -107,7 +107,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -859,6 +859,15 @@ var UIRuntimeScopeService = class extends Disposable {
 //#endregion
 //#region src/services/shortcut/shortcut.service.ts
 /**
+* Defines whether a Univer shortcut should yield to the browser's native behavior
+* when the keyboard event originates from an editable text element.
+*/
+let NativeTextEditorShortcutBehavior = /* @__PURE__ */ function(NativeTextEditorShortcutBehavior) {
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["ALLOW_NATIVE"] = 0] = "ALLOW_NATIVE";
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["OVERRIDE_NATIVE"] = 1] = "OVERRIDE_NATIVE";
+	return NativeTextEditorShortcutBehavior;
+}({});
+/**
 * The dependency injection identifier of the {@link IShortcutService}.
 */
 const IShortcutService = createIdentifier("ui.shortcut.service");
@@ -949,17 +958,18 @@ let ShortcutService = class ShortcutService extends Disposable {
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
 		const binding = this._deriveBindingFromEvent(e);
 		if (binding === null) return;
-		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding)) return;
 		const shortcuts = this._shortCutMapping.get(binding);
 		if (shortcuts === void 0) return;
 		const contextService = (_this$_getRuntimeServ3 = this._getRuntimeService(e, IContextService)) !== null && _this$_getRuntimeServ3 !== void 0 ? _this$_getRuntimeServ3 : this._contextService;
-		return Array.from(shortcuts).sort((s1, s2) => {
+		const candidateShortcut = Array.from(shortcuts).sort((s1, s2) => {
 			var _s2$priority, _s1$priority;
 			return ((_s2$priority = s2.priority) !== null && _s2$priority !== void 0 ? _s2$priority : 0) - ((_s1$priority = s1.priority) !== null && _s1$priority !== void 0 ? _s1$priority : 0);
 		}).find((s) => {
-			var _s$preconditions, _s$preconditions2;
-			return (_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true;
+			var _s$eventPreconditions, _s$eventPreconditions2, _s$preconditions, _s$preconditions2;
+			return ((_s$eventPreconditions = (_s$eventPreconditions2 = s.eventPreconditions) === null || _s$eventPreconditions2 === void 0 ? void 0 : _s$eventPreconditions2.call(s, e)) !== null && _s$eventPreconditions !== void 0 ? _s$eventPreconditions : true) && ((_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true);
 		});
+		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) && (candidateShortcut === null || candidateShortcut === void 0 ? void 0 : candidateShortcut.nativeTextEditorBehavior) !== 1) return;
+		return candidateShortcut;
 	}
 	_getBindingFromItem(item) {
 		if (this._platformService.isMac && item.mac) return item.mac;
@@ -1938,6 +1948,7 @@ var UIPartsService = class extends Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_componentsByPart", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_disabledUIParts", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_componentRegistered$", new Subject());
 		_defineProperty(this, "componentRegistered$", this._componentRegistered$.asObservable());
 		_defineProperty(this, "_uiVisible", /* @__PURE__ */ new Map());
@@ -1947,20 +1958,55 @@ var UIPartsService = class extends Disposable {
 	dispose() {
 		super.dispose();
 		this._componentsByPart.clear();
+		this._disabledUIParts.clear();
 		this._uiVisible.clear();
 		this._componentRegistered$.complete();
 		this._uiVisibleChange$.complete();
 	}
 	setUIVisible(part, visible) {
+		const wasVisible = this.isUIVisible(part);
 		this._uiVisible.set(part, visible);
-		this._uiVisibleChange$.next({
+		const isVisible = this.isUIVisible(part);
+		if (wasVisible !== isVisible) this._uiVisibleChange$.next({
 			ui: part,
-			visible
+			visible: isVisible
 		});
 	}
 	isUIVisible(part) {
-		var _this$_uiVisible$get;
-		return (_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true;
+		var _this$_uiVisible$get, _this$_disabledUIPart;
+		return ((_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true) && !((_this$_disabledUIPart = this._disabledUIParts.get(part)) === null || _this$_disabledUIPart === void 0 ? void 0 : _this$_disabledUIPart.size);
+	}
+	registerDisabledUIParts(parts, disabled$) {
+		const uniqueParts = [...new Set(parts)];
+		const registration = Symbol("disabled-ui-parts");
+		let disabled = false;
+		const update = (nextDisabled) => {
+			if (disabled === nextDisabled) return;
+			disabled = nextDisabled;
+			uniqueParts.forEach((part) => {
+				var _this$_disabledUIPart2;
+				const wasVisible = this.isUIVisible(part);
+				const registrations = (_this$_disabledUIPart2 = this._disabledUIParts.get(part)) !== null && _this$_disabledUIPart2 !== void 0 ? _this$_disabledUIPart2 : /* @__PURE__ */ new Set();
+				if (disabled) {
+					registrations.add(registration);
+					this._disabledUIParts.set(part, registrations);
+				} else {
+					registrations.delete(registration);
+					if (registrations.size === 0) this._disabledUIParts.delete(part);
+				}
+				const isVisible = this.isUIVisible(part);
+				if (wasVisible !== isVisible) this._uiVisibleChange$.next({
+					ui: part,
+					visible: isVisible
+				});
+			});
+		};
+		const subscription = disabled$.subscribe(update);
+		const disposable = toDisposable(() => {
+			subscription.unsubscribe();
+			update(false);
+		});
+		return this.disposeWithMe(disposable);
 	}
 	registerComponent(part, componentFactory) {
 		const componentType = componentFactory();
@@ -2718,24 +2764,21 @@ function placeRibbonGridItems(items) {
 	const occupied = /* @__PURE__ */ new Set();
 	const placements = /* @__PURE__ */ new Map();
 	const fallbackItems = [];
-	let maxExplicitColumn = 0;
 	for (const item of items) {
 		var _layout$rowSpan, _layout$columnSpan, _layout$showLabel;
 		const layout = item.gridLayout;
 		if (!layout) {
-			fallbackItems.push(item);
+			fallbackItems.push({ item });
 			continue;
 		}
 		const rowSpan = (_layout$rowSpan = layout.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
 		const columnSpan = (_layout$columnSpan = layout.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
 		const cells = getCells(layout.row, layout.column, rowSpan, columnSpan);
-		if (!(cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0) && cells.every((cell) => !occupied.has(cell)))) {
-			fallbackItems.push(item);
+		if (!isValidGridGeometry(layout, rowSpan, cells)) {
+			fallbackItems.push({ item });
 			continue;
 		}
-		cells.forEach((cell) => occupied.add(cell));
-		maxExplicitColumn = Math.max(maxExplicitColumn, layout.column + columnSpan - 1);
-		placements.set(item, {
+		const placement = {
 			item,
 			row: layout.row,
 			column: layout.column,
@@ -2744,27 +2787,49 @@ function placeRibbonGridItems(items) {
 			showLabel: (_layout$showLabel = layout.showLabel) !== null && _layout$showLabel !== void 0 ? _layout$showLabel : false,
 			width: layout.width,
 			iconSize: layout.iconSize
-		});
+		};
+		if (cells.some((cell) => occupied.has(cell))) {
+			fallbackItems.push({
+				item,
+				layout: placement
+			});
+			continue;
+		}
+		cells.forEach((cell) => occupied.add(cell));
+		placements.set(item, placement);
 	}
-	let fallbackRow = 1;
-	let fallbackColumn = maxExplicitColumn + 1;
-	for (const item of fallbackItems) {
+	for (const { item, layout } of fallbackItems) {
+		var _layout$rowSpan2, _layout$columnSpan2, _layout$showLabel2;
+		const rowSpan = (_layout$rowSpan2 = layout === null || layout === void 0 ? void 0 : layout.rowSpan) !== null && _layout$rowSpan2 !== void 0 ? _layout$rowSpan2 : 1;
+		const columnSpan = (_layout$columnSpan2 = layout === null || layout === void 0 ? void 0 : layout.columnSpan) !== null && _layout$columnSpan2 !== void 0 ? _layout$columnSpan2 : 1;
+		const { row, column, cells } = findFirstAvailableCells(occupied, rowSpan, columnSpan);
+		cells.forEach((cell) => occupied.add(cell));
 		placements.set(item, {
 			item,
-			row: fallbackRow,
-			column: fallbackColumn,
-			rowSpan: 1,
-			columnSpan: 1,
-			showLabel: false
+			row,
+			column,
+			rowSpan,
+			columnSpan,
+			showLabel: (_layout$showLabel2 = layout === null || layout === void 0 ? void 0 : layout.showLabel) !== null && _layout$showLabel2 !== void 0 ? _layout$showLabel2 : false,
+			width: layout === null || layout === void 0 ? void 0 : layout.width,
+			iconSize: layout === null || layout === void 0 ? void 0 : layout.iconSize
 		});
-		fallbackRow += 1;
-		if (fallbackRow > RIBBON_GRID_ROWS) {
-			fallbackRow = 1;
-			fallbackColumn += 1;
-		}
 	}
 	return items.map((item) => placements.get(item));
 }
+function isValidGridGeometry(layout, rowSpan, cells) {
+	return cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0);
+}
+function findFirstAvailableCells(occupied, rowSpan, columnSpan) {
+	for (let column = 1;; column++) for (let row = 1; row + rowSpan - 1 <= RIBBON_GRID_ROWS; row++) {
+		const cells = getCells(row, column, rowSpan, columnSpan);
+		if (cells.every((cell) => !occupied.has(cell))) return {
+			row,
+			column,
+			cells
+		};
+	}
+}
 function getCells(row, column, rowSpan, columnSpan) {
 	if (![
 		row,
@@ -3106,7 +3171,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		return menuItems.filter((item) => {
 			var _item$key;
 			if (!item.children) return !hiddenStates[item.key];
-			return !hiddenStates[((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || ""];
+			const itemKey = ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || "";
+			return !hiddenStates[itemKey];
 		});
 	}, [menuItems, hiddenStates]);
 	function handleVisibleChange(visible) {
@@ -3855,6 +3921,33 @@ 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);
+		_defineProperty(this, "_tokens", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_skeletonVisible$", new BehaviorSubject(false));
+		_defineProperty(this, "skeletonVisible$", this._skeletonVisible$.asObservable());
+	}
+	acquireSkeleton() {
+		const token = Symbol("workbench-skeleton");
+		this._tokens.add(token);
+		if (this._tokens.size === 1) this._skeletonVisible$.next(true);
+		const disposable = toDisposable(() => {
+			if (!this._tokens.delete(token) || this._tokens.size > 0) return;
+			this._skeletonVisible$.next(false);
+		});
+		return this.disposeWithMe(disposable);
+	}
+	dispose() {
+		super.dispose();
+		this._tokens.clear();
+		this._skeletonVisible$.complete();
+	}
+};
+
 //#endregion
 //#region src/services/contextmenu/contextmenu.service.ts
 const IContextMenuService = createIdentifier("ui.contextmenu.service");
@@ -3965,10 +4058,10 @@ function useScrollYOverContainer(element, container) {
 	useEffect(() => {
 		if (!isBrowser() || !element || !container) return;
 		updater();
-		const resizeObserver = resizeObserverCtor(updater);
+		const resizeObserver = new ResizeObserver(updater);
 		resizeObserver.observe(element);
 		return () => {
-			resizeObserver.unobserve(element);
+			resizeObserver.disconnect();
 		};
 	}, [element, container]);
 }
@@ -4147,11 +4240,12 @@ function QuickTileMenuItem(props) {
 	const activated = useObservable(menuItem === null || menuItem === void 0 ? void 0 : menuItem.activated$, false);
 	if (!menuItem || hidden) return null;
 	const Icon = menuItem.icon ? iconManager.get(menuItem.icon) : null;
+	const active = resolveMenuItemActiveState(menuItem.id, activated, activeItemIds);
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: quickTileMenuButtonVariants({
 			disabled,
-			active: resolveMenuItemActiveState(menuItem.id, activated, activeItemIds)
+			active
 		}),
 		disabled,
 		onClick: () => {
@@ -4924,9 +5018,10 @@ function ContextMenuMenuItem(props) {
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
+			const top = maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop);
 			setSubmenuPosition({
 				left,
-				top: maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop)
+				top
 			});
 			setSubmenuPositionReady(true);
 		};
@@ -4947,7 +5042,8 @@ function ContextMenuMenuItem(props) {
 	const hiddenById = menuItem.id != null && hiddenItemIds.includes(menuItem.id) || hiddenItemIds.includes(menuKey);
 	if (hidden || hiddenById) return null;
 	const onChange = (v) => {
-		setInputValue(isRealNum(v) && typeof v === "string" ? Number.parseInt(v) : v);
+		const newValue = isRealNum(v) && typeof v === "string" ? Number.parseInt(v) : v;
+		setInputValue(newValue);
 	};
 	const onSubmenuOptionSelect = (option) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
@@ -5507,6 +5603,95 @@ function Sidebar() {
 	});
 }
 
+//#endregion
+//#region src/views/components/workbench-skeleton/WorkbenchSkeleton.tsx
+function WorkbenchSkeleton({ darkMode, direction, overlay = false }) {
+	const shimmerClassName = `
+      univer-animate-pulse univer-bg-gray-100 motion-reduce:univer-animate-none
+      dark:!univer-bg-gray-700
+    `;
+	const shimmerStyle = { animationDuration: "1.2s" };
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-busy": "true",
+		className: clsx("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-overflow-hidden univer-bg-gray-50 dark:!univer-bg-gray-900", {
+			"univer-absolute univer-inset-0 univer-z-50": overlay,
+			"univer-dark": darkMode
+		}),
+		dir: direction,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				"data-u-comp": "workbench-skeleton-toolbar",
+				className: "univer-flex univer-h-11 univer-shrink-0 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: clsx(shimmerClassName, "univer-h-4 univer-w-24 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: clsx(shimmerClassName, "univer-ml-2 univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: clsx(shimmerClassName, "univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("main", {
+				"data-u-comp": "workbench-skeleton-content",
+				className: "univer-flex univer-min-h-0 univer-min-w-0 univer-flex-1 univer-flex-col univer-gap-4 univer-p-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: clsx(shimmerClassName, "univer-h-4 univer-w-1/3 univer-rounded"),
+					style: shimmerStyle
+				}), /* @__PURE__ */ jsx("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: clsx(shimmerClassName, "univer-flex-1 univer-rounded-md"),
+					style: shimmerStyle
+				})]
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				"data-u-comp": "workbench-skeleton-footer",
+				className: "univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-justify-between univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: clsx(shimmerClassName, "univer-size-5 univer-rounded"),
+						style: shimmerStyle
+					}), /* @__PURE__ */ jsx("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: clsx(shimmerClassName, "univer-h-5 univer-w-14 univer-rounded"),
+						style: shimmerStyle
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: clsx(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: clsx(shimmerClassName, "univer-h-2 univer-w-24 univer-rounded-full"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: clsx(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/hooks/update-effect.ts
 /**
@@ -5713,6 +5898,8 @@ function DesktopWorkbenchContent(props) {
 	var _uiConfig$popupRootId;
 	const { header = true, toolbar = true, footer = true, headerMenu = true, contextMenu = true, ribbonType = "classic", mountContainer, onRendered } = props;
 	const localeService = useDependency(LocaleService);
+	const lifecycleService = useDependency(LifecycleService);
+	const workbenchService = useDependency(IWorkbenchService);
 	const themeService = useDependency(ThemeService);
 	const themeSwitcherService = useDependency(ThemeSwitcherService);
 	const contentRef = useRef(null);
@@ -5725,6 +5912,9 @@ function DesktopWorkbenchContent(props) {
 	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
+	const lifecycleStage = useObservable(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = useObservable(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= LifecycleStages.Ready;
 	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
 	useLayoutEffect(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5740,8 +5930,8 @@ function DesktopWorkbenchContent(props) {
 		else document.documentElement.classList.remove("univer-dark");
 	}, [darkMode]);
 	useEffect(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = useObservable(() => localeService.localeChanged$.pipe(map(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
@@ -5759,61 +5949,68 @@ function DesktopWorkbenchContent(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ jsxs("div", {
-			"data-u-comp": "workbench-layout",
-			className: clsx("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-					children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-				}),
-				header && toolbar && /* @__PURE__ */ jsx("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ jsx(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}),
-				/* @__PURE__ */ jsxs("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-						children: [
-							/* @__PURE__ */ jsx("aside", {
-								"data-u-comp": "left-sidebar",
-								className: "univer-h-full",
-								children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-							}),
-							/* @__PURE__ */ jsxs("section", {
-								className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-								children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ jsx("section", {
-									className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
-									ref: contentRef,
-									"data-range-selector": true,
-									onContextMenu: (e) => e.preventDefault(),
-									children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-								})]
-							}),
-							/* @__PURE__ */ jsx("aside", {
-								"data-u-comp": "right-sidebar",
-								className: "univer-z-[100] univer-h-full",
-								children: /* @__PURE__ */ jsx(Sidebar, {})
-							})
-						]
-					}), footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
-						components: footerComponents,
-						sharedProps: { contextMenu }
-					}, "footer") })]
-				})
-			]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-u-comp": "workbench-layout",
+				className: clsx("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+						children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+					}),
+					header && toolbar && /* @__PURE__ */ jsx("header", {
+						"data-u-comp": "headerbar",
+						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+						children: /* @__PURE__ */ jsx(ComponentContainer, {
+							components: toolbarComponents,
+							sharedProps: {
+								ribbonType,
+								headerMenuComponents,
+								headerMenu
+							}
+						}, "toolbar")
+					}),
+					/* @__PURE__ */ jsxs("section", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ jsxs("section", {
+									className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+									children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ jsx("section", {
+										className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
+										ref: contentRef,
+										"data-range-selector": true,
+										onContextMenu: (e) => e.preventDefault(),
+										children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ jsx(Sidebar, {})
+								})
+							]
+						}), footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") })]
+					})
+				]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ jsx(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			dir: direction,
 			children: [
@@ -5858,6 +6055,9 @@ var SingleUnitUIController = class extends Disposable {
 		delete this._renderManagerService;
 	}
 	_bootstrapWorkbench() {
+		var _this$_injector$get;
+		const initialSkeleton = (_this$_injector$get = this._injector.get(IWorkbenchService, Quantity.OPTIONAL)) === null || _this$_injector$get === void 0 ? void 0 : _this$_injector$get.acquireSkeleton();
+		if (initialSkeleton) this.disposeWithMe(initialSkeleton);
 		this.disposeWithMe(this.bootstrap(async (contentElement, containerElement) => {
 			if (this._layoutService) {
 				this.disposeWithMe(this._layoutService.registerRootContainerElement(containerElement));
@@ -5868,6 +6068,7 @@ var SingleUnitUIController = class extends Disposable {
 				this._renderTimeout = window.setTimeout(() => {
 					const allRenders = this._renderManagerService.getRenderAll();
 					for (const [key] of allRenders) if (this._changeRenderUnit(key, contentElement)) break;
+					requestAnimationFrame(() => requestAnimationFrame(() => initialSkeleton === null || initialSkeleton === void 0 ? void 0 : initialSkeleton.dispose()));
 					this.disposeWithMe(this._instanceService.focused$.subscribe((unit) => {
 						if (unit) this._changeRenderUnit(unit, contentElement);
 					}));
@@ -5895,9 +6096,9 @@ var SingleUnitUIController = class extends Disposable {
 		var _this$_instanceServic2;
 		if (this._currentRenderId === rendererId) return false;
 		if ((_this$_instanceServic2 = this._instanceService.getUnitCreateOptions(rendererId)) === null || _this$_instanceServic2 === void 0 ? void 0 : _this$_instanceServic2.embeddedRender) return false;
-		const renderer = this._renderManagerService.getRenderById(rendererId);
+		const renderer = this._renderManagerService.getRenderUnitById(rendererId);
 		if (!renderer || !renderer.unitId || isInternalEditorID(renderer.unitId)) return false;
-		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderById(this._currentRenderId) : null;
+		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderUnitById(this._currentRenderId) : null;
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.deactivate();
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.engine.unmount();
 		renderer.engine.mount(contentElement);
@@ -5969,7 +6170,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-alpha.8";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6063,7 +6264,7 @@ function ShortcutPanel() {
 			if (!shortcutGroups.has(group)) shortcutGroups.set(group, []);
 			shortcutGroups.get(group).push(shortcutItem);
 		}
-		setShortcutItems(Array.from(shortcutGroups.entries()).map(([name, items]) => {
+		const toRender = Array.from(shortcutGroups.entries()).map(([name, items]) => {
 			const groupSequence = name.split("_")[0];
 			const localeKey = groupTitles.get(name);
 			return {
@@ -6071,7 +6272,8 @@ function ShortcutPanel() {
 				name: localeService.t(localeKey),
 				items: dedupeBy(items, (item) => item.title + item.shortcut)
 			};
-		}).sort((a, b) => a.sequence - b.sequence));
+		}).sort((a, b) => a.sequence - b.sequence);
+		setShortcutItems(toRender);
 	}, [
 		shortcutService,
 		localeService,
@@ -22891,6 +23093,8 @@ function mountMobileWorkbench(injector, options, mountContainer, onRendered) {
 function MobileWorkbench(props) {
 	const { header = true, toolbar = true, footer = true, headerMenu = true, ribbonType = "classic", contextMenu = true, mountContainer, onRendered } = props;
 	const localeService = useDependency(LocaleService);
+	const lifecycleService = useDependency(LifecycleService);
+	const workbenchService = useDependency(IWorkbenchService);
 	const themeService = useDependency(ThemeService);
 	const themeSwitcherService = useDependency(ThemeSwitcherService);
 	const contentRef = useRef(null);
@@ -22902,9 +23106,12 @@ function MobileWorkbench(props) {
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
 	const darkMode = useObservable(themeService.darkMode$, themeService.darkMode);
+	const lifecycleStage = useObservable(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = useObservable(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= LifecycleStages.Ready;
 	useEffect(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = useObservable(() => localeService.localeChanged$.pipe(map(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
@@ -22930,51 +23137,58 @@ function MobileWorkbench(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ jsxs("div", {
-			"data-u-comp": "app-layout",
-			className: clsx("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [header && toolbar && /* @__PURE__ */ jsx("header", {
-				"data-u-comp": "headerbar",
-				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-				children: /* @__PURE__ */ jsx(ComponentContainer, {
-					components: toolbarComponents,
-					sharedProps: {
-						ribbonType,
-						headerMenuComponents,
-						headerMenu
-					}
-				}, "toolbar")
-			}), /* @__PURE__ */ jsxs("section", {
-				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-					children: [
-						/* @__PURE__ */ jsx("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-						}),
-						/* @__PURE__ */ jsxs("section", {
-							className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-							children: [/* @__PURE__ */ jsx("header", {
-								className: "univer-w-screen",
-								children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
-							}), /* @__PURE__ */ jsx("section", {
-								ref: contentRef,
-								className: "univer-relative univer-overflow-hidden",
-								"data-range-selector": true,
-								onContextMenu: (e) => e.preventDefault(),
-								children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-							})]
-						}),
-						/* @__PURE__ */ jsx("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ jsx(Sidebar, {})
-						})
-					]
-				}), footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") })]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-u-comp": "app-layout",
+				className: clsx("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [header && toolbar && /* @__PURE__ */ jsx("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ jsx(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}), /* @__PURE__ */ jsxs("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ jsxs("section", {
+								className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+								children: [/* @__PURE__ */ jsx("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ jsx("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(Sidebar, {})
+							})
+						]
+					}), footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") })]
+				})]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ jsx(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			dir: direction,
@@ -24188,6 +24402,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 			[IconManager],
 			[ComponentsController],
 			[ThemeSwitcherService],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
@@ -24293,6 +24508,7 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ILayoutService, { useClass: DesktopLayoutService }],
 			[IRibbonService, { useClass: DesktopRibbonService }],
 			[IRibbonOverrideService, { useClass: RibbonOverrideService }],
@@ -24522,8 +24738,10 @@ function handleStringToStyle($dom, cssStyle = "") {
 		else styleList.bl = 0;
 		else if (key === "font-style") if (value === "italic") styleList.it = 1;
 		else styleList.it = 0;
-		else if (key === "font-family") styleList.ff = extractFontFamily(textTrim(originStr));
-		else if (key === "font-size") {
+		else if (key === "font-family") {
+			const fontFamily = extractFontFamily(textTrim(originStr));
+			styleList.ff = fontFamily;
+		} else if (key === "font-size") {
 			let fs = Number.parseInt(value);
 			if (cssText.indexOf("vertical-align") > -1 && (cssText.indexOf("sub") > -1 || cssText.indexOf("sup") > -1)) fs *= 2;
 			if (value.indexOf("px") !== -1) fs = getPtFontSizeByPx(Number.parseInt(value, 10));
@@ -25174,4 +25392,4 @@ function ProgressBar(props) {
 }
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZoomInput, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IWorkbenchService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, NativeTextEditorShortcutBehavior, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, WorkbenchService, ZIndexManager, ZoomInput, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };