@univerjs/sheets-ui 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/es/index.js

@@ -489,11 +489,13 @@ var BaseSelectionRenderService = class extends Disposable {
 	}
 	newSelectionControl(scene, skeleton, selection) {
 		const zIndex = this.getSelectionControls().length;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
 		const control = new SelectionControl(scene, zIndex, this._selectionTheme, {
 			highlightHeader: this._highlightHeader,
 			rowHeaderWidth,
-			columnHeaderHeight
+			columnHeaderHeight,
+			rowHeaderOffsetX: Math.max(0, rowHeaderWidthAndMarginLeft - rowHeaderWidth),
+			columnHeaderOffsetY: Math.max(0, columnHeaderHeightAndMarginTop - columnHeaderHeight)
 		});
 		this._selectionControls.push(control);
 		const selectionWithCoord = attachSelectionWithCoord(selection, skeleton);
@@ -1779,7 +1781,7 @@ const SELECTION_TITLE_HIGHLIGHT_ALPHA = .3;
 */
 var SelectionControl = class extends Disposable {
 	constructor(_scene, _zIndex, _themeService, options) {
-		var _options$enableAutoFi, _options$highlightHea, _options$rowHeaderWid, _options$columnHeader;
+		var _options$enableAutoFi, _options$highlightHea, _options$rowHeaderWid, _options$columnHeader, _options$rowHeaderOff, _options$columnHeader2;
 		super();
 		this._scene = _scene;
 		this._zIndex = _zIndex;
@@ -1818,6 +1820,8 @@ var SelectionControl = class extends Disposable {
 		_defineProperty(this, "_currentStyle", void 0);
 		_defineProperty(this, "_rowHeaderWidth", 0);
 		_defineProperty(this, "_columnHeaderHeight", 0);
+		_defineProperty(this, "_rowHeaderOffsetX", 0);
+		_defineProperty(this, "_columnHeaderOffsetY", 0);
 		_defineProperty(this, "_widgetRects", []);
 		_defineProperty(this, "_controlExtension", void 0);
 		_defineProperty(this, "_dispose$", new BehaviorSubject(this));
@@ -1835,6 +1839,8 @@ var SelectionControl = class extends Disposable {
 		this._highlightHeader = (_options$highlightHea = options === null || options === void 0 ? void 0 : options.highlightHeader) !== null && _options$highlightHea !== void 0 ? _options$highlightHea : true;
 		this._rowHeaderWidth = (_options$rowHeaderWid = options === null || options === void 0 ? void 0 : options.rowHeaderWidth) !== null && _options$rowHeaderWid !== void 0 ? _options$rowHeaderWid : 0;
 		this._columnHeaderHeight = (_options$columnHeader = options === null || options === void 0 ? void 0 : options.columnHeaderHeight) !== null && _options$columnHeader !== void 0 ? _options$columnHeader : 0;
+		this._rowHeaderOffsetX = (_options$rowHeaderOff = options === null || options === void 0 ? void 0 : options.rowHeaderOffsetX) !== null && _options$rowHeaderOff !== void 0 ? _options$rowHeaderOff : 0;
+		this._columnHeaderOffsetY = (_options$columnHeader2 = options === null || options === void 0 ? void 0 : options.columnHeaderOffsetY) !== null && _options$columnHeader2 !== void 0 ? _options$columnHeader2 : 0;
 		this._initializeSheetBody();
 		this._initialHeader();
 	}
@@ -2199,6 +2205,8 @@ var SelectionControl = class extends Disposable {
 		if (sk) {
 			this._rowHeaderWidth = sk.rowHeaderWidth;
 			this._columnHeaderHeight = sk.columnHeaderHeight;
+			this._rowHeaderOffsetX = Math.max(0, sk.rowHeaderWidthAndMarginLeft - sk.rowHeaderWidth);
+			this._columnHeaderOffsetY = Math.max(0, sk.columnHeaderHeightAndMarginTop - sk.columnHeaderHeight);
 		}
 		this._selectionRenderModel.setValue(selectionWthCoord.rangeWithCoord, selectionWthCoord.primaryWithCoord);
 		this._showAutoFill = selectionWthCoord.primaryWithCoord !== null;
@@ -2219,6 +2227,8 @@ var SelectionControl = class extends Disposable {
 	update(newSelectionRange, rowHeaderWidth = 0, columnHeaderHeight = 0, style, primaryCell) {
 		this._rowHeaderWidth = rowHeaderWidth;
 		this._columnHeaderHeight = columnHeaderHeight;
+		this._rowHeaderOffsetX = 0;
+		this._columnHeaderOffsetY = 0;
 		this.updateRangeBySelectionWithCoord({
 			rangeWithCoord: newSelectionRange,
 			primaryWithCoord: primaryCell,
@@ -2338,6 +2348,8 @@ var SelectionControl = class extends Disposable {
 		columnHeaderStrokeWidth /= scale;
 		const rowHeaderWidth = this._rowHeaderWidth;
 		const columnHeaderHeight = this._columnHeaderHeight;
+		const rowHeaderOffsetX = this._rowHeaderOffsetX;
+		const columnHeaderOffsetY = this._columnHeaderOffsetY;
 		if (this._highlightHeader && columnHeaderHeight > 0) {
 			let highlightTitleColor = columnHeaderFill;
 			if (rangeType === RANGE_TYPE.COLUMN) highlightTitleColor = new ColorKit(stroke).setAlpha(SELECTION_TITLE_HIGHLIGHT_ALPHA).toString();
@@ -2350,7 +2362,7 @@ var SelectionControl = class extends Disposable {
 				top: columnHeaderHeight - columnHeaderStrokeWidth + 1 / scale
 			});
 			this._columnHeaderGroup.show();
-			this._columnHeaderGroup.translate(startX, 0);
+			this._columnHeaderGroup.translate(startX, columnHeaderOffsetY);
 		} else this._columnHeaderGroup.hide();
 		this._columnHeaderGroup.makeDirty(true);
 		if (this._highlightHeader && rowHeaderWidth > 0) {
@@ -2365,7 +2377,7 @@ var SelectionControl = class extends Disposable {
 				left: rowHeaderWidth - rowHeaderStrokeWidth + 1 / scale
 			});
 			this._rowHeaderGroup.show();
-			this._rowHeaderGroup.translate(0, startY);
+			this._rowHeaderGroup.translate(rowHeaderOffsetX, startY);
 		} else this._rowHeaderGroup.hide();
 		this._rowHeaderGroup.makeDirty(true);
 	}
@@ -2705,10 +2717,6 @@ function cloneCellDataWithSpanInfo(cell) {
 //#endregion
 //#region src/services/clipboard/copy-content-cache.ts
 const COPY_CONTENT_CACHE_LIMIT = 10;
-const ID_LENGTH = 6;
-function genId() {
-	return generateRandomId(ID_LENGTH);
-}
 function extractId(html) {
 	const match = html.match(/data-copy-id="([^\s]+)"/);
 	if (match && match[1]) return match[1];
@@ -4196,7 +4204,7 @@ let SheetClipboardService = class SheetClipboardService extends Disposable {
 			rowIndex += 1;
 		}
 		for (let c = startColumn; c <= endColumn; c++) discreteRange.cols.push(c);
-		const copyId = genId();
+		const copyId = generateRandomId(6);
 		const html = this._usmToHtml.convert(matrix, discreteRange, hooks, copyId);
 		return {
 			copyId,
@@ -14488,7 +14496,7 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends Di
 			var _this$_sheetSkeletonM;
 			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
 			if (skeleton == null || this._rowResizeRect == null || this._columnResizeRect == null) return;
-			const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+			const { rowBaseWidth, rowGutterWidth, columnBaseHeight, columnGutterHeight } = getHeaderBaseLayout$1(skeleton);
 			const { startX, startY, endX, endY, row, column } = getCoordByOffset(evt.offsetX, evt.offsetY, scene, skeleton);
 			const isLastRow = row === skeleton.worksheet.getRowCount() - 1;
 			const isLastColumn = column === skeleton.worksheet.getColumnCount() - 1;
@@ -14508,9 +14516,9 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends Di
 				}
 				if (this._currentRow === -1) return;
 				if (!this.interceptor.fetchThroughInterceptors(HEADER_RESIZE_PERMISSION_CHECK)(null, { row: this._currentRow })) return false;
-				const rowSize = Math.min(44, rowHeaderWidth / 3);
+				const rowSize = Math.min(44, rowBaseWidth / 3);
 				this._rowResizeRect.transformByState({
-					left: rowHeaderWidth / 2 - rowSize / 2,
+					left: rowGutterWidth + rowBaseWidth / 2 - rowSize / 2,
 					top
 				});
 				this._rowResizeRect.setShapeProps({ size: rowSize });
@@ -14528,10 +14536,10 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends Di
 				}
 				if (this._currentColumn === -1) return;
 				if (!this.interceptor.fetchThroughInterceptors(HEADER_RESIZE_PERMISSION_CHECK)(null, { col: this._currentColumn })) return false;
-				const columnSize = columnHeaderHeight * .7;
+				const columnSize = columnBaseHeight * .7;
 				this._columnResizeRect.transformByState({
 					left,
-					top: columnHeaderHeight / 2 - columnSize / 2
+					top: columnGutterHeight + columnBaseHeight / 2 - columnSize / 2
 				});
 				this._columnResizeRect.setShapeProps({ size: columnSize });
 				this._columnResizeRect.show();
@@ -14576,9 +14584,9 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends Di
 			let isStartMove = false;
 			let moveChangeX = 0;
 			let moveChangeY = 0;
-			const { columnTotalWidth, rowHeaderWidth, rowTotalHeight, columnHeaderHeight } = skeleton;
-			const shapeWidth = canvasMaxWidth > columnTotalWidth + rowHeaderWidth ? canvasMaxWidth : columnTotalWidth + rowHeaderWidth;
-			const shapeHeight = canvasMaxHeight > rowTotalHeight + columnHeaderHeight ? canvasMaxHeight : rowTotalHeight + columnHeaderHeight;
+			const { columnTotalWidth, rowHeaderWidthAndMarginLeft, rowTotalHeight, columnHeaderHeightAndMarginTop } = skeleton;
+			const shapeWidth = canvasMaxWidth > columnTotalWidth + rowHeaderWidthAndMarginLeft ? canvasMaxWidth : columnTotalWidth + rowHeaderWidthAndMarginLeft;
+			const shapeHeight = canvasMaxHeight > rowTotalHeight + columnHeaderHeightAndMarginTop ? canvasMaxHeight : rowTotalHeight + columnHeaderHeightAndMarginTop;
 			const HEADER_MENU_SHAPE_THUMB_SIZE_SCALE = 4 / Math.max(scaleX, scaleY);
 			if (initialType === 0) this._resizeHelperShape = new Rect(HEADER_RESIZE_CONTROLLER_SHAPE_HELPER, {
 				width: shapeWidth,
@@ -14711,126 +14719,498 @@ HeaderResizeRenderController = __decorate([
 	__decorateParam(2, Inject(SheetsSelectionsService)),
 	__decorateParam(3, ICommandService)
 ], HeaderResizeRenderController);
+function getHeaderBaseLayout$1(skeleton) {
+	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
+	const config = (_skeleton$worksheet$g = (_skeleton$worksheet = skeleton.worksheet).getConfig) === null || _skeleton$worksheet$g === void 0 ? void 0 : _skeleton$worksheet$g.call(_skeleton$worksheet);
+	const configuredRowWidth = config === null || config === void 0 || (_config$rowHeader = config.rowHeader) === null || _config$rowHeader === void 0 ? void 0 : _config$rowHeader.width;
+	const configuredColumnHeight = config === null || config === void 0 || (_config$columnHeader = config.columnHeader) === null || _config$columnHeader === void 0 ? void 0 : _config$columnHeader.height;
+	const rowBaseWidth = typeof configuredRowWidth === "number" && configuredRowWidth > 0 ? Math.min(configuredRowWidth, skeleton.rowHeaderWidth) : skeleton.rowHeaderWidth;
+	const columnBaseHeight = typeof configuredColumnHeight === "number" && configuredColumnHeight > 0 ? Math.min(configuredColumnHeight, skeleton.columnHeaderHeight) : skeleton.columnHeaderHeight;
+	return {
+		rowBaseWidth,
+		rowGutterWidth: Math.max(0, skeleton.rowHeaderWidthAndMarginLeft - rowBaseWidth),
+		columnBaseHeight,
+		columnGutterHeight: Math.max(0, skeleton.columnHeaderHeightAndMarginTop - columnBaseHeight)
+	};
+}
 
 //#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/services/header-unhide-range.service.ts
+let HeaderUnhideRangeAxis = /* @__PURE__ */ function(HeaderUnhideRangeAxis) {
+	HeaderUnhideRangeAxis["ROW"] = "row";
+	HeaderUnhideRangeAxis["COLUMN"] = "column";
+	return HeaderUnhideRangeAxis;
+}({});
+var HeaderUnhideRangeService = class {
+	constructor() {
+		_defineProperty(this, "_visibleHandlers", /* @__PURE__ */ new Set());
 	}
-	_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);
-		}));
+	registerRangeVisibleHandler(handler) {
+		this._visibleHandlers.add(handler);
+		const dispose = () => this._visibleHandlers.delete(handler);
+		return {
+			dispose,
+			unsubscribe: dispose
+		};
 	}
-	_initRenderMetricSubscriber() {
-		const { engine } = this._context;
-		engine.beginFrame$.subscribe(() => {
-			this._renderFrameTimeMetric = null;
-			this._renderFrameTags = {};
+	shouldRenderRange(visible, payload) {
+		let nextVisible = visible;
+		for (const handler of this._visibleHandlers) nextVisible = handler(nextVisible, payload);
+		return nextVisible;
+	}
+};
+
+//#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)";
+var HeaderMenuShape = class extends Shape {
+	constructor(key, props) {
+		super(key, props);
+		_defineProperty(this, "_size", 12);
+		_defineProperty(this, "_iconRatio", .4);
+		_defineProperty(this, "_mode", 0);
+		this.setShapeProps(props);
+	}
+	setShapeProps(props) {
+		if (props === null || props === void 0 ? void 0 : props.size) this._size = props.size;
+		if (props === null || props === void 0 ? void 0 : props.mode) this._mode = props.mode;
+		this.transformByState({
+			width: this._size,
+			height: this._size
 		});
-		engine.endFrame$.subscribe(() => {
-			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).filter((key) => key.startsWith(SHEET_EXTENSION_PREFIX)).length > 0) this._afterRenderMetric$.next({
-				frameTimeMetric: this._renderFrameTimeMetric,
-				tags: this._renderFrameTags
-			});
+	}
+	_draw(ctx) {
+		if (this._mode === 1) Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			radius: this._size,
+			fill: HEADER_MENU_SHAPE_CIRCLE_FILL
 		});
-		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);
+		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
 		});
-		engine.renderFrameTags$.subscribe(([key, value]) => {
-			this._renderFrameTags[key] = value;
+	}
+};
+
+//#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)
 		});
-		const frameInfoList = [];
-		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;
-			}
+	}
+	_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
+			});
+		}
 	}
 	/**
-	* Send render metric to telemetry service
-	* @param frameInfoList
+	*
+	* @param ctx
 	*/
