microboard-temp 0.6.2 → 0.6.3

package/dist/esm/browser.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -56,13 +38,13 @@ var require_extend = __commonJS((exports, module) => {
   var toStr = Object.prototype.toString;
   var defineProperty = Object.defineProperty;
   var gOPD = Object.getOwnPropertyDescriptor;
-  var isArray = function isArray2(arr2) {
+  var isArray = function isArray(arr2) {
     if (typeof Array.isArray === "function") {
       return Array.isArray(arr2);
     }
     return toStr.call(arr2) === "[object Array]";
   };
-  var isPlainObject2 = function isPlainObject3(obj) {
+  var isPlainObject2 = function isPlainObject(obj) {
     if (!obj || toStr.call(obj) !== "[object Object]") {
       return false;
     }
@@ -75,7 +57,7 @@ var require_extend = __commonJS((exports, module) => {
     for (key in obj) {}
     return typeof key === "undefined" || hasOwn.call(obj, key);
   };
-  var setProperty = function setProperty2(target, options) {
+  var setProperty = function setProperty(target, options) {
     if (defineProperty && options.name === "__proto__") {
       defineProperty(target, options.name, {
         enumerable: true,
@@ -87,7 +69,7 @@ var require_extend = __commonJS((exports, module) => {
       target[options.name] = options.newValue;
     }
   };
-  var getProperty = function getProperty2(obj, name) {
+  var getProperty = function getProperty(obj, name) {
     if (name === "__proto__") {
       if (!hasOwn.call(obj, name)) {
         return;
@@ -792,7 +774,7 @@ function safeRequestAnimationFrame(callback) {
   if (typeof requestAnimationFrame === "function") {
     return requestAnimationFrame(callback);
   } else {
-    callback();
+    setTimeout(callback, 0);
   }
 }
 
@@ -1238,206 +1220,6 @@ class Mbr {
     }
   }
 }
-// src/Items/Mbr/updateRects.ts
-function updateRects(board, ref, mbr, verticalOffset, horizontalOffset, fit = "contextPanel") {
-  const { selection, camera } = board;
-  const panel = ref.current;
-  const selectionMbr = mbr ?? selection.getMbr();
-  const selectionItems = selection.items;
-  const richTextSelection = selectionItems.getSingle() instanceof RichText ? selectionItems.list()[0] : undefined;
-  if (panel && selectionMbr) {
-    if (fit === "contextPanel") {
-      const panelRect = getContextPanelRect(selectionMbr, camera, panel, !!richTextSelection, horizontalOffset, verticalOffset);
-      return panelRect;
-    }
-    if (fit === "linkToBtn") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitLinkToBtn(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "comment") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitComment(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "threadPanel") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitThreadPanel(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "boardMenu") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitBoardMenu(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "hyperLink") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitHyperLink(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), camera.window.getMbr(), verticalOffset);
-      return panelRect;
-    }
-  }
-  return null;
-}
-function getContextPanelRect(selectionMbr, camera, panel, toLeft, horizontalOffset, verticalOffset) {
-  const transformedMbr = selectionMbr.getTransformed(camera.getMatrix());
-  const windowMbr = camera.window.getMbr();
-  const panelRectFromDom = Mbr.fromDomRect(panel.getBoundingClientRect());
-  const panelRect = toLeft ? fitContextPanelToLeft(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset) : fitContextPanelToCenter(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset);
-  return panelRect;
-}
-function fitContextPanelToLeft(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  const topSpace = selectionMbr.top - view.top;
-  const hasEnoughTopSpace = topSpace >= panelHeight + verticalOffset;
-  if (hasEnoughTopSpace) {
-    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
-    if (newPanel.top < view.top) {
-      newPanel.top = view.top + verticalOffset;
-    }
-  } else {
-    const usePanelTop = panel.top > 1 && panel.top > selectionMbr.top + verticalOffset;
-    newPanel.top = usePanelTop ? panel.top : selectionMbr.bottom + verticalOffset;
-    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
-    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
-    if (isOverflowingBottom || isLargeOffsetForRichText) {
-      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
-    }
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  fitContextPanelInViewRect(newPanel, view, verticalOffset);
-  const itemMbr = selectionMbr.getMbr();
-  newPanel.left = itemMbr.left;
-  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
-  return newPanel;
-}
-function fitContextPanelToCenter(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  const topSpace = selectionMbr.top - view.top;
-  const bottomSpace = view.bottom - selectionMbr.bottom;
-  const shouldPlaceAbove = topSpace > bottomSpace - panelHeight;
-  if (shouldPlaceAbove) {
-    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
-    if (newPanel.top < view.top) {
-      newPanel.top = view.top + verticalOffset;
-    }
-  } else {
-    newPanel.top = selectionMbr.bottom + verticalOffset;
-    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
-    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
-    if (isOverflowingBottom || isLargeOffsetForRichText) {
-      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
-    }
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  fitContextPanelInViewRect(newPanel, view, verticalOffset);
-  const itemCenter = selectionMbr.getCenter();
-  newPanel.left = itemCenter.x - panelWidth / 2;
-  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
-  return newPanel;
-}
-function adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset) {
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.left < view.left + horizontalOffset) {
-    newPanel.left = view.left + horizontalOffset;
-  } else if (newPanel.right + horizontalOffset > view.right) {
-    newPanel.left = view.right - (panelWidth + horizontalOffset);
-  }
-  newPanel.right = newPanel.left + panelWidth;
-}
-function fitContextPanelInViewRect(panel, view, verticalOffset) {
-  const panelHeight = panel.getHeight();
-  if (panel.top <= view.top + verticalOffset) {
-    panel.top = view.top + 2 * verticalOffset;
-    panel.bottom = panel.top + panelHeight;
-  }
-  if (panel.bottom >= view.bottom - verticalOffset) {
-    panel.bottom = view.bottom - 2 * verticalOffset;
-    panel.top = panel.bottom - panelHeight;
-  }
-}
-function fitLinkToBtn(itemMbr, view, panel, verticalOffset = -2, horizontalOffset = -2) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = itemMbr.top - panelHeight - verticalOffset;
-  newPanel.top = newPanel.top + panelHeight;
-  newPanel.bottom = newPanel.top + panelHeight * 2;
-  const panelWidth = panel.getWidth();
-  newPanel.left = itemMbr.right - panelWidth + horizontalOffset;
-  return newPanel;
-}
-function fitHyperLink(linkMbr, panel, view, offset = 20) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = linkMbr.bottom;
-  newPanel.bottom = panelHeight + newPanel.top;
-  const panelWidth = panel.getWidth();
-  newPanel.left = linkMbr.left;
-  newPanel.right = newPanel.left + panelWidth;
-  return newPanel;
-}
-function fitComment(anchor, panel, verticalOffset = 0, horizontalOffset = 0) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top - panelHeight - verticalOffset;
-  newPanel.bottom = newPanel.top + panelHeight;
-  const panelWidth = panel.getWidth();
-  newPanel.left = anchor.left - panelWidth / 2 - horizontalOffset;
-  newPanel.right = newPanel.left + panelWidth;
-  return newPanel;
-}
-function fitBoardMenu(anchor, view, panel, verticalOffset = 20, horizontalOffset = 20) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top;
-  newPanel.bottom = newPanel.top + panelHeight;
-  if (newPanel.bottom > view.bottom - verticalOffset) {
-    newPanel.bottom = view.bottom - verticalOffset;
-    newPanel.top = newPanel.bottom - panelHeight;
-  }
-  newPanel.left = anchor.left;
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.right > view.right - horizontalOffset) {
-    newPanel.right = view.right - horizontalOffset;
-    newPanel.left = newPanel.right - panelWidth;
-  }
-  return newPanel;
-}
-function fitThreadPanel(anchor, view, panel, verticalOffset = 50, horizontalOffset = 50) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top - panelHeight / 2;
-  if (newPanel.top < view.top + verticalOffset) {
-    newPanel.top = view.top + verticalOffset;
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  if (newPanel.bottom > view.bottom - verticalOffset) {
-    newPanel.bottom = view.bottom - verticalOffset;
-    newPanel.top = newPanel.bottom - panelHeight;
-  }
-  newPanel.left = anchor.left;
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.right > view.right - horizontalOffset) {
-    newPanel.right = anchor.right;
-    newPanel.left = newPanel.right - panelWidth;
-  }
-  return newPanel;
-}
 // src/Items/Line/Line.ts
 function getLinesRelationType(lineA, lineB) {
   let denominator = (lineB.end.y - lineB.start.y) * (lineA.end.x - lineA.start.x) - (lineB.end.x - lineB.start.x) * (lineA.end.y - lineA.start.y);
@@ -3360,6 +3142,232 @@ class Arc {
     return new Arc(this.center.copy(), this.radiusX, this.radiusY, this.startAngle, this.endAngle, this.clockwise);
   }
 }
+// src/SessionStorage.ts
+var _sessionStorage;
+if (typeof window !== "undefined" && window.sessionStorage) {
+  _sessionStorage = window.sessionStorage;
+} else {
+
+  class NodeStoragePolyfill {
+    _store = {};
+    clear() {
+      this._store = {};
+    }
+    getItem(key) {
+      return Object.prototype.hasOwnProperty.call(this._store, key) ? this._store[key] : null;
+    }
+    key(index) {
+      const keys = Object.keys(this._store);
+      return keys[index] ?? null;
+    }
+    removeItem(key) {
+      delete this._store[key];
+    }
+    setItem(key, value) {
+      this._store[key] = value;
+    }
+    get length() {
+      return Object.keys(this._store).length;
+    }
+  }
+  _sessionStorage = new NodeStoragePolyfill;
+}
+
+class SessionStorage {
+  set(key, value) {
+    const boardId = this.getBoardId() || "";
+    _sessionStorage.setItem(boardId + "_" + key, JSON.stringify(value));
+  }
+  get(key) {
+    const boardId = this.getBoardId() || "";
+    const item = _sessionStorage.getItem(boardId + "_" + key);
+    if (!item || item === "undefined") {
+      return;
+    }
+    return JSON.parse(item);
+  }
+  remove(key) {
+    const boardId = this.getBoardId() || "";
+    _sessionStorage.removeItem(boardId + "_" + key);
+  }
+  setConnectorStrokeStyle(color) {
+    this.set(`connectorStrokeStyle`, color);
+  }
+  getConnectorStrokeStyle() {
+    return this.get("connectorStrokeStyle");
+  }
+  setConnectorLineWidth(width) {
+    this.set(`connectorLineWidth`, width);
+  }
+  getConnectorLineWidth() {
+    return this.get("connectorLineWidth");
+  }
+  setConnectorFillColor(color) {
+    this.set(`connectorFillColor`, color);
+  }
+  getConnectorFillColor() {
+    return this.get("connectorFillColor");
+  }
+  setConnectorPointer(type, edge) {
+    this.set(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`, type);
+  }
+  getConnectorPointer(edge) {
+    return this.get(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`);
+  }
+  setConnectorLineStyle(type) {
+    this.set("connectorLineStyle", type);
+  }
+  getConnectorLineStyle() {
+    return this.get("connectorLineStyle");
+  }
+  setShapeData(data) {
+    this.set("lastShapeData", data);
+  }
+  getShapeData() {
+    return this.get("lastShapeData");
+  }
+  setStickerData(data) {
+    this.set("lastSticker", data);
+  }
+  getStickerData() {
+    return this.get("lastSticker");
+  }
+  setShapeWidth(width) {
+    this.set("shapeWidth", width);
+  }
+  getShapeWidth() {
+    return this.get("shapeWidth");
+  }
+  setShapeHeight(height) {
+    this.set("shapeHeight", height);
+  }
+  getShapeHeight() {
+    return this.get("shapeHeight");
+  }
+  setImageDimensions(dimension) {
+    this.set("imageDimensions", dimension);
+  }
+  getImageDimensions() {
+    return this.get("imageDimensions");
+  }
+  setFontSize(itemType, size) {
+    this.set(`fontSize_${itemType}`, size);
+  }
+  getFontSize(itemType) {
+    return this.get(`fontSize_${itemType}`);
+  }
+  setFontStyles(itemType, styles) {
+    this.set(`fontStyles_${itemType}`, styles);
+  }
+  getFontStyles(itemType) {
+    return this.get(`fontStyles_${itemType}`);
+  }
+  setFontColor(itemType, color) {
+    this.set(`fontColor_${itemType}`, color);
+  }
+  getFontColor(itemType) {
+    return this.get(`fontColor_${itemType}`);
+  }
+  setFontHighlight(itemType, highlightColor) {
+    this.set(`fontHighlightColor_${itemType}`, highlightColor);
+  }
+  getFontHighlight(itemType) {
+    return this.get(`fontHighlightColor_${itemType}`);
+  }
+  setHorizontalAlignment(itemType, horizontalAlignment) {
+    this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
+  }
+  getHorizontalAlignment(itemType) {
+    return this.get(`fontHorizontalAlignment_${itemType}`);
+  }
+  setVerticalAlignment(itemType, verticalAlignment) {
+    this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
+  }
+  getVerticalAlignment(itemType) {
+    return this.get(`fontVerticalAlignment_${itemType}`);
+  }
+  setLastAIRequest(request) {
+    _sessionStorage.setItem("lastAIRequest", request);
+  }
+  getLastAIRequest() {
+    return _sessionStorage.getItem("lastAIRequest");
+  }
+  removeLastAIRequest() {
+    _sessionStorage.removeItem("lastAIRequest");
+  }
+  clear() {
+    _sessionStorage.clear();
+  }
+  getBoardId() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    return window.location.href.split("/").pop()?.split("?")[0];
+  }
+}
+var tempStorage = new SessionStorage;
+
+// src/HTMLRender/HTMLRender.ts
+function getTranslationFromHTML(el) {
+  const transform = el.style.transform;
+  const translateMatch = transform.match(/translate\(([^)]+)\)/);
+  const [translateX, translateY] = translateMatch ? translateMatch[1].split(",").map((value) => parseFloat(value)) : [0, 0];
+  return [translateX, translateY];
+}
+function getScaleFromHTML(el) {
+  const transform = el.style.transform;
+  const scaleMatch = transform.match(/scale\(([^)]+)\)/);
+  const [scaleX, scaleY] = scaleMatch ? scaleMatch[1].split(",").map((value) => parseFloat(value)) : [1, 1];
+  return [scaleX, scaleY];
+}
+function translateElementBy(el, x, y) {
+  const [exX, exY] = getTranslationFromHTML(el);
+  const [newX, newY] = [exX + x, exY + y];
+  const [scaleX, scaleY] = getScaleFromHTML(el);
+  el.style.transform = `translate(${newX}px, ${newY}px) scale(${scaleX}, ${scaleY})`;
+  return el;
+}
+function scaleElementBy(el, scaleX, scaleY) {
+  const [currentScaleX, currentScaleY] = getScaleFromHTML(el);
+  const [newScaleX, newScaleY] = [
+    currentScaleX * scaleX,
+    currentScaleY * scaleY
+  ];
+  const [translateX, translateY] = getTranslationFromHTML(el);
+  el.style.transform = `translate(${translateX}px, ${translateY}px) scale(${newScaleX}, ${newScaleY})`;
+  return el;
+}
+function resetElementScale(el) {
+  const [x, y] = getTranslationFromHTML(el);
+  el.style.transform = `translate(${x}px, ${y}px) scale(1, 1)`;
+  return el;
+}
+function positionRelatively(toPosition, positionBy, padding = 0) {
+  const [translateX, translateY] = getTranslationFromHTML(toPosition);
+  const [frameX, frameY] = getTranslationFromHTML(positionBy);
+  const [dx, dy] = [translateX - frameX, translateY - frameY];
+  const verticalAlignment = toPosition.getAttribute("data-vertical-alignment");
+  const horizontalAlignment = toPosition.getAttribute("data-vertical-alignment");
+  let paddingX = padding;
+  let paddingY = padding;
+  if (verticalAlignment && verticalAlignment === "bottom") {
+    paddingY = -padding;
+  }
+  if (horizontalAlignment && horizontalAlignment === "right") {
+    paddingX = -padding;
+  }
+  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
+  toPosition.style.transform = `translate(${dx + paddingX}px, ${dy + paddingY}px) scale(${scaleX}, ${scaleY})`;
+  return toPosition;
+}
+function positionAbsolutely(toPosition, positionBy) {
+  const [translateX, translateY] = getTranslationFromHTML(toPosition);
+  const [frameX, frameY] = getTranslationFromHTML(positionBy);
+  const [dx, dy] = [translateX + frameX, translateY + frameY];
+  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
+  toPosition.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
+  return toPosition;
+}
 // src/api/BrowserDocumentFactory.ts
 class BrowserDocumentFactory {
   createElement(tagName) {
@@ -3538,6 +3546,152 @@ class MockPath2D {
   }
 }
 
+// src/Items/Transformation/Matrix.ts
+class Matrix2 {
+  translateX;
+  translateY;
+  scaleX;
+  scaleY;
+  shearX;
+  shearY;
+  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, shearX = 0, shearY = 0) {
+    this.translateX = translateX;
+    this.translateY = translateY;
+    this.scaleX = scaleX;
+    this.scaleY = scaleY;
+    this.shearX = shearX;
+    this.shearY = shearY;
+    this.translateX = toFiniteNumber(translateX);
+    this.translateY = toFiniteNumber(translateY);
+    this.scaleX = toFiniteNumber(scaleX, 1);
+    this.scaleY = toFiniteNumber(scaleY, 1);
+    this.shearX = toFiniteNumber(shearX);
+    this.shearY = toFiniteNumber(shearY);
+  }
+  translate(x, y) {
+    this.translateX += x;
+    this.translateY += y;
+  }
+  scale(x, y) {
+    this.scaleX = this.scaleX * x;
+    this.scaleY = this.scaleY * y;
+  }
+  multiplyByMatrix(matrix) {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this;
+    this.translateX = scaleX * matrix.translateX + shearX * matrix.translateY + translateX;
+    this.translateY = shearY * matrix.translateX + scaleY * matrix.translateY + translateY;
+    this.scaleX = scaleX * matrix.scaleX + shearX * matrix.shearY;
+    this.scaleY = shearY * matrix.shearX + scaleY * matrix.scaleY;
+    this.shearX = scaleX * matrix.shearX + shearX * matrix.scaleY;
+    this.shearY = shearY * matrix.scaleX + scaleY * matrix.shearY;
+    return this;
+  }
+  multiplyByMatrixies(matrixies) {
+    for (const matrix of matrixies) {
+      this.multiplyByMatrix(matrix);
+    }
+    return this;
+  }
+  multiply(value) {
+    if (Array.isArray(value)) {
+      this.multiplyByMatrixies(value);
+    } else {
+      this.multiplyByMatrix(value);
+    }
+    return this;
+  }
+  copy() {
+    return new Matrix2(this.translateX, this.translateY, this.scaleX, this.scaleY, this.shearX, this.shearY);
+  }
+  invert() {
+    const { scaleX, shearY, shearX, scaleY, translateX, translateY } = this;
+    const denom = scaleX * scaleY - shearX * shearY;
+    this.scaleX = scaleY / denom;
+    this.shearY = shearY / -denom;
+    this.shearX = shearX / -denom;
+    this.scaleY = scaleX / denom;
+    this.translateX = (scaleY * translateX - shearX * translateY) / -denom;
+    this.translateY = (shearY * translateX - scaleX * translateY) / denom;
+  }
+  getInverse() {
+    const inverse = this.copy();
+    inverse.invert();
+    return inverse;
+  }
+  rotateByRadian(radian) {
+    const cosAngle = Math.cos(radian);
+    const sinAngle = Math.sin(radian);
+    const rotationMatrix = new Matrix2(0, 0, cosAngle, cosAngle, -sinAngle, sinAngle);
+    return this.multiply(rotationMatrix);
+  }
+  rotateBy(degree) {
+    const radian = degree * Math.PI / 180;
+    this.rotateByRadian(radian);
+  }
+  rotateByObjectCenter(degree, size, scale) {
+    const angle = degree * (Math.PI / 180);
+    const width = size.width * scale.x;
+    const height = size.height * scale.y;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const x = centerX - (centerX * Math.cos(angle) - centerY * Math.sin(angle));
+    const y = centerY - (centerX * Math.sin(angle) + centerY * Math.cos(angle));
+    this.rotateBy(degree);
+    this.translate(x, y);
+  }
+  rotateByRelativeTo(degree, x, y) {
+    this.translateX += x;
+    this.translateY += y;
+    this.rotateBy(degree);
+    this.translateX -= x;
+    this.translateY -= y;
+  }
+  rotateByRadianRelativeTo(radian, x, y) {
+    this.translateX += x;
+    this.translateY += y;
+    this.rotateByRadian(radian);
+    this.translateX -= x;
+    this.translateY -= y;
+  }
+  apply(point) {
+    const { x, y } = point;
+    point.x = this.scaleX * x + this.shearX * y + this.translateX;
+    point.y = this.shearY * x + this.scaleY * y + this.translateY;
+  }
+  applyToContext(ctx) {
+    ctx.transform(this.scaleX, this.shearY, this.shearX, this.scaleY, this.translateX, this.translateY);
+  }
+  getAffineMatrix() {
+    return {
+      a: this.scaleX,
+      b: this.shearY,
+      c: this.shearX,
+      d: this.scaleY,
+      e: this.translateX,
+      f: this.translateY
+    };
+  }
+  getCssString() {
+    return `matrix(${this.scaleX},${this.shearY},${this.shearX},${this.scaleY},${this.translateX},${this.translateY})`;
+  }
+  identity() {
+    return new Matrix2;
+  }
+  mirrorOrigin() {
+    return new Matrix2(0, 0, -1, -1);
+  }
+  mirrorX() {
+    return new Matrix2(0, 0, 1, -1);
+  }
+  mirrorY() {
+    return new Matrix2(0, 0, -1, 1);
+  }
+  compare(matrix) {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = matrix;
+    return this.translateX === translateX && this.translateY === translateY && this.scaleX === scaleX && this.scaleY === scaleY && this.shearX === shearX && this.shearY === shearY;
+  }
+}
+
 // src/Subject.ts
 class Subject {
   observers = [];
@@ -6478,7 +6632,7 @@ var Browser = /* @__PURE__ */ function() {
   }
   _createClass(Browser2, [{
     key: "init",
-    value: function init2(services) {
+    value: function init(services) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var i18nOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       this.services = services || {
@@ -6533,7 +6687,7 @@ var Browser = /* @__PURE__ */ function() {
     }
   }, {
     key: "cacheUserLanguage",
-    value: function cacheUserLanguage4(lng, caches) {
+    value: function cacheUserLanguage(lng, caches) {
       var _this2 = this;
       if (!caches)
         caches = this.options.caches;
@@ -6932,1044 +7086,237 @@ var conf = {
 };
 initDefaultI18N();
 
-// src/Items/Transformation/Matrix.ts
-class Matrix2 {
-  translateX;
-  translateY;
-  scaleX;
-  scaleY;
-  shearX;
-  shearY;
-  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, shearX = 0, shearY = 0) {
-    this.translateX = translateX;
-    this.translateY = translateY;
-    this.scaleX = scaleX;
-    this.scaleY = scaleY;
-    this.shearX = shearX;
-    this.shearY = shearY;
-    this.translateX = toFiniteNumber(translateX);
-    this.translateY = toFiniteNumber(translateY);
-    this.scaleX = toFiniteNumber(scaleX, 1);
-    this.scaleY = toFiniteNumber(scaleY, 1);
-    this.shearX = toFiniteNumber(shearX);
-    this.shearY = toFiniteNumber(shearY);
+// src/Items/Path/Path.ts
+var LinePatterns = {
+  solid: [],
+  dot: [1, 2],
+  dash: [10, 10],
+  longDash: [20, 5],
+  dotDash: [15, 3, 3, 3],
+  tripleDotDash: [20, 3, 3, 3, 3, 3, 3, 3],
+  looseDoubleDotDash: [12, 3, 3]
+};
+var LineStyles = [
+  "solid",
+  "dot",
+  "dash",
+  "longDash",
+  "dotDash",
+  "tripleDotDash",
+  "looseDoubleDotDash"
+];
+var scaledPatterns = {};
+function scalePatterns(scale) {
+  function scaleLinePattern(pattern) {
+    const scaledPattern = [];
+    for (const number of LinePatterns[pattern]) {
+      scaledPattern.push(number * scale);
+    }
+    return scaledPattern;
   }
-  translate(x, y) {
-    this.translateX += x;
-    this.translateY += y;
+  const slp = scaleLinePattern;
+  if (!scaledPatterns[scale]) {
+    scaledPatterns[scale] = {
+      solid: slp("solid"),
+      dot: slp("dot"),
+      dash: slp("dash"),
+      longDash: slp("longDash"),
+      dotDash: slp("dotDash"),
+      tripleDotDash: slp("tripleDotDash"),
+      looseDoubleDotDash: slp("looseDoubleDotDash")
+    };
   }
-  scale(x, y) {
-    this.scaleX = this.scaleX * x;
-    this.scaleY = this.scaleY * y;
+  return scaledPatterns[scale];
+}
+var borderWidths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+class Path {
+  segments;
+  isClosedValue;
+  backgroundColor;
+  borderColor;
+  borderStyle;
+  borderWidth;
+  backgroundOpacity;
+  borderOpacity;
+  shadowColor;
+  shadowBlur;
+  shadowOffsetX;
+  shadowOffsetY;
+  paddingTop;
+  paddingRight;
+  paddingBottom;
+  paddingLeft;
+  path2d;
+  x;
+  y;
+  width;
+  height;
+  maxDimension;
+  linePattern;
+  connectedItemType = "";
+  constructor(segments = [], isClosedValue = false, backgroundColor = "none", borderColor = "black", borderStyle = "solid", borderWidth = 1, backgroundOpacity = 1, borderOpacity = 1, shadowColor = "transparent", shadowBlur = 0, shadowOffsetX = 0, shadowOffsetY = 0, paddingTop = 0, paddingRight = 0, paddingBottom = 0, paddingLeft = 0) {
+    this.segments = segments;
+    this.isClosedValue = isClosedValue;
+    this.backgroundColor = backgroundColor;
+    this.borderColor = borderColor;
+    this.borderStyle = borderStyle;
+    this.borderWidth = borderWidth;
+    this.backgroundOpacity = backgroundOpacity;
+    this.borderOpacity = borderOpacity;
+    this.shadowColor = shadowColor;
+    this.shadowBlur = shadowBlur;
+    this.shadowOffsetX = shadowOffsetX;
+    this.shadowOffsetY = shadowOffsetY;
+    this.paddingTop = paddingTop;
+    this.paddingRight = paddingRight;
+    this.paddingBottom = paddingBottom;
+    this.paddingLeft = paddingLeft;
+    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
+    const mbr = this.getMbr();
+    this.x = mbr.left;
+    this.y = mbr.top;
+    this.width = this.getMbr().getWidth();
+    this.height = this.getMbr().getHeight();
+    this.maxDimension = Math.max(mbr.getWidth(), mbr.getHeight());
+    this.path2d = new conf.path2DFactory;
+    this.updateCache();
   }
-  multiplyByMatrix(matrix) {
-    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this;
-    this.translateX = scaleX * matrix.translateX + shearX * matrix.translateY + translateX;
-    this.translateY = shearY * matrix.translateX + scaleY * matrix.translateY + translateY;
-    this.scaleX = scaleX * matrix.scaleX + shearX * matrix.shearY;
-    this.scaleY = shearY * matrix.shearX + scaleY * matrix.scaleY;
-    this.shearX = scaleX * matrix.shearX + shearX * matrix.scaleY;
-    this.shearY = shearY * matrix.scaleX + scaleY * matrix.shearY;
-    return this;
+  getBackgroundColor() {
+    return this.backgroundColor;
   }
-  multiplyByMatrixies(matrixies) {
-    for (const matrix of matrixies) {
-      this.multiplyByMatrix(matrix);
-    }
-    return this;
+  getBorderColor() {
+    return this.borderColor;
   }
-  multiply(value) {
-    if (Array.isArray(value)) {
-      this.multiplyByMatrixies(value);
-    } else {
-      this.multiplyByMatrix(value);
-    }
-    return this;
+  getBorderStyle() {
+    return this.borderStyle;
   }
-  copy() {
-    return new Matrix2(this.translateX, this.translateY, this.scaleX, this.scaleY, this.shearX, this.shearY);
+  getBorderWidth() {
+    return this.borderWidth;
   }
-  invert() {
-    const { scaleX, shearY, shearX, scaleY, translateX, translateY } = this;
-    const denom = scaleX * scaleY - shearX * shearY;
-    this.scaleX = scaleY / denom;
-    this.shearY = shearY / -denom;
-    this.shearX = shearX / -denom;
-    this.scaleY = scaleX / denom;
-    this.translateX = (scaleY * translateX - shearX * translateY) / -denom;
-    this.translateY = (shearY * translateX - scaleX * translateY) / denom;
+  setBackgroundColor(color) {
+    this.backgroundColor = color;
   }
-  getInverse() {
-    const inverse = this.copy();
-    inverse.invert();
-    return inverse;
+  setBorderColor(color) {
+    this.borderColor = color;
   }
-  rotateByRadian(radian) {
-    const cosAngle = Math.cos(radian);
-    const sinAngle = Math.sin(radian);
-    const rotationMatrix = new Matrix2(0, 0, cosAngle, cosAngle, -sinAngle, sinAngle);
-    return this.multiply(rotationMatrix);
+  setBorderStyle(style) {
+    this.borderStyle = style;
+    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
   }
-  rotateBy(degree) {
-    const radian = degree * Math.PI / 180;
-    this.rotateByRadian(radian);
+  setBorderWidth(width) {
+    this.borderWidth = width;
+    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
   }
-  rotateByObjectCenter(degree, size, scale) {
-    const angle = degree * (Math.PI / 180);
-    const width = size.width * scale.x;
-    const height = size.height * scale.y;
-    const centerX = width / 2;
-    const centerY = height / 2;
-    const x = centerX - (centerX * Math.cos(angle) - centerY * Math.sin(angle));
-    const y = centerY - (centerX * Math.sin(angle) + centerY * Math.cos(angle));
-    this.rotateBy(degree);
-    this.translate(x, y);
+  getShadowColor() {
+    return this.shadowColor;
   }
-  rotateByRelativeTo(degree, x, y) {
-    this.translateX += x;
-    this.translateY += y;
-    this.rotateBy(degree);
-    this.translateX -= x;
-    this.translateY -= y;
+  setShadowColor(color) {
+    this.shadowColor = color;
   }
-  rotateByRadianRelativeTo(radian, x, y) {
-    this.translateX += x;
-    this.translateY += y;
-    this.rotateByRadian(radian);
-    this.translateX -= x;
-    this.translateY -= y;
+  getShadowBlur() {
+    return this.shadowBlur;
   }
-  apply(point) {
-    const { x, y } = point;
-    point.x = this.scaleX * x + this.shearX * y + this.translateX;
-    point.y = this.shearY * x + this.scaleY * y + this.translateY;
+  setShadowBlur(blur) {
+    this.shadowBlur = blur;
   }
-  applyToContext(ctx) {
-    ctx.transform(this.scaleX, this.shearY, this.shearX, this.scaleY, this.translateX, this.translateY);
+  getShadowOffsetX() {
+    return this.shadowOffsetX;
   }
-  getAffineMatrix() {
-    return {
-      a: this.scaleX,
-      b: this.shearY,
-      c: this.shearX,
-      d: this.scaleY,
-      e: this.translateX,
-      f: this.translateY
-    };
+  setShadowOffsetX(offsetX) {
+    this.shadowOffsetX = offsetX;
   }
-  getCssString() {
-    return `matrix(${this.scaleX},${this.shearY},${this.shearX},${this.scaleY},${this.translateX},${this.translateY})`;
+  getShadowOffsetY() {
+    return this.shadowOffsetY;
   }
-  identity() {
-    return new Matrix2;
+  setShadowOffsetY(offsetY) {
+    this.shadowOffsetY = offsetY;
   }
-  mirrorOrigin() {
-    return new Matrix2(0, 0, -1, -1);
+  getBackgroundOpacity() {
+    return this.backgroundOpacity;
   }
-  mirrorX() {
-    return new Matrix2(0, 0, 1, -1);
+  setBackgroundOpacity(opacity) {
+    this.backgroundOpacity = opacity;
   }
-  mirrorY() {
-    return new Matrix2(0, 0, -1, 1);
+  getBorderOpacity() {
+    return this.borderOpacity;
   }
-  compare(matrix) {
-    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = matrix;
-    return this.translateX === translateX && this.translateY === translateY && this.scaleX === scaleX && this.scaleY === scaleY && this.shearX === shearX && this.shearY === shearY;
+  getWidth() {
+    return this.width;
   }
-}
-// src/SubjectOperation.ts
-class SubjectOperation {
-  observers = [];
-  subscribe(observer) {
-    const index = this.observers.indexOf(observer);
-    if (index === -1) {
-      this.observers.push(observer);
+  getHeight() {
+    return this.height;
+  }
+  setBorderOpacity(opacity) {
+    this.borderOpacity = opacity;
+  }
+  updateCache() {
+    const { left, top, right, bottom } = this.getMbr();
+    this.x = left - this.paddingLeft;
+    this.y = top - this.paddingTop;
+    this.width = right - left + this.paddingLeft + this.paddingRight;
+    this.height = bottom - top + this.paddingTop + this.paddingBottom;
+    const path2d = new conf.path2DFactory;
+    if (this.segments.length === 0) {
+      return;
+    }
+    this.segments[0].moveToStart(path2d);
+    for (const segment of this.segments) {
+      segment.render(path2d);
+    }
+    if (this.isClosedValue) {
+      path2d.closePath();
     }
+    this.path2d = path2d;
   }
-  unsubscribe(observer) {
-    const index = this.observers.indexOf(observer);
-    if (index !== -1) {
-      this.observers.splice(index, 1);
+  getIntersectionPoints(segment) {
+    let intersections = [];
+    for (const item of this.segments) {
+      intersections = intersections.concat(item.getIntersectionPoints(segment));
     }
+    return intersections;
   }
-  publish(subject, op) {
-    for (const observer of this.observers) {
-      observer(subject, op);
+  getNearestEdgePointTo(point) {
+    return this.getNearestEdgeAndPointTo(point).point;
+  }
+  getNearestEdgeAndPointTo(point) {
+    const candidates = [];
+    for (let index = 0;index < this.segments.length; index++) {
+      const segment = this.segments[index];
+      const pointOnSegment = segment.getNearestEdgePointTo(point);
+      candidates.push({
+        index,
+        segment,
+        point: pointOnSegment,
+        distance: point.getDistance(pointOnSegment)
+      });
+    }
+    let nearest = candidates[0];
+    for (const candidate of candidates) {
+      if (candidate.distance < nearest.distance) {
+        nearest = candidate;
+      }
     }
+    return nearest;
   }
-}
-
-// src/Items/ItemsCommandUtils.ts
-function mapItemsByOperation(item, getCallback) {
-  const items = Array.isArray(item) ? item : [item];
-  return items.map((item2) => {
-    const operation = getCallback(item2);
-    return { item: item2, operation };
-  });
-}
-
-// src/Items/Transformation/TransformationCommand.ts
-class TransformationCommand {
-  transformation;
-  operation;
-  reverse;
-  constructor(transformation, operation) {
-    this.transformation = transformation;
-    this.operation = operation;
-    this.reverse = this.getReverse();
+  getDistanceToPoint(point) {
+    const nearest = this.getNearestEdgePointTo(point);
+    return point.getDistance(nearest);
   }
-  merge(op) {
-    this.operation = op;
-    this.reverse = this.getReverse();
-    return this;
+  isUnderPoint(point) {
+    return this.isEnclosedOrCrossedBy(new Mbr(point.x, point.y, point.x, point.y));
   }
-  apply() {
-    for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+  isPointOverEdges(point, tolerance = 5) {
+    for (const segment of this.segments) {
+      const distance = segment.getDistance(point);
+      if (distance <= tolerance) {
+        return true;
+      }
     }
+    return false;
   }
-  revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
-    });
-  }
-  getReverse() {
-    const op = this.operation;
-    switch (this.operation.method) {
-      case "applyMatrix": {
-        const op2 = this.operation;
-        return this.transformation.map((t3) => {
-          const itemOp = op2.items.find((i) => i.id === t3.getId());
-          if (!itemOp)
-            return { item: t3, operation: op2 };
-          return {
-            item: t3,
-            operation: {
-              class: "Transformation",
-              method: "applyMatrix",
-              items: [{
-                id: t3.getId(),
-                matrix: {
-                  translateX: -itemOp.matrix.translateX,
-                  translateY: -itemOp.matrix.translateY,
-                  scaleX: 1 / itemOp.matrix.scaleX,
-                  scaleY: 1 / itemOp.matrix.scaleY,
-                  shearX: 0,
-                  shearY: 0
-                }
-              }]
-            }
-          };
-        });
-      }
-      case "translateTo":
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...this.operation,
-            x: transformation.getTranslation().x,
-            y: transformation.getTranslation().y
-          };
-        });
-      case "translateBy": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...this.operation,
-            x: -op2.x,
-            y: -op2.y
-          };
-        });
-      }
-      case "scaleTo":
-      case "scaleToRelativeTo": {
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...op,
-            x: transformation.getScale().x,
-            y: transformation.getScale().y
-          };
-        });
-      }
-      case "scaleBy":
-      case "scaleByRelativeTo": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            x: 1 / op2.x,
-            y: 1 / op2.y
-          };
-        });
-      }
-      case "scaleByTranslateBy": {
-        const op2 = this.operation;
-        const scaleTransformation = mapItemsByOperation(this.transformation, () => {
-          const scaleX = 1 / op2.scale.x;
-          const scaleY = 1 / op2.scale.y;
-          const translateX = -op2.translate.x;
-          const translateY = -op2.translate.y;
-          return {
-            ...op2,
-            scale: {
-              x: scaleX,
-              y: scaleY
-            },
-            translate: {
-              x: translateX,
-              y: translateY
-            }
-          };
-        });
-        return scaleTransformation;
-      }
-      case "rotateTo":
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...this.operation,
-            degree: transformation.getRotation()
-          };
-        });
-      case "rotateBy": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...this.operation,
-            degree: -op2.degree
-          };
-        });
-      }
-      case "transformMany": {
-        const { operation, transformation } = this;
-        return transformation.map((currTrans) => {
-          const op2 = operation.items[currTrans.getId()];
-          const m = op2.method === "applyMatrix" ? op2.matrix : op2.method === "scaleByTranslateBy" ? { translateX: -op2.translate.x, translateY: -op2.translate.y, scaleX: 1 / op2.scale.x, scaleY: 1 / op2.scale.y, shearX: 0, shearY: 0 } : { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 };
-          return {
-            item: currTrans,
-            operation: {
-              class: "Transformation",
-              method: "applyMatrix",
-              items: [{
-                id: currTrans.getId(),
-                matrix: {
-                  translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
-                  translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
-                  scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
-                  scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
-                  shearX: 0,
-                  shearY: 0
-                }
-              }]
-            }
-          };
-        });
-      }
-      case "locked": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            item: [...op2.item],
-            method: "unlocked",
-            locked: false
-          };
-        });
-      }
-      case "unlocked": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            item: [...op2.item],
-            method: "locked",
-            locked: true
-          };
-        });
-      }
-      default:
-        return [
-          { item: this.transformation[0], operation: this.operation }
-        ];
-    }
-  }
-}
-
-// src/Items/Transformation/TransformationData.ts
-class DefaultTransformationData {
-  translateX;
-  translateY;
-  scaleX;
-  scaleY;
-  rotate;
-  isLocked;
-  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, rotate = 0, isLocked = false) {
-    this.translateX = translateX;
-    this.translateY = translateY;
-    this.scaleX = scaleX;
-    this.scaleY = scaleY;
-    this.rotate = rotate;
-    this.isLocked = isLocked;
-  }
-}
-
-// src/Items/Transformation/Transformation.ts
-var defaultData = new DefaultTransformationData;
-
-class Transformation {
-  id;
-  events;
-  subject = new SubjectOperation;
-  _matrix = new Matrix2;
-  previous = new Matrix2;
-  rotate = defaultData.rotate;
-  isLocked = false;
-  constructor(id = "", events) {
-    this.id = id;
-    this.events = events;
-  }
-  getMatrixData() {
-    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this._matrix;
-    return { translateX, translateY, scaleX, scaleY, shearX, shearY };
-  }
-  toMatrix() {
-    return this._matrix.copy();
-  }
-  applyToContext(ctx) {
-    this._matrix.applyToContext(ctx);
-  }
-  getTranslation() {
-    return { x: this._matrix.translateX, y: this._matrix.translateY };
-  }
-  getScale() {
-    return { x: this._matrix.scaleX, y: this._matrix.scaleY };
-  }
-  getRotation() {
-    return this.rotate;
-  }
-  setLocal(xOrData, y, scaleX, scaleY) {
-    this.previous = this._matrix.copy();
-    if (typeof xOrData === "object") {
-      if (xOrData.translateX !== undefined)
-        this._matrix.translateX = xOrData.translateX;
-      if (xOrData.translateY !== undefined)
-        this._matrix.translateY = xOrData.translateY;
-      if (xOrData.scaleX !== undefined)
-        this._matrix.scaleX = xOrData.scaleX;
-      if (xOrData.scaleY !== undefined)
-        this._matrix.scaleY = xOrData.scaleY;
-    } else {
-      this._matrix.translateX = xOrData;
-      this._matrix.translateY = y;
-      if (scaleX !== undefined)
-        this._matrix.scaleX = scaleX;
-      if (scaleY !== undefined)
-        this._matrix.scaleY = scaleY;
-    }
-    this.subject.publish(this, {
-      class: "Transformation",
-      method: "applyMatrix",
-      items: [{ id: this.id, matrix: this.getMatrixData() }]
-    });
-  }
-  serialize() {
-    return {
-      translateX: this._matrix.translateX,
-      translateY: this._matrix.translateY,
-      scaleX: this._matrix.scaleX,
-      scaleY: this._matrix.scaleY,
-      rotate: this.rotate,
-      isLocked: this.isLocked
-    };
-  }
-  deserialize(data) {
-    this.previous = this._matrix.copy();
-    if (data.translateX) {
-      this._matrix.translateX = data.translateX;
-    }
-    if (data.translateY) {
-      this._matrix.translateY = data.translateY;
-    }
-    if (data.scaleX) {
-      this._matrix.scaleX = data.scaleX;
-    }
-    if (data.scaleY) {
-      this._matrix.scaleY = data.scaleY;
-    }
-    if (data.isLocked) {
-      this.isLocked = data.isLocked;
-    }
-    if (data.rotate) {
-      this.rotate = data.rotate;
-    }
-    this.subject.publish(this, {
-      class: "Transformation",
-      method: "deserialize",
-      item: [this.id],
-      data
-    });
-    return this;
-  }
-  copy(id) {
-    const { translateX, translateY, scaleX, scaleY } = this._matrix;
-    const { rotate } = this;
-    return new Transformation(id || "", this.events).deserialize({
-      translateX,
-      translateY,
-      scaleX,
-      scaleY,
-      rotate,
-      isLocked: false
-    });
-  }
-  getInverse() {
-    const copy2 = this.copy();
-    copy2._matrix.invert();
-    return copy2;
-  }
-  getId() {
-    return this.id;
-  }
-  setId(id) {
-    this.id = id;
-  }
-  emit(operation) {
-    if (this.events) {
-      const command = new TransformationCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  emitMatrix(matrix, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "applyMatrix",
-      items: [{ id: this.id, matrix }],
-      timeStamp
-    });
-  }
-  translateTo(x, y, timeStamp) {
-    if (!this.id) {}
-    this.emitMatrix({
-      translateX: x - this._matrix.translateX,
-      translateY: y - this._matrix.translateY,
-      scaleX: 1,
-      scaleY: 1,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  translateBy(x, y, timeStamp) {
-    if (!this.id) {}
-    if (x === 0 && y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: x,
-      translateY: y,
-      scaleX: 1,
-      scaleY: 1,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleTo(x, y, timeStamp) {
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x / this._matrix.scaleX,
-      scaleY: y / this._matrix.scaleY,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleBy(x, y, timeStamp) {
-    if (x === 0 && y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x,
-      scaleY: y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleByTranslateBy(scale, translate, timeStamp) {
-    if (scale.x === 0 && scale.y === 0 && translate.x === 0 && translate.y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: translate.x,
-      translateY: translate.y,
-      scaleX: scale.x,
-      scaleY: scale.y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  rotateTo(degree, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "rotateTo",
-      item: [this.id],
-      degree,
-      timeStamp
-    });
-  }
-  rotateBy(degree, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "rotateBy",
-      item: [this.id],
-      degree,
-      timeStamp
-    });
-  }
-  scaleToRelativeTo(x, y, _point, timeStamp) {
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x / this._matrix.scaleX,
-      scaleY: y / this._matrix.scaleY,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleByRelativeTo(x, y, point, timeStamp) {
-    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this._matrix;
-    const newSx = sx0 * x;
-    const newSy = sy0 * y;
-    this.emitMatrix({
-      translateX: -point.x * newSx + point.x - tx0,
-      translateY: -point.y * newSy + point.y - ty0,
-      scaleX: x,
-      scaleY: y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  setIsLocked(isLocked, timestamp) {
-    if (isLocked) {
-      this.emit({
-        class: "Transformation",
-        method: "locked",
-        item: [this.id],
-        locked: true,
-        timestamp
-      });
-    } else {
-      this.emit({
-        class: "Transformation",
-        method: "unlocked",
-        item: [this.id],
-        locked: false,
-        timestamp
-      });
-    }
-  }
-  apply(op) {
-    this.previous = this._matrix.copy();
-    switch (op.method) {
-      case "applyMatrix": {
-        const itemOp = op.items.find((i) => i.id === this.id);
-        if (itemOp) {
-          this._matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
-          this._matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
-        }
-        break;
-      }
-      case "translateTo":
-        this.applyTranslateTo(op.x, op.y);
-        break;
-      case "translateBy":
-        this.applyTranslateBy(op.x, op.y);
-        break;
-      case "scaleTo":
-        this.applyScaleTo(op.x, op.y);
-        break;
-      case "scaleBy":
-        this.applyScaleBy(op.x, op.y);
-        break;
-      case "scaleToRelativeTo":
-        this.applyScaleToRelativeTo(op.x, op.y, op.point);
-        break;
-      case "scaleByRelativeTo":
-        this.applyScaleByRelativeTo(op.x, op.y, op.point);
-        break;
-      case "scaleByTranslateBy":
-        this.applyScaleByTranslateBy(op.scale, op.translate);
-        break;
-      case "rotateTo":
-        this.applyRotateTo(op.degree);
-        break;
-      case "rotateBy":
-        this.applyRotateBy(op.degree);
-        break;
-      case "transformMany":
-        this.applyTransformMany(op.items[this.id]);
-        break;
-      case "locked":
-        this.applyLocked(op.locked);
-        break;
-      case "unlocked":
-        this.applyUnlocked(op.locked);
-        break;
-      default:
-        return;
-    }
-    this.subject.publish(this, op);
-  }
-  applyTranslateTo(x, y) {
-    this._matrix.translateX = x;
-    this._matrix.translateY = y;
-  }
-  applyTranslateBy(x, y) {
-    this._matrix.translate(x, y);
-  }
-  applyScaleTo(x, y) {
-    this._matrix.scaleX = x;
-    this._matrix.scaleY = y;
-  }
-  applyScaleBy(x, y) {
-    this._matrix.scale(x, y);
-  }
-  applyScaleByTranslateBy(scale, translate) {
-    this._matrix.scale(scale.x, scale.y);
-    this._matrix.translate(translate.x, translate.y);
-  }
-  applyTransformMany(op) {
-    if (op.method === "applyMatrix") {
-      this._matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
-      this._matrix.translate(op.matrix.translateX, op.matrix.translateY);
-    } else if (op.method === "scaleByTranslateBy") {
-      this.applyScaleByTranslateBy(op.scale, op.translate);
-    } else if (op.method === "scaleBy") {
-      this.applyScaleBy(op.x, op.y);
-    } else if (op.method === "translateBy") {
-      this.applyTranslateBy(op.x, op.y);
-    } else if (op.method === "translateTo") {
-      this.applyTranslateTo(op.x, op.y);
-    }
-  }
-  applyScaleByRelativeTo(x, y, point) {
-    const scaleX = this._matrix.scaleX * x;
-    const scaleY = this._matrix.scaleY * y;
-    this._matrix.translateX = -point.x * scaleX + point.x;
-    this._matrix.translateY = -point.y * scaleY + point.y;
-    this._matrix.scaleX = scaleX;
-    this._matrix.scaleY = scaleY;
-  }
-  applyScaleToRelativeTo(x, y, point) {
-    this.applyTranslateBy(-point.x, -point.y);
-    this.applyScaleTo(x, y);
-    this.applyTranslateBy(point.x, point.y);
-  }
-  applyRotateTo(degree) {
-    if (degree > 0) {
-      while (degree > 360) {
-        degree -= 360;
-      }
-      if (degree === 360) {
-        degree = 0;
-      }
-    } else {
-      while (degree < -360) {
-        degree += 360;
-      }
-      if (degree === -360) {
-        degree = 0;
-      }
-    }
-    this.rotate = degree;
-  }
-  applyRotateBy(degree) {
-    this.applyRotateTo(this.rotate + degree);
-  }
-  applyLocked(locked) {
-    this.isLocked = locked;
-  }
-  applyUnlocked(locked) {
-    this.isLocked = locked;
-  }
-}
-// src/Items/DrawingContext.ts
-class DrawingContext {
-  camera;
-  ctx;
-  cursorCtx;
-  matrix;
-  isBorderInvisible = false;
-  shapeVisibilityTreshold = 3;
-  rectangleVisibilyTreshold = 2;
-  constructor(camera, ctx, cursorCtx, matrix = new Matrix2) {
-    this.camera = camera;
-    this.ctx = ctx;
-    this.cursorCtx = cursorCtx;
-    this.matrix = matrix;
-    this.setCamera(camera);
-  }
-  dpi() {
-    return conf.getDPI();
-  }
-  setCamera(camera) {
-    this.camera = camera;
-    this.matrix = camera.getMatrix();
-    const scale = this.matrix.scaleX;
-    this.isBorderInvisible = 4 * scale < 0.1;
-  }
-  clear() {
-    this.ctx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
-    this.ctx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
-    this.matrix.applyToContext(this.ctx);
-  }
-  clearCursor() {
-    if (!this.cursorCtx) {
-      return;
-    }
-    this.cursorCtx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
-    this.cursorCtx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
-    this.matrix.applyToContext(this.cursorCtx);
-  }
-  applyChanges() {
-    this.matrix.applyToContext(this.ctx);
-  }
-  getCameraScale() {
-    return this.camera.getScale();
-  }
-}
-// src/Items/Path/Path.ts
-var LinePatterns = {
-  solid: [],
-  dot: [1, 2],
-  dash: [10, 10],
-  longDash: [20, 5],
-  dotDash: [15, 3, 3, 3],
-  tripleDotDash: [20, 3, 3, 3, 3, 3, 3, 3],
-  looseDoubleDotDash: [12, 3, 3]
-};
-var LineStyles = [
-  "solid",
-  "dot",
-  "dash",
-  "longDash",
-  "dotDash",
-  "tripleDotDash",
-  "looseDoubleDotDash"
-];
-var scaledPatterns = {};
-function scalePatterns(scale) {
-  function scaleLinePattern(pattern) {
-    const scaledPattern = [];
-    for (const number of LinePatterns[pattern]) {
-      scaledPattern.push(number * scale);
-    }
-    return scaledPattern;
-  }
-  const slp = scaleLinePattern;
-  if (!scaledPatterns[scale]) {
-    scaledPatterns[scale] = {
-      solid: slp("solid"),
-      dot: slp("dot"),
-      dash: slp("dash"),
-      longDash: slp("longDash"),
-      dotDash: slp("dotDash"),
-      tripleDotDash: slp("tripleDotDash"),
-      looseDoubleDotDash: slp("looseDoubleDotDash")
-    };
-  }
-  return scaledPatterns[scale];
-}
-var borderWidths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-
-class Path {
-  segments;
-  isClosedValue;
-  backgroundColor;
-  borderColor;
-  borderStyle;
-  borderWidth;
-  backgroundOpacity;
-  borderOpacity;
-  shadowColor;
-  shadowBlur;
-  shadowOffsetX;
-  shadowOffsetY;
-  paddingTop;
-  paddingRight;
-  paddingBottom;
-  paddingLeft;
-  path2d;
-  x;
-  y;
-  width;
-  height;
-  maxDimension;
-  linePattern;
-  connectedItemType = "";
-  constructor(segments = [], isClosedValue = false, backgroundColor = "none", borderColor = "black", borderStyle = "solid", borderWidth = 1, backgroundOpacity = 1, borderOpacity = 1, shadowColor = "transparent", shadowBlur = 0, shadowOffsetX = 0, shadowOffsetY = 0, paddingTop = 0, paddingRight = 0, paddingBottom = 0, paddingLeft = 0) {
-    this.segments = segments;
-    this.isClosedValue = isClosedValue;
-    this.backgroundColor = backgroundColor;
-    this.borderColor = borderColor;
-    this.borderStyle = borderStyle;
-    this.borderWidth = borderWidth;
-    this.backgroundOpacity = backgroundOpacity;
-    this.borderOpacity = borderOpacity;
-    this.shadowColor = shadowColor;
-    this.shadowBlur = shadowBlur;
-    this.shadowOffsetX = shadowOffsetX;
-    this.shadowOffsetY = shadowOffsetY;
-    this.paddingTop = paddingTop;
-    this.paddingRight = paddingRight;
-    this.paddingBottom = paddingBottom;
-    this.paddingLeft = paddingLeft;
-    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
-    const mbr = this.getMbr();
-    this.x = mbr.left;
-    this.y = mbr.top;
-    this.width = this.getMbr().getWidth();
-    this.height = this.getMbr().getHeight();
-    this.maxDimension = Math.max(mbr.getWidth(), mbr.getHeight());
-    this.path2d = new conf.path2DFactory;
-    this.updateCache();
-  }
-  getBackgroundColor() {
-    return this.backgroundColor;
-  }
-  getBorderColor() {
-    return this.borderColor;
-  }
-  getBorderStyle() {
-    return this.borderStyle;
-  }
-  getBorderWidth() {
-    return this.borderWidth;
-  }
-  setBackgroundColor(color) {
-    this.backgroundColor = color;
-  }
-  setBorderColor(color) {
-    this.borderColor = color;
-  }
-  setBorderStyle(style) {
-    this.borderStyle = style;
-    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
-  }
-  setBorderWidth(width) {
-    this.borderWidth = width;
-    this.linePattern = scalePatterns(this.borderWidth)[this.borderStyle];
-  }
-  getShadowColor() {
-    return this.shadowColor;
-  }
-  setShadowColor(color) {
-    this.shadowColor = color;
-  }
-  getShadowBlur() {
-    return this.shadowBlur;
-  }
-  setShadowBlur(blur) {
-    this.shadowBlur = blur;
-  }
-  getShadowOffsetX() {
-    return this.shadowOffsetX;
-  }
-  setShadowOffsetX(offsetX) {
-    this.shadowOffsetX = offsetX;
-  }
-  getShadowOffsetY() {
-    return this.shadowOffsetY;
-  }
-  setShadowOffsetY(offsetY) {
-    this.shadowOffsetY = offsetY;
-  }
-  getBackgroundOpacity() {
-    return this.backgroundOpacity;
-  }
-  setBackgroundOpacity(opacity) {
-    this.backgroundOpacity = opacity;
-  }
-  getBorderOpacity() {
-    return this.borderOpacity;
-  }
-  getWidth() {
-    return this.width;
-  }
-  getHeight() {
-    return this.height;
-  }
-  setBorderOpacity(opacity) {
-    this.borderOpacity = opacity;
-  }
-  updateCache() {
-    const { left, top, right, bottom } = this.getMbr();
-    this.x = left - this.paddingLeft;
-    this.y = top - this.paddingTop;
-    this.width = right - left + this.paddingLeft + this.paddingRight;
-    this.height = bottom - top + this.paddingTop + this.paddingBottom;
-    const path2d = new conf.path2DFactory;
-    if (this.segments.length === 0) {
-      return;
-    }
-    this.segments[0].moveToStart(path2d);
-    for (const segment of this.segments) {
-      segment.render(path2d);
-    }
-    if (this.isClosedValue) {
-      path2d.closePath();
-    }
-    this.path2d = path2d;
-  }
-  getIntersectionPoints(segment) {
-    let intersections = [];
-    for (const item of this.segments) {
-      intersections = intersections.concat(item.getIntersectionPoints(segment));
-    }
-    return intersections;
-  }
-  getNearestEdgePointTo(point) {
-    return this.getNearestEdgeAndPointTo(point).point;
-  }
-  getNearestEdgeAndPointTo(point) {
-    const candidates = [];
-    for (let index = 0;index < this.segments.length; index++) {
-      const segment = this.segments[index];
-      const pointOnSegment = segment.getNearestEdgePointTo(point);
-      candidates.push({
-        index,
-        segment,
-        point: pointOnSegment,
-        distance: point.getDistance(pointOnSegment)
-      });
-    }
-    let nearest = candidates[0];
-    for (const candidate of candidates) {
-      if (candidate.distance < nearest.distance) {
-        nearest = candidate;
-      }
-    }
-    return nearest;
-  }
-  getDistanceToPoint(point) {
-    const nearest = this.getNearestEdgePointTo(point);
-    return point.getDistance(nearest);
-  }
-  isUnderPoint(point) {
-    return this.isEnclosedOrCrossedBy(new Mbr(point.x, point.y, point.x, point.y));
-  }
-  isPointOverEdges(point, tolerance = 5) {
-    for (const segment of this.segments) {
-      const distance = segment.getDistance(point);
-      if (distance <= tolerance) {
-        return true;
-      }
-    }
-    return false;
-  }
-  isNearPoint(point, distance) {
-    return distance > this.getDistanceToPoint(point);
+  isNearPoint(point, distance) {
+    return distance > this.getDistanceToPoint(point);
   }
   getMbr() {
     if (this.segments.length === 0) {
@@ -8384,382 +7731,18 @@ class Paths {
     return !isAllPathsOpened;
   }
 }
-// src/Items/Connector/ConnectorCommand.ts
-class ConnectorCommand {
-  connector;
-  operation;
-  reverse;
-  constructor(connector, operation) {
-    this.connector = connector;
-    this.operation = operation;
-    this.reverse = this.getReverse();
-  }
-  merge(op) {
-    this.operation = op;
-    return this;
-  }
-  apply() {
-    for (const connector of this.connector) {
-      connector.apply(this.operation);
-    }
-  }
-  revert() {
-    for (const { item, operation } of this.reverse) {
-      item.apply(operation);
-    }
-  }
-  getReverse() {
-    const reverse = [];
-    switch (this.operation.method) {
-      case "setStartPoint":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              startPointData: connector.getStartPoint().serialize()
-            }
-          });
-        }
-        break;
-      case "setEndPoint":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              endPointData: connector.getEndPoint().serialize()
-            }
-          });
-        }
-        break;
-      case "setMiddlePoint":
-        for (const connector of this.connector) {
-          const middlePoint = connector.getMiddlePoint();
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              middlePointData: middlePoint ? middlePoint.serialize() : null
-            }
-          });
-        }
-        break;
-      case "setStartPointerStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              startPointerStyle: connector.getStartPointerStyle()
-            }
-          });
-        }
-        break;
-      case "setEndPointerStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              endPointerStyle: connector.getEndPointerStyle()
-            }
-          });
-        }
-        break;
-      case "setLineStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineStyle: connector.getLineStyle()
-            }
-          });
-        }
-        break;
-      case "setBorderStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              borderStyle: connector.getBorderStyle()
-            }
-          });
-        }
-        break;
-      case "setLineWidth":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineWidth: connector.getLineWidth()
-            }
-          });
-        }
-        break;
-      case "setLineColor":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineColor: connector.getLineColor()
-            }
-          });
-        }
-        break;
-      case "switchPointers":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: this.operation
-          });
-        }
-        break;
-    }
-    return reverse;
-  }
-}
-
-// src/SessionStorage.ts
-var _sessionStorage;
-if (typeof window !== "undefined" && window.sessionStorage) {
-  _sessionStorage = window.sessionStorage;
-} else {
-
-  class NodeStoragePolyfill {
-    _store = {};
-    clear() {
-      this._store = {};
-    }
-    getItem(key) {
-      return Object.prototype.hasOwnProperty.call(this._store, key) ? this._store[key] : null;
-    }
-    key(index) {
-      const keys = Object.keys(this._store);
-      return keys[index] ?? null;
-    }
-    removeItem(key) {
-      delete this._store[key];
-    }
-    setItem(key, value) {
-      this._store[key] = value;
-    }
-    get length() {
-      return Object.keys(this._store).length;
-    }
-  }
-  _sessionStorage = new NodeStoragePolyfill;
-}
-
-class SessionStorage {
-  set(key, value) {
-    const boardId = this.getBoardId() || "";
-    _sessionStorage.setItem(boardId + "_" + key, JSON.stringify(value));
-  }
-  get(key) {
-    const boardId = this.getBoardId() || "";
-    const item = _sessionStorage.getItem(boardId + "_" + key);
-    if (!item || item === "undefined") {
-      return;
-    }
-    return JSON.parse(item);
-  }
-  remove(key) {
-    const boardId = this.getBoardId() || "";
-    _sessionStorage.removeItem(boardId + "_" + key);
-  }
-  setConnectorStrokeStyle(color) {
-    this.set(`connectorStrokeStyle`, color);
-  }
-  getConnectorStrokeStyle() {
-    return this.get("connectorStrokeStyle");
-  }
-  setConnectorLineWidth(width) {
-    this.set(`connectorLineWidth`, width);
-  }
-  getConnectorLineWidth() {
-    return this.get("connectorLineWidth");
-  }
-  setConnectorFillColor(color) {
-    this.set(`connectorFillColor`, color);
-  }
-  getConnectorFillColor() {
-    return this.get("connectorFillColor");
-  }
-  setConnectorPointer(type, edge) {
-    this.set(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`, type);
-  }
-  getConnectorPointer(edge) {
-    return this.get(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`);
-  }
-  setConnectorLineStyle(type) {
-    this.set("connectorLineStyle", type);
-  }
-  getConnectorLineStyle() {
-    return this.get("connectorLineStyle");
-  }
-  setShapeData(data) {
-    this.set("lastShapeData", data);
-  }
-  getShapeData() {
-    return this.get("lastShapeData");
-  }
-  setStickerData(data) {
-    this.set("lastSticker", data);
-  }
-  getStickerData() {
-    return this.get("lastSticker");
-  }
-  setShapeWidth(width) {
-    this.set("shapeWidth", width);
-  }
-  getShapeWidth() {
-    return this.get("shapeWidth");
-  }
-  setShapeHeight(height) {
-    this.set("shapeHeight", height);
-  }
-  getShapeHeight() {
-    return this.get("shapeHeight");
-  }
-  setImageDimensions(dimension) {
-    this.set("imageDimensions", dimension);
-  }
-  getImageDimensions() {
-    return this.get("imageDimensions");
-  }
-  setFontSize(itemType, size) {
-    this.set(`fontSize_${itemType}`, size);
-  }
-  getFontSize(itemType) {
-    return this.get(`fontSize_${itemType}`);
-  }
-  setFontStyles(itemType, styles) {
-    this.set(`fontStyles_${itemType}`, styles);
-  }
-  getFontStyles(itemType) {
-    return this.get(`fontStyles_${itemType}`);
-  }
-  setFontColor(itemType, color) {
-    this.set(`fontColor_${itemType}`, color);
-  }
-  getFontColor(itemType) {
-    return this.get(`fontColor_${itemType}`);
-  }
-  setFontHighlight(itemType, highlightColor) {
-    this.set(`fontHighlightColor_${itemType}`, highlightColor);
-  }
-  getFontHighlight(itemType) {
-    return this.get(`fontHighlightColor_${itemType}`);
-  }
-  setHorizontalAlignment(itemType, horizontalAlignment) {
-    this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
-  }
-  getHorizontalAlignment(itemType) {
-    return this.get(`fontHorizontalAlignment_${itemType}`);
-  }
-  setVerticalAlignment(itemType, verticalAlignment) {
-    this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
-  }
-  getVerticalAlignment(itemType) {
-    return this.get(`fontVerticalAlignment_${itemType}`);
-  }
-  setLastAIRequest(request) {
-    _sessionStorage.setItem("lastAIRequest", request);
-  }
-  getLastAIRequest() {
-    return _sessionStorage.getItem("lastAIRequest");
-  }
-  removeLastAIRequest() {
-    _sessionStorage.removeItem("lastAIRequest");
-  }
-  clear() {
-    _sessionStorage.clear();
-  }
-  getBoardId() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    return window.location.href.split("/").pop()?.split("?")[0];
-  }
-}
-var tempStorage = new SessionStorage;
-
-// src/HTMLRender/HTMLRender.ts
-function getTranslationFromHTML(el) {
-  const transform = el.style.transform;
-  const translateMatch = transform.match(/translate\(([^)]+)\)/);
-  const [translateX, translateY] = translateMatch ? translateMatch[1].split(",").map((value) => parseFloat(value)) : [0, 0];
-  return [translateX, translateY];
-}
-function getScaleFromHTML(el) {
-  const transform = el.style.transform;
-  const scaleMatch = transform.match(/scale\(([^)]+)\)/);
-  const [scaleX, scaleY] = scaleMatch ? scaleMatch[1].split(",").map((value) => parseFloat(value)) : [1, 1];
-  return [scaleX, scaleY];
-}
-function translateElementBy(el, x, y) {
-  const [exX, exY] = getTranslationFromHTML(el);
-  const [newX, newY] = [exX + x, exY + y];
-  const [scaleX, scaleY] = getScaleFromHTML(el);
-  el.style.transform = `translate(${newX}px, ${newY}px) scale(${scaleX}, ${scaleY})`;
-  return el;
-}
-function scaleElementBy(el, scaleX, scaleY) {
-  const [currentScaleX, currentScaleY] = getScaleFromHTML(el);
-  const [newScaleX, newScaleY] = [
-    currentScaleX * scaleX,
-    currentScaleY * scaleY
-  ];
-  const [translateX, translateY] = getTranslationFromHTML(el);
-  el.style.transform = `translate(${translateX}px, ${translateY}px) scale(${newScaleX}, ${newScaleY})`;
-  return el;
-}
-function resetElementScale(el) {
-  const [x, y] = getTranslationFromHTML(el);
-  el.style.transform = `translate(${x}px, ${y}px) scale(1, 1)`;
-  return el;
-}
-function positionRelatively(toPosition, positionBy, padding = 0) {
-  const [translateX, translateY] = getTranslationFromHTML(toPosition);
-  const [frameX, frameY] = getTranslationFromHTML(positionBy);
-  const [dx, dy] = [translateX - frameX, translateY - frameY];
-  const verticalAlignment = toPosition.getAttribute("data-vertical-alignment");
-  const horizontalAlignment = toPosition.getAttribute("data-vertical-alignment");
-  let paddingX = padding;
-  let paddingY = padding;
-  if (verticalAlignment && verticalAlignment === "bottom") {
-    paddingY = -padding;
-  }
-  if (horizontalAlignment && horizontalAlignment === "right") {
-    paddingX = -padding;
-  }
-  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
-  toPosition.style.transform = `translate(${dx + paddingX}px, ${dy + paddingY}px) scale(${scaleX}, ${scaleY})`;
-  return toPosition;
-}
-function positionAbsolutely(toPosition, positionBy) {
-  const [translateX, translateY] = getTranslationFromHTML(toPosition);
-  const [frameX, frameY] = getTranslationFromHTML(positionBy);
-  const [dx, dy] = [translateX + frameX, translateY + frameY];
-  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
-  toPosition.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
-  return toPosition;
-}
 // src/Items/Frame/Basic/Custom/index.ts
 var Custom = {
   name: "Custom",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(100, 0)),
