@univerjs/slides-ui 0.5.5-nightly.202501210734 → 0.5.5-nightly.202501210925

package/lib/es/index.js

@@ -1,42 +1,43 @@
-var hn = Object.defineProperty;
-var pn = (i, e, t) => e in i ? hn(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var P = (i, e, t) => pn(i, typeof e != "symbol" ? e + "" : e, t);
-import { Inject as X, Injector as Ge, RxDisposable as fe, UniverInstanceType as x, debounce as fn, getColorStyle as Cn, IUniverInstanceService as j, CommandType as D, Tools as vn, useDependency as O, LocaleService as Q, ICommandService as U, generateRandomId as xt, PageElementType as Xe, BasicShapes as _n, Disposable as Ue, DisposableCollection as Ye, toDisposable as Et, FOCUSING_COMMON_DRAWINGS as Sn, IContextService as Ce, createInternalEditorID as In, createIdentifier as Rt, EDITOR_ACTIVATED as Oe, FOCUSING_EDITOR_STANDALONE as Ot, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as jt, DocumentDataModel as Pn, VerticalAlign as je, HorizontalAlign as yt, WrapStrategy as it, FOCUSING_EDITOR_BUT_HIDDEN as bn, DEFAULT_EMPTY_DOCUMENT_VALUE as Tt, Direction as B, IUndoRedoService as xn, DocumentFlavor as En, FOCUSING_UNIVER_EDITOR as Mt, FORMULA_EDITOR_ACTIVATED as Rn, connectInjector as rt, Plugin as On, merge as jn, mergeOverrideWithDependencies as st, IConfigService as yn } from "@univerjs/core";
-import { Viewport as ot, ScrollBar as wt, Slide as Tn, Rect as Nt, Scene as Mn, IRenderManagerService as Y, ObjectType as he, pxToNum as wn, DeviceInputEventType as q, convertTextRotation as at, FIX_ONE_PIXEL_BLUR_OFFSET as re, fixLineWidthByScale as ct } from "@univerjs/engine-render";
-import { ObjectProvider as Nn, SLIDE_KEY as se } from "@univerjs/slides";
-import { ISidebarService as Dt, ICanvasPopupService as Dn, KeyCode as y, ILayoutService as Un, ILocalFileService as Vn, useObservable as Bn, DISABLE_AUTO_FOCUS_KEY as lt, MenuItemType as ve, getMenuHiddenObservable as _e, RibbonStartGroup as Ln, MetaKeys as An, ComponentManager as $n, BuiltInUIPart as dt, IMenuManagerService as Hn, IUIPartsService as Fn, IShortcutService as zn } from "@univerjs/ui";
-import ke, { forwardRef as A, useRef as Ut, createElement as $, useState as W, useEffect as oe, useCallback as ut } from "react";
-import { Button as Pe, InputNumber as ue, DropdownLegacy as Vt, ColorPicker as Wn, Scrollbar as Kn } from "@univerjs/design";
-import { BehaviorSubject as J, Subject as Bt, filter as Gn, takeUntil as mt } from "rxjs";
-import { DocSelectionManagerService as Xn, DocSkeletonManagerService as gt, RichTextEditingMutation as Yn } from "@univerjs/docs";
-import { IEditorService as Ze, DocSelectionRenderService as ht, VIEWPORT_KEY as pt, DOCS_COMPONENT_MAIN_LAYER_INDEX as kn, MoveSelectionOperation as Zn, MoveCursorOperation as qn, DOCS_VIEW_KEY as Jn, DeleteLeftCommand as Qn } from "@univerjs/docs-ui";
-import { DRAWING_IMAGE_ALLOW_IMAGE_LIST as ei, IImageIoService as ti, getImageSize as ni } from "@univerjs/drawing";
-var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, si = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? ri(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && ii(e, t, r), r;
-}, Ve = (i, e) => (t, n) => e(t, n, i);
-let pe = class extends fe {
-  constructor(e, t, n, r) {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
+import { Inject, Injector, RxDisposable, UniverInstanceType, debounce, getColorStyle, IUniverInstanceService, CommandType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, PageElementType, BasicShapes, Disposable, DisposableCollection, toDisposable, FOCUSING_COMMON_DRAWINGS, IContextService, createInternalEditorID, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, DocumentDataModel, VerticalAlign, HorizontalAlign, WrapStrategy, FOCUSING_EDITOR_BUT_HIDDEN, DEFAULT_EMPTY_DOCUMENT_VALUE, Direction, IUndoRedoService, DocumentFlavor, FOCUSING_UNIVER_EDITOR, FORMULA_EDITOR_ACTIVATED, connectInjector, Plugin, merge, mergeOverrideWithDependencies, IConfigService } from "@univerjs/core";
+import { Viewport, ScrollBar, Slide, Rect, Scene, IRenderManagerService, ObjectType, pxToNum, DeviceInputEventType, convertTextRotation, FIX_ONE_PIXEL_BLUR_OFFSET, fixLineWidthByScale } from "@univerjs/engine-render";
+import { ObjectProvider, SLIDE_KEY } from "@univerjs/slides";
+import { ISidebarService, ICanvasPopupService, KeyCode, ILayoutService, ILocalFileService, useObservable, DISABLE_AUTO_FOCUS_KEY, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, MetaKeys, ComponentManager, BuiltInUIPart, IMenuManagerService, IUIPartsService, IShortcutService } from "@univerjs/ui";
+import React, { forwardRef, useRef, createElement, useState, useEffect, useCallback } from "react";
+import { Button, InputNumber, DropdownLegacy, ColorPicker, Scrollbar } from "@univerjs/design";
+import { BehaviorSubject, Subject, filter, takeUntil } from "rxjs";
+import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
+import { IEditorService, DocSelectionRenderService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, MoveSelectionOperation, MoveCursorOperation, DOCS_VIEW_KEY, DeleteLeftCommand } from "@univerjs/docs-ui";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, IImageIoService, getImageSize } from "@univerjs/drawing";
+var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a;
+let SlideRenderController = (_a = class extends RxDisposable {
+  constructor(_renderContext, _injector, _univerInstanceService, _renderManagerService) {
     super();
-    P(this, "_objectProvider", null);
-    P(this, "_refreshThumb", fn(() => {
+    __publicField(this, "_objectProvider", null);
+    __publicField(this, "_refreshThumb", debounce(() => {
       this.createThumbs();
     }, 300));
-    this._renderContext = e, this._injector = t, this._univerInstanceService = n, this._renderManagerService = r, this._objectProvider = this._injector.createInstance(Nn), this._addNewRender();
+    this._renderContext = _renderContext, this._injector = _injector, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._objectProvider = this._injector.createInstance(ObjectProvider), this._addNewRender();
   }
   _addNewRender() {
-    const { unitId: e, engine: t, scene: n } = this._renderContext, r = this._getCurrUnitModel();
-    if (!r) return;
-    const s = t.onTransformChange$.subscribeEvent(() => {
-      this._scrollToCenter(), s == null || s.unsubscribe();
+    const { unitId, engine, scene } = this._renderContext, slideDataModel = this._getCurrUnitModel();
+    if (!slideDataModel) return;
+    const observer = engine.onTransformChange$.subscribeEvent(() => {
+      this._scrollToCenter(), observer == null || observer.unsubscribe();
     });
-    t.onTransformChange$.subscribeEvent(() => {
+    engine.onTransformChange$.subscribeEvent(() => {
       setTimeout(() => {
         this.createThumbs();
       }, 300);
     });
-    const o = new ot(se.VIEW, n, {
+    const viewMain = new Viewport(SLIDE_KEY.VIEW, scene, {
       left: 0,
       top: 0,
       bottom: 0,
@@ -45,97 +46,97 @@ let pe = class extends fe {
       explicitViewportHeightSet: !1,
       isWheelPreventDefaultX: !0
     });
-    n.attachControl(), n.onMouseWheel$.subscribeEvent((c, g) => {
-      const l = c;
-      if (l.ctrlKey) {
-        const u = Math.abs(l.deltaX);
-        let h = u < 40 ? 0.2 : u < 80 ? 0.4 : 0.2;
-        h *= l.deltaY > 0 ? -1 : 1, n.scaleX < 1 && (h /= 2), n.scaleX + h > 4 ? n.scale(4, 4) : n.scaleX + h < 0.1 ? n.scale(0.1, 0.1) : (l.deltaY > 0, l.preventDefault());
+    scene.attachControl(), scene.onMouseWheel$.subscribeEvent((evt, state) => {
+      const e = evt;
+      if (e.ctrlKey) {
+        const deltaFactor = Math.abs(e.deltaX);
+        let scrollNum = deltaFactor < 40 ? 0.2 : deltaFactor < 80 ? 0.4 : 0.2;
+        scrollNum *= e.deltaY > 0 ? -1 : 1, scene.scaleX < 1 && (scrollNum /= 2), scene.scaleX + scrollNum > 4 ? scene.scale(4, 4) : scene.scaleX + scrollNum < 0.1 ? scene.scale(0.1, 0.1) : (e.deltaY > 0, e.preventDefault());
       } else
-        o.onMouseWheel(l, g);
-    }), n.onFileLoaded$.subscribeEvent(() => {
+        viewMain.onMouseWheel(e, state);
+    }), scene.onFileLoaded$.subscribeEvent(() => {
       this._refreshThumb();
-    }), wt.attachTo(o), this._renderManagerService.setCurrent(e);
-    const a = this._createSlide(n);
-    this._renderContext.mainComponent = a, this._createSlidePages(r, a), this.createThumbs(), t.runRenderLoop(() => {
-      n.render();
+    }), ScrollBar.attachTo(viewMain), this._renderManagerService.setCurrent(unitId);
+    const slide = this._createSlide(scene);
+    this._renderContext.mainComponent = slide, this._createSlidePages(slideDataModel, slide), this.createThumbs(), engine.runRenderLoop(() => {
+      scene.render();
     });
   }
   _scrollToCenter() {
-    var c;
-    const e = (c = this._currentRender()) == null ? void 0 : c.scene, t = e == null ? void 0 : e.getViewport(se.VIEW), n = this._getCenterPositionViewPort(e);
-    if (!t || !n) return;
-    const { left: r, top: s } = n, { x: o, y: a } = t.transViewportScroll2ScrollValue(r, s);
-    t.scrollToBarPos({
-      x: o,
-      y: a
+    var _a11;
+    const mainScene = (_a11 = this._currentRender()) == null ? void 0 : _a11.scene, viewMain = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), getCenterPositionViewPort = this._getCenterPositionViewPort(mainScene);
+    if (!viewMain || !getCenterPositionViewPort) return;
+    const { left: viewPortLeft, top: viewPortTop } = getCenterPositionViewPort, { x, y } = viewMain.transViewportScroll2ScrollValue(viewPortLeft, viewPortTop);
+    viewMain.scrollToBarPos({
+      x,
+      y
     });
   }
   _currentRender() {
-    return this._renderManagerService.getCurrentTypeOfRenderer(x.UNIVER_SLIDE);
+    return this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SLIDE);
   }
   /**
    * @param mainScene
    */
-  _createSlide(e) {
-    const t = this._univerInstanceService.getCurrentUnitForType(x.UNIVER_SLIDE), { width: n, height: r } = e, s = t.getPageSize(), { width: o = 100, height: a = 100 } = s, c = new Tn(se.COMPONENT, {
-      left: (n - o) / 2,
-      top: (r - a) / 2,
-      width: o,
-      height: a,
+  _createSlide(mainScene) {
+    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), { width: sceneWidth, height: sceneHeight } = mainScene, pageSize = model.getPageSize(), { width = 100, height = 100 } = pageSize, slideComponent = new Slide(SLIDE_KEY.COMPONENT, {
+      left: (sceneWidth - width) / 2,
+      top: (sceneHeight - height) / 2,
+      width,
+      height,
       zIndex: 10
     });
-    return c.enableSelectedClipElement(), e.addObject(c), c;
+    return slideComponent.enableSelectedClipElement(), mainScene.addObject(slideComponent), slideComponent;
   }
-  _addBackgroundRect(e, t) {
-    const r = this._univerInstanceService.getCurrentUnitForType(x.UNIVER_SLIDE).getPageSize(), { width: s = 0, height: o = 0 } = r, a = new Nt("canvas", {
+  _addBackgroundRect(scene, fill) {
+    const pageSize = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getPageSize(), { width: pageWidth = 0, height: pageHeight = 0 } = pageSize, page = new Rect("canvas", {
       left: 0,
       top: 0,
-      width: s,
-      height: o,
+      width: pageWidth,
+      height: pageHeight,
       strokeWidth: 1,
       stroke: "rgba(198,198,198,1)",
-      fill: Cn(t) || "rgba(255,255,255,1)",
+      fill: getColorStyle(fill) || "rgba(255,255,255,1)",
       zIndex: 0,
       evented: !1
     });
-    e.addObject(a, 0);
+    scene.addObject(page, 0);
   }
-  _getCenterPositionViewPort(e) {
-    if (!e) return { left: 0, top: 0 };
-    const { width: t, height: n } = e, r = e.getEngine(), s = (r == null ? void 0 : r.width) || 0, o = (r == null ? void 0 : r.height) || 0;
+  _getCenterPositionViewPort(mainScene) {
+    if (!mainScene) return { left: 0, top: 0 };
+    const { width, height } = mainScene, engine = mainScene.getEngine(), canvasWidth = (engine == null ? void 0 : engine.width) || 0, canvasHeight = (engine == null ? void 0 : engine.height) || 0;
     return {
-      left: (t - s) / 2,
-      top: (n - o) / 2
+      left: (width - canvasWidth) / 2,
+      top: (height - canvasHeight) / 2
     };
   }
-  _thumbSceneRender(e, t) {
-    const n = this._renderManagerService.getRenderById(e);
-    if (n == null)
+  _thumbSceneRender(pageId, slide) {
+    const render2 = this._renderManagerService.getRenderById(pageId);
+    if (render2 == null)
       return;
-    const { engine: r } = n;
-    if (r == null)
+    const { engine: thumbEngine } = render2;
+    if (thumbEngine == null)
       return;
-    const { width: s, height: o } = t, { width: a = s, height: c = o } = r, g = r.getCanvas().getContext();
-    t.renderToThumb(g, e, a / s, c / o);
+    const { width, height } = slide, { width: pageWidth = width, height: pageHeight = height } = thumbEngine, thumbContext = thumbEngine.getCanvas().getContext();
+    slide.renderToThumb(thumbContext, pageId, pageWidth / width, pageHeight / height);
   }
   /**
    * CreateScene by pages, and activate first one.
    * @param slideDataModel
    * @param slide
    */
-  _createSlidePages(e, t) {
-    const n = e.getPages(), r = e.getPageOrder();
-    if (!(!n || !r) && r.length !== 0) {
-      for (let s = 0, o = r.length; s < o; s++) {
-        const a = r[s];
-        this.createPageScene(a, n[a]), this._createThumb(a);
+  _createSlidePages(slideDataModel, slide) {
+    const pages = slideDataModel.getPages(), pageOrder = slideDataModel.getPageOrder();
+    if (!(!pages || !pageOrder) && pageOrder.length !== 0) {
+      for (let i = 0, len = pageOrder.length; i < len; i++) {
+        const pageId = pageOrder[i];
+        this.createPageScene(pageId, pages[pageId]), this._createThumb(pageId);
       }
-      t.activeFirstPage();
+      slide.activeFirstPage();
     }
   }
-  _createThumb(e) {
-    this._renderManagerService.createRender(e);
+  _createThumb(pageId) {
+    this._renderManagerService.createRender(pageId);
   }
   /**
    * SlideDataModel is UnitModel
@@ -143,34 +144,34 @@ let pe = class extends fe {
   _getCurrUnitModel() {
     return this._renderContext.unit;
   }
-  activePage(e) {
-    let t = e;
-    const n = this._getCurrUnitModel();
-    let r;
-    if (t)
-      r = n.getPage(t);
+  activePage(_pageId) {
+    let pageId = _pageId;
+    const model = this._getCurrUnitModel();
+    let page;
+    if (pageId)
+      page = model.getPage(pageId);
     else {
-      const c = n.getPages(), g = n.getPageOrder();
-      if (g == null || c == null)
+      const pageElements = model.getPages(), pageOrder = model.getPageOrder();
+      if (pageOrder == null || pageElements == null)
         return;
-      r = c[g[0]], t = r.id;
+      page = pageElements[pageOrder[0]], pageId = page.id;
     }
-    const s = this._currentRender();
-    if (r == null || s == null || s.mainComponent == null)
+    const render2 = this._currentRender();
+    if (page == null || render2 == null || render2.mainComponent == null)
       return;
-    const { id: o } = r, a = s.mainComponent;
-    if (n.setActivePage(r), a != null && a.hasPage(o)) {
-      a.changePage(o);
+    const { id } = page, slide = render2.mainComponent;
+    if (model.setActivePage(page), slide != null && slide.hasPage(id)) {
+      slide.changePage(id);
       return;
     }
-    this.createPageScene(o, r);
+    this.createPageScene(id, page);
   }
   createThumbs() {
-    const t = this._getCurrUnitModel().getPageOrder(), n = this._currentRender();
-    if (!(!t || !n) && t.length !== 0)
-      for (let r = 0, s = t.length; r < s; r++) {
-        const o = t[r];
-        this._thumbSceneRender(o, n.mainComponent);
+    const pageOrder = this._getCurrUnitModel().getPageOrder(), render2 = this._currentRender();
+    if (!(!pageOrder || !render2) && pageOrder.length !== 0)
+      for (let i = 0, len = pageOrder.length; i < len; i++) {
+        const pageId = pageOrder[i];
+        this._thumbSceneRender(pageId, render2.mainComponent);
       }
   }
   /**
@@ -178,15 +179,15 @@ let pe = class extends fe {
    * @param pageId
    * @param page
    */
-  createPageScene(e, t) {
-    const n = this._renderContext;
-    if (!n || !this._objectProvider)
+  createPageScene(pageId, page) {
+    const render2 = this._renderContext;
+    if (!render2 || !this._objectProvider)
       return;
-    const { scene: r, mainComponent: s } = n, o = s, { width: a, height: c } = o, g = new Mn(e, o, {
-      width: a,
-      height: c
+    const { scene: mainScene, mainComponent } = render2, slide = mainComponent, { width, height } = slide, pageScene = new Scene(pageId, slide, {
+      width,
+      height
     });
-    new ot(`PageViewer_${e}`, g, {
+    new Viewport(`PageViewer_${pageId}`, pageScene, {
       left: 0,
       top: 0,
       bottom: 0,
@@ -194,117 +195,117 @@ let pe = class extends fe {
       explicitViewportWidthSet: !1,
       explicitViewportHeightSet: !1
     }).closeClip();
-    const { pageElements: u, pageBackgroundFill: h } = t, v = this._objectProvider.convertToRenderObjects(u, r);
-    if (!v || !o) return;
-    this._addBackgroundRect(g, h), g.addObjects(v), g.initTransformer(), v.forEach((C) => {
-      g.attachTransformerTo(C);
+    const { pageElements, pageBackgroundFill } = page, objects = this._objectProvider.convertToRenderObjects(pageElements, mainScene);
+    if (!objects || !slide) return;
+    this._addBackgroundRect(pageScene, pageBackgroundFill), pageScene.addObjects(objects), pageScene.initTransformer(), objects.forEach((object) => {
+      pageScene.attachTransformerTo(object);
     });
-    const _ = g.getTransformer();
-    return _ == null || _.changeEnd$.subscribe(() => {
-      this._thumbSceneRender(e, o);
-    }), _ == null || _.clearControl$.subscribe(() => {
-      this._thumbSceneRender(e, o);
-    }), o.addPageScene(g), g;
+    const transformer = pageScene.getTransformer();
+    return transformer == null || transformer.changeEnd$.subscribe(() => {
+      this._thumbSceneRender(pageId, slide);
+    }), transformer == null || transformer.clearControl$.subscribe(() => {
+      this._thumbSceneRender(pageId, slide);
+    }), slide.addPageScene(pageScene), pageScene;
   }
   /**
    * Get pageScene from Slide.
    * @param pageId
    * @returns {Scene, Engine, UnitModel} scene & engine & unit from renderContext
    */
-  getPageRenderUnit(e) {
-    const n = this._renderContext.mainComponent.getSubScenes().get(e), { engine: r, unit: s } = this._renderContext;
+  getPageRenderUnit(pageId) {
+    const pageScene = this._renderContext.mainComponent.getSubScenes().get(pageId), { engine, unit } = this._renderContext;
     return {
-      scene: n,
-      engine: r,
-      unit: s
+      scene: pageScene,
+      engine,
+      unit
     };
   }
-  createObjectToPage(e, t) {
-    const { scene: n } = this.getPageRenderUnit(t);
-    if (!n || !this._objectProvider)
+  createObjectToPage(element2, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene || !this._objectProvider)
       return;
-    const r = this._objectProvider.convertToRenderObject(e, n);
-    if (r)
-      return n.addObject(r), n.attachTransformerTo(r), n.getLayer().makeDirty(), r;
-  }
-  setObjectActiveByPage(e, t) {
-    const { scene: n } = this.getPageRenderUnit(t);
-    if (!n) return;
-    const r = n.getTransformer();
-    r == null || r.activeAnObject(e);
-  }
-  removeObjectById(e, t) {
-    const { scene: n } = this.getPageRenderUnit(t);
-    if (!n) return;
-    n.removeObject(e);
-    const r = n.getTransformer();
-    r == null || r.clearControls();
+    const object = this._objectProvider.convertToRenderObject(element2, scene);
+    if (object)
+      return scene.addObject(object), scene.attachTransformerTo(object), scene.getLayer().makeDirty(), object;
+  }
+  setObjectActiveByPage(obj, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene) return;
+    const transformer = scene.getTransformer();
+    transformer == null || transformer.activeAnObject(obj);
+  }
+  removeObjectById(id, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene) return;
+    scene.removeObject(id);
+    const transformer = scene.getTransformer();
+    transformer == null || transformer.clearControls();
   }
   appendPage() {
-    const e = this._getCurrUnitModel(), t = e.getBlankPage(), n = this._currentRender();
-    if (t == null || n == null || n.mainComponent == null)
+    const model = this._getCurrUnitModel(), page = model.getBlankPage(), render2 = this._currentRender();
+    if (page == null || render2 == null || render2.mainComponent == null)
       return;
-    const { id: r } = t, s = n.mainComponent, o = this.createPageScene(r, t);
-    s && o && s.addPageScene(o), e.appendPage(t), e.setActivePage(t);
+    const { id: pageId } = page, slide = render2.mainComponent, scene = this.createPageScene(pageId, page);
+    slide && scene && slide.addPageScene(scene), model.appendPage(page), model.setActivePage(page);
   }
-};
-pe = si([
-  Ve(1, X(Ge)),
-  Ve(2, j),
-  Ve(3, Y)
-], pe);
-var oi = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, ci = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? ai(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && oi(e, t, r), r;
-}, li = (i, e) => (t, n) => e(t, n, i);
-let M = class extends fe {
-  constructor(i) {
-    super(), this._renderManagerService = i;
+}, __name(_a, "SlideRenderController"), _a);
+SlideRenderController = __decorateClass$9([
+  __decorateParam$9(1, Inject(Injector)),
+  __decorateParam$9(2, IUniverInstanceService),
+  __decorateParam$9(3, IRenderManagerService)
+], SlideRenderController);
+var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$8(target, key, result), result;
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a2;
+let CanvasView = (_a2 = class extends RxDisposable {
+  constructor(_renderManagerService) {
+    super(), this._renderManagerService = _renderManagerService;
   }
-  _getSlideRenderControllerFromRenderUnit(i) {
-    return this._renderManagerService.getRenderById(i).with(pe);
+  _getSlideRenderControllerFromRenderUnit(unitId) {
+    return this._renderManagerService.getRenderById(unitId).with(SlideRenderController);
   }
-  createThumbs(i) {
-    this._getSlideRenderControllerFromRenderUnit(i).createThumbs();
+  createThumbs(unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).createThumbs();
   }
-  activePage(i, e) {
-    this._getSlideRenderControllerFromRenderUnit(e).activePage(i);
+  activePage(pageId, unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).activePage(pageId);
   }
-  getRenderUnitByPageId(i, e) {
-    return this._getSlideRenderControllerFromRenderUnit(e).getPageRenderUnit(i);
+  getRenderUnitByPageId(pageId, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).getPageRenderUnit(pageId);
   }
-  createObjectToPage(i, e, t) {
-    return this._getSlideRenderControllerFromRenderUnit(t).createObjectToPage(i, e);
+  createObjectToPage(element2, pageID, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).createObjectToPage(element2, pageID);
   }
-  setObjectActiveByPage(i, e, t) {
-    return this._getSlideRenderControllerFromRenderUnit(t).setObjectActiveByPage(i, e);
+  setObjectActiveByPage(obj, pageID, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).setObjectActiveByPage(obj, pageID);
   }
-  removeObjectById(i, e, t) {
-    this._getSlideRenderControllerFromRenderUnit(t).removeObjectById(i, e);
+  removeObjectById(id, pageID, unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).removeObjectById(id, pageID);
   }
   /**
    * append blank page
    */
-  appendPage(i) {
-    this._getSlideRenderControllerFromRenderUnit(i).appendPage();
-  }
-};
-M = ci([
-  li(0, Y)
-], M);
-const di = "slides-ui.config", ft = {}, Lt = {
+  appendPage(unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).appendPage();
+  }
+}, __name(_a2, "CanvasView"), _a2);
+CanvasView = __decorateClass$8([
+  __decorateParam$8(0, IRenderManagerService)
+], CanvasView);
+const SLIDES_UI_PLUGIN_CONFIG_KEY = "slides-ui.config", defaultPluginConfig = {}, DeleteSlideElementOperation = {
   id: "slide.operation.delete-element",
-  type: D.OPERATION,
-  handler: (i, e) => {
-    if (!(e != null && e.id)) return !1;
-    const t = e.unitId, r = i.get(j).getUnit(t);
-    if (!r) return !1;
-    const s = r.getActivePage();
-    return delete s.pageElements[e.id], r.updatePage(s.id, s), i.get(M).removeObjectById(e.id, s.id, t), !0;
-  }
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    if (!(params != null && params.id)) return !1;
+    const unitId = params.unitId, slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    return delete activePage.pageElements[params.id], slideData.updatePage(activePage.id, activePage), accessor.get(CanvasView).removeObjectById(params.id, activePage.id, unitId), !0;
+  }, "handler")
 };
-var Be = { exports: {} }, me = {};
+var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -314,409 +315,422 @@ var Be = { exports: {} }, me = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ct;
-function ui() {
-  if (Ct) return me;
-  Ct = 1;
-  var i = ke, e = Symbol.for("react.element"), t = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, r = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function o(a, c, g) {
-    var l, u = {}, h = null, v = null;
-    g !== void 0 && (h = "" + g), c.key !== void 0 && (h = "" + c.key), c.ref !== void 0 && (v = c.ref);
-    for (l in c) n.call(c, l) && !s.hasOwnProperty(l) && (u[l] = c[l]);
-    if (a && a.defaultProps) for (l in c = a.defaultProps, c) u[l] === void 0 && (u[l] = c[l]);
-    return { $$typeof: e, type: a, key: h, ref: v, props: u, _owner: r.current };
-  }
-  return me.Fragment = t, me.jsx = o, me.jsxs = o, me;
+var hasRequiredReactJsxRuntime_production_min;
+function requireReactJsxRuntime_production_min() {
+  if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+  hasRequiredReactJsxRuntime_production_min = 1;
+  var f = React, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function q(c, a, g) {
+    var b, d = {}, e = null, h = null;
+    g !== void 0 && (e = "" + g), a.key !== void 0 && (e = "" + a.key), a.ref !== void 0 && (h = a.ref);
+    for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+    if (c && c.defaultProps) for (b in a = c.defaultProps, a) d[b] === void 0 && (d[b] = a[b]);
+    return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+  }
+  return __name(q, "q"), reactJsxRuntime_production_min.Fragment = l, reactJsxRuntime_production_min.jsx = q, reactJsxRuntime_production_min.jsxs = q, reactJsxRuntime_production_min;
 }
-var vt;
-function mi() {
-  return vt || (vt = 1, Be.exports = ui()), Be.exports;
+__name(requireReactJsxRuntime_production_min, "requireReactJsxRuntime_production_min");
+var hasRequiredJsxRuntime;
+function requireJsxRuntime() {
+  return hasRequiredJsxRuntime || (hasRequiredJsxRuntime = 1, jsxRuntime.exports = requireReactJsxRuntime_production_min()), jsxRuntime.exports;
 }
-var d = mi();
-function At(i) {
-  var e, t, n = "";
-  if (typeof i == "string" || typeof i == "number") n += i;
-  else if (typeof i == "object") if (Array.isArray(i)) {
-    var r = i.length;
-    for (e = 0; e < r; e++) i[e] && (t = At(i[e])) && (n && (n += " "), n += t);
-  } else for (t in i) i[t] && (n && (n += " "), n += t);
+__name(requireJsxRuntime, "requireJsxRuntime");
+var jsxRuntimeExports = requireJsxRuntime();
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
   return n;
 }
-function T() {
-  for (var i, e, t = 0, n = "", r = arguments.length; t < r; t++) (i = arguments[t]) && (e = At(i)) && (n && (n += " "), n += e);
+__name(r, "r");
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-var N = function() {
-  return N = Object.assign || function(i) {
-    for (var e, t = 1, n = arguments.length; t < n; t++) {
-      e = arguments[t];
-      for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (i[r] = e[r]);
+__name(clsx, "clsx");
+var __assign = function() {
+  return __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
     }
-    return i;
-  }, N.apply(this, arguments);
-}, gi = function(i, e) {
+    return t;
+  }, __assign.apply(this, arguments);
+}, __rest = function(s, e) {
   var t = {};
-  for (var n in i) Object.prototype.hasOwnProperty.call(i, n) && e.indexOf(n) < 0 && (t[n] = i[n]);
-  if (i != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var r = 0, n = Object.getOwnPropertySymbols(i); r < n.length; r++)
-      e.indexOf(n[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, n[r]) && (t[n[r]] = i[n[r]]);
+  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+  if (s != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
+      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
   return t;
-}, H = A(function(i, e) {
-  var t = i.icon, n = i.id, r = i.className, s = i.extend, o = gi(i, ["icon", "id", "className", "extend"]), a = "univerjs-icon univerjs-icon-".concat(n, " ").concat(r || "").trim(), c = Ut("_".concat(fi()));
-  return $t(t, "".concat(n), { defIds: t.defIds, idSuffix: c.current }, N({ ref: e, className: a }, o), s);
+}, IconBase = forwardRef(function(props, ref) {
+  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
+  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
 });
-function $t(i, e, t, n, r) {
-  return $(i.tag, N(N({ key: e }, hi(i, t, r)), n), (pi(i, t).children || []).map(function(s, o) {
-    return $t(s, "".concat(e, "-").concat(i.tag, "-").concat(o), t, void 0, r);
+function render(node, id, runtimeProps, rootProps, extend) {
+  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
+    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
   }));
 }
-function hi(i, e, t) {
-  var n = N({}, i.attrs);
-  t != null && t.colorChannel1 && n.fill === "colorChannel1" && (n.fill = t.colorChannel1);
-  var r = e.defIds;
-  return !r || r.length === 0 || (i.tag === "use" && n["xlink:href"] && (n["xlink:href"] = n["xlink:href"] + e.idSuffix), Object.entries(n).forEach(function(s) {
-    var o = s[0], a = s[1];
-    typeof a == "string" && (n[o] = a.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
-  })), n;
+__name(render, "render");
+function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
+  var attrs = __assign({}, node.attrs);
+  extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
+  var defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a11) {
+    var key = _a11[0], value = _a11[1];
+    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
+  })), attrs;
 }
-function pi(i, e) {
-  var t, n = e.defIds;
-  return !n || n.length === 0 ? i : i.tag === "defs" && (!((t = i.children) === null || t === void 0) && t.length) ? N(N({}, i), { children: i.children.map(function(r) {
-    return typeof r.attrs.id == "string" && n && n.indexOf(r.attrs.id) > -1 ? N(N({}, r), { attrs: N(N({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
-  }) }) : i;
+__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
+function replaceRuntimeIdsInDefs(node, runtimeProps) {
+  var _a11, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a11 = node.children) === null || _a11 === void 0) && _a11.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+    return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
+  }) }) : node;
 }
-function fi() {
+__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
+function generateShortUuid() {
   return Math.random().toString(36).substring(2, 8);
 }
-H.displayName = "UniverIcon";
-var Ci = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, Ht = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+__name(generateShortUuid, "generateShortUuid");
+IconBase.displayName = "UniverIcon";
+var element$9 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, AddImageSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "add-image-single",
-    ref: e,
-    icon: Ci
+    ref,
+    icon: element$9
   }));
 });
-Ht.displayName = "AddImageSingle";
-var vi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "colorChannel1", d: "M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Ft = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+AddImageSingle.displayName = "AddImageSingle";
+var element$8 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "colorChannel1", d: "M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Autofill = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "autofill",
-    ref: e,
-    icon: vi
+    ref,
+    icon: element$8
   }));
 });
-Ft.displayName = "Autofill";
-var _i = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946" } }] }, zt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+Autofill.displayName = "Autofill";
+var element$7 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946" } }] }, BottomSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "bottom-single",
-    ref: e,
-    icon: _i
+    ref,
+    icon: element$7
   }));
 });
-zt.displayName = "BottomSingle";
-var Si = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { clipPath: "url(#graph-single_clip0_1293_28)" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M6.29541 11.1896C3.83208 10.7489 1.9624 8.59552 1.9624 6.00544C1.9624 3.09673 4.32036 0.73877 7.22907 0.73877C9.93483 0.73877 12.164 2.77918 12.4619 5.40527H13.5621C14.998 5.40527 16.1621 6.56933 16.1621 8.00527V12.6719C16.1621 14.1079 14.998 15.2719 13.5621 15.2719H8.89541C7.45947 15.2719 6.29541 14.1079 6.29541 12.6719V11.1896ZM3.1624 6.00544C3.1624 3.75947 4.98311 1.93877 7.22907 1.93877C9.27112 1.93877 10.9616 3.44388 11.2518 5.40527H8.89541C7.45947 5.40527 6.29541 6.56933 6.29541 8.00527V9.96442C4.49946 9.5425 3.1624 7.93012 3.1624 6.00544ZM7.49541 8.00527C7.49541 7.23207 8.12221 6.60527 8.89541 6.60527H13.5621C14.3353 6.60527 14.9621 7.23207 14.9621 8.00527V12.6719C14.9621 13.4451 14.3353 14.0719 13.5621 14.0719H8.89541C8.12221 14.0719 7.49541 13.4451 7.49541 12.6719V8.00527Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "graph-single_clip0_1293_28" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["graph-single_clip0_1293_28"] }, Wt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+BottomSingle.displayName = "BottomSingle";
+var element$6 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { clipPath: "url(#graph-single_clip0_1293_28)" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M6.29541 11.1896C3.83208 10.7489 1.9624 8.59552 1.9624 6.00544C1.9624 3.09673 4.32036 0.73877 7.22907 0.73877C9.93483 0.73877 12.164 2.77918 12.4619 5.40527H13.5621C14.998 5.40527 16.1621 6.56933 16.1621 8.00527V12.6719C16.1621 14.1079 14.998 15.2719 13.5621 15.2719H8.89541C7.45947 15.2719 6.29541 14.1079 6.29541 12.6719V11.1896ZM3.1624 6.00544C3.1624 3.75947 4.98311 1.93877 7.22907 1.93877C9.27112 1.93877 10.9616 3.44388 11.2518 5.40527H8.89541C7.45947 5.40527 6.29541 6.56933 6.29541 8.00527V9.96442C4.49946 9.5425 3.1624 7.93012 3.1624 6.00544ZM7.49541 8.00527C7.49541 7.23207 8.12221 6.60527 8.89541 6.60527H13.5621C14.3353 6.60527 14.9621 7.23207 14.9621 8.00527V12.6719C14.9621 13.4451 14.3353 14.0719 13.5621 14.0719H8.89541C8.12221 14.0719 7.49541 13.4451 7.49541 12.6719V8.00527Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "graph-single_clip0_1293_28" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["graph-single_clip0_1293_28"] }, GraphSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "graph-single",
-    ref: e,
-    icon: Si
+    ref,
+    icon: element$6
   }));
 });
-Wt.displayName = "GraphSingle";
-var Ii = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, qe = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+GraphSingle.displayName = "GraphSingle";
+var element$5 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, MoreDownSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "more-down-single",
-    ref: e,
-    icon: Ii
+    ref,
+    icon: element$5
   }));
 });
-qe.displayName = "MoreDownSingle";
-var Pi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z" } }] }, Kt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+MoreDownSingle.displayName = "MoreDownSingle";
+var element$4 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z" } }] }, MoveDownSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "move-down-single",
-    ref: e,
-    icon: Pi
+    ref,
+    icon: element$4
   }));
 });
-Kt.displayName = "MoveDownSingle";
-var bi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z" } }] }, Gt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+MoveDownSingle.displayName = "MoveDownSingle";
+var element$3 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z" } }] }, MoveUpSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "move-up-single",
-    ref: e,
-    icon: bi
+    ref,
+    icon: element$3
   }));
 });
-Gt.displayName = "MoveUpSingle";
-var xi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "mask", attrs: { id: "mask0_102_1204", style: { maskType: "alpha" }, width: 16, height: 16, x: 0, y: 0, maskUnits: "userSpaceOnUse" }, children: [{ tag: "path", attrs: { fill: "#DCDCDC", d: "M0 0H16V16H0z" } }] }, { tag: "g", attrs: { mask: "url(#mask0_102_1204)" }, children: [{ tag: "rect", attrs: { width: 12.62, height: 2.79, x: 1.69, y: 12.25, fill: "colorChannel1", rx: 1.4 } }, { tag: "path", attrs: { fill: "currentColor", d: "M7.74646 2.1642C7.34284 1.65121 6.85947 1.28205 6.38447 1.09593C5.86863 0.893787 5.15166 0.852126 4.70047 1.42917C4.29842 1.94344 4.33082 2.70249 4.57691 3.50395C4.68808 3.8661 4.86846 4.22254 5.12522 4.56617C5.13695 4.58185 5.14927 4.5968 5.16211 4.61102C5.17152 4.6214 5.18122 4.63139 5.19115 4.64096C5.20459 4.65393 5.21855 4.66618 5.23296 4.6777L3.5064 6.40422C3.26756 6.64306 3.26756 7.03033 3.5064 7.26919L7.23756 11.0004C7.47648 11.2392 7.86375 11.2392 8.1026 11.0004L12.8329 6.27001C13.0717 6.03117 13.0717 5.6439 12.8329 5.40505L9.10172 1.67387C8.86288 1.43503 8.47561 1.43503 8.23676 1.67387L7.74646 2.1642ZM7.46162 4.50638C7.47252 4.57574 7.48163 4.64652 7.4888 4.71868C7.52232 5.05481 7.82194 5.30013 8.15807 5.26661C8.4942 5.23311 8.73954 4.93345 8.70601 4.59732C8.65786 4.11463 8.54251 3.6666 8.37892 3.26169L8.66928 2.97135L11.5354 5.83753L10.6106 6.76237H4.87824L7.40802 4.2326C7.42885 4.32128 7.44684 4.41255 7.46162 4.50638ZM6.87284 3.03784C6.57441 2.62008 6.22261 2.34634 5.93815 2.23487C5.80233 2.18165 5.71528 2.17827 5.67638 2.18335C5.6725 2.18387 5.66929 2.18443 5.6666 2.18497L5.6619 2.18607C5.64166 2.21954 5.53594 2.45979 5.74626 3.1449C5.81241 3.36036 5.92262 3.58602 6.09307 3.81761L6.87284 3.03784Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M12.1932 11.5463C12.6454 11.5463 13.012 11.1797 13.012 10.7275C13.012 10.4475 12.6981 9.92821 12.459 9.5733C12.3299 9.38173 12.0564 9.38174 11.9274 9.57331C11.6883 9.92822 11.3744 10.4475 11.3744 10.7275C11.3744 11.1797 11.741 11.5463 12.1932 11.5463Z" } }] }] }, Xt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+MoveUpSingle.displayName = "MoveUpSingle";
+var element$2 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "mask", attrs: { id: "mask0_102_1204", style: { maskType: "alpha" }, width: 16, height: 16, x: 0, y: 0, maskUnits: "userSpaceOnUse" }, children: [{ tag: "path", attrs: { fill: "#DCDCDC", d: "M0 0H16V16H0z" } }] }, { tag: "g", attrs: { mask: "url(#mask0_102_1204)" }, children: [{ tag: "rect", attrs: { width: 12.62, height: 2.79, x: 1.69, y: 12.25, fill: "colorChannel1", rx: 1.4 } }, { tag: "path", attrs: { fill: "currentColor", d: "M7.74646 2.1642C7.34284 1.65121 6.85947 1.28205 6.38447 1.09593C5.86863 0.893787 5.15166 0.852126 4.70047 1.42917C4.29842 1.94344 4.33082 2.70249 4.57691 3.50395C4.68808 3.8661 4.86846 4.22254 5.12522 4.56617C5.13695 4.58185 5.14927 4.5968 5.16211 4.61102C5.17152 4.6214 5.18122 4.63139 5.19115 4.64096C5.20459 4.65393 5.21855 4.66618 5.23296 4.6777L3.5064 6.40422C3.26756 6.64306 3.26756 7.03033 3.5064 7.26919L7.23756 11.0004C7.47648 11.2392 7.86375 11.2392 8.1026 11.0004L12.8329 6.27001C13.0717 6.03117 13.0717 5.6439 12.8329 5.40505L9.10172 1.67387C8.86288 1.43503 8.47561 1.43503 8.23676 1.67387L7.74646 2.1642ZM7.46162 4.50638C7.47252 4.57574 7.48163 4.64652 7.4888 4.71868C7.52232 5.05481 7.82194 5.30013 8.15807 5.26661C8.4942 5.23311 8.73954 4.93345 8.70601 4.59732C8.65786 4.11463 8.54251 3.6666 8.37892 3.26169L8.66928 2.97135L11.5354 5.83753L10.6106 6.76237H4.87824L7.40802 4.2326C7.42885 4.32128 7.44684 4.41255 7.46162 4.50638ZM6.87284 3.03784C6.57441 2.62008 6.22261 2.34634 5.93815 2.23487C5.80233 2.18165 5.71528 2.17827 5.67638 2.18335C5.6725 2.18387 5.66929 2.18443 5.6666 2.18497L5.6619 2.18607C5.64166 2.21954 5.53594 2.45979 5.74626 3.1449C5.81241 3.36036 5.92262 3.58602 6.09307 3.81761L6.87284 3.03784Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M12.1932 11.5463C12.6454 11.5463 13.012 11.1797 13.012 10.7275C13.012 10.4475 12.6981 9.92821 12.459 9.5733C12.3299 9.38173 12.0564 9.38174 11.9274 9.57331C11.6883 9.92822 11.3744 10.4475 11.3744 10.7275C11.3744 11.1797 11.741 11.5463 12.1932 11.5463Z" } }] }] }, PaintBucket = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "paint-bucket",
-    ref: e,
-    icon: xi
+    ref,
+    icon: element$2
   }));
 });