-	_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)
-			};
+	_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 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
+		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 / 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
+		});
+		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: []
+		});
+		_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) => {
+			var _visibleCheck;
+			return this._headerUnhideRangeService.shouldRenderRange((_visibleCheck = visibleCheck(true, payload)) !== null && _visibleCheck !== void 0 ? _visibleCheck : 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).filter((key) => key.startsWith(SHEET_EXTENSION_PREFIX)).length > 0) 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);
@@ -14971,13 +15351,13 @@ let SheetRenderController = class SheetRenderController extends RxDisposable {
 			const spreadsheetRowHeader = components.get("__SpreadsheetRowHeader__");
 			const spreadsheetColumnHeader = components.get("__SpreadsheetColumnHeader__");
 			const spreadsheetLeftTopPlaceholder = components.get("__SpreadsheetLeftTopPlaceholder__");
-			const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
+			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: rowHeaderWidth,
-				height: columnHeaderHeight
+				width: leftTopPlaceholderSize.width,
+				height: leftTopPlaceholderSize.height
 			});
 		}));
 	}
@@ -15097,6 +15477,13 @@ SheetRenderController = __decorate([
 	__decorateParam(4, ICommandService),
 	__decorateParam(5, Optional(ITelemetryService))
 ], SheetRenderController);
