npm - @univerjs/sheets-ui - Versions diffs - 1.0.0-beta.0 → 1.0.0-beta.1 - Mend

@univerjs/sheets-ui 1.0.0-beta.0 → 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/lib/cjs/facade.js +5 -5
package/lib/cjs/index.js +1441 -1525
package/lib/cjs/locale/ar-SA.js +14 -133
package/lib/cjs/locale/ca-ES.js +14 -133
package/lib/cjs/locale/de-DE.js +14 -133
package/lib/cjs/locale/en-US.js +14 -133
package/lib/cjs/locale/es-ES.js +14 -133
package/lib/cjs/locale/fa-IR.js +14 -133
package/lib/cjs/locale/fr-FR.js +14 -133
package/lib/cjs/locale/id-ID.js +14 -133
package/lib/cjs/locale/it-IT.js +14 -133
package/lib/cjs/locale/ja-JP.js +14 -133
package/lib/cjs/locale/ko-KR.js +14 -133
package/lib/cjs/locale/pl-PL.js +14 -133
package/lib/cjs/locale/pt-BR.js +14 -133
package/lib/cjs/locale/ru-RU.js +14 -133
package/lib/cjs/locale/sk-SK.js +14 -133
package/lib/cjs/locale/vi-VN.js +14 -133
package/lib/cjs/locale/zh-CN.js +14 -133
package/lib/cjs/locale/zh-HK.js +14 -133
package/lib/cjs/locale/zh-TW.js +14 -133
package/lib/es/facade.js +6 -6
package/lib/es/index.js +1446 -1531
package/lib/es/locale/ar-SA.js +14 -133
package/lib/es/locale/ca-ES.js +14 -133
package/lib/es/locale/de-DE.js +14 -133
package/lib/es/locale/en-US.js +14 -133
package/lib/es/locale/es-ES.js +14 -133
package/lib/es/locale/fa-IR.js +14 -133
package/lib/es/locale/fr-FR.js +14 -133
package/lib/es/locale/id-ID.js +14 -133
package/lib/es/locale/it-IT.js +14 -133
package/lib/es/locale/ja-JP.js +14 -133
package/lib/es/locale/ko-KR.js +14 -133
package/lib/es/locale/pl-PL.js +14 -133
package/lib/es/locale/pt-BR.js +14 -133
package/lib/es/locale/ru-RU.js +14 -133
package/lib/es/locale/sk-SK.js +14 -133
package/lib/es/locale/vi-VN.js +14 -133
package/lib/es/locale/zh-CN.js +14 -133
package/lib/es/locale/zh-HK.js +14 -133
package/lib/es/locale/zh-TW.js +14 -133
package/lib/facade.js +6 -6
package/lib/index.css +54 -87
package/lib/index.js +1446 -1531
package/lib/locale/ar-SA.js +14 -133
package/lib/locale/ca-ES.js +14 -133
package/lib/locale/de-DE.js +14 -133
package/lib/locale/en-US.js +14 -133
package/lib/locale/es-ES.js +14 -133
package/lib/locale/fa-IR.js +14 -133
package/lib/locale/fr-FR.js +14 -133
package/lib/locale/id-ID.js +14 -133
package/lib/locale/it-IT.js +14 -133
package/lib/locale/ja-JP.js +14 -133
package/lib/locale/ko-KR.js +14 -133
package/lib/locale/pl-PL.js +14 -133
package/lib/locale/pt-BR.js +14 -133
package/lib/locale/ru-RU.js +14 -133
package/lib/locale/sk-SK.js +14 -133
package/lib/locale/vi-VN.js +14 -133
package/lib/locale/zh-CN.js +14 -133
package/lib/locale/zh-HK.js +14 -133
package/lib/locale/zh-TW.js +14 -133
package/lib/types/controllers/editor/data-sync.controller.d.ts +4 -2
package/lib/types/controllers/force-string-alert-render.controller.d.ts +9 -4
package/lib/types/controllers/render-controllers/scroll.render-controller.d.ts +6 -0
package/lib/types/controllers/utils/range-tools.d.ts +2 -0
package/lib/types/embed-tab-anchor.d.ts +2 -1
package/lib/types/index.d.ts +1 -1
package/lib/types/locale/en-US.d.ts +1 -106
package/lib/types/menu/header-menu-shape.d.ts +3 -3
package/lib/types/services/cell-alert-manager.service.d.ts +6 -0
package/lib/types/services/cell-popup-manager.service.d.ts +6 -7
package/lib/types/services/sheet-embed-runtime.service.d.ts +2 -1
package/lib/types/views/CellPopup.d.ts +2 -1
package/lib/types/views/hook.d.ts +0 -4
package/lib/types/views/status-bar/CopyableStatisticItem.d.ts +0 -2
package/lib/types/views/status-bar/StatusBar.d.ts +1 -1
package/lib/umd/facade.js +1 -1
package/lib/umd/index.js +14 -11
package/lib/umd/locale/ar-SA.js +1 -1
package/lib/umd/locale/ca-ES.js +1 -1
package/lib/umd/locale/de-DE.js +1 -1
package/lib/umd/locale/en-US.js +1 -1
package/lib/umd/locale/es-ES.js +1 -1
package/lib/umd/locale/fa-IR.js +1 -1
package/lib/umd/locale/fr-FR.js +1 -1
package/lib/umd/locale/id-ID.js +1 -1
package/lib/umd/locale/it-IT.js +1 -1
package/lib/umd/locale/ja-JP.js +1 -1
package/lib/umd/locale/ko-KR.js +1 -1
package/lib/umd/locale/pl-PL.js +1 -1
package/lib/umd/locale/pt-BR.js +1 -1
package/lib/umd/locale/ru-RU.js +1 -1
package/lib/umd/locale/sk-SK.js +1 -1
package/lib/umd/locale/vi-VN.js +1 -1
package/lib/umd/locale/zh-CN.js +1 -1
package/lib/umd/locale/zh-HK.js +1 -1
package/lib/umd/locale/zh-TW.js +1 -1
package/package.json +13 -13
package/lib/types/services/sheet-loading-render.service.d.ts +0 -65

package/lib/cjs/index.js CHANGED Viewed

@@ -10,9 +10,9 @@ let _univerjs_protocol = require("@univerjs/protocol");
 let _univerjs_design = require("@univerjs/design");
 let _univerjs_icons = require("@univerjs/icons");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _univerjs_engine_formula = require("@univerjs/engine-formula");
 let _univerjs_telemetry = require("@univerjs/telemetry");
-let react_jsx_runtime = require("react/jsx-runtime");
 let rxjs_operators = require("rxjs/operators");
 //#region src/basics/editor/get-editor-object.ts
@@ -93,6 +93,40 @@ function whenEditorDidNotInputFormulaActivated(contextService) {
 //#endregion
 //#region src/controllers/utils/range-tools.ts
+function groupConsecutive(values, start, end) {
+	const groups = [];
+	for (let index = start; index <= end; index++) {
+		const value = values[index];
+		const previous = groups[groups.length - 1];
+		if (previous && value === previous.end + 1) previous.end = value;
+		else groups.push({
+			start: value,
+			end: value
+		});
+	}
+	return groups;
+}
+function projectLine(values, start, end) {
+	let low = 0;
+	let high = values.length;
+	while (low < high) {
+		const middle = Math.floor((low + high) / 2);
+		if (values[middle] < start) low = middle + 1;
+		else high = middle;
+	}
+	const first = low;
+	if (first === values.length || values[first] > end) return null;
+	high = values.length;
+	while (low < high) {
+		const middle = Math.floor((low + high) / 2);
+		if (values[middle] <= end) low = middle + 1;
+		else high = middle;
+	}
+	return {
+		start: first,
+		end: low - 1
+	};
+}
 function virtualizeDiscreteRanges(ranges) {
 	let totalRows = [];
 	let totalCols = [];
@@ -116,7 +150,27 @@ function virtualizeDiscreteRanges(ranges) {
 		mapFunc: (row, col) => ({
 			row: totalRows[row],
 			col: totalCols[col]
-		})
+		}),
+		mapRange: (range) => {
+			const rowGroups = groupConsecutive(totalRows, range.startRow, range.endRow);
+			const columnGroups = groupConsecutive(totalCols, range.startColumn, range.endColumn);
+			return rowGroups.flatMap((row) => columnGroups.map((column) => ({
+				startRow: row.start,
+				endRow: row.end,
+				startColumn: column.start,
+				endColumn: column.end
+			})));
+		},
+		projectRange: (range) => {
+			const row = projectLine(totalRows, range.startRow, range.endRow);
+			const column = projectLine(totalCols, range.startColumn, range.endColumn);
+			return row && column ? {
+				startRow: row.start,
+				endRow: row.end,
+				startColumn: column.start,
+				endColumn: column.end
+			} : null;
+		}
 	};
 }