-Xt.displayName = "PaintBucket";
-var Ei = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { fill: "currentColor", clipPath: "url(#text-single_clip0_1293_26)" }, children: [{ tag: "path", attrs: { d: "M2.22891 2.07227C1.89754 2.07227 1.62891 2.34089 1.62891 2.67227C1.62891 3.00364 1.89754 3.27227 2.22891 3.27227H6.29541V14.0056C6.29541 14.337 6.56404 14.6056 6.89541 14.6056C7.22678 14.6056 7.49541 14.337 7.49541 14.0056V3.27227H11.5622C11.8936 3.27227 12.1622 3.00364 12.1622 2.67227C12.1622 2.34089 11.8936 2.07227 11.5622 2.07227H2.22891Z" } }, { tag: "path", attrs: { d: "M10.2289 6.40552C9.89754 6.40552 9.62891 6.67415 9.62891 7.00552C9.62891 7.33689 9.89754 7.60552 10.2289 7.60552H12.2954V14.0055C12.2954 14.3369 12.564 14.6055 12.8954 14.6055C13.2268 14.6055 13.4954 14.3369 13.4954 14.0055V7.60552H15.5622C15.8936 7.60552 16.1622 7.33689 16.1622 7.00552C16.1622 6.67415 15.8936 6.40552 15.5622 6.40552H10.2289Z" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "text-single_clip0_1293_26" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["text-single_clip0_1293_26"] }, Yt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+PaintBucket.displayName = "PaintBucket";
+var element$1 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { fill: "currentColor", clipPath: "url(#text-single_clip0_1293_26)" }, children: [{ tag: "path", attrs: { d: "M2.22891 2.07227C1.89754 2.07227 1.62891 2.34089 1.62891 2.67227C1.62891 3.00364 1.89754 3.27227 2.22891 3.27227H6.29541V14.0056C6.29541 14.337 6.56404 14.6056 6.89541 14.6056C7.22678 14.6056 7.49541 14.337 7.49541 14.0056V3.27227H11.5622C11.8936 3.27227 12.1622 3.00364 12.1622 2.67227C12.1622 2.34089 11.8936 2.07227 11.5622 2.07227H2.22891Z" } }, { tag: "path", attrs: { d: "M10.2289 6.40552C9.89754 6.40552 9.62891 6.67415 9.62891 7.00552C9.62891 7.33689 9.89754 7.60552 10.2289 7.60552H12.2954V14.0055C12.2954 14.3369 12.564 14.6055 12.8954 14.6055C13.2268 14.6055 13.4954 14.3369 13.4954 14.0055V7.60552H15.5622C15.8936 7.60552 16.1622 7.33689 16.1622 7.00552C16.1622 6.67415 15.8936 6.40552 15.5622 6.40552H10.2289Z" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "text-single_clip0_1293_26" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["text-single_clip0_1293_26"] }, TextSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "text-single",
-    ref: e,
-    icon: Ei
+    ref,
+    icon: element$1
   }));
 });