+function getLeftTopPlaceholderSize(skeleton) {
+	var _skeleton$rowHeaderWi, _skeleton$columnHeade;
+	return {
+		width: (_skeleton$rowHeaderWi = skeleton.rowHeaderWidthAndMarginLeft) !== null && _skeleton$rowHeaderWi !== void 0 ? _skeleton$rowHeaderWi : skeleton.rowHeaderWidth,
+		height: (_skeleton$columnHeade = skeleton.columnHeaderHeightAndMarginTop) !== null && _skeleton$columnHeade !== void 0 ? _skeleton$columnHeade : skeleton.columnHeaderHeight
+	};
+}
 
 //#endregion
 //#region src/components/border-panel/border-line/icons/BorderDashDot.tsx
@@ -16292,7 +16679,6 @@ function ClearSelectionContentMenuItemFactory(accessor) {
 	return {
 		id: ClearSelectionContentCommand.id,
 		type: MenuItemType.BUTTON,
-		icon: "ClearFormatDoubleIcon",
 		title: "rightClick.clearContent",
 		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
 			workbookTypes: [WorkbookEditablePermission],
@@ -16306,7 +16692,6 @@ function ClearSelectionFormatMenuItemFactory(accessor) {
 	return {
 		id: ClearSelectionFormatCommand.id,
 		type: MenuItemType.BUTTON,
-		icon: "ClearFormatDoubleIcon",
 		title: "rightClick.clearFormat",
 		disabled$: getCurrentRangeDisable$(accessor, {
 			workbookTypes: [WorkbookEditablePermission],
@@ -16316,11 +16701,28 @@ function ClearSelectionFormatMenuItemFactory(accessor) {
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET)
 	};
 }
-function ClearSelectionAllMenuItemFactory(accessor) {
+function ClearSelectionAllToolbarMenuItemFactory(accessor) {
 	return {
 		id: ClearSelectionAllCommand.id,
 		type: MenuItemType.BUTTON,
 		icon: "ClearFormatDoubleIcon",
+		tooltip: "rightClick.clearAll",
+		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [
+				WorksheetEditPermission,
+				WorksheetSetCellValuePermission,
+				WorksheetSetCellStylePermission
+			],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})),
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET)
+	};
+}
+function ClearSelectionAllMenuItemFactory(accessor) {
+	return {
+		id: ClearSelectionAllCommand.id,
+		type: MenuItemType.BUTTON,
 		title: "rightClick.clearAll",
 		tooltip: "rightClick.clearAll",
 		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
@@ -18617,7 +19019,7 @@ const menuSchema = {
 			},
 			[ClearSelectionAllCommand.id]: {
 				order: 3,
-				menuItemFactory: ClearSelectionAllMenuItemFactory
+				menuItemFactory: ClearSelectionAllToolbarMenuItemFactory
 			}
 		},
 		[RibbonStartGroup.FORMAT]: {
@@ -23961,7 +24363,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.22.1";
+var version = "0.23.0-insiders.20260522-e8f2a3b";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts
@@ -26755,28 +27157,30 @@ var RangeProtectionRenderExtension = class extends SheetExtension {
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	draw(ctx, _parentScale, spreadsheetSkeleton) {
+	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return;
 		ctx.save();
 		if (!this._pattern) this._pattern = ctx.createPattern(this._img, "repeat");
 		this.renderCache.clear();
-		Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => {
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
-			if (!this._pattern) return;
-			ctx.fillStyle = this._pattern;
-			selectionProtection.forEach((config) => {
-				if (!config.ruleId) return;
-				if (this.shouldRender(config)) {
-					if (this.renderCache.has(config.ruleId)) return;
-					this.renderCache.add(config.ruleId);
-					config.ranges.forEach((range) => {
-						const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
-						const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
-						ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
-					});
-				}
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment]).forEach((range) => {
+			Range.foreach(range, (row, col) => {
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
+				if (!this._pattern) return;
+				ctx.fillStyle = this._pattern;
+				selectionProtection.forEach((config) => {
+					if (!config.ruleId) return;
+					if (this.shouldRender(config)) {
+						if (this.renderCache.has(config.ruleId)) return;
+						this.renderCache.add(config.ruleId);
+						config.ranges.forEach((range) => {
+							const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
+							const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
+							ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
+						});
+					}
+				});
 			});
 		});
 		ctx.restore();
@@ -26862,690 +27266,394 @@ var WorksheetProtectionRenderExtension = class extends SheetExtension {
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	setZIndex(zIndex) {
-		this.Z_INDEX = zIndex;
-	}
-};
-
-//#endregion
-//#region src/controllers/permission/sheet-permission-render.controller.ts
-let SheetPermissionRenderManagerController = class SheetPermissionRenderManagerController extends Disposable {
-	constructor(_injector, _componentManager) {
-		super();
-		this._injector = _injector;
-		this._componentManager = _componentManager;
-		this._init();
-	}
-	_init() {
-		this._initComponents();
-		this._initUiPartComponents();
-	}
-	_initComponents() {
-		[
-			[permissionMenuIconKey, ProtectIcon],
-			[permissionDeleteIconKey, DeleteIcon],
-			[permissionEditIconKey, WriteIcon],
-			[permissionCheckIconKey, CheckMarkIcon],
-			[permissionLockIconKey, LockIcon],
-			[UNIVER_SHEET_PERMISSION_PANEL, SheetPermissionPanel],
-			[UNIVER_SHEET_PERMISSION_USER_DIALOG, SheetPermissionUserDialog],
-			[UNIVER_SHEET_PERMISSION_DIALOG, SheetPermissionDialog],
-			[UNIVER_SHEET_PERMISSION_ALERT_DIALOG, AlertDialog]
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
-	_initUiPartComponents() {
-		const config = this._injector.get(IConfigService).getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		if (config === null || config === void 0 ? void 0 : config.protectedRangeUserSelector) {
-			const { component, framework } = config.protectedRangeUserSelector;
-			this.disposeWithMe(this._componentManager.register(UNIVER_SHEET_PERMISSION_USER_PART, component, { framework }));
-		}
-	}
-};
-SheetPermissionRenderManagerController = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, Inject(ComponentManager))], SheetPermissionRenderManagerController);
-let SheetPermissionRenderController = class SheetPermissionRenderController extends Disposable {
-	constructor(_context, _rangeProtectionRuleModel, _sheetSkeletonManagerService, _permissionService, _configService) {
-		super();
-		this._context = _context;
-		this._rangeProtectionRuleModel = _rangeProtectionRuleModel;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._permissionService = _permissionService;
-		this._configService = _configService;
-		_defineProperty(this, "_rangeProtectionCanViewRenderExtension", void 0);
-		_defineProperty(this, "_rangeProtectionCanNotViewRenderExtension", void 0);
-		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
-		this._rangeProtectionCanViewRenderExtension = new RangeProtectionCanViewRenderExtension(shadowStrategy);
-		this._rangeProtectionCanNotViewRenderExtension = new RangeProtectionCanNotViewRenderExtension(shadowStrategy);
-		this._initSkeleton();
-		this._initRender();
-		this.disposeWithMe(this._rangeProtectionRuleModel.ruleChange$.subscribe((info) => {
-			var _info$oldRule, _info$oldRule2;
-			if (((_info$oldRule = info.oldRule) === null || _info$oldRule === void 0 ? void 0 : _info$oldRule.id) && this._rangeProtectionCanViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanViewRenderExtension.clearCache();
-			if (((_info$oldRule2 = info.oldRule) === null || _info$oldRule2 === void 0 ? void 0 : _info$oldRule2.id) && this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanNotViewRenderExtension.clearCache();
-		}));
-	}
-	_initRender() {
-		const spreadsheetRender = this._context.mainComponent;
-		if (spreadsheetRender) {
-			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanViewRenderExtension);
-			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanNotViewRenderExtension);
-		}
-	}
-	_initSkeleton() {
-		const markDirtySkeleton = () => {
-			var _this$_context$mainCo;
-			this._sheetSkeletonManagerService.reCalculate();
-			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
-		};
-		this.disposeWithMe(merge$1(this._permissionService.permissionPointUpdate$.pipe(throttleTime(300, void 0, { trailing: true })), this._rangeProtectionRuleModel.rangeRuleInitStateChange$, this._rangeProtectionRuleModel.ruleChange$).pipe().subscribe(markDirtySkeleton));
-	}
-};
-SheetPermissionRenderController = __decorate([
-	__decorateParam(1, Inject(RangeProtectionRuleModel)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, IPermissionService),
-	__decorateParam(4, IConfigService)
-], SheetPermissionRenderController);
-let WorksheetProtectionRenderController = class WorksheetProtectionRenderController extends Disposable {
-	constructor(_context, _renderManagerService, _sheetSkeletonManagerService, _worksheetProtectionRuleModel, _configService) {
-		super();
-		this._context = _context;
-		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._worksheetProtectionRuleModel = _worksheetProtectionRuleModel;
-		this._configService = _configService;
-		_defineProperty(this, "_worksheetProtectionRenderExtension", void 0);
-		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
-		this._worksheetProtectionRenderExtension = new WorksheetProtectionRenderExtension(shadowStrategy);
-		this._initSkeleton();
-		if (shadowStrategy === "none") return;
-		this._initRender();
-	}
-	_initRender() {
-		const renderId = this._context.unitId;
-		const render = renderId && this._renderManagerService.getRenderById(renderId);
-		const spreadsheetRender = render && render.mainComponent;
-		if (spreadsheetRender) {
-			if (!spreadsheetRender.getExtensionByKey("worksheet-protection")) spreadsheetRender.register(this._worksheetProtectionRenderExtension);
-		}
-	}
-	_initSkeleton() {
-		const markDirtySkeleton = () => {
-			var _this$_context$mainCo2;
-			this._sheetSkeletonManagerService.reCalculate();
-			(_this$_context$mainCo2 = this._context.mainComponent) === null || _this$_context$mainCo2 === void 0 || _this$_context$mainCo2.makeDirty();
-		};
-		this.disposeWithMe(merge$1(this._worksheetProtectionRuleModel.worksheetRuleInitStateChange$).pipe().subscribe(markDirtySkeleton));
-	}
-};
-WorksheetProtectionRenderController = __decorate([
-	__decorateParam(1, Inject(IRenderManagerService)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, Inject(WorksheetProtectionRuleModel)),
-	__decorateParam(4, Inject(IConfigService))
-], WorksheetProtectionRenderController);
-
-//#endregion
-//#region src/controllers/render-controllers/clipboard.render-controller.ts
-let ClipboardRenderController = class ClipboardRenderController extends Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _sheetClipboardService, _sheetClipboardController) {
-		super();
-		this._context = _context;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetClipboardService = _sheetClipboardService;
-		this._sheetClipboardController = _sheetClipboardController;
-		this._initialize();
-	}
-	_initialize() {
-		this.disposeWithMe(toDisposable(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((skeleton) => {
-			if (!(skeleton === null || skeleton === void 0 ? void 0 : skeleton.unitId)) return;
-			if (!this._sheetClipboardService.getPasteMenuVisible()) return;
-			const pasteOptionsCache = this._sheetClipboardService.getPasteOptionsCache();
-			const menuUnitId = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.unitId;
-			if (skeleton.unitId === menuUnitId) this._sheetClipboardController.refreshOptionalPaste();
-		})));
-	}
-};
-ClipboardRenderController = __decorate([
-	__decorateParam(1, Inject(SheetSkeletonManagerService)),
-	__decorateParam(2, ISheetClipboardService),
-	__decorateParam(3, Inject(SheetClipboardController))
-], ClipboardRenderController);
-
-//#endregion
-//#region src/controllers/render-controllers/format-painter.render-controller.ts
-let FormatPainterRenderController = class FormatPainterRenderController extends Disposable {
-	constructor(_context, _formatPainterService, _selectionRenderService, _commandService) {
-		super();
-		this._context = _context;
-		this._formatPainterService = _formatPainterService;
-		this._selectionRenderService = _selectionRenderService;
-		this._commandService = _commandService;
-		this._initialize();
-	}
-	_initialize() {
-		this._bindFormatPainterStatus();
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._selectionRenderService.selectionMoveEnd$.subscribe((selections) => {
-			if (this._formatPainterService.getStatus() !== 0) {
-				var _this$_context$unit$g;
-				const { rangeWithCoord } = selections[selections.length - 1];
-				this._commandService.executeCommand(ApplyFormatPainterCommand.id, {
-					unitId: this._context.unitId,
-					subUnitId: ((_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId()) || "",
-					range: {
-						startRow: rangeWithCoord.startRow,
-						startColumn: rangeWithCoord.startColumn,
-						endRow: rangeWithCoord.endRow,
-						endColumn: rangeWithCoord.endColumn
-					}
-				});
-				if (this._formatPainterService.getStatus() === 1) this._commandService.executeCommand(SetOnceFormatPainterCommand.id);
-			}
-		}));
-	}
-	_bindFormatPainterStatus() {
-		this.disposeWithMe(toDisposable(this._formatPainterService.status$.subscribe((status) => {
-			const scene = this._context.scene;
-			if (!scene) return;
-			if (status !== 0) scene.setDefaultCursor(CURSOR_TYPE.CELL);
-			else scene.setDefaultCursor(CURSOR_TYPE.DEFAULT);
-		})));
-	}
+	setZIndex(zIndex) {
+		this.Z_INDEX = zIndex;
+	}
 };
-FormatPainterRenderController = __decorate([
-	__decorateParam(1, IFormatPainterService),
-	__decorateParam(2, ISheetSelectionRenderService),
-	__decorateParam(3, ICommandService)
-], FormatPainterRenderController);
 
 //#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)";
-var HeaderMenuShape = class extends Shape {
-	constructor(key, props) {
-		super(key, props);
-		_defineProperty(this, "_size", 12);
-		_defineProperty(this, "_iconRatio", .4);
-		_defineProperty(this, "_mode", 0);
-		this.setShapeProps(props);
+//#region src/controllers/permission/sheet-permission-render.controller.ts
+let SheetPermissionRenderManagerController = class SheetPermissionRenderManagerController extends Disposable {
+	constructor(_injector, _componentManager) {
+		super();
+		this._injector = _injector;
+		this._componentManager = _componentManager;
+		this._init();
 	}
-	setShapeProps(props) {
-		if (props === null || props === void 0 ? void 0 : props.size) this._size = props.size;
-		if (props === null || props === void 0 ? void 0 : props.mode) this._mode = props.mode;
-		this.transformByState({
-			width: this._size,
-			height: this._size
-		});
+	_init() {
+		this._initComponents();
+		this._initUiPartComponents();
 	}
-	_draw(ctx) {
-		if (this._mode === 1) Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			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
+	_initComponents() {
+		[
+			[permissionMenuIconKey, ProtectIcon],
+			[permissionDeleteIconKey, DeleteIcon],
+			[permissionEditIconKey, WriteIcon],
+			[permissionCheckIconKey, CheckMarkIcon],
+			[permissionLockIconKey, LockIcon],
+			[UNIVER_SHEET_PERMISSION_PANEL, SheetPermissionPanel],
+			[UNIVER_SHEET_PERMISSION_USER_DIALOG, SheetPermissionUserDialog],
+			[UNIVER_SHEET_PERMISSION_DIALOG, SheetPermissionDialog],
+			[UNIVER_SHEET_PERMISSION_ALERT_DIALOG, AlertDialog]
+		].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
 	}
+	_initUiPartComponents() {
+		const config = this._injector.get(IConfigService).getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		if (config === null || config === void 0 ? void 0 : config.protectedRangeUserSelector) {
+			const { component, framework } = config.protectedRangeUserSelector;
+			this.disposeWithMe(this._componentManager.register(UNIVER_SHEET_PERMISSION_USER_PART, component, { framework }));
+		}
+	}
 };
-
-//#endregion
-//#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)";
-let HeaderMenuRenderController = class HeaderMenuRenderController extends Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
+SheetPermissionRenderManagerController = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, Inject(ComponentManager))], SheetPermissionRenderManagerController);
+let SheetPermissionRenderController = class SheetPermissionRenderController extends Disposable {
+	constructor(_context, _rangeProtectionRuleModel, _sheetSkeletonManagerService, _permissionService, _configService) {
 		super();
 		this._context = _context;
+		this._rangeProtectionRuleModel = _rangeProtectionRuleModel;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._contextMenuService = _contextMenuService;
-		this._commandService = _commandService;
-		this._selectionManagerService = _selectionManagerService;
-		_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);
-		this._initialize();
-	}
-	dispose() {
-		var _this$_hoverRect, _this$_hoverMenu, _this$_headerPointerS;
-		(_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._permissionService = _permissionService;
+		this._configService = _configService;
+		_defineProperty(this, "_rangeProtectionCanViewRenderExtension", void 0);
+		_defineProperty(this, "_rangeProtectionCanNotViewRenderExtension", void 0);
+		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
+		this._rangeProtectionCanViewRenderExtension = new RangeProtectionCanViewRenderExtension(shadowStrategy);
+		this._rangeProtectionCanNotViewRenderExtension = new RangeProtectionCanNotViewRenderExtension(shadowStrategy);
+		this._initSkeleton();
+		this._initRender();
+		this.disposeWithMe(this._rangeProtectionRuleModel.ruleChange$.subscribe((info) => {
+			var _info$oldRule, _info$oldRule2;
+			if (((_info$oldRule = info.oldRule) === null || _info$oldRule === void 0 ? void 0 : _info$oldRule.id) && this._rangeProtectionCanViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanViewRenderExtension.clearCache();
+			if (((_info$oldRule2 = info.oldRule) === null || _info$oldRule2 === void 0 ? void 0 : _info$oldRule2.id) && this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanNotViewRenderExtension.clearCache();
+		}));
 	}
-	_initialize() {
-		const scene = this._context.scene;
-		this._hoverRect = new Rect(HEADER_MENU_CONTROLLER_SHAPE, {
-			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
-			evented: false
-		});
-		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
-			zIndex: 100,
-			visible: false
-		});
-		scene.addObjects([this._hoverRect, this._hoverMenu], 10);
-		this._initialHover(0);
-		this._initialHover(1);
-		this._initialHoverMenu();
+	_initRender() {
+		const spreadsheetRender = this._context.mainComponent;
+		if (spreadsheetRender) {
+			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanViewRenderExtension);
+			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanNotViewRenderExtension);
+		}
 	}
-	_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;
-		const pointerMoveHandler = (evt) => {
-			var _this$_sheetSkeletonM;
-			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
-			if (skeleton == null) return;
-			const { rowHeaderWidth, columnHeaderHeight } = 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({
-					width: rowHeaderWidth,
-					height: endY - startY,
-					left: 0,
-					top: startY
-				});
-			} else {
-				var _this$_hoverRect3;
-				this._currentColumn = column;
-				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
-					width: endX - startX,
-					height: columnHeaderHeight,
-					left: startX,
-					top: 0
-				});
-				if (this._hoverMenu == null) return;
-				if (endX - startX < columnHeaderHeight * 2) {
-					this._hoverMenu.hide();
-					return;
-				}
-				const menuSize = columnHeaderHeight * .8;
-				this._hoverMenu.transformByState({
-					left: endX - columnHeaderHeight,
-					top: columnHeaderHeight / 2 - menuSize / 2
-				});
-				this._hoverMenu.setShapeProps({ size: menuSize });
-				this._hoverMenu.show();
-			}
-		};
-		const pointerEnterHandler = () => {
-			var _this$_hoverRect4;
-			(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.show();
-		};
-		const pointerLeaveHandler = () => {
-			var _this$_hoverRect5, _this$_hoverMenu2;
-			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.hide();
-			(_this$_hoverMenu2 = this._hoverMenu) === null || _this$_hoverMenu2 === void 0 || _this$_hoverMenu2.hide();
+	_initSkeleton() {
+		const markDirtySkeleton = () => {
+			var _this$_context$mainCo;
+			this._sheetSkeletonManagerService.reCalculate();
+			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
 		};
-		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.disposeWithMe(merge$1(this._permissionService.permissionPointUpdate$.pipe(throttleTime(300, void 0, { trailing: true })), this._rangeProtectionRuleModel.rangeRuleInitStateChange$, this._rangeProtectionRuleModel.ruleChange$).pipe().subscribe(markDirtySkeleton));
 	}
-	_initialHoverMenu() {
-		if (this._hoverMenu == null) return;
-		this._hoverMenu.onPointerEnter$.subscribeEvent(() => {
-			if (this._hoverMenu == null) return;
-			this._hoverMenu.setProps({
-				mode: 1,
-				visible: true
-			});
-			this._context.scene.setCursor(CURSOR_TYPE.POINTER);
-		});
-		this._hoverMenu.onPointerLeave$.subscribeEvent(() => {
-			if (this._hoverMenu == null) return;
-			this._hoverMenu.setProps({
-				mode: 0,
-				visible: false
-			});
-			this._context.scene.resetCursor();
-		});
-		this._hoverMenu.onPointerDown$.subscribeEvent((evt) => {
-			var _this$_selectionManag;
-			const currentColumn = this._currentColumn;
-			const currentSelectionDatas = (_this$_selectionManag = this._selectionManagerService.getCurrentSelections()) === null || _this$_selectionManag === void 0 ? void 0 : _this$_selectionManag.map((s) => s.range);
-			if (!!!(currentSelectionDatas === null || currentSelectionDatas === void 0 ? void 0 : currentSelectionDatas.filter((range) => range.rangeType === RANGE_TYPE.COLUMN).find((data) => {
-				const { startColumn, endColumn } = data;
-				if (currentColumn >= startColumn && currentColumn <= endColumn) return true;
-				return false;
-			}))) {
-				const selection = this._getSelectionOnColumn(currentColumn);
-				this._commandService.syncExecuteCommand(SetSelectionsOperation.id, selection);
-			}
-			evt.stopPropagation();
-			evt.preventDefault();
-			this._contextMenuService.triggerContextMenu(evt, ContextMenuPosition.COL_HEADER);
-		});
+};
+SheetPermissionRenderController = __decorate([
+	__decorateParam(1, Inject(RangeProtectionRuleModel)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, IPermissionService),
+	__decorateParam(4, IConfigService)
+], SheetPermissionRenderController);
+let WorksheetProtectionRenderController = class WorksheetProtectionRenderController extends Disposable {
+	constructor(_context, _renderManagerService, _sheetSkeletonManagerService, _worksheetProtectionRuleModel, _configService) {
+		super();
+		this._context = _context;
+		this._renderManagerService = _renderManagerService;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._worksheetProtectionRuleModel = _worksheetProtectionRuleModel;
+		this._configService = _configService;
+		_defineProperty(this, "_worksheetProtectionRenderExtension", void 0);
+		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
+		this._worksheetProtectionRenderExtension = new WorksheetProtectionRenderExtension(shadowStrategy);
+		this._initSkeleton();
+		if (shadowStrategy === "none") return;
+		this._initRender();
 	}
-	_getSelectionOnColumn(column) {
-		const workbook = this._context.unit;
-		const worksheet = workbook.getActiveSheet();
-		if (!worksheet) throw new Error("No active worksheet");
-		return {
-			unitId: workbook.getUnitId(),
-			subUnitId: worksheet.getSheetId(),
-			selections: [{
-				range: {
-					startRow: 0,
-					startColumn: column,
-					endRow: worksheet.getRowCount() - 1,
-					endColumn: column,
-					rangeType: RANGE_TYPE.COLUMN
-				},
-				primary: {
-					startRow: 0,
-					startColumn: column,
-					endRow: 0,
-					endColumn: column,
-					actualRow: 0,
-					actualColumn: column,
-					isMerged: false,
-					isMergedMainCell: false
-				},
-				style: null
-			}]
+	_initRender() {
+		const renderId = this._context.unitId;
+		const render = renderId && this._renderManagerService.getRenderById(renderId);
+		const spreadsheetRender = render && render.mainComponent;
+		if (spreadsheetRender) {
+			if (!spreadsheetRender.getExtensionByKey("worksheet-protection")) spreadsheetRender.register(this._worksheetProtectionRenderExtension);
+		}
+	}
+	_initSkeleton() {
+		const markDirtySkeleton = () => {
+			var _this$_context$mainCo2;
+			this._sheetSkeletonManagerService.reCalculate();
+			(_this$_context$mainCo2 = this._context.mainComponent) === null || _this$_context$mainCo2 === void 0 || _this$_context$mainCo2.makeDirty();
 		};
+		this.disposeWithMe(merge$1(this._worksheetProtectionRuleModel.worksheetRuleInitStateChange$).pipe().subscribe(markDirtySkeleton));
 	}
 };
-HeaderMenuRenderController = __decorate([
-	__decorateParam(1, Inject(SheetSkeletonManagerService)),
-	__decorateParam(2, IContextMenuService),
-	__decorateParam(3, ICommandService),
-	__decorateParam(4, Inject(SheetsSelectionsService))
-], HeaderMenuRenderController);
+WorksheetProtectionRenderController = __decorate([
+	__decorateParam(1, Inject(IRenderManagerService)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, Inject(WorksheetProtectionRuleModel)),
+	__decorateParam(4, Inject(IConfigService))
+], WorksheetProtectionRenderController);
 
 //#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/clipboard.render-controller.ts
+let ClipboardRenderController = class ClipboardRenderController extends Disposable {
+	constructor(_context, _sheetSkeletonManagerService, _sheetClipboardService, _sheetClipboardController) {
+		super();
+		this._context = _context;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetClipboardService = _sheetClipboardService;
+		this._sheetClipboardController = _sheetClipboardController;
+		this._initialize();
 	}
-	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)
-		});
+	_initialize() {
+		this.disposeWithMe(toDisposable(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((skeleton) => {
+			if (!(skeleton === null || skeleton === void 0 ? void 0 : skeleton.unitId)) return;
+			if (!this._sheetClipboardService.getPasteMenuVisible()) return;
+			const pasteOptionsCache = this._sheetClipboardService.getPasteOptionsCache();
+			const menuUnitId = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.unitId;
+			if (skeleton.unitId === menuUnitId) this._sheetClipboardController.refreshOptionalPaste();
+		})));
 	}
-	_draw(ctx) {
-		if (this._unhideType === 0) this._drawOnRow(ctx);
-		else this._drawOnCol(ctx);
+};
+ClipboardRenderController = __decorate([
+	__decorateParam(1, Inject(SheetSkeletonManagerService)),
+	__decorateParam(2, ISheetClipboardService),
+	__decorateParam(3, Inject(SheetClipboardController))
+], ClipboardRenderController);
+
+//#endregion
+//#region src/controllers/render-controllers/format-painter.render-controller.ts
+let FormatPainterRenderController = class FormatPainterRenderController extends Disposable {
+	constructor(_context, _formatPainterService, _selectionRenderService, _commandService) {
+		super();
+		this._context = _context;
+		this._formatPainterService = _formatPainterService;
+		this._selectionRenderService = _selectionRenderService;
+		this._commandService = _commandService;
+		this._initialize();
 	}
-	_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
-			});
-		}
+	_initialize() {
+		this._bindFormatPainterStatus();
+		this._commandExecutedListener();
 	}
-	/**
-	*
-	* @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 / 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
-		});
-		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
+	_commandExecutedListener() {
+		this.disposeWithMe(this._selectionRenderService.selectionMoveEnd$.subscribe((selections) => {
+			if (this._formatPainterService.getStatus() !== 0) {
+				var _this$_context$unit$g;
+				const { rangeWithCoord } = selections[selections.length - 1];
+				this._commandService.executeCommand(ApplyFormatPainterCommand.id, {
+					unitId: this._context.unitId,
+					subUnitId: ((_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId()) || "",
+					range: {
+						startRow: rangeWithCoord.startRow,
+						startColumn: rangeWithCoord.startColumn,
+						endRow: rangeWithCoord.endRow,
+						endColumn: rangeWithCoord.endColumn
 					}
-				]],
-				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-			});
-		}
+				});
+				if (this._formatPainterService.getStatus() === 1) this._commandService.executeCommand(SetOnceFormatPainterCommand.id);
+			}
+		}));
+	}
+	_bindFormatPainterStatus() {
+		this.disposeWithMe(toDisposable(this._formatPainterService.status$.subscribe((status) => {
+			const scene = this._context.scene;
+			if (!scene) return;
+			if (status !== 0) scene.setDefaultCursor(CURSOR_TYPE.CELL);
+			else scene.setDefaultCursor(CURSOR_TYPE.DEFAULT);
+		})));
 	}
 };
+FormatPainterRenderController = __decorate([
+	__decorateParam(1, IFormatPainterService),
+	__decorateParam(2, ISheetSelectionRenderService),
+	__decorateParam(3, ICommandService)
+], FormatPainterRenderController);
 
 //#endregion
-//#region src/controllers/render-controllers/header-unhide.render-controller.ts
-const HEADER_UNHIDE_CONTROLLER_SHAPE = "__SpreadsheetHeaderUnhideSHAPEControllerShape__";
-let HeaderUnhideRenderController = class HeaderUnhideRenderController extends RxDisposable {
-	get _workbook() {
-		return this._context.unit;
-	}
-	constructor(_context, _sheetSkeletonManagerService, _commandService) {
+//#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)";
+let HeaderMenuRenderController = class HeaderMenuRenderController extends Disposable {
+	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
 		super();
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._contextMenuService = _contextMenuService;
 		this._commandService = _commandService;
-		_defineProperty(this, "_shapes", {
-			cols: [],
-			rows: []
-		});
-		this._init();
+		this._selectionManagerService = _selectionManagerService;
+		_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);
+		this._initialize();
 	}
 	dispose() {
-		super.dispose();
-		this._clearShapes();
+		var _this$_hoverRect, _this$_hoverMenu, _this$_headerPointerS;
+		(_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;
 	}
-	_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);
+	_initialize() {
+		const scene = this._context.scene;
+		this._hoverRect = new Rect(HEADER_MENU_CONTROLLER_SHAPE, {
+			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
+			evented: false
 		});
-		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);
+		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
+			zIndex: 100,
+			visible: false
+		});
+		scene.addObjects([this._hoverRect, this._hoverMenu], 10);
+		this._initialHover(0);
+		this._initialHover(1);
+		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;
+		const pointerMoveHandler = (evt) => {
+			var _this$_sheetSkeletonM;
+			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
+			if (skeleton == null) return;
+			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({
+					width: rowBaseWidth,
+					height: endY - startY,
+					left: rowGutterWidth,
+					top: startY
+				});
+			} else {
+				var _this$_hoverRect3;
+				this._currentColumn = column;
+				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
+					width: endX - startX,
+					height: columnBaseHeight,
+					left: startX,
+					top: columnGutterHeight
+				});
+				if (this._hoverMenu == null) return;
+				if (endX - startX < columnBaseHeight * 2) {
+					this._hoverMenu.hide();
+					return;
 				}
+				const menuSize = columnBaseHeight * .8;
+				this._hoverMenu.transformByState({
+					left: endX - columnBaseHeight,
+					top: columnGutterHeight + columnBaseHeight / 2 - menuSize / 2
+				});
+				this._hoverMenu.setShapeProps({ size: menuSize });
+				this._hoverMenu.show();
 			}
-		}));
+		};
+		const pointerEnterHandler = () => {
+			var _this$_hoverRect4;
+			(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.show();
+		};
+		const pointerLeaveHandler = () => {
+			var _this$_hoverRect5, _this$_hoverMenu2;
+			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.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);
 	}
-	_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 hiddenRowRanges = worksheet.getHiddenRows();
-		const hiddenColRanges = worksheet.getHiddenCols();
-		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]
-			}));
+	_initialHoverMenu() {
+		if (this._hoverMenu == null) return;
+		this._hoverMenu.onPointerEnter$.subscribeEvent(() => {
+			if (this._hoverMenu == null) return;
+			this._hoverMenu.setProps({
+				mode: 1,
+				visible: true
+			});
+			this._context.scene.setCursor(CURSOR_TYPE.POINTER);
 		});
-		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: 20 - 12,
-				left: position.startX - (hasPrevious ? 12 : 0)
-			}, () => this._commandService.executeCommand(SetSpecificColsVisibleCommand.id, {
-				unitId: workbook.getUnitId(),
-				subUnitId: worksheet.getSheetId(),
-				ranges: [range]
-			}));
+		this._hoverMenu.onPointerLeave$.subscribeEvent(() => {
+			if (this._hoverMenu == null) return;
+			this._hoverMenu.setProps({
+				mode: 0,
+				visible: false
+			});
+			this._context.scene.resetCursor();
+		});
+		this._hoverMenu.onPointerDown$.subscribeEvent((evt) => {
+			var _this$_selectionManag;
+			const currentColumn = this._currentColumn;
+			const currentSelectionDatas = (_this$_selectionManag = this._selectionManagerService.getCurrentSelections()) === null || _this$_selectionManag === void 0 ? void 0 : _this$_selectionManag.map((s) => s.range);
+			if (!!!(currentSelectionDatas === null || currentSelectionDatas === void 0 ? void 0 : currentSelectionDatas.filter((range) => range.rangeType === RANGE_TYPE.COLUMN).find((data) => {
+				const { startColumn, endColumn } = data;
+				if (currentColumn >= startColumn && currentColumn <= endColumn) return true;
+				return false;
+			}))) {
+				const selection = this._getSelectionOnColumn(currentColumn);
+				this._commandService.syncExecuteCommand(SetSelectionsOperation.id, selection);
+			}
+			evt.stopPropagation();
+			evt.preventDefault();
+			this._contextMenuService.triggerContextMenu(evt, ContextMenuPosition.COL_HEADER);
 		});
-		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: []
+	_getSelectionOnColumn(column) {
+		const workbook = this._context.unit;
+		const worksheet = workbook.getActiveSheet();
+		if (!worksheet) throw new Error("No active worksheet");
+		return {
+			unitId: workbook.getUnitId(),
+			subUnitId: worksheet.getSheetId(),
+			selections: [{
+				range: {
+					startRow: 0,
+					startColumn: column,
+					endRow: worksheet.getRowCount() - 1,
+					endColumn: column,
+					rangeType: RANGE_TYPE.COLUMN
+				},
+				primary: {
+					startRow: 0,
+					startColumn: column,
+					endRow: 0,
+					endColumn: column,
+					actualRow: 0,
+					actualColumn: column,
+					isMerged: false,
+					isMergedMainCell: false
+				},
+				style: null
+			}]
 		};
 	}
-	_getSheetObject() {
-		return getSheetObject(this._workbook, this._context);
-	}
 };
-HeaderUnhideRenderController = __decorate([__decorateParam(1, Inject(SheetSkeletonManagerService)), __decorateParam(2, ICommandService)], HeaderUnhideRenderController);
+HeaderMenuRenderController = __decorate([
+	__decorateParam(1, Inject(SheetSkeletonManagerService)),
+	__decorateParam(2, IContextMenuService),
+	__decorateParam(3, ICommandService),
+	__decorateParam(4, Inject(SheetsSelectionsService))
+], HeaderMenuRenderController);
+function getHeaderBaseLayout(skeleton) {
+	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
+	const config = (_skeleton$worksheet$g = (_skeleton$worksheet = skeleton.worksheet).getConfig) === null || _skeleton$worksheet$g === void 0 ? void 0 : _skeleton$worksheet$g.call(_skeleton$worksheet);
+	const configuredRowWidth = config === null || config === void 0 || (_config$rowHeader = config.rowHeader) === null || _config$rowHeader === void 0 ? void 0 : _config$rowHeader.width;
+	const configuredColumnHeight = config === null || config === void 0 || (_config$columnHeader = config.columnHeader) === null || _config$columnHeader === void 0 ? void 0 : _config$columnHeader.height;
+	const rowBaseWidth = typeof configuredRowWidth === "number" && configuredRowWidth > 0 ? Math.min(configuredRowWidth, skeleton.rowHeaderWidth) : skeleton.rowHeaderWidth;
+	const columnBaseHeight = typeof configuredColumnHeight === "number" && configuredColumnHeight > 0 ? Math.min(configuredColumnHeight, skeleton.columnHeaderHeight) : skeleton.columnHeaderHeight;
+	return {
+		rowBaseWidth,
+		rowGutterWidth: Math.max(0, skeleton.rowHeaderWidthAndMarginLeft - rowBaseWidth),
+		columnBaseHeight,
+		columnGutterHeight: Math.max(0, skeleton.columnHeaderHeightAndMarginTop - columnBaseHeight)
+	};
+}
 
 //#endregion
 //#region src/consts/mobile-context.ts
@@ -28847,12 +28955,12 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
 			this._updateSceneSize(param);
-		});
+		}));
 	}
 	_updateSceneSize(param) {
-		var _this$_renderManagerS;
+		var _this$_renderManagerS, _scene$getViewport, _scene$getViewport2, _scene$getViewport3, _scene$getViewport4, _scene$getViewport5;
 		if (param == null) return;
 		const { unitId } = this._context;
 		const { skeleton } = param;
@@ -28865,6 +28973,30 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 			height: columnHeaderHeightAndMarginTop + rowTotalHeight
 		});
 		scene.getMainViewport().setMargin(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
+		scene.getMainViewport().resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT)) === null || _scene$getViewport === void 0 || _scene$getViewport.resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport2 = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT)) === null || _scene$getViewport2 === void 0 || _scene$getViewport2.resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport3 = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM)) === null || _scene$getViewport3 === void 0 || _scene$getViewport3.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport4 = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_ROW_TOP)) === null || _scene$getViewport4 === void 0 || _scene$getViewport4.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport5 = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP)) === null || _scene$getViewport5 === void 0 || _scene$getViewport5.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
 	}
 };
 SheetSkeletonRenderController = __decorate([__decorateParam(1, Inject(SheetSkeletonManagerService)), __decorateParam(2, IRenderManagerService)], SheetSkeletonRenderController);
@@ -29698,16 +29830,18 @@ let MobileSheetsSelectionRenderService = class MobileSheetsSelectionRenderServic
 	*/
 	newSelectionControl(scene, skeleton, selection) {
 		const selectionControls = this.getSelectionControls();
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
 		const rangeType = selection.range.rangeType;
 		const control = new MobileSelectionControl(scene, selectionControls.length, this._themeService, {
 			highlightHeader: this._highlightHeader,
 			rowHeaderWidth,
 			columnHeaderHeight,
+			rowHeaderOffsetX: Math.max(0, rowHeaderWidthAndMarginLeft - rowHeaderWidth),
+			columnHeaderOffsetY: Math.max(0, columnHeaderHeightAndMarginTop - columnHeaderHeight),
 			rangeType
 		});
 		const selectionWithCoord = attachSelectionWithCoord(selection, skeleton);
-		control.updateRangeBySelectionWithCoord(selectionWithCoord);
+		control.updateRangeBySelectionWithCoord(selectionWithCoord, skeleton);
 		this._selectionControls.push(control);
 		const { expandingModeForTopLeft, expandingModeForBottomRight } = (() => {
 			switch (rangeType) {
@@ -29983,6 +30117,7 @@ let UniverSheetsMobileUIPlugin = class UniverSheetsMobileUIPlugin extends Plugin
 			[IStatusBarService, { useClass: StatusBarService }],
 			[IMarkSelectionService, { useClass: MarkSelectionService }],
 			[HoverManagerService],
+			[HeaderUnhideRangeService],
 			[DragManagerService],
 			[SheetCanvasPopManagerService],
 			[CellPopupManagerService],
@@ -30578,6 +30713,7 @@ let UniverSheetsUIPlugin = class UniverSheetsUIPlugin extends Plugin {
 			[IStatusBarService, { useClass: StatusBarService }],
 			[IMarkSelectionService, { useClass: MarkSelectionService }],
 			[HoverManagerService],
+			[HeaderUnhideRangeService],
 			[DragManagerService],
 			[SheetCanvasPopManagerService],
 			[CellPopupManagerService],
@@ -30706,4 +30842,4 @@ UniverSheetsUIPlugin = __decorate([
 ], UniverSheetsUIPlugin);
 
 //#endregion
-export { AddRangeProtectionFromContextMenuCommand, AddRangeProtectionFromSheetBarCommand, AddRangeProtectionFromToolbarCommand, ApplyFormatPainterCommand, AutoFillUIController, AutoHeightController, AutoWidthController, BaseSelectionRenderService, 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, ExpandSelectionCommand, FormatPainterStatus, FormulaBar, FormulaEditorController, HeaderFreezeRenderController, HeaderMoveRenderController, HeaderResizeRenderController, HideColConfirmCommand, HideRowConfirmCommand, HoverManagerService, HoverRenderController, ICellEditorManagerService, IEditorBridgeService, IFormatPainterService, IFormulaEditorManagerService, IMarkSelectionService, IRepeatLastActionService, ISheetCellDropdownManagerService, ISheetClipboardService, ISheetSelectionRenderService, IStatusBarService, InsertRangeMoveDownConfirmCommand, InsertRangeMoveRightConfirmCommand, JumpOver, MarkSelectionService, MobileSheetBar, 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, RenderSheetContent, RenderSheetFooter, RenderSheetHeader, RepeatLastActionPermission, ResetRangeTextColorCommand, ResetScrollCommand, SELECTION_SHAPE_DEPTH, 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, SheetCopyDownCommand, SheetCopyRightCommand, SheetCutCommand, SheetMenuPosition, SheetPasteBesidesBorderCommand, SheetPasteColWidthCommand, SheetPasteCommand, SheetPasteFormatCommand, SheetPasteShortKeyCommand, SheetPasteValueCommand, SheetPermissionCheckUIController, SheetPermissionOpenDialogOperation, SheetPermissionOpenPanelOperation, SheetPermissionRenderManagerService, SheetPermissionUserManagerService, SheetPrintInterceptorService, 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, useActiveWorkbook, useActiveWorksheet, useHighlightRange, useKeyEventConfig, useWorkbooks, virtualizeDiscreteRanges, whenFormulaEditorActivated, whenSheetEditorActivated, whenSheetEditorFocused };
+export { AddRangeProtectionFromContextMenuCommand, AddRangeProtectionFromSheetBarCommand, AddRangeProtectionFromToolbarCommand, ApplyFormatPainterCommand, AutoFillUIController, AutoHeightController, AutoWidthController, BaseSelectionRenderService, 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, ExpandSelectionCommand, 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, ISheetSelectionRenderService, IStatusBarService, InsertRangeMoveDownConfirmCommand, InsertRangeMoveRightConfirmCommand, JumpOver, MarkSelectionService, MobileSheetBar, 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, RenderSheetContent, RenderSheetFooter, RenderSheetHeader, RepeatLastActionPermission, ResetRangeTextColorCommand, ResetScrollCommand, SELECTION_SHAPE_DEPTH, 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, SheetCopyDownCommand, SheetCopyRightCommand, SheetCutCommand, SheetMenuPosition, SheetPasteBesidesBorderCommand, SheetPasteColWidthCommand, SheetPasteCommand, SheetPasteFormatCommand, SheetPasteShortKeyCommand, SheetPasteValueCommand, SheetPermissionCheckUIController, SheetPermissionOpenDialogOperation, SheetPermissionOpenPanelOperation, SheetPermissionRenderManagerService, SheetPermissionUserManagerService, SheetPrintInterceptorService, 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, useActiveWorkbook, useActiveWorksheet, useHighlightRange, useKeyEventConfig, useWorkbooks, virtualizeDiscreteRanges, whenFormulaEditorActivated, whenSheetEditorActivated, whenSheetEditorFocused };