@@ -131,7 +185,7 @@ let SELECTION_SHAPE_DEPTH = /* @__PURE__ */ function(SELECTION_SHAPE_DEPTH) {
 }({});
 function genNormalSelectionStyle(themeService) {
 	const primaryColor = themeService.getColorFromTheme("primary.600");
-	const whiteColor = themeService.getColorFromTheme("white");
+	const gray0Color = themeService.getColorFromTheme("gray.0");
 	const fill = new _univerjs_core.ColorKit(primaryColor).setAlpha(.07).toRgbString();
 	return {
 		strokeWidth: 1,
@@ -140,10 +194,10 @@ function genNormalSelectionStyle(themeService) {
 		widgets: {},
 		widgetSize: 6,
 		widgetStrokeWidth: 1,
-		widgetStroke: whiteColor,
+		widgetStroke: gray0Color,
 		autofillSize: 6,
 		autofillStrokeWidth: 1,
-		autofillStroke: whiteColor,
+		autofillStroke: gray0Color,
 		rowHeaderFill: fill,
 		rowHeaderStroke: primaryColor,
 		rowHeaderStrokeWidth: 1,
@@ -4010,6 +4064,10 @@ const IMAGE_MIME_TO_EXTENSION = {
 	[_univerjs_ui.FILE__BMP_CLIPBOARD_MIME_TYPE]: "bmp"
 };
 const FORMULA_CLIPBOARD_MIME_TYPE = "web application/x-univer-sheets-formula";
+function wrapHtmlForExcel(html) {
+	var _html$match;
+	return `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Excel.Sheet"><meta name="Generator" content="Univer"></head><body><!--StartFragment-->${((_html$match = html.match(/<table[\s\S]*<\/table>/)) === null || _html$match === void 0 ? void 0 : _html$match[0]) ?? html}<!--EndFragment--></body></html>`;
+}
 /**
 * This service provide hooks for sheet features to supplement content or modify behavior of clipboard.
 */
@@ -4104,7 +4162,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			matrix: matrixFragment,
 			copyType
 		});
-		await this._clipboardInterfaceService.write(plain, html, formulaClipboardPayload ? { [FORMULA_CLIPBOARD_MIME_TYPE]: formulaClipboardPayload } : void 0);
+		await this._clipboardInterfaceService.write(plain, wrapHtmlForExcel(html), formulaClipboardPayload ? { [FORMULA_CLIPBOARD_MIME_TYPE]: formulaClipboardPayload } : void 0);
 		this._markSelectionService.removeAllShapes();
 		const style = createCopyPasteSelectionStyle(this._themeService);
 		this._copyMarkId = this._markSelectionService.addShape({
@@ -4124,7 +4182,9 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 		const imageIndex = types.findIndex((type) => _univerjs_ui.imageMimeTypeSet.has(type));
 		const shouldUseHTMLPaste = imageIndex === -1 || !htmlContainsImage(html);
 		if (html && shouldUseHTMLPaste) {
-			if (this._platformService.isWindows && htmlIsFromExcel(html)) this._notificationService.show({
+			const copyId = extractId(html);
+			const isInternalCopy = Boolean(copyId && this._copyContentCache.get(copyId));
+			if (this._platformService.isWindows && htmlIsFromExcel(html) && !isInternalCopy) this._notificationService.show({
 				type: "warning",
 				title: this._localeService.t("sheets-ui.clipboard.shortCutNotify.title"),
 				content: this._localeService.t("sheets-ui.clipboard.shortCutNotify.useShortCutInstead")
@@ -7233,6 +7293,9 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 		this._commandService = _commandService;
 		this._renderManagerService = _renderManagerService;
 		this._scrollManagerService = _scrollManagerService;
+		_defineProperty(this, "_pendingWheelOffsetX", 0);
+		_defineProperty(this, "_pendingWheelOffsetY", 0);
+		_defineProperty(this, "_pendingWheelFrameId", null);
 		this._initCommandListener();
 		this._wheelEventListener();
 		this._scrollBarEventListener();
@@ -7243,6 +7306,12 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 		if (!scene) return;
 		const viewMain = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (!viewMain) return;
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(() => {
+			if (this._pendingWheelFrameId != null) {
+				cancelAnimationFrame(this._pendingWheelFrameId);
+				this._pendingWheelFrameId = null;
+			}
+		}));
 		this.disposeWithMe(scene.onMouseWheel$.subscribeEvent((evt, state) => {
 			if (evt.ctrlKey || !this._contextService.getContextValue(_univerjs_core.FOCUSING_SHEET)) return;
 			let offsetX = 0;
@@ -7258,14 +7327,15 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 				if (absOffsetY >= absOffsetX * WHEEL_CROSS_AXIS_LOCK_RATIO) offsetX = 0;
 				else if (absOffsetX >= absOffsetY * WHEEL_CROSS_AXIS_LOCK_RATIO) offsetY = 0;
 			}
-			const targetViewportScrollX = viewMain.viewportScrollX + offsetX;
-			const targetViewportScrollY = viewMain.viewportScrollY + offsetY;
-			const { x: targetScrollX, y: targetScrollY } = viewMain.transViewportScroll2ScrollValue(targetViewportScrollX, targetViewportScrollY);
-			this._commandService.executeCommand(SetScrollRelativeCommand.id, {
-				offsetX,
-				offsetY
+			this._pendingWheelOffsetX += offsetX;
+			this._pendingWheelOffsetY += offsetY;
+			if (this._pendingWheelFrameId == null) this._pendingWheelFrameId = requestAnimationFrame(() => {
+				this._pendingWheelFrameId = null;
+				this._flushPendingWheelScroll();
 			});
-			this._context.scene.makeDirty(true);
+			const targetViewportScrollX = viewMain.viewportScrollX + this._pendingWheelOffsetX;
+			const targetViewportScrollY = viewMain.viewportScrollY + this._pendingWheelOffsetY;
+			const { x: targetScrollX, y: targetScrollY } = viewMain.transViewportScroll2ScrollValue(targetViewportScrollX, targetViewportScrollY);
 			const isLimitedStore = viewMain.limitedScroll(targetScrollX, targetScrollY);
 			if (isLimitedStore && !isLimitedStore.isLimitedX && !isLimitedStore.isLimitedY) {
 				evt.preventDefault();
@@ -7274,6 +7344,30 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 			if (viewMain.isWheelPreventDefaultX && viewMain.isWheelPreventDefaultY) evt.preventDefault();
 		}));
 	}
+	_flushPendingWheelScroll() {
+		const offsetX = this._pendingWheelOffsetX;
+		const offsetY = this._pendingWheelOffsetY;
+		if (offsetX === 0 && offsetY === 0) return;
+		this._pendingWheelOffsetX = 0;
+		this._pendingWheelOffsetY = 0;
+		const canUseScrollFastPath = this._canUseScrollFastPath();
+		this._commandService.executeCommand(SetScrollRelativeCommand.id, {
+			offsetX,
+			offsetY
+		});
+		this._markSceneDirtyForScrolling(canUseScrollFastPath);
+	}
+	_canUseScrollFastPath() {
+		var _this$_getSheetObject, _spreadsheet$getSkele;
+		const { scene } = this._context;
+		const spreadsheet = (_this$_getSheetObject = this._getSheetObject()) === null || _this$_getSheetObject === void 0 ? void 0 : _this$_getSheetObject.spreadsheet;
+		return scene.getParent().classType === _univerjs_engine_render.RENDER_CLASS_TYPE.ENGINE && !scene.isDirty() && spreadsheet != null && !spreadsheet.isDirty() && !spreadsheet.isForceDirty() && ((_spreadsheet$getSkele = spreadsheet.getSkeleton()) === null || _spreadsheet$getSkele === void 0 ? void 0 : _spreadsheet$getSkele.worksheet.getMergeData().length) === 0 && scene.getViewports().every((viewport) => !viewport.shouldIntoRender() || !viewport.isDirty && !viewport.isForceDirty) && scene.getLayers().every((layer) => layer.getObjectsByOrder().every((object) => !object.isDirty()));
+	}
+	_markSceneDirtyForScrolling(canUseScrollFastPath) {
+		const { scene } = this._context;
+		if (canUseScrollFastPath) scene.makeDirtyForScrolling();
+		else scene.makeDirty(true);
+	}
 	_scrollBarEventListener() {
 		const { scene } = this._context;
 		if (scene == null) return;
@@ -7526,8 +7620,8 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 		return (0, _univerjs_sheets.getSelectionsService)(this._injector);
 	}
 	_getViewportBounding() {
-		var _this$_getSheetObject, _this$_sheetSkeletonM5;
-		const scene = (_this$_getSheetObject = this._getSheetObject()) === null || _this$_getSheetObject === void 0 ? void 0 : _this$_getSheetObject.scene;
+		var _this$_getSheetObject2, _this$_sheetSkeletonM5;
+		const scene = (_this$_getSheetObject2 = this._getSheetObject()) === null || _this$_getSheetObject2 === void 0 ? void 0 : _this$_getSheetObject2.scene;
 		if (scene == null) return;
 		const viewport = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (viewport == null) return;
@@ -7537,10 +7631,10 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends _u
 		return skeleton.getRangeByViewBound(vpInfo.viewBound);
 	}
 	_scrollToCell(row, column, forceTop = false, forceLeft = false) {
-		var _this$_getSheetObject2, _this$_sheetSkeletonM6;
+		var _this$_getSheetObject3, _this$_sheetSkeletonM6;
 		const { rowHeightAccumulation, columnWidthAccumulation } = this._sheetSkeletonManagerService.getCurrentSkeleton() ?? {};
 		if (rowHeightAccumulation == null || columnWidthAccumulation == null) return false;
-		const scene = (_this$_getSheetObject2 = this._getSheetObject()) === null || _this$_getSheetObject2 === void 0 ? void 0 : _this$_getSheetObject2.scene;
+		const scene = (_this$_getSheetObject3 = this._getSheetObject()) === null || _this$_getSheetObject3 === void 0 ? void 0 : _this$_getSheetObject3.scene;
 		if (scene == null) return false;
 		const viewport = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (viewport == null) return false;
@@ -9241,1057 +9335,382 @@ CellCustomRenderController = __decorate([
 ], CellCustomRenderController);
 //#endregion
-//#region src/controllers/render-controllers/sheet.render-controller.ts
-const FRAME_STACK_THRESHOLD = 60;
-let SheetRenderController = class SheetRenderController extends _univerjs_core.RxDisposable {
-	constructor(_context, _configService, _sheetSkeletonManagerService, _sheetRenderService, _commandService, _telemetryService) {
-		super();
-		this._context = _context;
-		this._configService = _configService;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetRenderService = _sheetRenderService;
-		this._commandService = _commandService;
-		this._telemetryService = _telemetryService;
-		_defineProperty(this, "_renderMetric$", new rxjs.Subject());
-		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
-		_defineProperty(this, "_renderFrameTimeMetric", null);
-		_defineProperty(this, "_renderFrameTags", {});
-		_defineProperty(this, "_afterRenderMetric$", new rxjs.Subject());
-		this._addNewRender();
-		this._initRenderMetricSubscriber();
+//#region src/views/hook.ts
+function useActiveWorkbook() {
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	return (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), void 0, void 0, []) ?? null;
+}
+function useActiveWorksheet(workbook) {
+	return (0, _univerjs_ui.useObservable)(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null), void 0, void 0, [workbook]);
+}
+function useWorkbooks() {
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	return (0, _univerjs_ui.useObservable)(() => {
+		return (0, rxjs.merge)([univerInstanceService.getTypeOfUnitAdded$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), univerInstanceService.getTypeOfUnitDisposed$(_univerjs_core.UniverInstanceType.UNIVER_SHEET)]).pipe((0, rxjs.map)(() => univerInstanceService.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)), (0, rxjs.startWith)(univerInstanceService.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)));
+	}, [], void 0, [univerInstanceService]);
+}
+//#endregion
+//#region src/views/clipboard/ClipboardPopupMenu.tsx
+const DEFAULT_PADDING = 2;
+const SheetPasteOptions = [
+	{
+		value: "DEFAULT_PASTE",
+		label: "sheets-ui.rightClick.paste"
+	},
+	{
+		value: "SPECIAL_PASTE_VALUE",
+		label: "sheets-ui.rightClick.pasteValue"
+	},
+	{
+		value: "SPECIAL_PASTE_FORMAT",
+		label: "sheets-ui.rightClick.pasteFormat"
+	},
+	{
+		value: "SPECIAL_PASTE_COL_WIDTH",
+		label: "sheets-ui.rightClick.pasteColWidth"
+	},
+	{
+		value: "SPECIAL_PASTE_BESIDES_BORDER",
+		label: "sheets-ui.rightClick.pasteBesidesBorder"
+	},
+	{
+		value: "SPECIAL_PASTE_FORMULA",
+		label: "sheets-ui.rightClick.pasteFormula"
 	}
-	_addNewRender() {
-		const { scene, engine, unit: workbook } = this._context;
-		this._addComponent(workbook);
-		this._initRerenderScheduler();
-		this._initCommandListener();
-		const worksheet = this._context.unit.getActiveSheet();
-		if (!worksheet) throw new Error("No active sheet found");
-		const sheetId = worksheet.getSheetId();
-		this._sheetSkeletonManagerService.setCurrent({ sheetId });
-		const frameFn = () => scene.render();
-		this.disposeWithMe(this._context.activated$.subscribe((activated) => {
-			if (activated) engine.runRenderLoop(frameFn);
-			else engine.stopRenderLoop(frameFn);
-		}));
+];
+const useMenuPosition = (range) => {
+	var _scene$getEngine;
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const workbook = useActiveWorkbook();
+	if (!range || !workbook) return null;
+	const anchor = {
+		startRow: range.rows[0],
+		startCol: range.cols[0],
+		endRow: range.rows[range.rows.length - 1],
+		endCol: range.cols[range.cols.length - 1]
+	};
+	if (anchor.endRow < 0 || anchor.endCol < 0) return null;
+	const ru = renderManagerService.getRenderUnitById(workbook.getUnitId());
+	const sheetSkeletonManagerService = ru === null || ru === void 0 ? void 0 : ru.with(SheetSkeletonManagerService);
+	const sheetObject = getSheetObject(univerInstanceService, renderManagerService);
+	if (!sheetObject) return null;
+	const { scene } = sheetObject;
+	const skeleton = sheetSkeletonManagerService === null || sheetSkeletonManagerService === void 0 ? void 0 : sheetSkeletonManagerService.getCurrentSkeleton();
+	const viewport = getViewportByCell(anchor.endRow, anchor.endCol, scene, workbook.getActiveSheet());
+	if (!viewport) return null;
+	const scaleX = scene === null || scene === void 0 ? void 0 : scene.scaleX;
+	const scaleY = scene === null || scene === void 0 ? void 0 : scene.scaleY;
+	const scrollXY = scene === null || scene === void 0 ? void 0 : scene.getViewportScrollXY(viewport);
+	const canvas = (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.getCanvas();
+	if (!scaleX || !scene || !scaleX || !scaleY || !scrollXY) return null;
+	const endPosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getNoMergeCellWithCoordByIndex(anchor.endRow, anchor.endCol);
+	const endX = (endPosition === null || endPosition === void 0 ? void 0 : endPosition.endX) ?? 0;
+	const endY = (endPosition === null || endPosition === void 0 ? void 0 : endPosition.endY) ?? 0;
+	const positionEndX = (0, _univerjs_engine_render.convertTransformToOffsetX)(endX, scaleX, scrollXY) ?? -9999;
+	const positionEndY = (0, _univerjs_engine_render.convertTransformToOffsetY)(endY, scaleY, scrollXY) ?? -9999;
+	const canvasWidth = canvas === null || canvas === void 0 ? void 0 : canvas.getWidth();
+	const canvasHeight = canvas === null || canvas === void 0 ? void 0 : canvas.getHeight();
+	if (!canvasWidth || !canvasHeight) return null;
+	const XInSideView = positionEndX + 50 <= canvasWidth;
+	const YInSideView = positionEndY + 50 <= canvasHeight;
+	let positionX = positionEndX;
+	let positionY = positionEndY;
+	if (!XInSideView) positionX = canvasWidth - 100;
+	if (!YInSideView) positionY = canvasHeight - 100;
+	return {
+		positionX,
+		positionY
+	};
+};
+const ClipboardPopupMenu = () => {
+	const clipboardService = (0, _univerjs_ui.useDependency)(ISheetClipboardService);
+	const showMenu = (0, _univerjs_ui.useObservable)(clipboardService.showMenu$, false);
+	const pasteOptionsCache = (0, _univerjs_ui.useObservable)(clipboardService.pasteOptionsCache$, null);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const [menuHovered, setMenuHovered] = (0, react.useState)(false);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const range = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.pastedRange;
+	const relativePosition = useMenuPosition(range);
+	if (!relativePosition || !showMenu) return null;
+	if (relativePosition.positionX < 50 || relativePosition.positionY < 30) return null;
+	const showMore = menuHovered || visible;
+	const handleClick = (type) => {
+		setVisible(false);
+		commandService.executeCommand(SheetOptionalPasteCommand.id, { type });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute univer-inset-0 univer-z-10 univer-size-0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-absolute",
+			style: {
+				left: relativePosition.positionX + DEFAULT_PADDING,
+				top: relativePosition.positionY + DEFAULT_PADDING
+			},
+			onMouseEnter: () => setMenuHovered(true),
+			onMouseLeave: () => setMenuHovered(false),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+				align: "start",
+				items: SheetPasteOptions.map((item) => ({
+					type: "checkbox",
+					value: item.value,
+					label: localeService.t(item.label),
+					checked: (pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.pasteType) === PREDEFINED_HOOK_NAME_PASTE[item.value],
+					onSelect: () => handleClick(item.value)
+				})),
+				open: visible,
+				onOpenChange: setVisible,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
+						"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+						"univer-bg-gray-0 dark:!univer-bg-gray-900": !visible
+					}),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PasteSpecialDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
+				})
+			})
+		})
+	});
+};
+//#endregion
+//#region src/controllers/clipboard/const.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 RemovePasteMenuCommands = [
+	SetCellEditVisibleOperation.id,
+	_univerjs_sheets.SetRangeValuesCommand.id,
+	SetZoomRatioOperation.id,
+	_univerjs_sheets.MoveRangeMutation.id,
+	_univerjs_sheets.RemoveRowMutation.id,
+	_univerjs_sheets.RemoveColMutation.id,
+	_univerjs_sheets.InsertRowMutation.id,
+	_univerjs_sheets.InsertColMutation.id,
+	_univerjs_sheets.MoveRowsMutation.id,
+	_univerjs_sheets.MoveColsMutation.id,
+	_univerjs_sheets.SetWorksheetColWidthMutation.id,
+	_univerjs_sheets.SetWorksheetRowHeightMutation.id,
+	_univerjs_sheets.SetSelectionsOperation.id,
+	_univerjs_core.UndoCommandId
+];
+//#endregion
+//#region src/services/editor/cell-editor-manager.service.ts
+var CellEditorManagerService = class {
+	constructor() {
+		_defineProperty(this, "_state", null);
+		_defineProperty(this, "_rect", null);
+		_defineProperty(this, "_state$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "state$", this._state$.asObservable());
+		_defineProperty(this, "_rect$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "rect$", this._rect$.asObservable());
+		_defineProperty(this, "_focus", false);
+		_defineProperty(this, "_focus$", new rxjs.BehaviorSubject(this._focus));
+		_defineProperty(this, "focus$", this._focus$.asObservable());
 	}
-	_initRenderMetricSubscriber() {
-		const { engine } = this._context;
-		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
-			this._renderFrameTimeMetric = null;
-			this._renderFrameTags = {};
-		}));
-		this.disposeWithMe(engine.endFrame$.subscribe(() => {
-			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).some((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX))) this._afterRenderMetric$.next({
-				frameTimeMetric: this._renderFrameTimeMetric,
-				tags: this._renderFrameTags
-			});
-		}));
-		this.disposeWithMe(engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
-			if (!this._renderFrameTimeMetric) this._renderFrameTimeMetric = {};
-			if (!this._renderFrameTimeMetric[key]) this._renderFrameTimeMetric[key] = [];
-			this._renderFrameTimeMetric[key].push(Math.round(value * 100) / 100);
-		}));
-		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
-			this._renderFrameTags[key] = value;
-		}));
-		const frameInfoList = [];
-		this.disposeWithMe(this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
-			frameInfoList.push({
-				FPS: basicFrameTimeInfo.FPS,
-				elapsedTime: basicFrameTimeInfo.elapsedTime,
-				frameTime: Math.round(basicFrameTimeInfo.frameTime * 100) / 100,
-				...sceneRenderDetail.frameTimeMetric,
-				...sceneRenderDetail.tags
-			});
-			if (frameInfoList.length > FRAME_STACK_THRESHOLD) {
-				this._captureRenderMetric(frameInfoList);
-				frameInfoList.length = 0;
-			}
-		}));
+	dispose() {
+		this._state$.complete();
+		this._state = null;
+		this._rect$.complete();
+		this._rect = null;
+	}
+	setState(param) {
+		this._state = param;
+		this._refresh(param);
+	}
+	getRect() {
+		return this._rect;
+	}
+	setRect(param) {
+		this._rect = param;
+		this._rect$.next(param);
+	}
+	getState() {
+		return this._state;
+	}
+	setFocus(param = false) {
+		this._focus = param;
+		this._focus$.next(param);
+	}
+	_refresh(param) {
+		this._state$.next(param);
+	}
+};
+const ICellEditorManagerService = (0, _univerjs_core.createIdentifier)("univer.sheet-cell-editor-manager.service");
+//#endregion
+//#region src/services/sheet-embed-integration.service.ts
+const SHEET_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
+const SHEET_EMBED_RUNTIME_FOCUS_ROLE_ATTRIBUTE = "data-embed-runtime-focus-role";
+const SHEET_EMBED_FLOAT_DOM_ATTRIBUTE = "data-embed-float-dom";
+const SHEET_EMBED_ID_ATTRIBUTE = "data-embed-id";
+const SHEET_EMBED_HOST_UNIT_ID_ATTRIBUTE = "data-embed-host-unit-id";
+const SHEET_EMBED_CHILD_UNIT_ID_ATTRIBUTE = "data-embed-child-unit-id";
+const SHEET_EMBED_CHILD_TYPE_ATTRIBUTE = "data-embed-child-type";
+const ISheetEmbedInteractionBoundaryService = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-interaction-boundary.service");
+const ISheetEmbedRuntimeFocusCoordinator = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-runtime-focus-coordinator");
+const ISheetEmbedFloatingGeometryService = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-floating-geometry.service");
+function resolveSheetEmbedRuntimeDomScope(element) {
+	var _element$closest;
+	if (!element) return;
+	const embedId = ((_element$closest = element.closest(`[${"data-embed-interaction-boundary-owner"}]`)) === null || _element$closest === void 0 ? void 0 : _element$closest.getAttribute("data-embed-interaction-boundary-owner")) ?? void 0;
+	const container = resolveSheetEmbedFloatDomContainer(element, embedId);
+	const resolvedEmbedId = (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-id")) ?? embedId;
+	if (!resolvedEmbedId) return;
+	return {
+		embedId: resolvedEmbedId,
+		hostUnitId: (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-host-unit-id")) ?? void 0,
+		childUnitId: (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-child-unit-id")) ?? void 0,
+		childType: readChildType(container)
+	};
+}
+function resolveActiveSheetEmbedRuntimeDomScope(ownerDocument = document) {
+	const activeContainer = ownerDocument.querySelector(`[${SHEET_EMBED_FLOAT_DOM_ATTRIBUTE}="true"][data-embed-float-stage="stage2"]`);
+	if (!activeContainer) return;
+	return resolveSheetEmbedRuntimeDomScope(activeContainer);
+}
+function resolveSheetEmbedFloatDomContainer(element, embedId) {
+	const ownContainer = element === null || element === void 0 ? void 0 : element.closest(`[${SHEET_EMBED_FLOAT_DOM_ATTRIBUTE}="true"]`);
+	if (ownContainer && (!embedId || ownContainer.getAttribute("data-embed-id") === embedId)) return ownContainer;
+	const ownerDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) ?? (typeof document === "undefined" ? void 0 : document);
+	if (!ownerDocument || !embedId) return ownContainer ?? void 0;
+	return ownerDocument.querySelector(`[${"data-embed-float-dom"}="true"][${"data-embed-id"}="${escapeAttributeValue(embedId)}"]`) ?? void 0;
+}
+function escapeAttributeValue(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function readChildType(container) {
+	const value = container === null || container === void 0 ? void 0 : container.getAttribute(SHEET_EMBED_CHILD_TYPE_ATTRIBUTE);
+	if (value == null || value === "") return;
+	return Number(value);
+}
+//#endregion
+//#region src/services/editor/cell-editor-resize.service.ts
+const EDITOR_INPUT_SELF_EXTEND_GAP = 5;
+const EDITOR_BORDER_SIZE = 2;
+let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _univerjs_core.Disposable {
+	constructor(_layoutService, _cellEditorManagerService, _editorBridgeService, _renderManagerService, _univerInstanceService, _configService, _embedFloatingGeometryService) {
+		super();
+		this._layoutService = _layoutService;
+		this._cellEditorManagerService = _cellEditorManagerService;
+		this._editorBridgeService = _editorBridgeService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._configService = _configService;
+		this._embedFloatingGeometryService = _embedFloatingGeometryService;
+	}
+	get _currentRenderer() {
+		return (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SHEET, this._univerInstanceService, this._renderManagerService);
+	}
+	get _editingUnitId() {
+		var _this$_editorBridgeSe;
+		return ((_this$_editorBridgeSe = this._editorBridgeService.getEditCellState()) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.unitId) ?? "";
+	}
+	get _editingRenderer() {
+		return this._renderManagerService.getRenderUnitById(this._editingUnitId);
+	}
+	get _renderer() {
+		return this._editingRenderer ?? this._currentRenderer;
+	}
+	get _sheetSkeletonManagerService() {
+		var _this$_renderer;
+		return (_this$_renderer = this._renderer) === null || _this$_renderer === void 0 ? void 0 : _this$_renderer.with(SheetSkeletonManagerService);
+	}
+	get engine() {
+		var _this$_renderer2;
+		return (_this$_renderer2 = this._renderer) === null || _this$_renderer2 === void 0 ? void 0 : _this$_renderer2.engine;
+	}
+	fitTextSize(callback) {
+		const param = this._editorBridgeService.getEditCellState();
+		if (!param) return;
+		const { position, documentLayoutObject, canvasOffset, scaleX, scaleY } = param;
+		const { startX, startY, endX, endY } = position;
+		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const documentSkeleton = this._getEditorSkeleton();
+		if (!documentSkeleton) return;
+		documentSkeleton.resetInitialWidth();
+		const info = this._predictingSize(position, canvasOffset, documentSkeleton, documentLayoutObject, scaleX, scaleY);
+		if (!info || info.actualWidth <= 0) return;
+		let { actualWidth, actualHeight } = info;
+		const { verticalAlign, horizontalAlign, paddingData, fill } = documentLayoutObject;
+		actualWidth = actualWidth + (paddingData.l ?? 0) * scaleX + (paddingData.r ?? 0) * scaleX;
+		actualHeight = actualHeight + (paddingData.t ?? 0) * scaleY + (paddingData.b ?? 0) * scaleY;
+		let editorWidth = endX - startX;
+		let editorHeight = endY - startY;
+		if (editorWidth < actualWidth) editorWidth = Math.ceil(actualWidth);
+		if (editorHeight < actualHeight) editorHeight = Math.ceil(actualHeight);
+		let offsetTop = 0;
+		if (verticalAlign === _univerjs_core.VerticalAlign.MIDDLE) offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
+		else if (verticalAlign === _univerjs_core.VerticalAlign.TOP) offsetTop = paddingData.t || 0;
+		else offsetTop = (editorHeight - actualHeight) / scaleY;
+		let offsetLeft = 0;
+		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) {} else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = (editorWidth - actualWidth) / scaleX;
+		else offsetLeft = paddingData.l || 0;
+		offsetTop = Math.max(offsetTop, paddingData.t || 0);
+		offsetLeft = Math.max(offsetLeft, paddingData.l || 0);
+		documentDataModel.updateDocumentDataMargin({
+			t: offsetTop,
+			l: offsetLeft
+		});
+		documentSkeleton.calculate();
+		this._editAreaProcessing(editorWidth, editorHeight, position, canvasOffset, fill, scaleX, scaleY, horizontalAlign, callback);
 	}
 	/**
-	* Send render metric to telemetry service
-	* @param frameInfoList
+	* Mainly used to pre-calculate the width of the editor,
+	* to determine whether it needs to be automatically widened.
 	*/
-	_captureRenderMetric(frameInfoList) {
-		var _this$_telemetryServi;
-		const filteredFrameInfo = frameInfoList;
-		if (filteredFrameInfo.length === 0) return;
-		const sumValueForNumListFields = (data) => {
-			let totalSum = 0;
-			const sums = Object.entries(data).filter(([_, value]) => Array.isArray(value)).map(([key]) => key).reduce((acc, key) => {
-				acc[key] = data[key].reduce((sum, num) => sum + num, 0);
-				return acc;
-			}, {});
-			Object.keys(data).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).forEach((key) => {
-				totalSum += sums[key];
+	_predictingSize(actualRangeWithCoord, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+		const { startX, endX } = actualRangeWithCoord;
+		const { textRotation, wrapStrategy, paddingData } = documentLayoutObject;
+		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const { vertexAngle: angle } = (0, _univerjs_engine_render.convertTextRotation)(textRotation);
+		if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP && angle === 0) {
+			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize((endX - startX) / scaleX);
+			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataMargin({
+				l: paddingData.l,
+				t: paddingData.t
 			});
+			documentSkeleton.calculate();
+			const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
 			return {
-				...sums,
-				extensionTotal: totalSum
-			};
-		};
-		const frameTimeListAfterSum = frameInfoList.map((info) => {
-			return {
-				...info,
-				...sumValueForNumListFields(info)
+				actualWidth: actualWidth * scaleX,
+				actualHeight: actualHeight * scaleY
 			};
+		}
+		const maxSize = this._getEditorMaxSize(actualRangeWithCoord, canvasOffset, documentLayoutObject.horizontalAlign);
+		if (!maxSize) return;
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(maxSize.width / scaleX);
+		documentSkeleton.calculate();
+		const size = documentSkeleton.getActualSize();
+		let editorWidth = endX - startX;
+		if (editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX) editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX;
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX);
+		/**
+		* Do not rely on cell layout logic, depend on the document's internal alignment logic.
+		*/
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentRenderConfig({
+			horizontalAlign: _univerjs_core.HorizontalAlign.UNSPECIFIED,
+			cellValueType: void 0
 		});
-		const getSummaryStats = (list) => {
-			return Object.entries(list[0]).filter(([key, _]) => !["elapsedTime"].includes(key)).filter(([_, value]) => typeof value === "number").map(([key]) => key).reduce((acc, key) => {
-				const values = list.map((obj) => obj[key]);
-				const max = Math.max(...values);
-				const min = Math.min(...values);
-				const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
-				acc[key] = {
-					max: Math.round(max * 100) / 100,
-					min: Math.round(min * 100) / 100,
-					avg: Math.round(avg * 100) / 100
-				};
-				return acc;
-			}, {});
-		};
-		const summaryFrameStats = getSummaryStats(frameTimeListAfterSum);
-		const elapsedTimeToStart = filteredFrameInfo[filteredFrameInfo.length - 1].elapsedTime;
-		const telemetryData = {
-			sheetId: this._context.unit.getActiveSheet().getSheetId(),
-			unitId: this._context.unit.getUnitId(),
-			elapsedTimeToStart,
-			...summaryFrameStats
-		};
-		this._renderMetric$.next(telemetryData);
-		(_this$_telemetryServi = this._telemetryService) === null || _this$_telemetryServi === void 0 || _this$_telemetryServi.capture("sheet_render_cost", telemetryData);
-	}
-	_addComponent(workbook) {
-		const { scene, components } = this._context;
-		const worksheet = workbook.getActiveSheet();
-		const spreadsheet = new _univerjs_engine_render.Spreadsheet("__SpreadsheetRender__");
-		this._addViewport(worksheet);
-		const spreadsheetRowHeader = new _univerjs_engine_render.SpreadsheetRowHeader("__SpreadsheetRowHeader__");
-		const spreadsheetColumnHeader = new _univerjs_engine_render.SpreadsheetColumnHeader("__SpreadsheetColumnHeader__");
-		const SpreadsheetLeftTopPlaceholder = new _univerjs_engine_render.Rect("__SpreadsheetLeftTopPlaceholder__", {
-			zIndex: 2,
-			left: -1,
-			top: -1,
-			fill: "rgb(248, 249, 250)",
-			stroke: "rgb(217, 217, 217)",
-			strokeWidth: 1
-		});
-		this._context.mainComponent = spreadsheet;
-		components.set("__SpreadsheetRender__", spreadsheet);
-		components.set("__SpreadsheetRowHeader__", spreadsheetRowHeader);
-		components.set("__SpreadsheetColumnHeader__", spreadsheetColumnHeader);
-		components.set("__SpreadsheetLeftTopPlaceholder__", SpreadsheetLeftTopPlaceholder);
-		scene.addObjects([spreadsheet], 0);
-		scene.addObjects([
-			spreadsheetRowHeader,
-			spreadsheetColumnHeader,
-			SpreadsheetLeftTopPlaceholder
-		], 10);
-		scene.enableLayerCache(0, 10);
-	}
-	_initViewports(scene, rowHeader, columnHeader) {
-		const rowHeaderWidth = rowHeader.hidden ? 0 : rowHeader.width;
-		const columnHeaderHeight = columnHeader.hidden ? 0 : columnHeader.height;
-		const bufferEdgeX = 100;
-		const bufferEdgeY = 100;
-		const viewMain = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN, scene, {
-			left: rowHeaderWidth,
-			top: columnHeaderHeight,
-			bottom: 0,
-			right: 0,
-			isWheelPreventDefaultX: true,
-			allowCache: true,
-			bufferEdgeX,
-			bufferEdgeY
-		});
-		const viewMainLeftTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX: 0,
-			bufferEdgeY: 0
-		});
-		const viewMainLeft = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX: 0,
-			bufferEdgeY
-		});
-		const viewMainTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX,
-			bufferEdgeY: 0
-		});
-		const viewRowTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, scene, {
-			active: false,
-			isWheelPreventDefaultX: true
-		});
-		const viewRowBottom = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM, scene, {
-			left: 0,
-			top: columnHeaderHeight,
-			bottom: 0,
-			width: rowHeaderWidth + 1,
-			isWheelPreventDefaultX: true
-		});
-		const viewColumnLeft = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, scene, {
-			active: false,
-			isWheelPreventDefaultX: true
-		});
-		const viewColumnRight = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, scene, {
-			left: rowHeaderWidth,
-			top: 0,
-			height: columnHeaderHeight + 1,
-			right: 0,
-			isWheelPreventDefaultX: true
-		});
-		return {
-			viewMain,
-			viewLeftTop: new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP, scene, {
-				left: 0,
-				top: 0,
-				width: rowHeaderWidth,
-				height: columnHeaderHeight,
-				isWheelPreventDefaultX: true
-			}),
-			viewMainLeftTop,
-			viewMainLeft,
-			viewMainTop,
-			viewColumnLeft,
-			viewRowTop,
-			viewRowBottom,
-			viewColumnRight
-		};
-	}
-	/**
-	*
-	* initViewport & wheel event
-	* +-----------------+--------------------+-------------------+
-	* |  VIEW_LEFT_TOP  |  VIEW_COLUMN_LEFT  | VIEW_COLUMN_RIGHT |
-	* +-----------------+--------------------+-------------------+
-	* |  VIEW_ROW_TOP   | VIEW_MAIN_LEFT_TOP |   VIEW_MAIN_TOP   |
-	* +-----------------+--------------------+-------------------+
-	* | VIEW_ROW_BOTTOM |   VIEW_MAIN_LEFT   |     VIEW_MAIN     |
-	* +-----------------+--------------------+-------------------+
-	*/
-	_addViewport(worksheet) {
-		const scene = this._context.scene;
-		const { rowHeader, columnHeader } = worksheet.getConfig();
-		const { viewMain } = this._initViewports(scene, rowHeader, columnHeader);
-		const sheetsUIConfig = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		new _univerjs_engine_render.ScrollBar(viewMain, sheetsUIConfig === null || sheetsUIConfig === void 0 ? void 0 : sheetsUIConfig.scrollConfig);
-		scene.attachControl();
-		return viewMain;
-	}
-	_initRerenderScheduler() {
-		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
-			if (!param) return null;
-			const { skeleton: spreadsheetSkeleton, sheetId } = param;
-			const workbook = this._context.unit;
-			const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getSheetBySheetId(sheetId);
-			if (workbook == null || worksheet == null) return;
-			const { mainComponent, components } = this._context;
-			const spreadsheet = mainComponent;
-			const spreadsheetRowHeader = components.get("__SpreadsheetRowHeader__");
-			const spreadsheetColumnHeader = components.get("__SpreadsheetColumnHeader__");
-			const spreadsheetLeftTopPlaceholder = components.get("__SpreadsheetLeftTopPlaceholder__");
-			const leftTopPlaceholderSize = getLeftTopPlaceholderSize(spreadsheetSkeleton);
-			spreadsheet === null || spreadsheet === void 0 || spreadsheet.updateSkeleton(spreadsheetSkeleton);
-			spreadsheetRowHeader === null || spreadsheetRowHeader === void 0 || spreadsheetRowHeader.updateSkeleton(spreadsheetSkeleton);
-			spreadsheetColumnHeader === null || spreadsheetColumnHeader === void 0 || spreadsheetColumnHeader.updateSkeleton(spreadsheetSkeleton);
-			spreadsheetLeftTopPlaceholder === null || spreadsheetLeftTopPlaceholder === void 0 || spreadsheetLeftTopPlaceholder.transformByState({
-				width: leftTopPlaceholderSize.width,
-				height: leftTopPlaceholderSize.height
-			});
-		}));
-	}
-	_initCommandListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command, options) => {
-			const { unit: workbook } = this._context;
-			const { id: commandId } = command;
-			if (_univerjs_sheets.COMMAND_LISTENER_SKELETON_CHANGE.includes(commandId) || this._sheetRenderService.checkMutationShouldTriggerRerender(commandId)) {
-				const { unitId, subUnitId } = command.params;
-				const worksheet = workbook.getActiveSheet();
-				if (!worksheet) return;
-				const workbookId = this._context.unitId;
-				const worksheetId = worksheet.getSheetId();
-				if (unitId !== workbookId || subUnitId !== worksheetId) return;
-				this._sheetSkeletonManagerService.makeDirty({
-					sheetId: worksheetId,
-					commandId
-				}, true);
-				this._sheetSkeletonManagerService.setCurrent({
-					sheetId: worksheetId,
-					commandId
-				});
-			} else if (_univerjs_sheets.COMMAND_LISTENER_VALUE_CHANGE.includes(commandId)) this._sheetSkeletonManagerService.reCalculate();
-			if (command.type === _univerjs_core.CommandType.MUTATION) this._markUnitDirty(command, options);
-		}));
-	}
-	_markUnitDirty(command, options) {
-		if (command.id.substring(0, 3) === "doc") return;
-		const { mainComponent: spreadsheet, scene } = this._context;
-		if (command.id === _univerjs_engine_formula.SetFormulaCalculationNotificationMutation.id) {
-			if (command.params.stageInfo != null) return;
-		}
-		if (spreadsheet) spreadsheet.makeDirty();
-		scene.makeDirty();
-		if (!command.params) return;
-		const cmdParams = command.params;
-		const viewports = this._spreadsheetViewports(scene);
-		if (command.id === _univerjs_sheets.SetRangeValuesMutation.id && cmdParams.cellValue && !(options === null || options === void 0 ? void 0 : options.fromChangeset)) {
-			const dirtyRange = this._cellValueToRange(cmdParams.cellValue);
-			const dirtyBounds = this._rangeToBounds([dirtyRange]);
-			this._markViewportDirty(viewports, dirtyBounds);
-			spreadsheet.setDirtyArea(dirtyBounds);
-		}
-		if (command.id === _univerjs_sheets.MoveRangeMutation.id && cmdParams.from && cmdParams.to && !(options === null || options === void 0 ? void 0 : options.fromChangeset)) {
-			const fromRange = cmdParams.fromRange || this._cellValueToRange(cmdParams.from.value);
-			const toRange = cmdParams.toRange || this._cellValueToRange(cmdParams.to.value);
-			const dirtyBounds = this._rangeToBounds([fromRange, toRange]);
-			this._markViewportDirty(viewports, dirtyBounds);
-			spreadsheet.setDirtyArea(dirtyBounds);
-		}
-	}
-	/**
-	* cellValue data structure:
-	* {[row]: { [col]: value}}
-	* @param cellValue
-	* @returns IRange
-	*/
-	_cellValueToRange(cellValue) {
-		const columns = [];
-		let minCol = 0;
-		let maxCol = 0;
-		let minRow = 0;
-		let maxRow = 0;
-		for (const [_row, columnObj] of Object.entries(cellValue)) {
-			for (const column in columnObj) {
-				columns.push(Number(column));
-				if (minCol > Number(column)) minCol = Number(column);
-				if (maxCol < Number(column)) maxCol = Number(column);
-			}
-			if (minRow > Number(_row)) minRow = Number(_row);
-			if (maxRow < Number(_row)) maxRow = Number(_row);
-		}
-		return {
-			startRow: minRow,
-			endRow: maxRow,
-			startColumn: minCol,
-			endColumn: maxCol
-		};
-	}
-	_rangeToBounds(ranges) {
-		const { rowHeightAccumulation, columnWidthAccumulation, rowHeaderWidth, columnHeaderHeight } = this._sheetSkeletonManagerService.getCurrentParam().skeleton;
-		const dirtyBounds = [];
-		for (const r of ranges) {
-			const { startRow, endRow, startColumn, endColumn } = r;
-			const top = startRow === 0 ? 0 : rowHeightAccumulation[startRow - 1] + columnHeaderHeight;
-			const bottom = rowHeightAccumulation[endRow] + columnHeaderHeight;
-			const left = startColumn === 0 ? 0 : columnWidthAccumulation[startColumn - 1] + rowHeaderWidth;
-			const right = columnWidthAccumulation[endColumn] + rowHeaderWidth;
-			dirtyBounds.push({
-				top,
-				left,
-				bottom,
-				right,
-				width: right - left,
-				height: bottom - top
-			});
-		}
-		return dirtyBounds;
-	}
-	_markViewportDirty(viewports, dirtyBounds) {
-		const activeViewports = viewports.filter((vp) => vp.isActive && vp.cacheBound);
-		for (const vp of activeViewports) for (const b of dirtyBounds) if (_univerjs_core.Rectangle.hasIntersectionBetweenTwoRect(vp.cacheBound, b)) vp.markDirty(true);
-	}
-	_spreadsheetViewports(scene) {
-		return scene.getViewports().filter((v) => [
-			"viewMain",
-			"viewMainLeftTop",
-			"viewMainTop",
-			"viewMainLeft"
-		].includes(v.viewportKey));
-	}
-};
-SheetRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IConfigService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(SheetsRenderService)),
-	__decorateParam(4, _univerjs_core.ICommandService),
-	__decorateParam(5, (0, _univerjs_core.Optional)(_univerjs_telemetry.ITelemetryService))
-], SheetRenderController);
-function getLeftTopPlaceholderSize(skeleton) {
-	return {
-		width: skeleton.rowHeaderWidthAndMarginLeft ?? skeleton.rowHeaderWidth,
-		height: skeleton.columnHeaderHeightAndMarginTop ?? skeleton.columnHeaderHeight
-	};
-}
-//#endregion
-//#region src/controllers/render-controllers/skeleton.render-controller.ts
-let SheetSkeletonRenderController = class SheetSkeletonRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _renderManagerService) {
-		super();
-		this._context = _context;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._renderManagerService = _renderManagerService;
-		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
-			this._updateSceneSize(param);
-		}));
-	}
-	_updateSceneSize(param) {
-		var _this$_renderManagerS;
-		if (param == null) return;
-		const { unitId } = this._context;
-		const { skeleton } = param;
-		const scene = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.scene;
-		if (skeleton == null || scene == null) return;
-		const { rowTotalHeight, columnTotalWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
-		if (!this._context.unit.getActiveSheet()) return;
-		scene === null || scene === void 0 || scene.transformByState({
-			width: rowHeaderWidthAndMarginLeft + columnTotalWidth,
-			height: columnHeaderHeightAndMarginTop + rowTotalHeight
-		});
-		scene.getMainViewport().setMargin(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
-	}
-};
-SheetSkeletonRenderController = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)), __decorateParam(2, _univerjs_engine_render.IRenderManagerService)], SheetSkeletonRenderController);
-//#endregion
-//#region src/services/sheet-loading-render.service.ts
-const PREVIEW_UNIT_SUFFIX = "__snapshot_loading_preview__";
-const PREVIEW_SCENE_PREFIX = "_UNIVER_SCENE_";
-const PREVIEW_CANVAS_Z_INDEX = "9";
-const ISheetLoadingRenderService = (0, _univerjs_core.createIdentifier)("sheets-ui.sheet-loading-render.service");
-let SheetLoadingRenderService = class SheetLoadingRenderService extends _univerjs_core.Disposable {
-	constructor(_injector, _layoutService, _sheetInterceptorService, _renderManagerService) {
-		super();
-		this._injector = _injector;
-		this._layoutService = _layoutService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._renderManagerService = _renderManagerService;
-		_defineProperty(this, "workbook$", new rxjs.BehaviorSubject(null));
-		_defineProperty(this, "loading$", new rxjs.BehaviorSubject(false));
-		_defineProperty(this, "previewReady$", new rxjs.BehaviorSubject(false));
-		_defineProperty(this, "_loadingRender", null);
-		_defineProperty(this, "_finalCanvasGuard", null);
-		_defineProperty(this, "_hiddenFinalCanvas", null);
-		_defineProperty(this, "_finalCanvasVisibility", "");
-	}
-	showSkeleton(workbookData, activeSheetId) {
-		var _this$_loadingRender;
-		const sourceUnitId = workbookData.id;
-		if (((_this$_loadingRender = this._loadingRender) === null || _this$_loadingRender === void 0 ? void 0 : _this$_loadingRender.sourceUnitId) !== sourceUnitId) {
-			this._disposeLoadingRender();
-			this.previewReady$.next(false);
-			this._loadingRender = {
-				sourceUnitId,
-				workbook: this._createLoadingWorkbook(workbookData, activeSheetId),
-				render: null
-			};
-			this.workbook$.next(this._loadingRender.workbook);
-			this.loading$.next(true);
-			this._guardFinalCanvas(sourceUnitId);
-		}
-		const worksheet = this._loadingRender.workbook.getSheetBySheetId(activeSheetId);
-		if (worksheet && this._loadingRender.workbook.getActiveSheet().getSheetId() !== activeSheetId) this._loadingRender.workbook.setActiveSheet(worksheet);
-	}
-	show(workbookData, activeSheetId, cellData) {
-		this.showSkeleton(workbookData, activeSheetId);
-		const loadingRender = this._loadingRender;
-		if (!loadingRender) return;
-		let shouldRender = false;
-		if (!loadingRender.render) {
-			const contentElement = this._layoutService.getContentElement();
-			if (!contentElement) return;
-			loadingRender.render = this._createLoadingRender(loadingRender.workbook, loadingRender.sourceUnitId, contentElement);
-			shouldRender = true;
-		}
-		const worksheet = loadingRender.workbook.getSheetBySheetId(activeSheetId);
-		if (!worksheet) return;
-		if (loadingRender.workbook.getActiveSheet().getSheetId() !== activeSheetId) {
-			loadingRender.workbook.setActiveSheet(worksheet);
-			loadingRender.render.with(SheetSkeletonManagerService).setCurrent({ sheetId: activeSheetId });
-			shouldRender = true;
-		}
-		if (cellData && cellData !== loadingRender.lastCellData) {
-			loadingRender.lastCellData = cellData;
-			const target = worksheet.getCellMatrix();
-			const getDisplayCell = this._sheetInterceptorService.fetchThroughInterceptors(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, _univerjs_core.InterceptorEffectEnum.Value | _univerjs_core.InterceptorEffectEnum.Style);
-			new _univerjs_core.ObjectMatrix(cellData).forValue((row, column, rawData) => {
-				const displayCell = getDisplayCell(rawData, {
-					unitId: loadingRender.sourceUnitId,
-					subUnitId: activeSheetId,
-					row,
-					col: column,
-					workbook: loadingRender.workbook,
-					worksheet,
-					rawData
-				});
-				target.setValue(row, column, displayCell);
-			});
-			const skeletonManager = loadingRender.render.with(SheetSkeletonManagerService);
-			skeletonManager.makeDirty({ sheetId: activeSheetId });
-			skeletonManager.reCalculate();
-			if (loadingRender.render.mainComponent instanceof _univerjs_engine_render.Spreadsheet) loadingRender.render.mainComponent.makeForceDirty(true);
-			loadingRender.render.scene.makeDirty(true);
-			shouldRender = true;
-		}
-		if (shouldRender) loadingRender.render.scene.render();
-		if (!this.previewReady$.value) this.previewReady$.next(true);
-	}
-	async handoff(sourceUnitId, timeoutMs) {
-		var _this$_loadingRender2, _this$_finalCanvasGua;
-		if (((_this$_loadingRender2 = this._loadingRender) === null || _this$_loadingRender2 === void 0 ? void 0 : _this$_loadingRender2.sourceUnitId) !== sourceUnitId) return true;
-		if (!this._loadingRender.render) {
-			this.hide(sourceUnitId);
-			return true;
-		}
-		(_this$_finalCanvasGua = this._finalCanvasGuard) === null || _this$_finalCanvasGua === void 0 || _this$_finalCanvasGua.unsubscribe();
-		this._finalCanvasGuard = null;
-		try {
-			await (0, rxjs.firstValueFrom)(this._getFinalRender$(sourceUnitId).pipe((0, rxjs.take)(1), (0, rxjs.switchMap)((render) => this._waitForFinalCanvas(render).pipe((0, rxjs.switchMap)(() => {
-				this._hideFinalCanvas(render);
-				return this._requestFinalRender(render);
-			}))), (0, rxjs.timeout)(timeoutMs)));
-			this.hide(sourceUnitId);
-			return true;
-		} catch {
-			return false;
-		}
-	}
-	hide(sourceUnitId) {
-		var _this$_loadingRender3;
-		if (((_this$_loadingRender3 = this._loadingRender) === null || _this$_loadingRender3 === void 0 ? void 0 : _this$_loadingRender3.sourceUnitId) !== sourceUnitId) return;
-		this._disposeLoadingRender();
-	}
-	dispose() {
-		this._disposeLoadingRender();
-		this.workbook$.complete();
-		this.loading$.complete();
-		this.previewReady$.complete();
-		super.dispose();
-	}
-	_createLoadingWorkbook(workbookData, activeSheetId) {
-		const previewUnitId = `${workbookData.id}${PREVIEW_UNIT_SUFFIX}`;
-		const workbook = this._injector.createInstance(_univerjs_core.Workbook, {
-			...workbookData,
-			id: previewUnitId
-		});
-		const activeSheet = workbook.getSheetBySheetId(activeSheetId);
-		if (activeSheet) workbook.setActiveSheet(activeSheet);
-		return workbook;
-	}
-	_createLoadingRender(workbook, sourceUnitId, contentElement) {
-		const previewUnitId = workbook.getUnitId();
-		const { width, height } = contentElement.getBoundingClientRect();
-		const engine = this._injector.createInstance(_univerjs_engine_render.Engine, previewUnitId, void 0);
-		const scene = new _univerjs_engine_render.Scene(`${PREVIEW_SCENE_PREFIX}${previewUnitId}`, engine, {
-			width,
-			height
-		});
-		scene.disableObjectsEvent();
-		const render = this._injector.createInstance(_univerjs_engine_render.RenderUnit, {
-			unit: workbook,
-			engine,
-			scene,
-			isMainScene: true
-		});
-		try {
-			render.addRenderDependencies([
-				[SheetSkeletonManagerService],
-				[SheetSkeletonRenderController],
-				[SheetRenderController]
-			]);
-			const canvas = engine.getCanvas();
-			canvas.setId(`univer-sheet-loading-canvas_${sourceUnitId}`);
-			canvas.getCanvasEle().dataset.uUnitId = sourceUnitId;
-			canvas.getCanvasEle().style.pointerEvents = "none";
-			canvas.getCanvasEle().style.zIndex = PREVIEW_CANVAS_Z_INDEX;
-			engine.mount(contentElement);
-			return render;
-		} catch (error) {
-			this._disposeRender(render);
-			throw error;
-		}
-	}
-	_waitForFinalCanvas(render) {
-		return new rxjs.Observable((subscriber) => {
-			let frameId;
-			const canvasElement = render.engine.getCanvasElement();
-			const checkMounted = () => {
-				const contentElement = this._layoutService.getContentElement();
-				if (contentElement && canvasElement.parentElement === contentElement && canvasElement.width > 0 && canvasElement.height > 0) {
-					subscriber.next();
-					subscriber.complete();
-					return;
-				}
-				frameId = window.requestAnimationFrame(checkMounted);
-			};
-			checkMounted();
-			return () => {
-				if (frameId !== void 0) window.cancelAnimationFrame(frameId);
-			};
-		});
-	}
-	_getFinalRender$(sourceUnitId) {
-		const existingRender = this._renderManagerService.getRenderUnitById(sourceUnitId);
-		return existingRender ? (0, rxjs.of)(existingRender) : this._renderManagerService.created$.pipe((0, rxjs.filter)((render) => render.unitId === sourceUnitId));
-	}
-	_guardFinalCanvas(sourceUnitId) {
-		var _this$_finalCanvasGua2;
-		(_this$_finalCanvasGua2 = this._finalCanvasGuard) === null || _this$_finalCanvasGua2 === void 0 || _this$_finalCanvasGua2.unsubscribe();
-		this._finalCanvasGuard = this._getFinalRender$(sourceUnitId).pipe((0, rxjs.take)(1), (0, rxjs.switchMap)((render) => this._waitForFinalCanvas(render).pipe((0, rxjs.map)(() => render)))).subscribe((render) => this._hideFinalCanvas(render));
-	}
-	_requestFinalRender(render) {
-		render.scene.makeDirty(true);
-		return (0, rxjs.from)(render.scene.requestRender()).pipe((0, rxjs.switchMap)(() => this._waitForNextAnimationFrame()));
-	}
-	_hideFinalCanvas(render) {
-		const canvasElement = render.engine.getCanvasElement();
-		if (this._hiddenFinalCanvas === canvasElement) return;
-		this._restoreFinalCanvas();
-		this._hiddenFinalCanvas = canvasElement;
-		this._finalCanvasVisibility = canvasElement.style.visibility;
-		canvasElement.style.visibility = "hidden";
-	}
-	_restoreFinalCanvas() {
-		if (!this._hiddenFinalCanvas) return;
-		this._hiddenFinalCanvas.style.visibility = this._finalCanvasVisibility;
-		this._hiddenFinalCanvas = null;
-		this._finalCanvasVisibility = "";
-	}
-	_waitForNextAnimationFrame() {
-		return new rxjs.Observable((subscriber) => {
-			const frameId = window.requestAnimationFrame(() => {
-				subscriber.next();
-				subscriber.complete();
-			});
-			return () => window.cancelAnimationFrame(frameId);
-		});
-	}
-	_disposeLoadingRender() {
-		var _this$_finalCanvasGua3;
-		(_this$_finalCanvasGua3 = this._finalCanvasGuard) === null || _this$_finalCanvasGua3 === void 0 || _this$_finalCanvasGua3.unsubscribe();
-		this._finalCanvasGuard = null;
-		this._restoreFinalCanvas();
-		const loadingRender = this._loadingRender;
-		this._loadingRender = null;
-		this.workbook$.next(null);
-		this.loading$.next(false);
-		this.previewReady$.next(false);
-		if (!loadingRender) return;
-		if (loadingRender.render) this._disposeRender(loadingRender.render);
-		loadingRender.workbook.dispose();
-	}
-	_disposeRender(render) {
-		render.components.forEach((component) => component.dispose());
-		render.scene.dispose();
-		render.dispose();
-		render.engine.dispose();
-	}
-};
-SheetLoadingRenderService = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(1, _univerjs_ui.ILayoutService),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
-], SheetLoadingRenderService);
-//#endregion
-//#region src/views/hook.ts
-const SheetLoadingWorkbookContext = (0, react.createContext)(null);
-function useActiveWorkbook() {
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const loadingWorkbook = (0, react.useContext)(SheetLoadingWorkbookContext);
-	const workbook = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
-	return loadingWorkbook ?? workbook ?? null;
-}
-function useSheetLoadingWorkbook() {
-	return (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(ISheetLoadingRenderService).workbook$) ?? null;
-}
-function useSheetLoading() {
-	return (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(ISheetLoadingRenderService).loading$) ?? false;
-}
-function useSheetLoadingPreviewReady() {
-	return (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(ISheetLoadingRenderService).previewReady$) ?? false;
-}
-function useActiveWorksheet(workbook) {
-	return (0, _univerjs_ui.useObservable)(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null), void 0, void 0, [workbook]);
-}
-function useWorkbooks() {
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	return (0, _univerjs_ui.useObservable)(() => {
-		return (0, rxjs.merge)([univerInstanceService.getTypeOfUnitAdded$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), univerInstanceService.getTypeOfUnitDisposed$(_univerjs_core.UniverInstanceType.UNIVER_SHEET)]).pipe((0, rxjs.map)(() => univerInstanceService.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)), (0, rxjs.startWith)(univerInstanceService.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)));
-	}, [], void 0, [univerInstanceService]);
-}
-//#endregion
-//#region src/views/clipboard/ClipboardPopupMenu.tsx
-const DEFAULT_PADDING = 2;
-const SheetPasteOptions = [
-	{
-		value: "DEFAULT_PASTE",
-		label: "sheets-ui.rightClick.paste"
-	},
-	{
-		value: "SPECIAL_PASTE_VALUE",
-		label: "sheets-ui.rightClick.pasteValue"
-	},
-	{
-		value: "SPECIAL_PASTE_FORMAT",
-		label: "sheets-ui.rightClick.pasteFormat"
-	},
-	{
-		value: "SPECIAL_PASTE_COL_WIDTH",
-		label: "sheets-ui.rightClick.pasteColWidth"
-	},
-	{
-		value: "SPECIAL_PASTE_BESIDES_BORDER",
-		label: "sheets-ui.rightClick.pasteBesidesBorder"
-	},
-	{
-		value: "SPECIAL_PASTE_FORMULA",
-		label: "sheets-ui.rightClick.pasteFormula"
-	}
-];
-const useMenuPosition = (range) => {
-	var _scene$getEngine;
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
-	const workbook = useActiveWorkbook();
-	if (!range || !workbook) return null;
-	const anchor = {
-		startRow: range.rows[0],
-		startCol: range.cols[0],
-		endRow: range.rows[range.rows.length - 1],
-		endCol: range.cols[range.cols.length - 1]
-	};
-	if (anchor.endRow < 0 || anchor.endCol < 0) return null;
-	const ru = renderManagerService.getRenderUnitById(workbook.getUnitId());
-	const sheetSkeletonManagerService = ru === null || ru === void 0 ? void 0 : ru.with(SheetSkeletonManagerService);
-	const sheetObject = getSheetObject(univerInstanceService, renderManagerService);
-	if (!sheetObject) return null;
-	const { scene } = sheetObject;
-	const skeleton = sheetSkeletonManagerService === null || sheetSkeletonManagerService === void 0 ? void 0 : sheetSkeletonManagerService.getCurrentSkeleton();
-	const viewport = getViewportByCell(anchor.endRow, anchor.endCol, scene, workbook.getActiveSheet());
-	if (!viewport) return null;
-	const scaleX = scene === null || scene === void 0 ? void 0 : scene.scaleX;
-	const scaleY = scene === null || scene === void 0 ? void 0 : scene.scaleY;
-	const scrollXY = scene === null || scene === void 0 ? void 0 : scene.getViewportScrollXY(viewport);
-	const canvas = (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.getCanvas();
-	if (!scaleX || !scene || !scaleX || !scaleY || !scrollXY) return null;
-	const endPosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getNoMergeCellWithCoordByIndex(anchor.endRow, anchor.endCol);
-	const endX = (endPosition === null || endPosition === void 0 ? void 0 : endPosition.endX) ?? 0;
-	const endY = (endPosition === null || endPosition === void 0 ? void 0 : endPosition.endY) ?? 0;
-	const positionEndX = (0, _univerjs_engine_render.convertTransformToOffsetX)(endX, scaleX, scrollXY) ?? -9999;
-	const positionEndY = (0, _univerjs_engine_render.convertTransformToOffsetY)(endY, scaleY, scrollXY) ?? -9999;
-	const canvasWidth = canvas === null || canvas === void 0 ? void 0 : canvas.getWidth();
-	const canvasHeight = canvas === null || canvas === void 0 ? void 0 : canvas.getHeight();
-	if (!canvasWidth || !canvasHeight) return null;
-	const XInSideView = positionEndX + 50 <= canvasWidth;
-	const YInSideView = positionEndY + 50 <= canvasHeight;
-	let positionX = positionEndX;
-	let positionY = positionEndY;
-	if (!XInSideView) positionX = canvasWidth - 100;
-	if (!YInSideView) positionY = canvasHeight - 100;
-	return {
-		positionX,
-		positionY
-	};
-};
-const ClipboardPopupMenu = () => {
-	const clipboardService = (0, _univerjs_ui.useDependency)(ISheetClipboardService);
-	const showMenu = (0, _univerjs_ui.useObservable)(clipboardService.showMenu$, false);
-	const pasteOptionsCache = (0, _univerjs_ui.useObservable)(clipboardService.pasteOptionsCache$, null);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const [menuHovered, setMenuHovered] = (0, react.useState)(false);
-	const [visible, setVisible] = (0, react.useState)(false);
-	const range = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.pastedRange;
-	const relativePosition = useMenuPosition(range);
-	if (!relativePosition || !showMenu) return null;
-	if (relativePosition.positionX < 50 || relativePosition.positionY < 30) return null;
-	const showMore = menuHovered || visible;
-	const handleClick = (type) => {
-		setVisible(false);
-		commandService.executeCommand(SheetOptionalPasteCommand.id, { type });
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-absolute univer-inset-0 univer-z-10 univer-size-0",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-absolute",
-			style: {
-				left: relativePosition.positionX + DEFAULT_PADDING,
-				top: relativePosition.positionY + DEFAULT_PADDING
-			},
-			onMouseEnter: () => setMenuHovered(true),
-			onMouseLeave: () => setMenuHovered(false),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
-				align: "start",
-				items: SheetPasteOptions.map((item) => ({
-					type: "checkbox",
-					value: item.value,
-					label: localeService.t(item.label),
-					checked: (pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.pasteType) === PREDEFINED_HOOK_NAME_PASTE[item.value],
-					onSelect: () => handleClick(item.value)
-				})),
-				open: visible,
-				onOpenChange: setVisible,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
-						"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-						"univer-bg-white dark:!univer-bg-gray-900": !visible
-					}),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PasteSpecialDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
-				})
-			})
-		})
-	});
-};
-//#endregion
-//#region src/controllers/clipboard/const.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 RemovePasteMenuCommands = [
-	SetCellEditVisibleOperation.id,
-	_univerjs_sheets.SetRangeValuesCommand.id,
-	SetZoomRatioOperation.id,
-	_univerjs_sheets.MoveRangeMutation.id,
-	_univerjs_sheets.RemoveRowMutation.id,
-	_univerjs_sheets.RemoveColMutation.id,
-	_univerjs_sheets.InsertRowMutation.id,
-	_univerjs_sheets.InsertColMutation.id,
-	_univerjs_sheets.MoveRowsMutation.id,
-	_univerjs_sheets.MoveColsMutation.id,
-	_univerjs_sheets.SetWorksheetColWidthMutation.id,
-	_univerjs_sheets.SetWorksheetRowHeightMutation.id,
-	_univerjs_sheets.SetSelectionsOperation.id,
-	_univerjs_core.UndoCommandId
-];
-//#endregion
-//#region src/services/editor/cell-editor-manager.service.ts
-var CellEditorManagerService = class {
-	constructor() {
-		_defineProperty(this, "_state", null);
-		_defineProperty(this, "_rect", null);
-		_defineProperty(this, "_state$", new rxjs.BehaviorSubject(null));
-		_defineProperty(this, "state$", this._state$.asObservable());
-		_defineProperty(this, "_rect$", new rxjs.BehaviorSubject(null));
-		_defineProperty(this, "rect$", this._rect$.asObservable());
-		_defineProperty(this, "_focus", false);
-		_defineProperty(this, "_focus$", new rxjs.BehaviorSubject(this._focus));
-		_defineProperty(this, "focus$", this._focus$.asObservable());
-	}
-	dispose() {
-		this._state$.complete();
-		this._state = null;
-		this._rect$.complete();
-		this._rect = null;
-	}
-	setState(param) {
-		this._state = param;
-		this._refresh(param);
-	}
-	getRect() {
-		return this._rect;
-	}
-	setRect(param) {
-		this._rect = param;
-		this._rect$.next(param);
-	}
-	getState() {
-		return this._state;
-	}
-	setFocus(param = false) {
-		this._focus = param;
-		this._focus$.next(param);
-	}
-	_refresh(param) {
-		this._state$.next(param);
-	}
-};
-const ICellEditorManagerService = (0, _univerjs_core.createIdentifier)("univer.sheet-cell-editor-manager.service");
-//#endregion
-//#region src/services/sheet-embed-integration.service.ts
-const SHEET_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
-const SHEET_EMBED_RUNTIME_FOCUS_ROLE_ATTRIBUTE = "data-embed-runtime-focus-role";
-const SHEET_EMBED_FLOAT_DOM_ATTRIBUTE = "data-embed-float-dom";
-const SHEET_EMBED_ID_ATTRIBUTE = "data-embed-id";
-const SHEET_EMBED_HOST_UNIT_ID_ATTRIBUTE = "data-embed-host-unit-id";
-const SHEET_EMBED_CHILD_UNIT_ID_ATTRIBUTE = "data-embed-child-unit-id";
-const SHEET_EMBED_CHILD_TYPE_ATTRIBUTE = "data-embed-child-type";
-const ISheetEmbedInteractionBoundaryService = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-interaction-boundary.service");
-const ISheetEmbedRuntimeFocusCoordinator = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-runtime-focus-coordinator");
-const ISheetEmbedFloatingGeometryService = (0, _univerjs_core.createIdentifier)("sheets-ui.embed-floating-geometry.service");
-function resolveSheetEmbedRuntimeDomScope(element) {
-	var _element$closest;
-	if (!element) return;
-	const embedId = ((_element$closest = element.closest(`[${"data-embed-interaction-boundary-owner"}]`)) === null || _element$closest === void 0 ? void 0 : _element$closest.getAttribute("data-embed-interaction-boundary-owner")) ?? void 0;
-	const container = resolveSheetEmbedFloatDomContainer(element, embedId);
-	const resolvedEmbedId = (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-id")) ?? embedId;
-	if (!resolvedEmbedId) return;
-	return {
-		embedId: resolvedEmbedId,
-		hostUnitId: (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-host-unit-id")) ?? void 0,
-		childUnitId: (container === null || container === void 0 ? void 0 : container.getAttribute("data-embed-child-unit-id")) ?? void 0,
-		childType: readChildType(container)
-	};
-}
-function resolveActiveSheetEmbedRuntimeDomScope(ownerDocument = document) {
-	const activeContainer = ownerDocument.querySelector(`[${SHEET_EMBED_FLOAT_DOM_ATTRIBUTE}="true"][data-embed-float-stage="stage2"]`);
-	if (!activeContainer) return;
-	return resolveSheetEmbedRuntimeDomScope(activeContainer);
-}
-function resolveSheetEmbedFloatDomContainer(element, embedId) {
-	const ownContainer = element === null || element === void 0 ? void 0 : element.closest(`[${SHEET_EMBED_FLOAT_DOM_ATTRIBUTE}="true"]`);
-	if (ownContainer && (!embedId || ownContainer.getAttribute("data-embed-id") === embedId)) return ownContainer;
-	const ownerDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) ?? (typeof document === "undefined" ? void 0 : document);
-	if (!ownerDocument || !embedId) return ownContainer ?? void 0;
-	return ownerDocument.querySelector(`[${"data-embed-float-dom"}="true"][${"data-embed-id"}="${escapeAttributeValue(embedId)}"]`) ?? void 0;
-}
-function escapeAttributeValue(value) {
-	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
-}
-function readChildType(container) {
-	const value = container === null || container === void 0 ? void 0 : container.getAttribute(SHEET_EMBED_CHILD_TYPE_ATTRIBUTE);
-	if (value == null || value === "") return;
-	return Number(value);
-}
-//#endregion
-//#region src/services/editor/cell-editor-resize.service.ts
-const EDITOR_INPUT_SELF_EXTEND_GAP = 5;
-const EDITOR_BORDER_SIZE = 2;
-let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _univerjs_core.Disposable {
-	constructor(_layoutService, _cellEditorManagerService, _editorBridgeService, _renderManagerService, _univerInstanceService, _configService, _embedFloatingGeometryService) {
-		super();
-		this._layoutService = _layoutService;
-		this._cellEditorManagerService = _cellEditorManagerService;
-		this._editorBridgeService = _editorBridgeService;
-		this._renderManagerService = _renderManagerService;
-		this._univerInstanceService = _univerInstanceService;
-		this._configService = _configService;
-		this._embedFloatingGeometryService = _embedFloatingGeometryService;
-	}
-	get _currentRenderer() {
-		return (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SHEET, this._univerInstanceService, this._renderManagerService);
-	}
-	get _editingUnitId() {
-		var _this$_editorBridgeSe;
-		return ((_this$_editorBridgeSe = this._editorBridgeService.getEditCellState()) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.unitId) ?? "";
-	}
-	get _editingRenderer() {
-		return this._renderManagerService.getRenderUnitById(this._editingUnitId);
-	}
-	get _renderer() {
-		return this._editingRenderer ?? this._currentRenderer;
-	}
-	get _sheetSkeletonManagerService() {
-		var _this$_renderer;
-		return (_this$_renderer = this._renderer) === null || _this$_renderer === void 0 ? void 0 : _this$_renderer.with(SheetSkeletonManagerService);
-	}
-	get engine() {
-		var _this$_renderer2;
-		return (_this$_renderer2 = this._renderer) === null || _this$_renderer2 === void 0 ? void 0 : _this$_renderer2.engine;
-	}
-	fitTextSize(callback) {
-		const param = this._editorBridgeService.getEditCellState();
-		if (!param) return;
-		const { position, documentLayoutObject, canvasOffset, scaleX, scaleY } = param;
-		const { startX, startY, endX, endY } = position;
-		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return;
-		const documentSkeleton = this._getEditorSkeleton();
-		if (!documentSkeleton) return;
-		documentSkeleton.resetInitialWidth();
-		const info = this._predictingSize(position, canvasOffset, documentSkeleton, documentLayoutObject, scaleX, scaleY);
-		if (!info || info.actualWidth <= 0) return;
-		let { actualWidth, actualHeight } = info;
-		const { verticalAlign, horizontalAlign, paddingData, fill } = documentLayoutObject;
-		actualWidth = actualWidth + (paddingData.l ?? 0) * scaleX + (paddingData.r ?? 0) * scaleX;
-		actualHeight = actualHeight + (paddingData.t ?? 0) * scaleY + (paddingData.b ?? 0) * scaleY;
-		let editorWidth = endX - startX;
-		let editorHeight = endY - startY;
-		if (editorWidth < actualWidth) editorWidth = Math.ceil(actualWidth);
-		if (editorHeight < actualHeight) editorHeight = Math.ceil(actualHeight);
-		let offsetTop = 0;
-		if (verticalAlign === _univerjs_core.VerticalAlign.MIDDLE) offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
-		else if (verticalAlign === _univerjs_core.VerticalAlign.TOP) offsetTop = paddingData.t || 0;
-		else offsetTop = (editorHeight - actualHeight) / scaleY;
-		let offsetLeft = 0;
-		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) {} else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = (editorWidth - actualWidth) / scaleX;
-		else offsetLeft = paddingData.l || 0;
-		offsetTop = Math.max(offsetTop, paddingData.t || 0);
-		offsetLeft = Math.max(offsetLeft, paddingData.l || 0);
-		documentDataModel.updateDocumentDataMargin({
-			t: offsetTop,
-			l: offsetLeft
-		});
-		documentSkeleton.calculate();
-		this._editAreaProcessing(editorWidth, editorHeight, position, canvasOffset, fill, scaleX, scaleY, horizontalAlign, callback);
-	}
-	/**
-	* Mainly used to pre-calculate the width of the editor,
-	* to determine whether it needs to be automatically widened.
-	*/
-	_predictingSize(actualRangeWithCoord, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
-		const { startX, endX } = actualRangeWithCoord;
-		const { textRotation, wrapStrategy, paddingData } = documentLayoutObject;
-		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const { vertexAngle: angle } = (0, _univerjs_engine_render.convertTextRotation)(textRotation);
-		if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP && angle === 0) {
-			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize((endX - startX) / scaleX);
-			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataMargin({
-				l: paddingData.l,
-				t: paddingData.t
-			});
-			documentSkeleton.calculate();
-			const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
-			return {
-				actualWidth: actualWidth * scaleX,
-				actualHeight: actualHeight * scaleY
-			};
-		}
-		const maxSize = this._getEditorMaxSize(actualRangeWithCoord, canvasOffset, documentLayoutObject.horizontalAlign);
-		if (!maxSize) return;
-		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(maxSize.width / scaleX);
-		documentSkeleton.calculate();
-		const size = documentSkeleton.getActualSize();
-		let editorWidth = endX - startX;
-		if (editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX) editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX;
-		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX);
-		/**
-		* Do not rely on cell layout logic, depend on the document's internal alignment logic.
-		*/
-		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentRenderConfig({
-			horizontalAlign: _univerjs_core.HorizontalAlign.UNSPECIFIED,
-			cellValueType: void 0
-		});
-		return {
-			actualWidth: size.actualWidth * scaleX,
-			actualHeight: size.actualHeight * scaleY
+		return {
+			actualWidth: size.actualWidth * scaleX,
+			actualHeight: size.actualHeight * scaleY
 		};
 	}
 	_getEditorMaxSize(position, canvasOffset, horizontalAlign) {
@@ -10569,7 +9988,9 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends _u
 		if (!sheetObject) return;
 		const { spreadsheet, spreadsheetColumnHeader, spreadsheetLeftTopPlaceholder, spreadsheetRowHeader } = sheetObject;
 		d.add(spreadsheet.onDblclick$.subscribeEvent((evt) => {
+			var _this$_editorBridgeSe;
 			if (evt.button === 2) return;
+			if ((0, _univerjs_sheets.isCellImage)((_this$_editorBridgeSe = this._editorBridgeService.getEditCellState()) === null || _this$_editorBridgeSe === void 0 || (_this$_editorBridgeSe = _this$_editorBridgeSe.documentLayoutObject.documentModel) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.getSnapshot())) return;
 			this._commandService.executeCommand(SetCellEditVisibleOperation.id, {
 				visible: true,
 				eventType: _univerjs_engine_render.DeviceInputEventType.Dblclick,
@@ -10665,9 +10086,9 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends _u
 		this._hideEditor();
 	}
 	_isEmbeddedFormulaEditorActive() {
-		var _this$_embedRuntimeFo2, _this$_editorBridgeSe;
+		var _this$_embedRuntimeFo2, _this$_editorBridgeSe2;
 		if (((_this$_embedRuntimeFo2 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo2 === void 0 ? void 0 : _this$_embedRuntimeFo2.isChildUnitInActiveSession(this._context.unitId)) !== true) return false;
-		const dataStream = (_this$_editorBridgeSe = this._editorBridgeService.getEditCellState()) === null || _this$_editorBridgeSe === void 0 || (_this$_editorBridgeSe = _this$_editorBridgeSe.documentLayoutObject.documentModel) === null || _this$_editorBridgeSe === void 0 || (_this$_editorBridgeSe = _this$_editorBridgeSe.getSnapshot().body) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.dataStream;
+		const dataStream = (_this$_editorBridgeSe2 = this._editorBridgeService.getEditCellState()) === null || _this$_editorBridgeSe2 === void 0 || (_this$_editorBridgeSe2 = _this$_editorBridgeSe2.documentLayoutObject.documentModel) === null || _this$_editorBridgeSe2 === void 0 || (_this$_editorBridgeSe2 = _this$_editorBridgeSe2.getSnapshot().body) === null || _this$_editorBridgeSe2 === void 0 ? void 0 : _this$_editorBridgeSe2.dataStream;
 		return typeof dataStream === "string" && dataStream.startsWith("=");
 	}
 	_isCurrentEmbedRuntimeEvent(evt) {
@@ -14003,7 +13424,7 @@ let SheetPermissionCheckUIController = class SheetPermissionCheckUIController ex
 					workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
 					worksheetTypes: [_univerjs_sheets.WorksheetSetCellValuePermission, _univerjs_sheets.WorksheetEditPermission],
 					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
-				});
+				}, params.unitId);
 				errorMsg = this._localeService.t("sheets-ui.permission.dialog.editErr");
 				break;
 			case ApplyFormatPainterCommand.id:
@@ -15754,9 +15175,9 @@ var HeaderUnhideRangeService = class {
 //#endregion
 //#region src/menu/header-menu-shape.ts
-const HEADER_MENU_SHAPE_CIRCLE_FILL = "rgba(0, 0, 0, 0.15)";
-const HEADER_MENU_SHAPE_TRIANGLE_FILL = "rgb(0, 0, 0)";
-const HEADER_MENU_BACKGROUND_COLOR = "rgb(255, 255, 255, 1)";
+const HEADER_MENU_SHAPE_CIRCLE_FILL = "gray.200";
+const HEADER_MENU_SHAPE_TRIANGLE_FILL = "gray.900";
+const HEADER_MENU_BACKGROUND_COLOR = "gray.50";
 var HeaderMenuShape = class extends _univerjs_engine_render.Shape {
 	constructor(key, props) {
 		super(key, props);
@@ -15929,157 +15350,549 @@ var HeaderUnhideShape = class extends _univerjs_engine_render.Shape {
 			]],
 			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
 		});
-		if (this._hasNext) {
-			const offset = this._hasPrevious ? 3 : 1;
-			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-				pointsGroup: [[
-					{
-						x: top + this._size * offset / 2,
-						y: this._size / 2
-					},
-					{
-						x: -left + this._size * offset / 2,
-						y: this._size / 2 - left
-					},
-					{
-						x: -left + this._size * offset / 2,
-						y: this._size / 2 + left
-					}
-				]],
-				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-			});
-		}
+		if (this._hasNext) {
+			const offset = this._hasPrevious ? 3 : 1;
+			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+				pointsGroup: [[
+					{
+						x: top + this._size * offset / 2,
+						y: this._size / 2
+					},
+					{
+						x: -left + this._size * offset / 2,
+						y: this._size / 2 - left
+					},
+					{
+						x: -left + this._size * offset / 2,
+						y: this._size / 2 + left
+					}
+				]],
+				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+			});
+		}
+	}
+};
+//#endregion
+//#region src/controllers/render-controllers/header-unhide.render-controller.ts
+const HEADER_UNHIDE_CONTROLLER_SHAPE = "__SpreadsheetHeaderUnhideSHAPEControllerShape__";
+const HEADER_UNHIDE_RANGE_VISIBLE_CHECK = (0, _univerjs_core.createInterceptorKey)("headerUnhideRangeVisibleCheck");
+let HeaderUnhideRenderController = class HeaderUnhideRenderController extends _univerjs_core.RxDisposable {
+	get _workbook() {
+		return this._context.unit;
+	}
+	constructor(_context, _sheetSkeletonManagerService, _headerUnhideRangeService, _commandService) {
+		super();
+		this._context = _context;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._headerUnhideRangeService = _headerUnhideRangeService;
+		this._commandService = _commandService;
+		_defineProperty(this, "_shapes", {
+			cols: [],
+			rows: []
+		});
+		_defineProperty(this, "interceptor", new _univerjs_core.InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
+		this._init();
+	}
+	dispose() {
+		super.dispose();
+		this._clearShapes();
+	}
+	_init() {
+		let activeSheetId = "";
+		this._context.unit.activeSheet$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((worksheet) => {
+			this._clearShapes();
+			if (!worksheet) {
+				activeSheetId = "";
+				return;
+			}
+			activeSheetId = worksheet.getSheetId();
+			this._update(this._workbook, worksheet);
+		});
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+			if (param) {
+				const { unitId, sheetId } = param;
+				if (unitId === this._workbook.getUnitId() && sheetId === activeSheetId) {
+					const worksheet = this._workbook.getSheetBySheetId(sheetId);
+					if (worksheet) this._update(this._workbook, worksheet);
+				}
+			}
+		}));
+	}
+	_update(workbook, worksheet) {
+		var _this$_sheetSkeletonM;
+		const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(worksheet.getSheetId())) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
+		if (!skeleton) return;
+		const visibleCheck = this.interceptor.fetchThroughInterceptors(HEADER_UNHIDE_RANGE_VISIBLE_CHECK);
+		const shouldRenderRange = (payload) => this._headerUnhideRangeService.shouldRenderRange(visibleCheck(true, payload) ?? true, payload);
+		const hiddenRowRanges = worksheet.getHiddenRows().filter((range) => shouldRenderRange({
+			axis: "row",
+			range,
+			workbook,
+			worksheet
+		}));
+		const hiddenColRanges = worksheet.getHiddenCols().filter((range) => shouldRenderRange({
+			axis: "column",
+			range,
+			workbook,
+			worksheet
+		}));
+		const { scene } = this._getSheetObject();
+		const rowCount = worksheet.getRowCount();
+		const rowShapes = hiddenRowRanges.map((range) => {
+			const { startRow, endRow } = range;
+			const position = getCoordByCell(startRow, 0, scene, skeleton);
+			const hasPrevious = startRow !== 0;
+			const hasNext = endRow !== rowCount - 1;
+			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
+				type: 0,
+				hovered: false,
+				hasPrevious,
+				hasNext,
+				top: position.startY - (hasPrevious ? 12 : 0),
+				left: position.startX - 12
+			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificRowsVisibleCommand.id, {
+				unitId: workbook.getUnitId(),
+				subUnitId: worksheet.getSheetId(),
+				ranges: [range]
+			}));
+		});
+		const colCount = worksheet.getColumnCount();
+		const colShapes = hiddenColRanges.map((range) => {
+			const { startColumn, endColumn } = range;
+			const position = getCoordByCell(0, startColumn, scene, skeleton);
+			const hasPrevious = startColumn !== 0;
+			const hasNext = endColumn !== colCount - 1;
+			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
+				type: 1,
+				hovered: false,
+				hasPrevious,
+				hasNext,
+				top: Math.max(skeleton.columnHeaderHeight, skeleton.columnHeaderHeightAndMarginTop) - 12,
+				left: position.startX - (hasPrevious ? 12 : 0)
+			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificColsVisibleCommand.id, {
+				unitId: workbook.getUnitId(),
+				subUnitId: worksheet.getSheetId(),
+				ranges: [range]
+			}));
+		});
+		scene.addObjects(colShapes, 12);
+		scene.addObjects(rowShapes, 12);
+		this._clearShapes();
+		this._shapes = {
+			cols: colShapes,
+			rows: rowShapes
+		};
+	}
+	_clearShapes() {
+		this._shapes.cols.forEach((shape) => shape.dispose());
+		this._shapes.rows.forEach((shape) => shape.dispose());
+		this._shapes = {
+			cols: [],
+			rows: []
+		};
+	}
+	_getSheetObject() {
+		return getSheetObject(this._workbook, this._context);
 	}
 };
+HeaderUnhideRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(HeaderUnhideRangeService)),
+	__decorateParam(3, _univerjs_core.ICommandService)
+], HeaderUnhideRenderController);
 //#endregion
-//#region src/controllers/render-controllers/header-unhide.render-controller.ts
-const HEADER_UNHIDE_CONTROLLER_SHAPE = "__SpreadsheetHeaderUnhideSHAPEControllerShape__";
-const HEADER_UNHIDE_RANGE_VISIBLE_CHECK = (0, _univerjs_core.createInterceptorKey)("headerUnhideRangeVisibleCheck");
-let HeaderUnhideRenderController = class HeaderUnhideRenderController extends _univerjs_core.RxDisposable {
-	get _workbook() {
-		return this._context.unit;
-	}
-	constructor(_context, _sheetSkeletonManagerService, _headerUnhideRangeService, _commandService) {
+//#region src/controllers/render-controllers/sheet.render-controller.ts
+const FRAME_STACK_THRESHOLD = 60;
+let SheetRenderController = class SheetRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _configService, _sheetSkeletonManagerService, _sheetRenderService, _commandService, _telemetryService) {
 		super();
 		this._context = _context;
+		this._configService = _configService;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._headerUnhideRangeService = _headerUnhideRangeService;
+		this._sheetRenderService = _sheetRenderService;
 		this._commandService = _commandService;
-		_defineProperty(this, "_shapes", {
-			cols: [],
-			rows: []
+		this._telemetryService = _telemetryService;
+		_defineProperty(this, "_renderMetric$", new rxjs.Subject());
+		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
+		_defineProperty(this, "_renderFrameTimeMetric", null);
+		_defineProperty(this, "_renderFrameTags", {});
+		_defineProperty(this, "_afterRenderMetric$", new rxjs.Subject());
+		this._addNewRender();
+		this._initRenderMetricSubscriber();
+	}
+	_addNewRender() {
+		const { scene, engine, unit: workbook } = this._context;
+		this._addComponent(workbook);
+		this._initRerenderScheduler();
+		this._initCommandListener();
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!worksheet) throw new Error("No active sheet found");
+		const sheetId = worksheet.getSheetId();
+		this._sheetSkeletonManagerService.setCurrent({ sheetId });
+		const frameFn = () => scene.render();
+		this.disposeWithMe(this._context.activated$.subscribe((activated) => {
+			if (activated) engine.runRenderLoop(frameFn);
+			else engine.stopRenderLoop(frameFn);
+		}));
+	}
+	_initRenderMetricSubscriber() {
+		const { engine } = this._context;
+		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
+			this._renderFrameTimeMetric = null;
+			this._renderFrameTags = {};
+		}));
+		this.disposeWithMe(engine.endFrame$.subscribe(() => {
+			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).some((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX))) this._afterRenderMetric$.next({
+				frameTimeMetric: this._renderFrameTimeMetric,
+				tags: this._renderFrameTags
+			});
+		}));
+		this.disposeWithMe(engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
+			if (!this._renderFrameTimeMetric) this._renderFrameTimeMetric = {};
+			if (!this._renderFrameTimeMetric[key]) this._renderFrameTimeMetric[key] = [];
+			this._renderFrameTimeMetric[key].push(Math.round(value * 100) / 100);
+		}));
+		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
+			this._renderFrameTags[key] = value;
+		}));
+		const frameInfoList = [];
+		this.disposeWithMe(this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
+			frameInfoList.push({
+				FPS: basicFrameTimeInfo.FPS,
+				elapsedTime: basicFrameTimeInfo.elapsedTime,
+				frameTime: Math.round(basicFrameTimeInfo.frameTime * 100) / 100,
+				...sceneRenderDetail.frameTimeMetric,
+				...sceneRenderDetail.tags
+			});
+			if (frameInfoList.length > FRAME_STACK_THRESHOLD) {
+				this._captureRenderMetric(frameInfoList);
+				frameInfoList.length = 0;
+			}
+		}));
+	}
+	/**
+	* Send render metric to telemetry service
+	* @param frameInfoList
+	*/
+	_captureRenderMetric(frameInfoList) {
+		var _this$_telemetryServi;
+		const filteredFrameInfo = frameInfoList;
+		if (filteredFrameInfo.length === 0) return;
+		const sumValueForNumListFields = (data) => {
+			let totalSum = 0;
+			const sums = Object.entries(data).filter(([_, value]) => Array.isArray(value)).map(([key]) => key).reduce((acc, key) => {
+				acc[key] = data[key].reduce((sum, num) => sum + num, 0);
+				return acc;
+			}, {});
+			Object.keys(data).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).forEach((key) => {
+				totalSum += sums[key];
+			});
+			return {
+				...sums,
+				extensionTotal: totalSum
+			};
+		};
+		const frameTimeListAfterSum = frameInfoList.map((info) => {
+			return {
+				...info,
+				...sumValueForNumListFields(info)
+			};
+		});
+		const getSummaryStats = (list) => {
+			return Object.entries(list[0]).filter(([key, _]) => !["elapsedTime"].includes(key)).filter(([_, value]) => typeof value === "number").map(([key]) => key).reduce((acc, key) => {
+				const values = list.map((obj) => obj[key]);
+				const max = Math.max(...values);
+				const min = Math.min(...values);
+				const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
+				acc[key] = {
+					max: Math.round(max * 100) / 100,
+					min: Math.round(min * 100) / 100,
+					avg: Math.round(avg * 100) / 100
+				};
+				return acc;
+			}, {});
+		};
+		const summaryFrameStats = getSummaryStats(frameTimeListAfterSum);
+		const elapsedTimeToStart = filteredFrameInfo[filteredFrameInfo.length - 1].elapsedTime;
+		const telemetryData = {
+			sheetId: this._context.unit.getActiveSheet().getSheetId(),
+			unitId: this._context.unit.getUnitId(),
+			elapsedTimeToStart,
+			...summaryFrameStats
+		};
+		this._renderMetric$.next(telemetryData);
+		(_this$_telemetryServi = this._telemetryService) === null || _this$_telemetryServi === void 0 || _this$_telemetryServi.capture("sheet_render_cost", telemetryData);
+	}
+	_addComponent(workbook) {
+		const { scene, components } = this._context;
+		const worksheet = workbook.getActiveSheet();
+		const spreadsheet = new _univerjs_engine_render.Spreadsheet("__SpreadsheetRender__");
+		this._addViewport(worksheet);
+		const spreadsheetRowHeader = new _univerjs_engine_render.SpreadsheetRowHeader("__SpreadsheetRowHeader__");
+		const spreadsheetColumnHeader = new _univerjs_engine_render.SpreadsheetColumnHeader("__SpreadsheetColumnHeader__");
+		const SpreadsheetLeftTopPlaceholder = new _univerjs_engine_render.Rect("__SpreadsheetLeftTopPlaceholder__", {
+			zIndex: 2,
+			left: -1,
+			top: -1,
+			fill: "gray.50",
+			stroke: "gray.200",
+			strokeWidth: 1
+		});
+		this._context.mainComponent = spreadsheet;
+		components.set("__SpreadsheetRender__", spreadsheet);
+		components.set("__SpreadsheetRowHeader__", spreadsheetRowHeader);
+		components.set("__SpreadsheetColumnHeader__", spreadsheetColumnHeader);
+		components.set("__SpreadsheetLeftTopPlaceholder__", SpreadsheetLeftTopPlaceholder);
+		scene.addObjects([spreadsheet], 0);
+		scene.addObjects([
+			spreadsheetRowHeader,
+			spreadsheetColumnHeader,
+			SpreadsheetLeftTopPlaceholder
+		], 10);
+		scene.enableLayerCache(0, 10);
+	}
+	_initViewports(scene, rowHeader, columnHeader) {
+		const rowHeaderWidth = rowHeader.hidden ? 0 : rowHeader.width;
+		const columnHeaderHeight = columnHeader.hidden ? 0 : columnHeader.height;
+		const bufferEdgeX = 100;
+		const bufferEdgeY = 100;
+		const viewMain = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN, scene, {
+			left: rowHeaderWidth,
+			top: columnHeaderHeight,
+			bottom: 0,
+			right: 0,
+			isWheelPreventDefaultX: true,
+			allowCache: true,
+			bufferEdgeX,
+			bufferEdgeY
+		});
+		const viewMainLeftTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP, scene, {
+			isWheelPreventDefaultX: true,
+			active: false,
+			allowCache: true,
+			bufferEdgeX: 0,
+			bufferEdgeY: 0
+		});
+		const viewMainLeft = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT, scene, {
+			isWheelPreventDefaultX: true,
+			active: false,
+			allowCache: true,
+			bufferEdgeX: 0,
+			bufferEdgeY
 		});
