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

package/lib/index.js

@@ -1,17 +1,17 @@
-import { BreakLineCommand, CoverContentCommand, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_VIEW_KEY, DOC_VERTICAL_PADDING, DeleteLeftCommand, DeleteRightCommand, DocSelectionRenderService, IEditorService, IMEInputCommand, MoveCursorOperation, MoveSelectionOperation, NodePositionConvertToCursor, ReplaceSnapshotCommand, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand, UniverDocsUIPlugin, VIEWPORT_KEY, convertBodyToHtml, getCanvasOffsetByEngine, getLineBounding } from "@univerjs/docs-ui";
-import { AbsoluteRefType, BaselineOffset, BooleanNumber, BorderStyleTypes, CellModeEnum, CellValueType, ColorKit, CommandType, CustomRangeType, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DEFAULT_WORKSHEET_COLUMN_COUNT, DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT, DEFAULT_WORKSHEET_COLUMN_WIDTH, DEFAULT_WORKSHEET_COLUMN_WIDTH_KEY, DEFAULT_WORKSHEET_ROW_COUNT, DEFAULT_WORKSHEET_ROW_HEIGHT, DEFAULT_WORKSHEET_ROW_TITLE_WIDTH, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DataStreamTreeTokenType, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_INPUT_FORMULA, FOCUSING_EDITOR_STANDALONE, FOCUSING_FX_BAR_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_SHEET, FOCUSING_UNIVER_EDITOR, FontItalic, FontWeight, HorizontalAlign, IAuthzIoService, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, InterceptorManager, LRUMap, LocaleService, LocaleType, LookUp, NilCommand, ObjectMatrix, Optional, Plugin, PresetListType, Quantity, RANGE_TYPE, Range, Rectangle, RxDisposable, SHEET_EDITOR_UNITS, ThemeService, Tools, UndoCommandId, UniverInstanceType, UserManagerService, VerticalAlign, Workbook, WrapStrategy, cloneCellDataMatrix, cloneCellDataWithSpanAndDisplay, cloneValue, composeStyles, convertCellToRange, createDocumentModelWithStyle, createIdentifier, createInterceptorKey, createParagraphId, createSectionId, dateKit, debounce, extractPureTextFromCell, fromEventSubject, generateRandomId, get, getEmptyCell, getIntersectRange, getNumfmtParseValueFilter, getReverseDirection, handleStyleToString, isDefaultFormat, isFormulaString, isInternalEditorID, isNotNullOrUndefined, isRealNum, isSafeUrl, isTextFormat, isValidRange, merge, mergeOverrideWithDependencies, nameCharacterCheck, numberToABC, numfmt, registerDependencies, sequenceExecute, set, skipParseTagNames, sortRules, splitIntoGrid, throttle, toDisposable, touchDependencies, willLoseNumericPrecision } from "@univerjs/core";
+import { BreakLineCommand, CoverContentCommand, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_VIEW_KEY, DOC_VERTICAL_PADDING, DeleteLeftCommand, DeleteRightCommand, DocSelectionRenderService, IEditorService, IMEInputCommand, MoveCursorOperation, MoveSelectionOperation, NodePositionConvertToCursor, ReplaceSnapshotCommand, SetDocInputStyleCommand, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand, UniverDocsUIPlugin, VIEWPORT_KEY, convertBodyToHtml, getCanvasOffsetByEngine, getLineBounding } from "@univerjs/docs-ui";
+import { AbsoluteRefType, BaselineOffset, BooleanNumber, BorderStyleTypes, CellModeEnum, CellValueType, ColorKit, CommandType, CustomRangeType, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DEFAULT_WORKSHEET_COLUMN_COUNT, DEFAULT_WORKSHEET_COLUMN_WIDTH, DEFAULT_WORKSHEET_COLUMN_WIDTH_KEY, DEFAULT_WORKSHEET_ROW_COUNT, DEFAULT_WORKSHEET_ROW_HEIGHT, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DataStreamTreeTokenType, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_INPUT_FORMULA, FOCUSING_EDITOR_STANDALONE, FOCUSING_FX_BAR_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_SHEET, FOCUSING_UNIVER_EDITOR, FontItalic, FontWeight, HorizontalAlign, IAuthzIoService, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, InterceptorManager, LRUMap, LocaleService, LocaleType, LookUp, NilCommand, ObjectMatrix, Optional, Plugin, PresetListType, Quantity, RANGE_TYPE, Range, Rectangle, RxDisposable, SHEET_EDITOR_UNITS, ThemeService, Tools, UndoCommandId, UniverInstanceType, UserManagerService, VerticalAlign, Workbook, WrapStrategy, cloneCellDataMatrix, cloneCellDataWithSpanAndDisplay, cloneValue, composeStyles, convertCellToRange, createDocumentModelWithStyle, createIdentifier, createInterceptorKey, createParagraphId, createSectionId, dateKit, debounce, extractPureTextFromCell, fromEventSubject, generateRandomId, get, getEmptyCell, getIntersectRange, getNumfmtParseValueFilter, getReverseDirection, handleStyleToString, isDefaultFormat, isFormulaString, isNotNullOrUndefined, isRealNum, isSafeUrl, isTextFormat, isValidRange, merge, mergeOverrideWithDependencies, nameCharacterCheck, numberToABC, numfmt, registerDependencies, sequenceExecute, set, skipParseTagNames, sortRules, splitIntoGrid, throttle, toDisposable, touchDependencies, willLoseNumericPrecision } from "@univerjs/core";
 import { AUTO_FILL_APPLY_TYPE, AUTO_FILL_HOOK_TYPE, AddMergeUndoMutationFactory, AddRangeProtectionCommand, AddRangeProtectionMutation, AddWorksheetMergeAllCommand, AddWorksheetMergeCommand, AddWorksheetMergeHorizontalCommand, AddWorksheetMergeMutation, AddWorksheetMergeVerticalCommand, AddWorksheetProtectionCommand, AutoClearContentCommand, AutoFillCommand, AutoFillController, BEFORE_CELL_EDIT, BorderStyleManagerService, COMMAND_LISTENER_SKELETON_CHANGE, COMMAND_LISTENER_VALUE_CHANGE, CancelFrozenCommand, CancelMarkDirtyRowAutoHeightOperation, ClearSelectionAllCommand, ClearSelectionContentCommand, ClearSelectionFormatCommand, CopySheetCommand, DeleteRangeMoveLeftCommand, DeleteRangeMoveUpCommand, DeleteRangeProtectionCommand, DeleteRangeProtectionMutation, DeleteWorksheetProtectionCommand, DeltaColumnWidthCommand, DeltaRowHeightCommand, EditStateEnum, IAutoFillService, IExclusiveRangeService, INTERCEPTOR_POINT, INumfmtService, IRefSelectionsService, InsertColBeforeCommand, InsertColCommand, InsertColMutation, InsertDefinedNameCommand, InsertMultiColsLeftCommand, InsertMultiColsRightCommand, InsertMultiRowsAboveCommand, InsertMultiRowsAfterCommand, InsertRangeMoveDownCommand, InsertRangeMoveRightCommand, InsertRowBeforeCommand, InsertRowCommand, InsertRowMutation, InsertSheetCommand, InsertSheetMutation, MAX_CELL_PER_SHEET_KEY, MERGE_CELL_INTERCEPTOR_CHECK, MarkDirtyRowAutoHeightOperation, MergeCellController, MoveColsCommand, MoveColsMutation, MoveRangeCommand, MoveRangeMutation, MoveRowsCommand, MoveRowsMutation, REF_SELECTIONS_ENABLED, RangeProtectionCache, RangeProtectionPermissionEditPoint, RangeProtectionPermissionViewPoint, RangeProtectionRuleModel, RefRangeService, RefSelectionsService, RefillCommand, RemoveColCommand, RemoveColMutation, RemoveDefinedNameCommand, RemoveMergeUndoMutationFactory, RemoveRowCommand, RemoveRowMutation, RemoveSheetCommand, RemoveSheetMutation, RemoveWorksheetMergeCommand, RemoveWorksheetMergeMutation, ResetBackgroundColorCommand, ResetTextColorCommand, SCOPE_WORKBOOK_VALUE_DEFINED_NAME, SELECTIONS_ENABLED, SELECTION_CONTROL_BORDER_BUFFER_COLOR, SELECTION_CONTROL_BORDER_BUFFER_WIDTH, SHEETS_PLUGIN_CONFIG_KEY, ScrollToCellOperation, SelectionMoveType, SetBackgroundColorCommand, SetBoldCommand, SetBorderBasicCommand, SetBorderCommand, SetColHiddenCommand, SetColHiddenMutation, SetColVisibleMutation, SetColWidthCommand, SetDefinedNameCommand, SetFontFamilyCommand, SetFontSizeCommand, SetFrozenCommand, SetFrozenMutation, SetFrozenMutationFactory, SetHorizontalTextAlignCommand, SetItalicCommand, SetProtectionCommand, SetRangeValuesCommand, SetRangeValuesMutation, SetRangeValuesUndoMutationFactory, SetRowHeightCommand, SetRowHiddenCommand, SetRowHiddenMutation, SetRowVisibleMutation, SetSelectedColsVisibleCommand, SetSelectedRowsVisibleCommand, SetSelectionsOperation, SetShrinkToFitCommand, SetSpecificColsVisibleCommand, SetSpecificRowsVisibleCommand, SetStrikeThroughCommand, SetStyleCommand, SetTabColorCommand, SetTabColorMutation, SetTextColorCommand, SetTextRotationCommand, SetTextWrapCommand, SetUnderlineCommand, SetVerticalTextAlignCommand, SetWorksheetActivateCommand, SetWorksheetActiveOperation, SetWorksheetColWidthMutation, SetWorksheetColWidthMutationFactory, SetWorksheetHideCommand, SetWorksheetHideMutation, SetWorksheetNameCommand, SetWorksheetNameMutation, SetWorksheetOrderCommand, SetWorksheetOrderMutation, SetWorksheetPermissionPointsCommand, SetWorksheetRowAutoHeightMutation, SetWorksheetRowAutoHeightMutationFactory, SetWorksheetRowHeightMutation, SetWorksheetRowIsAutoHeightCommand, SetWorksheetRowIsAutoHeightMutation, SetWorksheetShowCommand, SheetCopyDownCommand, SheetCopyRightCommand, SheetInterceptorService, SheetPermissionCheckController, SheetPermissionInitController, SheetSkeletonService, SheetsSelectionsService, TextToNumberCommand, ToggleCellCheckboxCommand, ToggleGridlinesCommand, ToggleGridlinesMutation, UniverSheetsPlugin, ViewStateEnum, WorkbookCopyPermission, WorkbookCreateProtectPermission, WorkbookCreateSheetPermission, WorkbookDeleteColumnPermission, WorkbookDeleteRowPermission, WorkbookDeleteSheetPermission, WorkbookEditablePermission, WorkbookHideSheetPermission, WorkbookInsertColumnPermission, WorkbookInsertRowPermission, WorkbookManageCollaboratorPermission, WorkbookRenameSheetPermission, WorksheetCopyPermission, WorksheetDeleteColumnPermission, WorksheetDeleteProtectionPermission, WorksheetDeleteRowPermission, WorksheetEditPermission, WorksheetInsertColumnPermission, WorksheetInsertRowPermission, WorksheetManageCollaboratorPermission, WorksheetProtectionPointModel, WorksheetProtectionRuleModel, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission, WorksheetSetColumnStylePermission, WorksheetSetRowStylePermission, WorksheetViewPermission, adjustRangeOnMutation, alignToMergedCellsBorders, attachPrimaryWithCoord, attachRangeWithCoord, attachSelectionWithCoord, baseProtectionActions, convertPrimaryWithCoordToPrimary, convertSelectionDataToRange, countCells, defaultLargeSheetOperationConfig, deserializeListOptions, discreteRangeToRange, expandToContinuousRange, getAddMergeMutationRangeByType, getAllWorksheetPermissionPoint, getCellAtRowCol, getClearContentMutationParamsForRanges, getMoveRangeCommandMutations, getPrimaryForRange, getSelectionsService, getSheetCommandTarget, isCellImage, rangeToDiscreteRange, serializeListOptions, setEndForRange, validateDefinedName } from "@univerjs/sheets";
