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

package/lib/cjs/index.js

@@ -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,
@@ -3070,6 +3124,7 @@ var HtmlToUSMService = class HtmlToUSMService {
 			let value = numfmtMatch[1].trim();
 			if (value.startsWith("\"") && value.endsWith("\"")) value = value.slice(1, -1);
 			const decoded = decodeMsoNumberFormat(value);
+			if (!_univerjs_core.numfmt.isValidFormat(decoded)) continue;
 			selectors.split(",").forEach((sel) => {
 				this._msoNumfmtMap.set(sel.trim(), decoded);
 			});
@@ -4010,6 +4065,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 +4163,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 +4183,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 +7294,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 +7307,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 +7328,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 +7345,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 +7621,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 +7632,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;
@@ -8255,7 +8350,8 @@ let EditorBridgeService = class EditorBridgeService extends _univerjs_core.Dispo
 			sheetId,
 			documentLayoutObject,
 			editorUnitId: this._editorUnitId,
-			isInArrayFormulaRange: cell === null || cell === void 0 ? void 0 : cell.isInArrayFormulaRange
+			isInArrayFormulaRange: cell === null || cell === void 0 ? void 0 : cell.isInArrayFormulaRange,
+			isPercentFormat: cell === null || cell === void 0 ? void 0 : cell.isPercentFormat
 		};
 	}
 	_getWorkbookForEditUnit(unitId) {
@@ -9241,867 +9337,192 @@ 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);
-		}));
-	}
-	_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: "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());
+];
+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());
 	}
 	dispose() {
 		this._state$.complete();
@@ -10569,7 +9990,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,
@@ -10600,25 +10023,25 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends _u
 	_initialKeyboardListener(d) {
 		let disposable = null;
 		const addEvent = (render) => {
+			disposable === null || disposable === void 0 || disposable.dispose();
+			disposable = null;
 			const docSelectionRenderService = render.with(_univerjs_docs_ui.DocSelectionRenderService);
-			if (docSelectionRenderService) {
-				disposable = (0, _univerjs_core.toDisposable)(docSelectionRenderService.onInputBefore$.subscribe((config) => {
-					var _this$_embedRuntimeFo;
-					if (!this._isCurrentSheetFocused()) return;
-					const isFocusFormulaEditor = this._contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR);
-					const isFocusSheets = this._contextService.getContextValue(_univerjs_core.FOCUSING_SHEET) || ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.isChildUnitInActiveSession(this._context.unitId)) === true;
-					const unitId = render.unitId;
-					if (this._editorBridgeService.isVisible().visible) return;
-					if (unitId && isFocusSheets && !isFocusFormulaEditor) this._showEditorByKeyboard(config);
-				}));
-				d.add(disposable);
-			}
+			if (docSelectionRenderService) disposable = (0, _univerjs_core.toDisposable)(docSelectionRenderService.onInputBefore$.subscribe((config) => {
+				var _this$_embedRuntimeFo;
+				if (!this._isCurrentSheetFocused()) return;
+				const isFocusFormulaEditor = this._contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR);
+				const isFocusSheets = this._contextService.getContextValue(_univerjs_core.FOCUSING_SHEET) || ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.isChildUnitInActiveSession(this._context.unitId)) === true;
+				const unitId = render.unitId;
+				if (this._editorBridgeService.isVisible().visible) return;
+				if (unitId && isFocusSheets && !isFocusFormulaEditor) this._showEditorByKeyboard(config);
+			}));
 		};
 		const render = this._renderManagerService.getRenderUnitById(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
 		if (render) addEvent(render);
-		else this.disposeWithMe(this._renderManagerService.created$.pipe((0, rxjs.filter)((render) => render.unitId === _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY)).subscribe((render) => {
+		d.add(this._renderManagerService.created$.pipe((0, rxjs.filter)((render) => render.unitId === _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY)).subscribe(addEvent));
+		d.add((0, _univerjs_core.toDisposable)(() => {
 			disposable === null || disposable === void 0 || disposable.dispose();
-			addEvent(render);
+			disposable = null;
 		}));
 	}
 	_initSheetFocusListener(d) {
@@ -10665,9 +10088,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) {
@@ -11367,8 +10790,29 @@ const isRangeSelector = (unitId) => {
 //#endregion
 //#region src/controllers/editor/editing.render-controller.ts
 const HIDDEN_EDITOR_POSITION$1 = -1e3;
+function getPercentOffset(editCellState, dataStream) {
+	if (!editCellState.isPercentFormat || editCellState.isInArrayFormulaRange) return null;
+	const percentSuffix = `%${_univerjs_core.DEFAULT_EMPTY_DOCUMENT_VALUE}`;
+	return (dataStream === null || dataStream === void 0 ? void 0 : dataStream.endsWith(percentSuffix)) ? dataStream.length - percentSuffix.length : null;
+}
+function getPercentEditorSelection(editCellState, visibleParam, dataStream) {
+	const percentOffset = getPercentOffset(editCellState, dataStream);
+	if (percentOffset == null) return null;
+	const { eventType, initialValue, keycode } = visibleParam;
+	if (eventType === _univerjs_engine_render.DeviceInputEventType.Dblclick || eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard && keycode === _univerjs_ui.KeyCode.F2) return {
+		startOffset: percentOffset,
+		endOffset: percentOffset,
+		collapsed: true
+	};
+	if (eventType !== _univerjs_engine_render.DeviceInputEventType.Keyboard || keycode === _univerjs_ui.KeyCode.BACKSPACE || keycode === _univerjs_ui.KeyCode.DELETE || !/^\d/.test(initialValue ?? "")) return null;
+	return {
+		startOffset: 0,
+		endOffset: percentOffset,
+		collapsed: false
+	};
+}
 let EditingRenderController = class EditingRenderController extends _univerjs_core.Disposable {
-	constructor(_undoRedoService, _contextService, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _lexerTreeBuilder, _functionService, _textSelectionManagerService, _commandService, _localService, _editorService, _univerInstanceService, _sheetInterceptorService, _sheetCellEditorResizeService, _selectionManagerService, _configService) {
+	constructor(_undoRedoService, _contextService, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _lexerTreeBuilder, _functionService, _textSelectionManagerService, _commandService, _localService, _editorService, _univerInstanceService, _sheetInterceptorService, _sheetCellEditorResizeService, _selectionManagerService, _configService, _docStateChangeManagerService) {
 		super();
 		this._undoRedoService = _undoRedoService;
 		this._contextService = _contextService;
@@ -11386,6 +10830,7 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 		this._sheetCellEditorResizeService = _sheetCellEditorResizeService;
 		this._selectionManagerService = _selectionManagerService;
 		this._configService = _configService;
+		this._docStateChangeManagerService = _docStateChangeManagerService;
 		_defineProperty(this, "_cursorChange", 0);
 		_defineProperty(this, "_editingUnit", "");
 		_defineProperty(this, "_submitEmptyCellImageEdit", false);
@@ -11460,6 +10905,7 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 			const docSelectionRenderManager = (_this$_renderManagerS2 = this._renderManagerService.getRenderUnitById(docUnitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs_ui.DocSelectionRenderService);
 			if (!docSelectionRenderManager) return;
 			docSelectionRenderManager.sync();
+			this._cacheEmptyCellTextStyle();
 		}));
 	}
 	_initSkeletonListener(d) {
@@ -11540,6 +10986,30 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 	* Listen to document edits to refresh the size of the sheet editor, not for normal editor.
 	*/
 	_commandExecutedListener(d) {
+		d.add(this._commandService.beforeCommandExecuted((command) => {
+			var _this$_getDocumentDat;
+			if (command.id !== _univerjs_docs.InsertTextCommand.id) return;
+			const params = command.params;
+			const visibleParam = this._editorBridgeService.isVisible();
+			const editCellState = this._editorBridgeService.getEditLocation();
+			if (params.unitId !== _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY || !visibleParam.visible || editCellState == null) return;
+			const dataStream = (_this$_getDocumentDat = this._getDocumentDataModel()) === null || _this$_getDocumentDat === void 0 || (_this$_getDocumentDat = _this$_getDocumentDat.getBody()) === null || _this$_getDocumentDat === void 0 ? void 0 : _this$_getDocumentDat.dataStream;
+			if (dataStream == null) return;
+			const percentOffset = getPercentOffset(editCellState, dataStream);
+			if (percentOffset != null && !this._editorBridgeService.getEditorDirty() && visibleParam.eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard && /^\d/.test(visibleParam.initialValue ?? "") && /^\d/.test(params.body.dataStream)) {
+				params.range = {
+					startOffset: 0,
+					endOffset: percentOffset,
+					collapsed: false
+				};
+				return;
+			}
+			if (percentOffset != null && params.body.dataStream === "%" && params.range.collapsed && params.range.startOffset === percentOffset && params.range.endOffset === percentOffset) params.range = {
+				...params.range,
+				endOffset: percentOffset + 1,
+				collapsed: false
+			};
+		}));
 		d.add(this._commandService.onCommandExecuted((command) => {
 			if (command.id === _univerjs_docs.RichTextEditingMutation.id) {
 				const { unitId: commandUnitId } = command.params;
@@ -11572,12 +11042,13 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 		}));
 	}
 	_handleEditorVisible(param) {
-		var _this$_sheetCellEdito4, _this$_renderManagerS5;
+		var _this$_sheetCellEdito4, _documentDataModel$ge, _this$_renderManagerS5;
 		const { eventType, keycode } = param;
 		this._cursorChange = eventType === _univerjs_engine_render.DeviceInputEventType.PointerDown || eventType === _univerjs_engine_render.DeviceInputEventType.Dblclick ? 2 : 1;
 		const editCellState = this._editorBridgeService.getEditLocation();
 		if (editCellState == null) return;
 		const { unitId, isInArrayFormulaRange = false } = editCellState;
+		this._clearEditorHistory();
 		this._commandService.syncExecuteCommand(ScrollToRangeOperation.id, {
 			unitId,
 			range: {
@@ -11617,35 +11088,51 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 				subUnitId: _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY
 			});
 		};
+		const replaceSelection = (selection) => {
+			this._textSelectionManagerService.replaceDocRanges([selection], {
+				unitId: _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+				subUnitId: _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY
+			});
+		};
+		const percentSelection = getPercentEditorSelection(editCellState, param, (_documentDataModel$ge = documentDataModel.getBody()) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.dataStream);
 		const cellImage = (0, _univerjs_sheets.isCellImage)(documentDataModel.getSnapshot());
 		this._submitEmptyCellImageEdit = cellImage && eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard && keycode === _univerjs_ui.KeyCode.BACKSPACE;
 		if (cellImage) clearAndEdit();
 		else if (eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard && keycode === _univerjs_ui.KeyCode.F2) {
-			var _documentDataModel$ge;
+			var _documentDataModel$ge2;
 			document.makeDirty();
 			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: 0,
 				endOffset: 0
 			}]);
-			const endOffset = (((_documentDataModel$ge = documentDataModel.getBody()) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.dataStream.length) ?? 2) - 2;
-			this._textSelectionManagerService.replaceDocRanges([{
+			const endOffset = (((_documentDataModel$ge2 = documentDataModel.getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.dataStream.length) ?? 2) - 2;
+			if (percentSelection) replaceSelection(percentSelection);
+			else this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: endOffset,
 				endOffset
 			}], {
 				unitId: _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
 				subUnitId: _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY
 			});
-		} else if (eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard || eventType === _univerjs_engine_render.DeviceInputEventType.Dblclick && isInArrayFormulaRange) clearAndEdit();
+		} else if (eventType === _univerjs_engine_render.DeviceInputEventType.Keyboard || eventType === _univerjs_engine_render.DeviceInputEventType.Dblclick && isInArrayFormulaRange) if (percentSelection) replaceSelection(percentSelection);
+		else clearAndEdit();
 		else if (eventType === _univerjs_engine_render.DeviceInputEventType.Dblclick) {
 			if (this._contextService.getContextValue(_univerjs_core.FOCUSING_EDITOR_INPUT_FORMULA)) return;
 			const cursor = documentDataModel.getBody().dataStream.length - 2 || 0;
-			this._textSelectionManagerService.replaceDocRanges([{
+			if (percentSelection) replaceSelection(percentSelection);
+			else this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: cursor,
 				endOffset: cursor
 			}]);
 		}
 		(_this$_renderManagerS5 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS5 === void 0 || _this$_renderManagerS5.scene.resetCursor();
 	}
+	_cacheEmptyCellTextStyle() {
+		var _this$_editorBridgeSe, _sourceBody$textRuns;
+		const sourceBody = (_this$_editorBridgeSe = this._editorBridgeService.getEditLocation()) === null || _this$_editorBridgeSe === void 0 || (_this$_editorBridgeSe = _this$_editorBridgeSe.documentLayoutObject.documentModel) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.getBody();
+		const textRun = (sourceBody === null || sourceBody === void 0 || (_sourceBody$textRuns = sourceBody.textRuns) === null || _sourceBody$textRuns === void 0 ? void 0 : _sourceBody$textRuns.length) === 1 ? sourceBody.textRuns[0] : null;
+		if ((sourceBody === null || sourceBody === void 0 ? void 0 : sourceBody.dataStream) === _univerjs_core.DEFAULT_EMPTY_DOCUMENT_VALUE && (textRun === null || textRun === void 0 ? void 0 : textRun.st) === 0 && textRun.ed === 0) this._commandService.syncExecuteCommand(_univerjs_docs_ui.SetDocInputStyleCommand.id, { style: _univerjs_core.Tools.deepClone(textRun.ts) });
+	}
 	_refreshCurrentSelections(sheetId) {
 		const selections = this._workbookSelections.getSelectionsOfWorksheet(sheetId);
 		if (selections) {
@@ -11769,8 +11256,13 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 			var _this$_getEditorSkele;
 			(_this$_getEditorSkele = this._getEditorSkeleton(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY)) === null || _this$_getEditorSkele === void 0 || _this$_getEditorSkele.resetInitialWidth();
 		}
-		this._undoRedoService.clearUndoRedo(editorUnitId);
+		this._clearEditorHistory();
+	}
+	_clearEditorHistory() {
+		this._undoRedoService.clearUndoRedo(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
 		this._undoRedoService.clearUndoRedo(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		this._docStateChangeManagerService.clearHistory(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+		this._docStateChangeManagerService.clearHistory(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
 	}
 	_moveSelection(keycode, currentUnitId, worksheetId) {
 		if (keycode == null || !MOVE_SELECTION_KEYCODE_LIST.includes(keycode)) {
@@ -11874,7 +11366,8 @@ EditingRenderController = __decorate([
 	__decorateParam(12, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
 	__decorateParam(13, (0, _univerjs_core.Inject)(SheetCellEditorResizeService)),
 	__decorateParam(14, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
-	__decorateParam(15, _univerjs_core.IConfigService)
+	__decorateParam(15, _univerjs_core.IConfigService),
+	__decorateParam(16, (0, _univerjs_core.Inject)(_univerjs_docs.DocStateChangeManagerService))
 ], EditingRenderController);
 function getCellDataByInput(cellData, snapshot, lexerTreeBuilder, localeService, functionService, styles) {
 	var _styles$get;
@@ -14003,7 +13496,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 +15247,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);
@@ -15777,309 +15270,701 @@ var HeaderMenuShape = class extends _univerjs_engine_render.Shape {
 		if (this._mode === 1) _univerjs_engine_render.Rect.drawWith(ctx, {
 			width: this._size,
 			height: this._size,
-			radius: this._size,
-			fill: HEADER_MENU_SHAPE_CIRCLE_FILL
+			radius: this._size,
+			fill: HEADER_MENU_SHAPE_CIRCLE_FILL
+		});
+		const iconSize = this._size * .5 * this._iconRatio;
+		const sixtyDegree = Math.PI / 180 * 60;
+		const left = iconSize * Math.sin(sixtyDegree);
+		const top = iconSize * Math.cos(sixtyDegree);
+		_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+			pointsGroup: [[
+				{
+					x: -left + this._size / 2,
+					y: -top + this._size / 2
+				},
+				{
+					x: left + this._size / 2,
+					y: -top + this._size / 2
+				},
+				{
+					x: this._size / 2,
+					y: iconSize + this._size / 2
+				}
+			]],
+			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+		});
+	}
+};
+
+//#endregion
+//#region src/views/header-unhide-shape.ts
+const UNHIDE_ICON_SIZE = 12;
+const UNHIDE_ARROW_RATIO = .4;
+var HeaderUnhideShape = class extends _univerjs_engine_render.Shape {
+	constructor(key, props, onClick) {
+		super(key, props);
+		_defineProperty(this, "_size", 12);
+		_defineProperty(this, "_iconRatio", UNHIDE_ARROW_RATIO);
+		_defineProperty(this, "_hovered", true);
+		_defineProperty(this, "_hasPrevious", true);
+		_defineProperty(this, "_hasNext", true);
+		_defineProperty(this, "_unhideType", void 0);
+		if (props) this.setShapeProps(props);
+		this.onPointerEnter$.subscribeEvent(() => this.setShapeProps({ hovered: true }));
+		this.onPointerLeave$.subscribeEvent(() => this.setShapeProps({ hovered: false }));
+		this.onPointerDown$.subscribeEvent(() => onClick === null || onClick === void 0 ? void 0 : onClick());
+	}
+	setShapeProps(props) {
+		if (props.type !== void 0) this._unhideType = props.type;
+		if (props.hovered !== void 0) this._hovered = props.hovered;
+		if (props.hasPrevious !== void 0) this._hasPrevious = props.hasPrevious;
+		if (props.hasNext !== void 0) this._hasNext = props.hasNext;
+		this.transformByState({
+			width: this._size * (this._unhideType === 1 ? 2 : 1),
+			height: this._size * (this._unhideType === 0 ? 2 : 1)
+		});
+	}
+	_draw(ctx) {
+		if (this._unhideType === 0) this._drawOnRow(ctx);
+		else this._drawOnCol(ctx);
+	}
+	_drawOnRow(ctx) {
+		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		else _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: 2 * this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		const iconSize = this._size * .5 * this._iconRatio;
+		const sixtyDegree = Math.PI / 3;
+		const top = iconSize * Math.cos(sixtyDegree);
+		const left = iconSize * Math.sin(sixtyDegree);
+		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+			pointsGroup: [[
+				{
+					x: this._size / 2,
+					y: this._size / 2 - left
+				},
+				{
+					x: this._size / 2 - left,
+					y: this._size / 2 + top
+				},
+				{
+					x: this._size / 2 + left,
+					y: this._size / 2 + top
+				}
+			]],
+			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+		});
+		if (this._hasNext) {
+			const offset = this._hasPrevious ? 3 : 1;
+			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+				pointsGroup: [[
+					{
+						x: this._size / 2,
+						y: this._size * offset / 2 + left
+					},
+					{
+						x: this._size / 2 - left,
+						y: this._size * offset / 2 - top
+					},
+					{
+						x: this._size / 2 + left,
+						y: this._size * offset / 2 - top
+					}
+				]],
+				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+			});
+		}
+	}
+	/**
+	*
+	* @param ctx
+	*/
+	_drawOnCol(ctx) {
+		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		else _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: 2 * this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
 		});
 		const iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 180 * 60;
-		const left = iconSize * Math.sin(sixtyDegree);
+		const sixtyDegree = Math.PI / 3;
 		const top = iconSize * Math.cos(sixtyDegree);
-		_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+		const left = iconSize * Math.sin(sixtyDegree);
+		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
 			pointsGroup: [[
 				{
-					x: -left + this._size / 2,
-					y: -top + this._size / 2
+					x: -top + this._size / 2,
+					y: this._size / 2
 				},
 				{
-					x: left + this._size / 2,
-					y: -top + this._size / 2
+					x: this._size / 2 + left,
+					y: this._size / 2 - left
 				},
 				{
-					x: this._size / 2,
-					y: iconSize + this._size / 2
+					x: this._size / 2 + left,
+					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/views/header-unhide-shape.ts
-const UNHIDE_ICON_SIZE = 12;
-const UNHIDE_ARROW_RATIO = .4;
-var HeaderUnhideShape = class extends _univerjs_engine_render.Shape {
-	constructor(key, props, onClick) {
-		super(key, props);
-		_defineProperty(this, "_size", 12);
-		_defineProperty(this, "_iconRatio", UNHIDE_ARROW_RATIO);
-		_defineProperty(this, "_hovered", true);
-		_defineProperty(this, "_hasPrevious", true);
-		_defineProperty(this, "_hasNext", true);
-		_defineProperty(this, "_unhideType", void 0);
-		if (props) this.setShapeProps(props);
-		this.onPointerEnter$.subscribeEvent(() => this.setShapeProps({ hovered: true }));
-		this.onPointerLeave$.subscribeEvent(() => this.setShapeProps({ hovered: false }));
-		this.onPointerDown$.subscribeEvent(() => onClick === null || onClick === void 0 ? void 0 : onClick());
+//#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/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();
+	}
+	_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;
+			}
+		}));
 	}
-	setShapeProps(props) {
-		if (props.type !== void 0) this._unhideType = props.type;
-		if (props.hovered !== void 0) this._hovered = props.hovered;
-		if (props.hasPrevious !== void 0) this._hasPrevious = props.hasPrevious;
-		if (props.hasNext !== void 0) this._hasNext = props.hasNext;
-		this.transformByState({
-			width: this._size * (this._unhideType === 1 ? 2 : 1),
-			height: this._size * (this._unhideType === 0 ? 2 : 1)
+	/**
+	* 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);
 	}
-	_draw(ctx) {
-		if (this._unhideType === 0) this._drawOnRow(ctx);
-		else this._drawOnCol(ctx);
+	_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);
 	}
-	_drawOnRow(ctx) {
-		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+	_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
 		});
-		else _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: 2 * this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		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 iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 3;
-		const top = iconSize * Math.cos(sixtyDegree);
-		const left = iconSize * Math.sin(sixtyDegree);
-		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-			pointsGroup: [[
-				{
-					x: this._size / 2,
-					y: this._size / 2 - left
-				},
-				{
-					x: this._size / 2 - left,
-					y: this._size / 2 + top
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 + top
-				}
-			]],
-			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+		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
 		});
-		if (this._hasNext) {
-			const offset = this._hasPrevious ? 3 : 1;
-			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-				pointsGroup: [[
-					{
-						x: this._size / 2,
-						y: this._size * offset / 2 + left
-					},
-					{
-						x: this._size / 2 - left,
-						y: this._size * offset / 2 - top
-					},
-					{
-						x: this._size / 2 + left,
-						y: this._size * offset / 2 - top
-					}
-				]],
-				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-			});
-		}
-	}
-	/**
-	*
-	* @param ctx
-	*/
-	_drawOnCol(ctx) {
-		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		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
 		});
-		else _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: 2 * this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		const viewRowTop = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, scene, {
+			active: false,
+			isWheelPreventDefaultX: true
 		});
-		const iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 3;
-		const top = iconSize * Math.cos(sixtyDegree);
-		const left = iconSize * Math.sin(sixtyDegree);
-		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-			pointsGroup: [[
-				{
-					x: -top + this._size / 2,
-					y: this._size / 2
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 - left
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 + left
-				}
-			]],
-			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+		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
 		});
-		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: []
+		const viewColumnLeft = new _univerjs_engine_render.Viewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, scene, {
+			active: false,
+			isWheelPreventDefaultX: true
 		});
-		_defineProperty(this, "interceptor", new _univerjs_core.InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
-		this._init();
+		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
-		};
 	}
-	_clearShapes() {
-		this._shapes.cols.forEach((shape) => shape.dispose());
-		this._shapes.rows.forEach((shape) => shape.dispose());
-		this._shapes = {
-			cols: [],
-			rows: []
+	_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
 		};
 	}
-	_getSheetObject() {
-		return getSheetObject(this._workbook, this._context);
+	_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));
 	}
 };