-		_defineProperty(this, "interceptor", new _univerjs_core.InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
-		this._init();
+		const viewMainTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, scene, {
+			isWheelPreventDefaultX: true,
+			active: false,
+			allowCache: true,
+			bufferEdgeX,
+			bufferEdgeY: 0
+		});
+		const viewRowTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, scene, {
+			active: false,
+			isWheelPreventDefaultX: true
+		});
+		const viewRowBottom = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM, scene, {
+			left: 0,
+			top: columnHeaderHeight,
+			bottom: 0,
+			width: rowHeaderWidth + 1,
+			isWheelPreventDefaultX: true
+		});
+		const viewColumnLeft = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, scene, {
+			active: false,
+			isWheelPreventDefaultX: true
+		});
+		const viewColumnRight = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, scene, {
+			left: rowHeaderWidth,
+			top: 0,
+			height: columnHeaderHeight + 1,
+			right: 0,
+			isWheelPreventDefaultX: true
+		});
+		return {
+			viewMain,
+			viewLeftTop: new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP, scene, {
+				left: 0,
+				top: 0,
+				width: rowHeaderWidth,
+				height: columnHeaderHeight,
+				isWheelPreventDefaultX: true
+			}),
+			viewMainLeftTop,
+			viewMainLeft,
+			viewMainTop,
+			viewColumnLeft,
+			viewRowTop,
+			viewRowBottom,
+			viewColumnRight
+		};
 	}