-import { AnchoredContextMenu, BuiltInUIPart, COLOR_PICKER_COMPONENT, ComponentContainer, ComponentManager, ContextMenuGroup, ContextMenuPosition, CopyCommand, CutCommand, DISABLE_AUTO_FOCUS_KEY, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, IDialogService, ILayoutService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SheetPasteShortKeyCommandName, Slider, ToggleFullscreenOperation, ToolbarItem, UI_PLUGIN_CONFIG_KEY, UniverMobileUIPlugin, ZoomInput, connectInjector, getMenuHiddenObservable, handleStringToStyle, imageMimeTypeSet, sanitizeParsedHtml, textTrim, useComponentsOfPart, useConfigValue, useDependency, useEvent, useObservable, useSidebarClick, useVirtualList } from "@univerjs/ui";
-import { CURSOR_TYPE, DashedRect, DeviceInputEventType, Engine, FIX_ONE_PIXEL_BLUR_OFFSET, Group, IRenderManagerService, Layer, RENDER_CLASS_TYPE, RENDER_RAW_FORMULA_KEY, Rect, RegularPolygon, RenderUnit, SHEET_EXTENSION_PREFIX, SHEET_VIEWPORT_KEY, Scene, ScrollBar, ScrollTimer, ScrollTimerType, Shape, SheetExtension, Spreadsheet, SpreadsheetColumnHeader, SpreadsheetRowHeader, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, calculateCellImageRect, cancelRequestFrame, convertTextRotation, convertTransformToOffsetX, convertTransformToOffsetY, fixLineWidthByScale, getCurrentTypeOfRenderer, getNextWheelZoomRatio, ptToPixel, requestNewFrame, withCurrentTypeOfRenderer } from "@univerjs/engine-render";
-import { BehaviorSubject, EMPTY, Observable, Subject, Subscription, combineLatest, combineLatestWith, distinctUntilChanged, filter, firstValueFrom, from, fromEvent, map, merge as merge$1, of, shareReplay, skip, startWith, switchMap, take, takeUntil, throttleTime, timeout, withLatestFrom } from "rxjs";
-import { DocSelectionManagerService, DocSkeletonManagerService, InsertTextCommand, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin } from "@univerjs/docs";
+import { AnchoredContextMenu, BuiltInUIPart, COLOR_PICKER_COMPONENT, ComponentContainer, ComponentManager, ContextMenuGroup, ContextMenuPosition, CopyCommand, CutCommand, DISABLE_AUTO_FOCUS_KEY, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, IDialogService, ILayoutService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IShortcutService, ISidebarService, IUIPartsService, IWorkbenchService, IconManager, KeyCode, MenuItemType, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SheetPasteShortKeyCommandName, Slider, ToggleFullscreenOperation, ToolbarItem, UI_PLUGIN_CONFIG_KEY, UniverMobileUIPlugin, ZoomInput, connectInjector, getMenuHiddenObservable, handleStringToStyle, imageMimeTypeSet, sanitizeParsedHtml, textTrim, useComponentsOfPart, useConfigValue, useDependency, useEvent, useObservable, useSidebarClick, useVirtualList } from "@univerjs/ui";
+import { CURSOR_TYPE, DashedRect, DeviceInputEventType, FIX_ONE_PIXEL_BLUR_OFFSET, Group, IRenderManagerService, Layer, RENDER_CLASS_TYPE, RENDER_RAW_FORMULA_KEY, Rect, RegularPolygon, SHEET_EXTENSION_PREFIX, SHEET_VIEWPORT_KEY, ScrollBar, ScrollTimer, ScrollTimerType, Shape, SheetExtension, Spreadsheet, SpreadsheetColumnHeader, SpreadsheetRowHeader, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, calculateCellImageRect, cancelRequestFrame, convertTextRotation, convertTransformToOffsetX, convertTransformToOffsetY, fixLineWidthByScale, getCurrentTypeOfRenderer, getNextWheelZoomRatio, ptToPixel, requestNewFrame, withCurrentTypeOfRenderer } from "@univerjs/engine-render";
+import { BehaviorSubject, EMPTY, Observable, Subject, Subscription, combineLatest, combineLatestWith, distinctUntilChanged, filter, from, fromEvent, map, merge as merge$1, of, shareReplay, skip, startWith, switchMap, takeUntil, throttleTime, withLatestFrom } from "rxjs";
+import { DocSelectionManagerService, DocSkeletonManagerService, DocStateChangeManagerService, InsertTextCommand, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin } from "@univerjs/docs";
 import { ObjectScope, UnitAction, UnitObject, UnitRole } from "@univerjs/protocol";
 import { Avatar, Button, Calendar, CascaderList, ColorPicker, ConfigContext, Confirm, Dropdown, DropdownMenu, FormLayout, Input, InputNumber, MessageType, Radio, RadioGroup, Select, Separator, Switch, TimeInput, Tooltip, borderBottomClassName, borderClassName, borderRightClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { AddImageIcon, AdjustHeightDoubleIcon, AdjustWidthDoubleIcon, AlignBottomIcon, AlignTopIcon, AllBorderIcon, AutoHeightDoubleIcon, AutoWidthDoubleIcon, AutofillDoubleIcon, AutowrapIcon, BackSlashDoubleIcon, BoldIcon, BrushIcon, CancelFreezeIcon, CancelMergeIcon, CheckMarkIcon, ClearFormatDoubleIcon, CloseIcon, CodeIcon, ConvertIcon, ConvertToNumberIcon, CopyDoubleIcon, CutIcon, DeleteCellShiftLeftDoubleIcon, DeleteCellShiftUpDoubleIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DownBorderDoubleIcon, DownIcon, DownloadImageIcon, ErrorIcon, EyeIcon, EyelashIcon, FontColorDoubleIcon, FontSizeIncreaseIcon, FontSizeReduceIcon, FreezeColumnIcon, FreezeRowIcon, FreezeToSelectedIcon, FxIcon, HideDoubleIcon, HideGridlinesIcon, HorizontalBorderDoubleIcon, HorizontalMergeIcon, HorizontallyIcon, IncreaseIcon, InfoIcon, InnerBorderDoubleIcon, InsertCellDownDoubleIcon, InsertCellShiftRightDoubleIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, LeftBorderDoubleIcon, LeftDoubleDiagonalDoubleIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LeftRotationFortyFiveDegreesIcon, LeftRotationNinetyDegreesIcon, LeftTridiagonalDoubleIcon, LoadingMultiIcon, LockIcon, MergeAllIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, NoBorderIcon, NoColorDoubleIcon, NoRotationIcon, OuterBorderDoubleIcon, OverflowIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, PenIcon, ProtectIcon, ReduceDoubleIcon, RightBorderDoubleIcon, RightDoubleDiagonalDoubleIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, RightRotationFortyFiveDegreesIcon, RightRotationNinetyDegreesIcon, ShrinkToFitIcon, SlashDoubleIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TruncationIcon, UnderlineIcon, UpBorderDoubleIcon, VerticalBorderDoubleIcon, VerticalCenterIcon, VerticalIntegrationIcon, VerticalTextIcon, WarningIcon, WriteIcon } from "@univerjs/icons";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { FUNCTION_NAMES_MATH, FUNCTION_NAMES_STATISTICAL, FUNCTION_NAMES_TEXT, FormulaDataModel, IDefinedNamesService, IFunctionService, ISuperTableService, LexerTreeBuilder, NullValueObject, SetFormulaCalculationNotificationMutation, UniverFormulaEnginePlugin, deserializeRangeWithSheet, isReferenceStringWithEffectiveColumn, isReferenceStrings, matchToken, operatorToken, sequenceNodeType, serializeRange, serializeRangeWithSheet } from "@univerjs/engine-formula";
-import { ITelemetryService } from "@univerjs/telemetry";
+import { AddImageIcon, AdjustHeightDoubleIcon, AdjustWidthDoubleIcon, AlignBottomIcon, AlignTopIcon, AllBorderIcon, AutoHeightDoubleIcon, AutoWidthDoubleIcon, AutofillDoubleIcon, AutowrapIcon, BackSlashDoubleIcon, BasesMultiIcon, BoardsMultiIcon, BoldIcon, BrushIcon, CancelFreezeIcon, CancelMergeIcon, CheckMarkIcon, ClearFormatDoubleIcon, CloseIcon, CodeIcon, ConvertIcon, ConvertToNumberIcon, CopyDoubleIcon, CutIcon, DeleteCellShiftLeftDoubleIcon, DeleteCellShiftUpDoubleIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DocsMultiIcon, DownBorderDoubleIcon, DownIcon, DownloadImageIcon, ErrorIcon, EyeIcon, EyelashIcon, FontColorDoubleIcon, FontSizeIncreaseIcon, FontSizeReduceIcon, FreezeColumnIcon, FreezeRowIcon, FreezeToSelectedIcon, FxIcon, HideDoubleIcon, HideGridlinesIcon, HorizontalBorderDoubleIcon, HorizontalMergeIcon, HorizontallyIcon, IncreaseIcon, InfoIcon, InnerBorderDoubleIcon, InsertCellDownDoubleIcon, InsertCellShiftRightDoubleIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, LeftBorderDoubleIcon, LeftDoubleDiagonalDoubleIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LeftRotationFortyFiveDegreesIcon, LeftRotationNinetyDegreesIcon, LeftTridiagonalDoubleIcon, LockIcon, MergeAllIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, NoBorderIcon, NoColorDoubleIcon, NoRotationIcon, OuterBorderDoubleIcon, OverflowIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, PenIcon, ProtectIcon, ReduceDoubleIcon, RightBorderDoubleIcon, RightDoubleDiagonalDoubleIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, RightRotationFortyFiveDegreesIcon, RightRotationNinetyDegreesIcon, SheetsMultiIcon, ShrinkToFitIcon, SlashDoubleIcon, SlidesMultiIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TruncationIcon, UnderlineIcon, UpBorderDoubleIcon, VerticalBorderDoubleIcon, VerticalCenterIcon, VerticalIntegrationIcon, VerticalTextIcon, WarningIcon, WriteIcon } from "@univerjs/icons";
+import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FUNCTION_NAMES_MATH, FUNCTION_NAMES_STATISTICAL, FUNCTION_NAMES_TEXT, FormulaDataModel, IDefinedNamesService, IFunctionService, ISuperTableService, LexerTreeBuilder, NullValueObject, SetFormulaCalculationNotificationMutation, UniverFormulaEnginePlugin, deserializeRangeWithSheet, isReferenceStringWithEffectiveColumn, isReferenceStrings, matchToken, operatorToken, quoteSheetName, sequenceNodeType, serializeRange, serializeRangeWithSheet } from "@univerjs/engine-formula";
+import { ITelemetryService } from "@univerjs/telemetry";
 import { debounceTime, filter as filter$1, map as map$1, shareReplay as shareReplay$1, startWith as startWith$1, switchMap as switchMap$1 } from "rxjs/operators";
 
 //#region src/basics/editor/get-editor-object.ts
@@ -92,6 +92,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 = [];
@@ -115,7 +149,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;
+		}
 	};
 }
 