-Yt.displayName = "TextSingle";
-var Ri = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z", fillRule: "evenodd", clipRule: "evenodd" } }] }, kt = A(function(i, e) {
-  return $(H, Object.assign({}, i, {
+TextSingle.displayName = "TextSingle";
+var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z", fillRule: "evenodd", clipRule: "evenodd" } }] }, TopmostSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "topmost-single",
-    ref: e,
-    icon: Ri
+    ref,
+    icon: element
   }));
 });
-kt.displayName = "TopmostSingle";
-const K = {
+TopmostSingle.displayName = "TopmostSingle";
+const UpdateSlideElementOperation = {
   id: "slide.operation.update-element",
-  type: D.OPERATION,
-  handler: (i, e) => {
-    const { oKey: t, props: n } = e, r = i.get(j), s = e == null ? void 0 : e.unitId, o = r.getUnit(s);
-    if (!o) return !1;
-    const a = o.getActivePage();
-    return a.pageElements[t] = vn.deepMerge(a.pageElements[t], n), o.updatePage(a.id, a), !0;
-  }
-}, Oi = "univer-image-common-panel", ji = "univer-image-common-panel-grid", yi = "univer-image-common-panel-border", Ti = "univer-image-common-panel-title", Mi = "univer-image-common-panel-subtitle", wi = "univer-image-common-panel-row", Ni = "univer-image-common-panel-row-vertical", Di = "univer-image-common-panel-column", Ui = "univer-image-common-panel-column-center", Vi = "univer-image-common-panel-inline", Bi = "univer-image-common-panel-span2", Li = "univer-image-common-panel-span3", Ai = "univer-image-common-panel-input", $i = "univer-slide-panel-color-picker", m = {
-  imageCommonPanel: Oi,
-  imageCommonPanelGrid: ji,
-  imageCommonPanelBorder: yi,
-  imageCommonPanelTitle: Ti,
-  imageCommonPanelSubtitle: Mi,
-  imageCommonPanelRow: wi,
-  imageCommonPanelRowVertical: Ni,
-  imageCommonPanelColumn: Di,
-  imageCommonPanelColumnCenter: Ui,
-  imageCommonPanelInline: Vi,
-  imageCommonPanelSpan2: Bi,
-  imageCommonPanelSpan3: Li,
-  imageCommonPanelInput: Ai,
-  slidePanelColorPicker: $i
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const { oKey, props } = params, univerInstanceService = accessor.get(IUniverInstanceService), unitId = params == null ? void 0 : params.unitId, slideData = univerInstanceService.getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    return activePage.pageElements[oKey] = Tools.deepMerge(activePage.pageElements[oKey], props), slideData.updatePage(activePage.id, activePage), !0;
+  }, "handler")
+}, imageCommonPanel$1 = "univer-image-common-panel", imageCommonPanelGrid$1 = "univer-image-common-panel-grid", imageCommonPanelBorder$1 = "univer-image-common-panel-border", imageCommonPanelTitle$1 = "univer-image-common-panel-title", imageCommonPanelSubtitle$1 = "univer-image-common-panel-subtitle", imageCommonPanelRow$1 = "univer-image-common-panel-row", imageCommonPanelRowVertical$1 = "univer-image-common-panel-row-vertical", imageCommonPanelColumn$1 = "univer-image-common-panel-column", imageCommonPanelColumnCenter$1 = "univer-image-common-panel-column-center", imageCommonPanelInline$1 = "univer-image-common-panel-inline", imageCommonPanelSpan2$1 = "univer-image-common-panel-span2", imageCommonPanelSpan3$1 = "univer-image-common-panel-span3", imageCommonPanelInput$1 = "univer-image-common-panel-input", slidePanelColorPicker = "univer-slide-panel-color-picker", styles$4 = {
+  imageCommonPanel: imageCommonPanel$1,
+  imageCommonPanelGrid: imageCommonPanelGrid$1,
+  imageCommonPanelBorder: imageCommonPanelBorder$1,
+  imageCommonPanelTitle: imageCommonPanelTitle$1,
+  imageCommonPanelSubtitle: imageCommonPanelSubtitle$1,
+  imageCommonPanelRow: imageCommonPanelRow$1,
+  imageCommonPanelRowVertical: imageCommonPanelRowVertical$1,
+  imageCommonPanelColumn: imageCommonPanelColumn$1,
+  imageCommonPanelColumnCenter: imageCommonPanelColumnCenter$1,
+  imageCommonPanelInline: imageCommonPanelInline$1,
+  imageCommonPanelSpan2: imageCommonPanelSpan2$1,
+  imageCommonPanelSpan3: imageCommonPanelSpan3$1,
+  imageCommonPanelInput: imageCommonPanelInput$1,
+  slidePanelColorPicker
 };
-function Hi(i) {
-  const { pageId: e, unitId: t } = i, n = O(Q), r = O(M), s = O(U), o = r.getRenderUnitByPageId(e, t), a = o == null ? void 0 : o.scene;
-  if (!a) return null;
-  const c = a.getTransformer();
-  if (!c) return null;
-  const l = c.getSelectedObjectMap().values().next().value;
-  if (!l) return null;
-  const u = (h) => {
-    const v = a.getAllObjects(), [_, C] = v.reduce(([f, I], b) => {
-      const E = b.zIndex, w = E < f ? E : f, V = E > I ? E : I;
-      return [w, V];
+function ArrangePanel$1(props) {
+  const { pageId, unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(pageId, unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
+  const onArrangeBtnClick = /* @__PURE__ */ __name((arrangeType) => {
+    const allObjects = scene.getAllObjects(), [minZIndex, maxZIndex] = allObjects.reduce(([min, max], obj) => {
+      const zIndex2 = obj.zIndex, minZIndex2 = zIndex2 < min ? zIndex2 : min, maxZIndex2 = zIndex2 > max ? zIndex2 : max;
+      return [minZIndex2, maxZIndex2];
     }, [0, 0]);
-    let p = l.zIndex;
-    h === 3 ? p = _ - 1 : h === 2 ? p = C + 1 : h === 0 ? p = l.zIndex + 1 : h === 1 && (p = l.zIndex - 1), l.setProps({
-      zIndex: p
-    }), s.executeCommand(K.id, {
-      unitId: t,
-      oKey: l == null ? void 0 : l.oKey,
+    let zIndex = object.zIndex;
+    arrangeType === 3 ? zIndex = minZIndex - 1 : arrangeType === 2 ? zIndex = maxZIndex + 1 : arrangeType === 0 ? zIndex = object.zIndex + 1 : arrangeType === 1 && (zIndex = object.zIndex - 1), object.setProps({
+      zIndex
+    }), commandService.executeCommand(UpdateSlideElementOperation.id, {
+      unitId,
+      oKey: object == null ? void 0 : object.oKey,
       props: {
-        zIndex: p
+        zIndex
       }
     });
-  };
-  return /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelGrid, children: [
-    /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ d.jsx("div", { children: n.t("image-panel.arrange.title") }) }) }),
-    /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelRow, children: [
-      /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ d.jsx(Pe, { size: "small", onClick: () => {
-        u(
+  }, "onArrangeBtnClick");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelGrid, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
           0
           /* forward */
         );
-      }, children: /* @__PURE__ */ d.jsxs("span", { className: m.imageCommonPanelInline, children: [
-        /* @__PURE__ */ d.jsx(Gt, {}),
-        n.t("image-panel.arrange.forward")
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveUpSingle, {}),
+        localeService.t("image-panel.arrange.forward")
       ] }) }) }),
-      /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ d.jsx(Pe, { size: "small", onClick: () => {
-        u(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
           1
           /* backward */
         );
-      }, children: /* @__PURE__ */ d.jsxs("span", { className: m.imageCommonPanelInline, children: [
-        /* @__PURE__ */ d.jsx(Kt, {}),
-        n.t("image-panel.arrange.backward")
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveDownSingle, {}),
+        localeService.t("image-panel.arrange.backward")
       ] }) }) })
     ] }),
-    /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelRow, children: [
-      /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ d.jsx(Pe, { size: "small", onClick: () => {
-        u(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
           2
           /* front */
         );
-      }, children: /* @__PURE__ */ d.jsxs("span", { className: m.imageCommonPanelInline, children: [
-        /* @__PURE__ */ d.jsx(kt, {}),
-        n.t("image-panel.arrange.front")
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TopmostSingle, {}),
+        localeService.t("image-panel.arrange.front")
       ] }) }) }),
-      /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ d.jsx(Pe, { size: "small", onClick: () => {
-        u(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
           3
           /* back */
         );
-      }, children: /* @__PURE__ */ d.jsxs("span", { className: m.imageCommonPanelInline, children: [
-        /* @__PURE__ */ d.jsx(zt, {}),
-        n.t("image-panel.arrange.back")
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BottomSingle, {}),
+        localeService.t("image-panel.arrange.back")
       ] }) }) })
     ] })
   ] });
 }
-function Fi(i) {
-  const { pageId: e, unitId: t } = i, n = O(Q), r = O(M), s = O(U), o = r.getRenderUnitByPageId(e, t), a = o == null ? void 0 : o.scene;
-  if (!a) return null;
-  const c = a.getTransformer();
-  if (!c) return null;
-  const l = c.getSelectedObjectMap().values().next().value;
-  if (!l) return null;
+__name(ArrangePanel$1, "ArrangePanel$1");
+function TransformPanel(props) {
+  const { pageId, unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(pageId, unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
   const {
-    width: u = 0,
-    height: h = 0,
-    left: v = 0,
-    top: _ = 0,
-    angle: C = 0
-  } = l, [p, f] = W(u), [I, b] = W(h), [E, w] = W(v), [V, R] = W(_), [G, ce] = W(C), F = (S) => {
-    const { objects: le } = S, de = le.values().next().value, {
-      width: ln = 0,
-      height: dn = 0,
-      left: un = 0,
-      top: mn = 0,
-      angle: gn = 0
-    } = de;
-    f(ln), b(dn), w(un), R(mn), ce(gn);
-  };
-  oe(() => {
-    const S = c.changeStart$.subscribe((de) => {
-      F(de);
-    }), le = c.changing$.subscribe((de) => {
-      F(de);
+    width: originWidth = 0,
+    height: originHeight = 0,
+    left: originX = 0,
+    top: originY = 0,
+    angle: originRotation = 0
+  } = object, [width, setWidth] = useState(originWidth), [height, setHeight] = useState(originHeight), [xPosition, setXPosition] = useState(originX), [yPosition, setYPosition] = useState(originY), [rotation, setRotation] = useState(originRotation), changeObs = /* @__PURE__ */ __name((state) => {
+    const { objects } = state, object2 = objects.values().next().value, {
+      width: originWidth2 = 0,
+      height: originHeight2 = 0,
+      left: originX2 = 0,
+      top: originY2 = 0,
+      angle: originRotation2 = 0
+    } = object2;
+    setWidth(originWidth2), setHeight(originHeight2), setXPosition(originX2), setYPosition(originY2), setRotation(originRotation2);
+  }, "changeObs");
+  useEffect(() => {
+    const changeStartSub = transformer.changeStart$.subscribe((state) => {
+      changeObs(state);
+    }), changingSub = transformer.changing$.subscribe((state) => {
+      changeObs(state);
     });
     return () => {
-      le.unsubscribe(), S.unsubscribe();
+      changingSub.unsubscribe(), changeStartSub.unsubscribe();
     };
   }, []);
-  function z(S) {
-    !S || !l || (s.executeCommand(K.id, {
-      pageId: e,
-      oKey: l.oKey,
+  function handleWidthChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
+      oKey: object.oKey,
       props: {
-        width: S
+        width: val
       }
-    }), l == null || l.resize(S, l.height), f(S), c == null || c.refreshControls());
+    }), object == null || object.resize(val, object.height), setWidth(val), transformer == null || transformer.refreshControls());
   }
-  function ee(S) {
-    !S || !l || (s.executeCommand(K.id, {
-      pageId: e,
-      oKey: l.oKey,
+  __name(handleWidthChange, "handleWidthChange");
+  function handleHeightChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
+      oKey: object.oKey,
       props: {
-        height: S
+        height: val
       }
-    }), l == null || l.resize(l.width, S), b(S), c == null || c.refreshControls());
+    }), object == null || object.resize(object.width, val), setHeight(val), transformer == null || transformer.refreshControls());
   }
-  function te(S) {
-    !S || !l || (s.executeCommand(K.id, {
-      pageId: e,
-      oKey: l.oKey,
+  __name(handleHeightChange, "handleHeightChange");
+  function handleXChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
+      oKey: object.oKey,
       props: {
-        left: S
+        left: val
       }
-    }), l == null || l.translate(S, l.top), w(S), c == null || c.refreshControls());
+    }), object == null || object.translate(val, object.top), setXPosition(val), transformer == null || transformer.refreshControls());
   }
-  function Se(S) {
-    !S || !l || (s.executeCommand(K.id, {
-      pageId: e,
-      oKey: l.oKey,
+  __name(handleXChange, "handleXChange");
+  function handleYChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
+      oKey: object.oKey,
       props: {
-        right: S
+        right: val
       }
-    }), l == null || l.translate(l.left, S), R(S), c == null || c.refreshControls());
+    }), object == null || object.translate(object.left, val), setYPosition(val), transformer == null || transformer.refreshControls());
   }
-  function Ie(S) {
-    !S || !l || (s.executeCommand(K.id, {
-      pageId: e,
-      oKey: l.oKey,
+  __name(handleYChange, "handleYChange");
+  function handleChangeRotation(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
+      oKey: object.oKey,
       props: {
-        angle: S
+        angle: val
       }
-    }), l == null || l.transformByState({
-      angle: S
-    }), ce(S), c == null || c.refreshControls());
+    }), object == null || object.transformByState({
+      angle: val
+    }), setRotation(val), transformer == null || transformer.refreshControls());
   }
-  return /* @__PURE__ */ d.jsxs(
+  return __name(handleChangeRotation, "handleChangeRotation"), /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: T(m.imageCommonPanelGrid, m.imageCommonPanelBorder),
+      className: clsx(styles$4.imageCommonPanelGrid, styles$4.imageCommonPanelBorder),
       children: [
-        /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ d.jsx("div", { children: n.t("image-panel.transform.title") }) }) }),
-        /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelRow, children: [
-          /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ d.jsxs("label", { children: [
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: n.t("image-panel.transform.width") }) }),
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ d.jsx(
-              ue,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.transform.title") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: localeService.t("image-panel.transform.width") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
               {
-                className: m.imageCommonPanelInput,
+                className: styles$4.imageCommonPanelInput,
                 min: 1,
-                value: p,
-                onChange: (S) => {
-                  z(S);
-                }
+                value: width,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleWidthChange(val);
+                }, "onChange")
               }
             ) }) })
           ] }) }),
-          /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ d.jsxs("label", { children: [
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: n.t("image-panel.transform.height") }) }),
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ d.jsx(
-              ue,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: localeService.t("image-panel.transform.height") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
               {
-                className: m.imageCommonPanelInput,
+                className: styles$4.imageCommonPanelInput,
                 min: 1,
-                value: I,
-                onChange: (S) => {
-                  ee(S);
-                }
+                value: height,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleHeightChange(val);
+                }, "onChange")
               }
             ) }) })
           ] }) })
         ] }),
-        /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelRow, children: [
-          /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ d.jsxs("label", { children: [
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: n.t("image-panel.transform.x") }) }),
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ d.jsx(
-              ue,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: localeService.t("image-panel.transform.x") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
               {
-                className: m.imageCommonPanelInput,
+                className: styles$4.imageCommonPanelInput,
                 precision: 1,
                 min: 0,
-                value: E,
-                onChange: (S) => {
-                  te(S);
-                }
+                value: xPosition,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleXChange(val);
+                }, "onChange")
               }
             ) }) })
           ] }) }),
-          /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ d.jsxs("label", { children: [
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: n.t("image-panel.transform.y") }) }),
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ d.jsx(
-              ue,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: localeService.t("image-panel.transform.y") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
               {
-                className: m.imageCommonPanelInput,
+                className: styles$4.imageCommonPanelInput,
                 precision: 1,
                 min: 0,
-                value: V,
-                onChange: (S) => {
-                  Se(S);
-                }
+                value: yPosition,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleYChange(val);
+                }, "onChange")
               }
             ) }) })
           ] }) }),
-          /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ d.jsxs("label", { children: [
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: n.t("image-panel.transform.rotate") }) }),
-            /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ d.jsx(
-              ue,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: localeService.t("image-panel.transform.rotate") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
               {
-                className: m.imageCommonPanelInput,
+                className: styles$4.imageCommonPanelInput,
                 precision: 1,
-                value: G,
-                onChange: Ie
+                value: rotation,
+                onChange: handleChangeRotation
               }
             ) }) })
           ] }) })
@@ -725,54 +739,55 @@ function Fi(i) {
     }
   );
 }
-function zi(i) {
-  var _, C;
-  const { pageId: e, unitId: t } = i, n = O(Q), r = O(M), s = O(U), o = r.getRenderUnitByPageId(e, t), a = o == null ? void 0 : o.scene;
-  if (!a) return null;
-  const c = a.getTransformer();
-  if (!c) return null;
-  const l = c.getSelectedObjectMap().values().next().value;
-  if (!l) return null;
-  const [u, h] = ke.useState((C = (_ = l.fill) == null ? void 0 : _.toString()) != null ? C : "");
-  function v(p) {
-    l == null || l.setProps({
-      fill: p
-    }), s.executeCommand(K.id, {
-      unitId: t,
-      oKey: l == null ? void 0 : l.oKey,
+__name(TransformPanel, "TransformPanel");
+function ArrangePanel(props) {
+  var _a11, _b;
+  const { pageId, unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(pageId, unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
+  const [color, setColor] = React.useState((_b = (_a11 = object.fill) == null ? void 0 : _a11.toString()) != null ? _b : "");
+  function handleChangeColor(color2) {
+    object == null || object.setProps({
+      fill: color2
+    }), commandService.executeCommand(UpdateSlideElementOperation.id, {
+      unitId,
+      oKey: object == null ? void 0 : object.oKey,
       props: {
         shape: {
           shapeProperties: {
             shapeBackgroundFill: {
-              rgb: p
+              rgb: color2
             }
           }
         }
       }
-    }), h(p);
+    }), setColor(color2);
   }
-  return /* @__PURE__ */ d.jsx(
+  return __name(handleChangeColor, "handleChangeColor"), /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: T(m.imageCommonPanelGrid, m.imageCommonPanelBorder),
-      children: /* @__PURE__ */ d.jsxs("div", { className: m.imageCommonPanelGrid, children: [
-        /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ d.jsx("div", { children: n.t("slide.panel.fill.title") }) }) }),
-        /* @__PURE__ */ d.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ d.jsx("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ d.jsx(
-          Vt,
+      className: clsx(styles$4.imageCommonPanelGrid, styles$4.imageCommonPanelBorder),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelGrid, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("slide.panel.fill.title") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownLegacy,
           {
             align: {
               offset: [0, 18]
             },
-            overlay: /* @__PURE__ */ d.jsx("section", { className: m.slidePanelColorPicker, children: /* @__PURE__ */ d.jsx(
-              Wn,
+            overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: styles$4.slidePanelColorPicker, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ColorPicker,
               {
                 value: "#fff",
-                onChange: v
+                onChange: handleChangeColor
               }
             ) }),
-            children: /* @__PURE__ */ d.jsxs("a", { className: m.uiPluginSheetsBorderPanelButton, children: [
-              /* @__PURE__ */ d.jsx(Xt, { extend: { colorChannel1: u != null ? u : "rgb(var(--primary-color))" } }),
-              /* @__PURE__ */ d.jsx("span", { className: m.uiPluginSheetsBorderPanelMoreIcon, children: /* @__PURE__ */ d.jsx(qe, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { className: styles$4.uiPluginSheetsBorderPanelButton, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(PaintBucket, { extend: { colorChannel1: color != null ? color : "rgb(var(--primary-color))" } }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.uiPluginSheetsBorderPanelMoreIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, {}) })
             ] })
           }
         ) }) })
@@ -780,63 +795,65 @@ function zi(i) {
     }
   );
 }
-const Wi = "univer-image-common-panel", Ki = "univer-image-common-panel-grid", Gi = "univer-image-common-panel-border", Xi = "univer-image-common-panel-title", Yi = "univer-image-common-panel-subtitle", ki = "univer-image-common-panel-row", Zi = "univer-image-common-panel-row-vertical", qi = "univer-image-common-panel-column", Ji = "univer-image-common-panel-column-center", Qi = "univer-image-common-panel-inline", er = "univer-image-common-panel-span2", tr = "univer-image-common-panel-span3", nr = "univer-image-common-panel-input", ir = {
-  imageCommonPanel: Wi,
-  imageCommonPanelGrid: Ki,
-  imageCommonPanelBorder: Gi,
-  imageCommonPanelTitle: Xi,
-  imageCommonPanelSubtitle: Yi,
-  imageCommonPanelRow: ki,
-  imageCommonPanelRowVertical: Zi,
-  imageCommonPanelColumn: qi,
-  imageCommonPanelColumnCenter: Ji,
-  imageCommonPanelInline: Qi,
-  imageCommonPanelSpan2: er,
-  imageCommonPanelSpan3: tr,
-  imageCommonPanelInput: nr
-}, Re = "COMPONENT_SLIDE_SIDEBAR";
-function rr() {
-  var g, l, u;
-  const i = O(j), e = O(M), t = i.getCurrentUnitForType(x.UNIVER_SLIDE), n = (g = t == null ? void 0 : t.getActivePage()) == null ? void 0 : g.id;
-  if (!n) return null;
-  const s = (l = e.getRenderUnitByPageId(n, n).scene) == null ? void 0 : l.getTransformer();
-  if (!s) return null;
-  const a = s.getSelectedObjectMap().values().next().value;
-  if (!a)
+__name(ArrangePanel, "ArrangePanel");
+const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", styles$3 = {
+  imageCommonPanel,
+  imageCommonPanelGrid,
+  imageCommonPanelBorder,
+  imageCommonPanelTitle,
+  imageCommonPanelSubtitle,
+  imageCommonPanelRow,
+  imageCommonPanelRowVertical,
+  imageCommonPanelColumn,
+  imageCommonPanelColumnCenter,
+  imageCommonPanelInline,
+  imageCommonPanelSpan2,
+  imageCommonPanelSpan3,
+  imageCommonPanelInput
+}, COMPONENT_SLIDE_SIDEBAR = "COMPONENT_SLIDE_SIDEBAR";
+function RectSidebar() {
+  var _a11, _b, _c;
+  const univerInstanceService = useDependency(IUniverInstanceService), canvasView = useDependency(CanvasView), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pageId = (_a11 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a11.id;
+  if (!pageId) return null;
+  const transformer = (_b = canvasView.getRenderUnitByPageId(pageId, pageId).scene) == null ? void 0 : _b.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object)
     return null;
-  const c = ((u = i.getFocusedUnit()) == null ? void 0 : u.getUnitId()) || "";
-  return /* @__PURE__ */ d.jsxs("section", { className: ir.imageCommonPanel, children: [
-    /* @__PURE__ */ d.jsx(Hi, { pageId: n, unitId: c }),
-    /* @__PURE__ */ d.jsx(Fi, { pageId: n, unitId: c }),
-    a.objectType === he.RECT && /* @__PURE__ */ d.jsx(zi, { pageId: n, unitId: c })
+  const unitId = ((_c = univerInstanceService.getFocusedUnit()) == null ? void 0 : _c.getUnitId()) || "";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$3.imageCommonPanel, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel$1, { pageId, unitId }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TransformPanel, { pageId, unitId }),
+    object.objectType === ObjectType.RECT && /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel, { pageId, unitId })
   ] });
 }