-	dispose() {
-		super.dispose();
-		this._clearShapes();
+	/**
+	*
+	* initViewport & wheel event
+	* +-----------------+--------------------+-------------------+
+	* |  VIEW_LEFT_TOP  |  VIEW_COLUMN_LEFT  | VIEW_COLUMN_RIGHT |
+	* +-----------------+--------------------+-------------------+
+	* |  VIEW_ROW_TOP   | VIEW_MAIN_LEFT_TOP |   VIEW_MAIN_TOP   |
+	* +-----------------+--------------------+-------------------+
+	* | VIEW_ROW_BOTTOM |   VIEW_MAIN_LEFT   |     VIEW_MAIN     |
+	* +-----------------+--------------------+-------------------+
+	*/
+	_addViewport(worksheet) {
+		const scene = this._context.scene;
+		const { rowHeader, columnHeader } = worksheet.getConfig();
+		const { viewMain } = this._initViewports(scene, rowHeader, columnHeader);
+		const sheetsUIConfig = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		new _univerjs_engine_render.ScrollBar(viewMain, sheetsUIConfig === null || sheetsUIConfig === void 0 ? void 0 : sheetsUIConfig.scrollConfig);
+		scene.attachControl();
+		return viewMain;
 	}
-	_init() {
-		let activeSheetId = "";
-		this._context.unit.activeSheet$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((worksheet) => {
-			this._clearShapes();
-			if (!worksheet) {
-				activeSheetId = "";
-				return;
-			}
-			activeSheetId = worksheet.getSheetId();
-			this._update(this._workbook, worksheet);
-		});
+	_initRerenderScheduler() {
 		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
-			if (param) {
-				const { unitId, sheetId } = param;
-				if (unitId === this._workbook.getUnitId() && sheetId === activeSheetId) {
-					const worksheet = this._workbook.getSheetBySheetId(sheetId);
-					if (worksheet) this._update(this._workbook, worksheet);
-				}
-			}
+			if (!param) return null;
+			const { skeleton: spreadsheetSkeleton, sheetId } = param;
+			const workbook = this._context.unit;
+			const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getSheetBySheetId(sheetId);
+			if (workbook == null || worksheet == null) return;
+			const { mainComponent, components } = this._context;
+			const spreadsheet = mainComponent;
+			const spreadsheetRowHeader = components.get("__SpreadsheetRowHeader__");
+			const spreadsheetColumnHeader = components.get("__SpreadsheetColumnHeader__");
+			const spreadsheetLeftTopPlaceholder = components.get("__SpreadsheetLeftTopPlaceholder__");
+			const leftTopPlaceholderSize = getLeftTopPlaceholderSize(spreadsheetSkeleton);
+			spreadsheet === null || spreadsheet === void 0 || spreadsheet.updateSkeleton(spreadsheetSkeleton);
+			spreadsheetRowHeader === null || spreadsheetRowHeader === void 0 || spreadsheetRowHeader.updateSkeleton(spreadsheetSkeleton);
+			spreadsheetColumnHeader === null || spreadsheetColumnHeader === void 0 || spreadsheetColumnHeader.updateSkeleton(spreadsheetSkeleton);
+			spreadsheetLeftTopPlaceholder === null || spreadsheetLeftTopPlaceholder === void 0 || spreadsheetLeftTopPlaceholder.transformByState({
+				width: leftTopPlaceholderSize.width,
+				height: leftTopPlaceholderSize.height
+			});
 		}));
 	}
-	_update(workbook, worksheet) {
-		var _this$_sheetSkeletonM;
-		const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(worksheet.getSheetId())) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
-		if (!skeleton) return;
-		const visibleCheck = this.interceptor.fetchThroughInterceptors(HEADER_UNHIDE_RANGE_VISIBLE_CHECK);
-		const shouldRenderRange = (payload) => this._headerUnhideRangeService.shouldRenderRange(visibleCheck(true, payload) ?? true, payload);
-		const hiddenRowRanges = worksheet.getHiddenRows().filter((range) => shouldRenderRange({
-			axis: "row",
-			range,
-			workbook,
-			worksheet
-		}));
-		const hiddenColRanges = worksheet.getHiddenCols().filter((range) => shouldRenderRange({
-			axis: "column",
-			range,
-			workbook,
-			worksheet
+	_initCommandListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command, options) => {
+			const { unit: workbook } = this._context;
+			const { id: commandId } = command;
+			if (_univerjs_sheets.COMMAND_LISTENER_SKELETON_CHANGE.includes(commandId) || this._sheetRenderService.checkMutationShouldTriggerRerender(commandId)) {
+				const { unitId, subUnitId } = command.params;
+				const worksheet = workbook.getActiveSheet();
+				if (!worksheet) return;
+				const workbookId = this._context.unitId;
+				const worksheetId = worksheet.getSheetId();
+				if (unitId !== workbookId || subUnitId !== worksheetId) return;
+				this._sheetSkeletonManagerService.makeDirty({
+					sheetId: worksheetId,
+					commandId
+				}, true);
+				this._sheetSkeletonManagerService.setCurrent({
+					sheetId: worksheetId,
+					commandId
+				});
+			} else if (_univerjs_sheets.COMMAND_LISTENER_VALUE_CHANGE.includes(commandId)) this._sheetSkeletonManagerService.reCalculate();
+			if (command.type === _univerjs_core.CommandType.MUTATION) this._markUnitDirty(command, options);
 		}));
-		const { scene } = this._getSheetObject();
-		const rowCount = worksheet.getRowCount();
-		const rowShapes = hiddenRowRanges.map((range) => {
-			const { startRow, endRow } = range;
-			const position = getCoordByCell(startRow, 0, scene, skeleton);
-			const hasPrevious = startRow !== 0;
-			const hasNext = endRow !== rowCount - 1;
-			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
-				type: 0,
-				hovered: false,
-				hasPrevious,
-				hasNext,
-				top: position.startY - (hasPrevious ? 12 : 0),
-				left: position.startX - 12
-			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificRowsVisibleCommand.id, {
-				unitId: workbook.getUnitId(),
-				subUnitId: worksheet.getSheetId(),
-				ranges: [range]
-			}));
-		});
-		const colCount = worksheet.getColumnCount();
-		const colShapes = hiddenColRanges.map((range) => {
-			const { startColumn, endColumn } = range;
-			const position = getCoordByCell(0, startColumn, scene, skeleton);
-			const hasPrevious = startColumn !== 0;
-			const hasNext = endColumn !== colCount - 1;
-			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
-				type: 1,
-				hovered: false,
-				hasPrevious,
-				hasNext,
-				top: Math.max(skeleton.columnHeaderHeight, skeleton.columnHeaderHeightAndMarginTop) - 12,
-				left: position.startX - (hasPrevious ? 12 : 0)
-			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificColsVisibleCommand.id, {
-				unitId: workbook.getUnitId(),
-				subUnitId: worksheet.getSheetId(),
-				ranges: [range]
-			}));
-		});
-		scene.addObjects(colShapes, 12);
-		scene.addObjects(rowShapes, 12);
-		this._clearShapes();
-		this._shapes = {
-			cols: colShapes,
-			rows: rowShapes
+	}
+	_markUnitDirty(command, options) {
+		if (command.id.substring(0, 3) === "doc") return;
+		const { mainComponent: spreadsheet, scene } = this._context;
+		if (command.id === _univerjs_engine_formula.SetFormulaCalculationNotificationMutation.id) {
+			if (command.params.stageInfo != null) return;
+		}
+		if (spreadsheet) spreadsheet.makeDirty();
+		scene.makeDirty();
+		if (!command.params) return;
+		const cmdParams = command.params;
+		const viewports = this._spreadsheetViewports(scene);
+		if (command.id === _univerjs_sheets.SetRangeValuesMutation.id && cmdParams.cellValue && !(options === null || options === void 0 ? void 0 : options.fromChangeset)) {
+			const dirtyRange = this._cellValueToRange(cmdParams.cellValue);
+			const dirtyBounds = this._rangeToBounds([dirtyRange]);
+			this._markViewportDirty(viewports, dirtyBounds);
+			spreadsheet.setDirtyArea(dirtyBounds);
+		}
+		if (command.id === _univerjs_sheets.MoveRangeMutation.id && cmdParams.from && cmdParams.to && !(options === null || options === void 0 ? void 0 : options.fromChangeset)) {
+			const fromRange = cmdParams.fromRange || this._cellValueToRange(cmdParams.from.value);
+			const toRange = cmdParams.toRange || this._cellValueToRange(cmdParams.to.value);
+			const dirtyBounds = this._rangeToBounds([fromRange, toRange]);
+			this._markViewportDirty(viewports, dirtyBounds);
+			spreadsheet.setDirtyArea(dirtyBounds);
+		}
+	}
+	/**
+	* cellValue data structure:
+	* {[row]: { [col]: value}}
+	* @param cellValue
+	* @returns IRange
+	*/
+	_cellValueToRange(cellValue) {
+		const columns = [];
+		let minCol = 0;
+		let maxCol = 0;
+		let minRow = 0;
+		let maxRow = 0;
+		for (const [_row, columnObj] of Object.entries(cellValue)) {
+			for (const column in columnObj) {
+				columns.push(Number(column));
+				if (minCol > Number(column)) minCol = Number(column);
+				if (maxCol < Number(column)) maxCol = Number(column);
+			}
+			if (minRow > Number(_row)) minRow = Number(_row);
+			if (maxRow < Number(_row)) maxRow = Number(_row);
+		}
+		return {
+			startRow: minRow,
+			endRow: maxRow,
+			startColumn: minCol,
+			endColumn: maxCol
 		};
 	}
-	_clearShapes() {
-		this._shapes.cols.forEach((shape) => shape.dispose());
-		this._shapes.rows.forEach((shape) => shape.dispose());
-		this._shapes = {
-			cols: [],
-			rows: []
-		};
+	_rangeToBounds(ranges) {
+		const { rowHeightAccumulation, columnWidthAccumulation, rowHeaderWidth, columnHeaderHeight } = this._sheetSkeletonManagerService.getCurrentParam().skeleton;
+		const dirtyBounds = [];
+		for (const r of ranges) {
+			const { startRow, endRow, startColumn, endColumn } = r;
+			const top = startRow === 0 ? 0 : rowHeightAccumulation[startRow - 1] + columnHeaderHeight;
+			const bottom = rowHeightAccumulation[endRow] + columnHeaderHeight;
+			const left = startColumn === 0 ? 0 : columnWidthAccumulation[startColumn - 1] + rowHeaderWidth;
+			const right = columnWidthAccumulation[endColumn] + rowHeaderWidth;
+			dirtyBounds.push({
+				top,
+				left,
+				bottom,
+				right,
+				width: right - left,
+				height: bottom - top
+			});
+		}
+		return dirtyBounds;
+	}
+	_markViewportDirty(viewports, dirtyBounds) {
+		const activeViewports = viewports.filter((vp) => vp.isActive && vp.cacheBound);
+		for (const vp of activeViewports) for (const b of dirtyBounds) if (_univerjs_core.Rectangle.hasIntersectionBetweenTwoRect(vp.cacheBound, b)) vp.markDirty(true);
 	}
-	_getSheetObject() {
-		return getSheetObject(this._workbook, this._context);
+	_spreadsheetViewports(scene) {
+		return scene.getViewports().filter((v) => [
+			"viewMain",
+			"viewMainLeftTop",
+			"viewMainTop",
+			"viewMainLeft"
+		].includes(v.viewportKey));
 	}
 };
-HeaderUnhideRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(HeaderUnhideRangeService)),
-	__decorateParam(3, _univerjs_core.ICommandService)
-], HeaderUnhideRenderController);
+SheetRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IConfigService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(SheetsRenderService)),
+	__decorateParam(4, _univerjs_core.ICommandService),
+	__decorateParam(5, (0, _univerjs_core.Optional)(_univerjs_telemetry.ITelemetryService))
+], SheetRenderController);
+function getLeftTopPlaceholderSize(skeleton) {
+	return {
+		width: skeleton.rowHeaderWidthAndMarginLeft ?? skeleton.rowHeaderWidth,
+		height: skeleton.columnHeaderHeightAndMarginTop ?? skeleton.columnHeaderHeight
+	};
+}
 //#endregion
 //#region src/services/status-bar.service.ts