@@ -130,7 +184,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 ColorKit(primaryColor).setAlpha(.07).toRgbString();
 	return {
 		strokeWidth: 1,
@@ -139,10 +193,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,
@@ -3069,6 +3123,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 (!numfmt.isValidFormat(decoded)) continue;
 			selectors.split(",").forEach((sel) => {
 				this._msoNumfmtMap.set(sel.trim(), decoded);
 			});
@@ -4009,6 +4064,10 @@ const IMAGE_MIME_TO_EXTENSION = {
 	[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.
 */
@@ -4103,7 +4162,7 @@ let SheetClipboardService = class SheetClipboardService extends Disposable {
 			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({
@@ -4123,7 +4182,9 @@ let SheetClipboardService = class SheetClipboardService extends Disposable {
 		const imageIndex = types.findIndex((type) => 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")
@@ -7232,6 +7293,9 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 		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();
@@ -7242,6 +7306,12 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 		if (!scene) return;
 		const viewMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (!viewMain) return;
+		this.disposeWithMe(toDisposable(() => {
+			if (this._pendingWheelFrameId != null) {
+				cancelAnimationFrame(this._pendingWheelFrameId);
+				this._pendingWheelFrameId = null;
+			}
+		}));
 		this.disposeWithMe(scene.onMouseWheel$.subscribeEvent((evt, state) => {
 			if (evt.ctrlKey || !this._contextService.getContextValue(FOCUSING_SHEET)) return;
 			let offsetX = 0;
@@ -7257,14 +7327,15 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 				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();
@@ -7273,6 +7344,30 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 			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 === 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;
@@ -7525,8 +7620,8 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 		return 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(SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (viewport == null) return;
@@ -7536,10 +7631,10 @@ let SheetsScrollRenderController = class SheetsScrollRenderController extends Di
 		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(SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		if (viewport == null) return false;
@@ -8254,7 +8349,8 @@ let EditorBridgeService = class EditorBridgeService extends Disposable {
 			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) {
@@ -9240,867 +9336,192 @@ CellCustomRenderController = __decorate([
 ], CellCustomRenderController);
 
 //#endregion
-//#region src/controllers/render-controllers/sheet.render-controller.ts
-const FRAME_STACK_THRESHOLD = 60;
-let SheetRenderController = class SheetRenderController extends 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 Subject());
-		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
-		_defineProperty(this, "_renderFrameTimeMetric", null);
-		_defineProperty(this, "_renderFrameTags", {});
-		_defineProperty(this, "_afterRenderMetric$", new Subject());
-		this._addNewRender();
-		this._initRenderMetricSubscriber();
+//#region src/views/hook.ts
+function useActiveWorkbook() {
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	return useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []) ?? null;
+}
+function useActiveWorksheet(workbook) {
+	return useObservable(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? of(null), void 0, void 0, [workbook]);
+}
+function useWorkbooks() {
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	return useObservable(() => {
+		return merge$1([univerInstanceService.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_SHEET), univerInstanceService.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_SHEET)]).pipe(map(() => univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET)), startWith(univerInstanceService.getAllUnitsForType(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(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(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(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 Spreadsheet("__SpreadsheetRender__");
-		this._addViewport(worksheet);
-		const spreadsheetRowHeader = new SpreadsheetRowHeader("__SpreadsheetRowHeader__");
-		const spreadsheetColumnHeader = new SpreadsheetColumnHeader("__SpreadsheetColumnHeader__");
-		const SpreadsheetLeftTopPlaceholder = new 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 Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN, scene, {
-			left: rowHeaderWidth,
-			top: columnHeaderHeight,
-			bottom: 0,
-			right: 0,
-			isWheelPreventDefaultX: true,
-			allowCache: true,
-			bufferEdgeX,
-			bufferEdgeY
-		});
-		const viewMainLeftTop = new Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX: 0,
-			bufferEdgeY: 0
-		});
-		const viewMainLeft = new Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX: 0,
-			bufferEdgeY
-		});
-		const viewMainTop = new Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, scene, {
-			isWheelPreventDefaultX: true,
-			active: false,
-			allowCache: true,
-			bufferEdgeX,
-			bufferEdgeY: 0
-		});
-		const viewRowTop = new Viewport(SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, scene, {
-			active: false,
-			isWheelPreventDefaultX: true
-		});
-		const viewRowBottom = new Viewport(SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM, scene, {
-			left: 0,
-			top: columnHeaderHeight,
-			bottom: 0,
-			width: rowHeaderWidth + 1,
-			isWheelPreventDefaultX: true
-		});
-		const viewColumnLeft = new Viewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, scene, {
-			active: false,
-			isWheelPreventDefaultX: true
-		});
-		const viewColumnRight = new Viewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, scene, {
-			left: rowHeaderWidth,
-			top: 0,
-			height: columnHeaderHeight + 1,
-			right: 0,
-			isWheelPreventDefaultX: true
-		});
-		return {
-			viewMain,
-			viewLeftTop: new Viewport(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 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 (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 (COMMAND_LISTENER_VALUE_CHANGE.includes(commandId)) this._sheetSkeletonManagerService.reCalculate();
-			if (command.type === 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 === 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 === 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 === 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 (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, Inject(IConfigService)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, Inject(SheetsRenderService)),
-	__decorateParam(4, ICommandService),
-	__decorateParam(5, Optional(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 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, Inject(SheetSkeletonManagerService)), __decorateParam(2, 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 = createIdentifier("sheets-ui.sheet-loading-render.service");
-let SheetLoadingRenderService = class SheetLoadingRenderService extends Disposable {
-	constructor(_injector, _layoutService, _sheetInterceptorService, _renderManagerService) {
-		super();
-		this._injector = _injector;
-		this._layoutService = _layoutService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._renderManagerService = _renderManagerService;
-		_defineProperty(this, "workbook$", new BehaviorSubject(null));
-		_defineProperty(this, "loading$", new BehaviorSubject(false));
-		_defineProperty(this, "previewReady$", new 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(INTERCEPTOR_POINT.CELL_CONTENT, InterceptorEffectEnum.Value | InterceptorEffectEnum.Style);
-			new 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 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 firstValueFrom(this._getFinalRender$(sourceUnitId).pipe(take(1), switchMap((render) => this._waitForFinalCanvas(render).pipe(switchMap(() => {
-				this._hideFinalCanvas(render);
-				return this._requestFinalRender(render);
-			}))), 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(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(Engine, previewUnitId, void 0);
-		const scene = new Scene(`${PREVIEW_SCENE_PREFIX}${previewUnitId}`, engine, {
-			width,
-			height
-		});
-		scene.disableObjectsEvent();
-		const render = this._injector.createInstance(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 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 ? of(existingRender) : this._renderManagerService.created$.pipe(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(take(1), switchMap((render) => this._waitForFinalCanvas(render).pipe(map(() => render)))).subscribe((render) => this._hideFinalCanvas(render));
-	}
-	_requestFinalRender(render) {
-		render.scene.makeDirty(true);
-		return from(render.scene.requestRender()).pipe(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 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, Inject(Injector)),
-	__decorateParam(1, ILayoutService),
-	__decorateParam(2, Inject(SheetInterceptorService)),
-	__decorateParam(3, IRenderManagerService)
-], SheetLoadingRenderService);
-
-//#endregion
-//#region src/views/hook.ts
-const SheetLoadingWorkbookContext = createContext(null);
-function useActiveWorkbook() {
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const loadingWorkbook = useContext(SheetLoadingWorkbookContext);
-	const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
-	return loadingWorkbook ?? workbook ?? null;
-}
-function useSheetLoadingWorkbook() {
-	return useObservable(useDependency(ISheetLoadingRenderService).workbook$) ?? null;
-}
-function useSheetLoading() {
-	return useObservable(useDependency(ISheetLoadingRenderService).loading$) ?? false;
-}
-function useSheetLoadingPreviewReady() {
-	return useObservable(useDependency(ISheetLoadingRenderService).previewReady$) ?? false;
-}
-function useActiveWorksheet(workbook) {
-	return useObservable(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? of(null), void 0, void 0, [workbook]);
-}
-function useWorkbooks() {
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	return useObservable(() => {
-		return merge$1([univerInstanceService.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_SHEET), univerInstanceService.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_SHEET)]).pipe(map(() => univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET)), startWith(univerInstanceService.getAllUnitsForType(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 = useDependency(IUniverInstanceService);
-	const renderManagerService = useDependency(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 = convertTransformToOffsetX(endX, scaleX, scrollXY) ?? -9999;
-	const positionEndY = 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 = useDependency(ISheetClipboardService);
-	const showMenu = useObservable(clipboardService.showMenu$, false);
-	const pasteOptionsCache = useObservable(clipboardService.pasteOptionsCache$, null);
-	const localeService = useDependency(LocaleService);
-	const commandService = useDependency(ICommandService);
-	const [menuHovered, setMenuHovered] = useState(false);
-	const [visible, setVisible] = 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__ */ jsx("div", {
-		className: "univer-absolute univer-inset-0 univer-z-10 univer-size-0",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "univer-absolute",
-			style: {
-				left: relativePosition.positionX + DEFAULT_PADDING,
-				top: relativePosition.positionY + DEFAULT_PADDING
-			},
-			onMouseEnter: () => setMenuHovered(true),
-			onMouseLeave: () => setMenuHovered(false),
-			children: /* @__PURE__ */ jsx(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__ */ jsxs("div", {
-					className: 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", borderClassName, {
-						"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-						"univer-bg-white dark:!univer-bg-gray-900": !visible
-					}),
-					children: [/* @__PURE__ */ jsx(PasteSpecialDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(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,
-	SetRangeValuesCommand.id,
-	SetZoomRatioOperation.id,
-	MoveRangeMutation.id,
-	RemoveRowMutation.id,
-	RemoveColMutation.id,
-	InsertRowMutation.id,
-	InsertColMutation.id,
-	MoveRowsMutation.id,
-	MoveColsMutation.id,
-	SetWorksheetColWidthMutation.id,
-	SetWorksheetRowHeightMutation.id,
-	SetSelectionsOperation.id,
-	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 BehaviorSubject(null));
-		_defineProperty(this, "state$", this._state$.asObservable());
-		_defineProperty(this, "_rect$", new BehaviorSubject(null));
-		_defineProperty(this, "rect$", this._rect$.asObservable());
-		_defineProperty(this, "_focus", false);
-		_defineProperty(this, "_focus$", new BehaviorSubject(this._focus));
-		_defineProperty(this, "focus$", this._focus$.asObservable());
+];
+const useMenuPosition = (range) => {
+	var _scene$getEngine;
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const renderManagerService = useDependency(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 = convertTransformToOffsetX(endX, scaleX, scrollXY) ?? -9999;
+	const positionEndY = 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 = useDependency(ISheetClipboardService);
+	const showMenu = useObservable(clipboardService.showMenu$, false);
+	const pasteOptionsCache = useObservable(clipboardService.pasteOptionsCache$, null);
+	const localeService = useDependency(LocaleService);
+	const commandService = useDependency(ICommandService);
+	const [menuHovered, setMenuHovered] = useState(false);
+	const [visible, setVisible] = 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__ */ jsx("div", {
+		className: "univer-absolute univer-inset-0 univer-z-10 univer-size-0",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "univer-absolute",
+			style: {
+				left: relativePosition.positionX + DEFAULT_PADDING,
+				top: relativePosition.positionY + DEFAULT_PADDING
+			},
+			onMouseEnter: () => setMenuHovered(true),
+			onMouseLeave: () => setMenuHovered(false),
+			children: /* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					className: 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", borderClassName, {
+						"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+						"univer-bg-gray-0 dark:!univer-bg-gray-900": !visible
+					}),
+					children: [/* @__PURE__ */ jsx(PasteSpecialDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ jsx(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,
+	SetRangeValuesCommand.id,
+	SetZoomRatioOperation.id,
+	MoveRangeMutation.id,
+	RemoveRowMutation.id,
+	RemoveColMutation.id,
+	InsertRowMutation.id,
+	InsertColMutation.id,
+	MoveRowsMutation.id,
+	MoveColsMutation.id,
+	SetWorksheetColWidthMutation.id,
+	SetWorksheetRowHeightMutation.id,
+	SetSelectionsOperation.id,
+	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 BehaviorSubject(null));
+		_defineProperty(this, "state$", this._state$.asObservable());
+		_defineProperty(this, "_rect$", new BehaviorSubject(null));
+		_defineProperty(this, "rect$", this._rect$.asObservable());
+		_defineProperty(this, "_focus", false);
+		_defineProperty(this, "_focus$", new BehaviorSubject(this._focus));
+		_defineProperty(this, "focus$", this._focus$.asObservable());
 	}
 	dispose() {
 		this._state$.complete();
@@ -10568,7 +9989,9 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends Rx
 		if (!sheetObject) return;
 		const { spreadsheet, spreadsheetColumnHeader, spreadsheetLeftTopPlaceholder, spreadsheetRowHeader } = sheetObject;
 		d.add(spreadsheet.onDblclick$.subscribeEvent((evt) => {
+			var _this$_editorBridgeSe;
 			if (evt.button === 2) return;
+			if (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: DeviceInputEventType.Dblclick,
@@ -10599,25 +10022,25 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends Rx
 	_initialKeyboardListener(d) {
 		let disposable = null;
 		const addEvent = (render) => {
+			disposable === null || disposable === void 0 || disposable.dispose();
+			disposable = null;
 			const docSelectionRenderService = render.with(DocSelectionRenderService);
-			if (docSelectionRenderService) {
-				disposable = toDisposable(docSelectionRenderService.onInputBefore$.subscribe((config) => {
-					var _this$_embedRuntimeFo;
-					if (!this._isCurrentSheetFocused()) return;
-					const isFocusFormulaEditor = this._contextService.getContextValue(FOCUSING_FX_BAR_EDITOR);
-					const isFocusSheets = this._contextService.getContextValue(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 = toDisposable(docSelectionRenderService.onInputBefore$.subscribe((config) => {
+				var _this$_embedRuntimeFo;
+				if (!this._isCurrentSheetFocused()) return;
+				const isFocusFormulaEditor = this._contextService.getContextValue(FOCUSING_FX_BAR_EDITOR);
+				const isFocusSheets = this._contextService.getContextValue(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(DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
 		if (render) addEvent(render);
-		else this.disposeWithMe(this._renderManagerService.created$.pipe(filter((render) => render.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY)).subscribe((render) => {
+		d.add(this._renderManagerService.created$.pipe(filter((render) => render.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY)).subscribe(addEvent));
+		d.add(toDisposable(() => {
 			disposable === null || disposable === void 0 || disposable.dispose();
-			addEvent(render);
+			disposable = null;
 		}));
 	}
 	_initSheetFocusListener(d) {
@@ -10664,9 +10087,9 @@ let EditorBridgeRenderController = class EditorBridgeRenderController extends Rx
 		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) {
@@ -11366,8 +10789,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 = `%${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 === DeviceInputEventType.Dblclick || eventType === DeviceInputEventType.Keyboard && keycode === KeyCode.F2) return {
+		startOffset: percentOffset,
+		endOffset: percentOffset,
+		collapsed: true
+	};
+	if (eventType !== DeviceInputEventType.Keyboard || keycode === KeyCode.BACKSPACE || keycode === KeyCode.DELETE || !/^\d/.test(initialValue ?? "")) return null;
+	return {
+		startOffset: 0,
+		endOffset: percentOffset,
+		collapsed: false
+	};
+}
 let EditingRenderController = class EditingRenderController extends 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;
@@ -11385,6 +10829,7 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 		this._sheetCellEditorResizeService = _sheetCellEditorResizeService;
 		this._selectionManagerService = _selectionManagerService;
 		this._configService = _configService;
+		this._docStateChangeManagerService = _docStateChangeManagerService;
 		_defineProperty(this, "_cursorChange", 0);
 		_defineProperty(this, "_editingUnit", "");
 		_defineProperty(this, "_submitEmptyCellImageEdit", false);
@@ -11459,6 +10904,7 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 			const docSelectionRenderManager = (_this$_renderManagerS2 = this._renderManagerService.getRenderUnitById(docUnitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSelectionRenderService);
 			if (!docSelectionRenderManager) return;
 			docSelectionRenderManager.sync();
+			this._cacheEmptyCellTextStyle();
 		}));
 	}
 	_initSkeletonListener(d) {
@@ -11539,6 +10985,30 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 	* 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 !== InsertTextCommand.id) return;
+			const params = command.params;
+			const visibleParam = this._editorBridgeService.isVisible();
+			const editCellState = this._editorBridgeService.getEditLocation();
+			if (params.unitId !== 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 === 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 === RichTextEditingMutation.id) {
 				const { unitId: commandUnitId } = command.params;
@@ -11571,12 +11041,13 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 		}));
 	}
 	_handleEditorVisible(param) {
-		var _this$_sheetCellEdito4, _this$_renderManagerS5;
+		var _this$_sheetCellEdito4, _documentDataModel$ge, _this$_renderManagerS5;
 		const { eventType, keycode } = param;
 		this._cursorChange = eventType === DeviceInputEventType.PointerDown || eventType === 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: {
@@ -11616,35 +11087,51 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 				subUnitId: DOCS_NORMAL_EDITOR_UNIT_ID_KEY
 			});
 		};
+		const replaceSelection = (selection) => {
+			this._textSelectionManagerService.replaceDocRanges([selection], {
+				unitId: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+				subUnitId: 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 = isCellImage(documentDataModel.getSnapshot());
 		this._submitEmptyCellImageEdit = cellImage && eventType === DeviceInputEventType.Keyboard && keycode === KeyCode.BACKSPACE;
 		if (cellImage) clearAndEdit();
 		else if (eventType === DeviceInputEventType.Keyboard && keycode === 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: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
 				subUnitId: DOCS_NORMAL_EDITOR_UNIT_ID_KEY
 			});
-		} else if (eventType === DeviceInputEventType.Keyboard || eventType === DeviceInputEventType.Dblclick && isInArrayFormulaRange) clearAndEdit();
+		} else if (eventType === DeviceInputEventType.Keyboard || eventType === DeviceInputEventType.Dblclick && isInArrayFormulaRange) if (percentSelection) replaceSelection(percentSelection);
+		else clearAndEdit();
 		else if (eventType === DeviceInputEventType.Dblclick) {
 			if (this._contextService.getContextValue(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) === DEFAULT_EMPTY_DOCUMENT_VALUE && (textRun === null || textRun === void 0 ? void 0 : textRun.st) === 0 && textRun.ed === 0) this._commandService.syncExecuteCommand(SetDocInputStyleCommand.id, { style: Tools.deepClone(textRun.ts) });
+	}
 	_refreshCurrentSelections(sheetId) {
 		const selections = this._workbookSelections.getSelectionsOfWorksheet(sheetId);
 		if (selections) {
@@ -11768,8 +11255,13 @@ let EditingRenderController = class EditingRenderController extends Disposable {
 			var _this$_getEditorSkele;
 			(_this$_getEditorSkele = this._getEditorSkeleton(DOCS_NORMAL_EDITOR_UNIT_ID_KEY)) === null || _this$_getEditorSkele === void 0 || _this$_getEditorSkele.resetInitialWidth();
 		}
-		this._undoRedoService.clearUndoRedo(editorUnitId);
+		this._clearEditorHistory();
+	}
+	_clearEditorHistory() {
+		this._undoRedoService.clearUndoRedo(DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
 		this._undoRedoService.clearUndoRedo(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		this._docStateChangeManagerService.clearHistory(DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+		this._docStateChangeManagerService.clearHistory(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
 	}
 	_moveSelection(keycode, currentUnitId, worksheetId) {
 		if (keycode == null || !MOVE_SELECTION_KEYCODE_LIST.includes(keycode)) {
@@ -11873,7 +11365,8 @@ EditingRenderController = __decorate([
 	__decorateParam(12, Inject(SheetInterceptorService)),
 	__decorateParam(13, Inject(SheetCellEditorResizeService)),
 	__decorateParam(14, Inject(SheetsSelectionsService)),
-	__decorateParam(15, IConfigService)
+	__decorateParam(15, IConfigService),
+	__decorateParam(16, Inject(DocStateChangeManagerService))
 ], EditingRenderController);
 function getCellDataByInput(cellData, snapshot, lexerTreeBuilder, localeService, functionService, styles) {
 	var _styles$get;
@@ -14002,7 +13495,7 @@ let SheetPermissionCheckUIController = class SheetPermissionCheckUIController ex
 					workbookTypes: [WorkbookEditablePermission],
 					worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission],
 					rangeTypes: [RangeProtectionPermissionEditPoint]
-				});
+				}, params.unitId);
 				errorMsg = this._localeService.t("sheets-ui.permission.dialog.editErr");
 				break;
 			case ApplyFormatPainterCommand.id:
@@ -15753,9 +15246,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 Shape {
 	constructor(key, props) {
 		super(key, props);
@@ -15776,309 +15269,701 @@ var HeaderMenuShape = class extends Shape {
 		if (this._mode === 1) 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);
+		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 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) Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		else 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) 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;
+			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) Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		else 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);
-		RegularPolygon.drawWith(ctx, {
+		const left = iconSize * Math.sin(sixtyDegree);
+		if (this._hasPrevious) 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;
+			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 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 = createInterceptorKey("headerUnhideRangeVisibleCheck");
+let HeaderUnhideRenderController = class HeaderUnhideRenderController extends 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 InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
+		this._init();
+	}
+	dispose() {
+		super.dispose();
+		this._clearShapes();
+	}
+	_init() {
+		let activeSheetId = "";
+		this._context.unit.activeSheet$.pipe(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(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(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, Inject(SheetSkeletonManagerService)),
+	__decorateParam(2, Inject(HeaderUnhideRangeService)),
+	__decorateParam(3, ICommandService)
+], HeaderUnhideRenderController);
+
+//#endregion
+//#region src/controllers/render-controllers/sheet.render-controller.ts
+const FRAME_STACK_THRESHOLD = 60;
+let SheetRenderController = class SheetRenderController extends 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 Subject());
+		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
+		_defineProperty(this, "_renderFrameTimeMetric", null);
+		_defineProperty(this, "_renderFrameTags", {});
+		_defineProperty(this, "_afterRenderMetric$", new 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(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(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(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 Spreadsheet("__SpreadsheetRender__");
+		this._addViewport(worksheet);
+		const spreadsheetRowHeader = new SpreadsheetRowHeader("__SpreadsheetRowHeader__");
+		const spreadsheetColumnHeader = new SpreadsheetColumnHeader("__SpreadsheetColumnHeader__");
+		const SpreadsheetLeftTopPlaceholder = new 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) 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 Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN, scene, {
+			left: rowHeaderWidth,
+			top: columnHeaderHeight,
+			bottom: 0,
+			right: 0,
+			isWheelPreventDefaultX: true,
+			allowCache: true,
+			bufferEdgeX,
+			bufferEdgeY
 		});
-		else Rect.drawWith(ctx, {
-			width: this._size,
-			height: 2 * this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		const viewMainLeftTop = new Viewport(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) 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 Viewport(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;
-			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) Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		const viewMainTop = new Viewport(SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, scene, {
+			isWheelPreventDefaultX: true,
+			active: false,
+			allowCache: true,
+			bufferEdgeX,
+			bufferEdgeY: 0
 		});
-		else Rect.drawWith(ctx, {
-			width: 2 * this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
+		const viewRowTop = new Viewport(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) 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 Viewport(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;
-			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 = createInterceptorKey("headerUnhideRangeVisibleCheck");
-let HeaderUnhideRenderController = class HeaderUnhideRenderController extends 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 Viewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, scene, {
+			active: false,
+			isWheelPreventDefaultX: true
 		});
-		_defineProperty(this, "interceptor", new InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
-		this._init();
+		const viewColumnRight = new Viewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, scene, {
+			left: rowHeaderWidth,
+			top: 0,
+			height: columnHeaderHeight + 1,
+			right: 0,
+			isWheelPreventDefaultX: true
+		});
+		return {
+			viewMain,
+			viewLeftTop: new Viewport(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 ScrollBar(viewMain, sheetsUIConfig === null || sheetsUIConfig === void 0 ? void 0 : sheetsUIConfig.scrollConfig);
+		scene.attachControl();
+		return viewMain;
 	}
-	_init() {
-		let activeSheetId = "";
-		this._context.unit.activeSheet$.pipe(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 (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 (COMMAND_LISTENER_VALUE_CHANGE.includes(commandId)) this._sheetSkeletonManagerService.reCalculate();
+			if (command.type === 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(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(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 === 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 === 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 === 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 (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, Inject(SheetSkeletonManagerService)),
-	__decorateParam(2, Inject(HeaderUnhideRangeService)),
-	__decorateParam(3, ICommandService)
-], HeaderUnhideRenderController);
+SheetRenderController = __decorate([
+	__decorateParam(1, Inject(IConfigService)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, Inject(SheetsRenderService)),
+	__decorateParam(4, ICommandService),
+	__decorateParam(5, Optional(ITelemetryService))
+], SheetRenderController);
+function getLeftTopPlaceholderSize(skeleton) {
+	return {
+		width: skeleton.rowHeaderWidthAndMarginLeft ?? skeleton.rowHeaderWidth,
+		height: skeleton.columnHeaderHeightAndMarginTop ?? skeleton.columnHeaderHeight
+	};
+}
 
 //#endregion
 //#region src/services/status-bar.service.ts
@@ -17357,6 +17242,7 @@ function ToggleGridlinesMenuFactory(accessor) {
 		type: MenuItemType.BUTTON,
 		tooltip: "sheets-ui.toolbar.toggleGridlines",
 		icon: "HideGridlinesIcon",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
 		activated$: new Observable((observer) => {
 			const getValue = () => {
 				const workbook = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
@@ -18103,7 +17989,7 @@ function TextColorSelectorMenuItemFactory(accessor) {
 				selectable: false
 			},
 			value$: new Observable((subscriber) => {
-				const defaultValue = 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);
@@ -20179,7 +20065,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
@@ -20188,10 +20074,6 @@ const ISheetEmbedRuntimeService = createIdentifier("sheet-ui.embed-runtime.servi
 
 //#endregion
 //#region src/views/auto-fill-popup-menu/AutoFillPopupMenu.tsx
-const useUpdate = () => {
-	const [, setState] = useState({});
-	return useCallback(() => setState((prevState) => !prevState), []);
-};
 function AutoFillPopupMenu() {
 	const commandService = useDependency(ICommandService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
@@ -20221,7 +20103,8 @@ function AutoFillPopupMenu() {
 		col: -1
 	}, false, [autoFillService]);
 	const selected = useObservable(autoFillService.applyType$, AUTO_FILL_APPLY_TYPE.SERIES);
-	const [isHovered, setHovered] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	const [, forceUpdate] = useReducer((version) => version + 1, 0);
 	const workbook = useActiveWorkbook();
 	const sheetSkeletonManagerService = useMemo(() => {
 		if (workbook) {
@@ -20231,14 +20114,13 @@ function AutoFillPopupMenu() {
 		return null;
 	}, [workbook, renderManagerService]);
 	const handleMouseEnter = () => {
-		setHovered(true);
+		setIsHovered(true);
 	};
 	const handleMouseLeave = () => {
-		setHovered(false);
+		setIsHovered(false);
 	};
-	const forceUpdate = useUpdate();
 	useEffect(() => {
-		return commandService.onCommandExecuted((command, options) => {
+		return commandService.onCommandExecuted((command) => {
 			if (command.id === SetScrollOperation.id) forceUpdate();
 		}).dispose;
 	}, [forceUpdate, commandService]);
@@ -20283,7 +20165,11 @@ function AutoFillPopupMenu() {
 	const showMore = visible || isHovered;
 	const availableMenu = menu.filter((item) => !item.disable);
 	return /* @__PURE__ */ 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__ */ jsx("div", {
 			className: "univer-absolute",
 			style: {
@@ -20308,9 +20194,9 @@ function AutoFillPopupMenu() {
 				children: /* @__PURE__ */ jsxs("div", {
 					className: 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", 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__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+					children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 				})
 			})
 		})
@@ -20457,7 +20343,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.
 */
@@ -20516,6 +20402,7 @@ function isEmbedRuntimeEditorOrPopup(target) {
 * @returns the rendered cell editor container.
 */
 function EditorContainer() {
+	var _workbook$getSheetByS;
 	const [state, setState] = useState({ ...EDITOR_DEFAULT_POSITION });
 	const cellEditorManagerService = useDependency(ICellEditorManagerService);
 	const injector = useDependency(Injector);
@@ -20534,9 +20421,12 @@ function EditorContainer() {
 	const disableAutoFocus = useObservable(() => contextService.subscribeContextValue$(DISABLE_AUTO_FOCUS_KEY), false, void 0, [contextService, DISABLE_AUTO_FOCUS_KEY]);
 	const FormulaEditor = componentManager.get(EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY);
 	const editState = useObservable(editorBridgeService.currentEditCellState$);
+	const workbook = editState ? instanceService.getUnit(editState.unitId, UniverInstanceType.UNIVER_SHEET) ?? null : null;
+	const activeSheet = useActiveWorksheet(workbook);
 	const darkMode = useObservable(themeService.darkMode$, themeService.darkMode);
 	const [showEditCellAddress, setShowEditCellAddress] = useState(false);
-	const editCellAddress = editState ? `${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 ? `'${quoteSheetName(editSheetName)}'!` : ""}${numberToABC(editState.column)}${editState.row + 1}` : null;
 	const editorBorderColor = genNormalSelectionStyle(themeService).stroke;
 	const focusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
 	const resolveRuntimeFocusState = () => {
@@ -20856,7 +20746,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
@@ -21093,7 +20983,13 @@ function DefinedName({ disable }) {
 		return () => {
 			subscription.unsubscribe();
 		};
-	}, []);
+	}, [
+		definedNamesService,
+		lexerTreeBuilder,
+		selectionManagerService,
+		unitId,
+		workbook
+	]);
 	const handleDefinedNamesList = debounce((value) => {
 		const hasMatch = definedNames.find((i) => i.name.toLowerCase().includes(value.toLowerCase()));
 		if (hasMatch && !open) setOpen(true);
@@ -21195,7 +21091,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__ */ jsx("input", {
 			ref: inputRef,
-			className: 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", borderRightClassName, { "univer-cursor-not-allowed": disable }),
+			className: 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", borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
 			value: inputValue,
 			onChange: handleChangeSelection,
@@ -21214,7 +21110,7 @@ function DefinedName({ disable }) {
 			onOpenChange: setOpen,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: /* @__PURE__ */ jsx("a", {
-				className: 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: 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__ */ jsx(MoreDownIcon, {})
 			})
 		})]
@@ -21349,7 +21245,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 = useRef(false);
+	const shouldSkipFocusRef = useRef(false);
 	const handlePointerDown = () => {
 		try {
 			contextService.setContextValue(FOCUSING_FX_BAR_EDITOR, true);
@@ -21364,25 +21260,26 @@ function FormulaBar(props) {
 					unitId: editState.unitId
 				})) {
 					contextService.setContextValue(FOCUSING_FX_BAR_EDITOR, false);
-					shouldSkipFocus.current = true;
+					shouldSkipFocusRef.current = true;
 				}
 			}
 		} catch (e) {
 			contextService.setContextValue(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 = isCellImage(editState === null || editState === void 0 || (_editState$documentLa = editState.documentLayoutObject.documentModel) === null || _editState$documentLa === void 0 ? void 0 : _editState$documentLa.getSnapshot()) || viewDisable;
 	return /* @__PURE__ */ jsxs("div", {
+		dir: "ltr",
 		"data-u-comp": "formula-bar",
-		className: clsx("univer-box-border univer-flex univer-bg-white univer-transition-[height] univer-ease-linear dark:!univer-bg-gray-800", borderBottomClassName, className, {
+		className: 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", borderBottomClassName, className, {
 			"univer-h-7": arrowDirection === 0,
 			"univer-h-20": arrowDirection === 1,
 			"univer-pointer-events-none": editDisable
@@ -21400,17 +21297,17 @@ function FormulaBar(props) {
 						className: clsx("univer-relative univer-box-border univer-flex univer-h-full univer-w-20 univer-items-center univer-justify-center univer-text-xs", borderRightClassName),
 						children: [
 							/* @__PURE__ */ jsx("span", {
-								className: 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: 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__ */ jsx(CloseIcon, {})
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: 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: 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__ */ jsx(CheckMarkIcon, {})
 							}),
 							/* @__PURE__ */ 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__ */ jsx(FxIcon, {})
 							})
@@ -21420,7 +21317,7 @@ function FormulaBar(props) {
 					className: "univer-flex univer-w-full univer-flex-1 univer-overflow-hidden univer-pl-3",
 					children: [/* @__PURE__ */ 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" },
@@ -21445,7 +21342,7 @@ function FormulaBar(props) {
 							},
 							autoScrollbar: false,
 							disableContextMenu: false
-						}), hideEditor && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
 						className: 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,
@@ -21586,7 +21483,7 @@ function SheetBarItem(props) {
 	const themeService = useDependency(ThemeService);
 	const getTextColor = (color) => {
 		const darkTextColor = themeService.getColorFromTheme("gray.900");
-		const lightTextColor = themeService.getColorFromTheme("white");
+		const lightTextColor = themeService.getColorFromTheme("gray.0");
 		return new ColorKit(color).isDark() ? lightTextColor : darkTextColor;
 	};
 	const currentSelected = Boolean(selected);
@@ -21600,8 +21497,8 @@ function SheetBarItem(props) {
 		onKeyDown,
 		onClick,
 		className: 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
@@ -22528,6 +22425,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 UniverInstanceType.UNIVER_SHEET: return /* @__PURE__ */ jsx(SheetsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case UniverInstanceType.UNIVER_DOC: return /* @__PURE__ */ jsx(DocsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case UniverInstanceType.UNIVER_SLIDE: return /* @__PURE__ */ jsx(SlidesMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case UniverInstanceType.UNIVER_BASE: return /* @__PURE__ */ jsx(BasesMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		case UniverInstanceType.UNIVER_BOARD: return /* @__PURE__ */ jsx(BoardsMultiIcon, {
+			"aria-hidden": true,
+			className
+		});
+		default: return null;
+	}
+}
 function getScrollShadow(state) {
 	const { leftEnd, rightEnd } = state;
 	if (leftEnd && rightEnd) return SCROLL_SHADOW_NONE;
@@ -22548,6 +22471,7 @@ function shouldRefreshSheetTabs(commandInfo) {
 	}
 }
 function SheetBarTabs() {
+	const injector = useDependency(Injector);
 	const [sheetList, setSheetList] = useState([]);
 	const [activeSheetId, setActiveSheetId] = useState("");
 	const [scrollShadow, setScrollShadow] = useState("");
@@ -22669,19 +22593,28 @@ function SheetBarTabs() {
 	const updateSheetItems = 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LockIcon, { className: "univer-shrink-0" }), /* @__PURE__ */ jsx("span", {
-					className: "univer-truncate univer-outline-none",
-					children: sheet.getName()
-				})] }) : /* @__PURE__ */ jsx("span", {
-					className: "univer-truncate univer-outline-none",
-					children: sheet.getName()
-				}),
+				label: /* @__PURE__ */ jsxs(Fragment, { children: [
+					embedChildType != null && /* @__PURE__ */ jsx(EmbedSheetTabProductIcon, { childType: embedChildType }),
+					hasProtection && /* @__PURE__ */ jsx(LockIcon, { className: "univer-shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "univer-truncate univer-outline-none",
+						children: sheet.getName()
+					})
+				] }),
 				index,
 				selected: activeSheet === sheet,
 				color: sheet.getTabColor() ?? void 0
@@ -22690,6 +22623,7 @@ function SheetBarTabs() {
 		setSheetList(sheetListItems);
 		setActiveSheetId(currentSubUnitId);
 	}, [
+		injector,
 		rangeProtectionRuleModel,
 		workbook,
 		worksheetProtectionRuleModel
@@ -23157,120 +23091,98 @@ const functionDisplayNames = {
 	[FUNCTION_NAMES_STATISTICAL.COUNTA]: "sheets-ui.statusbar.countA",
 	[FUNCTION_NAMES_TEXT.CONCATENATE]: "concatenate"
 };
-const CopyableStatisticItem = (item) => {
-	const localeService = useDependency(LocaleService);
-	const messageService = useDependency(IMessageService);
-	const clipboardService = useDependency(IClipboardInterfaceService);
-	const formateValue = formatNumber(item);
-	const copyToClipboard = async () => {
-		await clipboardService.writeText(item.value.toString());
-		messageService.show({
-			type: MessageType.Success,
-			content: localeService.t("sheets-ui.statusbar.copied")
-		});
-	};
-	return /* @__PURE__ */ jsx(Tooltip, {
-		title: localeService.t("sheets-ui.statusbar.clickToCopy"),
-		placement: "top",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "univer-flex univer-cursor-pointer univer-truncate univer-text-center univer-text-xs univer-text-gray-400",
-			onClick: copyToClipboard,
-			children: /* @__PURE__ */ 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 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] = useState(window.innerWidth < SINGLE_MODE_WIDTH);
+	const localeService = useDependency(LocaleService);
 	const statusBarService = useDependency(IStatusBarService);
-	const items = statusBarService.getFunctions().map((item, index) => ({
+	const [selectedFunction, setSelectedFunction] = useState(FUNCTION_NAMES_MATH.SUM);
+	const [open, setOpen] = useState(false);
+	const [statistics, setStatistics] = 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] = useState(initialItems);
-		const [show, setShow] = useState(true);
-		const filteredStatistics = useMemo(() => statistics.filter((item) => item.show && !item.disable), [statistics]);
-		const firstItem = useMemo(() => filteredStatistics.find((item) => item.show && !item.disable), [filteredStatistics]);
-		const showList = useMemo(() => isSingle && firstItem ? [firstItem] : filteredStatistics, [
-			isSingle,
-			firstItem,
-			filteredStatistics
-		]);
-		const updateStatistics = 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;
+	})));
+	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
 				};
 			}));
-		}, []);
-		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 === 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 = debounce(() => {
-		const newSingleState = window.innerWidth < SINGLE_MODE_WIDTH;
-		if (isSingle !== newSingleState) setIsSingle(newSingleState);
-	}, 100);
-	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__ */ jsxs("div", {
-			className: "univer-grid univer-h-full univer-items-center",
-			children: [item[0] && /* @__PURE__ */ jsx(CopyableStatisticItem, { ...item[0] }, item[0].name), item[1] && /* @__PURE__ */ jsx(CopyableStatisticItem, { ...item[1] }, item[1].name)]
-		}, `stat-col-${index}`));
-		return showList.map((item) => /* @__PURE__ */ jsx("div", {
-			className: "univer-grid univer-h-full univer-items-center",
-			children: /* @__PURE__ */ jsx(CopyableStatisticItem, { ...item })
-		}, item.name));
+	const handleSelect = (name) => {
+		setSelectedFunction(name);
+		setOpen(false);
 	};
-	const renderContent = getStatisticLayout(showList, ROW_COUNT_THRESHOLD, CopyableStatisticItem);
-	return show && /* @__PURE__ */ jsx("div", {
-		className: 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__ */ jsx("div", {
-			className: "univer-flex univer-h-full univer-gap-x-2",
-			children: renderContent
+	return /* @__PURE__ */ 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__ */ jsx(Dropdown, {
+			align: "end",
+			side: "top",
+			open,
+			onOpenChange: setOpen,
+			overlay: /* @__PURE__ */ 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__ */ jsxs("button", {
+						type: "button",
+						className: 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__ */ jsx("span", {
+							className: "univer-w-3 univer-shrink-0",
+							children: selected && /* @__PURE__ */ jsx(CheckMarkIcon, {})
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							title: text,
+							placement: "top",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "univer-min-w-0 univer-flex-1 univer-truncate",
+								children: text
+							})
+						})]
+					}, item.name);
+				})
+			}),
+			children: /* @__PURE__ */ 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__ */ jsx(Tooltip, {
+					title: formatStatistic(selectedStatistic),
+					placement: "top",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "univer-min-w-0 univer-flex-1 univer-truncate",
+						children: formatStatistic(selectedStatistic)
+					})
+				}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-shrink-0" })]
+			})
 		})
 	});
 };
@@ -23282,68 +23194,49 @@ function RenderSheetFooter() {
 	const config = useConfigValue(SHEETS_UI_PLUGIN_CONFIG_KEY);
 	const menuManagerService = useDependency(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 !== UniverInstanceType.UNIVER_SHEET) return null;
+	if (rootUnitType !== UniverInstanceType.UNIVER_SHEET) return null;
 	const footerMenus = menuManagerService.getMenuByPositionKey(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__ */ jsx(SheetLoadingWorkbookContext.Provider, {
-		value: workbook,
-		children: /* @__PURE__ */ jsxs("section", {
-			className: 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__ */ jsx(SheetBar, {}),
-				showStatisticBar && /* @__PURE__ */ jsx(StatusBar, {}),
-				showMenus && footerMenus.length > 0 && /* @__PURE__ */ 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__ */ jsx(ToolbarItem, { ...child.item }, child.key));
-					})
-				}),
-				showZoomSlider && /* @__PURE__ */ jsx(SheetZoomSlider, {})
-			]
-		})
+	return /* @__PURE__ */ 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__ */ jsx(SheetBar, {}),
+			showStatisticBar && /* @__PURE__ */ jsx(StatusBar, {}),
+			showMenus && footerMenus.length > 0 && /* @__PURE__ */ 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__ */ jsx(ToolbarItem, { ...child.item }, child.key));
+				})
+			}),
+			showZoomSlider && /* @__PURE__ */ jsx(SheetZoomSlider, {})
+		]
 	});
 }
 function RenderSheetHeader() {
 	const config = 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 !== UniverInstanceType.UNIVER_SHEET) return /* @__PURE__ */ 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__ */ jsx(SheetLoadingWorkbookContext.Provider, {
-		value: workbook,
-		children: /* @__PURE__ */ jsx("div", {
-			"aria-disabled": isLoading,
-			className: clsx({ "univer-pointer-events-none": isLoading }),
-			children: /* @__PURE__ */ jsx(FormulaBar, {})
-		})
-	});
+	if (rootUnitType !== UniverInstanceType.UNIVER_SHEET) return null;
+	if ((config === null || config === void 0 ? void 0 : config.formulaBar) !== false) return /* @__PURE__ */ jsx(FormulaBar, {});
 	return null;
 }
 /**
@@ -23351,18 +23244,16 @@ function RenderSheetHeader() {
 */
 function RenderSheetContent() {
 	const config = useConfigValue(SHEETS_UI_PLUGIN_CONFIG_KEY);
-	const isLoading = useSheetLoading();
-	const isPreviewReady = useSheetLoadingPreviewReady();
 	const componentManager = useDependency(ComponentManager);
-	const activeWorkbook = useActiveWorkbook();
-	const workbook = useSheetLoadingWorkbook() ?? activeWorkbook;
+	const workbook = useRootWorkbenchWorkbook();
 	const activeEmbedTab = useActiveSheetEmbedTabData(workbook);
 	const injector = useDependency(Injector);
 	const activeWorkbookEmbeddedRender = useActiveWorkbookIsEmbeddedRender(workbook);
+	const rootWorkbenchOwnsSheet = useWorkbenchRootUnitType() === UniverInstanceType.UNIVER_SHEET;
 	const ShapeTextEditorContainer = componentManager.get("SheetShapeTextEditorContainer") ?? componentManager.get("ShapeTextEditorContainer");
 	useEffect(() => {
 		var _tryGetSheetEmbedRunt;
-		if (!workbook || isLoading || activeEmbedTab || activeWorkbookEmbeddedRender) return;
+		if (!workbook || activeEmbedTab || activeWorkbookEmbeddedRender || !rootWorkbenchOwnsSheet) return;
 		const instanceService = injector.get(IUniverInstanceService);
 		instanceService.setCurrentUnitForType(workbook.getUnitId());
 		instanceService.focusUnit(workbook.getUnitId());
@@ -23371,11 +23262,11 @@ function RenderSheetContent() {
 		activeEmbedTab,
 		activeWorkbookEmbeddedRender,
 		injector,
-		isLoading,
+		rootWorkbenchOwnsSheet,
 		workbook
 	]);
 	if (!workbook) return null;
-	if (isLoading) return isPreviewReady ? null : /* @__PURE__ */ jsx(SheetLoadingSkeleton, {});
+	if (!rootWorkbenchOwnsSheet) return null;
 	if (activeWorkbookEmbeddedRender) return null;
 	if (activeEmbedTab && workbook) return /* @__PURE__ */ jsx(RenderSheetEmbedTabHost, {
 		workbook,
@@ -23387,42 +23278,6 @@ function RenderSheetContent() {
 		/* @__PURE__ */ jsx(AutoFillPopupMenu, {})
 	] });
 }
-function SheetLoadingSkeleton() {
-	return /* @__PURE__ */ 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__ */ 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: DEFAULT_WORKSHEET_ROW_TITLE_WIDTH,
-					height: DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT
-				}
-			}),
-			/* @__PURE__ */ 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: DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT,
-					width: DEFAULT_WORKSHEET_ROW_TITLE_WIDTH
-				}
-			}),
-			/* @__PURE__ */ 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: DEFAULT_WORKSHEET_COLUMN_TITLE_HEIGHT,
-					left: DEFAULT_WORKSHEET_ROW_TITLE_WIDTH,
-					backgroundImage: "linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
-					backgroundSize: `${DEFAULT_WORKSHEET_COLUMN_WIDTH}px ${DEFAULT_WORKSHEET_ROW_HEIGHT}px`
-				}
-			}),
-			/* @__PURE__ */ jsx(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 = useDependency(Injector);
@@ -23454,26 +23309,45 @@ function RenderSheetEmbedTabHost(props) {
 	]);
 	return /* @__PURE__ */ 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 = useDependency(IUniverInstanceService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const injector = useDependency(Injector);
+	const runtimeFocusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
 	return 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;
+	}, [
+		useObservable(() => merge$1(renderManagerService.created$, renderManagerService.disposed$, (runtimeFocusCoordinator === null || runtimeFocusCoordinator === void 0 ? void 0 : runtimeFocusCoordinator.runtimeSessionChanged$) ?? EMPTY), null, false, [renderManagerService, runtimeFocusCoordinator]),
+		renderManagerService,
+		runtimeFocusCoordinator,
+		univerInstanceService,
+		workbook
+	]);
 }
-function useFocusedUnitType() {
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const focusedUnitId = useObservable(() => univerInstanceService.focused$, null, false, [univerInstanceService]);
+function useRootWorkbenchWorkbook() {
+	const activeWorkbook = useActiveWorkbook();
+	const injector = useDependency(Injector);
+	const instanceService = useDependency(IUniverInstanceService);
+	const runtimeFocusCoordinator = injector.has(ISheetEmbedRuntimeFocusCoordinator) ? injector.get(ISheetEmbedRuntimeFocusCoordinator) : void 0;
 	return useMemo(() => {
-		if (!focusedUnitId) return null;
-		if (isInternalEditorID(focusedUnitId) && univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) return 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, UniverInstanceType.UNIVER_SHEET) ?? activeWorkbook;
+	}, [
+		activeWorkbook,
+		instanceService,
+		runtimeFocusCoordinator,
+		useObservable(() => (runtimeFocusCoordinator === null || runtimeFocusCoordinator === void 0 ? void 0 : runtimeFocusCoordinator.runtimeSessionChanged$) ?? EMPTY, null, false, [runtimeFocusCoordinator])
+	]);
+}
+function useWorkbenchRootUnitType() {
+	return useObservable(useDependency(IWorkbenchService).rootUnitType$, null, true);
 }
 function useActiveSheetEmbedTabData(workbook) {
 	const worksheet = useActiveWorksheet(workbook);
@@ -24098,7 +23972,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
@@ -24268,6 +24142,8 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends Di
 		disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
 			if (shouldUpdatePosition(commandInfo.id)) position$.next(calc());
 		}));
+		const viewMain = currentRender.scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+		if (viewMain) disposable.add(viewMain.onScrollAfter$.subscribeEvent(() => position$.next(calc())));
 		return {
 			position,
 			position$,
@@ -24314,6 +24190,10 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends Di
 		};
 		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(SHEET_VIEWPORT_KEY.VIEW_MAIN);
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
@@ -24321,7 +24201,11 @@ let SheetCanvasPopManagerService = class SheetCanvasPopManagerService extends Di
 			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 DisposableCollection();
 		disposableCollection.add(disposable);
@@ -24734,6 +24618,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 Disposable {
 	constructor(_sheetCanvasPopManagerService) {
 		super();
@@ -24789,7 +24678,7 @@ let CellPopupManagerService = class CellPopupManagerService extends Disposable {
 					direction
 				},
 				noPushMinimumGap: true,
-				autoRelayout: false,
+				autoRelayout: popup.autoRelayout ?? false,
 				zIndex: 90
 			}, unitId, subUnitId);
 			subUnitMap.setValue(row, col, {
@@ -24817,31 +24706,21 @@ let CellPopupManagerService = class CellPopupManagerService extends Disposable {
 		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);
@@ -25560,12 +25439,12 @@ function BorderPanel(props) {
 						})
 					}),
 					children: /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+						}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 					})
 				}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Dropdown, {
 					overlay: /* @__PURE__ */ jsx("section", {
@@ -25576,19 +25455,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__ */ jsx(CheckMarkIcon, { className: "univer-absolute univer-left-3 univer-text-primary-600" }), /* @__PURE__ */ 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__ */ 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__ */ jsx(BorderLine, {
-							className: "univer-fill-gray-900 dark:!univer-fill-white",
+							className: "univer-fill-gray-900 dark:!univer-fill-gray-0",
 							type: type ?? BorderStyleTypes.THIN
-						}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+						}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 					})
 				}) })]
 			})
@@ -25620,6 +25499,7 @@ let CellAlertManagerService = class CellAlertManagerService extends Disposable {
 		});
 	}
 	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();
@@ -25640,7 +25520,9 @@ let CellAlertManagerService = class CellAlertManagerService extends Disposable {
 			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
 		});
@@ -25680,18 +25562,53 @@ CellAlertManagerService = __decorate([__decorateParam(0, IRenderManagerService),
 */
 function CellAlert({ popup }) {
 	var _popup$extraProps;
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setIsHovered] = 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__ */ jsx("div", {
+			onMouseEnter: () => setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			children: /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(WarningIcon, { className: "univer-text-yellow-500" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-300" })]
+				})
+			})
+		});
+	}
 	const iconMap = {
-		[2]: /* @__PURE__ */ jsx(ErrorIcon, { className: "univer-mr-1.5 univer-text-red-500" }),
-		[0]: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-mr-1.5 univer-text-blue-500" }),
-		[1]: /* @__PURE__ */ jsx(WarningIcon, { className: "univer-mr-1.5 univer-text-yellow-500" })
+		[2]: /* @__PURE__ */ jsx(ErrorIcon, { className: "univer-text-red-500" }),
+		[0]: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-text-blue-500" }),
+		[1]: /* @__PURE__ */ jsx(WarningIcon, { className: "univer-text-yellow-500" })
 	};
 	return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
 			className: "univer-text-sm",
@@ -25721,7 +25638,10 @@ const CellPopup = (props) => {
 	const componentManager = useDependency(ComponentManager);
 	return /* @__PURE__ */ 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__ */ jsx(Component, { popup }, popup.id ?? popup.componentKey) : null;
@@ -25863,7 +25783,7 @@ function DefinedNameInputContent(props) {
 					className: "univer-relative univer-h-8 univer-select-none",
 					children: /* @__PURE__ */ jsx(FormulaEditor, {
 						ref: formulaEditorRef,
-						className: 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", borderClassName),
+						className: 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", borderClassName),
 						initValue: formulaOrRefStringValue,
 						unitId,
 						subUnitId,
@@ -26099,7 +26019,7 @@ const DefinedNameContainer = () => {
 								children: [/* @__PURE__ */ jsxs("div", {
 									title: definedName.comment,
 									children: [/* @__PURE__ */ 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__ */ jsx("span", {
 											className: "univer-text-xxs univer-ml-1 univer-text-gray-400",
 											children: definedName.localSheetId === SCOPE_WORKBOOK_VALUE_DEFINED_NAME || definedName.localSheetId == null ? "" : getSheetNameBySheetId(definedName.localSheetId)
@@ -26206,7 +26126,7 @@ function DateDropdown(props) {
 		if (await (onChange === null || onChange === void 0 ? void 0 : onChange(date))) hideFn();
 	};
 	return /* @__PURE__ */ 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__ */ jsx(TimeInput, {
 			value: date.toDate(),
 			onValueChange: (newValue) => {
@@ -26259,6 +26179,8 @@ function getListDropdownValue(value, multiple) {
 function SelectList(props) {
 	const { value, onChange, multiple, options, onEdit, style, location, showEdit: showEditOnDropdown, showSearch: showSearchOnDropdown } = props;
 	const localeService = useDependency(LocaleService);
+	const themeService = useDependency(ThemeService);
+	useObservable(themeService.currentTheme$);
 	const { row, col, unitId, subUnitId } = location;
 	const searchRef = useRef(null);
 	useEffect(() => {
@@ -26297,14 +26219,14 @@ function SelectList(props) {
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "sheets-dropdown-list",
-		className: 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", borderClassName),
+		className: 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", borderClassName),
 		style,
 		children: [
 			showSearchOnDropdown && /* @__PURE__ */ jsx("div", {
 				className: "univer-box-border univer-flex univer-w-full univer-px-2",
 				children: /* @__PURE__ */ jsx("input", {
 					ref: searchRef,
-					className: 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", borderClassName),
+					className: 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", borderClassName),
 					type: "text",
 					value: lowerFilter,
 					autoFocus: true,
@@ -26318,6 +26240,7 @@ function SelectList(props) {
 			/* @__PURE__ */ jsx("div", {
 				className: clsx("univer-flex univer-max-h-52 univer-flex-col univer-gap-1 univer-overflow-y-auto univer-px-2 univer-py-1", scrollbarClassName),
 				children: filteredOptions.map((item, i) => {
+					var _item$color;
 					const selected = value.indexOf(item.value) > -1;
 					const handleClick = () => {
 						let set;
@@ -26330,16 +26253,18 @@ function SelectList(props) {
 						onChange(newValue);
 					};
 					const index = item.label.toLocaleLowerCase().indexOf(lowerFilter);
-					const isDark = new 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 ColorKit(backgroundColor).isDark();
 					return /* @__PURE__ */ 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__ */ jsx("div", {
 							className: 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__ */ jsxs(Fragment, { children: [
 								/* @__PURE__ */ jsx("span", { children: item.label.substring(0, index) }),
 								/* @__PURE__ */ jsx("span", {
@@ -26409,7 +26334,7 @@ const Spin = ({ loading, children }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-relative univer-size-full",
 		children: [loading && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
 			className: loading ? "univer-pointer-events-none univer-blur-sm" : "",
@@ -27017,7 +26942,7 @@ const PermissionDetailUserPart = (props) => {
 									src: (_item$subject2 = item.subject) === null || _item$subject2 === void 0 ? void 0 : _item$subject2.avatar
 								}),
 								/* @__PURE__ */ 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__ */ jsx(Select, {
@@ -27384,11 +27309,11 @@ function SheetPermissionPanelListContent() {
 										}) })
 									}),
 									/* @__PURE__ */ 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__ */ 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")}`
 									})
 								]
@@ -27396,10 +27321,10 @@ function SheetPermissionPanelListContent() {
 							/* @__PURE__ */ jsxs("div", {
 								className: "univer-mt-2 univer-flex univer-items-center",
 								children: [/* @__PURE__ */ 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__ */ 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")}`
 								})]
 							}),
@@ -27841,7 +27766,7 @@ const formulaEditorStyle = {
 	}
 };
 let EditorDataSyncController = class EditorDataSyncController extends 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;
@@ -27852,12 +27777,14 @@ let EditorDataSyncController = class EditorDataSyncController extends Disposable
 		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;
@@ -27981,6 +27908,11 @@ let EditorDataSyncController = class EditorDataSyncController extends Disposable
 			this._refreshRenderStyleConfig(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
 		}));
 	}
+	_syncFormulaBarTextColorOnThemeChange() {
+		this.disposeWithMe(this._themeService.currentTheme$.pipe(skip(1)).subscribe(() => {
+			this._refreshRenderStyleConfig(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		}));
+	}
 	_refreshRenderStyleConfig(unitId) {
 		var _currentRender$mainCo3;
 		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
@@ -27995,11 +27927,15 @@ let EditorDataSyncController = class EditorDataSyncController extends Disposable
 		if (unitId === 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 !== DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY && snapshot.id !== DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
 		const isFormulaBar = snapshot.id === 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) {
@@ -28008,8 +27944,8 @@ let EditorDataSyncController = class EditorDataSyncController extends Disposable
 		}
 		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
 			};
@@ -28036,84 +27972,97 @@ EditorDataSyncController = __decorate([
 	__decorateParam(5, Inject(WorksheetProtectionRuleModel)),
 	__decorateParam(6, Inject(FormulaEditorController)),
 	__decorateParam(7, IFormulaEditorManagerService),
-	__decorateParam(8, IContextService)
+	__decorateParam(8, IContextService),
+	__decorateParam(9, Inject(ThemeService))
 ], EditorDataSyncController);
 
 //#endregion
 //#region src/controllers/force-string-alert-render.controller.ts
 const ALERT_KEY = "SHEET_FORCE_STRING_ALERT";
 let ForceStringAlertRenderController = class ForceStringAlertRenderController extends 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 (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 === CellValueType.FORCE_STRING || cellData.t === CellValueType.STRING) && (isRealNum(cellData.v) || typeof cellData.v === "string" && 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$(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 (isTextFormat(cellStyle === null || cellStyle === void 0 || (_cellStyle$n = cellStyle.n) === null || _cellStyle$n === void 0 ? void 0 : _cellStyle$n.pattern)) return;
+		if (cellData.t !== CellValueType.FORCE_STRING && cellData.t !== CellValueType.STRING || !isRealNum(cellData.v) && !(typeof cellData.v === "string" && 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(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, Inject(HoverManagerService)),
+	__decorateParam(1, Inject(SheetsSelectionsService)),
 	__decorateParam(2, Inject(CellAlertManagerService)),
 	__decorateParam(3, Inject(LocaleService)),
-	__decorateParam(4, IConfigService)
+	__decorateParam(4, IConfigService),
+	__decorateParam(5, ICommandService),
+	__decorateParam(6, IUniverInstanceService)
 ], ForceStringAlertRenderController);
 
 //#endregion
@@ -28543,7 +28492,7 @@ function MobileSheetBarImpl(props) {
 					tabMapRef.current.set(sheet.sheetId, element);
 				},
 				className: 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", 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",
@@ -29359,35 +29308,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 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 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 Rect(HEADER_MENU_CONTROLLER_SHAPE, {
-			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
-			evented: false
-		});
+		this._hoverRect = new 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 ColorKit(color).setAlpha(HEADER_MENU_CONTROLLER_SHAPE_ALPHA).toRgbString() });
+		}));
 		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
 			zIndex: 100,
 			visible: false
@@ -29398,7 +29349,6 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends Dispos
 		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;
@@ -29409,17 +29359,17 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends Dispos
 			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,
@@ -29440,21 +29390,20 @@ let HeaderMenuRenderController = class HeaderMenuRenderController extends Dispos
 			}
 		};
 		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 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;
@@ -29525,7 +29474,8 @@ HeaderMenuRenderController = __decorate([
 	__decorateParam(1, Inject(SheetSkeletonManagerService)),
 	__decorateParam(2, IContextMenuService),
 	__decorateParam(3, ICommandService),
-	__decorateParam(4, Inject(SheetsSelectionsService))
+	__decorateParam(4, Inject(SheetsSelectionsService)),
+	__decorateParam(5, Inject(ThemeService))
 ], HeaderMenuRenderController);
 function getHeaderBaseLayout(skeleton) {
 	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
@@ -30837,6 +30787,36 @@ MobileSheetsScrollRenderController = __decorate([
 	__decorateParam(7, IContextService)
 ], MobileSheetsScrollRenderController);
 
+//#endregion
+//#region src/controllers/render-controllers/skeleton.render-controller.ts
+let SheetSkeletonRenderController = class SheetSkeletonRenderController extends 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, Inject(SheetSkeletonManagerService)), __decorateParam(2, IRenderManagerService)], SheetSkeletonRenderController);
+
 //#endregion
 //#region src/services/auto-height.service.ts
 const IAutoHeightService = createIdentifier("sheets-ui.services.auto-height");
@@ -31742,7 +31722,6 @@ let UniverSheetsMobileUIPlugin = class UniverSheetsMobileUIPlugin extends Plugin
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -31877,6 +31856,7 @@ let SheetContextMenuRenderController = class SheetContextMenuRenderController ex
 		this._selectionRenderService = _selectionRenderService;
 		this._injector = _injector;
 		this._init();
+		this._initEmbedRuntimeSessionListener();
 	}
 	_init() {
 		var _this$_context;
@@ -31924,6 +31904,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));
@@ -31931,6 +31918,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, IContextMenuService),
@@ -31938,6 +31928,9 @@ SheetContextMenuRenderController = __decorate([
 	__decorateParam(3, ISheetSelectionRenderService),
 	__decorateParam(4, Inject(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";
 }
@@ -32360,7 +32353,6 @@ let UniverSheetsUIPlugin = class UniverSheetsUIPlugin extends Plugin {
 			[SelectAllService],
 			[ISheetCellDropdownManagerService, { useClass: SheetCellDropdownManagerService }],
 			[SheetCellEditorResizeService],
-			[ISheetLoadingRenderService, { useClass: SheetLoadingRenderService }],
 			[AutoHeightController],
 			[AutoWidthController],
 			[FormulaEditorController],
@@ -32483,4 +32475,4 @@ UniverSheetsUIPlugin = __decorate([
 ], UniverSheetsUIPlugin);
 
 //#endregion
-export { AddRangeProtectionFromContextMenuCommand, AddRangeProtectionFromSheetBarCommand, AddRangeProtectionFromToolbarCommand, ApplyFormatPainterCommand, AutoFillPopupMenu, AutoFillUIController, AutoHeightController, AutoWidthController, BORDER_LINE_CHILDREN, BORDER_SIZE_CHILDREN, BaseSelectionRenderService, BorderLine, COPY_SPECIAL_MENU_ID, COPY_TYPE, CellAlertManagerService, CellAlertType, CellCustomRenderController, CellEditorManagerService, CellPopupManagerService, ChangeSheetProtectionFromSheetBarCommand, ChangeZoomRatioCommand, DeleteRangeMoveLeftConfirmCommand, DeleteRangeMoveUpConfirmCommand, DeleteRangeProtectionFromContextMenuCommand, DeleteWorksheetProtectionFormSheetBarCommand, DragManagerService, DragRenderController, EMBEDDING_FORMULA_EDITOR, EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY, EditingRenderController, EditorBridgeService, EditorContainer, ExpandSelectionCommand, FORMULA_CLIPBOARD_MIME_TYPE, FormatPainterStatus, FormulaBar, FormulaEditorController, HEADER_UNHIDE_RANGE_VISIBLE_CHECK, HeaderFreezeRenderController, HeaderMoveRenderController, HeaderResizeRenderController, HeaderUnhideRangeAxis, HeaderUnhideRangeService, HeaderUnhideRenderController, HideColConfirmCommand, HideRowConfirmCommand, HoverManagerService, HoverRenderController, ICellEditorManagerService, IEditorBridgeService, IFormatPainterService, IFormulaEditorManagerService, IMarkSelectionService, IRepeatLastActionService, ISheetCellDropdownManagerService, ISheetClipboardService, ISheetEmbedFloatingGeometryService, ISheetEmbedInteractionBoundaryService, ISheetEmbedRuntimeFocusCoordinator, ISheetEmbedRuntimeService, ISheetHostChromeOverrideService, ISheetLoadingRenderService, ISheetSelectionRenderService, IStatusBarService, InsertRangeMoveDownConfirmCommand, InsertRangeMoveRightConfirmCommand, JumpOver, MarkSelectionService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, PASTE_SPECIAL_MENU_ID, PREDEFINED_HOOK_NAME, PREDEFINED_HOOK_NAME_COPY, PREDEFINED_HOOK_NAME_PASTE, RANGE_SELECTOR_COMPONENT_KEY, RANGE_SELECTOR_SYMBOLS, RemoveColConfirmCommand, RemoveRowConfirmCommand, RemoveSheetConfirmCommand, RenameSheetOperation, RepeatLastActionPermission, ResetRangeTextColorCommand, ResetScrollCommand, SELECTION_SHAPE_DEPTH, SHEETS_UI_PLUGIN_CONFIG_KEY, SHEET_EMBED_CHILD_TYPE_ATTRIBUTE, SHEET_EMBED_CHILD_UNIT_ID_ATTRIBUTE, SHEET_EMBED_FLOAT_DOM_ATTRIBUTE, SHEET_EMBED_HOST_UNIT_ID_ATTRIBUTE, SHEET_EMBED_ID_ATTRIBUTE, SHEET_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, SHEET_EMBED_RUNTIME_FOCUS_ROLE_ATTRIBUTE, SHEET_FOOTER_BAR_HEIGHT, SHEET_UI_PLUGIN_NAME, SHEET_VIEW_KEY, ScrollCommand, ScrollToCellCommand, ScrollToRangeOperation, SelectAllCommand, SelectionControl, SelectionControl as SelectionShape, SelectionShapeExtension, SetActivateCellEditOperation, SetCellEditVisibleArrowOperation, SetCellEditVisibleOperation, SetCellEditVisibleWithF2Operation, SetColumnFrozenCommand, SetColumnHeaderHeightCommand, SetFirstColumnFrozenCommand, SetFirstRowFrozenCommand, SetFormatPainterOperation, SetInfiniteFormatPainterCommand, SetOnceFormatPainterCommand, SetRangeBoldCommand, SetRangeFontDecreaseCommand, SetRangeFontFamilyCommand, SetRangeFontIncreaseCommand, SetRangeFontSizeCommand, SetRangeItalicCommand, SetRangeProtectionFromContextMenuCommand, SetRangeStrickThroughCommand, SetRangeSubscriptCommand, SetRangeSuperscriptCommand, SetRangeTextColorCommand, SetRangeUnderlineCommand, SetRowFrozenCommand, SetRowHeaderWidthCommand, SetScrollOperation, SetScrollRelativeCommand, SetSelectionFrozenCommand, SetWorksheetColAutoWidthCommand, SetZoomRatioCommand, SetZoomRatioOperation, SheetBar, SheetCanvasPopManagerService, SheetCellDropdownManagerService, SheetCellEditorResizeService, SheetClipboardController, SheetClipboardService, SheetCopyCommand, SheetCutCommand, SheetMenuPosition, SheetPasteBesidesBorderCommand, SheetPasteColWidthCommand, SheetPasteCommand, SheetPasteFormatCommand, SheetPasteShortKeyCommand, SheetPasteValueCommand, SheetPermissionCheckUIController, SheetPermissionOpenDialogOperation, SheetPermissionOpenPanelOperation, SheetPermissionRenderManagerService, SheetPermissionUserManagerService, SheetPrintInterceptorService, SheetPrintingResourceCollector, SheetRenderController, SheetScrollManagerService, SheetSelectionRenderService, SheetSkeletonManagerService, SheetUIController, SheetsRenderService, SheetsScrollRenderController, menuSchema as SheetsUIMenuSchema, SheetsUIPart, ShowMenuListCommand, SidebarDefinedNameOperation, StatusBarController, StatusBarService, UNIVER_SHEET_PERMISSION_USER_PART, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, ViewSheetPermissionFromContextMenuCommand, ViewSheetPermissionFromSheetBarCommand, calculateDocSkeletonRects, matchedSelectionByRowColIndex as checkInHeaderRanges, deriveStateFromActiveSheet$, functionDisplayNames, genNormalSelectionStyle, genSelectionByRange, selectionDataForSelectAll as getAllSelection, getCellRealRange, getCoordByCell, getCoordByOffset, getCurrentExclusiveRangeInterest$, getCurrentRangeDisable$, getCustomRangePosition, getEditingCustomRangePosition, getEditorObject, getMatrixPlainText, getObservableWithExclusiveRange$, getRepeatRange, getSheetObject, getTopLeftSelectionOfCurrSheet, getTransformCoord, getViewportByCell, isEmbeddingFormulaEditor, isRangeSelector, menuClipboardDisabledObservable, mergeSetRangeValues, resolveActiveSheetEmbedRuntimeDomScope, resolveSheetEmbedRuntimeDomScope, useActiveWorkbook, useActiveWorksheet, useHighlightRange, useKeyEventConfig, useWorkbooks, virtualizeDiscreteRanges, whenFormulaEditorActivated, whenSheetEditorActivated, whenSheetEditorFocused };
+export { AddRangeProtectionFromContextMenuCommand, AddRangeProtectionFromSheetBarCommand, AddRangeProtectionFromToolbarCommand, ApplyFormatPainterCommand, AutoFillPopupMenu, AutoFillUIController, AutoHeightController, AutoWidthController, BORDER_LINE_CHILDREN, BORDER_SIZE_CHILDREN, BaseSelectionRenderService, BorderLine, COPY_SPECIAL_MENU_ID, COPY_TYPE, CellAlertManagerService, CellAlertType, CellCustomRenderController, CellEditorManagerService, CellPopupManagerService, ChangeSheetProtectionFromSheetBarCommand, ChangeZoomRatioCommand, DeleteRangeMoveLeftConfirmCommand, DeleteRangeMoveUpConfirmCommand, DeleteRangeProtectionFromContextMenuCommand, DeleteWorksheetProtectionFormSheetBarCommand, DragManagerService, DragRenderController, EMBEDDING_FORMULA_EDITOR, EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY, EditingRenderController, EditorBridgeService, EditorContainer, ExpandSelectionCommand, FORMULA_CLIPBOARD_MIME_TYPE, FormatPainterStatus, FormulaBar, FormulaEditorController, HEADER_UNHIDE_RANGE_VISIBLE_CHECK, HeaderFreezeRenderController, HeaderMoveRenderController, HeaderResizeRenderController, HeaderUnhideRangeAxis, HeaderUnhideRangeService, HeaderUnhideRenderController, HideColConfirmCommand, HideRowConfirmCommand, HoverManagerService, HoverRenderController, ICellEditorManagerService, IEditorBridgeService, IFormatPainterService, IFormulaEditorManagerService, IMarkSelectionService, IRepeatLastActionService, ISheetBarService, ISheetCellDropdownManagerService, ISheetClipboardService, ISheetEmbedFloatingGeometryService, ISheetEmbedInteractionBoundaryService, ISheetEmbedRuntimeFocusCoordinator, ISheetEmbedRuntimeService, ISheetHostChromeOverrideService, ISheetSelectionRenderService, IStatusBarService, InsertRangeMoveDownConfirmCommand, InsertRangeMoveRightConfirmCommand, JumpOver, MarkSelectionService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, PASTE_SPECIAL_MENU_ID, PREDEFINED_HOOK_NAME, PREDEFINED_HOOK_NAME_COPY, PREDEFINED_HOOK_NAME_PASTE, RANGE_SELECTOR_COMPONENT_KEY, RANGE_SELECTOR_SYMBOLS, RemoveColConfirmCommand, RemoveRowConfirmCommand, RemoveSheetConfirmCommand, RenameSheetOperation, RepeatLastActionPermission, ResetRangeTextColorCommand, ResetScrollCommand, SELECTION_SHAPE_DEPTH, SHEETS_UI_PLUGIN_CONFIG_KEY, SHEET_EMBED_CHILD_TYPE_ATTRIBUTE, SHEET_EMBED_CHILD_UNIT_ID_ATTRIBUTE, SHEET_EMBED_FLOAT_DOM_ATTRIBUTE, SHEET_EMBED_HOST_UNIT_ID_ATTRIBUTE, SHEET_EMBED_ID_ATTRIBUTE, SHEET_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, SHEET_EMBED_RUNTIME_FOCUS_ROLE_ATTRIBUTE, SHEET_FOOTER_BAR_HEIGHT, SHEET_UI_PLUGIN_NAME, SHEET_VIEW_KEY, ScrollCommand, ScrollToCellCommand, ScrollToRangeOperation, SelectAllCommand, SelectionControl, SelectionControl as SelectionShape, SelectionShapeExtension, SetActivateCellEditOperation, SetCellEditVisibleArrowOperation, SetCellEditVisibleOperation, SetCellEditVisibleWithF2Operation, SetColumnFrozenCommand, SetColumnHeaderHeightCommand, SetFirstColumnFrozenCommand, SetFirstRowFrozenCommand, SetFormatPainterOperation, SetInfiniteFormatPainterCommand, SetOnceFormatPainterCommand, SetRangeBoldCommand, SetRangeFontDecreaseCommand, SetRangeFontFamilyCommand, SetRangeFontIncreaseCommand, SetRangeFontSizeCommand, SetRangeItalicCommand, SetRangeProtectionFromContextMenuCommand, SetRangeStrickThroughCommand, SetRangeSubscriptCommand, SetRangeSuperscriptCommand, SetRangeTextColorCommand, SetRangeUnderlineCommand, SetRowFrozenCommand, SetRowHeaderWidthCommand, SetScrollOperation, SetScrollRelativeCommand, SetSelectionFrozenCommand, SetWorksheetColAutoWidthCommand, SetZoomRatioCommand, SetZoomRatioOperation, SheetBar, SheetBarService, SheetCanvasPopManagerService, SheetCellDropdownManagerService, SheetCellEditorResizeService, SheetClipboardController, SheetClipboardService, SheetCopyCommand, SheetCutCommand, SheetMenuPosition, SheetPasteBesidesBorderCommand, SheetPasteColWidthCommand, SheetPasteCommand, SheetPasteFormatCommand, SheetPasteShortKeyCommand, SheetPasteValueCommand, SheetPermissionCheckUIController, SheetPermissionOpenDialogOperation, SheetPermissionOpenPanelOperation, SheetPermissionRenderManagerService, SheetPermissionUserManagerService, SheetPrintInterceptorService, SheetPrintingResourceCollector, SheetRenderController, SheetScrollManagerService, SheetSelectionRenderService, SheetSkeletonManagerService, SheetUIController, SheetsRenderService, SheetsScrollRenderController, menuSchema as SheetsUIMenuSchema, SheetsUIPart, ShowMenuListCommand, SidebarDefinedNameOperation, StatusBarController, StatusBarService, UNIVER_SHEET_PERMISSION_USER_PART, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, ViewSheetPermissionFromContextMenuCommand, ViewSheetPermissionFromSheetBarCommand, calculateDocSkeletonRects, matchedSelectionByRowColIndex as checkInHeaderRanges, deriveStateFromActiveSheet$, functionDisplayNames, genNormalSelectionStyle, genSelectionByRange, selectionDataForSelectAll as getAllSelection, getCellRealRange, getCoordByCell, getCoordByOffset, getCurrentExclusiveRangeInterest$, getCurrentRangeDisable$, getCustomRangePosition, getEditingCustomRangePosition, getEditorObject, getMatrixPlainText, getObservableWithExclusiveRange$, getRepeatRange, getSheetObject, getTopLeftSelectionOfCurrSheet, getTransformCoord, getViewportByCell, isEmbeddingFormulaEditor, isRangeSelector, menuClipboardDisabledObservable, mergeSetRangeValues, resolveActiveSheetEmbedRuntimeDomScope, resolveSheetEmbedRuntimeDomScope, useActiveWorkbook, useActiveWorksheet, useHighlightRange, useKeyEventConfig, useWorkbooks, virtualizeDiscreteRanges, whenFormulaEditorActivated, whenSheetEditorActivated, whenSheetEditorFocused };