-const Je = {
+__name(RectSidebar, "RectSidebar");
+const InsertSlideShapeRectangleCommand = {
   id: "slide.command.insert-float-shape",
-  type: D.COMMAND,
-  handler: async (i) => {
-    var r;
-    const e = i.get(U), n = (r = i.get(j).getFocusedUnit()) == null ? void 0 : r.getUnitId();
-    return e.executeCommand(Zt.id, { unitId: n });
-  }
-}, Zt = {
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor) => {
+    var _a11;
+    const commandService = accessor.get(ICommandService), unitId = (_a11 = accessor.get(IUniverInstanceService).getFocusedUnit()) == null ? void 0 : _a11.getUnitId();
+    return commandService.executeCommand(InsertSlideShapeRectangleOperation.id, { unitId });
+  }, "handler")
+}, InsertSlideShapeRectangleOperation = {
   id: "slide.operation.insert-float-shape",
-  type: D.OPERATION,
-  handler: async (i, e) => {
-    const t = xt(6), n = i.get(j), r = e.unitId, s = n.getUnit(r);
-    if (!s) return !1;
-    const o = s.getActivePage(), a = Object.values(o.pageElements), c = a != null && a.length ? Math.max(...a.map((h) => h.zIndex)) : 20, g = {
-      id: t,
-      zIndex: c + 1,
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const id = generateRandomId(6), univerInstanceService = accessor.get(IUniverInstanceService), unitId = params.unitId, slideData = univerInstanceService.getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 20, data = {
+      id,
+      zIndex: maxIndex + 1,
       left: 378,
       top: 142,
       width: 250,
       height: 250,
-      title: t,
+      title: id,
       description: "",
-      type: Xe.SHAPE,
+      type: PageElementType.SHAPE,
       shape: {
-        shapeType: _n.Rect,
+        shapeType: BasicShapes.Rect,
         text: "",
         shapeProperties: {
           shapeBackgroundFill: {
@@ -845,252 +862,256 @@ const Je = {
         }
       }
     };
-    o.pageElements[t] = g, s.updatePage(o.id, o);
-    const l = i.get(M), u = l.createObjectToPage(g, o.id, r);
-    return u && l.setObjectActiveByPage(u, o.id, r), !0;
-  }
-}, He = {
+    activePage.pageElements[id] = data, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id, unitId);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
+  }, "handler")
+}, ToggleSlideEditSidebarOperation = {
   id: "sidebar.operation.slide-shape",
-  type: D.COMMAND,
-  handler: async (i, e) => {
-    const { visible: t, objectType: n } = e, r = i.get(Dt), s = i.get(Q);
-    let o = "", a = "";
-    return n === he.RECT ? (o = "slide.sidebar.shape", a = Re) : n === he.IMAGE ? (o = "slide.sidebar.image", a = Re) : n === he.RICH_TEXT && (o = "slide.sidebar.text", a = Re), t ? r.open({
-      header: { title: s.t(o) },
-      children: { label: a },
-      onClose: () => {
-      },
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const { visible, objectType } = params, sidebarService = accessor.get(ISidebarService), localeService = accessor.get(LocaleService);
+    let title = "", children = "";
+    return objectType === ObjectType.RECT ? (title = "slide.sidebar.shape", children = COMPONENT_SLIDE_SIDEBAR) : objectType === ObjectType.IMAGE ? (title = "slide.sidebar.image", children = COMPONENT_SLIDE_SIDEBAR) : objectType === ObjectType.RICH_TEXT && (title = "slide.sidebar.text", children = COMPONENT_SLIDE_SIDEBAR), visible ? sidebarService.open({
+      header: { title: localeService.t(title) },
+      children: { label: children },
+      onClose: /* @__PURE__ */ __name(() => {
+      }, "onClose"),
       width: 360
-    }) : r.close(), !0;
-  }
-}, qt = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
-var sr = Object.defineProperty, or = Object.getOwnPropertyDescriptor, ar = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? or(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && sr(e, t, r), r;
-}, be = (i, e) => (t, n) => e(t, n, i);
-function cr(i, e) {
-  const t = _t(i.left, i.top, e), n = _t(i.right, i.bottom, e);
+    }) : sidebarService.close(), !0;
+  }, "handler")
+}, COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
+var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$7(target, key, result), result;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7");
+function transformBound2OffsetBound(originBound, scene) {
+  const topLeft = transformPosition2Offset(originBound.left, originBound.top, scene), bottomRight = transformPosition2Offset(originBound.right, originBound.bottom, scene);
   return {
-    left: t.x,
-    top: t.y,
-    right: n.x,
-    bottom: n.y
+    left: topLeft.x,
+    top: topLeft.y,
+    right: bottomRight.x,
+    bottom: bottomRight.y
   };
 }