@@ -17358,6 +17171,7 @@ function ToggleGridlinesMenuFactory(accessor) {
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		tooltip: "sheets-ui.toolbar.toggleGridlines",
 		icon: "HideGridlinesIcon",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
 		activated$: new rxjs.Observable((observer) => {
 			const getValue = () => {
 				const workbook = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
@@ -18104,7 +17918,7 @@ function TextColorSelectorMenuItemFactory(accessor) {
 				selectable: false
 			},
 			value$: new rxjs.Observable((subscriber) => {
-				const defaultValue = _univerjs_core.DEFAULT_STYLES.cl.rgb;
+				const defaultValue = themeService.getColorFromTheme("gray.900");
 				const { isAllValuesSame, value: currentValue } = selectionManagerService.getCellStylesProperty("cl");
 				if (isAllValuesSame) subscriber.next((currentValue === null || currentValue === void 0 ? void 0 : currentValue.rgb) ?? defaultValue);
 				else subscriber.next(defaultValue);
@@ -20180,7 +19994,7 @@ function getEmbedSheetsTabCustomData(snapshot) {
 function isEmbedSheetsTabCustomData(value) {
 	if (!value || typeof value !== "object") return false;
 	const candidate = value;
-	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
+	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string" && (candidate.childType === void 0 || typeof candidate.childType === "number");
 }
 //#endregion
@@ -20189,10 +20003,6 @@ const ISheetEmbedRuntimeService = (0, _univerjs_core.createIdentifier)("sheet-ui
 //#endregion
 //#region src/views/auto-fill-popup-menu/AutoFillPopupMenu.tsx
-const useUpdate = () => {
-	const [, setState] = (0, react.useState)({});
-	return (0, react.useCallback)(() => setState((prevState) => !prevState), []);
-};
 function AutoFillPopupMenu() {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -20222,7 +20032,8 @@ function AutoFillPopupMenu() {
 		col: -1
 	}, false, [autoFillService]);
 	const selected = (0, _univerjs_ui.useObservable)(autoFillService.applyType$, _univerjs_sheets.AUTO_FILL_APPLY_TYPE.SERIES);
-	const [isHovered, setHovered] = (0, react.useState)(false);
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const [, forceUpdate] = (0, react.useReducer)((version) => version + 1, 0);
 	const workbook = useActiveWorkbook();
 	const sheetSkeletonManagerService = (0, react.useMemo)(() => {
 		if (workbook) {
@@ -20232,14 +20043,13 @@ function AutoFillPopupMenu() {
 		return null;
 	}, [workbook, renderManagerService]);
 	const handleMouseEnter = () => {
-		setHovered(true);
+		setIsHovered(true);
 	};
 	const handleMouseLeave = () => {
-		setHovered(false);
+		setIsHovered(false);
 	};
-	const forceUpdate = useUpdate();
 	(0, react.useEffect)(() => {
-		return commandService.onCommandExecuted((command, options) => {
+		return commandService.onCommandExecuted((command) => {
 			if (command.id === SetScrollOperation.id) forceUpdate();
 		}).dispose;
 	}, [forceUpdate, commandService]);
@@ -20284,7 +20094,11 @@ function AutoFillPopupMenu() {
 	const showMore = visible || isHovered;
 	const availableMenu = menu.filter((item) => !item.disable);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-absolute univer-inset-0 univer-z-10 univer-size-0",
+		className: "univer-absolute univer-z-10 univer-size-0",
+		style: {
+			left: 0,
+			top: 0
+		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-absolute",
 			style: {
@@ -20309,9 +20123,9 @@ function AutoFillPopupMenu() {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
 						"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-						"univer-bg-white dark:!univer-bg-gray-900": !visible
+						"univer-bg-gray-0 dark:!univer-bg-gray-900": !visible
 					}),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 				})
 			})
 		})
@@ -20458,7 +20272,7 @@ const EDITOR_DEFAULT_POSITION = {
 	left: HIDDEN_EDITOR_POSITION
 };
 const CELL_EDITOR_DARK_SURFACE_THEME_COLOR = "gray.800";
-const CELL_EDITOR_LIGHT_SURFACE_THEME_COLOR = "white";
+const CELL_EDITOR_LIGHT_SURFACE_THEME_COLOR = "gray.0";
 /**
 * @returns the host background color for the cell editor.
 */
@@ -20517,6 +20331,7 @@ function isEmbedRuntimeEditorOrPopup(target) {
 * @returns the rendered cell editor container.
 */
 function EditorContainer() {
+	var _workbook$getSheetByS;
 	const [state, setState] = (0, react.useState)({ ...EDITOR_DEFAULT_POSITION });
 	const cellEditorManagerService = (0, _univerjs_ui.useDependency)(ICellEditorManagerService);
 	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
@@ -20535,9 +20350,12 @@ function EditorContainer() {
 	const disableAutoFocus = (0, _univerjs_ui.useObservable)(() => contextService.subscribeContextValue$(_univerjs_ui.DISABLE_AUTO_FOCUS_KEY), false, void 0, [contextService, _univerjs_ui.DISABLE_AUTO_FOCUS_KEY]);
 	const FormulaEditor = componentManager.get(EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY);
 	const editState = (0, _univerjs_ui.useObservable)(editorBridgeService.currentEditCellState$);
+	const workbook = editState ? instanceService.getUnit(editState.unitId, _univerjs_core.UniverInstanceType.UNIVER_SHEET) ?? null : null;
+	const activeSheet = useActiveWorksheet(workbook);
 	const darkMode = (0, _univerjs_ui.useObservable)(themeService.darkMode$, themeService.darkMode);
 	const [showEditCellAddress, setShowEditCellAddress] = (0, react.useState)(false);
-	const editCellAddress = editState ? `${(0, _univerjs_core.numberToABC)(editState.column)}${editState.row + 1}` : null;
+	const editSheetName = editState ? workbook === null || workbook === void 0 || (_workbook$getSheetByS = workbook.getSheetBySheetId(editState.sheetId)) === null || _workbook$getSheetByS === void 0 ? void 0 : _workbook$getSheetByS.getName() : null;
+	const editCellAddress = editState ? `${activeSheet && editSheetName && activeSheet.getSheetId() !== editState.sheetId ? `'${(0, _univerjs_engine_formula.quoteSheetName)(editSheetName)}'!` : ""}${(0, _univerjs_core.numberToABC)(editState.column)}${editState.row + 1}` : null;
 	const editorBorderColor = genNormalSelectionStyle(themeService).stroke;
 	const focusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
 	const resolveRuntimeFocusState = () => {
@@ -20857,7 +20675,7 @@ function EditorContainer() {
 			className: "univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-z-10 univer-whitespace-nowrap univer-rounded-t univer-px-1.5 univer-text-xs univer-leading-5",
 			style: {
 				backgroundColor: editorBorderColor,
-				color: themeService.getColorFromTheme("white"),
+				color: themeService.getColorFromTheme("gray.0"),
 				transform: "translateY(-100%)"
 			},
 			children: editCellAddress
@@ -21094,7 +20912,13 @@ function DefinedName({ disable }) {
 		return () => {
 			subscription.unsubscribe();
 		};
-	}, []);
+	}, [
+		definedNamesService,
+		lexerTreeBuilder,
+		selectionManagerService,
+		unitId,
+		workbook
+	]);
 	const handleDefinedNamesList = (0, _univerjs_core.debounce)((value) => {
 		const hasMatch = definedNames.find((i) => i.name.toLowerCase().includes(value.toLowerCase()));
 		if (hasMatch && !open) setOpen(true);
@@ -21196,7 +21020,7 @@ function DefinedName({ disable }) {
 		className: "univer-relative univer-box-border univer-flex univer-h-full univer-w-24 univer-border-r-gray-200 univer-py-1.5 univer-transition-all",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref: inputRef,
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-size-full univer-appearance-none univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none rtl:univer-pl-5 rtl:univer-pr-1.5 dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-size-full univer-appearance-none univer-bg-transparent univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none dark:!univer-border-r-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
 			value: inputValue,
 			onChange: handleChangeSelection,
@@ -21215,7 +21039,7 @@ function DefinedName({ disable }) {
 			onOpenChange: setOpen,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-				className: (0, _univerjs_design.clsx)("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 rtl:univer-left-0 rtl:univer-right-auto dark:!univer-text-white dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
+				className: (0, _univerjs_design.clsx)("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
 			})
 		})]
@@ -21350,7 +21174,7 @@ function FormulaBar(props) {
 	const workbookEditDisable = !((workbookEditablePermission === null || workbookEditablePermission === void 0 ? void 0 : workbookEditablePermission.value) ?? true);
 	const editorActivationDisable = editDisable || workbookEditDisable;
 	const disabled = editDisable || imageDisable;
-	const shouldSkipFocus = (0, react.useRef)(false);
+	const shouldSkipFocusRef = (0, react.useRef)(false);
 	const handlePointerDown = () => {
 		try {
 			contextService.setContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR, true);
@@ -21365,25 +21189,26 @@ function FormulaBar(props) {
 					unitId: editState.unitId
 				})) {
 					contextService.setContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR, false);
-					shouldSkipFocus.current = true;
+					shouldSkipFocusRef.current = true;
 				}
 			}
 		} catch (e) {
 			contextService.setContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR, false);
-			shouldSkipFocus.current = true;
+			shouldSkipFocusRef.current = true;
 			throw e;
 		}
 	};
 	const handlePointerUp = () => {
-		if (shouldSkipFocus.current) setTimeout(() => {
+		if (shouldSkipFocusRef.current) setTimeout(() => {
 			editorService.blur(true);
 		}, 30);
-		shouldSkipFocus.current = false;
+		shouldSkipFocusRef.current = false;
 	};
 	const hideEditor = (0, _univerjs_sheets.isCellImage)(editState === null || editState === void 0 || (_editState$documentLa = editState.documentLayoutObject.documentModel) === null || _editState$documentLa === void 0 ? void 0 : _editState$documentLa.getSnapshot()) || viewDisable;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		dir: "ltr",
 		"data-u-comp": "formula-bar",
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-bg-white univer-transition-[height] univer-ease-linear dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName, className, {
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-bg-gray-0 univer-text-gray-900 univer-transition-[height] univer-ease-linear dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName, className, {
 			"univer-h-7": arrowDirection === 0,
 			"univer-h-20": arrowDirection === 1,
 			"univer-pointer-events-none": editDisable
@@ -21401,17 +21226,17 @@ function FormulaBar(props) {
 						className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-flex univer-h-full univer-w-20 univer-items-center univer-justify-center univer-text-xs", _univerjs_design.borderRightClassName),
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base dark:!univer-text-white", { "univer-cursor-pointer univer-text-red-600 hover:univer-bg-gray-100 dark:!univer-text-green-400 dark:hover:!univer-bg-gray-700": iconActivated }),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base dark:!univer-text-gray-0", { "univer-cursor-pointer univer-text-red-600 hover:univer-bg-gray-100 dark:!univer-text-green-400 dark:hover:!univer-bg-gray-700": iconActivated }),
 								onClick: handleCloseBtnClick,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base dark:!univer-text-white", { "univer-cursor-pointer univer-text-green-600 hover:univer-bg-gray-100 dark:!univer-text-red-400 dark:hover:!univer-bg-gray-700": iconActivated }),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base dark:!univer-text-gray-0", { "univer-cursor-pointer univer-text-green-600 hover:univer-bg-gray-100 dark:!univer-text-red-400 dark:hover:!univer-bg-gray-700": iconActivated }),
 								onClick: handleConfirmBtnClick,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, {})
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-700",
+								className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-p-1 univer-text-base hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700",
 								onClick: handlerFxBtnClick,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.FxIcon, {})
 							})
@@ -21421,7 +21246,7 @@ function FormulaBar(props) {
 					className: "univer-flex univer-w-full univer-flex-1 univer-overflow-hidden univer-pl-3",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref,
-						className: "univer-relative univer-flex-1 univer-bg-white dark:!univer-bg-gray-800",
+						className: "univer-relative univer-flex-1 univer-bg-gray-0 dark:!univer-bg-gray-800",
 						onPointerDown: handlePointerDown,
 						onPointerUp: handlePointerUp,
 						style: { pointerEvents: hideEditor ? "none" : "auto" },
@@ -21446,7 +21271,7 @@ function FormulaBar(props) {
 							},
 							autoScrollbar: false,
 							disableContextMenu: false
-						}), hideEditor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-pointer-events-none univer-relative univer-left-0 univer-top-0 univer-z-[100] univer-size-full univer-cursor-not-allowed univer-bg-white dark:!univer-bg-gray-800" })]
+						}), hideEditor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-pointer-events-none univer-relative univer-left-0 univer-top-0 univer-z-[100] univer-size-full univer-cursor-not-allowed univer-bg-gray-0 dark:!univer-bg-gray-800" })]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-text-xs univer-text-gray-700 dark:!univer-text-gray-200", { "univer-cursor-not-allowed univer-text-gray-200 dark:!univer-text-gray-700": editDisable }),
 						onClick: handleArrowClick,
@@ -21587,7 +21412,7 @@ function SheetBarItem(props) {
 	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
 	const getTextColor = (color) => {
 		const darkTextColor = themeService.getColorFromTheme("gray.900");
-		const lightTextColor = themeService.getColorFromTheme("white");
+		const lightTextColor = themeService.getColorFromTheme("gray.0");
 		return new _univerjs_core.ColorKit(color).isDark() ? lightTextColor : darkTextColor;
 	};
 	const currentSelected = Boolean(selected);
@@ -21601,8 +21426,8 @@ function SheetBarItem(props) {
 		onKeyDown,
 		onClick,
 		className: (0, _univerjs_design.clsx)("univer-mx-1 univer-box-border univer-flex univer-flex-grow univer-cursor-pointer univer-select-none univer-flex-row univer-items-center univer-rounded univer-text-xs univer-transition-[colors,box-shadow] focus-visible:univer-ring-2 focus-visible:univer-ring-primary-500", {
-			"dark:!univer-text-white": !color || color && !textColor,
-			"univer-justify-center univer-bg-white univer-font-bold univer-text-primary-700 univer-shadow": currentSelected,
+			"dark:!univer-text-gray-0": !color || color && !textColor,
+			"univer-justify-center univer-bg-gray-0 univer-font-bold univer-text-primary-700 univer-shadow": currentSelected,
 			"dark:!univer-bg-gray-700": currentSelected && !color,
 			"univer-font-medium univer-text-gray-900 hover:univer-bg-gray-100": !currentSelected,
 			"dark:hover:!univer-bg-gray-700": !currentSelected && !color
@@ -22529,6 +22354,32 @@ const SCROLL_SHADOW_NONE = "";
 const SCROLL_SHADOW_LEFT = "inset 10px 0px 10px -10px rgba(0, 0, 0, 0.2)";
 const SCROLL_SHADOW_RIGHT = "inset -10px 0px 10px -10px rgba(0, 0, 0, 0.2)";
 const SCROLL_SHADOW_BOTH = "inset 10px 0px 10px -10px rgba(0, 0, 0, 0.2), inset -10px 0px 10px -10px rgba(0, 0, 0, 0.2)";
+function EmbedSheetTabProductIcon({ childType }) {
+	const className = "univer-size-4 univer-shrink-0";
+	switch (childType) {
+		case _univerjs_core.UniverInstanceType.UNIVER_SHEET: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SheetsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case _univerjs_core.UniverInstanceType.UNIVER_DOC: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DocsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case _univerjs_core.UniverInstanceType.UNIVER_SLIDE: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlidesMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case _univerjs_core.UniverInstanceType.UNIVER_BASE: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BasesMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case _univerjs_core.UniverInstanceType.UNIVER_BOARD: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BoardsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		default: return null;
+	}
+}
 function getScrollShadow(state) {
 	const { leftEnd, rightEnd } = state;
 	if (leftEnd && rightEnd) return SCROLL_SHADOW_NONE;
@@ -22549,6 +22400,7 @@ function shouldRefreshSheetTabs(commandInfo) {
 	}
 }
 function SheetBarTabs() {
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
 	const [sheetList, setSheetList] = (0, react.useState)([]);
 	const [activeSheetId, setActiveSheetId] = (0, react.useState)("");
 	const [scrollShadow, setScrollShadow] = (0, react.useState)("");
@@ -22670,19 +22522,28 @@ function SheetBarTabs() {
 	const updateSheetItems = (0, react.useCallback)(() => {
 		const activeSheet = workbook.getActiveSheet();
 		const currentSubUnitId = (activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.getSheetId()) ?? "";
+		const embedRuntimeService = injector.has(ISheetEmbedRuntimeService) ? injector.get(ISheetEmbedRuntimeService) : void 0;
 		const sheetListItems = workbook.getSheets().filter((sheet) => !sheet.isSheetHidden()).map((sheet, index) => {
+			var _embedRuntimeService$;
 			const worksheetRule = worksheetProtectionRuleModel.getRule(workbook.getUnitId(), sheet.getSheetId());
 			const hasSelectionRule = rangeProtectionRuleModel.getSubunitRuleList(workbook.getUnitId(), sheet.getSheetId()).length > 0;
 			const hasProtection = Boolean((worksheetRule === null || worksheetRule === void 0 ? void 0 : worksheetRule.permissionId) || hasSelectionRule);
+			const embedData = getEmbedSheetsTabCustomData(sheet.getConfig());
+			const embedChildType = (embedData === null || embedData === void 0 ? void 0 : embedData.childType) ?? (embedData ? embedRuntimeService === null || embedRuntimeService === void 0 || (_embedRuntimeService$ = embedRuntimeService.getSheetTabChildType) === null || _embedRuntimeService$ === void 0 ? void 0 : _embedRuntimeService$.call(embedRuntimeService, {
+				hostUnitId: workbook.getUnitId(),
+				hostAnchorId: embedData.hostAnchorId,
+				embedId: embedData.embedId
+			}) : void 0);
 			return {
 				sheetId: sheet.getSheetId(),
-				label: hasProtection ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LockIcon, { className: "univer-shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "univer-truncate univer-outline-none",
-					children: sheet.getName()
-				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "univer-truncate univer-outline-none",
-					children: sheet.getName()
-				}),
+				label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					embedChildType != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmbedSheetTabProductIcon, { childType: embedChildType }),
+					hasProtection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LockIcon, { className: "univer-shrink-0" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "univer-truncate univer-outline-none",
+						children: sheet.getName()
+					})
+				] }),
 				index,
 				selected: activeSheet === sheet,
 				color: sheet.getTabColor() ?? void 0
@@ -22691,6 +22552,7 @@ function SheetBarTabs() {
 		setSheetList(sheetListItems);
 		setActiveSheetId(currentSubUnitId);
 	}, [
+		injector,
 		rangeProtectionRuleModel,
 		workbook,
 		worksheetProtectionRuleModel
@@ -23158,120 +23020,98 @@ const functionDisplayNames = {
 	[_univerjs_engine_formula.FUNCTION_NAMES_STATISTICAL.COUNTA]: "sheets-ui.statusbar.countA",
 	[_univerjs_engine_formula.FUNCTION_NAMES_TEXT.CONCATENATE]: "concatenate"
 };
-const CopyableStatisticItem = (item) => {
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const messageService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMessageService);
-	const clipboardService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IClipboardInterfaceService);
-	const formateValue = formatNumber(item);
-	const copyToClipboard = async () => {
-		await clipboardService.writeText(item.value.toString());
-		messageService.show({
-			type: _univerjs_design.MessageType.Success,
-			content: localeService.t("sheets-ui.statusbar.copied")
-		});
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-		title: localeService.t("sheets-ui.statusbar.clickToCopy"),
-		placement: "top",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-flex univer-cursor-pointer univer-truncate univer-text-center univer-text-xs univer-text-gray-400",
-			onClick: copyToClipboard,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${localeService.t((functionDisplayNames === null || functionDisplayNames === void 0 ? void 0 : functionDisplayNames[item.name]) || item.name)}: ${formateValue}` })
-		}, item.name)
-	});
-};
 function formatNumber(item) {
 	const { pattern, value: num } = item;
 	if (typeof num !== "number") return 0;
-	if (num >= 1e8) return num.toExponential(2);
 	if (pattern && allowPatternFunctions.includes(item.name)) return _univerjs_core.numfmt.format(pattern, num, { throws: false });
 	return num.toLocaleString();
 }
 //#endregion
 //#region src/views/status-bar/StatusBar.tsx
-const SINGLE_MODE_WIDTH = 800;
-const ROW_COUNT_THRESHOLD = 3;
 const StatusBar = () => {
-	const [isSingle, setIsSingle] = (0, react.useState)(window.innerWidth < SINGLE_MODE_WIDTH);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const statusBarService = (0, _univerjs_ui.useDependency)(IStatusBarService);
-	const items = statusBarService.getFunctions().map((item, index) => ({
+	const [selectedFunction, setSelectedFunction] = (0, react.useState)(_univerjs_engine_formula.FUNCTION_NAMES_MATH.SUM);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [statistics, setStatistics] = (0, react.useState)(() => statusBarService.getFunctions().map((item) => ({
 		name: item.func,
 		value: 0,
 		show: true,
-		disable: false,
+		disable: true,
 		pattern: null
-	}));
-	const useStatistics = (initialItems, statusBarService, isSingle) => {
-		const [statistics, setStatistics] = (0, react.useState)(initialItems);
-		const [show, setShow] = (0, react.useState)(true);
-		const filteredStatistics = (0, react.useMemo)(() => statistics.filter((item) => item.show && !item.disable), [statistics]);
-		const firstItem = (0, react.useMemo)(() => filteredStatistics.find((item) => item.show && !item.disable), [filteredStatistics]);
-		const showList = (0, react.useMemo)(() => isSingle && firstItem ? [firstItem] : filteredStatistics, [
-			isSingle,
-			firstItem,
-			filteredStatistics
-		]);
-		const updateStatistics = (0, react.useCallback)((state) => {
-			const items = state === null || state === void 0 ? void 0 : state.values;
-			if (!(items === null || items === void 0 ? void 0 : items.length)) {
-				setShow(false);
-				return;
-			}
-			setShow(true);
-			setStatistics((prevStats) => prevStats.map((stat) => {
-				var _items$find;
+	})));
+	(0, react.useEffect)(() => {
+		const subscription = statusBarService.state$.subscribe((state) => {
+			const values = (state === null || state === void 0 ? void 0 : state.values) ?? [];
+			setStatistics((previousStatistics) => previousStatistics.map((statistic) => {
+				const value = values.find((item) => item.func === statistic.name);
 				return {
-					...stat,
-					value: ((_items$find = items.find((i) => i.func === stat.name)) === null || _items$find === void 0 ? void 0 : _items$find.value) ?? stat.value,
-					disable: !items.some((i) => i.func === stat.name),
+					...statistic,
+					value: (value === null || value === void 0 ? void 0 : value.value) ?? statistic.value,
+					disable: !value,
 					pattern: (state === null || state === void 0 ? void 0 : state.pattern) ?? null
 				};
 			}));
-		}, []);
-		(0, react.useEffect)(() => {
-			const subscription = statusBarService.state$.subscribe(updateStatistics);
-			return () => subscription.unsubscribe();
-		}, [statusBarService, updateStatistics]);
-		return {
-			statistics,
-			showList,
-			show
-		};
+		});
+		return () => subscription.unsubscribe();
+	}, [statusBarService]);
+	const availableStatistics = statistics.filter((item) => item.show && !item.disable);
+	const selectedStatistic = availableStatistics.find((item) => item.name === selectedFunction) ?? availableStatistics.find((item) => item.name === _univerjs_engine_formula.FUNCTION_NAMES_MATH.SUM) ?? availableStatistics[0];
+	if (!selectedStatistic) return null;
+	const formatStatistic = (item) => {
+		const localeKey = functionDisplayNames[item.name] || item.name;
+		return `${localeService.t(localeKey)}: ${formatNumber(item)}`;
 	};
-	const { showList, show } = useStatistics(items, statusBarService, isSingle);
-	const handleResize = (0, _univerjs_core.debounce)(() => {
-		const newSingleState = window.innerWidth < SINGLE_MODE_WIDTH;
-		if (isSingle !== newSingleState) setIsSingle(newSingleState);
-	}, 100);
-	(0, react.useEffect)(() => {
-		window.addEventListener("resize", handleResize);
-		return () => {
-			window.removeEventListener("resize", handleResize);
-		};
-	}, [isSingle]);
-	const getStatisticLayout = (showList, rowCountThreshold, CopyableStatisticItem) => {
-		if (showList.length > rowCountThreshold) return showList.reduce((acc, _, index) => {
-			if (index % 2 === 0) acc.push(showList.slice(index, index + 2));
-			return acc;
-		}, []).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-grid univer-h-full univer-items-center",
-			children: [item[0] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyableStatisticItem, { ...item[0] }, item[0].name), item[1] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyableStatisticItem, { ...item[1] }, item[1].name)]
-		}, `stat-col-${index}`));
-		return showList.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-grid univer-h-full univer-items-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyableStatisticItem, { ...item })
-		}, item.name));
+	const handleSelect = (name) => {
+		setSelectedFunction(name);
+		setOpen(false);
 	};
-	const renderContent = getStatisticLayout(showList, ROW_COUNT_THRESHOLD, CopyableStatisticItem);
-	return show && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-flex univer-h-full univer-items-center univer-overflow-hidden univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-block after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"]", {
-			"univer-max-w-32": isSingle,
-			"univer-max-w-fit": !isSingle
-		}),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-flex univer-h-full univer-gap-x-2",
-			children: renderContent
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-relative univer-box-border univer-flex univer-h-full univer-min-w-0 univer-max-w-64 univer-items-center univer-overflow-hidden univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-block after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"]",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+			align: "end",
+			side: "top",
+			open,
+			onOpenChange: setOpen,
+			overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "status-bar-statistic-menu",
+				className: "univer-grid univer-w-max univer-max-w-[calc(100vw-16px)] univer-gap-0.5 univer-p-1.5",
+				children: availableStatistics.map((item) => {
+					const text = formatStatistic(item);
+					const selected = item.name === selectedStatistic.name;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-py-1.5 univer-text-left univer-text-xs univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 dark:!univer-bg-gray-800": selected }),
+						"aria-pressed": selected,
+						onClick: () => handleSelect(item.name),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-w-3 univer-shrink-0",
+							children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, {})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+							title: text,
+							placement: "top",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "univer-min-w-0 univer-flex-1 univer-truncate",
+								children: text
+							})
+						})]
+					}, item.name);
+				})
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"data-u-comp": "status-bar-statistic-picker",
+				className: "univer-flex univer-min-w-0 univer-max-w-full univer-cursor-pointer univer-items-center univer-gap-1 univer-border-none univer-bg-transparent univer-p-0 univer-text-xs univer-text-gray-400",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+					title: formatStatistic(selectedStatistic),
+					placement: "top",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "univer-min-w-0 univer-flex-1 univer-truncate",
+						children: formatStatistic(selectedStatistic)
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-shrink-0" })]
+			})
 		})
 	});
 };
@@ -23283,9 +23123,7 @@ function RenderSheetFooter() {
 	const config = (0, _univerjs_ui.useConfigValue)(SHEETS_UI_PLUGIN_CONFIG_KEY);
 	const menuManagerService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMenuManagerService);
 	const showFooter = (config === null || config === void 0 ? void 0 : config.footer) ?? true;
-	const activeWorkbook = useActiveWorkbook();
-	const workbook = useSheetLoadingWorkbook() ?? activeWorkbook;
-	const isLoading = useSheetLoading();
+	const workbook = useRootWorkbenchWorkbook();
 	const activeWorkbookEmbeddedRender = useActiveWorkbookIsEmbeddedRender(workbook);
 	const focusedUnitType = useFocusedUnitType();
 	const activeEmbedTab = useActiveSheetEmbedTabData(workbook);
@@ -23298,33 +23136,27 @@ function RenderSheetFooter() {
 	const showMenus = activeEmbedTab ? false : menus;
 	const showZoomSlider = activeEmbedTab ? false : zoomSlider;
 	if (!sheetBar && !showStatisticBar && !showMenus && !showZoomSlider) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetLoadingWorkbookContext.Provider, {
-		value: workbook,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-w-full univer-grid-flow-col univer-grid-cols-[1fr,auto,auto,auto] univer-items-center univer-justify-between univer-bg-white univer-px-5 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-200", { "univer-pointer-events-none": isLoading }),
-			"data-range-selector": true,
-			"aria-disabled": isLoading,
-			style: { height: 36 },
-			children: [
-				sheetBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetBar, {}),
-				showStatisticBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBar, {}),
-				showMenus && footerMenus.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-box-border univer-flex univer-gap-2 univer-px-2",
-					children: footerMenus.map((item) => {
-						var _item$children;
-						return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map((child) => (child === null || child === void 0 ? void 0 : child.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...child.item }, child.key));
-					})
-				}),
-				showZoomSlider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetZoomSlider, {})
-			]
-		})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "univer-box-border univer-grid univer-w-full univer-grid-flow-col univer-grid-cols-[1fr,auto,auto,auto] univer-items-center univer-justify-between univer-bg-gray-0 univer-px-5 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-200",
+		"data-range-selector": true,
+		style: { height: 36 },
+		children: [
+			sheetBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetBar, {}),
+			showStatisticBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBar, {}),
+			showMenus && footerMenus.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-box-border univer-flex univer-gap-2 univer-px-2",
+				children: footerMenus.map((item) => {
+					var _item$children;
+					return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map((child) => (child === null || child === void 0 ? void 0 : child.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...child.item }, child.key));
+				})
+			}),
+			showZoomSlider && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetZoomSlider, {})
+		]
 	});
 }
 function RenderSheetHeader() {
 	const config = (0, _univerjs_ui.useConfigValue)(SHEETS_UI_PLUGIN_CONFIG_KEY);
-	const activeWorkbook = useActiveWorkbook();
-	const workbook = useSheetLoadingWorkbook() ?? activeWorkbook;
-	const isLoading = useSheetLoading();
+	const workbook = useRootWorkbenchWorkbook();
 	const hasWorkbook = !!workbook;
 	const activeWorkbookEmbeddedRender = useActiveWorkbookIsEmbeddedRender(workbook);
 	const focusedUnitType = useFocusedUnitType();
@@ -23334,17 +23166,10 @@ function RenderSheetHeader() {
 	if (activeEmbedTab) return null;
 	if (focusedUnitType != null && focusedUnitType !== _univerjs_core.UniverInstanceType.UNIVER_SHEET) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": true,
-		className: "univer-h-7 univer-border-b univer-border-gray-200 univer-bg-white dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
+		className: "univer-h-7 univer-border-b univer-border-gray-200 univer-bg-gray-0 dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
 		"data-u-comp": "formula-bar-placeholder"
 	});
-	if ((config === null || config === void 0 ? void 0 : config.formulaBar) !== false) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetLoadingWorkbookContext.Provider, {
-		value: workbook,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"aria-disabled": isLoading,
-			className: (0, _univerjs_design.clsx)({ "univer-pointer-events-none": isLoading }),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormulaBar, {})
-		})
-	});
+	if ((config === null || config === void 0 ? void 0 : config.formulaBar) !== false) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormulaBar, {});
 	return null;
 }
 /**
@@ -23352,18 +23177,17 @@ function RenderSheetHeader() {
 */
 function RenderSheetContent() {
 	const config = (0, _univerjs_ui.useConfigValue)(SHEETS_UI_PLUGIN_CONFIG_KEY);
-	const isLoading = useSheetLoading();
-	const isPreviewReady = useSheetLoadingPreviewReady();
 	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
-	const activeWorkbook = useActiveWorkbook();
-	const workbook = useSheetLoadingWorkbook() ?? activeWorkbook;
+	const workbook = useRootWorkbenchWorkbook();
 	const activeEmbedTab = useActiveSheetEmbedTabData(workbook);
 	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
 	const activeWorkbookEmbeddedRender = useActiveWorkbookIsEmbeddedRender(workbook);
+	const focusedUnitType = useFocusedUnitType();
+	const rootWorkbenchOwnsSheet = activeEmbedTab != null || focusedUnitType == null || focusedUnitType === _univerjs_core.UniverInstanceType.UNIVER_SHEET;
 	const ShapeTextEditorContainer = componentManager.get("SheetShapeTextEditorContainer") ?? componentManager.get("ShapeTextEditorContainer");
 	(0, react.useEffect)(() => {
 		var _tryGetSheetEmbedRunt;
-		if (!workbook || isLoading || activeEmbedTab || activeWorkbookEmbeddedRender) return;
+		if (!workbook || activeEmbedTab || activeWorkbookEmbeddedRender || !rootWorkbenchOwnsSheet) return;
 		const instanceService = injector.get(_univerjs_core.IUniverInstanceService);
 		instanceService.setCurrentUnitForType(workbook.getUnitId());
 		instanceService.focusUnit(workbook.getUnitId());
@@ -23372,11 +23196,11 @@ function RenderSheetContent() {
 		activeEmbedTab,
 		activeWorkbookEmbeddedRender,
 		injector,
-		isLoading,
+		rootWorkbenchOwnsSheet,
 		workbook
 	]);
 	if (!workbook) return null;
-	if (isLoading) return isPreviewReady ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetLoadingSkeleton, {});
+	if (!rootWorkbenchOwnsSheet) return null;
 	if (activeWorkbookEmbeddedRender) return null;
 	if (activeEmbedTab && workbook) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderSheetEmbedTabHost, {
 		workbook,
@@ -23388,42 +23212,6 @@ function RenderSheetContent() {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoFillPopupMenu, {})
 	] });
 }
-function SheetLoadingSkeleton() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-u-comp": "sheet-loading-skeleton",
-		"aria-busy": true,
-		className: "univer-absolute univer-inset-0 univer-z-10 univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-900",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-right-0 univer-top-0 univer-border-b univer-border-gray-200 univer-bg-gray-50 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
-				style: {
-					left: _univerjs_core.DEFAULT_WORKSHEET_ROW_TITLE_WIDTH,
-					height: _univerjs_core.DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-bottom-0 univer-left-0 univer-border-r univer-border-gray-200 univer-bg-gray-50 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
-				style: {
-					top: _univerjs_core.DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT,
-					width: _univerjs_core.DEFAULT_WORKSHEET_ROW_TITLE_WIDTH
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-bottom-0 univer-right-0 univer-animate-pulse univer-text-gray-200 dark:!univer-text-gray-700",
-				style: {
-					top: _univerjs_core.DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT,
-					left: _univerjs_core.DEFAULT_WORKSHEET_ROW_TITLE_WIDTH,
-					backgroundImage: "linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
-					backgroundSize: `${_univerjs_core.DEFAULT_WORKSHEET_COLUMN_WIDTH}px ${_univerjs_core.DEFAULT_WORKSHEET_ROW_HEIGHT}px`
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LoadingMultiIcon, {
-				"aria-hidden": true,
-				className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-size-6 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-animate-spin univer-text-violet-500"
-			})
-		]
-	});
-}
 function RenderSheetEmbedTabHost(props) {
 	const { workbook, worksheet } = props;
 	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
@@ -23455,16 +23243,42 @@ function RenderSheetEmbedTabHost(props) {
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-embed-sheets-sheet-tab-host": hostAnchorId,
-		className: "univer-absolute univer-inset-0 univer-z-40 univer-bg-white dark:!univer-bg-gray-900"
+		className: "univer-absolute univer-inset-0 univer-z-40 univer-bg-gray-0 dark:!univer-bg-gray-900"
 	});
 }
 function useActiveWorkbookIsEmbeddedRender(workbook) {
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const runtimeFocusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
 	return (0, react.useMemo)(() => {
-		var _univerInstanceServic;
+		var _renderManagerService, _univerInstanceServic;
 		if (!workbook) return false;
-		return ((_univerInstanceServic = univerInstanceService.getUnitCreateOptions(workbook.getUnitId())) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.embeddedRender) === true;
-	}, [univerInstanceService, workbook]);
+		return (runtimeFocusCoordinator === null || runtimeFocusCoordinator === void 0 ? void 0 : runtimeFocusCoordinator.resolveRuntimeScopeByChildUnitId(workbook.getUnitId())) != null || ((_renderManagerService = renderManagerService.getRenderUnitById(workbook.getUnitId())) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.isMainScene) === false || ((_univerInstanceServic = univerInstanceService.getUnitCreateOptions(workbook.getUnitId())) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.embeddedRender) === true;
+	}, [
+		(0, _univerjs_ui.useObservable)(() => (0, rxjs.merge)(renderManagerService.created$, renderManagerService.disposed$, (runtimeFocusCoordinator === null || runtimeFocusCoordinator === void 0 ? void 0 : runtimeFocusCoordinator.runtimeSessionChanged$) ?? rxjs.EMPTY), null, false, [renderManagerService, runtimeFocusCoordinator]),
+		renderManagerService,
+		runtimeFocusCoordinator,
+		univerInstanceService,
+		workbook
+	]);
+}
+function useRootWorkbenchWorkbook() {
+	const activeWorkbook = useActiveWorkbook();
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const instanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const runtimeFocusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
+	return (0, react.useMemo)(() => {
+		if (!activeWorkbook || !runtimeFocusCoordinator) return activeWorkbook;
+		const runtimeScope = runtimeFocusCoordinator.resolveRuntimeScopeByChildUnitId(activeWorkbook.getUnitId());
+		if (!(runtimeScope === null || runtimeScope === void 0 ? void 0 : runtimeScope.hostUnitId)) return activeWorkbook;
+		return instanceService.getUnit(runtimeScope.hostUnitId, _univerjs_core.UniverInstanceType.UNIVER_SHEET) ?? activeWorkbook;
+	}, [
+		activeWorkbook,
+		instanceService,
+		runtimeFocusCoordinator,
+		(0, _univerjs_ui.useObservable)(() => (runtimeFocusCoordinator === null || runtimeFocusCoordinator === void 0 ? void 0 : runtimeFocusCoordinator.runtimeSessionChanged$) ?? rxjs.EMPTY, null, false, [runtimeFocusCoordinator])
+	]);
 }
 function useFocusedUnitType() {
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -24099,7 +23913,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.1";
 //#endregion
 //#region src/views/cell-popup/config.ts
@@ -24269,6 +24083,8 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends _u
 		disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
 			if (shouldUpdatePosition(commandInfo.id)) position$.next(calc());
 		}));
+		const viewMain = currentRender.scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
+		if (viewMain) disposable.add(viewMain.onScrollAfter$.subscribeEvent(() => position$.next(calc())));
 		return {
 			position,
 			position$,
@@ -24315,6 +24131,9 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends _u
 		};
 		const { position, position$, disposable } = this._createPositionObserver(bound, currentRender, skeleton, worksheet);
 		const popupInjector = this._resolveEmbeddedPopupInjector(unitId, currentRender);
+		const canvasElement = currentRender.engine.getCanvasElement();
+		const scaleAdjust = canvasElement.getBoundingClientRect().width / pxToNum(canvasElement.style.width);
+		const { scaleX, scaleY } = currentRender.scene.getAncestorScale();
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
@@ -24322,7 +24141,11 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends _u
 			connectorInjector: popupInjector,
 			anchorRect: position,
 			anchorRect$: position$,
-			canvasElement: currentRender.engine.getCanvasElement()
+			canvasElement,
+			boundaryInsets: popup.constrainToCanvas ? {
+				left: skeleton.rowHeaderWidth * scaleAdjust * scaleX,
+				top: skeleton.columnHeaderHeight * scaleAdjust * scaleY
+			} : popup.boundaryInsets
 		});
 		const disposableCollection = new _univerjs_core.DisposableCollection();
 		disposableCollection.add(disposable);
@@ -24735,6 +24558,11 @@ function shouldUpdatePosition(commandId) {
 //#endregion
 //#region src/services/cell-popup-manager.service.ts
+const CELL_POPUP_DIRECTIONS = [
+	"horizontal",
+	"vertical",
+	"left-center"
+];
 let CellPopupManagerService = class CellPopupManagerService extends _univerjs_core.Disposable {
 	constructor(_sheetCanvasPopManagerService) {
 		super();
@@ -24790,7 +24618,7 @@ let CellPopupManagerService = class CellPopupManagerService extends _univerjs_co
 					direction
 				},
 				noPushMinimumGap: true,
-				autoRelayout: false,
+				autoRelayout: popup.autoRelayout ?? false,
 				zIndex: 90
 			}, unitId, subUnitId);
 			subUnitMap.setValue(row, col, {
@@ -24818,31 +24646,21 @@ let CellPopupManagerService = class CellPopupManagerService extends _univerjs_co
 		const subUnitMap = this._ensureCellPopupMap(unitId, subUnitId);
 		const cache = subUnitMap.getValue(row, col);
 		if (!cache) return;
-		if (cache.horizontal) {
-			var _cache$horizontal$dis;
-			(_cache$horizontal$dis = cache.horizontal.disposable) === null || _cache$horizontal$dis === void 0 || _cache$horizontal$dis.dispose();
-			cache.horizontal = void 0;
-			this._change$.next({
-				unitId,
-				subUnitId,
-				row,
-				col,
-				direction: "horizontal"
-			});
-		}
-		if (cache.vertical) {
-			var _cache$vertical$dispo;
-			(_cache$vertical$dispo = cache.vertical.disposable) === null || _cache$vertical$dispo === void 0 || _cache$vertical$dispo.dispose();
-			cache.vertical = void 0;
+		CELL_POPUP_DIRECTIONS.forEach((direction) => {
+			var _directionCache$dispo2;
+			const directionCache = cache[direction];
+			if (!directionCache) return;
+			(_directionCache$dispo2 = directionCache.disposable) === null || _directionCache$dispo2 === void 0 || _directionCache$dispo2.dispose();
+			cache[direction] = void 0;
 			this._change$.next({
 				unitId,
 				subUnitId,
 				row,
 				col,
-				direction: "vertical"
+				direction
 			});
-		}
-		if (!cache.horizontal && !cache.vertical) subUnitMap.realDeleteValue(row, col);
+		});
+		if (CELL_POPUP_DIRECTIONS.every((direction) => !cache[direction])) subUnitMap.realDeleteValue(row, col);
 	}
 	hidePopupsForUnit(unitId, subUnitId) {
 		const unitMap = this._cellPopupMap.get(unitId);
@@ -25561,12 +25379,12 @@ function BorderPanel(props) {
 						})
 					}),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded univer-border-none univer-bg-transparent univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+						className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded univer-border-none univer-bg-transparent univer-p-1 univer-text-gray-900 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
 						type: "button",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PaintBucketDoubleIcon, {
-							className: "univer-fill-primary-600 dark:!univer-text-white",
+							className: "univer-fill-primary-600 dark:!univer-text-gray-0",
 							extend: { colorChannel1: (value === null || value === void 0 ? void 0 : value.color) ?? "" }
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 					})
 				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
@@ -25577,19 +25395,19 @@ function BorderPanel(props) {
 								className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-px-1 univer-py-3 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
 								onClick: () => handleClick(item.value, "style"),
 								children: [item.value === type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-left-3 univer-text-primary-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BorderLine, {
-									className: "univer-ml-6 univer-fill-gray-900 dark:!univer-fill-white",
+									className: "univer-ml-6 univer-fill-gray-900 dark:!univer-fill-gray-0",
 									type: item.value
 								})]
 							}, item.value))
 						})
 					}),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded univer-border-none univer-bg-transparent univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+						className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded univer-border-none univer-bg-transparent univer-p-1 univer-text-gray-900 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
 						type: "button",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BorderLine, {
-							className: "univer-fill-gray-900 dark:!univer-fill-white",
+							className: "univer-fill-gray-900 dark:!univer-fill-gray-0",
 							type: type ?? _univerjs_core.BorderStyleTypes.THIN
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 					})
 				}) })]
 			})
@@ -25621,6 +25439,7 @@ let CellAlertManagerService = class CellAlertManagerService extends _univerjs_co
 		});
 	}
 	showAlert(alert) {
+		var _alert$menu, _alert$menu2, _alert$menu3;
 		let lastPopup = this._currentAlert.get(alert.key);
 		if (lastPopup) lastPopup.dispose.dispose();
 		if (lastPopup) lastPopup.dispose.dispose();
@@ -25641,7 +25460,9 @@ let CellAlertManagerService = class CellAlertManagerService extends _univerjs_co
 			col
 		}, {
 			componentKey: CELL_ALERT_KEY,
-			direction: "horizontal",
+			direction: ((_alert$menu = alert.menu) === null || _alert$menu === void 0 ? void 0 : _alert$menu.length) ? "left-center" : "horizontal",
+			autoRelayout: Boolean((_alert$menu2 = alert.menu) === null || _alert$menu2 === void 0 ? void 0 : _alert$menu2.length),
+			showOnSelectionMoving: Boolean((_alert$menu3 = alert.menu) === null || _alert$menu3 === void 0 ? void 0 : _alert$menu3.length),
 			extraProps: { alert },
 			priority: 1
 		});
@@ -25681,18 +25502,53 @@ CellAlertManagerService = __decorate([__decorateParam(0, _univerjs_engine_render
 */
 function CellAlert({ popup }) {
 	var _popup$extraProps;
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
 	const alert = (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.alert;
 	if (!alert) return null;
-	const { type, title, message } = alert;
+	const { type, title, message, menu } = alert;
+	if (menu === null || menu === void 0 ? void 0 : menu.length) {
+		const accessibleLabel = [title, message].filter((value) => typeof value === "string").join(": ");
+		const showMore = visible || isHovered;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			onMouseEnter: () => setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+				align: "start",
+				open: visible,
+				onOpenChange: setVisible,
+				items: [
+					{
+						type: "custom",
+						className: "univer-px-2 univer-py-1.5 univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0",
+						children: message
+					},
+					{ type: "separator" },
+					...menu.map((item) => ({
+						type: "item",
+						children: item.label,
+						disabled: item.disabled,
+						onSelect: item.onSelect
+					}))
+				],
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					"aria-label": accessibleLabel || void 0,
+					className: "univer-flex univer-items-center univer-gap-1 univer-rounded univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-1 univer-shadow hover:univer-bg-gray-100 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.WarningIcon, { className: "univer-text-yellow-500" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-300" })]
+				})
+			})
+		});
+	}
 	const iconMap = {
-		[2]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ErrorIcon, { className: "univer-mr-1.5 univer-text-red-500" }),
-		[0]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-mr-1.5 univer-text-blue-500" }),
-		[1]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.WarningIcon, { className: "univer-mr-1.5 univer-text-yellow-500" })
+		[2]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ErrorIcon, { className: "univer-text-red-500" }),
+		[0]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-text-blue-500" }),
+		[1]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.WarningIcon, { className: "univer-text-yellow-500" })
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-z-[100] univer-box-border univer-w-[156px] univer-rounded-lg univer-bg-white univer-px-2 univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-black dark:!univer-text-white",
+		className: "univer-z-[100] univer-box-border univer-w-[156px] univer-rounded-lg univer-bg-gray-0 univer-px-2 univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-gray-1000 dark:!univer-text-gray-0",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mb-1.5 univer-flex univer-h-5 univer-flex-row univer-items-center univer-text-sm univer-font-medium",
+			className: "univer-mb-1.5 univer-flex univer-h-5 univer-flex-row univer-items-center univer-gap-x-1.5 univer-text-sm univer-font-medium",
 			children: [type ? iconMap[type] : null, title]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-text-sm",
@@ -25722,7 +25578,10 @@ const CellPopup = (props) => {
 	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-u-comp": "sheets-ui-cell-popup",
-		className: "univer-ml-px univer-flex univer-flex-col",
+		className: `
+              ${direction === "left-center" ? "univer-mr-px" : "univer-ml-px"}
+              univer-flex univer-flex-col
+            `,
 		children: popups.map((popup) => {
 			const Component = componentManager.get(popup.componentKey);
 			return Component ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { popup }, popup.id ?? popup.componentKey) : null;
@@ -25864,7 +25723,7 @@ function DefinedNameInputContent(props) {
 					className: "univer-relative univer-h-8 univer-select-none",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormulaEditor, {
 						ref: formulaEditorRef,
-						className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-white [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
+						className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 						initValue: formulaOrRefStringValue,
 						unitId,
 						subUnitId,
@@ -26100,7 +25959,7 @@ const DefinedNameContainer = () => {
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									title: definedName.comment,
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "univer-my-1 univer-max-h-[100px] univer-max-w-[190px] univer-truncate univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+										className: "univer-my-1 univer-max-h-[100px] univer-max-w-[190px] univer-truncate univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0",
 										children: [definedName.name, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "univer-text-xxs univer-ml-1 univer-text-gray-400",
 											children: definedName.localSheetId === _univerjs_sheets.SCOPE_WORKBOOK_VALUE_DEFINED_NAME || definedName.localSheetId == null ? "" : getSheetNameBySheetId(definedName.localSheetId)
@@ -26207,7 +26066,7 @@ function DateDropdown(props) {
 		if (await (onChange === null || onChange === void 0 ? void 0 : onChange(date))) hideFn();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-rounded univer-bg-white univer-p-2 univer-shadow-lg dark:!univer-bg-black",
+		className: "univer-rounded univer-bg-gray-0 univer-p-2 univer-shadow-lg dark:!univer-bg-gray-1000",
 		children: [patternType === "time" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.TimeInput, {
 			value: date.toDate(),
 			onValueChange: (newValue) => {
@@ -26260,6 +26119,8 @@ function getListDropdownValue(value, multiple) {
 function SelectList(props) {
 	const { value, onChange, multiple, options, onEdit, style, location, showEdit: showEditOnDropdown, showSearch: showSearchOnDropdown } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
+	(0, _univerjs_ui.useObservable)(themeService.currentTheme$);
 	const { row, col, unitId, subUnitId } = location;
 	const searchRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
@@ -26298,14 +26159,14 @@ function SelectList(props) {
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "sheets-dropdown-list",
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-rounded-lg univer-bg-white univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-black dark:!univer-text-white", _univerjs_design.borderClassName),
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-rounded-lg univer-bg-gray-0 univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-gray-1000 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 		style,
 		children: [
 			showSearchOnDropdown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-box-border univer-flex univer-w-full univer-px-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: searchRef,
-					className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-md univer-px-2 univer-py-1 univer-text-sm focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-bg-black dark:!univer-text-white", _univerjs_design.borderClassName),
+					className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-md univer-bg-gray-0 univer-px-2 univer-py-1 univer-text-sm univer-text-gray-900 focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-bg-gray-1000 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 					type: "text",
 					value: lowerFilter,
 					autoFocus: true,
@@ -26319,6 +26180,7 @@ function SelectList(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, _univerjs_design.clsx)("univer-flex univer-max-h-52 univer-flex-col univer-gap-1 univer-overflow-y-auto univer-px-2 univer-py-1", _univerjs_design.scrollbarClassName),
 				children: filteredOptions.map((item, i) => {
+					var _item$color;
 					const selected = value.indexOf(item.value) > -1;
 					const handleClick = () => {
 						let set;
@@ -26331,16 +26193,18 @@ function SelectList(props) {
 						onChange(newValue);
 					};
 					const index = item.label.toLocaleLowerCase().indexOf(lowerFilter);
-					const isDark = new _univerjs_core.ColorKit(item.color).isDark();
+					const isThemeColor = Boolean(((_item$color = item.color) === null || _item$color === void 0 ? void 0 : _item$color.includes(".")) && themeService.isValidThemeColor(item.color));
+					const backgroundColor = isThemeColor ? themeService.getColorFromTheme(item.color) : item.color;
+					const isDark = new _univerjs_core.ColorKit(backgroundColor).isDark();
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex univer-cursor-pointer univer-flex-row univer-items-center univer-justify-between univer-rounded-md univer-px-1.5 univer-py-1 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700",
 						onClick: handleClick,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-inline-flex univer-h-4 univer-w-fit univer-items-center univer-truncate univer-rounded-full univer-px-1.5 univer-text-xs", {
-								"univer-text-gray-900": !isDark,
-								"univer-text-white": isDark
+								"univer-text-gray-900": isThemeColor || !isDark,
+								"univer-text-gray-0": !isThemeColor && isDark
 							}),
-							style: { background: item.color },
+							style: { background: backgroundColor },
 							children: lowerFilter && item.label.toLowerCase().includes(lowerFilter) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label.substring(0, index) }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -26410,7 +26274,7 @@ const Spin = ({ loading, children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-relative univer-size-full",
 		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-absolute -univer-bottom-0.5 -univer-left-0.5 -univer-right-0.5 -univer-top-0.5 univer-z-10 univer-flex univer-items-center univer-justify-center univer-bg-white univer-backdrop-blur dark:!univer-bg-black",
+			className: "univer-absolute -univer-bottom-0.5 -univer-left-0.5 -univer-right-0.5 -univer-top-0.5 univer-z-10 univer-flex univer-items-center univer-justify-center univer-bg-gray-0 univer-backdrop-blur dark:!univer-bg-gray-1000",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-size-10 univer-animate-spin univer-rounded-full univer-border-4 univer-border-solid univer-border-gray-100 univer-border-t-primary-500" })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: loading ? "univer-pointer-events-none univer-blur-sm" : "",
@@ -27018,7 +26882,7 @@ const PermissionDetailUserPart = (props) => {
 									src: (_item$subject2 = item.subject) === null || _item$subject2 === void 0 ? void 0 : _item$subject2.avatar
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "univer-ml-1.5 univer-w-[130px] univer-truncate univer-text-gray-900 dark:!univer-text-white",
+									className: "univer-ml-1.5 univer-w-[130px] univer-truncate univer-text-gray-900 dark:!univer-text-gray-0",
 									children: (_item$subject3 = item.subject) === null || _item$subject3 === void 0 ? void 0 : _item$subject3.name
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
@@ -27385,11 +27249,11 @@ function SheetPermissionPanelListContent() {
 										}) })
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "univer-h-4 univer-flex-grow univer-text-xs univer-text-gray-900 dark:!univer-text-white",
+										className: "univer-h-4 univer-flex-grow univer-text-xs univer-text-gray-900 dark:!univer-text-gray-0",
 										children: localeService.t("sheets-ui.permission.panel.created")
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "univer-h-4 univer-text-xs univer-text-gray-900 dark:!univer-text-white",
+										className: "univer-h-4 univer-text-xs univer-text-gray-900 dark:!univer-text-gray-0",
 										children: editPermission ? `${localeService.t("sheets-ui.permission.panel.iCanEdit")}` : `${localeService.t("sheets-ui.permission.panel.iCanNotEdit")}`
 									})
 								]
@@ -27397,10 +27261,10 @@ function SheetPermissionPanelListContent() {
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "univer-mt-2 univer-flex univer-items-center",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "univer-h-4 univer-flex-grow univer-text-xs univer-text-gray-900 dark:!univer-text-white",
+									className: "univer-h-4 univer-flex-grow univer-text-xs univer-text-gray-900 dark:!univer-text-gray-0",
 									children: localeService.t("sheets-ui.permission.panel.viewPermission")
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "univer-h-4 univer-text-xs univer-text-gray-900 dark:!univer-text-white",
+									className: "univer-h-4 univer-text-xs univer-text-gray-900 dark:!univer-text-gray-0",
 									children: viewPermission ? `${localeService.t("sheets-ui.permission.panel.iCanView")}` : `${localeService.t("sheets-ui.permission.panel.iCanNotView")}`
 								})]
 							}),
@@ -27842,7 +27706,7 @@ const formulaEditorStyle = {
 	}
 };
 let EditorDataSyncController = class EditorDataSyncController extends _univerjs_core.Disposable {
-	constructor(_univerInstanceService, _renderManagerService, _editorBridgeService, _commandService, _rangeProtectionRuleModel, _worksheetProtectionRuleModel, _formulaEditorController, _formulaEditorManagerService, _contextService) {
+	constructor(_univerInstanceService, _renderManagerService, _editorBridgeService, _commandService, _rangeProtectionRuleModel, _worksheetProtectionRuleModel, _formulaEditorController, _formulaEditorManagerService, _contextService, _themeService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
 		this._renderManagerService = _renderManagerService;
@@ -27853,12 +27717,14 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		this._formulaEditorController = _formulaEditorController;
 		this._formulaEditorManagerService = _formulaEditorManagerService;
 		this._contextService = _contextService;
+		this._themeService = _themeService;
 		this._initialize();
 	}
 	_initialize() {
 		this._syncFormulaEditorContent();
 		this._commandExecutedListener();
 		this._syncFormulaRefRenderStyleOnFocusChange();
+		this._syncFormulaBarTextColorOnThemeChange();
 	}
 	_getEditorViewModel(unitId) {
 		var _this$_renderManagerS;
@@ -27982,6 +27848,11 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 			this._refreshRenderStyleConfig(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
 		}));
 	}
+	_syncFormulaBarTextColorOnThemeChange() {
+		this.disposeWithMe(this._themeService.currentTheme$.pipe((0, rxjs.skip)(1)).subscribe(() => {
+			this._refreshRenderStyleConfig(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		}));
+	}
 	_refreshRenderStyleConfig(unitId) {
 		var _currentRender$mainCo3;
 		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
@@ -28000,7 +27871,10 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		const snapshot = documentDataModel.getSnapshot();
 		if (snapshot.id !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY && snapshot.id !== _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
 		const isFormulaBar = snapshot.id === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY;
-		if (isFormulaBar) snapshot.documentStyle = formulaEditorStyle;
+		if (isFormulaBar) snapshot.documentStyle = {
+			...formulaEditorStyle,
+			textStyle: { cl: { rgb: this._themeService.getColorFromTheme("gray.900") } }
+		};
 		else snapshot.documentStyle ??= {};
 		let renderConfig = snapshot.documentStyle.renderConfig;
 		if (renderConfig == null) {
@@ -28037,84 +27911,97 @@ EditorDataSyncController = __decorate([
 	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.WorksheetProtectionRuleModel)),
 	__decorateParam(6, (0, _univerjs_core.Inject)(FormulaEditorController)),
 	__decorateParam(7, IFormulaEditorManagerService),
-	__decorateParam(8, _univerjs_core.IContextService)
+	__decorateParam(8, _univerjs_core.IContextService),
+	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
 ], EditorDataSyncController);
 //#endregion
 //#region src/controllers/force-string-alert-render.controller.ts
 const ALERT_KEY = "SHEET_FORCE_STRING_ALERT";
 let ForceStringAlertRenderController = class ForceStringAlertRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _hoverManagerService, _cellAlertManagerService, _localeService, _configService) {
+	constructor(_context, _selectionManagerService, _cellAlertManagerService, _localeService, _configService, _commandService, _univerInstanceService) {
 		super();
 		this._context = _context;
-		this._hoverManagerService = _hoverManagerService;
+		this._selectionManagerService = _selectionManagerService;
 		this._cellAlertManagerService = _cellAlertManagerService;
 		this._localeService = _localeService;
 		this._configService = _configService;
+		this._commandService = _commandService;
+		this._univerInstanceService = _univerInstanceService;
 		this._init();
 	}
 	_init() {
 		this._initCellAlertPopup();
 	}
 	_initCellAlertPopup() {
-		this.disposeWithMe(this._hoverManagerService.currentCell$.subscribe((cellPos) => {
-			if (cellPos) {
-				const location = cellPos.location;
-				const workbook = this._context.unit;
-				const worksheet = workbook.getActiveSheet();
-				if (!worksheet) return this._hideAlert();
-				const cellData = worksheet.getCell(location.row, location.col);
-				if (!cellData || cellData.v === null || cellData.v === void 0) return this._hideAlert();
-				let numfmtValue;
-				if (cellData === null || cellData === void 0 ? void 0 : cellData.s) {
-					const style = workbook.getStyles().get(cellData.s);
-					if (style === null || style === void 0 ? void 0 : style.n) numfmtValue = style.n;
-				}
-				if ((0, _univerjs_core.isTextFormat)(numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern)) {
-					this._hideAlert();
-					return;
-				}
-				/**
-				* If the cell type is string or force string, and the value is a pure number or a string that can be converted to a number, show the force string alert.
-				* '123 -> yes
-				* '20% -> yes
-				* '1,234.56 -> yes
-				* 'abc -> no
-				* '2025-09-17 -> no
-				*/
-				if ((cellData.t === _univerjs_core.CellValueType.FORCE_STRING || cellData.t === _univerjs_core.CellValueType.STRING) && ((0, _univerjs_core.isRealNum)(cellData.v) || typeof cellData.v === "string" && (0, _univerjs_core.getNumfmtParseValueFilter)(cellData.v))) {
-					var _this$_configService$, _currentAlert$alert;
-					if ((_this$_configService$ = this._configService.getConfig("sheets-ui.config")) === null || _this$_configService$ === void 0 ? void 0 : _this$_configService$.disableForceStringAlert) return;
-					const currentAlert = this._cellAlertManagerService.currentAlert.get(ALERT_KEY);
-					const currentLoc = currentAlert === null || currentAlert === void 0 || (_currentAlert$alert = currentAlert.alert) === null || _currentAlert$alert === void 0 ? void 0 : _currentAlert$alert.location;
-					if (currentLoc && currentLoc.row === cellPos.location.row && currentLoc.col === cellPos.location.col && currentLoc.subUnitId === cellPos.location.subUnitId && currentLoc.unitId === cellPos.location.unitId) {
-						this._hideAlert();
-						return;
-					}
-					this._cellAlertManagerService.showAlert({
-						type: 2,
-						title: this._localeService.t("sheets-ui.info.error"),
-						message: this._localeService.t("sheets-ui.info.forceStringInfo"),
-						location,
-						width: 200,
-						height: 74,
-						key: ALERT_KEY
-					});
-					return;
+		this.disposeWithMe(this._selectionManagerService.selectionChanged$.subscribe((selections) => this._updateAlert(selections)));
+		this.disposeWithMe(this._context.unit.activeSheet$.subscribe(() => this._updateAlert(this._selectionManagerService.getCurrentSelections())));
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).subscribe(() => this._updateAlert(this._selectionManagerService.getCurrentSelections())));
+	}
+	_isCurrentSheet(worksheet) {
+		const selectionParam = this._selectionManagerService.currentSelectionParam;
+		return Boolean(worksheet && (selectionParam === null || selectionParam === void 0 ? void 0 : selectionParam.unitId) === this._context.unit.getUnitId() && selectionParam.sheetId === worksheet.getSheetId());
+	}
+	_updateAlert(selections) {
+		var _this$_configService$, _cellStyle$n;
+		this._hideAlert();
+		const workbook = this._context.unit;
+		const worksheet = workbook.getActiveSheet();
+		if (!this._isCurrentSheet(worksheet)) return;
+		if ((selections === null || selections === void 0 ? void 0 : selections.length) !== 1) return;
+		if ((_this$_configService$ = this._configService.getConfig("sheets-ui.config")) === null || _this$_configService$ === void 0 ? void 0 : _this$_configService$.disableForceStringAlert) return;
+		const selection = selections[0];
+		const primary = selection.primary;
+		if (!primary) return;
+		const row = primary.actualRow;
+		const col = primary.actualColumn;
+		const cellData = worksheet.getCell(row, col);
+		if (!cellData || cellData.v === null || cellData.v === void 0) return;
+		const cellStyle = workbook.getStyles().get(cellData.s);
+		if ((0, _univerjs_core.isTextFormat)(cellStyle === null || cellStyle === void 0 || (_cellStyle$n = cellStyle.n) === null || _cellStyle$n === void 0 ? void 0 : _cellStyle$n.pattern)) return;
+		if (cellData.t !== _univerjs_core.CellValueType.FORCE_STRING && cellData.t !== _univerjs_core.CellValueType.STRING || !(0, _univerjs_core.isRealNum)(cellData.v) && !(typeof cellData.v === "string" && (0, _univerjs_core.getNumfmtParseValueFilter)(cellData.v))) return;
+		const unitId = workbook.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const range = { ...selection.range };
+		this._cellAlertManagerService.showAlert({
+			type: 1,
+			title: this._localeService.t("sheets-ui.info.error"),
+			message: this._localeService.t("sheets-ui.info.forceStringInfo"),
+			location: {
+				unitId,
+				subUnitId,
+				row,
+				col
+			},
+			width: 200,
+			height: 74,
+			key: this._alertKey,
+			menu: [{
+				label: this._localeService.t("sheets-ui.info.convertToNumber"),
+				onSelect: () => {
+					if (this._commandService.syncExecuteCommand(_univerjs_sheets.TextToNumberCommand.id, {
+						unitId,
+						subUnitId,
+						ranges: [range]
+					})) this._hideAlert();
 				}
-			}
-			this._hideAlert();
-		}));
+			}]
+		});
+	}
+	get _alertKey() {
+		return `${ALERT_KEY}:${this._context.unit.getUnitId()}`;
 	}
 	_hideAlert() {
-		this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		this._cellAlertManagerService.removeAlert(this._alertKey);
 	}
 };
 ForceStringAlertRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(HoverManagerService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(CellAlertManagerService)),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(4, _univerjs_core.IConfigService)
+	__decorateParam(4, _univerjs_core.IConfigService),
+	__decorateParam(5, _univerjs_core.ICommandService),
+	__decorateParam(6, _univerjs_core.IUniverInstanceService)
 ], ForceStringAlertRenderController);
 //#endregion
@@ -28544,7 +28431,7 @@ function MobileSheetBarImpl(props) {
 					tabMapRef.current.set(sheet.sheetId, element);
 				},
 				className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-flex univer-h-full univer-max-w-36 univer-shrink-0 univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-truncate univer-px-1 univer-py-0.5 univer-text-sm univer-font-medium univer-leading-6 univer-transition-all", _univerjs_design.borderRightClassName, {
-					"univer-bg-white univer-text-blue-600 dark:!univer-bg-gray-700 dark:!univer-text-blue-400": sheet.sheetId === activeKey,
+					"univer-bg-gray-0 univer-text-blue-600 dark:!univer-bg-gray-700 dark:!univer-text-blue-400": sheet.sheetId === activeKey,
 					"univer-text-gray-600 hover:univer-bg-gray-50 active:univer-bg-gray-100 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700": sheet.sheetId !== activeKey
 				}),
 				role: "tab",
@@ -29360,7 +29247,7 @@ FormatPainterRenderController = __decorate([
 //#region src/controllers/render-controllers/header-menu.render-controller.ts
 const HEADER_MENU_CONTROLLER_SHAPE = "__SpreadsheetHeaderMenuSHAPEControllerShape__";
 const HEADER_MENU_CONTROLLER_MENU = "__SpreadsheetHeaderMenuMAINControllerShape__";
-const HEADER_MENU_CONTROLLER_SHAPE_COLOR = "rgba(0, 0, 0, 0.1)";
+const HEADER_MENU_CONTROLLER_SHAPE_COLOR = "gray.100";
 let HeaderMenuRenderController = class HeaderMenuRenderController extends _univerjs_core.Disposable {
 	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
 		super();
@@ -30838,6 +30725,36 @@ MobileSheetsScrollRenderController = __decorate([
 	__decorateParam(7, _univerjs_core.IContextService)
 ], MobileSheetsScrollRenderController);
+//#endregion
+//#region src/controllers/render-controllers/skeleton.render-controller.ts
+let SheetSkeletonRenderController = class SheetSkeletonRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _sheetSkeletonManagerService, _renderManagerService) {
+		super();
+		this._context = _context;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._renderManagerService = _renderManagerService;
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+			this._updateSceneSize(param);
+		}));
+	}
+	_updateSceneSize(param) {
+		var _this$_renderManagerS;
+		if (param == null) return;
+		const { unitId } = this._context;
+		const { skeleton } = param;
+		const scene = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.scene;
+		if (skeleton == null || scene == null) return;
+		const { rowTotalHeight, columnTotalWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
+		if (!this._context.unit.getActiveSheet()) return;
+		scene === null || scene === void 0 || scene.transformByState({
+			width: rowHeaderWidthAndMarginLeft + columnTotalWidth,
+			height: columnHeaderHeightAndMarginTop + rowTotalHeight
+		});
+		scene.getMainViewport().setMargin(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
+	}
+};
+SheetSkeletonRenderController = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)), __decorateParam(2, _univerjs_engine_render.IRenderManagerService)], SheetSkeletonRenderController);
 //#endregion
 //#region src/services/auto-height.service.ts
 const IAutoHeightService = (0, _univerjs_core.createIdentifier)("sheets-ui.services.auto-height");
@@ -31743,7 +31660,6 @@ let UniverSheetsMobileUIPlugin = class UniverSheetsMobileUIPlugin extends _unive
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -32361,7 +32277,6 @@ let UniverSheetsUIPlugin = class UniverSheetsUIPlugin extends _univerjs_core.Plu
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -32623,6 +32538,7 @@ exports.IFormatPainterService = IFormatPainterService;
 exports.IFormulaEditorManagerService = IFormulaEditorManagerService;
 exports.IMarkSelectionService = IMarkSelectionService;
 exports.IRepeatLastActionService = IRepeatLastActionService;
+exports.ISheetBarService = ISheetBarService;
 exports.ISheetCellDropdownManagerService = ISheetCellDropdownManagerService;
 exports.ISheetClipboardService = ISheetClipboardService;
 exports.ISheetEmbedFloatingGeometryService = ISheetEmbedFloatingGeometryService;
@@ -32630,7 +32546,6 @@ exports.ISheetEmbedInteractionBoundaryService = ISheetEmbedInteractionBoundarySe
 exports.ISheetEmbedRuntimeFocusCoordinator = ISheetEmbedRuntimeFocusCoordinator;
 exports.ISheetEmbedRuntimeService = ISheetEmbedRuntimeService;
 exports.ISheetHostChromeOverrideService = ISheetHostChromeOverrideService;
-exports.ISheetLoadingRenderService = ISheetLoadingRenderService;
 exports.ISheetSelectionRenderService = ISheetSelectionRenderService;
 exports.IStatusBarService = IStatusBarService;
 exports.InsertRangeMoveDownConfirmCommand = InsertRangeMoveDownConfirmCommand;
@@ -32708,6 +32623,7 @@ exports.SetWorksheetColAutoWidthCommand = SetWorksheetColAutoWidthCommand;
 exports.SetZoomRatioCommand = SetZoomRatioCommand;
 exports.SetZoomRatioOperation = SetZoomRatioOperation;
 exports.SheetBar = SheetBar;
+exports.SheetBarService = SheetBarService;
 Object.defineProperty(exports, 'SheetCanvasPopManagerService', {
   enumerable: true,
   get: function () {