-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 +17243,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 +17990,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 +20066,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 +20075,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 +20104,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 +20115,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 +20166,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 +20195,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 +20344,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 +20403,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 +20422,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 +20747,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 +20984,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 +21092,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 +21111,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 +21246,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 +21261,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 +21298,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 +21318,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 +21343,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 +21484,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 +21498,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 +22426,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 +22472,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 +22594,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 +22624,7 @@ function SheetBarTabs() {
 		setSheetList(sheetListItems);
 		setActiveSheetId(currentSubUnitId);
 	}, [
+		injector,
 		rangeProtectionRuleModel,
 		workbook,
 		worksheetProtectionRuleModel
@@ -23158,120 +23092,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,68 +23195,49 @@ 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 rootUnitType = useWorkbenchRootUnitType();
 	const activeEmbedTab = useActiveSheetEmbedTabData(workbook);
 	if (!workbook || !showFooter) return null;
 	if (activeWorkbookEmbeddedRender) return null;
-	if (!activeEmbedTab && focusedUnitType != null && focusedUnitType !== _univerjs_core.UniverInstanceType.UNIVER_SHEET) return null;
+	if (rootUnitType !== _univerjs_core.UniverInstanceType.UNIVER_SHEET) return null;
 	const footerMenus = menuManagerService.getMenuByPositionKey(_univerjs_ui.ContextMenuPosition.FOOTER_MENU);
 	const { sheetBar = true, statisticBar = true, menus = true, zoomSlider = true } = (config === null || config === void 0 ? void 0 : config.footer) || {};
 	const showStatisticBar = activeEmbedTab ? false : statisticBar;
 	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();
+	const rootUnitType = useWorkbenchRootUnitType();
 	const activeEmbedTab = useActiveSheetEmbedTabData(workbook);
 	if (!hasWorkbook) return null;
 	if (activeWorkbookEmbeddedRender) return null;
 	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",
-		"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 (rootUnitType !== _univerjs_core.UniverInstanceType.UNIVER_SHEET) return null;
+	if ((config === null || config === void 0 ? void 0 : config.formulaBar) !== false) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormulaBar, {});
 	return null;
 }
 /**
@@ -23352,18 +23245,16 @@ 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 rootWorkbenchOwnsSheet = useWorkbenchRootUnitType() === _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 +23263,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 +23279,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,26 +23310,45 @@ 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 useFocusedUnitType() {
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const focusedUnitId = (0, _univerjs_ui.useObservable)(() => univerInstanceService.focused$, null, false, [univerInstanceService]);
+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 (!focusedUnitId) return null;
-		if ((0, _univerjs_core.isInternalEditorID)(focusedUnitId) && univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET)) return _univerjs_core.UniverInstanceType.UNIVER_SHEET;
-		const focusedUnit = univerInstanceService.getUnit(focusedUnitId);
-		return (focusedUnit === null || focusedUnit === void 0 ? void 0 : focusedUnit.type) ?? null;
-	}, [focusedUnitId, univerInstanceService]);
+		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 useWorkbenchRootUnitType() {
+	return (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(_univerjs_ui.IWorkbenchService).rootUnitType$, null, true);
 }
 function useActiveSheetEmbedTabData(workbook) {
 	const worksheet = useActiveWorksheet(workbook);
@@ -24099,7 +23973,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.2";
 
 //#endregion
 //#region src/views/cell-popup/config.ts
@@ -24269,6 +24143,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 +24191,10 @@ 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 viewMain = currentRender.scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
@@ -24322,7 +24202,11 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends _u
 			connectorInjector: popupInjector,
 			anchorRect: position,
 			anchorRect$: position$,
-			canvasElement: currentRender.engine.getCanvasElement()
+			canvasElement,
+			boundaryInsets: popup.constrainToCanvas ? {
+				left: ((viewMain === null || viewMain === void 0 ? void 0 : viewMain.left) ?? skeleton.rowHeaderWidth * scaleX) * scaleAdjust,
+				top: ((viewMain === null || viewMain === void 0 ? void 0 : viewMain.top) ?? skeleton.columnHeaderHeight * scaleY) * scaleAdjust
+			} : popup.boundaryInsets
 		});
 		const disposableCollection = new _univerjs_core.DisposableCollection();
 		disposableCollection.add(disposable);
@@ -24735,6 +24619,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 +24679,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 +24707,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 +25440,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 +25456,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 +25500,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 +25521,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 +25563,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 +25639,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 +25784,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 +26020,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 +26127,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 +26180,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 +26220,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 +26241,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 +26254,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 +26335,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 +26943,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 +27310,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 +27322,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 +27767,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 +27778,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 +27909,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);
@@ -27996,11 +27928,15 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		if (unitId === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) this._formulaEditorController.autoScroll();
 	}
 	_checkAndSetRenderStyleConfig(documentDataModel) {
-		var _snapshot$body;
+		var _snapshot$documentSty, _snapshot$body;
 		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;
+		const previousPageWidth = (_snapshot$documentSty = snapshot.documentStyle) === null || _snapshot$documentSty === void 0 || (_snapshot$documentSty = _snapshot$documentSty.pageSize) === null || _snapshot$documentSty === void 0 ? void 0 : _snapshot$documentSty.width;
+		if (isFormulaBar) snapshot.documentStyle = {
+			...formulaEditorStyle,
+			textStyle: { cl: { rgb: this._themeService.getColorFromTheme("gray.900") } }
+		};
 		else snapshot.documentStyle ??= {};
 		let renderConfig = snapshot.documentStyle.renderConfig;
 		if (renderConfig == null) {
@@ -28009,8 +27945,8 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		}
 		const position = isFormulaBar ? this._formulaEditorManagerService.getPosition() : null;
 		if (isFormulaBar && position) {
-			const width = position.width;
-			snapshot.documentStyle.pageSize = {
+			const width = position.width > 0 ? position.width : previousPageWidth;
+			if (width != null && width > 0) snapshot.documentStyle.pageSize = {
 				width,
 				height: Infinity
 			};
@@ -28037,84 +27973,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 +28493,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,35 +29309,37 @@ 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_ALPHA = .1;
 let HeaderMenuRenderController = class HeaderMenuRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
+	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService, _themeService) {
 		super();
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._contextMenuService = _contextMenuService;
 		this._commandService = _commandService;
 		this._selectionManagerService = _selectionManagerService;
+		this._themeService = _themeService;
 		_defineProperty(this, "_hoverRect", void 0);
 		_defineProperty(this, "_hoverMenu", void 0);
 		_defineProperty(this, "_currentColumn", Number.POSITIVE_INFINITY);
-		_defineProperty(this, "_headerPointerSubs", void 0);
-		_defineProperty(this, "_colHeaderPointerSubs", void 0);
+		_defineProperty(this, "_headerPointerSubs", new rxjs.Subscription());
 		this._initialize();
 	}
 	dispose() {
-		var _this$_hoverRect, _this$_hoverMenu, _this$_headerPointerS;
+		var _this$_hoverRect, _this$_hoverMenu;
+		super.dispose();
 		(_this$_hoverRect = this._hoverRect) === null || _this$_hoverRect === void 0 || _this$_hoverRect.dispose();
 		(_this$_hoverMenu = this._hoverMenu) === null || _this$_hoverMenu === void 0 || _this$_hoverMenu.dispose();
-		(_this$_headerPointerS = this._headerPointerSubs) === null || _this$_headerPointerS === void 0 || _this$_headerPointerS.unsubscribe();
-		this._headerPointerSubs = null;
+		this._headerPointerSubs.unsubscribe();
 	}
 	_initialize() {
 		const scene = this._context.scene;
-		this._hoverRect = new _univerjs_engine_render.Rect(HEADER_MENU_CONTROLLER_SHAPE, {
-			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
-			evented: false
-		});
+		this._hoverRect = new _univerjs_engine_render.Rect(HEADER_MENU_CONTROLLER_SHAPE, { evented: false });
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => {
+			var _this$_hoverRect2;
+			const color = this._themeService.getColorFromTheme("gray.900");
+			(_this$_hoverRect2 = this._hoverRect) === null || _this$_hoverRect2 === void 0 || _this$_hoverRect2.setProps({ fill: new _univerjs_core.ColorKit(color).setAlpha(HEADER_MENU_CONTROLLER_SHAPE_ALPHA).toRgbString() });
+		}));
 		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
 			zIndex: 100,
 			visible: false
@@ -29399,7 +29350,6 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends _unive
 		this._initialHoverMenu();
 	}
 	_initialHover(initialType = 0) {
-		var _this$_headerPointerS2, _this$_headerPointerS3, _this$_headerPointerS4;
 		const spreadsheetColumnHeader = this._context.components.get("__SpreadsheetColumnHeader__");
 		const spreadsheetRowHeader = this._context.components.get("__SpreadsheetRowHeader__");
 		const eventBindingObject = initialType === 0 ? spreadsheetRowHeader : spreadsheetColumnHeader;
@@ -29410,17 +29360,17 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends _unive
 			const { rowBaseWidth, rowGutterWidth, columnBaseHeight, columnGutterHeight } = getHeaderBaseLayout(skeleton);
 			const { startX, startY, endX, endY, column } = getCoordByOffset(evt.offsetX, evt.offsetY, this._context.scene, skeleton);
 			if (initialType === 0) {
-				var _this$_hoverRect2;
-				(_this$_hoverRect2 = this._hoverRect) === null || _this$_hoverRect2 === void 0 || _this$_hoverRect2.transformByState({
+				var _this$_hoverRect3;
+				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
 					width: rowBaseWidth,
 					height: endY - startY,
 					left: rowGutterWidth,
 					top: startY
 				});
 			} else {
-				var _this$_hoverRect3;
+				var _this$_hoverRect4;
 				this._currentColumn = column;
-				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
+				(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.transformByState({
 					width: endX - startX,
 					height: columnBaseHeight,
 					left: startX,
@@ -29441,21 +29391,20 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends _unive
 			}
 		};
 		const pointerEnterHandler = () => {
-			var _this$_hoverRect4;
-			(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.show();
+			var _this$_hoverRect5;
+			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.show();
 		};
 		const pointerLeaveHandler = () => {
-			var _this$_hoverRect5, _this$_hoverMenu2;
-			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.hide();
+			var _this$_hoverRect6, _this$_hoverMenu2;
+			(_this$_hoverRect6 = this._hoverRect) === null || _this$_hoverRect6 === void 0 || _this$_hoverRect6.hide();
 			(_this$_hoverMenu2 = this._hoverMenu) === null || _this$_hoverMenu2 === void 0 || _this$_hoverMenu2.hide();
 		};
-		this._headerPointerSubs = new rxjs.Subscription();
 		const headerPointerMoveSub = eventBindingObject.onPointerMove$.subscribeEvent(pointerMoveHandler);
 		const headerPointerEnterSub = eventBindingObject.onPointerEnter$.subscribeEvent(pointerEnterHandler);
 		const headerPointerLeaveSub = eventBindingObject.onPointerLeave$.subscribeEvent(pointerLeaveHandler);
-		(_this$_headerPointerS2 = this._headerPointerSubs) === null || _this$_headerPointerS2 === void 0 || _this$_headerPointerS2.add(headerPointerMoveSub);
-		(_this$_headerPointerS3 = this._headerPointerSubs) === null || _this$_headerPointerS3 === void 0 || _this$_headerPointerS3.add(headerPointerEnterSub);
-		(_this$_headerPointerS4 = this._headerPointerSubs) === null || _this$_headerPointerS4 === void 0 || _this$_headerPointerS4.add(headerPointerLeaveSub);
+		this._headerPointerSubs.add(headerPointerMoveSub);
+		this._headerPointerSubs.add(headerPointerEnterSub);
+		this._headerPointerSubs.add(headerPointerLeaveSub);
 	}
 	_initialHoverMenu() {
 		if (this._hoverMenu == null) return;
@@ -29526,7 +29475,8 @@ HeaderMenuRenderController = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
 	__decorateParam(2, _univerjs_ui.IContextMenuService),
 	__decorateParam(3, _univerjs_core.ICommandService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService))
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
 ], HeaderMenuRenderController);
 function getHeaderBaseLayout(skeleton) {
 	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
@@ -30838,6 +30788,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 +31723,6 @@ let UniverSheetsMobileUIPlugin = class UniverSheetsMobileUIPlugin extends _unive
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -31878,6 +31857,7 @@ let SheetContextMenuRenderController = class SheetContextMenuRenderController ex
 		this._selectionRenderService = _selectionRenderService;
 		this._injector = _injector;
 		this._init();
+		this._initEmbedRuntimeSessionListener();
 	}
 	_init() {
 		var _this$_context;
@@ -31925,6 +31905,13 @@ let SheetContextMenuRenderController = class SheetContextMenuRenderController ex
 		});
 		this.disposeWithMe(colHeaderObserver);
 	}
+	_initEmbedRuntimeSessionListener() {
+		const runtimeFocusCoordinator = this._getSheetEmbedRuntimeFocusCoordinator();
+		if (!runtimeFocusCoordinator) return;
+		this.disposeWithMe(runtimeFocusCoordinator.runtimeSessionChanged$.subscribe(() => {
+			if (shouldHideSheetHostContextMenuForEmbedSession(this._context.unitId, runtimeFocusCoordinator.resolveActiveChildSessionRuntimeScope())) this._contextMenuService.hideContextMenu();
+		}));
+	}
 	_shouldSuppressHostContextMenu() {
 		var _this$_getSheetHostCh, _this$_getSheetHostCh2;
 		return shouldSuppressSheetContextMenuForEmbedOverride(this._context.unitId, (_this$_getSheetHostCh = this._getSheetHostChromeOverrideService()) === null || _this$_getSheetHostCh === void 0 || (_this$_getSheetHostCh2 = _this$_getSheetHostCh.getOverride) === null || _this$_getSheetHostCh2 === void 0 ? void 0 : _this$_getSheetHostCh2.call(_this$_getSheetHostCh));
@@ -31932,6 +31919,9 @@ let SheetContextMenuRenderController = class SheetContextMenuRenderController ex
 	_getSheetHostChromeOverrideService() {
 		return this._injector.has(ISheetHostChromeOverrideService) ? this._injector.get(ISheetHostChromeOverrideService) : void 0;
 	}
+	_getSheetEmbedRuntimeFocusCoordinator() {
+		return this._injector.has(ISheetEmbedRuntimeFocusCoordinator) ? this._injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
+	}
 };
 SheetContextMenuRenderController = __decorate([
 	__decorateParam(1, _univerjs_ui.IContextMenuService),
@@ -31939,6 +31929,9 @@ SheetContextMenuRenderController = __decorate([
 	__decorateParam(3, ISheetSelectionRenderService),
 	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
 ], SheetContextMenuRenderController);
+function shouldHideSheetHostContextMenuForEmbedSession(hostUnitId, activeScope) {
+	return (activeScope === null || activeScope === void 0 ? void 0 : activeScope.hostUnitId) === hostUnitId && activeScope.sessionMode !== "host-passive";
+}
 function shouldSuppressSheetContextMenuForEmbedOverride(hostUnitId, override) {
 	return override != null && override.hostUnitId === hostUnitId && override.entry === "sheets-sheet-tab";
 }
@@ -32361,7 +32354,6 @@ let UniverSheetsUIPlugin = class UniverSheetsUIPlugin extends _univerjs_core.Plu
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -32623,6 +32615,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 +32623,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 +32700,7 @@ exports.SetWorksheetColAutoWidthCommand = SetWorksheetColAutoWidthCommand;
 exports.SetZoomRatioCommand = SetZoomRatioCommand;
 exports.SetZoomRatioOperation = SetZoomRatioOperation;
 exports.SheetBar = SheetBar;
+exports.SheetBarService = SheetBarService;
 Object.defineProperty(exports, 'SheetCanvasPopManagerService', {
   enumerable: true,
   get: function () {