-    new Line(new Point(100, 0), new Point(100, 100)),
-    new Line(new Point(100, 100), new Point(0, 100)),
-    new Line(new Point(0, 100), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(100, 0)),
+      new Line(new Point(100, 0), new Point(100, 100)),
+      new Line(new Point(100, 100), new Point(0, 100)),
+      new Line(new Point(0, 100), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [new Point(0, 50), new Point(100, 50), new Point(50, 0), new Point(50, 100)]
 };
 
@@ -8767,12 +7750,14 @@ var Custom = {
 var Frame16x9 = {
   name: "16:9",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(200, 0)),
-    new Line(new Point(200, 0), new Point(200, 200 * (739 / 1314))),
-    new Line(new Point(200, 200 * (739 / 1314)), new Point(0, 200 * (739 / 1314))),
-    new Line(new Point(0, 200 * (739 / 1314)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(200, 0)),
+      new Line(new Point(200, 0), new Point(200, 200 * (739 / 1314))),
+      new Line(new Point(200, 200 * (739 / 1314)), new Point(0, 200 * (739 / 1314))),
+      new Line(new Point(0, 200 * (739 / 1314)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 100 * (739 / 1314)),
     new Point(200, 100 * (739 / 1314)),
@@ -8785,12 +7770,14 @@ var Frame16x9 = {
 var Frame4x3 = {
   name: "4:3",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(200, 0)),
-    new Line(new Point(200, 0), new Point(200, 200 * (853 / 1138))),
-    new Line(new Point(200, 200 * (853 / 1138)), new Point(0, 200 * (853 / 1138))),
-    new Line(new Point(0, 200 * (853 / 1138)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(200, 0)),
+      new Line(new Point(200, 0), new Point(200, 200 * (853 / 1138))),
+      new Line(new Point(200, 200 * (853 / 1138)), new Point(0, 200 * (853 / 1138))),
+      new Line(new Point(0, 200 * (853 / 1138)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 100 * (853 / 1138)),
     new Point(200, 100 * (853 / 1138)),
@@ -8803,12 +7790,14 @@ var Frame4x3 = {
 var A4 = {
   name: "A4",
   textBounds: new Mbr(0, -15, 100, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(100, 0)),
-    new Line(new Point(100, 0), new Point(100, 100 * (1172 / 828))),
-    new Line(new Point(100, 100 * (1172 / 828)), new Point(0, 100 * (1172 / 828))),
-    new Line(new Point(0, 100 * (1172 / 828)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(100, 0)),
+      new Line(new Point(100, 0), new Point(100, 100 * (1172 / 828))),
+      new Line(new Point(100, 100 * (1172 / 828)), new Point(0, 100 * (1172 / 828))),
+      new Line(new Point(0, 100 * (1172 / 828)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 50 * (1172 / 828)),
     new Point(100, 50 * (1172 / 828)),
@@ -8821,12 +7810,14 @@ var A4 = {
 var Letter = {
   name: "Letter",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(100, 0)),
-    new Line(new Point(100, 0), new Point(100, 100 * (1120 / 867))),
-    new Line(new Point(100, 100 * (1120 / 867)), new Point(0, 100 * (1120 / 867))),
-    new Line(new Point(0, 100 * (1120 / 867)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(100, 0)),
+      new Line(new Point(100, 0), new Point(100, 100 * (1120 / 867))),
+      new Line(new Point(100, 100 * (1120 / 867)), new Point(0, 100 * (1120 / 867))),
+      new Line(new Point(0, 100 * (1120 / 867)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 50 * (1120 / 867)),
     new Point(100, 50 * (1120 / 867)),
@@ -8839,12 +7830,14 @@ var Letter = {
 var Frame1x1 = {
   name: "1:1",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(100, 0)),
-    new Line(new Point(100, 0), new Point(100, 100)),
-    new Line(new Point(100, 100), new Point(0, 100)),
-    new Line(new Point(0, 100), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(100, 0)),
+      new Line(new Point(100, 0), new Point(100, 100)),
+      new Line(new Point(100, 100), new Point(0, 100)),
+      new Line(new Point(0, 100), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [new Point(0, 50), new Point(100, 50), new Point(50, 0), new Point(50, 100)]
 };
 
@@ -8852,12 +7845,14 @@ var Frame1x1 = {
 var Frame3x2 = {
   name: "3:2",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(200, 0)),
-    new Line(new Point(200, 0), new Point(200, 200 * (200 / 300))),
-    new Line(new Point(200, 200 * (200 / 300)), new Point(0, 200 * (200 / 300))),
-    new Line(new Point(0, 200 * (200 / 300)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(200, 0)),
+      new Line(new Point(200, 0), new Point(200, 200 * (200 / 300))),
+      new Line(new Point(200, 200 * (200 / 300)), new Point(0, 200 * (200 / 300))),
+      new Line(new Point(0, 200 * (200 / 300)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 100 * (200 / 300)),
     new Point(200, 100 * (200 / 300)),
@@ -8870,12 +7865,14 @@ var Frame3x2 = {
 var Frame9x18 = {
   name: "9:18",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path([
-    new Line(new Point(0, 0), new Point(200, 0)),
-    new Line(new Point(200, 0), new Point(200, 200 * (1230 / 612))),
-    new Line(new Point(200, 200 * (1230 / 612)), new Point(0, 200 * (1230 / 612))),
-    new Line(new Point(0, 200 * (1230 / 612)), new Point(0, 0))
-  ], true),
+  get path() {
+    return new Path([
+      new Line(new Point(0, 0), new Point(200, 0)),
+      new Line(new Point(200, 0), new Point(200, 200 * (1230 / 612))),
+      new Line(new Point(200, 200 * (1230 / 612)), new Point(0, 200 * (1230 / 612))),
+      new Line(new Point(0, 200 * (1230 / 612)), new Point(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point(0, 100 * (1230 / 612)),
     new Point(200, 100 * (1230 / 612)),
@@ -9349,9 +8346,40 @@ import {
   Editor as Editor31,
   Element as Element6,
   Text,
-  Transforms as Transforms20
+  Transforms as Transforms21
 } from "slate";
 
+// src/SubjectOperation.ts
+class SubjectOperation {
+  observers = [];
+  subscribe(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index === -1) {
+      this.observers.push(observer);
+    }
+  }
+  unsubscribe(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index !== -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+  publish(subject, op) {
+    for (const observer of this.observers) {
+      observer(subject, op);
+    }
+  }
+}
+
+// src/Items/ItemsCommandUtils.ts
+function mapItemsByOperation(item, getCallback) {
+  const items = Array.isArray(item) ? item : [item];
+  return items.map((item2) => {
+    const operation = getCallback(item2);
+    return { item: item2, operation };
+  });
+}
+
 // src/Items/LinkTo/LinkToCommand.ts
 class LinkToCommand {
   linkTo;
@@ -10237,7 +9265,7 @@ function fillText(ctx, textBlock) {
 import {
   createEditor,
   Editor as Editor27,
-  Transforms as Transforms18
+  Transforms as Transforms19
 } from "slate";
 
 // node_modules/is-plain-object/dist/is-plain-object.mjs
@@ -11057,7 +10085,10 @@ var setLink = (editor, link, selection) => {
     return;
   }
   const format = link ? "rgba(71, 120, 245, 1)" : "rgb(20, 21, 26)";
-  Editor12.addMark(editor, "fontColor", format);
+  Transforms11.setNodes(editor, { fontColor: format }, {
+    match: (n) => !Editor12.isEditor(n) && n.type === "text",
+    split: true
+  });
   for (const [node, path2] of Editor12.nodes(editor, {
     match: (n) => !Editor12.isEditor(n) && n.type === "text"
   })) {
@@ -17148,7 +16179,7 @@ function persistLeafFormats(children) {
   }, {});
 }
 function plugin(opts) {
-  var compiler2 = function compiler3(node2) {
+  var compiler2 = function compiler(node2) {
     return node2.children.map(function(c) {
       return deserialize(c, opts);
     });
@@ -17268,6 +16299,7 @@ class MarkdownProcessor {
   isProcessingChunk = false;
   stopProcessingMarkDownCb = null;
   currentNode = "";
+  doneResolvers = [];
   editor;
   subject = new Subject;
   constructor(editor) {
@@ -17279,6 +16311,19 @@ class MarkdownProcessor {
   getStopProcessingMarkDownCb() {
     return this.stopProcessingMarkDownCb;
   }
+  waitForDone() {
+    if (!this.isProcessingChunk && this.chunksQueue.length === 0) {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      this.doneResolvers.push(resolve);
+    });
+  }
+  notifyDone() {
+    const resolvers = this.doneResolvers;
+    this.doneResolvers = [];
+    resolvers.forEach((r) => r());
+  }
   deserializeMarkdown(isNewParagraphNeeded) {
     const lastNode = this.getText()[this.getText().length - 1];
     if (lastNode.type !== "paragraph") {
@@ -17335,6 +16380,7 @@ class MarkdownProcessor {
   async processNextChunk() {
     if (this.chunksQueue.length === 0) {
       this.isProcessingChunk = false;
+      this.notifyDone();
       return;
     }
     this.isProcessingChunk = true;
@@ -17342,6 +16388,7 @@ class MarkdownProcessor {
     if (chunk === "StopProcessingMarkdown") {
       await this.deserializeMarkdownAsync(false);
       this.isProcessingChunk = false;
+      this.notifyDone();
       this.currentNode = "";
       if (this.stopProcessingMarkDownCb) {
         selectWholeText(this.editor);
@@ -17610,7 +16657,7 @@ function setSelectionFontSize(editor, isAutosize, fontSize, selectionContext) {
 }
 
 // src/Items/RichText/editorHelpers/selectionOps/setSelectionFontStyle.ts
-import { Editor as Editor25 } from "slate";
+import { Editor as Editor25, Range as Range8, Transforms as Transforms18 } from "slate";
 
 // src/Items/RichText/editorHelpers/common/getEachNodeInSelectionStyles.ts
 function getEachNodeInSelectionStyles(editor) {
@@ -17640,10 +16687,22 @@ function setSelectionFontStyle(editor, style) {
     const isAllNodesContainStyle = selectionStyles.every((styleArr) => styleArr.includes(style2));
     const isSomeNodeContainStyle = selectionStyles.some((styleArr) => styleArr.includes(style2));
     const isAllNodesNotContainStyle = selectionStyles.every((styleArr) => !styleArr.includes(style2));
+    let value;
     if (isAllNodesContainStyle) {
-      Editor25.addMark(editor, style2, false);
+      value = false;
     } else if (isSomeNodeContainStyle || isAllNodesNotContainStyle) {
-      Editor25.addMark(editor, style2, true);
+      value = true;
+    } else {
+      continue;
+    }
+    const { selection } = editor;
+    if (selection && Range8.isExpanded(selection)) {
+      Transforms18.setNodes(editor, { [style2]: value }, {
+        match: (n) => !Editor25.isEditor(n) && n.type === "text",
+        split: true
+      });
+    } else {
+      Editor25.addMark(editor, style2, value);
     }
   }
 }
@@ -17901,373 +16960,960 @@ class EditorContainer {
       }
       console.error("Error applying this type operation: ", operations2);
     }
-  }
-  applySelectionEdit(op) {
-    this.shouldEmit = false;
-    for (const operation of op.ops) {
-      this.decorated.apply(operation);
+  }
+  applySelectionEdit(op) {
+    this.shouldEmit = false;
+    for (const operation of op.ops) {
+      this.decorated.apply(operation);
+    }
+    this.shouldEmit = true;
+  }
+  applySelectionOp(op) {
+    this.shouldEmit = false;
+    Editor27.withoutNormalizing(this.editor, () => {
+      for (const operation of op.ops) {
+        this.decorated.apply(operation);
+      }
+    });
+    this.shouldEmit = true;
+  }
+  applyWholeTextOp(op) {
+    const selection = this.editor.selection;
+    selectWholeText(this.editor);
+    switch (op.method) {
+      case "setFontStyle":
+        this.setSelectionFontStyle(op.fontStyleList);
+        break;
+      case "setFontColor":
+        this.setSelectionFontColor(op.fontColor);
+        break;
+      case "setFontFamily":
+        break;
+      case "setFontSize":
+        this.textScale = Number(op.fontSize) / this.getScale() / this.initialTextStyles.fontSize;
+        break;
+      case "setFontHighlight":
+        this.setSelectionFontHighlight(op.fontHighlight);
+        break;
+      case "setHorisontalAlignment":
+        this.setSelectionHorisontalAlignment(op.horisontalAlignment);
+        break;
+      case "setMaxWidth":
+        this.applyMaxWidth(op.maxWidth ?? 0);
+        break;
+    }
+    if (selection) {
+      Transforms19.select(this.editor, selection);
+    }
+  }
+  applyMaxWidth(maxWidth) {
+    this.maxWidth = maxWidth;
+  }
+  setMaxWidth(maxWidth) {
+    this.emit({
+      class: "RichText",
+      method: "setMaxWidth",
+      item: [this.id],
+      maxWidth
+    });
+  }
+  setSelectionFontColor(format, selectionContext) {
+    this.startOpRecording();
+    setSelectionFontColor(this.editor, format, selectionContext);
+    return this.stopOpRecordingAndGetOps();
+  }
+  setSelectionLink(link, selection) {
+    this.startOpRecording();
+    setLink(this.editor, link, selection);
+    return this.stopOpRecordingAndGetOps();
+  }
+  setSelectionFontStyle(style) {
+    this.startOpRecording();
+    setSelectionFontStyle(this.editor, style);
+    return this.stopOpRecordingAndGetOps();
+  }
+  setSelectionFontSize(fontSize, selectionContext) {
+    this.startOpRecording();
+    const shouldUpdateElement = setSelectionFontSize(this.editor, this.getAutosize(), fontSize, selectionContext);
+    if (shouldUpdateElement) {
+      this.updateElement();
+    }
+    return this.stopOpRecordingAndGetOps();
+  }
+  setSelectionFontHighlight(format, selectionContext) {
+    this.startOpRecording();
+    setSelectionFontHighlight(this.editor, format, selectionContext);
+    return this.stopOpRecordingAndGetOps();
+  }
+  setSelectionHorisontalAlignment(horisontalAlignment, selectionContext) {
+    this.startOpRecording();
+    setSelectionHorisontalAlignment(this.editor, horisontalAlignment, selectionContext);
+    return this.stopOpRecordingAndGetOps();
+  }
+  getSelectionMarks() {
+    return getSelectionMarks(this.editor);
+  }
+  handleListMerge() {
+    return handleListMerge(this.editor);
+  }
+  getListTypeAtSelectionStart() {
+    return getListTypeAtSelectionStart(this.editor);
+  }
+  handleSplitListItem() {
+    return handleSplitListItem(this.editor);
+  }
+  includesListNode() {
+    return this.getText().some((node2) => node2.type === "ol_list" || node2.type === "ul_list");
+  }
+  toggleListType(targetListType, shouldWrap = true) {
+    const result = toggleListType(this.editor, targetListType, shouldWrap);
+    this.subject.publish(this);
+    return result;
+  }
+  withAutoList() {
+    return withAutoList(this.editor);
+  }
+  handleWrapIntoNestedList() {
+    const result = handleWrapIntoNestedList(this.editor);
+    this.subject.publish(this);
+    return result;
+  }
+  getFirstSelectionLink(selection) {
+    return getFirstSelectionLink(this.editor, selection);
+  }
+  getText() {
+    return this.editor.children;
+  }
+  getTextParagraphs(lines) {
+    const newlines = [];
+    lines.forEach((line) => {
+      if (!this.getAutosize()) {
+        newlines.push(this.createParagraphNode(line));
+        return;
+      }
+      const validText = this.getValidText(line, newlines);
+      if (validText.length > 0) {
+        newlines.push(this.createParagraphNode(validText));
+      } else {
+        this.getOnLimitReached()();
+      }
+    });
+    return newlines;
+  }
+  getValidText(line, newlines) {
+    let left = 0;
+    let right = line.length;
+    let validText = "";
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      const currentText = line.slice(0, mid);
+      const testLine = this.createParagraphNode(currentText);
+      const nodes = [...newlines, testLine];
+      this.applyAutoSizeScale(this.calcAutoSize(nodes), nodes);
+      const relativeFontSize = this.getFontSize() / this.getMatrixScale();
+      if (relativeFontSize >= 10) {
+        validText = currentText;
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+    return validText;
+  }
+  createParagraphNode(text3) {
+    return createParagraphNode(text3, this.editor, this.horisontalAlignment);
+  }
+  insertCopiedText(text3) {
+    const lines = this.getTextParagraphs(text3.split(/\r\n|\r|\n/));
+    if (this.isLimitReached(lines)) {
+      return true;
+    }
+    insertCopiedNodes(this.editor, lines);
+    this.subject.publish(this);
+    return true;
+  }
+  checkIsAutoSizeTextScaleAllowed(nodes) {
+    const existingNodes = this.getBlockNodes();
+    const textScale = this.calcAutoSize([...existingNodes, ...nodes]);
+    const marks = this.getSelectionMarks();
+    const fontSize = marks?.fontSize ?? this.initialTextStyles.fontSize;
+    return Math.ceil(textScale * (fontSize === "auto" ? 14 : fontSize)) / this.getMatrixScale() > 4;
+  }
+  isLimitReached(nodes) {
+    if (this.getAutosize()) {
+      if (!this.checkIsAutoSizeTextScaleAllowed(nodes)) {
+        this.getOnLimitReached()();
+        return true;
+      }
+    }
+    return false;
+  }
+  insertCopiedNodes(nodes) {
+    if (this.isLimitReached(nodes)) {
+      return true;
+    }
+    insertCopiedNodes(this.editor, nodes);
+    this.subject.publish(this);
+    return true;
+  }
+  hasTextInSelection() {
+    return hasTextInSelection(this.editor);
+  }
+  getSelection() {
+    return JSON.parse(JSON.stringify(this.editor.selection));
+  }
+  splitNode() {
+    Transforms19.splitNodes(this.editor, { always: true });
+  }
+  getBlockNodes() {
+    return this.editor.children;
+  }
+  isEmpty() {
+    return isTextEmpty(this.editor.children);
+  }
+  clearText() {
+    clearText(this.editor);
+  }
+  addText(text3) {
+    this.editor.apply({
+      type: "insert_text",
+      text: text3,
+      path: [0, 0],
+      offset: 0
+    });
+  }
+  selectWholeText() {
+    selectWholeText(this.editor);
+  }
+  moveCursorToEndOfTheText(delay = 10) {
+    moveCursorToEndOfTheText(this.editor, delay);
+  }
+}
+
+// src/Items/RichText/findOptimalMaxWidthForTextAutoSize.ts
+function findOptimalMaxWidthForTextAutoSize(text3, containerWidth, containerHeight, initialMaxWidth, tolerance = 0.05) {
+  const targetRatio = containerWidth / containerHeight;
+  let low = 0;
+  let high = initialMaxWidth * 3;
+  let closestRatioDifference = Infinity;
+  let closestWidth = initialMaxWidth;
+  let closestHeight = initialMaxWidth / targetRatio;
+  const iterations = Math.min(Math.max(3, containerWidth / 80), 15);
+  for (let i = 0;i < iterations && low < high; i += 1) {
+    const mid = (low + high) / 2;
+    const { width: calcWidth, height: calcHeight } = getBlockNodes(text3, mid);
+    const currentRatio = calcWidth / calcHeight;
+    const ratioDifference = Math.abs(currentRatio - targetRatio);
+    if (ratioDifference < closestRatioDifference) {
+      closestRatioDifference = ratioDifference;
+      closestWidth = calcWidth;
+      closestHeight = calcHeight;
+    }
+    if (ratioDifference <= tolerance) {
+      break;
+    }
+    if (currentRatio < targetRatio) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  const scale = Math.min(containerWidth / closestWidth, containerHeight / closestHeight);
+  return {
+    bestMaxWidth: initialMaxWidth / scale,
+    bestMaxHeight: initialMaxWidth / targetRatio / scale
+  };
+}
+
+// src/Items/RichText/editorHelpers/selectionOps/applySelectionFontColor.ts
+import { Editor as Editor28 } from "slate";
+function applySelectionFontColor(editor, fontColor) {
+  if (!editor) {
+    throw new Error("Editor is not initialized");
+  }
+  const marks = getSelectionMarks(editor);
+  if (!marks) {
+    return;
+  }
+  Editor28.addMark(editor, "fontColor", fontColor);
+}
+
+// src/Items/RichText/editorHelpers/selectionOps/applySelectionFontSize.ts
+import { Editor as Editor29, Transforms as Transforms20 } from "slate";
+function applySelectionFontSize(editor, fontSize, selectionContext) {
+  const size = fontSize;
+  if (typeof size !== "number") {
+    return;
+  }
+  if (!editor) {
+    throw new Error("Editor is not initialized");
+  }
+  const selection = editor.selection;
+  const marks = getSelectionMarks(editor);
+  if (!marks) {
+    return;
+  }
+  if (JSON.stringify(selection?.anchor) === JSON.stringify(selection?.focus)) {
+    Transforms20.select(editor, {
+      anchor: Editor29.start(editor, []),
+      focus: Editor29.end(editor, [])
+    });
+  }
+  Editor29.addMark(editor, "fontSize", size);
+  if (selectionContext === "EditTextUnderPointer") {}
+}
+
+// src/Items/RichText/editorHelpers/common/getSelectedBlockNode.ts
+import { Editor as Editor30, Element as Element5 } from "slate";
+function getSelectedBlockNode(editor) {
+  const { selection } = editor;
+  if (!selection) {
+    return null;
+  }
+  const [node2] = Editor30.node(editor, selection);
+  if (Editor30.isEditor(node2) || !Element5.isElement(node2)) {
+    return null;
+  }
+  return node2;
+}
+
+// src/Items/RichText/utils.ts
+function findCommonStrings(arrays) {
+  if (arrays.length === 0) {
+    return [];
+  }
+  let commonStrings = arrays[0];
+  for (let i = 1;i < arrays.length; i++) {
+    commonStrings = commonStrings.filter((str) => arrays[i].includes(str));
+  }
+  return commonStrings;
+}
+
+// src/Items/RichText/editorHelpers/common/getSelectionStyles.ts
+function getSelectionStyles(editor) {
+  const { selection } = editor;
+  if (!selection) {
+    return;
+  }
+  const nodes = getAllTextNodesInSelection(editor);
+  const styles = nodes.reduce((acc, node2) => {
+    const styles2 = [];
+    if (node2.text === "") {
+      return acc;
+    }
+    if (node2.bold) {
+      styles2.push("bold");
+    }
+    if (node2.italic) {
+      styles2.push("italic");
     }
-    this.shouldEmit = true;
-  }
-  applySelectionOp(op) {
-    this.shouldEmit = false;
-    Editor27.withoutNormalizing(this.editor, () => {
-      for (const operation of op.ops) {
-        this.decorated.apply(operation);
-      }
-    });
-    this.shouldEmit = true;
-  }
-  applyWholeTextOp(op) {
-    const selection = this.editor.selection;
-    selectWholeText(this.editor);
-    switch (op.method) {
-      case "setFontStyle":
-        this.setSelectionFontStyle(op.fontStyleList);
-        break;
-      case "setFontColor":
-        this.setSelectionFontColor(op.fontColor);
-        break;
-      case "setFontFamily":
-        break;
-      case "setFontSize":
-        this.textScale = Number(op.fontSize) / this.getScale() / this.initialTextStyles.fontSize;
-        break;
-      case "setFontHighlight":
-        this.setSelectionFontHighlight(op.fontHighlight);
-        break;
-      case "setHorisontalAlignment":
-        this.setSelectionHorisontalAlignment(op.horisontalAlignment);
-        break;
-      case "setMaxWidth":
-        this.applyMaxWidth(op.maxWidth ?? 0);
-        break;
+    if (node2.underline) {
+      styles2.push("underline");
     }
-    if (selection) {
-      Transforms18.select(this.editor, selection);
+    if (node2["line-through"]) {
+      styles2.push("line-through");
     }
+    acc.push(styles2);
+    return acc;
+  }, []);
+  return findCommonStrings(styles);
+}
+
+// src/Items/RichText/editorHelpers/common/setEditorFocus.ts
+import { ReactEditor as ReactEditor6 } from "slate-react";
+function setEditorFocus(editor, selectionContext) {
+  if (!editor) {
+    throw new Error("Editor is not initialized");
   }
-  applyMaxWidth(maxWidth) {
-    this.maxWidth = maxWidth;
-  }
-  setMaxWidth(maxWidth) {
-    this.emit({
-      class: "RichText",
-      method: "setMaxWidth",
-      item: [this.id],
-      maxWidth
-    });
-  }
-  setSelectionFontColor(format, selectionContext) {
-    this.startOpRecording();
-    setSelectionFontColor(this.editor, format, selectionContext);
-    return this.stopOpRecordingAndGetOps();
+  if (selectionContext === "EditTextUnderPointer") {
+    ReactEditor6.focus(editor);
   }
-  setSelectionLink(link, selection) {
-    this.startOpRecording();
-    setLink(this.editor, link, selection);
-    return this.stopOpRecordingAndGetOps();
+}
+
+// src/Items/Transformation/TransformationCommand.ts
+class TransformationCommand {
+  transformation;
+  operation;
+  reverse;
+  constructor(transformation, operation) {
+    this.transformation = transformation;
+    this.operation = operation;
+    this.reverse = this.getReverse();
   }
-  setSelectionFontStyle(style) {
-    this.startOpRecording();
-    setSelectionFontStyle(this.editor, style);
-    return this.stopOpRecordingAndGetOps();
+  merge(op) {
+    this.operation = op;
+    this.reverse = this.getReverse();
+    return this;
   }
-  setSelectionFontSize(fontSize, selectionContext) {
-    this.startOpRecording();
-    const shouldUpdateElement = setSelectionFontSize(this.editor, this.getAutosize(), fontSize, selectionContext);
-    if (shouldUpdateElement) {
-      this.updateElement();
+  apply() {
+    for (const transformation of this.transformation) {
+      transformation.apply(this.operation);
     }
-    return this.stopOpRecordingAndGetOps();
   }
-  setSelectionFontHighlight(format, selectionContext) {
-    this.startOpRecording();
-    setSelectionFontHighlight(this.editor, format, selectionContext);
-    return this.stopOpRecordingAndGetOps();
+  revert() {
+    this.reverse.forEach(({ item, operation }) => {
+      item.apply(operation);
+    });
   }
-  setSelectionHorisontalAlignment(horisontalAlignment, selectionContext) {
-    this.startOpRecording();
-    setSelectionHorisontalAlignment(this.editor, horisontalAlignment, selectionContext);
-    return this.stopOpRecordingAndGetOps();
+  getReverse() {
+    const op = this.operation;
+    switch (this.operation.method) {
+      case "applyMatrix": {
+        const op2 = this.operation;
+        return this.transformation.map((t3) => {
+          const itemOp = op2.items.find((i) => i.id === t3.getId());
+          if (!itemOp)
+            return { item: t3, operation: op2 };
+          return {
+            item: t3,
+            operation: {
+              class: "Transformation",
+              method: "applyMatrix",
+              items: [{
+                id: t3.getId(),
+                matrix: {
+                  translateX: -itemOp.matrix.translateX,
+                  translateY: -itemOp.matrix.translateY,
+                  scaleX: 1 / itemOp.matrix.scaleX,
+                  scaleY: 1 / itemOp.matrix.scaleY,
+                  shearX: 0,
+                  shearY: 0
+                }
+              }]
+            }
+          };
+        });
+      }
+      case "translateTo":
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...this.operation,
+            x: transformation.getTranslation().x,
+            y: transformation.getTranslation().y
+          };
+        });
+      case "translateBy": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...this.operation,
+            x: -op2.x,
+            y: -op2.y
+          };
+        });
+      }
+      case "scaleTo":
+      case "scaleToRelativeTo": {
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...op,
+            x: transformation.getScale().x,
+            y: transformation.getScale().y
+          };
+        });
+      }
+      case "scaleBy":
+      case "scaleByRelativeTo": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            x: 1 / op2.x,
+            y: 1 / op2.y
+          };
+        });
+      }
+      case "scaleByTranslateBy": {
+        const op2 = this.operation;
+        const scaleTransformation = mapItemsByOperation(this.transformation, () => {
+          const scaleX = 1 / op2.scale.x;
+          const scaleY = 1 / op2.scale.y;
+          const translateX = -op2.translate.x;
+          const translateY = -op2.translate.y;
+          return {
+            ...op2,
+            scale: {
+              x: scaleX,
+              y: scaleY
+            },
+            translate: {
+              x: translateX,
+              y: translateY
+            }
+          };
+        });
+        return scaleTransformation;
+      }
+      case "rotateTo":
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...this.operation,
+            degree: transformation.getRotation()
+          };
+        });
+      case "rotateBy": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...this.operation,
+            degree: -op2.degree
+          };
+        });
+      }
+      case "transformMany": {
+        const { operation, transformation } = this;
+        return transformation.map((currTrans) => {
+          const op2 = operation.items[currTrans.getId()];
+          const m = op2.method === "applyMatrix" ? op2.matrix : op2.method === "scaleByTranslateBy" ? { translateX: -op2.translate.x, translateY: -op2.translate.y, scaleX: 1 / op2.scale.x, scaleY: 1 / op2.scale.y, shearX: 0, shearY: 0 } : { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 };
+          return {
+            item: currTrans,
+            operation: {
+              class: "Transformation",
+              method: "applyMatrix",
+              items: [{
+                id: currTrans.getId(),
+                matrix: {
+                  translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
+                  translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
+                  scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
+                  scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
+                  shearX: 0,
+                  shearY: 0
+                }
+              }]
+            }
+          };
+        });
+      }
+      case "locked": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            item: [...op2.item],
+            method: "unlocked",
+            locked: false
+          };
+        });
+      }
+      case "unlocked": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            item: [...op2.item],
+            method: "locked",
+            locked: true
+          };
+        });
+      }
+      default:
+        return [
+          { item: this.transformation[0], operation: this.operation }
+        ];
+    }
   }
-  getSelectionMarks() {
-    return getSelectionMarks(this.editor);
+}
+
+// src/Items/Transformation/TransformationData.ts
+class DefaultTransformationData {
+  translateX;
+  translateY;
+  scaleX;
+  scaleY;
+  rotate;
+  isLocked;
+  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, rotate = 0, isLocked = false) {
+    this.translateX = translateX;
+    this.translateY = translateY;
+    this.scaleX = scaleX;
+    this.scaleY = scaleY;
+    this.rotate = rotate;
+    this.isLocked = isLocked;
   }
-  handleListMerge() {
-    return handleListMerge(this.editor);
+}
+
+// src/Items/Transformation/Transformation.ts
+var defaultData = new DefaultTransformationData;
+
+class Transformation {
+  id;
+  events;
+  subject = new SubjectOperation;
+  _matrix = new Matrix2;
+  previous = new Matrix2;
+  rotate = defaultData.rotate;
+  isLocked = false;
+  constructor(id = "", events) {
+    this.id = id;
+    this.events = events;
   }
-  getListTypeAtSelectionStart() {
-    return getListTypeAtSelectionStart(this.editor);
+  getMatrixData() {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this._matrix;
+    return { translateX, translateY, scaleX, scaleY, shearX, shearY };
   }
-  handleSplitListItem() {
-    return handleSplitListItem(this.editor);
+  toMatrix() {
+    return this._matrix.copy();
   }
-  includesListNode() {
-    return this.getText().some((node2) => node2.type === "ol_list" || node2.type === "ul_list");
+  applyToContext(ctx) {
+    this._matrix.applyToContext(ctx);
   }
-  toggleListType(targetListType, shouldWrap = true) {
-    const result = toggleListType(this.editor, targetListType, shouldWrap);
-    this.subject.publish(this);
-    return result;
+  getTranslation() {
+    return { x: this._matrix.translateX, y: this._matrix.translateY };
   }
-  withAutoList() {
-    return withAutoList(this.editor);
+  getScale() {
+    return { x: this._matrix.scaleX, y: this._matrix.scaleY };
   }
-  handleWrapIntoNestedList() {
-    const result = handleWrapIntoNestedList(this.editor);
-    this.subject.publish(this);
-    return result;
+  getRotation() {
+    return this.rotate;
   }
-  getFirstSelectionLink(selection) {
-    return getFirstSelectionLink(this.editor, selection);
+  setLocal(xOrData, y, scaleX, scaleY) {
+    this.previous = this._matrix.copy();
+    if (typeof xOrData === "object") {
+      if (xOrData.translateX !== undefined)
+        this._matrix.translateX = xOrData.translateX;
+      if (xOrData.translateY !== undefined)
+        this._matrix.translateY = xOrData.translateY;
+      if (xOrData.scaleX !== undefined)
+        this._matrix.scaleX = xOrData.scaleX;
+      if (xOrData.scaleY !== undefined)
+        this._matrix.scaleY = xOrData.scaleY;
+    } else {
+      this._matrix.translateX = xOrData;
+      this._matrix.translateY = y;
+      if (scaleX !== undefined)
+        this._matrix.scaleX = scaleX;
+      if (scaleY !== undefined)
+        this._matrix.scaleY = scaleY;
+    }
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix: this.getMatrixData() }]
+    });
   }
-  getText() {
-    return this.editor.children;
+  serialize() {
+    return {
+      translateX: this._matrix.translateX,
+      translateY: this._matrix.translateY,
+      scaleX: this._matrix.scaleX,
+      scaleY: this._matrix.scaleY,
+      rotate: this.rotate,
+      isLocked: this.isLocked
+    };
   }
-  getTextParagraphs(lines) {
-    const newlines = [];
-    lines.forEach((line) => {
-      if (!this.getAutosize()) {
-        newlines.push(this.createParagraphNode(line));
-        return;
-      }
-      const validText = this.getValidText(line, newlines);
-      if (validText.length > 0) {
-        newlines.push(this.createParagraphNode(validText));
-      } else {
-        this.getOnLimitReached()();
-      }
+  deserialize(data) {
+    this.previous = this._matrix.copy();
+    if (data.translateX) {
+      this._matrix.translateX = data.translateX;
+    }
+    if (data.translateY) {
+      this._matrix.translateY = data.translateY;
+    }
+    if (data.scaleX) {
+      this._matrix.scaleX = data.scaleX;
+    }
+    if (data.scaleY) {
+      this._matrix.scaleY = data.scaleY;
+    }
+    if (data.isLocked) {
+      this.isLocked = data.isLocked;
+    }
+    if (data.rotate) {
+      this.rotate = data.rotate;
+    }
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "deserialize",
+      item: [this.id],
+      data
     });
-    return newlines;
+    return this;
   }
-  getValidText(line, newlines) {
-    let left = 0;
-    let right = line.length;
-    let validText = "";
-    while (left <= right) {
-      const mid = Math.floor((left + right) / 2);
-      const currentText = line.slice(0, mid);
-      const testLine = this.createParagraphNode(currentText);
-      const nodes = [...newlines, testLine];
-      this.applyAutoSizeScale(this.calcAutoSize(nodes), nodes);
-      const relativeFontSize = this.getFontSize() / this.getMatrixScale();
-      if (relativeFontSize >= 10) {
-        validText = currentText;
-        left = mid + 1;
-      } else {
-        right = mid - 1;
-      }
-    }
-    return validText;
+  copy(id) {
+    const { translateX, translateY, scaleX, scaleY } = this._matrix;
+    const { rotate } = this;
+    return new Transformation(id || "", this.events).deserialize({
+      translateX,
+      translateY,
+      scaleX,
+      scaleY,
+      rotate,
+      isLocked: false
+    });
   }
-  createParagraphNode(text3) {
-    return createParagraphNode(text3, this.editor, this.horisontalAlignment);
+  getInverse() {
+    const copy2 = this.copy();
+    copy2._matrix.invert();
+    return copy2;
   }
-  insertCopiedText(text3) {
-    const lines = this.getTextParagraphs(text3.split(/\r\n|\r|\n/));
-    if (this.isLimitReached(lines)) {
-      return true;
-    }
-    insertCopiedNodes(this.editor, lines);
-    this.subject.publish(this);
-    return true;
+  getId() {
+    return this.id;
   }
-  checkIsAutoSizeTextScaleAllowed(nodes) {
-    const existingNodes = this.getBlockNodes();
-    const textScale = this.calcAutoSize([...existingNodes, ...nodes]);
-    const marks = this.getSelectionMarks();
-    const fontSize = marks?.fontSize ?? this.initialTextStyles.fontSize;
-    return Math.ceil(textScale * (fontSize === "auto" ? 14 : fontSize)) / this.getMatrixScale() > 4;
+  setId(id) {
+    this.id = id;
   }
-  isLimitReached(nodes) {
-    if (this.getAutosize()) {
-      if (!this.checkIsAutoSizeTextScaleAllowed(nodes)) {
-        this.getOnLimitReached()();
-        return true;
-      }
+  emit(operation) {
+    if (this.events) {
+      const command = new TransformationCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
     }
-    return false;
   }
-  insertCopiedNodes(nodes) {
-    if (this.isLimitReached(nodes)) {
-      return true;
-    }
-    insertCopiedNodes(this.editor, nodes);
-    this.subject.publish(this);
-    return true;
+  emitMatrix(matrix, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix }],
+      timeStamp
+    });
   }
-  hasTextInSelection() {
-    return hasTextInSelection(this.editor);
+  translateTo(x, y, timeStamp) {
+    if (!this.id) {}
+    this.emitMatrix({
+      translateX: x - this._matrix.translateX,
+      translateY: y - this._matrix.translateY,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  getSelection() {
-    return JSON.parse(JSON.stringify(this.editor.selection));
+  translateBy(x, y, timeStamp) {
+    if (!this.id) {}
+    if (x === 0 && y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: x,
+      translateY: y,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  splitNode() {
-    Transforms18.splitNodes(this.editor, { always: true });
+  scaleTo(x, y, timeStamp) {
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  getBlockNodes() {
-    return this.editor.children;
+  scaleBy(x, y, timeStamp) {
+    if (x === 0 && y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  isEmpty() {
-    return isTextEmpty(this.editor.children);
+  scaleByTranslateBy(scale, translate, timeStamp) {
+    if (scale.x === 0 && scale.y === 0 && translate.x === 0 && translate.y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: translate.x,
+      translateY: translate.y,
+      scaleX: scale.x,
+      scaleY: scale.y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  clearText() {
-    clearText(this.editor);
+  rotateTo(degree, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "rotateTo",
+      item: [this.id],
+      degree,
+      timeStamp
+    });
   }
-  addText(text3) {
-    this.editor.apply({
-      type: "insert_text",
-      text: text3,
-      path: [0, 0],
-      offset: 0
+  rotateBy(degree, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "rotateBy",
+      item: [this.id],
+      degree,
+      timeStamp
     });
   }
-  selectWholeText() {
-    selectWholeText(this.editor);
+  scaleToRelativeTo(x, y, _point, timeStamp) {
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-  moveCursorToEndOfTheText(delay = 10) {
-    moveCursorToEndOfTheText(this.editor, delay);
+  scaleByRelativeTo(x, y, point3, timeStamp) {
+    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this._matrix;
+    const newSx = sx0 * x;
+    const newSy = sy0 * y;
+    this.emitMatrix({
+      translateX: -point3.x * newSx + point3.x - tx0,
+      translateY: -point3.y * newSy + point3.y - ty0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
-}
-
-// src/Items/RichText/findOptimalMaxWidthForTextAutoSize.ts
-function findOptimalMaxWidthForTextAutoSize(text3, containerWidth, containerHeight, initialMaxWidth, tolerance = 0.05) {
-  const targetRatio = containerWidth / containerHeight;
-  let low = 0;
-  let high = initialMaxWidth * 3;
-  let closestRatioDifference = Infinity;
-  let closestWidth = initialMaxWidth;
-  let closestHeight = initialMaxWidth / targetRatio;
-  const iterations = Math.min(Math.max(3, containerWidth / 80), 15);
-  for (let i = 0;i < iterations && low < high; i += 1) {
-    const mid = (low + high) / 2;
-    const { width: calcWidth, height: calcHeight } = getBlockNodes(text3, mid);
-    const currentRatio = calcWidth / calcHeight;
-    const ratioDifference = Math.abs(currentRatio - targetRatio);
-    if (ratioDifference < closestRatioDifference) {
-      closestRatioDifference = ratioDifference;
-      closestWidth = calcWidth;
-      closestHeight = calcHeight;
-    }
-    if (ratioDifference <= tolerance) {
-      break;
-    }
-    if (currentRatio < targetRatio) {
-      low = mid + 1;
+  setIsLocked(isLocked, timestamp) {
+    if (isLocked) {
+      this.emit({
+        class: "Transformation",
+        method: "locked",
+        item: [this.id],
+        locked: true,
+        timestamp
+      });
     } else {
-      high = mid - 1;
+      this.emit({
+        class: "Transformation",
+        method: "unlocked",
+        item: [this.id],
+        locked: false,
+        timestamp
+      });
     }
   }
-  const scale = Math.min(containerWidth / closestWidth, containerHeight / closestHeight);
-  return {
-    bestMaxWidth: initialMaxWidth / scale,
-    bestMaxHeight: initialMaxWidth / targetRatio / scale
-  };
-}
-
-// src/Items/RichText/editorHelpers/selectionOps/applySelectionFontColor.ts
-import { Editor as Editor28 } from "slate";
-function applySelectionFontColor(editor, fontColor) {
-  if (!editor) {
-    throw new Error("Editor is not initialized");
+  apply(op) {
+    this.previous = this._matrix.copy();
+    switch (op.method) {
+      case "applyMatrix": {
+        const itemOp = op.items.find((i) => i.id === this.id);
+        if (itemOp) {
+          this._matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
+          this._matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
+        }
+        break;
+      }
+      case "translateTo":
+        this.applyTranslateTo(op.x, op.y);
+        break;
+      case "translateBy":
+        this.applyTranslateBy(op.x, op.y);
+        break;
+      case "scaleTo":
+        this.applyScaleTo(op.x, op.y);
+        break;
+      case "scaleBy":
+        this.applyScaleBy(op.x, op.y);
+        break;
+      case "scaleToRelativeTo":
+        this.applyScaleToRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByRelativeTo":
+        this.applyScaleByRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByTranslateBy":
+        this.applyScaleByTranslateBy(op.scale, op.translate);
+        break;
+      case "rotateTo":
+        this.applyRotateTo(op.degree);
+        break;
+      case "rotateBy":
+        this.applyRotateBy(op.degree);
+        break;
+      case "transformMany":
+        this.applyTransformMany(op.items[this.id]);
+        break;
+      case "locked":
+        this.applyLocked(op.locked);
+        break;
+      case "unlocked":
+        this.applyUnlocked(op.locked);
+        break;
+      default:
+        return;
+    }
+    this.subject.publish(this, op);
   }
-  const marks = getSelectionMarks(editor);
-  if (!marks) {
-    return;
+  applyTranslateTo(x, y) {
+    this._matrix.translateX = x;
+    this._matrix.translateY = y;
   }
-  Editor28.addMark(editor, "fontColor", fontColor);
-}
-
-// src/Items/RichText/editorHelpers/selectionOps/applySelectionFontSize.ts
-import { Editor as Editor29, Transforms as Transforms19 } from "slate";
-function applySelectionFontSize(editor, fontSize, selectionContext) {
-  const size = fontSize;
-  if (typeof size !== "number") {
-    return;
+  applyTranslateBy(x, y) {
+    this._matrix.translate(x, y);
   }
-  if (!editor) {
-    throw new Error("Editor is not initialized");
+  applyScaleTo(x, y) {
+    this._matrix.scaleX = x;
+    this._matrix.scaleY = y;
   }
-  const selection = editor.selection;
-  const marks = getSelectionMarks(editor);
-  if (!marks) {
-    return;
+  applyScaleBy(x, y) {
+    this._matrix.scale(x, y);
   }
-  if (JSON.stringify(selection?.anchor) === JSON.stringify(selection?.focus)) {
-    Transforms19.select(editor, {
-      anchor: Editor29.start(editor, []),
-      focus: Editor29.end(editor, [])
-    });
+  applyScaleByTranslateBy(scale, translate) {
+    this._matrix.scale(scale.x, scale.y);
+    this._matrix.translate(translate.x, translate.y);
   }
-  Editor29.addMark(editor, "fontSize", size);
-  if (selectionContext === "EditTextUnderPointer") {}
-}
-
-// src/Items/RichText/editorHelpers/common/getSelectedBlockNode.ts
-import { Editor as Editor30, Element as Element5 } from "slate";
-function getSelectedBlockNode(editor) {
-  const { selection } = editor;
-  if (!selection) {
-    return null;
+  applyTransformMany(op) {
+    if (op.method === "applyMatrix") {
+      this._matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
+      this._matrix.translate(op.matrix.translateX, op.matrix.translateY);
+    } else if (op.method === "scaleByTranslateBy") {
+      this.applyScaleByTranslateBy(op.scale, op.translate);
+    } else if (op.method === "scaleBy") {
+      this.applyScaleBy(op.x, op.y);
+    } else if (op.method === "translateBy") {
+      this.applyTranslateBy(op.x, op.y);
+    } else if (op.method === "translateTo") {
+      this.applyTranslateTo(op.x, op.y);
+    }
   }
-  const [node2] = Editor30.node(editor, selection);
-  if (Editor30.isEditor(node2) || !Element5.isElement(node2)) {
-    return null;
+  applyScaleByRelativeTo(x, y, point3) {
+    const scaleX = this._matrix.scaleX * x;
+    const scaleY = this._matrix.scaleY * y;
+    this._matrix.translateX = -point3.x * scaleX + point3.x;
+    this._matrix.translateY = -point3.y * scaleY + point3.y;
+    this._matrix.scaleX = scaleX;
+    this._matrix.scaleY = scaleY;
   }
-  return node2;
-}
-
-// src/Items/RichText/utils.ts
-function findCommonStrings(arrays) {
-  if (arrays.length === 0) {
-    return [];
+  applyScaleToRelativeTo(x, y, point3) {
+    this.applyTranslateBy(-point3.x, -point3.y);
+    this.applyScaleTo(x, y);
+    this.applyTranslateBy(point3.x, point3.y);
   }
-  let commonStrings = arrays[0];
-  for (let i = 1;i < arrays.length; i++) {
-    commonStrings = commonStrings.filter((str) => arrays[i].includes(str));
+  applyRotateTo(degree) {
+    if (degree > 0) {
+      while (degree > 360) {
+        degree -= 360;
+      }
+      if (degree === 360) {
+        degree = 0;
+      }
+    } else {
+      while (degree < -360) {
+        degree += 360;
+      }
+      if (degree === -360) {
+        degree = 0;
+      }
+    }
+    this.rotate = degree;
   }
-  return commonStrings;
-}
-
-// src/Items/RichText/editorHelpers/common/getSelectionStyles.ts
-function getSelectionStyles(editor) {
-  const { selection } = editor;
-  if (!selection) {
-    return;
+  applyRotateBy(degree) {
+    this.applyRotateTo(this.rotate + degree);
   }
-  const nodes = getAllTextNodesInSelection(editor);
-  const styles = nodes.reduce((acc, node2) => {
-    const styles2 = [];
-    if (node2.text === "") {
-      return acc;
-    }
-    if (node2.bold) {
-      styles2.push("bold");
-    }
-    if (node2.italic) {
-      styles2.push("italic");
-    }
-    if (node2.underline) {
-      styles2.push("underline");
-    }
-    if (node2["line-through"]) {
-      styles2.push("line-through");
-    }
-    acc.push(styles2);
-    return acc;
-  }, []);
-  return findCommonStrings(styles);
-}
-
-// src/Items/RichText/editorHelpers/common/setEditorFocus.ts
-import { ReactEditor as ReactEditor6 } from "slate-react";
-function setEditorFocus(editor, selectionContext) {
-  if (!editor) {
-    throw new Error("Editor is not initialized");
+  applyLocked(locked) {
+    this.isLocked = locked;
   }
-  if (selectionContext === "EditTextUnderPointer") {
-    ReactEditor6.focus(editor);
+  applyUnlocked(locked) {
+    this.isLocked = locked;
   }
 }
 
@@ -18607,6 +18253,146 @@ function applyRedo(board, operation) {
 addOperationHandler("undo", applyUndo);
 addOperationHandler("redo", applyRedo);
 
+// src/Items/Connector/ConnectorCommand.ts
+class ConnectorCommand {
+  connector;
+  operation;
+  reverse;
+  constructor(connector, operation) {
+    this.connector = connector;
+    this.operation = operation;
+    this.reverse = this.getReverse();
+  }
+  merge(op) {
+    this.operation = op;
+    return this;
+  }
+  apply() {
+    for (const connector of this.connector) {
+      connector.apply(this.operation);
+    }
+  }
+  revert() {
+    for (const { item, operation } of this.reverse) {
+      item.apply(operation);
+    }
+  }
+  getReverse() {
+    const reverse = [];
+    switch (this.operation.method) {
+      case "setStartPoint":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              startPointData: connector.getStartPoint().serialize()
+            }
+          });
+        }
+        break;
+      case "setEndPoint":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              endPointData: connector.getEndPoint().serialize()
+            }
+          });
+        }
+        break;
+      case "setMiddlePoint":
+        for (const connector of this.connector) {
+          const middlePoint = connector.getMiddlePoint();
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              middlePointData: middlePoint ? middlePoint.serialize() : null
+            }
+          });
+        }
+        break;
+      case "setStartPointerStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              startPointerStyle: connector.getStartPointerStyle()
+            }
+          });
+        }
+        break;
+      case "setEndPointerStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              endPointerStyle: connector.getEndPointerStyle()
+            }
+          });
+        }
+        break;
+      case "setLineStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineStyle: connector.getLineStyle()
+            }
+          });
+        }
+        break;
+      case "setBorderStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              borderStyle: connector.getBorderStyle()
+            }
+          });
+        }
+        break;
+      case "setLineWidth":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineWidth: connector.getLineWidth()
+            }
+          });
+        }
+        break;
+      case "setLineColor":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineColor: connector.getLineColor()
+            }
+          });
+        }
+        break;
+      case "switchPointers":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: this.operation
+          });
+        }
+        break;
+    }
+    return reverse;
+  }
+}
+
 // src/Items/Drawing/DrawingCommand.ts
 class DrawingCommand {
   item;
@@ -18774,7 +18560,6 @@ class FrameCommand {
     }
   }
 }
-
 // src/Items/Comment/CommentCommand.ts
 class CommentCommand {
   comment;
@@ -18852,9 +18637,15 @@ class CommentCommand {
     }
   }
 }
-// node_modules/uuid/dist/esm-browser/native.js
-var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native_default = { randomUUID };
+
+// node_modules/uuid/dist/esm-browser/stringify.js
+var byteToHex = [];
+for (let i = 0;i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr2, offset = 0) {
+  return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
+}
 
 // node_modules/uuid/dist/esm-browser/rng.js
 var getRandomValues;
@@ -18869,14 +18660,9 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/stringify.js
-var byteToHex = [];
-for (let i = 0;i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr2, offset = 0) {
-  return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
-}
+// node_modules/uuid/dist/esm-browser/native.js
+var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native_default = { randomUUID };
 
 // node_modules/uuid/dist/esm-browser/v4.js
 function v4(options, buf, offset) {
@@ -20408,18 +20194,25 @@ class RTreeIndex {
 }
 
 // src/SpatialIndex/LayeredIndex/index.ts
-class Container extends Mbr {
+class Container {
   id;
   item;
   layer;
   zIndex;
+  left;
+  top;
+  right;
+  bottom;
   constructor(id, item, layer, zIndex) {
-    const rect = item.getMbrWithChildren();
-    super(rect.left, rect.top, rect.right, rect.bottom);
     this.id = id;
     this.item = item;
     this.layer = layer;
     this.zIndex = zIndex;
+    const rect = item.getMbrWithChildren();
+    this.left = rect.left;
+    this.top = rect.top;
+    this.right = rect.right;
+    this.bottom = rect.bottom;
   }
 }
 
@@ -21798,7 +21591,7 @@ class RichText extends BaseItem {
   parent = "Board";
   subject = new Subject;
   editor;
-  editorTransforms = Transforms20;
+  editorTransforms = Transforms21;
   editorEditor = Editor31;
   isContainerSet = false;
   isRenderEnabled = true;
@@ -22421,9 +22214,9 @@ class RichText extends BaseItem {
   }
   restoreSelection(selection) {
     if (selection) {
-      Transforms20.select(this.editor.editor, selection);
+      Transforms21.select(this.editor.editor, selection);
     } else {
-      Transforms20.deselect(this.editor.editor);
+      Transforms21.deselect(this.editor.editor);
     }
   }
   deserialize(data) {
@@ -22706,6 +22499,252 @@ class RichText extends BaseItem {
     return this.prevMbr;
   }
 }
+
+// src/Items/Mbr/updateRects.ts
+function updateRects(board, ref, mbr, verticalOffset, horizontalOffset, fit = "contextPanel") {
+  const { selection, camera } = board;
+  const panel = ref.current;
+  const selectionMbr = mbr ?? selection.getMbr();
+  const selectionItems = selection.items;
+  const richTextSelection = selectionItems.getSingle() instanceof RichText ? selectionItems.list()[0] : undefined;
+  if (panel && selectionMbr) {
+    if (fit === "contextPanel") {
+      const panelRect = getContextPanelRect(selectionMbr, camera, panel, !!richTextSelection, horizontalOffset, verticalOffset);
+      return panelRect;
+    }
+    if (fit === "linkToBtn") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitLinkToBtn(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "comment") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitComment(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "threadPanel") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitThreadPanel(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "boardMenu") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitBoardMenu(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "hyperLink") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitHyperLink(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), camera.window.getMbr(), verticalOffset);
+      return panelRect;
+    }
+  }
+  return null;
+}
+function getContextPanelRect(selectionMbr, camera, panel, toLeft, horizontalOffset, verticalOffset) {
+  const transformedMbr = selectionMbr.getTransformed(camera.getMatrix());
+  const windowMbr = camera.window.getMbr();
+  const panelRectFromDom = Mbr.fromDomRect(panel.getBoundingClientRect());
+  const panelRect = toLeft ? fitContextPanelToLeft(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset) : fitContextPanelToCenter(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset);
+  return panelRect;
+}
+function fitContextPanelToLeft(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  const topSpace = selectionMbr.top - view.top;
+  const hasEnoughTopSpace = topSpace >= panelHeight + verticalOffset;
+  if (hasEnoughTopSpace) {
+    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
+    if (newPanel.top < view.top) {
+      newPanel.top = view.top + verticalOffset;
+    }
+  } else {
+    const usePanelTop = panel.top > 1 && panel.top > selectionMbr.top + verticalOffset;
+    newPanel.top = usePanelTop ? panel.top : selectionMbr.bottom + verticalOffset;
+    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
+    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
+    if (isOverflowingBottom || isLargeOffsetForRichText) {
+      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
+    }
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  fitContextPanelInViewRect(newPanel, view, verticalOffset);
+  const itemMbr = selectionMbr.getMbr();
+  newPanel.left = itemMbr.left;
+  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
+  return newPanel;
+}
+function fitContextPanelToCenter(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  const topSpace = selectionMbr.top - view.top;
+  const bottomSpace = view.bottom - selectionMbr.bottom;
+  const shouldPlaceAbove = topSpace > bottomSpace - panelHeight;
+  if (shouldPlaceAbove) {
+    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
+    if (newPanel.top < view.top) {
+      newPanel.top = view.top + verticalOffset;
+    }
+  } else {
+    newPanel.top = selectionMbr.bottom + verticalOffset;
+    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
+    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
+    if (isOverflowingBottom || isLargeOffsetForRichText) {
+      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
+    }
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  fitContextPanelInViewRect(newPanel, view, verticalOffset);
+  const itemCenter = selectionMbr.getCenter();
+  newPanel.left = itemCenter.x - panelWidth / 2;
+  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
+  return newPanel;
+}
+function adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset) {
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.left < view.left + horizontalOffset) {
+    newPanel.left = view.left + horizontalOffset;
+  } else if (newPanel.right + horizontalOffset > view.right) {
+    newPanel.left = view.right - (panelWidth + horizontalOffset);
+  }
+  newPanel.right = newPanel.left + panelWidth;
+}
+function fitContextPanelInViewRect(panel, view, verticalOffset) {
+  const panelHeight = panel.getHeight();
+  if (panel.top <= view.top + verticalOffset) {
+    panel.top = view.top + 2 * verticalOffset;
+    panel.bottom = panel.top + panelHeight;
+  }
+  if (panel.bottom >= view.bottom - verticalOffset) {
+    panel.bottom = view.bottom - 2 * verticalOffset;
+    panel.top = panel.bottom - panelHeight;
+  }
+}
+function fitLinkToBtn(itemMbr, view, panel, verticalOffset = -2, horizontalOffset = -2) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = itemMbr.top - panelHeight - verticalOffset;
+  newPanel.top = newPanel.top + panelHeight;
+  newPanel.bottom = newPanel.top + panelHeight * 2;
+  const panelWidth = panel.getWidth();
+  newPanel.left = itemMbr.right - panelWidth + horizontalOffset;
+  return newPanel;
+}
+function fitHyperLink(linkMbr, panel, view, offset = 20) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = linkMbr.bottom;
+  newPanel.bottom = panelHeight + newPanel.top;
+  const panelWidth = panel.getWidth();
+  newPanel.left = linkMbr.left;
+  newPanel.right = newPanel.left + panelWidth;
+  return newPanel;
+}
+function fitComment(anchor, panel, verticalOffset = 0, horizontalOffset = 0) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top - panelHeight - verticalOffset;
+  newPanel.bottom = newPanel.top + panelHeight;
+  const panelWidth = panel.getWidth();
+  newPanel.left = anchor.left - panelWidth / 2 - horizontalOffset;
+  newPanel.right = newPanel.left + panelWidth;
+  return newPanel;
+}
+function fitBoardMenu(anchor, view, panel, verticalOffset = 20, horizontalOffset = 20) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top;
+  newPanel.bottom = newPanel.top + panelHeight;
+  if (newPanel.bottom > view.bottom - verticalOffset) {
+    newPanel.bottom = view.bottom - verticalOffset;
+    newPanel.top = newPanel.bottom - panelHeight;
+  }
+  newPanel.left = anchor.left;
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.right > view.right - horizontalOffset) {
+    newPanel.right = view.right - horizontalOffset;
+    newPanel.left = newPanel.right - panelWidth;
+  }
+  return newPanel;
+}
+function fitThreadPanel(anchor, view, panel, verticalOffset = 50, horizontalOffset = 50) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top - panelHeight / 2;
+  if (newPanel.top < view.top + verticalOffset) {
+    newPanel.top = view.top + verticalOffset;
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  if (newPanel.bottom > view.bottom - verticalOffset) {
+    newPanel.bottom = view.bottom - verticalOffset;
+    newPanel.top = newPanel.bottom - panelHeight;
+  }
+  newPanel.left = anchor.left;
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.right > view.right - horizontalOffset) {
+    newPanel.right = anchor.right;
+    newPanel.left = newPanel.right - panelWidth;
+  }
+  return newPanel;
+}
+// src/Items/DrawingContext.ts
+class DrawingContext2 {
+  camera;
+  ctx;
+  cursorCtx;
+  matrix;
+  isBorderInvisible = false;
+  shapeVisibilityTreshold = 3;
+  rectangleVisibilyTreshold = 2;
+  constructor(camera, ctx, cursorCtx, matrix = new Matrix2) {
+    this.camera = camera;
+    this.ctx = ctx;
+    this.cursorCtx = cursorCtx;
+    this.matrix = matrix;
+    this.setCamera(camera);
+  }
+  dpi() {
+    return conf.getDPI();
+  }
+  setCamera(camera) {
+    this.camera = camera;
+    this.matrix = camera.getMatrix();
+    const scale = this.matrix.scaleX;
+    this.isBorderInvisible = 4 * scale < 0.1;
+  }
+  clear() {
+    this.ctx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
+    this.ctx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
+    this.matrix.applyToContext(this.ctx);
+  }
+  clearCursor() {
+    if (!this.cursorCtx) {
+      return;
+    }
+    this.cursorCtx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
+    this.cursorCtx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
+    this.matrix.applyToContext(this.cursorCtx);
+  }
+  applyChanges() {
+    this.matrix.applyToContext(this.ctx);
+  }
+  getCameraScale() {
+    return this.camera.getScale();
+  }
+}
 // node_modules/property-information/lib/util/schema.js
 class Schema {
   constructor(property, normal, space) {
@@ -34384,10 +34423,10 @@ function zwitch(key, options) {
   const settings = options || {};
   function one4(value, ...parameters) {
     let fn = one4.invalid;
-    const handlers3 = one4.handlers;
+    const handlers2 = one4.handlers;
     if (value && own6.call(value, key)) {
       const id = String(value[key]);
-      fn = own6.call(handlers3, id) ? handlers3[id] : one4.unknown;
+      fn = own6.call(handlers2, id) ? handlers2[id] : one4.unknown;
     }
     if (fn) {
       return fn.call(this, value, ...parameters);
@@ -40216,7 +40255,7 @@ async function exportBoardSnapshot({
     const selectionMatrix = new Matrix2(translationX, translationY, scaleX, scaleY);
     camera.matrix = selectionMatrix;
   }
-  const context = new DrawingContext(camera, ctx);
+  const context = new DrawingContext2(camera, ctx);
   context.setCamera(camera);
   context.ctx.setTransform(upscaleFactor, 0, 0, upscaleFactor, 0, 0);
   context.matrix.applyToContext(context.ctx);
@@ -42064,7 +42103,7 @@ class Placeholder extends BaseItem {
 function getPlaceholderImage(board, imageDimension) {
   const placeholderCanvas = conf.documentFactory.createElement("canvas");
   const placeholderContext = placeholderCanvas.getContext("2d");
-  const context = new DrawingContext(board.camera, placeholderContext);
+  const context = new DrawingContext2(board.camera, placeholderContext);
   const placeholder = new Placeholder(board);
   if (imageDimension) {
     placeholderCanvas.width = imageDimension.width;
@@ -44708,7 +44747,7 @@ class ExportSnapshot extends Tool {
     const cameraCenter = this.board.camera.getMbr().getCenter();
     this.mbr = new Mbr(cameraCenter.x - conf.EXPORT_SELECTION_BOX_WIDTH / 2, cameraCenter.y - conf.EXPORT_SELECTION_BOX_HEIGHT / 2, cameraCenter.x + conf.EXPORT_SELECTION_BOX_WIDTH / 2, cameraCenter.y + conf.EXPORT_SELECTION_BOX_HEIGHT / 2, "transparent", "transparent", 1);
     this.board.selection.disable();
-    this.tempDrawingContext = new DrawingContext(board.camera, this.tempCtx);
+    this.tempDrawingContext = new DrawingContext2(board.camera, this.tempCtx);
   }
   rectMoveTo(x, y) {
     this.transformation.translateTo(x, y);
@@ -44996,7 +45035,7 @@ function createCanvasDrawer(board) {
     const camera = new Camera;
     const newCameraMatix = new Matrix2(-mbr.left, -mbr.top, 1, 1);
     camera.matrix = newCameraMatix;
-    const context = new DrawingContext(camera, ctx);
+    const context = new DrawingContext2(camera, ctx);
     context.setCamera(camera);
     context.ctx.setTransform(board2.camera.getMatrix().scaleX, 0, 0, board2.camera.getMatrix().scaleY, 0, 0);
     context.matrix.applyToContext(context.ctx);
@@ -49173,8 +49212,11 @@ class Camera {
   boardId = "";
   observableItem = null;
   throttledZoom;
-  isAnimating = false;
   isTrackingAnimation = false;
+  localAnimationTarget = null;
+  localAnimationId = null;
+  localLastTime = null;
+  localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
   trackingAnimationId = null;
   trackingTarget = null;
   lastTrackingTime = null;
@@ -49254,7 +49296,7 @@ class Camera {
   }
   view(_left, _top, _scale) {}
   zoomRelativeToPointerBy(scale) {
-    this.zoomRelativeToPointBy(scale, this.pointer.x, this.pointer.y, 0);
+    this.zoomRelativeToPointBy(scale, this.pointer.x, this.pointer.y);
   }
   zoomRelativeToPointBy(scale, x, y, duration = 400) {
     const startScaleX = this.matrix.scaleX;
@@ -49280,23 +49322,12 @@ class Camera {
       this.subject.publish(this);
       return;
     }
-    const startTime = performance.now();
-    const animate = (currentTime) => {
-      if (!currentTime) {
-        currentTime = performance.now();
-      }
-      const progress = Math.min((currentTime - startTime) / duration, 1);
-      const easedProgress = this.easeOutQuad(progress);
-      this.matrix.translateX = this.lerp(startTranslateX, targetTranslateX, easedProgress);
-      this.matrix.translateY = this.lerp(startTranslateY, targetTranslateY, easedProgress);
-      this.matrix.scaleX = this.lerp(startScaleX, finalScaleX, easedProgress);
-      this.matrix.scaleY = this.lerp(startScaleY, finalScaleY, easedProgress);
-      this.subject.publish(this);
-      if (progress < 1) {
-        safeRequestAnimationFrame(animate);
-      }
-    };
-    safeRequestAnimationFrame(animate);
+    this.animateLocalToTarget({
+      translateX: targetTranslateX,
+      translateY: targetTranslateY,
+      scaleX: finalScaleX,
+      scaleY: finalScaleY
+    });
   }
   saveDownEvent(event) {
     this.touchEvents.set(event.pointerId, event);
@@ -49526,13 +49557,6 @@ class Camera {
     }
   }
   viewRectangle(mbr, offsetInPercent = 10, duration = 500) {
-    if (duration <= 0) {
-      duration = 1;
-    }
-    if (this.isAnimating) {
-      return;
-    }
-    this.isAnimating = true;
     if (mbr.left === mbr.right && mbr.bottom === mbr.top) {
       mbr.left -= 100;
       mbr.right += 100;
@@ -49555,9 +49579,6 @@ class Camera {
     targetScale = Math.min(targetScale, this.maxScale);
     const translationX = this.window.width / 2 - (mbrWithOffset.left + mbrWidth / 2) * targetScale;
     const translationY = this.window.height / 2 - (mbrWithOffset.top + mbrHeight / 2) * targetScale;
-    const startTranslationX = this.matrix.translateX;
-    const startTranslationY = this.matrix.translateY;
-    const startScale = this.matrix.scaleX;
     if (duration === 0) {
       this.matrix.translateX = translationX;
       this.matrix.translateY = translationY;
@@ -49566,29 +49587,76 @@ class Camera {
       this.subject.publish(this);
       return;
     }
-    const startTime = performance.now();
-    const animate = () => {
-      const currentTime = performance.now();
-      const progress = Math.min((currentTime - startTime) / duration, 1);
-      const easedProgress = this.easeOutQuad(progress);
-      this.matrix.translateX = this.lerp(startTranslationX, translationX, easedProgress);
-      this.matrix.translateY = this.lerp(startTranslationY, translationY, easedProgress);
-      this.matrix.scaleX = this.lerp(startScale, targetScale, easedProgress);
-      this.matrix.scaleY = this.matrix.scaleX;
+    this.animateLocalToTarget({
+      translateX: translationX,
+      translateY: translationY,
+      scaleX: targetScale,
+      scaleY: targetScale
+    });
+  }
+  cancelLocalAnimation() {
+    if (this.localAnimationId !== null) {
+      cancelAnimationFrame(this.localAnimationId);
+      this.localAnimationId = null;
+    }
+    this.localAnimationTarget = null;
+    this.localLastTime = null;
+    this.localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
+  }
+  animateLocalToTarget(target) {
+    this.localAnimationTarget = target;
+    if (this.localAnimationId !== null) {
+      return;
+    }
+    this.localLastTime = null;
+    const STIFFNESS = 150;
+    const DAMPING = 28;
+    const SNAP_PX = 0.5;
+    const SNAP_SCALE = 0.0005;
+    const SNAP_VEL = 1;
+    const springStep = (pos, tgt, vel, dt) => {
+      const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
+      const newVel = vel + acc * dt;
+      return [pos + newVel * dt, newVel];
+    };
+    const loop = () => {
+      const tgt = this.localAnimationTarget;
+      if (!tgt) {
+        this.localAnimationId = null;
+        return;
+      }
+      const now = performance.now();
+      const dt = Math.min(this.localLastTime !== null ? now - this.localLastTime : 16, 50) / 1000;
+      this.localLastTime = now;
+      const v = this.localSpringVelocity;
+      const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
+      const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
+      const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
+      const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
+      this.matrix.translateX = tx;
+      this.matrix.translateY = ty;
+      this.matrix.scaleX = sx;
+      this.matrix.scaleY = sy;
+      this.localSpringVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy };
+      this.updateBoardPointer();
       this.subject.publish(this);
-      if (progress < 1) {
-        safeRequestAnimationFrame(animate);
-      } else {
-        this.isAnimating = false;
+      const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
+      if (settled) {
+        this.matrix.translateX = tgt.translateX;
+        this.matrix.translateY = tgt.translateY;
+        this.matrix.scaleX = tgt.scaleX;
+        this.matrix.scaleY = tgt.scaleY;
+        this.localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
+        this.localAnimationTarget = null;
+        this.localAnimationId = null;
+        this.localLastTime = null;
+        this.updateBoardPointer();
+        this.subject.publish(this);
+        return;
       }
+      this.localAnimationId = safeRequestAnimationFrame(loop) || null;
     };
-    safeRequestAnimationFrame(animate);
-  }
-  lerp(a2, b, time) {
-    return a2 + (b - a2) * time;
-  }
-  easeOutQuad(time) {
-    return time * (2 - time);
+    this.localAnimationId = safeRequestAnimationFrame(loop) || null;
   }
   zoomToFit(rect, offsetInPercent = 10, duration = 480) {
     this.viewRectangle(rect, offsetInPercent, duration);
@@ -49597,11 +49665,13 @@ class Camera {
     return { x: 0, y: 0 };
   }
   translateTo(x, y) {
+    this.cancelLocalAnimation();
     this.matrix.translate(x, y);
     this.updateBoardPointer();
     this.subject.publish(this);
   }
   translateBy(x, y) {
+    this.cancelLocalAnimation();
     this.matrix.translate(x * this.matrix.scaleX, y * this.matrix.scaleY);
     this.updateBoardPointer();
     this.subject.publish(this);
@@ -56182,6 +56252,21 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
   }
   const events = expandEvents(eventArray);
   board.selection.memoize();
+  const focusedTextId = board.selection.memorySnapshot?.focus?.textToEdit;
+  let localOpOriginalSelection = null;
+  if (focusedTextId) {
+    const allUnconfirmed = [...list6.getRecordsToSend(), ...list6.getNewRecords()];
+    for (const rec of allUnconfirmed) {
+      const op = rec.event.body.operation;
+      if (op.class === "RichText" && op.method === "edit") {
+        const items = Array.isArray(op.item) ? op.item : [op.item];
+        if (items.includes(focusedTextId)) {
+          localOpOriginalSelection = op.selection;
+          break;
+        }
+      }
+    }
+  }
   const createdItems = [];
   const updatedText = [];
   const filter = (rec) => {
@@ -56191,6 +56276,10 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
       createdItems.push(...creating);
       return false;
     }
+    if (op.class === "RichText" && op.method === "edit") {
+      const items = Array.isArray(op.item) ? op.item : [op.item];
+      updatedText.push(...items);
+    }
     return true;
   };
   list6.revertUnconfirmed(filter);
@@ -56209,7 +56298,28 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
     return arr2.some((item) => lookup9.has(item));
   };
   const currSelection = board.selection.list().map((item) => item.getId());
-  if (hasAnyOverlap(currSelection, createdItems) || hasAnyOverlap(currSelection, updatedText)) {
+  const memoizedCursor = board.selection.memorySnapshot?.focus?.selection;
+  if (focusedTextId && localOpOriginalSelection && memoizedCursor && hasAnyOverlap(currSelection, updatedText)) {
+    const rt = board.items.getById(focusedTextId)?.getRichText();
+    if (rt) {
+      const otAdjustedCursor = rt.editor.getSelection();
+      if (otAdjustedCursor && memoizedCursor.anchor.path.length > 0 && memoizedCursor.focus.path.length > 0) {
+        const deltaAnchor = otAdjustedCursor.anchor.offset - (localOpOriginalSelection?.anchor?.offset ?? 0);
+        const deltaFocus = otAdjustedCursor.focus.offset - (localOpOriginalSelection?.focus?.offset ?? 0);
+        const adjustedSelection = {
+          anchor: {
+            path: memoizedCursor.anchor.path,
+            offset: memoizedCursor.anchor.offset + deltaAnchor
+          },
+          focus: {
+            path: memoizedCursor.focus.path,
+            offset: memoizedCursor.focus.offset + deltaFocus
+          }
+        };
+        rt.editorTransforms.select(rt.editor.editor, adjustedSelection);
+      }
+    }
+  } else if (hasAnyOverlap(currSelection, createdItems) || hasAnyOverlap(currSelection, updatedText)) {
     board.selection.applyMemoizedCaretOrRange();
   }
 }
@@ -56492,16 +56602,16 @@ function createEvents(board, connection, lastIndex) {
 }
 // src/Events/MessageRouter/createMessageRouter.ts
 function createMessageRouter() {
-  const handlers3 = new Map;
+  const handlers2 = new Map;
   function addHandler(type, handler) {
-    handlers3.set(type, (message, board) => {
+    handlers2.set(type, (message, board) => {
       if (message.type === type) {
         handler(message, board);
       }
     });
   }
   function handleMessage(message, board) {
-    const handler = handlers3.get(message.type);
+    const handler = handlers2.get(message.type);
     if (handler) {
       handler(message, board);
     } else {
@@ -57208,7 +57318,7 @@ export {
   ExportQuality,
   Events2 as Events,
   EditorContainer,
-  DrawingContext,
+  DrawingContext2 as DrawingContext,
   Drawing,
   Dice,
   DefaultTransformationData,