-function _t(i, e, t) {
-  const { scaleX: n, scaleY: r } = t.getAncestorScale(), s = t.getViewport(se.VIEW);
-  if (!s)
+__name(transformBound2OffsetBound, "transformBound2OffsetBound");
+function transformPosition2Offset(x, y, scene) {
+  const { scaleX, scaleY } = scene.getAncestorScale(), viewMain = scene.getViewport(SLIDE_KEY.VIEW);
+  if (!viewMain)
     return {
-      x: i,
-      y: e
+      x,
+      y
     };
-  const { viewportScrollX: o, viewportScrollY: a } = s, c = (i - o) * n, g = (e - a) * r;
+  const { viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain, offsetX = (x - actualScrollX) * scaleX, offsetY = (y - actualScrollY) * scaleY;
   return {
-    x: c,
-    y: g
+    x: offsetX,
+    y: offsetY
   };
 }
-let ye = class extends Ue {
-  constructor(i, e, t, n) {
-    super(), this._globalPopupManagerService = i, this._renderManagerService = e, this._univerInstanceService = t, this._commandService = n;
-  }
-  _createObjectPositionObserver(i, e) {
-    const n = (() => {
-      var F, z, ee, te;
-      const { scene: o, engine: a } = e, { left: c, top: g, width: l, height: u } = i, h = (o.width - ((z = (F = e.mainComponent) == null ? void 0 : F.width) != null ? z : 0)) / 2, v = (o.height - ((te = (ee = e.mainComponent) == null ? void 0 : ee.height) != null ? te : 0)) / 2, _ = {
-        left: c,
-        right: c + l,
-        top: g,
-        bottom: g + u
-      }, C = a.getCanvasElement(), p = C.getBoundingClientRect(), f = wn(C.style.width), { scaleX: I, scaleY: b } = o.getAncestorScale(), E = cr(_, o), { top: w, left: V, width: R } = p, G = R / f;
+__name(transformPosition2Offset, "transformPosition2Offset");
+var _a3;
+let SlideCanvasPopMangerService = (_a3 = class extends Disposable {
+  constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
+    super(), this._globalPopupManagerService = _globalPopupManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService;
+  }
+  _createObjectPositionObserver(targetObject, currentRender) {
+    const position = (/* @__PURE__ */ __name(() => {
+      var _a11, _b, _c, _d;
+      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, horizontalOffset = (scene.width - ((_b = (_a11 = currentRender.mainComponent) == null ? void 0 : _a11.width) != null ? _b : 0)) / 2, verticalOffset = (scene.height - ((_d = (_c = currentRender.mainComponent) == null ? void 0 : _c.height) != null ? _d : 0)) / 2, bound = {
+        left,
+        right: left + width,
+        top,
+        bottom: top + height
+      }, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { scaleX, scaleY } = scene.getAncestorScale(), offsetBound = transformBound2OffsetBound(bound, scene), { top: topOffset, left: leftOffset, width: domWidth } = canvasClientRect, scaleAdjust = domWidth / widthOfCanvas;
       return {
-        left: E.left * G * I + V + h,
-        right: E.right * G * I + V + h,
-        top: E.top * G * b + w + v,
-        bottom: E.bottom * G * b + w + v
+        left: offsetBound.left * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+        right: offsetBound.right * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+        top: offsetBound.top * scaleAdjust * scaleY + topOffset + verticalOffset,
+        bottom: offsetBound.bottom * scaleAdjust * scaleY + topOffset + verticalOffset
       };
-    })(), r = new J(n), s = new Ye();
+    }, "calc"))(), position$ = new BehaviorSubject(position), disposable = new DisposableCollection();
     return {
-      position: n,
-      position$: r,
-      disposable: s
+      position,
+      position$,
+      disposable
     };
   }
-  attachPopupToObject(i, e) {
-    const n = this._univerInstanceService.getCurrentUnitForType(x.UNIVER_SLIDE).getUnitId(), r = this._renderManagerService.getRenderById(n);
-    if (!r)
+  attachPopupToObject(targetObject, popup) {
+    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getUnitId(), currentRender = this._renderManagerService.getRenderById(unitId);
+    if (!currentRender)
       return {
-        dispose: () => {
-        }
+        dispose: /* @__PURE__ */ __name(() => {
+        }, "dispose")
       };
-    const { position: s, position$: o, disposable: a } = this._createObjectPositionObserver(i, r), c = this._globalPopupManagerService.addPopup({
-      ...e,
-      unitId: n,
+    const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender), id = this._globalPopupManagerService.addPopup({
+      ...popup,
+      unitId,
       subUnitId: "default",
-      anchorRect: s,
-      anchorRect$: o,
-      canvasElement: r.engine.getCanvasElement()
+      anchorRect: position,
+      anchorRect$: position$,
+      canvasElement: currentRender.engine.getCanvasElement()
     });
     return {
-      dispose: () => {
-        this._globalPopupManagerService.removePopup(c), o.complete(), a.dispose();
-      }
+      dispose: /* @__PURE__ */ __name(() => {
+        this._globalPopupManagerService.removePopup(id), position$.complete(), disposable.dispose();
+      }, "dispose")
     };
   }
-};
-ye = ar([
-  be(0, X(Dn)),
-  be(1, Y),
-  be(2, j),
-  be(3, U)
-], ye);
-var lr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, ur = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? dr(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && lr(e, t, r), r;
-}, Z = (i, e) => (t, n) => e(t, n, i);
-let Te = class extends fe {
-  constructor(e, t, n, r, s, o, a) {
+}, __name(_a3, "SlideCanvasPopMangerService"), _a3);
+SlideCanvasPopMangerService = __decorateClass$7([
+  __decorateParam$7(0, Inject(ICanvasPopupService)),
+  __decorateParam$7(1, IRenderManagerService),
+  __decorateParam$7(2, IUniverInstanceService),
+  __decorateParam$7(3, ICommandService)
+], SlideCanvasPopMangerService);
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a4;
+let SlidePopupMenuController = (_a4 = class extends RxDisposable {
+  constructor(_canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _canvasView, _sidebarService, _commandService) {
     super();
-    P(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
-    this._canvasPopManagerService = e, this._renderManagerService = t, this._univerInstanceService = n, this._contextService = r, this._canvasView = s, this._sidebarService = o, this._commandService = a, this._init();
+    __publicField(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    this._canvasPopManagerService = _canvasPopManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._contextService = _contextService, this._canvasView = _canvasView, this._sidebarService = _sidebarService, this._commandService = _commandService, this._init();
   }
   _init() {
-    this._univerInstanceService.getAllUnitsForType(x.UNIVER_SLIDE).forEach((e) => this._create(e));
+    this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slide) => this._create(slide));
   }
-  _create(e) {
-    if (!e)
+  _create(slide) {
+    if (!slide)
       return;
-    const t = e.getUnitId();
-    this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+    const unitId = slide.getUnitId();
+    this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId) && (this._popupMenuListener(unitId), this._initImagePopupMenu.add(unitId));
   }
-  _hasCropObject(e) {
+  _hasCropObject(scene) {
   }
   // eslint-disable-next-line max-lines-per-function
-  _popupMenuListener(e) {
-    var r;
-    const t = this._univerInstanceService.getCurrentUnitForType(x.UNIVER_SLIDE), n = (r = t == null ? void 0 : t.getPages()) != null ? r : {};
-    Object.keys(n).forEach((s) => {
-      var g;
-      const a = (g = this._canvasView.getRenderUnitByPageId(s, e).scene) == null ? void 0 : g.getTransformer();
-      if (!a) return;
-      let c;
+  _popupMenuListener(unitId) {
+    var _a11;
+    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = (_a11 = model == null ? void 0 : model.getPages()) != null ? _a11 : {};
+    Object.keys(pages).forEach((pageId) => {
+      var _a12;
+      const transformer = (_a12 = this._canvasView.getRenderUnitByPageId(pageId, unitId).scene) == null ? void 0 : _a12.getTransformer();
+      if (!transformer) return;
+      let singletonPopupDisposer;
       this.disposeWithMe(
-        Et(
-          a.createControl$.subscribe(() => {
-            const l = a.getSelectedObjectMap();
-            if (l.size > 1) {
-              c == null || c.dispose();
+        toDisposable(
+          transformer.createControl$.subscribe(() => {
+            const selectedObjects = transformer.getSelectedObjectMap();
+            if (selectedObjects.size > 1) {
+              singletonPopupDisposer == null || singletonPopupDisposer.dispose();
               return;
             }
-            const u = l.values().next().value;
-            if (!u)
+            const object = selectedObjects.values().next().value;
+            if (!object)
               return;
-            const h = u.oKey;
-            c == null || c.dispose(), c = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(u, {
-              componentKey: qt,
+            const oKey = object.oKey;
+            singletonPopupDisposer == null || singletonPopupDisposer.dispose(), singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+              componentKey: COMPONENT_SLIDE_IMAGE_POPUP_MENU,
               direction: "horizontal",
               offset: [2, 0],
               extraProps: {
-                menuItems: this._getMenuItemsByObjectType(u.objectType, h, e)
+                menuItems: this._getMenuItemsByObjectType(object.objectType, oKey, unitId)
               }
-            })), this._sidebarService.visible && this._commandService.executeCommand(He.id, {
+            })), this._sidebarService.visible && this._commandService.executeCommand(ToggleSlideEditSidebarOperation.id, {
               visible: !0,
-              objectType: u.objectType
+              objectType: object.objectType
             });
           })
         )
       ), this.disposeWithMe(
-        a.clearControl$.subscribe(() => {
-          c == null || c.dispose(), this._contextService.setContextValue(Sn, !1);
+        transformer.clearControl$.subscribe(() => {
+          singletonPopupDisposer == null || singletonPopupDisposer.dispose(), this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1);
         })
       ), this.disposeWithMe(
-        a.changing$.subscribe(() => {
-          c == null || c.dispose();
-          const l = a.getSelectedObjectMap();
-          if (l.size > 1) {
-            c == null || c.dispose();
+        transformer.changing$.subscribe(() => {
+          singletonPopupDisposer == null || singletonPopupDisposer.dispose();
+          const selectedObjects = transformer.getSelectedObjectMap();
+          if (selectedObjects.size > 1) {
+            singletonPopupDisposer == null || singletonPopupDisposer.dispose();
             return;
           }
-          const u = l.values().next().value;
-          u && this._commandService.executeCommand(K.id, {
-            unitId: e,
-            oKey: u.oKey,
+          const object = selectedObjects.values().next().value;
+          object && this._commandService.executeCommand(UpdateSlideElementOperation.id, {
+            unitId,
+            oKey: object.oKey,
             props: {
-              width: u.width,
-              height: u.height,
-              left: u.left,
-              top: u.top
+              width: object.width,
+              height: object.height,
+              left: object.left,
+              top: object.top
             }
           });
         })
       );
     });
   }
-  _getMenuItemsByObjectType(e, t, n) {
+  _getMenuItemsByObjectType(objectType, oKey, unitId) {
     return [{
       label: "slide.popup.edit",
       index: 0,
-      commandId: He.id,
+      commandId: ToggleSlideEditSidebarOperation.id,
       commandParams: {
         visible: !0,
-        objectType: e
+        objectType
       },
       disable: !1
     }, {
       label: "slide.popup.delete",
       index: 5,
-      commandId: Lt.id,
+      commandId: DeleteSlideElementOperation.id,
       commandParams: {
-        id: t,
-        unitId: n
+        id: oKey,
+        unitId
       },
       disable: !1
     }];
   }
-};
-Te = ur([
-  Z(0, X(ye)),
-  Z(1, Y),
-  Z(2, j),
-  Z(3, Ce),
-  Z(4, X(M)),
-  Z(5, Dt),
-  Z(6, U)
-], Te);
-const Me = {
+}, __name(_a4, "SlidePopupMenuController"), _a4);
+SlidePopupMenuController = __decorateClass$6([
+  __decorateParam$6(0, Inject(SlideCanvasPopMangerService)),
+  __decorateParam$6(1, IRenderManagerService),
+  __decorateParam$6(2, IUniverInstanceService),
+  __decorateParam$6(3, IContextService),
+  __decorateParam$6(4, Inject(CanvasView)),
+  __decorateParam$6(5, ISidebarService),
+  __decorateParam$6(6, ICommandService)
+], SlidePopupMenuController);
+const SetTextEditArrowOperation = {
   id: "slide.operation.edit-arrow",
-  type: D.OPERATION,
-  handler: () => !0
-}, ae = In("SLIDE_EDITOR");
-var mr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, hr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? gr(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && mr(e, t, r), r;
-}, Le = (i, e) => (t, n) => e(t, n, i);
-const Qe = Rt("univer.slide-editor-bridge.service");
-let Fe = class extends Ue {
-  constructor(e, t, n) {
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(() => !0, "handler")
+}, SLIDE_EDITOR_ID = createInternalEditorID("SLIDE_EDITOR");
+var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5");
+const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
+var _a5;
+let SlideEditorBridgeService = (_a5 = class extends Disposable {
+  constructor(_editorService, _contextService, _renderManagerService) {
     super();
-    P(this, "_editorUnitId", ae);
-    P(this, "_isForceKeepVisible", !1);
-    P(this, "_editorIsDirty", !1);
-    P(this, "_currentEditRectState", null);
-    P(this, "_currentEditRectState$", new J(null));
-    P(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
-    P(this, "_visibleParam", {
+    __publicField(this, "_editorUnitId", SLIDE_EDITOR_ID);
+    __publicField(this, "_isForceKeepVisible", !1);
+    __publicField(this, "_editorIsDirty", !1);
+    __publicField(this, "_currentEditRectState", null);
+    __publicField(this, "_currentEditRectState$", new BehaviorSubject(null));
+    __publicField(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
+    __publicField(this, "_visibleParam", {
       visible: !1,
-      eventType: q.Dblclick,
+      eventType: DeviceInputEventType.Dblclick,
       unitId: ""
     });
-    P(this, "_visible$", new J(this._visibleParam));
-    P(this, "visible$", this._visible$.asObservable());
-    P(this, "_afterVisible$", new J(this._visibleParam));
-    P(this, "afterVisible$", this._afterVisible$.asObservable());
-    P(this, "endEditing$", new Bt());
-    P(this, "_currentEditRectInfo");
-    this._editorService = e, this._contextService = t, this._renderManagerService = n;
+    __publicField(this, "_visible$", new BehaviorSubject(this._visibleParam));
+    __publicField(this, "visible$", this._visible$.asObservable());
+    __publicField(this, "_afterVisible$", new BehaviorSubject(this._visibleParam));
+    __publicField(this, "afterVisible$", this._afterVisible$.asObservable());
+    __publicField(this, "endEditing$", new Subject());
+    __publicField(this, "_currentEditRectInfo");
+    this._editorService = _editorService, this._contextService = _contextService, this._renderManagerService = _renderManagerService;
   }
   dispose() {
     super.dispose();
@@ -1102,13 +1123,13 @@ let Fe = class extends Ue {
    * 1st part of startEditing.
    * @editorInfo editorInfo
    */
-  setEditorRect(e) {
-    this._currentEditRectInfo = e, this._editorService.getFocusEditor() || (this._editorService.focus(ae), this._contextService.setContextValue(Oe, !1), this._contextService.setContextValue(Ot, !1), this._contextService.setContextValue(jt, !1));
-    const t = this.getEditRectState();
-    this._currentEditRectState = t, this._currentEditRectState$.next(t);
+  setEditorRect(editorInfo) {
+    this._currentEditRectInfo = editorInfo, this._editorService.getFocusEditor() || (this._editorService.focus(SLIDE_EDITOR_ID), this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, !1), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, !1));
+    const editRectState = this.getEditRectState();
+    this._currentEditRectState = editRectState, this._currentEditRectState$.next(editRectState);
   }
-  changeVisible(e) {
-    this._visibleParam = e, e.visible && (this._editorIsDirty = !1), this._visible$.next(this._visibleParam), this._afterVisible$.next(this._visibleParam);
+  changeVisible(param) {
+    this._visibleParam = param, param.visible && (this._editorIsDirty = !1), this._visible$.next(this._visibleParam), this._afterVisible$.next(this._visibleParam);
   }
   /**
    * get info from _currentEditRectInfo
@@ -1117,43 +1138,43 @@ let Fe = class extends Ue {
    * && this@setEditorRect
    */
   getEditRectState() {
-    const e = ae, t = this._currentEditRectInfo, n = t.unitId, r = t.richTextObj.documentData;
-    r.id = e, r.documentStyle = {
-      ...r.documentStyle,
-      pageSize: { width: t.richTextObj.width, height: 1 / 0 }
+    const editorUnitId = SLIDE_EDITOR_ID, editorRectInfo = this._currentEditRectInfo, unitId = editorRectInfo.unitId, docData = editorRectInfo.richTextObj.documentData;
+    docData.id = editorUnitId, docData.documentStyle = {
+      ...docData.documentStyle,
+      pageSize: { width: editorRectInfo.richTextObj.width, height: 1 / 0 }
     };
-    const o = {
-      documentModel: new Pn(r),
+    const documentLayoutObject = {
+      documentModel: new DocumentDataModel(docData),
       fontString: "document",
       textRotation: { a: 0, v: 0 },
       wrapStrategy: 0,
-      verticalAlign: je.TOP,
-      horizontalAlign: yt.LEFT,
+      verticalAlign: VerticalAlign.TOP,
+      horizontalAlign: HorizontalAlign.LEFT,
       paddingData: { t: 0, b: 1, l: 2, r: 2 }
-    }, a = t.richTextObj.width, c = t.richTextObj.height, g = t.richTextObj.left, l = t.richTextObj.top, u = {
+    }, editorWidth = editorRectInfo.richTextObj.width, editorHeight = editorRectInfo.richTextObj.height, left = editorRectInfo.richTextObj.left, top = editorRectInfo.richTextObj.top, canvasOffset = {
       left: 0,
       top: 0
-    }, h = this._renderManagerService.getRenderById(n), v = h == null ? void 0 : h.scene, _ = v == null ? void 0 : v.getViewport(se.VIEW), C = v == null ? void 0 : v.getObject(se.COMPONENT), p = {
-      x: (C == null ? void 0 : C.left) || 0,
-      y: (C == null ? void 0 : C.top) || 0
-    }, f = (_ == null ? void 0 : _.viewportScrollX) || 0, I = (_ == null ? void 0 : _.viewportScrollY) || 0;
-    return u.left = p.x - f, u.top = p.y - I, {
+    }, renderUnit = this._renderManagerService.getRenderById(unitId), mainScene = renderUnit == null ? void 0 : renderUnit.scene, mainViewport = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), slideMainRect = mainScene == null ? void 0 : mainScene.getObject(SLIDE_KEY.COMPONENT), slidePos = {
+      x: (slideMainRect == null ? void 0 : slideMainRect.left) || 0,
+      y: (slideMainRect == null ? void 0 : slideMainRect.top) || 0
+    }, scrollX = (mainViewport == null ? void 0 : mainViewport.viewportScrollX) || 0, scrollY = (mainViewport == null ? void 0 : mainViewport.viewportScrollY) || 0;
+    return canvasOffset.left = slidePos.x - scrollX, canvasOffset.top = slidePos.y - scrollY, {
       position: {
-        startX: g,
-        startY: l,
-        endX: g + a,
-        endY: l + c
+        startX: left,
+        startY: top,
+        endX: left + editorWidth,
+        endY: top + editorHeight
       },
       scaleX: 1,
       scaleY: 1,
-      slideCardOffset: u,
-      unitId: n,
-      editorUnitId: e,
-      documentLayoutObject: o
+      slideCardOffset: canvasOffset,
+      unitId,
+      editorUnitId,
+      documentLayoutObject
     };
   }
-  changeEditorDirty(e) {
-    this._editorIsDirty = e;
+  changeEditorDirty(dirtyStatus) {
+    this._editorIsDirty = dirtyStatus;
   }
   isVisible() {
     return this._visibleParam.visible;
@@ -1167,14 +1188,14 @@ let Fe = class extends Ue {
   /**
    * @deprecated
    */
-  genDocData(e) {
-    const t = this.getCurrentEditorId(), n = e.text, r = e.fs;
+  genDocData(target) {
+    const editorUnitId = this.getCurrentEditorId(), content = target.text, fontSize = target.fs;
     return {
-      id: t,
+      id: editorUnitId,
       body: {
-        dataStream: `${n}\r
+        dataStream: `${content}\r
 `,
-        textRuns: [{ st: 0, ed: n.length }],
+        textRuns: [{ st: 0, ed: content.length }],
         paragraphs: [{
           paragraphStyle: {
             // no use
@@ -1182,9 +1203,9 @@ let Fe = class extends Ue {
             // horizontalAlign: HorizontalAlign.CENTER,
             // verticalAlign: VerticalAlign.MIDDLE,
           },
-          startIndex: n.length + 1
+          startIndex: content.length + 1
         }],
-        sectionBreaks: [{ startIndex: n.length + 2 }]
+        sectionBreaks: [{ startIndex: content.length + 2 }]
       },
       documentStyle: {
         marginBottom: 0,
@@ -1192,10 +1213,10 @@ let Fe = class extends Ue {
         marginRight: 0,
         marginTop: 0,
         pageSize: { width: 1 / 0, height: 1 / 0 },
-        textStyle: { fs: r },
+        textStyle: { fs: fontSize },
         renderConfig: {
           // horizontalAlign: HorizontalAlign.CENTER,
-          verticalAlign: je.MIDDLE,
+          verticalAlign: VerticalAlign.MIDDLE,
           centerAngle: 0,
           vertexAngle: 0,
           wrapStrategy: 0
@@ -1206,70 +1227,73 @@ let Fe = class extends Ue {
       settings: { zoomRatio: 1 }
     };
   }
-};
-Fe = hr([
-  Le(0, Ze),
-  Le(1, Ce),
-  Le(2, Y)
-], Fe);
-class pr {
+}, __name(_a5, "SlideEditorBridgeService"), _a5);
+SlideEditorBridgeService = __decorateClass$5([
+  __decorateParam$5(0, IEditorService),
+  __decorateParam$5(1, IContextService),
+  __decorateParam$5(2, IRenderManagerService)
+], SlideEditorBridgeService);
+const _SlideEditorManagerService = class _SlideEditorManagerService {
   constructor() {
-    P(this, "_state", null);
-    P(this, "_rect", null);
-    P(this, "_state$", new J(null));
-    P(this, "state$", this._state$.asObservable());
-    P(this, "_rect$", new J(null));
-    P(this, "rect$", this._rect$.asObservable());
-    P(this, "_focus", !1);
-    P(this, "_focus$", new J(this._focus));
-    P(this, "focus$", this._focus$.asObservable());
+    __publicField(this, "_state", null);
+    __publicField(this, "_rect", null);
+    __publicField(this, "_state$", new BehaviorSubject(null));
+    __publicField(this, "state$", this._state$.asObservable());
+    __publicField(this, "_rect$", new BehaviorSubject(null));
+    __publicField(this, "rect$", this._rect$.asObservable());
+    __publicField(this, "_focus", !1);
+    __publicField(this, "_focus$", new BehaviorSubject(this._focus));
+    __publicField(this, "focus$", this._focus$.asObservable());
   }
   dispose() {
     this._state$.complete(), this._state = null, this._rect$.complete(), this._rect = null;
   }
-  setState(e) {
-    this._state = e, this._refresh(e);
+  setState(param) {
+    this._state = param, this._refresh(param);
   }
   getRect() {
     return this._rect;
   }
-  setRect(e) {
-    this._rect = e, this._rect$.next(e);
+  setRect(param) {
+    this._rect = param, this._rect$.next(param);
   }
   getState() {
     return this._state;
   }
-  setFocus(e = !1) {
-    this._focus = e, this._focus$.next(e);
+  setFocus(param = !1) {
+    this._focus = param, this._focus$.next(param);
   }
-  _refresh(e) {
-    this._state$.next(e);
+  _refresh(param) {
+    this._state$.next(param);
   }
-}
-const et = Rt(
+};
+__name(_SlideEditorManagerService, "SlideEditorManagerService");
+let SlideEditorManagerService = _SlideEditorManagerService;
+const ISlideEditorManagerService = createIdentifier(
   "univer.slide-editor-manager.service"
 );
-var k = /* @__PURE__ */ ((i) => (i[i.InitialState = 0] = "InitialState", i[i.StartEditor = 1] = "StartEditor", i[i.CursorChange = 2] = "CursorChange", i))(k || {}), fr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, vr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Cr(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && fr(e, t, r), r;
-}, L = (i, e) => (t, n) => e(t, n, i);
-const St = -1e3, It = 5, _r = 2;
-let ze = class extends Ue {
-  constructor(e, t, n, r, s, o, a, c, g, l, u, h) {
+var CursorChange = /* @__PURE__ */ ((_CursorChange) => (_CursorChange[_CursorChange.InitialState = 0] = "InitialState", _CursorChange[_CursorChange.StartEditor = 1] = "StartEditor", _CursorChange[_CursorChange.CursorChange = 2] = "CursorChange", _CursorChange))(CursorChange || {}), __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
+const HIDDEN_EDITOR_POSITION$1 = -1e3, EDITOR_INPUT_SELF_EXTEND_GAP = 5, EDITOR_BORDER_SIZE = 2;
+var _a6;
+let SlideEditingRenderController = (_a6 = class extends Disposable {
+  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionManagerService, _commandService, _localService, _editorService) {
     super();
     /**
      * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
      */
-    P(this, "_cursorChange", k.InitialState);
+    __publicField(this, "_cursorChange", CursorChange.InitialState);
     /** If the corresponding unit is active and prepared for editing. */
-    P(this, "_isUnitEditing", !1);
-    P(this, "_d");
-    this._renderContext = e, this._layoutService = t, this._undoRedoService = n, this._contextService = r, this._instanceSrv = s, this._renderManagerService = o, this._editorBridgeService = a, this._cellEditorManagerService = c, this._textSelectionManagerService = g, this._commandService = l, this._localService = u, this._editorService = h, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(x.UNIVER_SLIDE).subscribe((v) => {
-      v && v.getUnitId() === this._renderContext.unitId ? this._d = this._init() : (this._disposeCurrent(), this._isUnitEditing && (this._handleEditorInvisible({
+    __publicField(this, "_isUnitEditing", !1);
+    __publicField(this, "_d");
+    this._renderContext = _renderContext, this._layoutService = _layoutService, this._undoRedoService = _undoRedoService, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._editorBridgeService = _editorBridgeService, this._cellEditorManagerService = _cellEditorManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : (this._disposeCurrent(), this._isUnitEditing && (this._handleEditorInvisible({
         visible: !1,
-        eventType: q.Keyboard,
-        keycode: y.ESC,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode: KeyCode.ESC,
         unitId: this._renderContext.unitId
       }), this._isUnitEditing = !1));
     })), this._initEditorVisibilityListener();
@@ -1278,61 +1302,61 @@ let ze = class extends Ue {
     super.dispose(), this._disposeCurrent();
   }
   _disposeCurrent() {
-    var e;
-    (e = this._d) == null || e.dispose(), this._d = null;
+    var _a11;
+    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
   }
   _init() {
-    const e = new Ye();
-    return this._subscribeToCurrentCell(e), this._initialKeyboardListener(e), this._initialCursorSync(e), this._listenEditorFocus(e), this._commandExecutedListener(e), setTimeout(() => {
-      this._cursorStateListener(e);
-    }, 1e3), e;
+    const d = new DisposableCollection();
+    return this._subscribeToCurrentCell(d), this._initialKeyboardListener(d), this._initialCursorSync(d), this._listenEditorFocus(d), this._commandExecutedListener(d), setTimeout(() => {
+      this._cursorStateListener(d);
+    }, 1e3), d;
   }
   _initEditorVisibilityListener() {
-    this.disposeWithMe(this._editorBridgeService.visible$.subscribe((e) => {
-      e.visible ? (this._isUnitEditing = !0, this._handleEditorVisible(e)) : this._isUnitEditing && (this._handleEditorInvisible(e), this._isUnitEditing = !1);
+    this.disposeWithMe(this._editorBridgeService.visible$.subscribe((param) => {
+      param.visible ? (this._isUnitEditing = !0, this._handleEditorVisible(param)) : this._isUnitEditing && (this._handleEditorInvisible(param), this._isUnitEditing = !1);
     }));
   }
-  _listenEditorFocus(e) {
-    const t = this._getEditorObject();
-    t && e.add(t.document.onPointerDown$.subscribeEvent(() => {
+  _listenEditorFocus(d) {
+    const renderConfig = this._getEditorObject();
+    renderConfig && d.add(renderConfig.document.onPointerDown$.subscribeEvent(() => {
     }));
   }
-  _getEditorSkeleton(e) {
-    var t;
-    return (t = this._renderManagerService.getRenderById(e)) == null ? void 0 : t.with(gt).getSkeleton();
+  _getEditorSkeleton(editorId) {
+    var _a11;
+    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getSkeleton();
   }
-  _getEditorViewModel(e) {
-    var t;
-    return (t = this._renderManagerService.getRenderById(e)) == null ? void 0 : t.with(gt).getViewModel();
+  _getEditorViewModel(editorId) {
+    var _a11;
+    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getViewModel();
   }
-  _initialCursorSync(e) {
-    e.add(this._cellEditorManagerService.focus$.pipe(Gn((t) => !!t)).subscribe(() => {
-      var n;
-      const t = (n = this._renderManagerService.getCurrentTypeOfRenderer(x.UNIVER_DOC)) == null ? void 0 : n.with(ht);
-      t && t.sync();
+  _initialCursorSync(d) {
+    d.add(this._cellEditorManagerService.focus$.pipe(filter((f) => !!f)).subscribe(() => {
+      var _a11;
+      const docSelectionRenderManager = (_a11 = this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a11.with(DocSelectionRenderService);
+      docSelectionRenderManager && docSelectionRenderManager.sync();
     }));
   }
   /**
    * Set editorUnitId to curr doc.
    * @param d DisposableCollection
    */
-  _subscribeToCurrentCell(e) {
-    e.add(this._editorBridgeService.currentEditRectState$.subscribe((t) => {
-      var h;
-      if (t == null || this._contextService.getContextValue(Ot) || this._contextService.getContextValue(jt))
+  _subscribeToCurrentCell(d) {
+    d.add(this._editorBridgeService.currentEditRectState$.subscribe((editCellState) => {
+      var _a11;
+      if (editCellState == null || this._contextService.getContextValue(FOCUSING_EDITOR_STANDALONE) || this._contextService.getContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE))
         return;
       const {
-        position: { startX: n, endX: r },
-        documentLayoutObject: { textRotation: s, wrapStrategy: o, documentModel: a },
-        scaleX: c,
-        editorUnitId: g
-      } = t, { vertexAngle: l } = at(s);
-      a.updateDocumentId(g), o === it.WRAP && l === 0 && a.updateDocumentDataPageSize((r - n) / c), this._instanceSrv.changeDoc(g, a), this._contextService.setContextValue(bn, !0), this._textSelectionManagerService.replaceTextRanges([{
+        position: { startX, endX },
+        documentLayoutObject: { textRotation, wrapStrategy, documentModel },
+        scaleX,
+        editorUnitId
+      } = editCellState, { vertexAngle: angle } = convertTextRotation(textRotation);
+      documentModel.updateDocumentId(editorUnitId), wrapStrategy === WrapStrategy.WRAP && angle === 0 && documentModel.updateDocumentDataPageSize((endX - startX) / scaleX), this._instanceSrv.changeDoc(editorUnitId, documentModel), this._contextService.setContextValue(FOCUSING_EDITOR_BUT_HIDDEN, !0), this._textSelectionManagerService.replaceTextRanges([{
         startOffset: 0,
         endOffset: 0
       }]);
-      const u = (h = this._renderManagerService.getCurrentTypeOfRenderer(x.UNIVER_DOC)) == null ? void 0 : h.with(ht);
-      u && u.activate(St, St);
+      const docSelectionRenderManager = (_a11 = this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a11.with(DocSelectionRenderService);
+      docSelectionRenderManager && docSelectionRenderManager.activate(HIDDEN_EDITOR_POSITION$1, HIDDEN_EDITOR_POSITION$1);
     }));
   }
   /**
@@ -1344,112 +1368,113 @@ let ze = class extends Ue {
    * @param scaleX
    * @param scaleY
    */
-  _fitTextSize(e, t, n, r, s = 1, o = 1) {
-    const { startX: a, startY: c, endX: g, endY: l } = e, u = r.documentModel;
-    if (u == null)
+  _fitTextSize(positionFromEditRectState, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+    const { startX, startY, endX, endY } = positionFromEditRectState, documentDataModel = documentLayoutObject.documentModel;
+    if (documentDataModel == null)
       return;
-    const { actualWidth: h, actualHeight: v } = this._predictingSize(
-      e,
-      t,
-      n,
-      r,
-      s,
-      o
-    ), { verticalAlign: _, paddingData: C, fill: p } = r;
-    let f = g - a, I = l - c;
-    if (f < h && (f = h), I < v)
-      I = v, u.updateDocumentDataMargin(C);
+    const { actualWidth, actualHeight } = this._predictingSize(
+      positionFromEditRectState,
+      canvasOffset,
+      documentSkeleton,
+      documentLayoutObject,
+      scaleX,
+      scaleY
+    ), { verticalAlign, paddingData, fill } = documentLayoutObject;
+    let editorWidth = endX - startX, editorHeight = endY - startY;
+    if (editorWidth < actualWidth && (editorWidth = actualWidth), editorHeight < actualHeight)
+      editorHeight = actualHeight, documentDataModel.updateDocumentDataMargin(paddingData);
     else {
-      let b = 0;
-      _ === je.MIDDLE ? b = (I - v) / 2 / o : _ === je.TOP ? b = C.t || 0 : b = (I - v) / o - (C.b || 0), b = b < (C.t || 0) ? C.t || 0 : b, u.updateDocumentDataMargin({
-        t: b
+      let offsetTop = 0;
+      verticalAlign === VerticalAlign.MIDDLE ? offsetTop = (editorHeight - actualHeight) / 2 / scaleY : verticalAlign === VerticalAlign.TOP ? offsetTop = paddingData.t || 0 : offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0), offsetTop = offsetTop < (paddingData.t || 0) ? paddingData.t || 0 : offsetTop, documentDataModel.updateDocumentDataMargin({
+        t: offsetTop
       });
     }
-    n.calculate(), this._editAreaProcessing(f, I, e, t, p, s, o);
+    documentSkeleton.calculate(), this._editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX, scaleY);
   }
   /**
    * Mainly used to pre-calculate the width of the editor,
    * to determine whether it needs to be automatically widened.
    */
-  _predictingSize(e, t, n, r, s = 1, o = 1) {
-    const { startX: a, endX: c } = e, { textRotation: g, wrapStrategy: l } = r, u = r.documentModel, { vertexAngle: h } = at(g), v = document.body.clientWidth;
-    if (l === it.WRAP && h === 0) {
-      const { actualWidth: p, actualHeight: f } = n.getActualSize();
+  _predictingSize(actualRangeWithCoord, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+    const { startX, endX } = actualRangeWithCoord, { textRotation, wrapStrategy } = documentLayoutObject, documentDataModel = documentLayoutObject.documentModel, { vertexAngle: angle } = convertTextRotation(textRotation), clientWidth = document.body.clientWidth;
+    if (wrapStrategy === WrapStrategy.WRAP && angle === 0) {
+      const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
       return {
-        actualWidth: p * s,
-        actualHeight: f * o
+        actualWidth: actualWidth * scaleX,
+        actualHeight: actualHeight * scaleY
       };
     }
-    u == null || u.updateDocumentDataPageSize((v - a - t.left) / s), n.calculate();
-    const _ = n.getActualSize();
-    let C = c - a;
-    return C < _.actualWidth * s + It * s && (C = _.actualWidth * s + It * s), u == null || u.updateDocumentDataPageSize(C / s), u == null || u.updateDocumentRenderConfig({
-      horizontalAlign: yt.UNSPECIFIED,
+    documentDataModel == null || documentDataModel.updateDocumentDataPageSize((clientWidth - startX - canvasOffset.left) / scaleX), documentSkeleton.calculate();
+    const size = documentSkeleton.getActualSize();
+    let editorWidth = endX - startX;
+    return editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX && (editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX), documentDataModel == null || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX), documentDataModel == null || documentDataModel.updateDocumentRenderConfig({
+      horizontalAlign: HorizontalAlign.UNSPECIFIED,
       cellValueType: void 0
     }), {
-      actualWidth: C,
-      actualHeight: _.actualHeight * o
+      actualWidth: editorWidth,
+      actualHeight: size.actualHeight * scaleY
     };
   }
   /**
    * control the size of editing area
    */
   // eslint-disable-next-line max-lines-per-function
-  _editAreaProcessing(e, t, n, r, s, o = 1, a = 1) {
-    var S;
-    const c = this._getEditorObject();
-    if (c == null)
+  _editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX = 1, scaleY = 1) {
+    var _a11;
+    const editorObject = this._getEditorObject();
+    if (editorObject == null)
       return;
-    function g(le) {
-      return Number.parseInt(le.replace("px", ""));
+    function pxToNum2(width2) {
+      return Number.parseInt(width2.replace("px", ""));
     }
-    const u = this._renderContext.engine.getCanvasElement(), h = u.getBoundingClientRect(), v = g(u.style.width), { top: _, left: C, width: p } = h, f = p / v;
-    let { startX: I, startY: b } = n;
-    I += r.left, b += r.top;
-    const { document: E, scene: w, engine: V } = c, R = w.getViewport(pt.VIEW_MAIN), G = document.body.clientHeight - b - r.top - _r * 2, ce = document.body.clientWidth - I - r.left;
-    let F = t, z = R == null ? void 0 : R.getScrollBar();
-    F > G ? (F = G, z == null ? R && new wt(R, { enableHorizontal: !1, barSize: 8 }) : R == null || R.resetCanvasSizeAndUpdateScroll()) : (z = null, (S = R == null ? void 0 : R.getScrollBar()) == null || S.dispose()), e += (z == null ? void 0 : z.barSize) || 0, e = Math.min(e, ce), I -= re, b -= re, this._addBackground(w, e / o, t / a, s);
-    const { scaleX: ee, scaleY: te } = w.getPrecisionScale();
-    w.transformByState({
-      width: e * f / o,
-      height: t * f / a,
-      scaleX: o * f,
-      scaleY: a * f
-    }), E.resize(e / o, t / a), setTimeout(() => {
-      V.resizeBySize(
-        ct(e, ee),
-        ct(F, te)
+    __name(pxToNum2, "pxToNum");
+    const canvasElement = this._renderContext.engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum2(canvasElement.style.width), { top, left, width } = canvasClientRect, scaleAdjust = width / widthOfCanvas;
+    let { startX, startY } = positionFromEditRectState;
+    startX += canvasOffset.left, startY += canvasOffset.top;
+    const { document: documentComponent, scene: editorScene, engine: docEngine } = editorObject, viewportMain = editorScene.getViewport(VIEWPORT_KEY.VIEW_MAIN), clientHeight = document.body.clientHeight - startY - canvasOffset.top - EDITOR_BORDER_SIZE * 2, clientWidth = document.body.clientWidth - startX - canvasOffset.left;
+    let physicHeight = editorHeight, scrollBar = viewportMain == null ? void 0 : viewportMain.getScrollBar();
+    physicHeight > clientHeight ? (physicHeight = clientHeight, scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll()) : (scrollBar = null, (_a11 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a11.dispose()), editorWidth += (scrollBar == null ? void 0 : scrollBar.barSize) || 0, editorWidth = Math.min(editorWidth, clientWidth), startX -= FIX_ONE_PIXEL_BLUR_OFFSET, startY -= FIX_ONE_PIXEL_BLUR_OFFSET, this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
+    const { scaleX: precisionScaleX, scaleY: precisionScaleY } = editorScene.getPrecisionScale();
+    editorScene.transformByState({
+      width: editorWidth * scaleAdjust / scaleX,
+      height: editorHeight * scaleAdjust / scaleY,
+      scaleX: scaleX * scaleAdjust,
+      scaleY: scaleY * scaleAdjust
+    }), documentComponent.resize(editorWidth / scaleX, editorHeight / scaleY), setTimeout(() => {
+      docEngine.resizeBySize(
+        fixLineWidthByScale(editorWidth, precisionScaleX),
+        fixLineWidthByScale(physicHeight, precisionScaleY)
       );
     }, 0);
-    const Se = this._layoutService.getContentElement().getBoundingClientRect(), Ie = u.getBoundingClientRect();
-    I = I * f + (Ie.left - Se.left), b = b * f + (Ie.top - Se.top), this._cellEditorManagerService.setState({
-      startX: I,
-      startY: b,
-      endX: e * f + I,
-      endY: F * f + b,
+    const contentBoundingRect = this._layoutService.getContentElement().getBoundingClientRect(), canvasBoundingRect = canvasElement.getBoundingClientRect();
+    startX = startX * scaleAdjust + (canvasBoundingRect.left - contentBoundingRect.left), startY = startY * scaleAdjust + (canvasBoundingRect.top - contentBoundingRect.top), this._cellEditorManagerService.setState({
+      startX,
+      startY,
+      endX: editorWidth * scaleAdjust + startX,
+      endY: physicHeight * scaleAdjust + startY,
       show: !0
     });
   }
   /**
    * Since the document does not support cell background color, an additional rect needs to be added.
    */
-  _addBackground(e, t, n, r) {
-    const s = "_backgroundRectHelperColor_", o = e.getObject(s);
-    o == null && r == null || (o == null ? e.addObjects(
+  _addBackground(scene, editorWidth, editorHeight, fill) {
+    const fillRectKey = "_backgroundRectHelperColor_", rect = scene.getObject(fillRectKey);
+    rect == null && fill == null || (rect == null ? scene.addObjects(
       [
-        new Nt(s, {
-          width: t,
-          height: n,
-          fill: r,
+        new Rect(fillRectKey, {
+          width: editorWidth,
+          height: editorHeight,
+          fill,
           evented: !1
         })
       ],
-      kn
-    ) : r == null ? o.dispose() : (o.setProps({
-      fill: r
-    }), o.transformByState({
-      width: t,
-      height: n
+      DOCS_COMPONENT_MAIN_LAYER_INDEX
+    ) : fill == null ? rect.dispose() : (rect.setProps({
+      fill
+    }), rect.transformByState({
+      width: editorWidth,
+      height: editorHeight
     })));
   }
   /**
@@ -1460,114 +1485,114 @@ let ze = class extends Ue {
   // handleVisible is the 2nd part of editing.
   // first part: startEditing --> _updateEditor
   // 2nd part: startEditing --> changeVisible --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
-  _handleEditorVisible(e) {
-    var p, f;
-    const { eventType: t } = e;
-    this._cursorChange = [q.PointerDown, q.Dblclick].includes(t) ? k.CursorChange : k.StartEditor;
-    const n = this._editorBridgeService.getEditRectState();
-    if (n == null)
+  _handleEditorVisible(param) {
+    var _a11, _b;
+    const { eventType } = param;
+    this._cursorChange = [DeviceInputEventType.PointerDown, DeviceInputEventType.Dblclick].includes(eventType) ? CursorChange.CursorChange : CursorChange.StartEditor;
+    const editCellState = this._editorBridgeService.getEditRectState();
+    if (editCellState == null)
       return;
     const {
-      position: r,
-      documentLayoutObject: s,
-      slideCardOffset: o,
-      scaleX: a,
-      scaleY: c,
-      editorUnitId: g,
-      unitId: l
-    } = n, u = this._getEditorObject();
-    if (u == null)
+      position,
+      documentLayoutObject,
+      slideCardOffset: canvasOffset,
+      scaleX,
+      scaleY,
+      editorUnitId,
+      unitId
+    } = editCellState, editorObject = this._getEditorObject();
+    if (editorObject == null)
       return;
-    const { scene: h } = u;
-    this._contextService.setContextValue(Oe, !0);
-    const { documentModel: v } = s, _ = this._getEditorSkeleton(g);
-    if (!_ || !v)
+    const { scene } = editorObject;
+    this._contextService.setContextValue(EDITOR_ACTIVATED, !0);
+    const { documentModel: documentDataModel } = documentLayoutObject, skeleton = this._getEditorSkeleton(editorUnitId);
+    if (!skeleton || !documentDataModel)
       return;
-    this._fitTextSize(r, o, _, s, a, c);
-    const C = v.getBody().dataStream.length - 2 || 0;
-    (p = h.getViewport(pt.VIEW_MAIN)) == null || p.scrollToViewportPos({
+    this._fitTextSize(position, canvasOffset, skeleton, documentLayoutObject, scaleX, scaleY);
+    const cursor = documentDataModel.getBody().dataStream.length - 2 || 0;
+    (_a11 = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) == null || _a11.scrollToViewportPos({
       viewportScrollX: Number.POSITIVE_INFINITY
     }), this._textSelectionManagerService.replaceTextRanges([
       {
-        startOffset: C,
-        endOffset: C
+        startOffset: cursor,
+        endOffset: cursor
       }
-    ]), (f = this._renderManagerService.getRenderById(l)) == null || f.scene.resetCursor();
+    ]), (_b = this._renderManagerService.getRenderById(unitId)) == null || _b.scene.resetCursor();
   }
-  _resetBodyStyle(e, t = !1) {
-    e.dataStream = Tt, e.textRuns != null && (e.textRuns.length === 1 && !t ? (e.textRuns[0].st = 0, e.textRuns[0].ed = 1) : e.textRuns = void 0), e.paragraphs != null && (e.paragraphs.length === 1 ? e.paragraphs[0].startIndex = 0 : e.paragraphs = [
+  _resetBodyStyle(body, removeStyle = !1) {
+    body.dataStream = DEFAULT_EMPTY_DOCUMENT_VALUE, body.textRuns != null && (body.textRuns.length === 1 && !removeStyle ? (body.textRuns[0].st = 0, body.textRuns[0].ed = 1) : body.textRuns = void 0), body.paragraphs != null && (body.paragraphs.length === 1 ? body.paragraphs[0].startIndex = 0 : body.paragraphs = [
       {
         startIndex: 0
       }
-    ]), e.sectionBreaks != null && (e.sectionBreaks = void 0), e.tables != null && (e.tables = void 0), e.customRanges != null && (e.customRanges = void 0), e.customBlocks != null && (e.customBlocks = void 0);
+    ]), body.sectionBreaks != null && (body.sectionBreaks = void 0), body.tables != null && (body.tables = void 0), body.customRanges != null && (body.customRanges = void 0), body.customBlocks != null && (body.customBlocks = void 0);
   }
   /**
    * Should activate the editor when the user inputs text.
    * @param d DisposableCollection
    */
-  _initialKeyboardListener(e) {
+  _initialKeyboardListener(d) {
   }
-  _showEditorByKeyboard(e) {
+  _showEditorByKeyboard(config) {
   }
-  _commandExecutedListener(e) {
-    const t = [Me.id], n = [Yn.id];
-    e.add(this._commandService.onCommandExecuted((r) => {
-      this._editorService.getFocusId() === ae && (t.includes(r.id) && this._moveCursorCmdHandler(r), n.includes(r.id) && this._editorBridgeService.isVisible() && this._editingChangedHandler());
+  _commandExecutedListener(d) {
+    const moveCursorOP = [SetTextEditArrowOperation.id], editedMutations = [RichTextEditingMutation.id];
+    d.add(this._commandService.onCommandExecuted((command) => {
+      this._editorService.getFocusId() === SLIDE_EDITOR_ID && (moveCursorOP.includes(command.id) && this._moveCursorCmdHandler(command), editedMutations.includes(command.id) && this._editorBridgeService.isVisible() && this._editingChangedHandler());
     }));
   }
-  _moveCursorCmdHandler(e) {
-    const t = e.params, { keycode: n, isShift: r } = t;
-    n != null && this._cursorChange === k.CursorChange ? this._moveInEditor(n, r) : this._editorBridgeService.changeVisible(t);
+  _moveCursorCmdHandler(command) {
+    const params = command.params, { keycode, isShift } = params;
+    keycode != null && this._cursorChange === CursorChange.CursorChange ? this._moveInEditor(keycode, isShift) : this._editorBridgeService.changeVisible(params);
   }
   _editingChangedHandler() {
-    const e = this._editorBridgeService.getEditorRect();
-    if (!e)
+    const editRect = this._editorBridgeService.getEditorRect();
+    if (!editRect)
       return;
-    const t = e.richTextObj;
-    t.refreshDocumentByDocData(), t.resizeToContentSize();
-    const { unitId: n } = this._renderContext;
-    this._handleEditorVisible({ visible: !0, eventType: 3, unitId: n });
+    const editingRichText = editRect.richTextObj;
+    editingRichText.refreshDocumentByDocData(), editingRichText.resizeToContentSize();
+    const { unitId } = this._renderContext;
+    this._handleEditorVisible({ visible: !0, eventType: 3, unitId });
   }
   _getEditorObject() {
-    return Sr(this._editorBridgeService.getCurrentEditorId(), this._renderManagerService);
+    return getEditorObject(this._editorBridgeService.getCurrentEditorId(), this._renderManagerService);
   }
-  async _handleEditorInvisible(e) {
-    const { keycode: t } = e;
-    if (this._cursorChange = k.InitialState, this._exitInput(e), this._editorBridgeService.getEditRectState() == null)
+  async _handleEditorInvisible(param) {
+    const { keycode } = param;
+    if (this._cursorChange = CursorChange.InitialState, this._exitInput(param), this._editorBridgeService.getEditRectState() == null)
       return;
     if (this._editorBridgeService.getEditorDirty() === !1) {
-      this._moveCursor(t);
+      this._moveCursor(keycode);
       return;
     }
-    this._moveCursor(t);
+    this._moveCursor(keycode);
   }
-  _exitInput(e) {
-    this._contextService.setContextValue(Oe, !1), this._cellEditorManagerService.setState({
-      show: e.visible
+  _exitInput(param) {
+    this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
+      show: param.visible
     });
-    const t = this._editorBridgeService.getCurrentEditorId();
-    t != null && this._undoRedoService.clearUndoRedo(t);
-  }
-  _moveCursor(e) {
-    if (e != null)
-      switch (B.LEFT, e) {
-        case y.ENTER:
-          B.DOWN;
+    const editorUnitId = this._editorBridgeService.getCurrentEditorId();
+    editorUnitId != null && this._undoRedoService.clearUndoRedo(editorUnitId);
+  }
+  _moveCursor(keycode) {
+    if (keycode != null)
+      switch (Direction.LEFT, keycode) {
+        case KeyCode.ENTER:
+          Direction.DOWN;
           break;
-        case y.TAB:
-          B.RIGHT;
+        case KeyCode.TAB:
+          Direction.RIGHT;
           break;
-        case y.ARROW_DOWN:
-          B.DOWN;
+        case KeyCode.ARROW_DOWN:
+          Direction.DOWN;
           break;
-        case y.ARROW_UP:
-          B.UP;
+        case KeyCode.ARROW_UP:
+          Direction.UP;
           break;
-        case y.ARROW_LEFT:
-          B.LEFT;
+        case KeyCode.ARROW_LEFT:
+          Direction.LEFT;
           break;
-        case y.ARROW_RIGHT:
-          B.RIGHT;
+        case KeyCode.ARROW_RIGHT:
+          Direction.RIGHT;
           break;
       }
   }
@@ -1575,59 +1600,60 @@ let ze = class extends Ue {
    * The user's operations follow the sequence of opening the editor and then moving the cursor.
    * The logic here predicts the user's first cursor movement behavior based on this rule
    */
-  _cursorStateListener(e) {
-    const t = this._getEditorObject();
-    if (!t)
+  _cursorStateListener(d) {
+    const editorObject = this._getEditorObject();
+    if (!editorObject)
       return;
-    const { document: n } = t;
-    e.add(Et(n.onPointerDown$.subscribeEvent(() => {
-      this._cursorChange === k.StartEditor && (this._cursorChange = k.CursorChange);
+    const { document: documentComponent } = editorObject;
+    d.add(toDisposable(documentComponent.onPointerDown$.subscribeEvent(() => {
+      this._cursorChange === CursorChange.StartEditor && (this._cursorChange = CursorChange.CursorChange);
     })));
   }
   // TODO: @JOCS, is it necessary to move these commands MoveSelectionOperation\MoveCursorOperation to shortcut? and use multi-commands?
-  _moveInEditor(e, t) {
-    let n = B.LEFT;
-    e === y.ARROW_DOWN ? n = B.DOWN : e === y.ARROW_UP ? n = B.UP : e === y.ARROW_RIGHT && (n = B.RIGHT), t ? this._commandService.executeCommand(Zn.id, {
-      direction: n
-    }) : this._commandService.executeCommand(qn.id, {
-      direction: n
+  _moveInEditor(keycode, isShift) {
+    let direction = Direction.LEFT;
+    keycode === KeyCode.ARROW_DOWN ? direction = Direction.DOWN : keycode === KeyCode.ARROW_UP ? direction = Direction.UP : keycode === KeyCode.ARROW_RIGHT && (direction = Direction.RIGHT), isShift ? this._commandService.executeCommand(MoveSelectionOperation.id, {
+      direction
+    }) : this._commandService.executeCommand(MoveCursorOperation.id, {
+      direction
     });
   }
-};
-ze = vr([
-  L(1, Un),
-  L(2, xn),
-  L(3, Ce),
-  L(4, j),
-  L(5, Y),
-  L(6, Qe),
-  L(7, et),
-  L(8, X(Xn)),
-  L(9, U),
-  L(10, X(Q)),
-  L(11, Ze)
-], ze);
-function Sr(i, e) {
-  if (i == null)
+}, __name(_a6, "SlideEditingRenderController"), _a6);
+SlideEditingRenderController = __decorateClass$4([
+  __decorateParam$4(1, ILayoutService),
+  __decorateParam$4(2, IUndoRedoService),
+  __decorateParam$4(3, IContextService),
+  __decorateParam$4(4, IUniverInstanceService),
+  __decorateParam$4(5, IRenderManagerService),
+  __decorateParam$4(6, ISlideEditorBridgeService),
+  __decorateParam$4(7, ISlideEditorManagerService),
+  __decorateParam$4(8, Inject(DocSelectionManagerService)),
+  __decorateParam$4(9, ICommandService),
+  __decorateParam$4(10, Inject(LocaleService)),
+  __decorateParam$4(11, IEditorService)
+], SlideEditingRenderController);
+function getEditorObject(unitId, renderManagerService) {
+  if (unitId == null)
     return;
-  const t = e.getRenderById(i);
-  if (t == null)
+  const currentRender = renderManagerService.getRenderById(unitId);
+  if (currentRender == null)
     return;
-  const { mainComponent: n, scene: r, engine: s, components: o } = t, a = n, c = o.get(Jn.BACKGROUND);
+  const { mainComponent, scene, engine, components } = currentRender, document2 = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
   return {
-    document: a,
-    docBackground: c,
-    scene: r,
-    engine: s
+    document: document2,
+    docBackground,
+    scene,
+    engine
   };
 }
-var Ir = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, br = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Pr(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && Ir(e, t, r), r;
-}, Ae = (i, e) => (t, n) => e(t, n, i);
-let We = class extends fe {
-  constructor(e, t, n, r) {
+__name(getEditorObject, "getEditorObject");
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a7;
+let SlideEditorBridgeRenderController = (_a7 = class extends RxDisposable {
+  constructor(_renderContext, _instanceSrv, _commandService, _editorBridgeService) {
     super();
     /**
      * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
@@ -1635,54 +1661,54 @@ let We = class extends fe {
     // private _cursorChange: CursorChange = CursorChange.InitialState;
     /** If the corresponding unit is active and prepared for editing. */
     // private _isUnitEditing = false;
-    P(this, "setSlideTextEditor$", new Bt());
-    P(this, "_curRichText", null);
-    P(this, "_d");
-    this._renderContext = e, this._instanceSrv = t, this._commandService = n, this._editorBridgeService = r, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(x.UNIVER_SLIDE).subscribe((s) => {
-      s && s.getUnitId() === this._renderContext.unitId ? this._d = this._init() : this._disposeCurrent();
+    __publicField(this, "setSlideTextEditor$", new Subject());
+    __publicField(this, "_curRichText", null);
+    __publicField(this, "_d");
+    this._renderContext = _renderContext, this._instanceSrv = _instanceSrv, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : this._disposeCurrent();
     }));
   }
   _init() {
-    const e = new Ye();
-    return this._initEventListener(e), e;
+    const d = new DisposableCollection();
+    return this._initEventListener(d), d;
   }
   _disposeCurrent() {
-    var e;
-    (e = this._d) == null || e.dispose(), this._d = null;
-  }
-  _setEditorRect(e, t) {
-    this._curRichText = t;
-    const { scene: n, engine: r } = this._renderContext, s = this._renderContext.unitId, o = {
-      scene: n,
-      engine: r,
-      unitId: s,
-      pageId: e,
-      richTextObj: t
+    var _a11;
+    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
+  }
+  _setEditorRect(pageId, targetObject) {
+    this._curRichText = targetObject;
+    const { scene, engine } = this._renderContext, unitId = this._renderContext.unitId, setEditorRect = {
+      scene,
+      engine,
+      unitId,
+      pageId,
+      richTextObj: targetObject
     };
-    this._editorBridgeService.setEditorRect(o);
+    this._editorBridgeService.setEditorRect(setEditorRect);
   }
-  _initEventListener(e) {
-    const t = (o) => {
-      const a = o.getTransformer();
-      a && (e.add(a.clearControl$.subscribe(() => {
+  _initEventListener(d) {
+    const listenersForPageScene = /* @__PURE__ */ __name((scene) => {
+      const transformer = scene.getTransformer();
+      transformer && (d.add(transformer.clearControl$.subscribe(() => {
         this.setEditorVisible(!1), this.pickOtherObjects();
-      })), e.add(a.createControl$.subscribe(() => {
+      })), d.add(transformer.createControl$.subscribe(() => {
         this.setEditorVisible(!1);
-      })), e.add(o.onDblclick$.subscribeEvent(() => {
-        a.clearControls();
-        const g = a.getSelectedObjectMap().values().next().value;
-        g && (g.objectType !== he.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(o.sceneKey, g));
-      })), e.add(this._instanceSrv.focused$.subscribe((c) => {
+      })), d.add(scene.onDblclick$.subscribeEvent(() => {
+        transformer.clearControls();
+        const object = transformer.getSelectedObjectMap().values().next().value;
+        object && (object.objectType !== ObjectType.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(scene.sceneKey, object));
+      })), d.add(this._instanceSrv.focused$.subscribe((fc) => {
         this.endEditing();
       })));
-    }, { mainComponent: n } = this._renderContext;
-    n.subSceneChanged$.subscribeEvent((o) => {
-      t(o);
+    }, "listenersForPageScene"), { mainComponent } = this._renderContext;
+    mainComponent.subSceneChanged$.subscribeEvent((pageScene) => {
+      listenersForPageScene(pageScene);
     });
-    const s = Array.from(n.getSubScenes().values());
-    for (let o = 0; o < s.length; o++) {
-      const a = s[o];
-      t(a);
+    const pageSceneList = Array.from(mainComponent.getSubScenes().values());
+    for (let i = 0; i < pageSceneList.length; i++) {
+      const pageScene = pageSceneList[i];
+      listenersForPageScene(pageScene);
     }
   }
   pickOtherObjects() {
@@ -1694,26 +1720,26 @@ let We = class extends fe {
    * save editing state to curr richText.
    */
   endEditing() {
-    var s;
+    var _a11;
     if (!this._curRichText) return;
     this.setEditorVisible(!1);
-    const e = this._curRichText;
-    if (!this._instanceSrv.getCurrentUnitForType(x.UNIVER_SLIDE)) return !1;
-    e.refreshDocumentByDocData(), e.resizeToContentSize(), this._editorBridgeService.endEditing$.next(e);
-    const n = {
+    const curRichText = this._curRichText;
+    if (!this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) return !1;
+    curRichText.refreshDocumentByDocData(), curRichText.resizeToContentSize(), this._editorBridgeService.endEditing$.next(curRichText);
+    const richText = {
       bl: 1,
-      fs: e.fs,
-      text: e.text
-    }, r = (s = e.documentData.body) == null ? void 0 : s.textRuns;
-    if (r && r.length) {
-      const a = r[0].ts;
-      n.cl = a == null ? void 0 : a.cl;
+      fs: curRichText.fs,
+      text: curRichText.text
+    }, textRuns = (_a11 = curRichText.documentData.body) == null ? void 0 : _a11.textRuns;
+    if (textRuns && textRuns.length) {
+      const ts = textRuns[0].ts;
+      richText.cl = ts == null ? void 0 : ts.cl;
     }
-    this._commandService.executeCommand(K.id, {
+    this._commandService.executeCommand(UpdateSlideElementOperation.id, {
       unitId: this._renderContext.unitId,
-      oKey: e == null ? void 0 : e.oKey,
+      oKey: curRichText == null ? void 0 : curRichText.oKey,
       props: {
-        richText: n
+        richText
       }
     }), this._curRichText = null;
   }
@@ -1724,106 +1750,106 @@ let We = class extends fe {
    * TODO @lumixraku need scale param
    * @param target
    */
-  startEditing(e, t) {
-    this._setEditorRect(e, t), this.setEditorVisible(!0);
-  }
-  setEditorVisible(e) {
-    var n, r;
-    e ? (n = this._curRichText) == null || n.hide() : (r = this._curRichText) == null || r.show();
-    const { unitId: t } = this._renderContext;
-    this._editorBridgeService.changeVisible({ visible: e, eventType: q.PointerDown, unitId: t });
-  }
-};
-We = br([
-  Ae(1, j),
-  Ae(2, U),
-  Ae(3, Qe)
-], We);
-const Jt = {
+  startEditing(pageId, target) {
+    this._setEditorRect(pageId, target), this.setEditorVisible(!0);
+  }
+  setEditorVisible(visible) {
+    var _a11, _b;
+    visible ? (_a11 = this._curRichText) == null || _a11.hide() : (_b = this._curRichText) == null || _b.show();
+    const { unitId } = this._renderContext;
+    this._editorBridgeService.changeVisible({ visible, eventType: DeviceInputEventType.PointerDown, unitId });
+  }
+}, __name(_a7, "SlideEditorBridgeRenderController"), _a7);
+SlideEditorBridgeRenderController = __decorateClass$3([
+  __decorateParam$3(1, IUniverInstanceService),
+  __decorateParam$3(2, ICommandService),
+  __decorateParam$3(3, ISlideEditorBridgeService)
+], SlideEditorBridgeRenderController);
+const ActivateSlidePageOperation = {
   id: "slide.operation.activate-slide",
-  type: D.OPERATION,
-  handler: (i, e) => {
-    var g, l;
-    const t = e.unitId, n = i.get(M), s = i.get(j).getUnit(t), o = (g = s == null ? void 0 : s.getActivePage()) == null ? void 0 : g.id;
-    if (!o) return !1;
-    const a = n.getRenderUnitByPageId(o, t);
-    if (!a) return !1;
-    const c = (l = a.scene) == null ? void 0 : l.getTransformer();
-    return c && c.clearControls(), n.activePage(e.id, t), !0;
-  }
-}, Qt = {
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a11, _b;
+    const unitId = params.unitId, canvasView = accessor.get(CanvasView), model = accessor.get(IUniverInstanceService).getUnit(unitId), pageId = (_a11 = model == null ? void 0 : model.getActivePage()) == null ? void 0 : _a11.id;
+    if (!pageId) return !1;
+    const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+    if (!page) return !1;
+    const transformer = (_b = page.scene) == null ? void 0 : _b.getTransformer();
+    return transformer && transformer.clearControls(), canvasView.activePage(params.id, unitId), !0;
+  }, "handler")
+}, AppendSlideOperation = {
   id: "slide.operation.append-slide",
-  type: D.OPERATION,
-  handler: (i, e) => {
-    const t = e.unitId;
-    return i.get(j).getUnit(t) ? (i.get(M).appendPage(t), !0) : !1;
-  }
-}, tt = {
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const unitId = params.unitId;
+    return accessor.get(IUniverInstanceService).getUnit(unitId) ? (accessor.get(CanvasView).appendPage(unitId), !0) : !1;
+  }, "handler")
+}, InsertSlideFloatImageCommand = {
   id: "slide.command.insert-float-image",
-  type: D.COMMAND,
-  handler: async (i, e) => {
-    var V;
-    const t = i.get(j), n = (V = t.getCurrentUnitForType(x.UNIVER_SLIDE)) == null ? void 0 : V.getUnitId();
-    if (!n) return !1;
-    const s = await i.get(Vn).openFile({
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    var _a11;
+    const univerInstanceService = accessor.get(IUniverInstanceService), unitId = (_a11 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) == null ? void 0 : _a11.getUnitId();
+    if (!unitId) return !1;
+    const files = await accessor.get(ILocalFileService).openFile({
       multiple: !0,
-      accept: ei.map((R) => `.${R.replace("image/", "")}`).join(",")
+      accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image2) => `.${image2.replace("image/", "")}`).join(",")
     });
-    if (s.length !== 1) return !1;
-    const a = await i.get(ti).saveImage(s[0]);
-    if (!a) return !1;
-    const { imageId: c, imageSourceType: g, source: l, base64Cache: u } = a, { width: h, height: v, image: _ } = await ni(u || ""), C = t.getUnit(n);
-    if (!C) return !1;
-    const p = C.getActivePage(), f = Object.values(p.pageElements), I = f != null && f.length ? Math.max(...f.map((R) => R.zIndex)) : 20, b = {
-      id: c,
-      zIndex: I + 1,
+    if (files.length !== 1) return !1;
+    const imageParam = await accessor.get(IImageIoService).saveImage(files[0]);
+    if (!imageParam) return !1;
+    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), slideData = univerInstanceService.getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 20, data = {
+      id: imageId,
+      zIndex: maxIndex + 1,
       left: 0,
       top: 0,
-      width: h,
-      height: v,
+      width,
+      height,
       title: "",
       description: "",
-      type: Xe.IMAGE,
+      type: PageElementType.IMAGE,
       image: {
         imageProperties: {
-          contentUrl: u,
-          imageSourceType: g,
-          source: l,
-          base64Cache: u,
-          image: _
+          contentUrl: base64Cache,
+          imageSourceType,
+          source,
+          base64Cache,
+          image
         }
       }
     };
-    p.pageElements[c] = b, C.updatePage(p.id, p);
-    const E = i.get(M), w = E.createObjectToPage(b, p.id, n);
-    return w && E.setObjectActiveByPage(w, p.id, n), !0;
-  }
-}, nt = {
+    activePage.pageElements[imageId] = data, slideData.updatePage(activePage.id, activePage);
+    const canvasView = accessor.get(CanvasView), sceneObject = canvasView.createObjectToPage(data, activePage.id, unitId);
+    return sceneObject && canvasView.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
+  }, "handler")
+}, SlideAddTextCommand = {
   id: "slide.command.add-text",
-  type: D.COMMAND,
-  handler: async (i) => {
-    var r;
-    const e = i.get(U), n = (r = i.get(j).getFocusedUnit()) == null ? void 0 : r.getUnitId();
-    return await e.executeCommand(en.id, { unitId: n });
-  }
-}, en = {
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor) => {
+    var _a11;
+    const commandService = accessor.get(ICommandService), unitId = (_a11 = accessor.get(IUniverInstanceService).getFocusedUnit()) == null ? void 0 : _a11.getUnitId();
+    return await commandService.executeCommand(SlideAddTextOperation.id, { unitId });
+  }, "handler")
+}, SlideAddTextOperation = {
   id: "slide.operation.add-text",
-  type: D.OPERATION,
-  handler: async (i, e) => {
-    const t = e.unitId, n = xt(6), r = 220, s = 40, o = 230, a = 142, c = (e == null ? void 0 : e.text) || "A New Text", l = i.get(j).getUnit(t);
-    if (!l) return !1;
-    const u = l.getActivePage(), h = Object.values(u.pageElements), v = h != null && h.length ? Math.max(...h.map((f) => f.zIndex)) : 21, _ = {
-      id: n,
-      zIndex: v + 1,
-      left: o,
-      top: a,
-      width: r,
-      height: s,
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const unitId = params.unitId, elementId = generateRandomId(6), defaultWidth = 220, defaultheight = 40, left = 230, top = 142, textContent = (params == null ? void 0 : params.text) || "A New Text", slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 21, elementData = {
+      id: elementId,
+      zIndex: maxIndex + 1,
+      left,
+      top,
+      width: defaultWidth,
+      height: defaultheight,
       title: "text",
       description: "",
-      type: Xe.TEXT,
+      type: PageElementType.TEXT,
       richText: {
-        text: c,
+        text: textContent,
         fs: 30,
         cl: {
           rgb: "rgb(51, 51, 51)"
@@ -1831,72 +1857,72 @@ const Jt = {
         bl: 1
       }
     };
-    u.pageElements[n] = _, l.updatePage(u.id, u);
-    const C = i.get(M), p = C.createObjectToPage(_, u.id, t);
-    return p && C.setObjectActiveByPage(p, u.id, t), !0;
-  }
-}, tn = {
+    activePage.pageElements[elementId] = elementData, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(elementData, activePage.id, unitId);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
+  }, "handler")
+}, SetSlidePageThumbOperation = {
   id: "slide.operation.set-slide-page-thumb",
-  type: D.OPERATION,
-  handler: (i, e) => (i.get(M).createThumbs(e.unitId), !0)
-}, xr = "univer-image-popup-menu", Er = "univer-image-popup-menu-item", Rr = "univer-image-popup-menu-item-icon", Or = "univer-image-popup-menu-item-title", jr = "univer-image-popup-menu-item-hide", yr = "univer-btn-container", Tr = "univer-btn-container-expand", ge = {
-  imagePopupMenu: xr,
-  imagePopupMenuItem: Er,
-  imagePopupMenuItemIcon: Rr,
-  imagePopupMenuItemTitle: Or,
-  imagePopupMenuItemHide: jr,
-  btnContainer: yr,
-  btnContainerExpand: Tr
-}, Mr = (i) => {
-  var _, C;
-  const e = (C = (_ = i.popup) == null ? void 0 : _.extraProps) == null ? void 0 : C.menuItems;
-  if (!e)
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => (accessor.get(CanvasView).createThumbs(params.unitId), !0), "handler")
+}, imagePopupMenu = "univer-image-popup-menu", imagePopupMenuItem = "univer-image-popup-menu-item", imagePopupMenuItemIcon = "univer-image-popup-menu-item-icon", imagePopupMenuItemTitle = "univer-image-popup-menu-item-title", imagePopupMenuItemHide = "univer-image-popup-menu-item-hide", btnContainer = "univer-btn-container", btnContainerExpand = "univer-btn-container-expand", styles$2 = {
+  imagePopupMenu,
+  imagePopupMenuItem,
+  imagePopupMenuItemIcon,
+  imagePopupMenuItemTitle,
+  imagePopupMenuItemHide,
+  btnContainer,
+  btnContainerExpand
+}, SlideImagePopupMenu = /* @__PURE__ */ __name((props) => {
+  var _a11, _b;
+  const menuItems = (_b = (_a11 = props.popup) == null ? void 0 : _a11.extraProps) == null ? void 0 : _b.menuItems;
+  if (!menuItems)
     return null;
-  const t = O(U), n = O(Q), [r, s] = W(!1), [o, a] = W(!1), c = () => {
-    a(!0);
-  }, g = () => {
-    a(!1);
-  }, l = (p) => {
-    s(p);
-  }, u = (p) => {
-    t.executeCommand(p.commandId, p.commandParams), s(!1);
-  }, h = r || o, v = e.filter((p) => !p.disable);
-  return /* @__PURE__ */ d.jsx(
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), [visible, setVisible] = useState(!1), [isHovered, setHovered] = useState(!1), handleMouseEnter = /* @__PURE__ */ __name(() => {
+    setHovered(!0);
+  }, "handleMouseEnter"), handleMouseLeave = /* @__PURE__ */ __name(() => {
+    setHovered(!1);
+  }, "handleMouseLeave"), onVisibleChange = /* @__PURE__ */ __name((visible2) => {
+    setVisible(visible2);
+  }, "onVisibleChange"), handleClick = /* @__PURE__ */ __name((item) => {
+    commandService.executeCommand(item.commandId, item.commandParams), setVisible(!1);
+  }, "handleClick"), showMore = visible || isHovered, availableMenu = menuItems.filter((item) => !item.disable);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      onMouseEnter: c,
-      onMouseLeave: g,
-      children: /* @__PURE__ */ d.jsx(
-        Vt,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DropdownLegacy,
         {
           placement: "bottomLeft",
           trigger: ["click"],
-          overlay: /* @__PURE__ */ d.jsx("ul", { className: ge.imagePopupMenu, children: v.map((p) => /* @__PURE__ */ d.jsx(
+          overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$2.imagePopupMenu, children: availableMenu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "li",
             {
-              onClick: () => u(p),
-              className: ge.imagePopupMenuItem,
-              children: /* @__PURE__ */ d.jsx("span", { className: ge.imagePopupMenuItemTitle, children: n.t(p.label) })
+              onClick: /* @__PURE__ */ __name(() => handleClick(item), "onClick"),
+              className: styles$2.imagePopupMenuItem,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.imagePopupMenuItemTitle, children: localeService.t(item.label) })
             },
-            p.index
+            item.index
           )) }),
-          visible: r,
-          onVisibleChange: l,
-          children: /* @__PURE__ */ d.jsxs(
+          visible,
+          onVisibleChange,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              className: T(ge.btnContainer, {
-                [ge.btnContainerExpand]: r
+              className: clsx(styles$2.btnContainer, {
+                [styles$2.btnContainerExpand]: visible
               }),
               children: [
-                /* @__PURE__ */ d.jsx(
-                  Ft,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Autofill,
                   {
                     style: { color: "#35322B" },
                     extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
                   }
                 ),
-                h && /* @__PURE__ */ d.jsx(qe, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
+                showMore && /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
               ]
             }
           )
@@ -1904,427 +1930,436 @@ const Jt = {
       )
     }
   );
-}, wr = "univer-slide-bar", Nr = "univer-slide-bar-content", Dr = "univer-slide-bar-content-header", Ur = "univer-slide-bar-item", Vr = "univer-slide-bar-box", Br = "univer-slide-bar-item-active", Lr = "univer-slide-add-button", ne = {
-  slideBar: wr,
-  slideBarContent: Nr,
-  slideBarContentHeader: Dr,
-  slideBarItem: Ur,
-  slideBarBox: Vr,
-  slideBarItemActive: Br,
-  slideAddButton: Lr
+}, "SlideImagePopupMenu"), slideBar = "univer-slide-bar", slideBarContent = "univer-slide-bar-content", slideBarContentHeader = "univer-slide-bar-content-header", slideBarItem = "univer-slide-bar-item", slideBarBox = "univer-slide-bar-box", slideBarItemActive = "univer-slide-bar-item-active", slideAddButton = "univer-slide-add-button", styles$1 = {
+  slideBar,
+  slideBarContent,
+  slideBarContentHeader,
+  slideBarItem,
+  slideBarBox,
+  slideBarItemActive,
+  slideAddButton
 };
-function Ar() {
-  var C, p;
-  const i = O(j), e = O(U), t = O(Y), n = O(Q), r = Ut(null), s = i.getCurrentUnitForType(x.UNIVER_SLIDE), o = s == null ? void 0 : s.getPages(), a = s == null ? void 0 : s.getPageOrder();
-  if (!o || !a)
+function SlideSideBar() {
+  var _a11, _b;
+  const univerInstanceService = useDependency(IUniverInstanceService), commandService = useDependency(ICommandService), renderManagerService = useDependency(IRenderManagerService), localeService = useDependency(LocaleService), slideBarRef = useRef(null), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = currentSlide == null ? void 0 : currentSlide.getPages(), pageOrder = currentSlide == null ? void 0 : currentSlide.getPageOrder();
+  if (!pages || !pageOrder)
     return null;
-  const c = a.map((f) => o[f]), [g, l] = W([]), [u, h] = W((p = (C = s == null ? void 0 : s.getActivePage()) == null ? void 0 : C.id) != null ? p : null);
-  oe(() => {
-    l(c.map((f) => ke.createRef()));
-  }, [c.length]), oe(() => {
-    const f = s == null ? void 0 : s.activePage$.subscribe((I) => {
-      var E;
-      const b = (E = I == null ? void 0 : I.id) != null ? E : null;
-      b && h(b);
+  const slideList = pageOrder.map((id) => pages[id]), [divRefs, setDivRefs] = useState([]), [activatePageId, setActivatePageId] = useState((_b = (_a11 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a11.id) != null ? _b : null);
+  useEffect(() => {
+    setDivRefs(slideList.map((_) => React.createRef()));
+  }, [slideList.length]), useEffect(() => {
+    const subscriber = currentSlide == null ? void 0 : currentSlide.activePage$.subscribe((page) => {
+      var _a12;
+      const id = (_a12 = page == null ? void 0 : page.id) != null ? _a12 : null;
+      id && setActivatePageId(id);
     });
     return () => {
-      f == null || f.unsubscribe();
+      subscriber == null || subscriber.unsubscribe();
     };
-  }, []), oe(() => {
-    g.forEach((f, I) => {
-      var b;
-      if (f.current) {
-        const E = c[I];
-        (b = t.getRenderById(E.id)) == null || b.engine.setContainer(f.current);
+  }, []), useEffect(() => {
+    divRefs.forEach((ref, index) => {
+      var _a12;
+      if (ref.current) {
+        const slide = slideList[index];
+        (_a12 = renderManagerService.getRenderById(slide.id)) == null || _a12.engine.setContainer(ref.current);
       }
-    }), g.length > 0 && e.syncExecuteCommand(tn.id, { unitId: s == null ? void 0 : s.getUnitId() });
-  }, [g, c, t, e, s]);
-  const v = ut((f) => {
-    e.syncExecuteCommand(Jt.id, { id: f, unitId: s == null ? void 0 : s.getUnitId() });
-  }, [e, s]), _ = ut(() => {
-    e.syncExecuteCommand(Qt.id, { unitId: s == null ? void 0 : s.getUnitId() });
-  }, [e, s]);
-  return /* @__PURE__ */ d.jsx("aside", { className: ne.slideBar, ref: r, children: /* @__PURE__ */ d.jsx(Kn, { children: /* @__PURE__ */ d.jsxs("div", { className: ne.slideBarContent, children: [
-    /* @__PURE__ */ d.jsx("header", { className: ne.slideBarContentHeader, children: /* @__PURE__ */ d.jsx("a", { onClick: _, children: n.t("slide.append") }) }),
-    c.map((f, I) => /* @__PURE__ */ d.jsxs(
+    }), divRefs.length > 0 && commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [divRefs, slideList, renderManagerService, commandService, currentSlide]);
+  const activatePage = useCallback((page) => {
+    commandService.syncExecuteCommand(ActivateSlidePageOperation.id, { id: page, unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [commandService, currentSlide]), handleAppendSlide = useCallback(() => {
+    commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [commandService, currentSlide]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles$1.slideBar, ref: slideBarRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Scrollbar, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.slideBarContent, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: styles$1.slideBarContentHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { onClick: handleAppendSlide, children: localeService.t("slide.append") }) }),
+    slideList.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: T(ne.slideBarItem, {
-          [ne.slideBarItemActive]: f.id === u
+        className: clsx(styles$1.slideBarItem, {
+          [styles$1.slideBarItemActive]: item.id === activatePageId
         }),
-        onClick: () => v(f.id),
+        onClick: /* @__PURE__ */ __name(() => activatePage(item.id), "onClick"),
         children: [
-          /* @__PURE__ */ d.jsx("span", { children: I + 1 }),
-          /* @__PURE__ */ d.jsx("div", { ref: g[I], className: ne.slideBarBox })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: index + 1 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: divRefs[index], className: styles$1.slideBarBox })
         ]
       },
-      f.id
+      item.id
     ))
   ] }) }) });
 }
-const $r = "univer-slide-editor-container", Hr = "univer-editor-input", Fr = {
-  slideEditorContainer: $r,
-  editorInput: Hr
-}, we = -1e3, Pt = {
+__name(SlideSideBar, "SlideSideBar");
+const slideEditorContainer = "univer-slide-editor-container", editorInput = "univer-editor-input", styles = {
+  slideEditorContainer,
+  editorInput
+}, HIDDEN_EDITOR_POSITION = -1e3, EDITOR_DEFAULT_POSITION = {
   width: 0,
   height: 0,
-  top: we,
-  left: we
-}, zr = () => {
-  const [i, e] = W({
-    ...Pt
-  }), t = O(et), n = O(Ze), r = O(Ce), s = Bn(
-    () => r.subscribeContextValue$(lt),
+  top: HIDDEN_EDITOR_POSITION,
+  left: HIDDEN_EDITOR_POSITION
+}, SlideEditorContainer = /* @__PURE__ */ __name(() => {
+  const [state, setState] = useState({
+    ...EDITOR_DEFAULT_POSITION
+  }), slideEditorManagerService = useDependency(ISlideEditorManagerService), editorService = useDependency(IEditorService), contextService = useDependency(IContextService), disableAutoFocus = useObservable(
+    () => contextService.subscribeContextValue$(DISABLE_AUTO_FOCUS_KEY),
     !1,
     void 0,
-    [r, lt]
+    [contextService, DISABLE_AUTO_FOCUS_KEY]
   );
-  return `${Tt}`, En.UNSPECIFIED, oe(() => {
-    t.state$.subscribe((o) => {
-      if (o == null)
+  return `${DEFAULT_EMPTY_DOCUMENT_VALUE}`, DocumentFlavor.UNSPECIFIED, useEffect(() => {
+    slideEditorManagerService.state$.subscribe((param) => {
+      if (param == null)
         return;
       const {
-        startX: a = we,
-        startY: c = we,
-        endX: g = 0,
-        endY: l = 0,
-        show: u = !1
-      } = o;
-      if (!u)
-        e({
-          ...Pt
+        startX = HIDDEN_EDITOR_POSITION,
+        startY = HIDDEN_EDITOR_POSITION,
+        endX = 0,
+        endY = 0,
+        show = !1
+      } = param;
+      if (!show)
+        setState({
+          ...EDITOR_DEFAULT_POSITION
         });
       else {
-        e({
-          width: g - a - re + 2,
-          height: l - c - re + 2,
-          left: a + re,
-          top: c + re
+        setState({
+          width: endX - startX - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+          height: endY - startY - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+          left: startX + FIX_ONE_PIXEL_BLUR_OFFSET,
+          top: startY + FIX_ONE_PIXEL_BLUR_OFFSET
         });
-        const h = n.getEditor(ae);
-        if (h == null)
+        const editor = editorService.getEditor(SLIDE_EDITOR_ID);
+        if (editor == null)
           return;
-        const { left: v, top: _, width: C, height: p } = h.getBoundingClientRect();
-        t.setRect({ left: v, top: _, width: C, height: p });
+        const { left, top, width, height } = editor.getBoundingClientRect();
+        slideEditorManagerService.setRect({ left, top, width, height });
       }
     });
-  }, []), oe(() => {
-    s || t.setFocus(!0);
-  }, [s, i]), /* @__PURE__ */ d.jsx(
+  }, []), useEffect(() => {
+    disableAutoFocus || slideEditorManagerService.setFocus(!0);
+  }, [disableAutoFocus, state]), /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: Fr.slideEditorContainer,
+      className: styles.slideEditorContainer,
       style: {
-        left: i.left,
-        top: i.top,
-        width: i.width,
-        height: i.height
+        left: state.left,
+        top: state.top,
+        width: state.width,
+        height: state.height
       }
     }
   );
-}, nn = "addition-and-subtraction-single", rn = "slide.menu.image";
-function Wr(i) {
+}, "SlideEditorContainer"), IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", SLIDES_IMAGE_MENU_ID = "slide.menu.image";
+function SlideImageMenuFactory(accessor) {
   return {
-    id: rn,
-    type: ve.SUBITEMS,
-    icon: nn,
+    id: SLIDES_IMAGE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    icon: IMAGE_UPLOAD_ICON,
     tooltip: "slide.image.insert.title",
-    hidden$: _e(i, x.UNIVER_SLIDE)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
   };
 }
-function Kr(i) {
+__name(SlideImageMenuFactory, "SlideImageMenuFactory");
+function UploadSlideFloatImageMenuFactory(_accessor) {
   return {
-    id: tt.id,
+    id: InsertSlideFloatImageCommand.id,
     title: "slide.image.insert.float",
-    type: ve.BUTTON,
-    hidden$: _e(i, x.UNIVER_SLIDE)
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
   };
 }
-const sn = "graph-single", on = "slide.menu.shape";
-function Gr(i) {
+__name(UploadSlideFloatImageMenuFactory, "UploadSlideFloatImageMenuFactory");
+const GRAPH_SINGLE_ICON = "graph-single", SHAPE_MENU_ID = "slide.menu.shape";
+function SlideShapeMenuFactory(accessor) {
   return {
-    id: on,
-    type: ve.SUBITEMS,
-    icon: sn,
+    id: SHAPE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    icon: GRAPH_SINGLE_ICON,
     tooltip: "slide.shape.insert.title",
-    hidden$: _e(i, x.UNIVER_SLIDE)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
     // disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
   };
 }
-function Xr(i) {
+__name(SlideShapeMenuFactory, "SlideShapeMenuFactory");
+function UploadSlideFloatShapeMenuFactory(_accessor) {
   return {
-    id: Je.id,
+    id: InsertSlideShapeRectangleCommand.id,
     title: "slide.shape.insert.rectangle",
-    type: ve.BUTTON,
-    hidden$: _e(i, x.UNIVER_SLIDE)
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
   };
 }
-const an = "text-single";
-function Yr(i) {
+__name(UploadSlideFloatShapeMenuFactory, "UploadSlideFloatShapeMenuFactory");
+const TEXT_ICON_ID = "text-single";
+function SlideAddTextMenuItemFactory(_accessor) {
   return {
-    id: nt.id,
-    type: ve.BUTTON,
-    icon: an,
+    id: SlideAddTextCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: TEXT_ICON_ID,
     tooltip: "slide.text.insert.title",
-    hidden$: _e(i, x.UNIVER_SLIDE)
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
   };
 }
-const kr = {
-  [Ln.FORMAT]: {
-    [nt.id]: {
+__name(SlideAddTextMenuItemFactory, "SlideAddTextMenuItemFactory");
+const menuSchema = {
+  [RibbonStartGroup.FORMAT]: {
+    [SlideAddTextCommand.id]: {
       order: 0,
-      menuItemFactory: Yr
+      menuItemFactory: SlideAddTextMenuItemFactory
     },
-    [rn]: {
+    [SLIDES_IMAGE_MENU_ID]: {
       order: 0,
-      menuItemFactory: Wr,
-      [tt.id]: {
+      menuItemFactory: SlideImageMenuFactory,
+      [InsertSlideFloatImageCommand.id]: {
         order: 0,
-        menuItemFactory: Kr
+        menuItemFactory: UploadSlideFloatImageMenuFactory
       }
     },
-    [on]: {
+    [SHAPE_MENU_ID]: {
       order: 0,
-      menuItemFactory: Gr,
-      [Je.id]: {
+      menuItemFactory: SlideShapeMenuFactory,
+      [InsertSlideShapeRectangleCommand.id]: {
         order: 0,
-        menuItemFactory: Xr
+        menuItemFactory: UploadSlideFloatShapeMenuFactory
       }
     }
   }
 };
-function Ke(i) {
-  return i.getContextValue(Mt) && i.getContextValue(Oe);
+function whenEditorActivated(contextService) {
+  return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(EDITOR_ACTIVATED);
 }
-function Zr(i) {
-  return i.getContextValue(Rn) && i.getContextValue(Mt);
+__name(whenEditorActivated, "whenEditorActivated");
+function whenFormulaEditorFocused(contextService) {
+  return contextService.getContextValue(FORMULA_EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR);
 }
-const cn = [
-  y.ARROW_DOWN,
-  y.ARROW_UP,
-  y.ARROW_LEFT,
-  y.ARROW_RIGHT
+__name(whenFormulaEditorFocused, "whenFormulaEditorFocused");
+const ARROW_SELECTION_KEYCODE_LIST = [
+  KeyCode.ARROW_DOWN,
+  KeyCode.ARROW_UP,
+  KeyCode.ARROW_LEFT,
+  KeyCode.ARROW_RIGHT
 ];
-[y.ENTER, y.TAB, ...cn];
-function qr() {
-  const i = [];
-  for (const e of cn)
-    i.push({
-      id: Me.id,
-      binding: e,
-      preconditions: (t) => Ke(t),
+[KeyCode.ENTER, KeyCode.TAB, ...ARROW_SELECTION_KEYCODE_LIST];
+function generateArrowSelectionShortCutItem() {
+  const shortcutList = [];
+  for (const keycode of ARROW_SELECTION_KEYCODE_LIST)
+    shortcutList.push({
+      id: SetTextEditArrowOperation.id,
+      binding: keycode,
+      preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService), "preconditions"),
       staticParameters: {
         visible: !1,
-        eventType: q.Keyboard,
-        keycode: e,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode,
         isShift: !1
       }
-    }), i.push({
-      id: Me.id,
-      binding: e | An.SHIFT,
-      preconditions: (t) => Ke(t),
+    }), shortcutList.push({
+      id: SetTextEditArrowOperation.id,
+      binding: keycode | MetaKeys.SHIFT,
+      preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService), "preconditions"),
       staticParameters: {
         visible: !1,
-        eventType: q.Keyboard,
-        keycode: e,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode,
         isShift: !0
       }
     });
-  return i;
+  return shortcutList;
 }
-const Jr = {
-  id: Qn.id,
-  preconditions: (i) => Ke(i) || Zr(i),
-  binding: y.BACKSPACE
+__name(generateArrowSelectionShortCutItem, "generateArrowSelectionShortCutItem");
+const EditorDeleteLeftShortcut = {
+  id: DeleteLeftCommand.id,
+  preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService) || whenFormulaEditorFocused(contextService), "preconditions"),
+  binding: KeyCode.BACKSPACE
 };
-var Qr = Object.defineProperty, es = Object.getOwnPropertyDescriptor, ts = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? es(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && Qr(e, t, r), r;
-}, ie = (i, e) => (t, n) => e(t, n, i);
-let Ne = class extends Ue {
-  constructor(i, e, t, n, r, s) {
-    super(), this._injector = i, this._menuManagerService = e, this._componentManager = t, this._uiPartsService = n, this._commandService = r, this._shortcutService = s, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
+var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$2(target, key, result), result;
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a8;
+let SlidesUIController = (_a8 = class extends Disposable {
+  constructor(_injector, _menuManagerService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
+    super(), this._injector = _injector, this._menuManagerService = _menuManagerService, this._componentManager = _componentManager, this._uiPartsService = _uiPartsService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
   }
   _initMenus() {
-    this._menuManagerService.mergeMenu(kr);
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _initCustomComponents() {
-    const i = this._componentManager;
-    this.disposeWithMe(i.register(nn, Ht)), this.disposeWithMe(i.register(an, Yt)), this.disposeWithMe(i.register(sn, Wt)), this.disposeWithMe(i.register(qt, Mr)), this.disposeWithMe(i.register(Re, rr));
+    const componentManager = this._componentManager;
+    this.disposeWithMe(componentManager.register(IMAGE_UPLOAD_ICON, AddImageSingle)), this.disposeWithMe(componentManager.register(TEXT_ICON_ID, TextSingle)), this.disposeWithMe(componentManager.register(GRAPH_SINGLE_ICON, GraphSingle)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
   }
   _initCommands() {
     [
-      Qt,
-      Jt,
-      tn,
-      tt,
-      en,
-      nt,
-      Zt,
-      Je,
-      He,
-      Lt,
-      K,
+      AppendSlideOperation,
+      ActivateSlidePageOperation,
+      SetSlidePageThumbOperation,
+      InsertSlideFloatImageCommand,
+      SlideAddTextOperation,
+      SlideAddTextCommand,
+      InsertSlideShapeRectangleOperation,
+      InsertSlideShapeRectangleCommand,
+      ToggleSlideEditSidebarOperation,
+      DeleteSlideElementOperation,
+      UpdateSlideElementOperation,
       // commands for editor
-      Me
-    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
+      SetTextEditArrowOperation
+    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
   }
   _initUIComponents() {
     this.disposeWithMe(
-      this._uiPartsService.registerComponent(dt.LEFT_SIDEBAR, () => rt(Ar, this._injector))
+      this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector))
     ), this.disposeWithMe(
-      this._uiPartsService.registerComponent(dt.CONTENT, () => rt(zr, this._injector))
+      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SlideEditorContainer, this._injector))
     );
   }
   _initShortcuts() {
     [
-      Jr,
-      ...qr()
-    ].forEach((i) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(i));
+      EditorDeleteLeftShortcut,
+      ...generateArrowSelectionShortCutItem()
+    ].forEach((item) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(item));
     });
   }
-};
-Ne = ts([
-  ie(0, X(Ge)),
-  ie(1, Hn),
-  ie(2, X($n)),
-  ie(3, Fn),
-  ie(4, U),
-  ie(5, zn)
-], Ne);
-var ns = Object.defineProperty, is = Object.getOwnPropertyDescriptor, rs = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? is(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && ns(e, t, r), r;
-}, $e = (i, e) => (t, n) => e(t, n, i);
-let De = class extends fe {
+}, __name(_a8, "SlidesUIController"), _a8);
+SlidesUIController = __decorateClass$2([
+  __decorateParam$2(0, Inject(Injector)),
+  __decorateParam$2(1, IMenuManagerService),
+  __decorateParam$2(2, Inject(ComponentManager)),
+  __decorateParam$2(3, IUIPartsService),
+  __decorateParam$2(4, ICommandService),
+  __decorateParam$2(5, IShortcutService)
+], SlidesUIController);
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a9;
+let SlideRenderService = (_a9 = class extends RxDisposable {
   // private _skeletonChangeMutations = new Set<string>();
-  constructor(i, e, t) {
-    super(), this._contextService = i, this._instanceSrv = e, this._renderManagerService = t, Promise.resolve().then(() => this._init());
+  constructor(_contextService, _instanceSrv, _renderManagerService) {
+    super(), this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, Promise.resolve().then(() => this._init());
   }
   _init() {
     this._initSlideDataListener(), this._initContextListener();
   }
   _initSlideDataListener() {
-    this._instanceSrv.getTypeOfUnitAdded$(x.UNIVER_SLIDE).pipe(mt(this.dispose$)).subscribe((i) => {
-      this._createRenderer(i == null ? void 0 : i.getUnitId());
-    }), this._instanceSrv.getAllUnitsForType(x.UNIVER_SLIDE).forEach((i) => {
-      this._createRenderer(i.getUnitId());
-    }), this._instanceSrv.getTypeOfUnitDisposed$(x.UNIVER_SLIDE).pipe(mt(this.dispose$)).subscribe((i) => this._disposeRenderer(i));
+    this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((slideModel) => {
+      this._createRenderer(slideModel == null ? void 0 : slideModel.getUnitId());
+    }), this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slideModel) => {
+      this._createRenderer(slideModel.getUnitId());
+    }), this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((workbook) => this._disposeRenderer(workbook));
   }
-  _createRenderer(i) {
-    i == null || this._instanceSrv.getUnit(i, x.UNIVER_SLIDE) == null || (this._renderManagerService.createRender(i), this._renderManagerService.setCurrent(i));
+  _createRenderer(unitId) {
+    unitId == null || this._instanceSrv.getUnit(unitId, UniverInstanceType.UNIVER_SLIDE) == null || (this._renderManagerService.createRender(unitId), this._renderManagerService.setCurrent(unitId));
   }
-  _disposeRenderer(i) {
-    const e = i.getUnitId();
-    this._renderManagerService.removeRender(e);
+  _disposeRenderer(workbook) {
+    const unitId = workbook.getUnitId();
+    this._renderManagerService.removeRender(unitId);
   }
   _initContextListener() {
   }
-};
-De = rs([
-  $e(0, Ce),
-  $e(1, j),
-  $e(2, Y)
-], De);
-var ss = Object.defineProperty, os = Object.getOwnPropertyDescriptor, as = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? os(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (r = (n ? o(e, t, r) : o(r)) || r);
-  return n && r && ss(e, t, r), r;
-}, xe = (i, e) => (t, n) => e(t, n, i);
-const cs = "SLIDE_UI";
-var Ee;
-let bt = (Ee = class extends On {
-  constructor(i = ft, e, t, n, r) {
-    super(), this._config = i, this._injector = e, this._renderManagerService = t, this._univerInstanceService = n, this._configService = r;
-    const { menu: s, ...o } = jn(
+}, __name(_a9, "SlideRenderService"), _a9);
+SlideRenderService = __decorateClass$1([
+  __decorateParam$1(0, IContextService),
+  __decorateParam$1(1, IUniverInstanceService),
+  __decorateParam$1(2, IRenderManagerService)
+], SlideRenderService);
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp2(target, key, result), result;
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam");
+const SLIDE_UI_PLUGIN_NAME = "SLIDE_UI";
+var _a10;
+let UniverSlidesUIPlugin = (_a10 = class extends Plugin {
+  constructor(_config = defaultPluginConfig, _injector, _renderManagerService, _univerInstanceService, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._configService = _configService;
+    const { menu, ...rest } = merge(
       {},
-      ft,
+      defaultPluginConfig,
       this._config
     );
-    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig(di, o);
+    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(SLIDES_UI_PLUGIN_CONFIG_KEY, rest);
   }
   onStarting() {
-    st([
-      [De],
-      [Qe, { useClass: Fe }],
+    mergeOverrideWithDependencies([
+      [SlideRenderService],
+      [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
       // used by SlideUIController --> EditorContainer
-      [et, { useClass: pr }],
-      [ye]
-    ], this._config.override).forEach((i) => this._injector.add(i));
+      [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
+      [SlideCanvasPopMangerService]
+    ], this._config.override).forEach((d) => this._injector.add(d));
   }
   onReady() {
     [
       // SlideRenderService will be init in ready stage, and then calling RenderManagerService@createRender --> init all deps in this rendering register block.
-      [pe]
-    ].forEach((i) => {
-      this.disposeWithMe(this._renderManagerService.registerRenderModule(x.UNIVER_SLIDE, i));
-    }), st([
-      [M],
+      [SlideRenderController]
+    ].forEach((m) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m));
+    }), mergeOverrideWithDependencies([
+      [CanvasView],
       // cannot register in _renderManagerService now.
       // [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
       // // used by SlideUIController --> EditorContainer
       // [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
       // SlidesUIController controller should be registered in Ready stage.
       // SlidesUIController controller would add a new RenderUnit (__INTERNAL_EDITOR__DOCS_NORMAL)
-      [Ne],
+      [SlidesUIController],
       // editor service was create in renderManagerService
-      [pe],
-      [Te]
-    ], this._config.override).forEach((i) => {
-      this._injector.add(i);
-    }), this._injector.get(M), this._injector.get(De);
+      [SlideRenderController],
+      [SlidePopupMenuController]
+    ], this._config.override).forEach((m) => {
+      this._injector.add(m);
+    }), this._injector.get(CanvasView), this._injector.get(SlideRenderService);
   }
   onRendered() {
     [
       // need slideEditorBridgeService
       // need TextSelectionRenderService which init by EditorContainer
-      [We],
-      [ze]
-    ].forEach((i) => {
-      this.disposeWithMe(this._renderManagerService.registerRenderModule(x.UNIVER_SLIDE, i));
-    }), this._markSlideAsFocused(), this._injector.get(Ne);
+      [SlideEditorBridgeRenderController],
+      [SlideEditingRenderController]
+    ].forEach((m) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m));
+    }), this._markSlideAsFocused(), this._injector.get(SlidesUIController);
   }
   onSteady() {
-    this._injector.get(Te);
+    this._injector.get(SlidePopupMenuController);
   }
   _markSlideAsFocused() {
-    const i = this._univerInstanceService;
+    const currentService = this._univerInstanceService;
     try {
-      const e = i.getCurrentUnitForType(x.UNIVER_SLIDE);
-      i.focusUnit(e.getUnitId());
+      const slideDataModel = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+      currentService.focusUnit(slideDataModel.getUnitId());
     } catch {
     }
   }
-}, P(Ee, "pluginName", cs), P(Ee, "type", x.UNIVER_SLIDE), Ee);
-bt = as([
-  xe(1, X(Ge)),
-  xe(2, Y),
-  xe(3, j),
-  xe(4, yn)
-], bt);
+}, __name(_a10, "UniverSlidesUIPlugin"), __publicField(_a10, "pluginName", SLIDE_UI_PLUGIN_NAME), __publicField(_a10, "type", UniverInstanceType.UNIVER_SLIDE), _a10);
+UniverSlidesUIPlugin = __decorateClass([
+  __decorateParam(1, Inject(Injector)),
+  __decorateParam(2, IRenderManagerService),
+  __decorateParam(3, IUniverInstanceService),
+  __decorateParam(4, IConfigService)
+], UniverSlidesUIPlugin);
 export {
-  Jt as ActivateSlidePageOperation,
-  Qt as AppendSlideOperation,
-  M as CanvasView,
-  Lt as DeleteSlideElementOperation,
-  Qe as ISlideEditorBridgeService,
-  tt as InsertSlideFloatImageCommand,
-  Je as InsertSlideShapeRectangleCommand,
-  Zt as InsertSlideShapeRectangleOperation,
-  on as SHAPE_MENU_ID,
-  rn as SLIDES_IMAGE_MENU_ID,
-  ae as SLIDE_EDITOR_ID,
-  tn as SetSlidePageThumbOperation,
-  nt as SlideAddTextCommand,
-  en as SlideAddTextOperation,
-  ye as SlideCanvasPopMangerService,
-  zr as SlideEditorContainer,
-  Ar as SlideSideBar,
-  Ne as SlidesUIController,
-  kr as SlidesUIMenuSchema,
-  bt as UniverSlidesUIPlugin,
-  K as UpdateSlideElementOperation
+  ActivateSlidePageOperation,
+  AppendSlideOperation,
+  CanvasView,
+  DeleteSlideElementOperation,
+  ISlideEditorBridgeService,
+  InsertSlideFloatImageCommand,
+  InsertSlideShapeRectangleCommand,
+  InsertSlideShapeRectangleOperation,
+  SHAPE_MENU_ID,
+  SLIDES_IMAGE_MENU_ID,
+  SLIDE_EDITOR_ID,
+  SetSlidePageThumbOperation,
+  SlideAddTextCommand,
+  SlideAddTextOperation,
+  SlideCanvasPopMangerService,
+  SlideEditorContainer,
+  SlideSideBar,
+  SlidesUIController,
+  menuSchema as SlidesUIMenuSchema,
+  UniverSlidesUIPlugin,
+  UpdateSlideElementOperation
 };