@univerjs/slides-ui 0.6.7 → 0.6.9

package/lib/index.js

@@ -0,0 +1,2272 @@
+var dn = Object.defineProperty;
+var un = (i, e, t) => e in i ? dn(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var I = (i, e, t) => un(i, typeof e != "symbol" ? e + "" : e, t);
+import { Inject as X, Injector as Ke, IUniverInstanceService as T, RxDisposable as pe, UniverInstanceType as E, debounce as gn, getColorStyle as hn, CommandType as V, Tools as mn, LocaleService as ee, ICommandService as B, generateRandomId as It, BasicShapes as vn, PageElementType as Ge, Disposable as Ve, DisposableCollection as Xe, IContextService as Ce, toDisposable as bt, FOCUSING_COMMON_DRAWINGS as pn, createInternalEditorID as Cn, createIdentifier as Pt, EDITOR_ACTIVATED as xe, FOCUSING_EDITOR_STANDALONE as Et, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as Rt, DocumentDataModel as fn, HorizontalAlign as Ot, VerticalAlign as ye, IUndoRedoService as _n, WrapStrategy as nt, FOCUSING_EDITOR_BUT_HIDDEN as Sn, DEFAULT_EMPTY_DOCUMENT_VALUE as In, Direction as L, DocumentFlavor as bn, FOCUSING_UNIVER_EDITOR as xt, FORMULA_EDITOR_ACTIVATED as Pn, Plugin as En, merge as Rn, mergeOverrideWithDependencies as it, IConfigService as On } from "@univerjs/core";
+import { IRenderManagerService as Y, Viewport as rt, ScrollBar as yt, getCurrentTypeOfRenderer as $e, Slide as xn, Rect as Tt, Scene as yn, ObjectType as ge, pxToNum as Tn, DeviceInputEventType as J, convertTextRotation as st, FIX_ONE_PIXEL_BLUR_OFFSET as se, fixLineWidthByScale as ot } from "@univerjs/engine-render";
+import { ObjectProvider as Mn, SLIDE_KEY as oe } from "@univerjs/slides";
+import { useDependency as x, ISidebarService as Mt, ICanvasPopupService as wn, ILayoutService as Nn, KeyCode as M, ILocalFileService as Dn, useObservable as Un, DISABLE_AUTO_FOCUS_KEY as at, getMenuHiddenObservable as fe, MenuItemType as _e, RibbonStartGroup as Vn, MetaKeys as Bn, IMenuManagerService as jn, ComponentManager as Ln, IUIPartsService as An, IShortcutService as $n, BuiltInUIPart as ct, connectInjector as lt } from "@univerjs/ui";
+import { jsxs as R, jsx as u } from "react/jsx-runtime";
+import { clsx as y, Button as be, Dropdown as wt, ColorPicker as Hn, InputNumber as de, Scrollbar as Fn } from "@univerjs/design";
+import Nt, { forwardRef as $, useRef as Dt, createElement as H, useState as G, useEffect as me, useMemo as zn, useCallback as dt } from "react";
+import { BehaviorSubject as Q, Subject as Ut, filter as Wn, takeUntil as ut } from "rxjs";
+import { DocSelectionManagerService as kn, DocSkeletonManagerService as gt, RichTextEditingMutation as Kn } from "@univerjs/docs";
+import { IEditorService as Ye, DocSelectionRenderService as ht, VIEWPORT_KEY as mt, DOCS_COMPONENT_MAIN_LAYER_INDEX as Gn, MoveSelectionOperation as Xn, MoveCursorOperation as Yn, DOCS_VIEW_KEY as Zn, DeleteLeftCommand as qn } from "@univerjs/docs-ui";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST as Jn, IImageIoService as Qn, getImageSize as ei } from "@univerjs/drawing";
+var ti = Object.getOwnPropertyDescriptor, ni = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? ti(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, Be = (i, e) => (t, n) => e(t, n, i);
+let ve = class extends pe {
+  constructor(e, t, n, r) {
+    super();
+    I(this, "_objectProvider", null);
+    I(this, "_refreshThumb", gn(() => {
+      this.createThumbs();
+    }, 300));
+    this._renderContext = e, this._injector = t, this._univerInstanceService = n, this._renderManagerService = r, this._objectProvider = this._injector.createInstance(Mn), 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();
+    });
+    t.onTransformChange$.subscribeEvent(() => {
+      setTimeout(() => {
+        this.createThumbs();
+      }, 300);
+    });
+    const o = new rt(oe.VIEW, n, {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      explicitViewportWidthSet: !1,
+      explicitViewportHeightSet: !1,
+      isWheelPreventDefaultX: !0
+    });
+    n.attachControl(), n.onMouseWheel$.subscribeEvent((c, h) => {
+      const l = c;
+      if (l.ctrlKey) {
+        const d = Math.abs(l.deltaX);
+        let v = d < 40 ? 0.2 : d < 80 ? 0.4 : 0.2;
+        v *= l.deltaY > 0 ? -1 : 1, n.scaleX < 1 && (v /= 2), n.scaleX + v > 4 ? n.scale(4, 4) : n.scaleX + v < 0.1 ? n.scale(0.1, 0.1) : (l.deltaY > 0, l.preventDefault());
+      } else
+        o.onMouseWheel(l, h);
+    }), n.onFileLoaded$.subscribeEvent(() => {
+      this._refreshThumb();
+    }), yt.attachTo(o);
+    const a = this._createSlide(n);
+    this._renderContext.mainComponent = a, this._createSlidePages(r, a), this.createThumbs(), t.runRenderLoop(() => {
+      n.render();
+    });
+  }
+  _scrollToCenter() {
+    var c;
+    const e = (c = this._currentRender()) == null ? void 0 : c.scene, t = e == null ? void 0 : e.getViewport(oe.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
+    });
+  }
+  _currentRender() {
+    return $e(E.UNIVER_SLIDE, this._univerInstanceService, this._renderManagerService);
+  }
+  /**
+   * @param mainScene
+   */
+  _createSlide(e) {
+    const t = this._univerInstanceService.getCurrentUnitForType(E.UNIVER_SLIDE), { width: n, height: r } = e, s = t.getPageSize(), { width: o = 100, height: a = 100 } = s, c = new xn(oe.COMPONENT, {
+      left: (n - o) / 2,
+      top: (r - a) / 2,
+      width: o,
+      height: a,
+      zIndex: 10
+    });
+    return c.enableSelectedClipElement(), e.addObject(c), c;
+  }
+  _addBackgroundRect(e, t) {
+    const r = this._univerInstanceService.getCurrentUnitForType(E.UNIVER_SLIDE).getPageSize(), { width: s = 0, height: o = 0 } = r, a = new Tt("canvas", {
+      left: 0,
+      top: 0,
+      width: s,
+      height: o,
+      strokeWidth: 1,
+      stroke: "rgba(198,198,198,1)",
+      fill: hn(t) || "rgba(255,255,255,1)",
+      zIndex: 0,
+      evented: !1
+    });
+    e.addObject(a, 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;
+    return {
+      left: (t - s) / 2,
+      top: (n - o) / 2
+    };
+  }
+  _thumbSceneRender(e, t) {
+    const n = this._renderManagerService.getRenderById(e);
+    if (n == null)
+      return;
+    const { engine: r } = n;
+    if (r == null)
+      return;
+    const { width: s, height: o } = t, { width: a = s, height: c = o } = r, h = r.getCanvas().getContext();
+    t.renderToThumb(h, e, a / s, c / o);
+  }
+  /**
+   * 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);
+      }
+      t.activeFirstPage();
+    }
+  }
+  _createThumb(e) {
+    this._renderManagerService.createRender(e);
+  }
+  /**
+   * SlideDataModel is UnitModel
+   */
+  _getCurrUnitModel() {
+    return this._renderContext.unit;
+  }
+  activePage(e) {
+    let t = e;
+    const n = this._getCurrUnitModel();
+    let r;
+    if (t)
+      r = n.getPage(t);
+    else {
+      const c = n.getPages(), h = n.getPageOrder();
+      if (h == null || c == null)
+        return;
+      r = c[h[0]], t = r.id;
+    }
+    const s = this._currentRender();
+    if (r == null || s == null || s.mainComponent == null)
+      return;
+    const { id: o } = r, a = s.mainComponent;
+    if (n.setActivePage(r), a != null && a.hasPage(o)) {
+      a.changePage(o);
+      return;
+    }
+    this.createPageScene(o, r);
+  }
+  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);
+      }
+  }
+  /**
+   * Create scene by page and set to _sceneMap.
+   * @param pageId
+   * @param page
+   */
+  createPageScene(e, t) {
+    const n = this._renderContext;
+    if (!n || !this._objectProvider)
+      return;
+    const { scene: r, mainComponent: s } = n, o = s, { width: a, height: c } = o, h = new yn(e, o, {
+      width: a,
+      height: c
+    });
+    new rt(`PageViewer_${e}`, h, {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      explicitViewportWidthSet: !1,
+      explicitViewportHeightSet: !1
+    }).closeClip();
+    const { pageElements: d, pageBackgroundFill: v } = t, f = this._objectProvider.convertToRenderObjects(d, r);
+    if (!f || !o) return;
+    this._addBackgroundRect(h, v), h.addObjects(f), h.initTransformer(), f.forEach((p) => {
+      h.attachTransformerTo(p);
+    });
+    const C = h.getTransformer();
+    return C == null || C.changeEnd$.subscribe(() => {
+      this._thumbSceneRender(e, o);
+    }), C == null || C.clearControl$.subscribe(() => {
+      this._thumbSceneRender(e, o);
+    }), o.addPageScene(h), h;
+  }
+  /**
+   * 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;
+    return {
+      scene: n,
+      engine: r,
+      unit: s
+    };
+  }
+  createObjectToPage(e, t) {
+    const { scene: n } = this.getPageRenderUnit(t);
+    if (!n || !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();
+  }
+  appendPage() {
+    const e = this._getCurrUnitModel(), t = e.getBlankPage(), n = this._currentRender();
+    if (t == null || n == null || n.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);
+  }
+};
+ve = ni([
+  Be(1, X(Ke)),
+  Be(2, T),
+  Be(3, Y)
+], ve);
+var ii = Object.getOwnPropertyDescriptor, ri = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? ii(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, si = (i, e) => (t, n) => e(t, n, i);
+let N = class extends pe {
+  constructor(i) {
+    super(), this._renderManagerService = i;
+  }
+  _getSlideRenderControllerFromRenderUnit(i) {
+    return this._renderManagerService.getRenderById(i).with(ve);
+  }
+  createThumbs(i) {
+    this._getSlideRenderControllerFromRenderUnit(i).createThumbs();
+  }
+  activePage(i, e) {
+    this._getSlideRenderControllerFromRenderUnit(e).activePage(i);
+  }
+  getRenderUnitByPageId(i, e) {
+    return this._getSlideRenderControllerFromRenderUnit(e).getPageRenderUnit(i);
+  }
+  createObjectToPage(i, e, t) {
+    return this._getSlideRenderControllerFromRenderUnit(t).createObjectToPage(i, e);
+  }
+  setObjectActiveByPage(i, e, t) {
+    return this._getSlideRenderControllerFromRenderUnit(t).setObjectActiveByPage(i, e);
+  }
+  removeObjectById(i, e, t) {
+    this._getSlideRenderControllerFromRenderUnit(t).removeObjectById(i, e);
+  }
+  /**
+   * append blank page
+   */
+  appendPage(i) {
+    this._getSlideRenderControllerFromRenderUnit(i).appendPage();
+  }
+};
+N = ri([
+  si(0, Y)
+], N);
+const oi = "slides-ui.config", vt = {}, Vt = {
+  id: "slide.operation.delete-element",
+  type: V.OPERATION,
+  handler: (i, e) => {
+    if (!(e != null && e.id)) return !1;
+    const t = e.unitId, r = i.get(T).getUnit(t);
+    if (!r) return !1;
+    const s = r.getActivePage();
+    return delete s.pageElements[e.id], r.updatePage(s.id, s), i.get(N).removeObjectById(e.id, s.id, t), !0;
+  }
+};
+var U = function() {
+  return U = 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]);
+    }
+    return i;
+  }, U.apply(this, arguments);
+}, ai = function(i, 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]]);
+  return t;
+}, F = $(function(i, e) {
+  var t = i.icon, n = i.id, r = i.className, s = i.extend, o = ai(i, ["icon", "id", "className", "extend"]), a = "univerjs-icon univerjs-icon-".concat(n, " ").concat(r || "").trim(), c = Dt("_".concat(di()));
+  return Bt(t, "".concat(n), { defIds: t.defIds, idSuffix: c.current }, U({ ref: e, className: a }, o), s);
+});
+function Bt(i, e, t, n, r) {
+  return H(i.tag, U(U({ key: e }, ci(i, t, r)), n), (li(i, t).children || []).map(function(s, o) {
+    return Bt(s, "".concat(e, "-").concat(i.tag, "-").concat(o), t, void 0, r);
+  }));
+}
+function ci(i, e, t) {
+  var n = U({}, i.attrs);
+  t != null && t.colorChannel1 && n.fill === "colorChannel1" && (n.fill = t.colorChannel1), i.tag === "mask" && n.id && (n.id = n.id + e.idSuffix), Object.entries(n).forEach(function(s) {
+    var o = s[0], a = s[1];
+    o === "mask" && typeof a == "string" && (n[o] = a.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  });
+  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;
+}
+function li(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) ? U(U({}, i), { children: i.children.map(function(r) {
+    return typeof r.attrs.id == "string" && n && n.indexOf(r.attrs.id) > -1 ? U(U({}, r), { attrs: U(U({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
+  }) }) : i;
+}
+function di() {
+  return Math.random().toString(36).substring(2, 8);
+}
+F.displayName = "UniverIcon";
+var ui = { 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" } }] }, jt = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "add-image-single",
+    ref: e,
+    icon: ui
+  }));
+});
+jt.displayName = "AddImageSingle";
+var gi = { 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" } }] }, Lt = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "autofill",
+    ref: e,
+    icon: gi
+  }));
+});
+Lt.displayName = "Autofill";
+var hi = { 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" } }] }, At = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "bottom-single",
+    ref: e,
+    icon: hi
+  }));
+});
+At.displayName = "BottomSingle";
+var mi = { 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"] }, $t = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "graph-single",
+    ref: e,
+    icon: mi
+  }));
+});
+$t.displayName = "GraphSingle";
+var vi = { 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" } }] }, Ze = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "more-down-single",
+    ref: e,
+    icon: vi
+  }));
+});
+Ze.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" } }] }, Ht = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "move-down-single",
+    ref: e,
+    icon: pi
+  }));
+});
+Ht.displayName = "MoveDownSingle";
+var Ci = { 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" } }] }, Ft = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "move-up-single",
+    ref: e,
+    icon: Ci
+  }));
+});
+Ft.displayName = "MoveUpSingle";
+var fi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.01281 1.36643C8.79386 0.585377 10.0602 0.585378 10.8412 1.36643L12.9223 3.44752C13.7034 4.22857 13.7034 5.4949 12.9223 6.27595L9.36445 9.83383C8.5834 10.6149 7.31707 10.6149 6.53602 9.83383L4.45493 7.75273C3.67388 6.97168 3.67388 5.70535 4.45493 4.9243L8.01281 1.36643ZM9.9927 2.21495C9.68028 1.90253 9.17375 1.90253 8.86133 2.21495L5.30346 5.77283L5.29671 5.77966L10.839 6.66224L12.0738 5.42742C12.3862 5.115 12.3862 4.60847 12.0738 4.29605L9.9927 2.21495Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M14.5179 9.48875C14.5179 9.99175 14.1101 10.3995 13.607 10.3995C13.1041 10.3995 12.6963 9.99175 12.6963 9.48875C12.6963 9.1773 13.0455 8.59966 13.3114 8.20487C13.4549 7.99177 13.7591 7.99177 13.9027 8.20486C14.1687 8.59965 14.5179 9.1773 14.5179 9.48875Z" } }, { tag: "path", attrs: { fill: "colorChannel1", d: "M1.98682 13.4992C1.98682 12.5603 2.74793 11.7992 3.68682 11.7992H14.2868C15.2257 11.7992 15.9868 12.5603 15.9868 13.4992V13.4992C15.9868 14.4381 15.2257 15.1992 14.2868 15.1992H3.68682C2.74793 15.1992 1.98682 14.4381 1.98682 13.4992V13.4992Z" } }] }, zt = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "paint-bucket",
+    ref: e,
+    icon: fi
+  }));
+});
+zt.displayName = "PaintBucket";
+var _i = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.66695 1.33496C2.29968 1.33496 2.00195 1.63269 2.00195 1.99996V3.64439C2.00195 4.01166 2.29968 4.30939 2.66695 4.30939C3.03422 4.30939 3.33195 4.01166 3.33195 3.64439V2.66496H7.33521V13.335H5.3337C4.96643 13.335 4.6687 13.6327 4.6687 14C4.6687 14.3672 4.96643 14.665 5.3337 14.665H10.667C11.0343 14.665 11.332 14.3672 11.332 14C11.332 13.6327 11.0343 13.335 10.667 13.335H8.66521V2.66496H12.6686V3.64439C12.6686 4.01166 12.9664 4.30939 13.3336 4.30939C13.7009 4.30939 13.9986 4.01166 13.9986 3.64439V1.99996C13.9986 1.63269 13.7009 1.33496 13.3336 1.33496H2.66695Z" } }] }, Wt = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "text-single",
+    ref: e,
+    icon: _i
+  }));
+});
+Wt.displayName = "TextSingle";
+var Si = { 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 = $(function(i, e) {
+  return H(F, Object.assign({}, i, {
+    id: "topmost-single",
+    ref: e,
+    icon: Si
+  }));
+});
+kt.displayName = "TopmostSingle";
+const k = {
+  id: "slide.operation.update-element",
+  type: V.OPERATION,
+  handler: (i, e) => {
+    const { oKey: t, props: n } = e, r = i.get(T), s = e == null ? void 0 : e.unitId, o = r.getUnit(s);
+    if (!o) return !1;
+    const a = o.getActivePage();
+    return a.pageElements[t] = mn.deepMerge(a.pageElements[t], n), o.updatePage(a.id, a), !0;
+  }
+}, Ii = "univer-image-common-panel-grid", bi = "univer-image-common-panel-border", Pi = "univer-image-common-panel-title", Ei = "univer-image-common-panel-row", Ri = "univer-image-common-panel-column", Oi = "univer-image-common-panel-inline", xi = "univer-image-common-panel-span2", yi = "univer-image-common-panel-span3", Ti = "univer-image-common-panel-input", g = {
+  imageCommonPanelGrid: Ii,
+  imageCommonPanelBorder: bi,
+  imageCommonPanelTitle: Pi,
+  imageCommonPanelRow: Ei,
+  imageCommonPanelColumn: Ri,
+  imageCommonPanelInline: Oi,
+  imageCommonPanelSpan2: xi,
+  imageCommonPanelSpan3: yi,
+  imageCommonPanelInput: Ti
+};
+function Mi(i) {
+  const { pageId: e, unitId: t } = i, n = x(ee), r = x(N), s = x(B), 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 d = (v) => {
+    const f = a.getAllObjects(), [C, p] = f.reduce(([_, b], P) => {
+      const w = P.zIndex, D = w < _ ? w : _, j = w > b ? w : b;
+      return [D, j];
+    }, [0, 0]);
+    let m = l.zIndex;
+    v === 3 ? m = C - 1 : v === 2 ? m = p + 1 : v === 0 ? m = l.zIndex + 1 : v === 1 && (m = l.zIndex - 1), l.setProps({
+      zIndex: m
+    }), s.executeCommand(k.id, {
+      unitId: t,
+      oKey: l == null ? void 0 : l.oKey,
+      props: {
+        zIndex: m
+      }
+    });
+  };
+  return /* @__PURE__ */ R("div", { className: g.imageCommonPanelGrid, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: n.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ R("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(be, { size: "small", onClick: () => {
+        d(
+          0
+          /* forward */
+        );
+      }, children: /* @__PURE__ */ R("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(Ft, {}),
+        n.t("image-panel.arrange.forward")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(be, { size: "small", onClick: () => {
+        d(
+          1
+          /* backward */
+        );
+      }, children: /* @__PURE__ */ R("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(Ht, {}),
+        n.t("image-panel.arrange.backward")
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ R("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(be, { size: "small", onClick: () => {
+        d(
+          2
+          /* front */
+        );
+      }, children: /* @__PURE__ */ R("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(kt, {}),
+        n.t("image-panel.arrange.front")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(be, { size: "small", onClick: () => {
+        d(
+          3
+          /* back */
+        );
+      }, children: /* @__PURE__ */ R("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(At, {}),
+        n.t("image-panel.arrange.back")
+      ] }) }) })
+    ] })
+  ] });
+}
+function wi(i) {
+  var C, p;
+  const { pageId: e, unitId: t } = i, n = x(ee), r = x(N), s = x(B), 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 [d, v] = Nt.useState((p = (C = l.fill) == null ? void 0 : C.toString()) != null ? p : "");
+  function f(m) {
+    l == null || l.setProps({
+      fill: m
+    }), s.executeCommand(k.id, {
+      unitId: t,
+      oKey: l == null ? void 0 : l.oKey,
+      props: {
+        shape: {
+          shapeProperties: {
+            shapeBackgroundFill: {
+              rgb: m
+            }
+          }
+        }
+      }
+    }), v(m);
+  }
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: y(g.imageCommonPanelGrid, g.imageCommonPanelBorder),
+      children: /* @__PURE__ */ R("div", { className: g.imageCommonPanelGrid, children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: n.t("slide.panel.fill.title") }) }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(
+          wt,
+          {
+            overlay: /* @__PURE__ */ u("div", { className: "univer-rounded-lg univer-p-4", children: /* @__PURE__ */ u(
+              Hn,
+              {
+                value: "#fff",
+                onChange: f
+              }
+            ) }),
+            children: /* @__PURE__ */ R("a", { className: g.uiPluginSheetsBorderPanelButton, children: [
+              /* @__PURE__ */ u(zt, { extend: { colorChannel1: d != null ? d : "rgb(var(--primary-color))" } }),
+              /* @__PURE__ */ u("span", { className: g.uiPluginSheetsBorderPanelMoreIcon, children: /* @__PURE__ */ u(Ze, {}) })
+            ] })
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+function Ni(i) {
+  const { pageId: e, unitId: t } = i, n = x(ee), r = x(N), s = x(B), 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 {
+    width: d = 0,
+    height: v = 0,
+    left: f = 0,
+    top: C = 0,
+    angle: p = 0
+  } = l, [m, _] = G(d), [b, P] = G(v), [w, D] = G(f), [j, O] = G(C), [K, ae] = G(p), z = (S) => {
+    const { objects: ce } = S, le = ce.values().next().value, {
+      width: sn = 0,
+      height: on = 0,
+      left: an = 0,
+      top: cn = 0,
+      angle: ln = 0
+    } = le;
+    _(sn), P(on), D(an), O(cn), ae(ln);
+  };
+  me(() => {
+    const S = c.changeStart$.subscribe((le) => {
+      z(le);
+    }), ce = c.changing$.subscribe((le) => {
+      z(le);
+    });
+    return () => {
+      ce.unsubscribe(), S.unsubscribe();
+    };
+  }, []);
+  function W(S) {
+    !S || !l || (s.executeCommand(k.id, {
+      pageId: e,
+      oKey: l.oKey,
+      props: {
+        width: S
+      }
+    }), l == null || l.resize(S, l.height), _(S), c == null || c.refreshControls());
+  }
+  function te(S) {
+    !S || !l || (s.executeCommand(k.id, {
+      pageId: e,
+      oKey: l.oKey,
+      props: {
+        height: S
+      }
+    }), l == null || l.resize(l.width, S), P(S), c == null || c.refreshControls());
+  }
+  function ne(S) {
+    !S || !l || (s.executeCommand(k.id, {
+      pageId: e,
+      oKey: l.oKey,
+      props: {
+        left: S
+      }
+    }), l == null || l.translate(S, l.top), D(S), c == null || c.refreshControls());
+  }
+  function Se(S) {
+    !S || !l || (s.executeCommand(k.id, {
+      pageId: e,
+      oKey: l.oKey,
+      props: {
+        right: S
+      }
+    }), l == null || l.translate(l.left, S), O(S), c == null || c.refreshControls());
+  }
+  function Ie(S) {
+    !S || !l || (s.executeCommand(k.id, {
+      pageId: e,
+      oKey: l.oKey,
+      props: {
+        angle: S
+      }
+    }), l == null || l.transformByState({
+      angle: S
+    }), ae(S), c == null || c.refreshControls());
+  }
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      className: y(g.imageCommonPanelGrid, g.imageCommonPanelBorder),
+      children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: n.t("image-panel.transform.title") }) }) }),
+        /* @__PURE__ */ R("div", { className: g.imageCommonPanelRow, children: [
+          /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ R("label", { children: [
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: n.t("image-panel.transform.width") }) }),
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(
+              de,
+              {
+                className: g.imageCommonPanelInput,
+                min: 1,
+                value: m,
+                onChange: (S) => {
+                  W(S);
+                }
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ R("label", { children: [
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: n.t("image-panel.transform.height") }) }),
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(
+              de,
+              {
+                className: g.imageCommonPanelInput,
+                min: 1,
+                value: b,
+                onChange: (S) => {
+                  te(S);
+                }
+              }
+            ) }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ R("div", { className: g.imageCommonPanelRow, children: [
+          /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ R("label", { children: [
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: n.t("image-panel.transform.x") }) }),
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(
+              de,
+              {
+                className: g.imageCommonPanelInput,
+                precision: 1,
+                min: 0,
+                value: w,
+                onChange: (S) => {
+                  ne(S);
+                }
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ R("label", { children: [
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: n.t("image-panel.transform.y") }) }),
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(
+              de,
+              {
+                className: g.imageCommonPanelInput,
+                precision: 1,
+                min: 0,
+                value: j,
+                onChange: (S) => {
+                  Se(S);
+                }
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ u("div", { className: y(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ R("label", { children: [
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: n.t("image-panel.transform.rotate") }) }),
+            /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(
+              de,
+              {
+                className: g.imageCommonPanelInput,
+                precision: 1,
+                value: K,
+                onChange: Ie
+              }
+            ) }) })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+const Di = "univer-image-common-panel", Ui = {
+  imageCommonPanel: Di
+}, Oe = "COMPONENT_SLIDE_SIDEBAR";
+function Vi() {
+  var h, l, d;
+  const i = x(T), e = x(N), t = i.getCurrentUnitForType(E.UNIVER_SLIDE), n = (h = t == null ? void 0 : t.getActivePage()) == null ? void 0 : h.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)
+    return null;
+  const c = ((d = i.getFocusedUnit()) == null ? void 0 : d.getUnitId()) || "";
+  return /* @__PURE__ */ R("section", { className: Ui.imageCommonPanel, children: [
+    /* @__PURE__ */ u(Mi, { pageId: n, unitId: c }),
+    /* @__PURE__ */ u(Ni, { pageId: n, unitId: c }),
+    a.objectType === ge.RECT && /* @__PURE__ */ u(wi, { pageId: n, unitId: c })
+  ] });
+}
+const qe = {
+  id: "slide.command.insert-float-shape",
+  type: V.COMMAND,
+  handler: async (i) => {
+    var r;
+    const e = i.get(B), n = (r = i.get(T).getFocusedUnit()) == null ? void 0 : r.getUnitId();
+    return e.executeCommand(Kt.id, { unitId: n });
+  }
+}, Kt = {
+  id: "slide.operation.insert-float-shape",
+  type: V.OPERATION,
+  handler: async (i, e) => {
+    const t = It(6), n = i.get(T), 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((v) => v.zIndex)) : 20, h = {
+      id: t,
+      zIndex: c + 1,
+      left: 378,
+      top: 142,
+      width: 250,
+      height: 250,
+      title: t,
+      description: "",
+      type: Ge.SHAPE,
+      shape: {
+        shapeType: vn.Rect,
+        text: "",
+        shapeProperties: {
+          shapeBackgroundFill: {
+            rgb: "rgb(0,0,255)"
+          }
+        }
+      }
+    };
+    o.pageElements[t] = h, s.updatePage(o.id, o);
+    const l = i.get(N), d = l.createObjectToPage(h, o.id, r);
+    return d && l.setObjectActiveByPage(d, o.id, r), !0;
+  }
+}, He = {
+  id: "sidebar.operation.slide-shape",
+  type: V.COMMAND,
+  handler: async (i, e) => {
+    const { visible: t, objectType: n } = e, r = i.get(Mt), s = i.get(ee);
+    let o = "", a = "";
+    return n === ge.RECT ? (o = "slide.sidebar.shape", a = Oe) : n === ge.IMAGE ? (o = "slide.sidebar.image", a = Oe) : n === ge.RICH_TEXT && (o = "slide.sidebar.text", a = Oe), t ? r.open({
+      header: { title: s.t(o) },
+      children: { label: a },
+      onClose: () => {
+      },
+      width: 360
+    }) : r.close(), !0;
+  }
+}, Gt = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
+var Bi = Object.getOwnPropertyDescriptor, ji = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Bi(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, Pe = (i, e) => (t, n) => e(t, n, i);
+function Li(i, e) {
+  const t = pt(i.left, i.top, e), n = pt(i.right, i.bottom, e);
+  return {
+    left: t.x,
+    top: t.y,
+    right: n.x,
+    bottom: n.y
+  };
+}
+function pt(i, e, t) {
+  const { scaleX: n, scaleY: r } = t.getAncestorScale(), s = t.getViewport(oe.VIEW);
+  if (!s)
+    return {
+      x: i,
+      y: e
+    };
+  const { viewportScrollX: o, viewportScrollY: a } = s, c = (i - o) * n, h = (e - a) * r;
+  return {
+    x: c,
+    y: h
+  };
+}
+let Te = class extends Ve {
+  constructor(i, e, t, n) {
+    super(), this._globalPopupManagerService = i, this._renderManagerService = e, this._univerInstanceService = t, this._commandService = n;
+  }
+  _createObjectPositionObserver(i, e) {
+    const n = (() => {
+      var z, W, te, ne;
+      const { scene: o, engine: a } = e, { left: c, top: h, width: l, height: d } = i, v = (o.width - ((W = (z = e.mainComponent) == null ? void 0 : z.width) != null ? W : 0)) / 2, f = (o.height - ((ne = (te = e.mainComponent) == null ? void 0 : te.height) != null ? ne : 0)) / 2, C = {
+        left: c,
+        right: c + l,
+        top: h,
+        bottom: h + d
+      }, p = a.getCanvasElement(), m = p.getBoundingClientRect(), _ = Tn(p.style.width), { scaleX: b, scaleY: P } = o.getAncestorScale(), w = Li(C, o), { top: D, left: j, width: O } = m, K = O / _;
+      return {
+        left: w.left * K * b + j + v,
+        right: w.right * K * b + j + v,
+        top: w.top * K * P + D + f,
+        bottom: w.bottom * K * P + D + f
+      };
+    })(), r = new Q(n), s = new Xe();
+    return {
+      position: n,
+      position$: r,
+      disposable: s
+    };
+  }
+  attachPopupToObject(i, e) {
+    const n = this._univerInstanceService.getCurrentUnitForType(E.UNIVER_SLIDE).getUnitId(), r = this._renderManagerService.getRenderById(n);
+    if (!r)
+      return {
+        dispose: () => {
+        }
+      };
+    const { position: s, position$: o, disposable: a } = this._createObjectPositionObserver(i, r), c = this._globalPopupManagerService.addPopup({
+      ...e,
+      unitId: n,
+      subUnitId: "default",
+      anchorRect: s,
+      anchorRect$: o,
+      canvasElement: r.engine.getCanvasElement()
+    });
+    return {
+      dispose: () => {
+        this._globalPopupManagerService.removePopup(c), o.complete(), a.dispose();
+      }
+    };
+  }
+};
+Te = ji([
+  Pe(0, X(wn)),
+  Pe(1, Y),
+  Pe(2, T),
+  Pe(3, B)
+], Te);
+var Ai = Object.getOwnPropertyDescriptor, $i = (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 = o(r) || r);
+  return r;
+}, q = (i, e) => (t, n) => e(t, n, i);
+let Me = class extends pe {
+  constructor(e, t, n, r, s, o, a) {
+    super();
+    I(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();
+  }
+  _init() {
+    this._univerInstanceService.getAllUnitsForType(E.UNIVER_SLIDE).forEach((e) => this._create(e));
+  }
+  _create(e) {
+    if (!e)
+      return;
+    const t = e.getUnitId();
+    this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+  }
+  _hasCropObject(e) {
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _popupMenuListener(e) {
+    var r;
+    const t = this._univerInstanceService.getCurrentUnitForType(E.UNIVER_SLIDE), n = (r = t == null ? void 0 : t.getPages()) != null ? r : {};
+    Object.keys(n).forEach((s) => {
+      var h;
+      const a = (h = this._canvasView.getRenderUnitByPageId(s, e).scene) == null ? void 0 : h.getTransformer();
+      if (!a) return;
+      let c;
+      this.disposeWithMe(
+        bt(
+          a.createControl$.subscribe(() => {
+            const l = a.getSelectedObjectMap();
+            if (l.size > 1) {
+              c == null || c.dispose();
+              return;
+            }
+            const d = l.values().next().value;
+            if (!d)
+              return;
+            const v = d.oKey;
+            c == null || c.dispose(), c = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(d, {
+              componentKey: Gt,
+              direction: "horizontal",
+              offset: [2, 0],
+              extraProps: {
+                menuItems: this._getMenuItemsByObjectType(d.objectType, v, e)
+              }
+            })), this._sidebarService.visible && this._commandService.executeCommand(He.id, {
+              visible: !0,
+              objectType: d.objectType
+            });
+          })
+        )
+      ), this.disposeWithMe(
+        a.clearControl$.subscribe(() => {
+          c == null || c.dispose(), this._contextService.setContextValue(pn, !1);
+        })
+      ), this.disposeWithMe(
+        a.changing$.subscribe(() => {
+          c == null || c.dispose();
+          const l = a.getSelectedObjectMap();
+          if (l.size > 1) {
+            c == null || c.dispose();
+            return;
+          }
+          const d = l.values().next().value;
+          d && this._commandService.executeCommand(k.id, {
+            unitId: e,
+            oKey: d.oKey,
+            props: {
+              width: d.width,
+              height: d.height,
+              left: d.left,
+              top: d.top
+            }
+          });
+        })
+      );
+    });
+  }
+  _getMenuItemsByObjectType(e, t, n) {
+    return [{
+      label: "slide.popup.edit",
+      index: 0,
+      commandId: He.id,
+      commandParams: {
+        visible: !0,
+        objectType: e
+      },
+      disable: !1
+    }, {
+      label: "slide.popup.delete",
+      index: 5,
+      commandId: Vt.id,
+      commandParams: {
+        id: t,
+        unitId: n
+      },
+      disable: !1
+    }];
+  }
+};
+Me = $i([
+  q(0, X(Te)),
+  q(1, Y),
+  q(2, T),
+  q(3, Ce),
+  q(4, X(N)),
+  q(5, Mt),
+  q(6, B)
+], Me);
+const we = {
+  id: "slide.operation.edit-arrow",
+  type: V.OPERATION,
+  handler: () => !0
+}, he = Cn("SLIDE_EDITOR");
+var Hi = Object.getOwnPropertyDescriptor, Fi = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Hi(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, je = (i, e) => (t, n) => e(t, n, i);
+const Je = Pt("univer.slide-editor-bridge.service");
+let Fe = class extends Ve {
+  constructor(e, t, n) {
+    super();
+    I(this, "_editorUnitId", he);
+    I(this, "_isForceKeepVisible", !1);
+    I(this, "_editorIsDirty", !1);
+    I(this, "_currentEditRectState", null);
+    I(this, "_currentEditRectState$", new Q(null));
+    I(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
+    I(this, "_visibleParam", {
+      visible: !1,
+      eventType: J.Dblclick,
+      unitId: ""
+    });
+    I(this, "_visible$", new Q(this._visibleParam));
+    I(this, "visible$", this._visible$.asObservable());
+    I(this, "_afterVisible$", new Q(this._visibleParam));
+    I(this, "afterVisible$", this._afterVisible$.asObservable());
+    I(this, "endEditing$", new Ut());
+    I(this, "_currentEditRectInfo");
+    this._editorService = e, this._contextService = t, this._renderManagerService = n;
+  }
+  dispose() {
+    super.dispose();
+  }
+  getEditorRect() {
+    return this._currentEditRectInfo;
+  }
+  /**
+   * 1st part of startEditing.
+   * @editorInfo editorInfo
+   */
+  setEditorRect(e) {
+    this._currentEditRectInfo = e, this._editorService.getFocusEditor() || (this._editorService.focus(he), this._contextService.setContextValue(xe, !1), this._contextService.setContextValue(Et, !1), this._contextService.setContextValue(Rt, !1));
+    const t = this.getEditRectState();
+    this._currentEditRectState = t, this._currentEditRectState$.next(t);
+  }
+  changeVisible(e) {
+    this._visibleParam = e, e.visible && (this._editorIsDirty = !1), this._visible$.next(this._visibleParam), this._afterVisible$.next(this._visibleParam);
+  }
+  /**
+   * get info from _currentEditRectInfo
+   *
+   * invoked by slide-editing.render-controller.ts@_handleEditorVisible
+   * && this@setEditorRect
+   */
+  getEditRectState() {
+    const e = he, 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 o = {
+      documentModel: new fn(r),
+      fontString: "document",
+      textRotation: { a: 0, v: 0 },
+      wrapStrategy: 0,
+      verticalAlign: ye.TOP,
+      horizontalAlign: Ot.LEFT,
+      paddingData: { t: 0, b: 1, l: 2, r: 2 }
+    }, a = t.richTextObj.width, c = t.richTextObj.height, h = t.richTextObj.left, l = t.richTextObj.top, d = {
+      left: 0,
+      top: 0
+    }, v = this._renderManagerService.getRenderById(n), f = v == null ? void 0 : v.scene, C = f == null ? void 0 : f.getViewport(oe.VIEW), p = f == null ? void 0 : f.getObject(oe.COMPONENT), m = {
+      x: (p == null ? void 0 : p.left) || 0,
+      y: (p == null ? void 0 : p.top) || 0
+    }, _ = (C == null ? void 0 : C.viewportScrollX) || 0, b = (C == null ? void 0 : C.viewportScrollY) || 0;
+    return d.left = m.x - _, d.top = m.y - b, {
+      position: {
+        startX: h,
+        startY: l,
+        endX: h + a,
+        endY: l + c
+      },
+      scaleX: 1,
+      scaleY: 1,
+      slideCardOffset: d,
+      unitId: n,
+      editorUnitId: e,
+      documentLayoutObject: o
+    };
+  }
+  changeEditorDirty(e) {
+    this._editorIsDirty = e;
+  }
+  isVisible() {
+    return this._visibleParam.visible;
+  }
+  getEditorDirty() {
+    return this._editorIsDirty;
+  }
+  getCurrentEditorId() {
+    return this._editorUnitId;
+  }
+  /**
+   * @deprecated
+   */
+  genDocData(e) {
+    const t = this.getCurrentEditorId(), n = e.text, r = e.fs;
+    return {
+      id: t,
+      body: {
+        dataStream: `${n}\r
+`,
+        textRuns: [{ st: 0, ed: n.length }],
+        paragraphs: [{
+          paragraphStyle: {
+            // no use
+            // textStyle: { fs: 30 },
+            // horizontalAlign: HorizontalAlign.CENTER,
+            // verticalAlign: VerticalAlign.MIDDLE,
+          },
+          startIndex: n.length + 1
+        }],
+        sectionBreaks: [{ startIndex: n.length + 2 }]
+      },
+      documentStyle: {
+        marginBottom: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        pageSize: { width: 1 / 0, height: 1 / 0 },
+        textStyle: { fs: r },
+        renderConfig: {
+          // horizontalAlign: HorizontalAlign.CENTER,
+          verticalAlign: ye.MIDDLE,
+          centerAngle: 0,
+          vertexAngle: 0,
+          wrapStrategy: 0
+        }
+      },
+      drawings: {},
+      drawingsOrder: [],
+      settings: { zoomRatio: 1 }
+    };
+  }
+};
+Fe = Fi([
+  je(0, Ye),
+  je(1, Ce),
+  je(2, Y)
+], Fe);
+class zi {
+  constructor() {
+    I(this, "_state", null);
+    I(this, "_rect", null);
+    I(this, "_state$", new Q(null));
+    I(this, "state$", this._state$.asObservable());
+    I(this, "_rect$", new Q(null));
+    I(this, "rect$", this._rect$.asObservable());
+    I(this, "_focus", !1);
+    I(this, "_focus$", new Q(this._focus));
+    I(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);
+  }
+  getRect() {
+    return this._rect;
+  }
+  setRect(e) {
+    this._rect = e, this._rect$.next(e);
+  }
+  getState() {
+    return this._state;
+  }
+  setFocus(e = !1) {
+    this._focus = e, this._focus$.next(e);
+  }
+  _refresh(e) {
+    this._state$.next(e);
+  }
+}
+const Qe = Pt(
+  "univer.slide-editor-manager.service"
+);
+var Z = /* @__PURE__ */ ((i) => (i[i.InitialState = 0] = "InitialState", i[i.StartEditor = 1] = "StartEditor", i[i.CursorChange = 2] = "CursorChange", i))(Z || {}), Wi = Object.getOwnPropertyDescriptor, ki = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Wi(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, A = (i, e) => (t, n) => e(t, n, i);
+const Ct = -1e3, ft = 5, Ki = 2;
+let ze = class extends Ve {
+  constructor(e, t, n, r, s, o, a, c, h, l, d, v) {
+    super();
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    I(this, "_cursorChange", Z.InitialState);
+    /** If the corresponding unit is active and prepared for editing. */
+    I(this, "_isUnitEditing", !1);
+    I(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 = h, this._commandService = l, this._localService = d, this._editorService = v, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(E.UNIVER_SLIDE).subscribe((f) => {
+      f && f.getUnitId() === this._renderContext.unitId ? this._d = this._init() : (this._disposeCurrent(), this._isUnitEditing && (this._handleEditorInvisible({
+        visible: !1,
+        eventType: J.Keyboard,
+        keycode: M.ESC,
+        unitId: this._renderContext.unitId
+      }), this._isUnitEditing = !1));
+    })), this._initEditorVisibilityListener();
+  }
+  dispose() {
+    super.dispose(), this._disposeCurrent();
+  }
+  _disposeCurrent() {
+    var e;
+    (e = this._d) == null || e.dispose(), this._d = null;
+  }
+  _init() {
+    const e = new Xe();
+    return this._subscribeToCurrentCell(e), this._initialKeyboardListener(e), this._initialCursorSync(e), this._listenEditorFocus(e), this._commandExecutedListener(e), setTimeout(() => {
+      this._cursorStateListener(e);
+    }, 1e3), e;
+  }
+  _initEditorVisibilityListener() {
+    this.disposeWithMe(this._editorBridgeService.visible$.subscribe((e) => {
+      e.visible ? (this._isUnitEditing = !0, this._handleEditorVisible(e)) : this._isUnitEditing && (this._handleEditorInvisible(e), this._isUnitEditing = !1);
+    }));
+  }
+  _listenEditorFocus(e) {
+    const t = this._getEditorObject();
+    t && e.add(t.document.onPointerDown$.subscribeEvent(() => {
+    }));
+  }
+  _getEditorSkeleton(e) {
+    var t;
+    return (t = this._renderManagerService.getRenderById(e)) == null ? void 0 : t.with(gt).getSkeleton();
+  }
+  _getEditorViewModel(e) {
+    var t;
+    return (t = this._renderManagerService.getRenderById(e)) == null ? void 0 : t.with(gt).getViewModel();
+  }
+  _initialCursorSync(e) {
+    e.add(this._cellEditorManagerService.focus$.pipe(Wn((t) => !!t)).subscribe(() => {
+      var t;
+      (t = $e(E.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) == null || t.with(ht).sync();
+    }));
+  }
+  /**
+   * Set editorUnitId to curr doc.
+   * @param d DisposableCollection
+   */
+  _subscribeToCurrentCell(e) {
+    e.add(this._editorBridgeService.currentEditRectState$.subscribe((t) => {
+      var d;
+      if (t == null || this._contextService.getContextValue(Et) || this._contextService.getContextValue(Rt))
+        return;
+      const {
+        position: { startX: n, endX: r },
+        documentLayoutObject: { textRotation: s, wrapStrategy: o, documentModel: a },
+        scaleX: c,
+        editorUnitId: h
+      } = t, { vertexAngle: l } = st(s);
+      a.updateDocumentId(h), o === nt.WRAP && l === 0 && a.updateDocumentDataPageSize((r - n) / c), this._instanceSrv.changeDoc(h, a), this._contextService.setContextValue(Sn, !0), this._textSelectionManagerService.replaceTextRanges([{
+        startOffset: 0,
+        endOffset: 0
+      }]), (d = $e(E.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) == null || d.with(ht).activate(Ct, Ct);
+    }));
+  }
+  /**
+   * Set size and pos of editing area.
+   * @param positionFromEditRectState
+   * @param canvasOffset
+   * @param documentSkeleton
+   * @param documentLayoutObject
+   * @param scaleX
+   * @param scaleY
+   */
+  _fitTextSize(e, t, n, r, s = 1, o = 1) {
+    const { startX: a, startY: c, endX: h, endY: l } = e, d = r.documentModel;
+    if (d == null)
+      return;
+    const { actualWidth: v, actualHeight: f } = this._predictingSize(
+      e,
+      t,
+      n,
+      r,
+      s,
+      o
+    ), { verticalAlign: C, paddingData: p, fill: m } = r;
+    let _ = h - a, b = l - c;
+    if (_ < v && (_ = v), b < f)
+      b = f, d.updateDocumentDataMargin(p);
+    else {
+      let P = 0;
+      C === ye.MIDDLE ? P = (b - f) / 2 / o : C === ye.TOP ? P = p.t || 0 : P = (b - f) / o - (p.b || 0), P = P < (p.t || 0) ? p.t || 0 : P, d.updateDocumentDataMargin({
+        t: P
+      });
+    }
+    n.calculate(), this._editAreaProcessing(_, b, e, t, m, s, o);
+  }
+  /**
+   * 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: h, wrapStrategy: l } = r, d = r.documentModel, { vertexAngle: v } = st(h), f = document.body.clientWidth;
+    if (l === nt.WRAP && v === 0) {
+      const { actualWidth: m, actualHeight: _ } = n.getActualSize();
+      return {
+        actualWidth: m * s,
+        actualHeight: _ * o
+      };
+    }
+    d == null || d.updateDocumentDataPageSize((f - a - t.left) / s), n.calculate();
+    const C = n.getActualSize();
+    let p = c - a;
+    return p < C.actualWidth * s + ft * s && (p = C.actualWidth * s + ft * s), d == null || d.updateDocumentDataPageSize(p / s), d == null || d.updateDocumentRenderConfig({
+      horizontalAlign: Ot.UNSPECIFIED,
+      cellValueType: void 0
+    }), {
+      actualWidth: p,
+      actualHeight: C.actualHeight * o
+    };
+  }
+  /**
+   * 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)
+      return;
+    function h(ce) {
+      return Number.parseInt(ce.replace("px", ""));
+    }
+    const d = this._renderContext.engine.getCanvasElement(), v = d.getBoundingClientRect(), f = h(d.style.width), { top: C, left: p, width: m } = v, _ = m / f;
+    let { startX: b, startY: P } = n;
+    b += r.left, P += r.top;
+    const { document: w, scene: D, engine: j } = c, O = D.getViewport(mt.VIEW_MAIN), K = document.body.clientHeight - P - r.top - Ki * 2, ae = document.body.clientWidth - b - r.left;
+    let z = t, W = O == null ? void 0 : O.getScrollBar();
+    z > K ? (z = K, W == null ? O && new yt(O, { enableHorizontal: !1, barSize: 8 }) : O == null || O.resetCanvasSizeAndUpdateScroll()) : (W = null, (S = O == null ? void 0 : O.getScrollBar()) == null || S.dispose()), e += (W == null ? void 0 : W.barSize) || 0, e = Math.min(e, ae), b -= se, P -= se, this._addBackground(D, e / o, t / a, s);
+    const { scaleX: te, scaleY: ne } = D.getPrecisionScale();
+    D.transformByState({
+      width: e * _ / o,
+      height: t * _ / a,
+      scaleX: o * _,
+      scaleY: a * _
+    }), w.resize(e / o, t / a), setTimeout(() => {
+      j.resizeBySize(
+        ot(e, te),
+        ot(z, ne)
+      );
+    }, 0);
+    const Se = this._layoutService.getContentElement().getBoundingClientRect(), Ie = d.getBoundingClientRect();
+    b = b * _ + (Ie.left - Se.left), P = P * _ + (Ie.top - Se.top), this._cellEditorManagerService.setState({
+      startX: b,
+      startY: P,
+      endX: e * _ + b,
+      endY: z * _ + P,
+      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(
+      [
+        new Tt(s, {
+          width: t,
+          height: n,
+          fill: r,
+          evented: !1
+        })
+      ],
+      Gn
+    ) : r == null ? o.dispose() : (o.setProps({
+      fill: r
+    }), o.transformByState({
+      width: t,
+      height: n
+    })));
+  }
+  /**
+   * Show input area, resize input area and then place input to right place.
+   * @TODO why do resize in show input area?
+   * @param param
+   */
+  // 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 m, _;
+    const { eventType: t } = e;
+    this._cursorChange = [J.PointerDown, J.Dblclick].includes(t) ? Z.CursorChange : Z.StartEditor;
+    const n = this._editorBridgeService.getEditRectState();
+    if (n == null)
+      return;
+    const {
+      position: r,
+      documentLayoutObject: s,
+      slideCardOffset: o,
+      scaleX: a,
+      scaleY: c,
+      editorUnitId: h,
+      unitId: l
+    } = n, d = this._getEditorObject();
+    if (d == null)
+      return;
+    const { scene: v } = d;
+    this._contextService.setContextValue(xe, !0);
+    const { documentModel: f } = s, C = this._getEditorSkeleton(h);
+    if (!C || !f)
+      return;
+    this._fitTextSize(r, o, C, s, a, c);
+    const p = f.getBody().dataStream.length - 2 || 0;
+    (m = v.getViewport(mt.VIEW_MAIN)) == null || m.scrollToViewportPos({
+      viewportScrollX: Number.POSITIVE_INFINITY
+    }), this._textSelectionManagerService.replaceTextRanges([
+      {
+        startOffset: p,
+        endOffset: p
+      }
+    ]), (_ = this._renderManagerService.getRenderById(l)) == null || _.scene.resetCursor();
+  }
+  _resetBodyStyle(e, t = !1) {
+    e.dataStream = In, 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 = [
+      {
+        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);
+  }
+  /**
+   * Should activate the editor when the user inputs text.
+   * @param d DisposableCollection
+   */
+  _initialKeyboardListener(e) {
+  }
+  _showEditorByKeyboard(e) {
+  }
+  _commandExecutedListener(e) {
+    const t = [we.id], n = [Kn.id];
+    e.add(this._commandService.onCommandExecuted((r) => {
+      this._editorService.getFocusId() === he && (t.includes(r.id) && this._moveCursorCmdHandler(r), n.includes(r.id) && this._editorBridgeService.isVisible() && this._editingChangedHandler());
+    }));
+  }
+  _moveCursorCmdHandler(e) {
+    const t = e.params, { keycode: n, isShift: r } = t;
+    n != null && this._cursorChange === Z.CursorChange ? this._moveInEditor(n, r) : this._editorBridgeService.changeVisible(t);
+  }
+  _editingChangedHandler() {
+    const e = this._editorBridgeService.getEditorRect();
+    if (!e)
+      return;
+    const t = e.richTextObj;
+    t.refreshDocumentByDocData(), t.resizeToContentSize();
+    const { unitId: n } = this._renderContext;
+    this._handleEditorVisible({ visible: !0, eventType: 3, unitId: n });
+  }
+  _getEditorObject() {
+    return Gi(this._editorBridgeService.getCurrentEditorId(), this._renderManagerService);
+  }
+  async _handleEditorInvisible(e) {
+    const { keycode: t } = e;
+    if (this._cursorChange = Z.InitialState, this._exitInput(e), this._editorBridgeService.getEditRectState() == null)
+      return;
+    if (this._editorBridgeService.getEditorDirty() === !1) {
+      this._moveCursor(t);
+      return;
+    }
+    this._moveCursor(t);
+  }
+  _exitInput(e) {
+    this._contextService.setContextValue(xe, !1), this._cellEditorManagerService.setState({
+      show: e.visible
+    });
+    const t = this._editorBridgeService.getCurrentEditorId();
+    t != null && this._undoRedoService.clearUndoRedo(t);
+  }
+  _moveCursor(e) {
+    if (e != null)
+      switch (L.LEFT, e) {
+        case M.ENTER:
+          L.DOWN;
+          break;
+        case M.TAB:
+          L.RIGHT;
+          break;
+        case M.ARROW_DOWN:
+          L.DOWN;
+          break;
+        case M.ARROW_UP:
+          L.UP;
+          break;
+        case M.ARROW_LEFT:
+          L.LEFT;
+          break;
+        case M.ARROW_RIGHT:
+          L.RIGHT;
+          break;
+      }
+  }
+  /**
+   * 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)
+      return;
+    const { document: n } = t;
+    e.add(bt(n.onPointerDown$.subscribeEvent(() => {
+      this._cursorChange === Z.StartEditor && (this._cursorChange = Z.CursorChange);
+    })));
+  }
+  // TODO: @JOCS, is it necessary to move these commands MoveSelectionOperation\MoveCursorOperation to shortcut? and use multi-commands?
+  _moveInEditor(e, t) {
+    let n = L.LEFT;
+    e === M.ARROW_DOWN ? n = L.DOWN : e === M.ARROW_UP ? n = L.UP : e === M.ARROW_RIGHT && (n = L.RIGHT), t ? this._commandService.executeCommand(Xn.id, {
+      direction: n
+    }) : this._commandService.executeCommand(Yn.id, {
+      direction: n
+    });
+  }
+};
+ze = ki([
+  A(1, Nn),
+  A(2, _n),
+  A(3, Ce),
+  A(4, T),
+  A(5, Y),
+  A(6, Je),
+  A(7, Qe),
+  A(8, X(kn)),
+  A(9, B),
+  A(10, X(ee)),
+  A(11, Ye)
+], ze);
+function Gi(i, e) {
+  if (i == null)
+    return;
+  const t = e.getRenderById(i);
+  if (t == null)
+    return;
+  const { mainComponent: n, scene: r, engine: s, components: o } = t, a = n, c = o.get(Zn.BACKGROUND);
+  return {
+    document: a,
+    docBackground: c,
+    scene: r,
+    engine: s
+  };
+}
+var Xi = Object.getOwnPropertyDescriptor, Yi = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Xi(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, Le = (i, e) => (t, n) => e(t, n, i);
+let We = class extends pe {
+  constructor(e, t, n, r) {
+    super();
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    // private _cursorChange: CursorChange = CursorChange.InitialState;
+    /** If the corresponding unit is active and prepared for editing. */
+    // private _isUnitEditing = false;
+    I(this, "setSlideTextEditor$", new Ut());
+    I(this, "_curRichText", null);
+    I(this, "_d");
+    this._renderContext = e, this._instanceSrv = t, this._commandService = n, this._editorBridgeService = r, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(E.UNIVER_SLIDE).subscribe((s) => {
+      s && s.getUnitId() === this._renderContext.unitId ? this._d = this._init() : this._disposeCurrent();
+    }));
+  }
+  _init() {
+    const e = new Xe();
+    return this._initEventListener(e), e;
+  }
+  _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
+    };
+    this._editorBridgeService.setEditorRect(o);
+  }
+  _initEventListener(e) {
+    const t = (o) => {
+      const a = o.getTransformer();
+      a && (e.add(a.clearControl$.subscribe(() => {
+        this.setEditorVisible(!1), this.pickOtherObjects();
+      })), e.add(a.createControl$.subscribe(() => {
+        this.setEditorVisible(!1);
+      })), e.add(o.onDblclick$.subscribeEvent(() => {
+        a.clearControls();
+        const h = a.getSelectedObjectMap().values().next().value;
+        h && (h.objectType !== ge.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(o.sceneKey, h));
+      })), e.add(this._instanceSrv.focused$.subscribe((c) => {
+        this.endEditing();
+      })));
+    }, { mainComponent: n } = this._renderContext;
+    n.subSceneChanged$.subscribeEvent((o) => {
+      t(o);
+    });
+    const s = Array.from(n.getSubScenes().values());
+    for (let o = 0; o < s.length; o++) {
+      const a = s[o];
+      t(a);
+    }
+  }
+  pickOtherObjects() {
+    this.endEditing();
+  }
+  /**
+   * invoked when picking other object.
+   *
+   * save editing state to curr richText.
+   */
+  endEditing() {
+    var s;
+    if (!this._curRichText) return;
+    this.setEditorVisible(!1);
+    const e = this._curRichText;
+    if (!this._instanceSrv.getCurrentUnitForType(E.UNIVER_SLIDE)) return !1;
+    e.refreshDocumentByDocData(), e.resizeToContentSize(), this._editorBridgeService.endEditing$.next(e);
+    const n = {
+      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;
+    }
+    this._commandService.executeCommand(k.id, {
+      unitId: this._renderContext.unitId,
+      oKey: e == null ? void 0 : e.oKey,
+      props: {
+        richText: n
+      }
+    }), this._curRichText = null;
+  }
+  /**
+   * TODO calling twice ？？？？
+   * editingParam derives from RichText object.
+   *
+   * 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: J.PointerDown, unitId: t });
+  }
+};
+We = Yi([
+  Le(1, T),
+  Le(2, B),
+  Le(3, Je)
+], We);
+const Xt = {
+  id: "slide.operation.activate-slide",
+  type: V.OPERATION,
+  handler: (i, e) => {
+    var h, l;
+    const t = e.unitId, n = i.get(N), s = i.get(T).getUnit(t), o = (h = s == null ? void 0 : s.getActivePage()) == null ? void 0 : h.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;
+  }
+}, Yt = {
+  id: "slide.operation.append-slide",
+  type: V.OPERATION,
+  handler: (i, e) => {
+    const t = e.unitId;
+    return i.get(T).getUnit(t) ? (i.get(N).appendPage(t), !0) : !1;
+  }
+}, et = {
+  id: "slide.command.insert-float-image",
+  type: V.COMMAND,
+  handler: async (i, e) => {
+    var j;
+    const t = i.get(T), n = (j = t.getCurrentUnitForType(E.UNIVER_SLIDE)) == null ? void 0 : j.getUnitId();
+    if (!n) return !1;
+    const s = await i.get(Dn).openFile({
+      multiple: !0,
+      accept: Jn.map((O) => `.${O.replace("image/", "")}`).join(",")
+    });
+    if (s.length !== 1) return !1;
+    const a = await i.get(Qn).saveImage(s[0]);
+    if (!a) return !1;
+    const { imageId: c, imageSourceType: h, source: l, base64Cache: d } = a, { width: v, height: f, image: C } = await ei(d || ""), p = t.getUnit(n);
+    if (!p) return !1;
+    const m = p.getActivePage(), _ = Object.values(m.pageElements), b = _ != null && _.length ? Math.max(..._.map((O) => O.zIndex)) : 20, P = {
+      id: c,
+      zIndex: b + 1,
+      left: 0,
+      top: 0,
+      width: v,
+      height: f,
+      title: "",
+      description: "",
+      type: Ge.IMAGE,
+      image: {
+        imageProperties: {
+          contentUrl: d,
+          imageSourceType: h,
+          source: l,
+          base64Cache: d,
+          image: C
+        }
+      }
+    };
+    m.pageElements[c] = P, p.updatePage(m.id, m);
+    const w = i.get(N), D = w.createObjectToPage(P, m.id, n);
+    return D && w.setObjectActiveByPage(D, m.id, n), !0;
+  }
+}, tt = {
+  id: "slide.command.add-text",
+  type: V.COMMAND,
+  handler: async (i) => {
+    var r;
+    const e = i.get(B), n = (r = i.get(T).getFocusedUnit()) == null ? void 0 : r.getUnitId();
+    return await e.executeCommand(Zt.id, { unitId: n });
+  }
+}, Zt = {
+  id: "slide.operation.add-text",
+  type: V.OPERATION,
+  handler: async (i, e) => {
+    const t = e.unitId, n = It(6), r = 220, s = 40, o = 230, a = 142, c = (e == null ? void 0 : e.text) || "A New Text", l = i.get(T).getUnit(t);
+    if (!l) return !1;
+    const d = l.getActivePage(), v = Object.values(d.pageElements), f = v != null && v.length ? Math.max(...v.map((_) => _.zIndex)) : 21, C = {
+      id: n,
+      zIndex: f + 1,
+      left: o,
+      top: a,
+      width: r,
+      height: s,
+      title: "text",
+      description: "",
+      type: Ge.TEXT,
+      richText: {
+        text: c,
+        fs: 30,
+        cl: {
+          rgb: "rgb(51, 51, 51)"
+        },
+        bl: 1
+      }
+    };
+    d.pageElements[n] = C, l.updatePage(d.id, d);
+    const p = i.get(N), m = p.createObjectToPage(C, d.id, t);
+    return m && p.setObjectActiveByPage(m, d.id, t), !0;
+  }
+}, qt = {
+  id: "slide.operation.set-slide-page-thumb",
+  type: V.OPERATION,
+  handler: (i, e) => (i.get(N).createThumbs(e.unitId), !0)
+}, Zi = "univer-image-popup-menu", qi = "univer-image-popup-menu-item", Ji = "univer-image-popup-menu-item-title", Qi = "univer-btn-container", er = "univer-btn-container-expand", ue = {
+  imagePopupMenu: Zi,
+  imagePopupMenuItem: qi,
+  imagePopupMenuItemTitle: Ji,
+  btnContainer: Qi,
+  btnContainerExpand: er
+};
+function tr(i) {
+  var C, p;
+  const e = (p = (C = i.popup) == null ? void 0 : C.extraProps) == null ? void 0 : p.menuItems;
+  if (!e)
+    return null;
+  const t = x(B), n = x(ee), [r, s] = G(!1), [o, a] = G(!1), c = () => {
+    a(!0);
+  }, h = () => {
+    a(!1);
+  }, l = (m) => {
+    s(m);
+  }, d = (m) => {
+    t.executeCommand(m.commandId, m.commandParams), s(!1);
+  }, v = r || o, f = e.filter((m) => !m.disable);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      onMouseEnter: c,
+      onMouseLeave: h,
+      children: /* @__PURE__ */ u(
+        wt,
+        {
+          align: "start",
+          overlay: /* @__PURE__ */ u(
+            "ul",
+            {
+              className: y(ue.imagePopupMenu, `
+                          univer-box-border univer-p-2 univer-text-sm univer-theme
+                        `),
+              children: f.map((m) => /* @__PURE__ */ u(
+                "li",
+                {
+                  onClick: () => d(m),
+                  className: ue.imagePopupMenuItem,
+                  children: /* @__PURE__ */ u("span", { className: ue.imagePopupMenuItemTitle, children: n.t(m.label) })
+                },
+                m.index
+              ))
+            }
+          ),
+          open: r,
+          onOpenChange: l,
+          children: /* @__PURE__ */ R(
+            "div",
+            {
+              className: y(ue.btnContainer, {
+                [ue.btnContainerExpand]: r
+              }),
+              children: [
+                /* @__PURE__ */ u(
+                  Lt,
+                  {
+                    style: { color: "#35322B" },
+                    extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
+                  }
+                ),
+                v && /* @__PURE__ */ u(Ze, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const nr = "univer-slide-bar", ir = "univer-slide-bar-content", rr = "univer-slide-bar-content-header", sr = "univer-slide-bar-item", or = "univer-slide-bar-box", ar = "univer-slide-bar-item-active", ie = {
+  slideBar: nr,
+  slideBarContent: ir,
+  slideBarContentHeader: rr,
+  slideBarItem: sr,
+  slideBarBox: or,
+  slideBarItemActive: ar
+};
+function cr() {
+  var C, p;
+  const i = x(T), e = x(B), t = x(Y), n = x(ee), r = Dt(null), s = i.getCurrentUnitForType(E.UNIVER_SLIDE), o = s == null ? void 0 : s.getPages(), a = s == null ? void 0 : s.getPageOrder();
+  if (!o || !a)
+    return null;
+  const c = a.map((m) => o[m]), [h, l] = G((p = (C = s == null ? void 0 : s.getActivePage()) == null ? void 0 : C.id) != null ? p : null), d = zn(() => c.map(() => Nt.createRef()), [c]);
+  me(() => {
+    const m = s == null ? void 0 : s.activePage$.subscribe((_) => {
+      var P;
+      const b = (P = _ == null ? void 0 : _.id) != null ? P : null;
+      b && l(b);
+    });
+    return () => {
+      m == null || m.unsubscribe();
+    };
+  }, []), me(() => {
+    d.forEach((m, _) => {
+      var b;
+      if (m.current) {
+        const P = c[_];
+        (b = t.getRenderById(P.id)) == null || b.engine.setContainer(m.current);
+      }
+    }), d.length > 0 && e.syncExecuteCommand(qt.id, { unitId: s == null ? void 0 : s.getUnitId() });
+  }, [d, c, t, e, s]);
+  const v = dt((m) => {
+    e.syncExecuteCommand(Xt.id, { id: m, unitId: s == null ? void 0 : s.getUnitId() });
+  }, [e, s]), f = dt(() => {
+    e.syncExecuteCommand(Yt.id, { unitId: s == null ? void 0 : s.getUnitId() });
+  }, [e, s]);
+  return /* @__PURE__ */ u("aside", { className: ie.slideBar, ref: r, children: /* @__PURE__ */ u(Fn, { children: /* @__PURE__ */ R("div", { className: ie.slideBarContent, children: [
+    /* @__PURE__ */ u("header", { className: ie.slideBarContentHeader, children: /* @__PURE__ */ u("a", { onClick: f, children: n.t("slide.append") }) }),
+    c.map((m, _) => /* @__PURE__ */ R(
+      "div",
+      {
+        className: y(ie.slideBarItem, {
+          [ie.slideBarItemActive]: m.id === h
+        }),
+        onClick: () => v(m.id),
+        children: [
+          /* @__PURE__ */ u("span", { children: _ + 1 }),
+          /* @__PURE__ */ u("div", { ref: d[_], className: ie.slideBarBox })
+        ]
+      },
+      m.id
+    ))
+  ] }) }) });
+}
+const lr = "univer-slide-editor-container", dr = {
+  slideEditorContainer: lr
+}, Ne = -1e3, _t = {
+  width: 0,
+  height: 0,
+  top: Ne,
+  left: Ne
+}, ur = () => {
+  const [i, e] = G({
+    ..._t
+  }), t = x(Qe), n = x(Ye), r = x(Ce), s = Un(
+    () => r.subscribeContextValue$(at),
+    !1,
+    void 0,
+    [r, at]
+  );
+  return bn.UNSPECIFIED, me(() => {
+    t.state$.subscribe((o) => {
+      if (o == null)
+        return;
+      const {
+        startX: a = Ne,
+        startY: c = Ne,
+        endX: h = 0,
+        endY: l = 0,
+        show: d = !1
+      } = o;
+      if (!d)
+        e({
+          ..._t
+        });
+      else {
+        e({
+          width: h - a - se + 2,
+          height: l - c - se + 2,
+          left: a + se,
+          top: c + se
+        });
+        const v = n.getEditor(he);
+        if (v == null)
+          return;
+        const { left: f, top: C, width: p, height: m } = v.getBoundingClientRect();
+        t.setRect({ left: f, top: C, width: p, height: m });
+      }
+    });
+  }, []), me(() => {
+    s || t.setFocus(!0);
+  }, [s, i]), /* @__PURE__ */ u(
+    "div",
+    {
+      className: dr.slideEditorContainer,
+      style: {
+        left: i.left,
+        top: i.top,
+        width: i.width,
+        height: i.height
+      }
+    }
+  );
+}, Jt = "addition-and-subtraction-single", Qt = "slide.menu.image";
+function gr(i) {
+  return {
+    id: Qt,
+    type: _e.SUBITEMS,
+    icon: Jt,
+    tooltip: "slide.image.insert.title",
+    hidden$: fe(i, E.UNIVER_SLIDE)
+  };
+}
+function hr(i) {
+  return {
+    id: et.id,
+    title: "slide.image.insert.float",
+    type: _e.BUTTON,
+    hidden$: fe(i, E.UNIVER_SLIDE)
+  };
+}
+const en = "graph-single", tn = "slide.menu.shape";
+function mr(i) {
+  return {
+    id: tn,
+    type: _e.SUBITEMS,
+    icon: en,
+    tooltip: "slide.shape.insert.title",
+    hidden$: fe(i, E.UNIVER_SLIDE)
+    // disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+  };
+}
+function vr(i) {
+  return {
+    id: qe.id,
+    title: "slide.shape.insert.rectangle",
+    type: _e.BUTTON,
+    hidden$: fe(i, E.UNIVER_SLIDE)
+  };
+}
+const nn = "text-single";
+function pr(i) {
+  return {
+    id: tt.id,
+    type: _e.BUTTON,
+    icon: nn,
+    tooltip: "slide.text.insert.title",
+    hidden$: fe(i, E.UNIVER_SLIDE)
+  };
+}
+const Cr = {
+  [Vn.FORMAT]: {
+    [tt.id]: {
+      order: 0,
+      menuItemFactory: pr
+    },
+    [Qt]: {
+      order: 0,
+      menuItemFactory: gr,
+      [et.id]: {
+        order: 0,
+        menuItemFactory: hr
+      }
+    },
+    [tn]: {
+      order: 0,
+      menuItemFactory: mr,
+      [qe.id]: {
+        order: 0,
+        menuItemFactory: vr
+      }
+    }
+  }
+};
+function ke(i) {
+  return i.getContextValue(xt) && i.getContextValue(xe);
+}
+function fr(i) {
+  return i.getContextValue(Pn) && i.getContextValue(xt);
+}
+const rn = [
+  M.ARROW_DOWN,
+  M.ARROW_UP,
+  M.ARROW_LEFT,
+  M.ARROW_RIGHT
+];
+[M.ENTER, M.TAB, ...rn];
+function _r() {
+  const i = [];
+  for (const e of rn)
+    i.push({
+      id: we.id,
+      binding: e,
+      preconditions: (t) => ke(t),
+      staticParameters: {
+        visible: !1,
+        eventType: J.Keyboard,
+        keycode: e,
+        isShift: !1
+      }
+    }), i.push({
+      id: we.id,
+      binding: e | Bn.SHIFT,
+      preconditions: (t) => ke(t),
+      staticParameters: {
+        visible: !1,
+        eventType: J.Keyboard,
+        keycode: e,
+        isShift: !0
+      }
+    });
+  return i;
+}
+const Sr = {
+  id: qn.id,
+  preconditions: (i) => ke(i) || fr(i),
+  binding: M.BACKSPACE
+};
+var Ir = Object.getOwnPropertyDescriptor, br = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Ir(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, re = (i, e) => (t, n) => e(t, n, i);
+let De = class extends Ve {
+  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();
+  }
+  _initMenus() {
+    this._menuManagerService.mergeMenu(Cr);
+  }
+  _initCustomComponents() {
+    const i = this._componentManager;
+    this.disposeWithMe(i.register(Jt, jt)), this.disposeWithMe(i.register(nn, Wt)), this.disposeWithMe(i.register(en, $t)), this.disposeWithMe(i.register(Gt, tr)), this.disposeWithMe(i.register(Oe, Vi));
+  }
+  _initCommands() {
+    [
+      Yt,
+      Xt,
+      qt,
+      et,
+      Zt,
+      tt,
+      Kt,
+      qe,
+      He,
+      Vt,
+      k,
+      // commands for editor
+      we
+    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
+  }
+  _initUIComponents() {
+    this.disposeWithMe(
+      this._uiPartsService.registerComponent(ct.LEFT_SIDEBAR, () => lt(cr, this._injector))
+    ), this.disposeWithMe(
+      this._uiPartsService.registerComponent(ct.CONTENT, () => lt(ur, this._injector))
+    );
+  }
+  _initShortcuts() {
+    [
+      Sr,
+      ..._r()
+    ].forEach((i) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(i));
+    });
+  }
+};
+De = br([
+  re(0, X(Ke)),
+  re(1, jn),
+  re(2, X(Ln)),
+  re(3, An),
+  re(4, B),
+  re(5, $n)
+], De);
+var Pr = Object.getOwnPropertyDescriptor, Er = (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 = o(r) || r);
+  return r;
+}, Ae = (i, e) => (t, n) => e(t, n, i);
+let Ue = class extends pe {
+  // private _skeletonChangeMutations = new Set<string>();
+  constructor(i, e, t) {
+    super(), this._contextService = i, this._instanceSrv = e, this._renderManagerService = t, Promise.resolve().then(() => this._init());
+  }
+  _init() {
+    this._initSlideDataListener(), this._initContextListener();
+  }
+  _initSlideDataListener() {
+    this._instanceSrv.getTypeOfUnitAdded$(E.UNIVER_SLIDE).pipe(ut(this.dispose$)).subscribe((i) => {
+      this._createRenderer(i == null ? void 0 : i.getUnitId());
+    }), this._instanceSrv.getAllUnitsForType(E.UNIVER_SLIDE).forEach((i) => {
+      this._createRenderer(i.getUnitId());
+    }), this._instanceSrv.getTypeOfUnitDisposed$(E.UNIVER_SLIDE).pipe(ut(this.dispose$)).subscribe((i) => this._disposeRenderer(i));
+  }
+  _createRenderer(i) {
+    i == null || this._instanceSrv.getUnit(i, E.UNIVER_SLIDE) == null || this._renderManagerService.createRender(i);
+  }
+  _disposeRenderer(i) {
+    const e = i.getUnitId();
+    this._renderManagerService.removeRender(e);
+  }
+  _initContextListener() {
+  }
+};
+Ue = Er([
+  Ae(0, Ce),
+  Ae(1, T),
+  Ae(2, Y)
+], Ue);
+var Rr = Object.getOwnPropertyDescriptor, Or = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Rr(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(r) || r);
+  return r;
+}, Ee = (i, e) => (t, n) => e(t, n, i);
+const xr = "SLIDE_UI";
+var Re;
+let St = (Re = class extends En {
+  constructor(i = vt, e, t, n, r) {
+    super(), this._config = i, this._injector = e, this._renderManagerService = t, this._univerInstanceService = n, this._configService = r;
+    const { menu: s, ...o } = Rn(
+      {},
+      vt,
+      this._config
+    );
+    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig(oi, o);
+  }
+  onStarting() {
+    it([
+      [Ue],
+      [Je, { useClass: Fe }],
+      // used by SlideUIController --> EditorContainer
+      [Qe, { useClass: zi }],
+      [Te]
+    ], this._config.override).forEach((i) => this._injector.add(i));
+  }
+  onReady() {
+    [
+      // SlideRenderService will be init in ready stage, and then calling RenderManagerService@createRender --> init all deps in this rendering register block.
+      [ve]
+    ].forEach((i) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(E.UNIVER_SLIDE, i));
+    }), it([
+      [N],
+      // 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)
+      [De],
+      // editor service was create in renderManagerService
+      [ve],
+      [Me]
+    ], this._config.override).forEach((i) => {
+      this._injector.add(i);
+    }), this._injector.get(N), this._injector.get(Ue);
+  }
+  onRendered() {
+    [
+      // need slideEditorBridgeService
+      // need TextSelectionRenderService which init by EditorContainer
+      [We],
+      [ze]
+    ].forEach((i) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(E.UNIVER_SLIDE, i));
+    }), this._markSlideAsFocused(), this._injector.get(De);
+  }
+  onSteady() {
+    this._injector.get(Me);
+  }
+  _markSlideAsFocused() {
+    const i = this._univerInstanceService;
+    try {
+      const e = i.getCurrentUnitForType(E.UNIVER_SLIDE);
+      i.focusUnit(e.getUnitId());
+    } catch {
+    }
+  }
+}, I(Re, "pluginName", xr), I(Re, "type", E.UNIVER_SLIDE), Re);
+St = Or([
+  Ee(1, X(Ke)),
+  Ee(2, Y),
+  Ee(3, T),
+  Ee(4, On)
+], St);
+export {
+  Xt as ActivateSlidePageOperation,
+  Yt as AppendSlideOperation,
+  N as CanvasView,
+  Vt as DeleteSlideElementOperation,
+  Je as ISlideEditorBridgeService,
+  et as InsertSlideFloatImageCommand,
+  qe as InsertSlideShapeRectangleCommand,
+  Kt as InsertSlideShapeRectangleOperation,
+  tn as SHAPE_MENU_ID,
+  Qt as SLIDES_IMAGE_MENU_ID,
+  he as SLIDE_EDITOR_ID,
+  qt as SetSlidePageThumbOperation,
+  tt as SlideAddTextCommand,
+  Zt as SlideAddTextOperation,
+  Te as SlideCanvasPopMangerService,
+  ur as SlideEditorContainer,
+  cr as SlideSideBar,
+  De as SlidesUIController,
+  Cr as SlidesUIMenuSchema,
+  St as UniverSlidesUIPlugin,
+  k as UpdateSlideElementOperation
+};