@anu3ev/fabric-image-editor 0.7.11 → 0.7.12

package/dist/main.js

@@ -258,17 +258,17 @@ function I(e, t, n, r, i) {
 function ee(e, t, n, r, i) {
 	e.save(), e.translate(t, n), e.rotate(C.degreesToRadians(i.angle)), e.fillStyle = F, e.strokeStyle = P, e.lineWidth = 1, e.beginPath(), e.roundRect(-8 / 2, -20 / 2, 8, 20, 100), e.fill(), e.stroke(), e.restore();
 }
-function L(e, t, n, r, i) {
+function te(e, t, n, r, i) {
 	e.save(), e.translate(t, n), e.rotate(C.degreesToRadians(i.angle)), e.fillStyle = F, e.strokeStyle = P, e.lineWidth = 1, e.beginPath(), e.roundRect(-20 / 2, -8 / 2, 20, 8, 100), e.fill(), e.stroke(), e.restore();
 }
-var R = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", te = new Image();
-te.src = R;
-function ne(e, t, n, r, i) {
-	e.save(), e.translate(t, n), e.rotate(C.degreesToRadians(i.angle)), e.fillStyle = N, e.beginPath(), e.arc(0, 0, 16, 0, 2 * Math.PI), e.fill(), e.drawImage(te, -16 / 2, -16 / 2, 16, 16), e.restore();
+var L = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ne = new Image();
+ne.src = L;
+function re(e, t, n, r, i) {
+	e.save(), e.translate(t, n), e.rotate(C.degreesToRadians(i.angle)), e.fillStyle = N, e.beginPath(), e.arc(0, 0, 16, 0, 2 * Math.PI), e.fill(), e.drawImage(ne, -16 / 2, -16 / 2, 16, 16), e.restore();
 }
 //#endregion
 //#region src/editor/customized-controls/default-controls.ts
-var z = {
+var R = {
 	tl: {
 		render: I,
 		sizeX: 12,
@@ -312,27 +312,27 @@ var z = {
 		offsetY: 0
 	},
 	mt: {
-		render: L,
+		render: te,
 		sizeX: 20,
 		sizeY: 8,
 		offsetX: 0,
 		offsetY: 0
 	},
 	mb: {
-		render: L,
+		render: te,
 		sizeX: 20,
 		sizeY: 8,
 		offsetX: 0,
 		offsetY: 0
 	},
 	mtr: {
-		render: ne,
+		render: re,
 		sizeX: 32,
 		sizeY: 32,
 		offsetX: 0,
 		offsetY: -32
 	}
-}, re = class t {
+}, ie = class t {
 	static wrapWidthControl(e) {
 		if (!e?.actionHandler) return;
 		let t = e.actionHandler;
@@ -342,7 +342,7 @@ var z = {
 		};
 	}
 	static applyControlOverrides(e) {
-		Object.entries(z).forEach(([t, n]) => {
+		Object.entries(R).forEach(([t, n]) => {
 			let r = e[t];
 			r && (Object.assign(r, n), t === "mtr" && (r.cursorStyle = "grab", r.mouseDownHandler = (e, t, n, r) => {
 				let i = t?.target;
@@ -432,7 +432,7 @@ var z = {
 			mr: !0
 		});
 	}
-}, B = class e {
+}, z = class e {
 	static {
 		this.registeredFontKeys = /* @__PURE__ */ new Set();
 	}
@@ -585,7 +585,7 @@ var z = {
 		};
 		return Object.entries(e).filter(([, e]) => e != null && `${e}`.length > 0).map(([e, n]) => `${t[e] ?? e}: ${n};`);
 	}
-}, V = {
+}, B = {
 	style: {
 		position: "absolute",
 		display: "none",
@@ -687,7 +687,7 @@ var z = {
 			e.layerManager.sendBackwards();
 		}
 	}
-}, H = class {
+}, V = class {
 	constructor({ editor: e }) {
 		this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.isTemporarilyHidden = !1, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._initToolbar();
 	}
@@ -695,22 +695,22 @@ var z = {
 		if (!this.options.showToolbar) return;
 		let e = this.options.toolbar || {};
 		this.config = {
-			...V,
+			...B,
 			...e,
 			style: {
-				...V.style,
+				...B.style,
 				...e.style || {}
 			},
 			btnStyle: {
-				...V.btnStyle,
+				...B.btnStyle,
 				...e.btnStyle || {}
 			},
 			icons: {
-				...V.icons,
+				...B.icons,
 				...e.icons || {}
 			},
 			handlers: {
-				...V.handlers,
+				...B.handlers,
 				...e.handlers || {}
 			}
 		}, this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.isTemporarilyHidden = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
@@ -788,7 +788,7 @@ var z = {
 	destroy() {
 		this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
 	}
-}, ie = {
+}, H = {
 	position: "absolute",
 	display: "none",
 	background: "#2B2D33",
@@ -807,7 +807,7 @@ var z = {
 		this.isActive = !1, this.currentAngle = 0, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._createDOM(), this._bindEvents();
 	}
 	_createDOM() {
-		this.el = document.createElement("div"), this.el.className = U, Object.entries(ie).forEach(([e, t]) => {
+		this.el = document.createElement("div"), this.el.className = U, Object.entries(H).forEach(([e, t]) => {
 			this.el.style.setProperty(e, t);
 		}), this.canvas.wrapperEl.appendChild(this.el);
 	}
@@ -852,7 +852,7 @@ var z = {
 	destroy() {
 		this.canvas && (this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:cleared", this._onSelectionCleared)), this.el?.parentNode && this.el.parentNode.removeChild(this.el), this.el = null, this.editor = null, this.canvas = null, this.options = null;
 	}
-}, oe = /* @__PURE__ */ "id.backgroundId.customData.backgroundType.format.contentType.width.height.originX.originY.locked.editable.evented.selectable.lockMovementX.lockMovementY.lockRotation.lockScalingX.lockScalingY.lockSkewingX.lockSkewingY.styles.lineFontDefaults.textCaseRaw.uppercase.autoExpand.linethrough.underline.fontStyle.fontWeight.backgroundOpacity.paddingTop.paddingRight.paddingBottom.paddingLeft.radiusTopLeft.radiusTopRight.radiusBottomRight.radiusBottomLeft.shapeComposite.shapePresetKey.shapeBaseWidth.shapeBaseHeight.shapeManualBaseWidth.shapeManualBaseHeight.shapeTextAutoExpand.shapeAlignHorizontal.shapeAlignVertical.shapePaddingTop.shapePaddingRight.shapePaddingBottom.shapePaddingLeft.shapeFill.shapeStroke.shapeStrokeWidth.shapeStrokeDashArray.shapeOpacity.shapeRounding.shapeNodeType".split(".");
+}, oe = /* @__PURE__ */ "id.backgroundId.customData.backgroundType.format.contentType.width.height.originX.originY.locked.editable.evented.selectable.lockMovementX.lockMovementY.lockRotation.lockScalingX.lockScalingY.lockSkewingX.lockSkewingY.styles.lineFontDefaults.textCaseRaw.uppercase.autoExpand.linethrough.underline.fontStyle.fontWeight.backgroundOpacity.paddingTop.paddingRight.paddingBottom.paddingLeft.radiusTopLeft.radiusTopRight.radiusBottomRight.radiusBottomLeft.shapeComposite.shapePresetKey.shapeBaseWidth.shapeBaseHeight.shapeManualBaseWidth.shapeManualBaseHeight.shapeReplaceBoxWidth.shapeReplaceBoxHeight.shapeTextAutoExpand.shapeAlignHorizontal.shapeAlignVertical.shapePaddingTop.shapePaddingRight.shapePaddingBottom.shapePaddingLeft.shapeFill.shapeStroke.shapeStrokeWidth.shapeStrokeDashArray.shapeOpacity.shapeRounding.shapeNodeType".split(".");
 //#endregion
 //#region src/editor/history-manager/diff-normalization.ts
 function se({ state: e }) {
@@ -1293,7 +1293,7 @@ var je = class {
 			}
 		}
 	}
-}, Me = .1, Ne = 4096, Pe = 4096, Fe = "application/image-editor:", Ie = /* @__PURE__ */ "customData.backgroundType.format.contentType.width.height.originX.originY.locked.editable.evented.selectable.lockMovementX.lockMovementY.lockRotation.lockScalingX.lockScalingY.lockSkewingX.lockSkewingY.styles.lineFontDefaults.textCaseRaw.uppercase.autoExpand.linethrough.underline.fontStyle.fontWeight.backgroundOpacity.paddingTop.paddingRight.paddingBottom.paddingLeft.radiusTopLeft.radiusTopRight.radiusBottomRight.radiusBottomLeft.shapeComposite.shapePresetKey.shapeBaseWidth.shapeBaseHeight.shapeManualBaseWidth.shapeManualBaseHeight.shapeTextAutoExpand.shapeAlignHorizontal.shapeAlignVertical.shapePaddingTop.shapePaddingRight.shapePaddingBottom.shapePaddingLeft.shapeFill.shapeStroke.shapeStrokeWidth.shapeStrokeDashArray.shapeOpacity.shapeRounding.shapeNodeType".split("."), Le = class e {
+}, Me = .1, Ne = 4096, Pe = 4096, Fe = "application/image-editor:", Ie = /* @__PURE__ */ "customData.backgroundType.format.contentType.width.height.originX.originY.locked.editable.evented.selectable.lockMovementX.lockMovementY.lockRotation.lockScalingX.lockScalingY.lockSkewingX.lockSkewingY.styles.lineFontDefaults.textCaseRaw.uppercase.autoExpand.linethrough.underline.fontStyle.fontWeight.backgroundOpacity.paddingTop.paddingRight.paddingBottom.paddingLeft.radiusTopLeft.radiusTopRight.radiusBottomRight.radiusBottomLeft.shapeComposite.shapePresetKey.shapeBaseWidth.shapeBaseHeight.shapeManualBaseWidth.shapeManualBaseHeight.shapeReplaceBoxWidth.shapeReplaceBoxHeight.shapeTextAutoExpand.shapeAlignHorizontal.shapeAlignVertical.shapePaddingTop.shapePaddingRight.shapePaddingBottom.shapePaddingLeft.shapeFill.shapeStroke.shapeStrokeWidth.shapeStrokeDashArray.shapeOpacity.shapeRounding.shapeNodeType".split("."), Le = class e {
 	constructor({ editor: e }) {
 		this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
 	}
@@ -2269,30 +2269,30 @@ var Ve = class {
 			point: r
 		}), this.editor.panConstraintManager.updateBounds();
 	}
-}, W = ({ value: e, fallback: t = 0 }) => typeof e == "number" && Number.isFinite(e) ? e : typeof t == "number" && Number.isFinite(t) ? t : 0, We = ({ value: e, dimension: t, useRelativePositions: n }) => {
-	let r = W({ value: e });
+}, We = ({ value: e, fallback: t = 0 }) => typeof e == "number" && Number.isFinite(e) ? e : typeof t == "number" && Number.isFinite(t) ? t : 0, Ge = ({ value: e, dimension: t, useRelativePositions: n }) => {
+	let r = We({ value: e });
 	return n ? r : r / (t || 1);
-}, Ge = ({ object: e, baseWidth: t, baseHeight: n, useRelativePositions: r }) => ({
-	x: We({
+}, Ke = ({ object: e, baseWidth: t, baseHeight: n, useRelativePositions: r }) => ({
+	x: Ge({
 		value: e.left,
 		dimension: t,
 		useRelativePositions: r
 	}),
-	y: We({
+	y: Ge({
 		value: e.top,
 		dimension: n,
 		useRelativePositions: r
 	})
-}), Ke = ({ normalizedX: e, normalizedY: t, bounds: n }) => {
+}), qe = ({ normalizedX: e, normalizedY: t, bounds: n }) => {
 	let { left: r, top: i, width: a, height: o } = n;
 	return new p(r + e * a, i + t * o);
-}, qe = ({ object: e }) => {
+}, Je = ({ object: e }) => {
 	let { left: t = 0, top: n = 0, width: r = 0, height: i = 0, scaleX: a = 1, scaleY: o = 1, strokeWidth: s = 0, strokeUniform: c = !1 } = e, l = typeof e.type == "string" ? e.type.toLowerCase() : "", u = e instanceof _ || l === "textbox" || l === "background-textbox", d = c ? 0 : s, f = r + d, p = i + d, m = {
 		left: Math.round(t),
 		top: Math.round(n)
 	};
 	u || (f > 0 && (m.scaleX = Math.max(1, Math.round(f * a)) / f), p > 0 && (m.scaleY = Math.max(1, Math.round(p * o)) / p)), e.set(m), e.setCoords();
-}, Je = ({ object: e }) => {
+}, Ye = ({ object: e }) => {
 	if (!e) return null;
 	try {
 		e.setCoords();
@@ -2311,17 +2311,17 @@ var Ve = class {
 };
 //#endregion
 //#region src/editor/utils/primitive-shapes.ts
-function Ye({ canvas: e, object: t, left: n, top: r, centerPoint: i, flags: a }) {
+function Xe({ canvas: e, object: t, left: n, top: r, centerPoint: i, flags: a }) {
 	let { withoutSelection: o, withoutAdding: s } = a;
 	if (n === void 0 && r === void 0) {
 		let n = i ?? e.getCenterPoint();
 		t.setPositionByOrigin(n, "center", "center"), t.setCoords();
 	}
-	return qe({ object: t }), s ? t : (e.add(t), o || e.setActiveObject(t), e.renderAll(), t);
+	return Je({ object: t }), s ? t : (e.add(t), o || e.setActiveObject(t), e.renderAll(), t);
 }
-var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
+var Ze = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	let { id: i = `rect-${D()}`, left: a, top: o, width: s = 100, height: c = 100, fill: l = "blue", ...u } = t;
-	return Ye({
+	return Xe({
 		canvas: e,
 		object: new g({
 			id: i,
@@ -2337,7 +2337,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		centerPoint: n,
 		flags: r
 	});
-}, Ze = class {
+}, Qe = class {
 	constructor({ editor: e }) {
 		this.editor = e, this.isBlocked = !1, this.overlayMask = null;
 	}
@@ -2359,7 +2359,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	}
 	_createOverlay() {
 		let { historyManager: e, options: { overlayMaskColor: t = "rgba(0,0,0,0.5)" } } = this.editor;
-		e.suspendHistory(), this.overlayMask = Xe({
+		e.suspendHistory(), this.overlayMask = Ze({
 			canvas: this.editor.canvas,
 			options: {
 				...this._getOverlayGeometry(),
@@ -2397,7 +2397,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 			e.evented = !0, e.selectable = !0;
 		}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), n.resumeHistory(), n.flushDeferredSaveAfterUnblock();
 	}
-}, Qe = class e {
+}, $e = class e {
 	constructor({ editor: e }) {
 		this.editor = e, this.backgroundObject = null;
 	}
@@ -2589,7 +2589,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		this.backgroundObject && a !== i + 1 && e.moveObjectTo(this.backgroundObject, i + 1), e.requestRenderAll(), n.resumeHistory();
 	}
 	_createColorBackground(e) {
-		this.backgroundObject = Xe({
+		this.backgroundObject = Ze({
 			canvas: this.editor.canvas,
 			options: {
 				...this._getMontageBackgroundRectOptions(),
@@ -2606,7 +2606,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		}), this.refresh();
 	}
 	_createGradientBackground(t) {
-		this.backgroundObject = Xe({
+		this.backgroundObject = Ze({
 			canvas: this.editor.canvas,
 			options: {
 				...this._getMontageBackgroundRectOptions(),
@@ -2705,7 +2705,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 			return e.color === n.color && Math.abs(e.offset - n.offset) < 1e-4;
 		}) ? !1 : e.type === "linear" && t.type === "linear" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 : e.type === "radial" && t.type === "radial" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 && Math.abs(e.coords.r1 - t.coords.r1) < 1e-4 && Math.abs(e.coords.r2 - t.coords.r2) < 1e-4 : !1;
 	}
-}, $e = class t {
+}, et = class t {
 	constructor({ editor: e }) {
 		this.editor = e;
 	}
@@ -2779,28 +2779,24 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 			e.sendObjectBackwards(t.obj);
 		});
 	}
-}, G = 180, et = {
+}, W = 180, tt = {
 	top: 0,
 	right: 0,
 	bottom: 0,
 	left: 0
-}, tt = .45, nt = ({ value: e }) => Number(e.toFixed(4)), rt = ({ sides: e, radius: t = 50, centerX: n = 50, centerY: r = 50, rotation: i = -Math.PI / 2 }) => {
-	let a = [];
-	for (let o = 0; o < e; o += 1) {
-		let s = i + o * Math.PI * 2 / e;
-		a.push({
-			x: nt({ value: n + t * Math.cos(s) }),
-			y: nt({ value: r + t * Math.sin(s) })
-		});
-	}
-	return a;
+}, nt = .45, rt = ({ value: e }) => Number(e.toFixed(4)), G = ({ width: e, height: t }) => {
+	let n = W / Math.max(e, t);
+	return {
+		width: rt({ value: e * n }),
+		height: rt({ value: t * n })
+	};
 }, it = ({ spikes: e, outerRadius: t = 50, innerRadius: n = 22, centerX: r = 50, centerY: i = 50, rotation: a = -Math.PI / 2 }) => {
 	let o = [], s = e * 2;
 	for (let c = 0; c < s; c += 1) {
 		let s = c % 2 == 0 ? t : n, l = a + c * Math.PI / e;
 		o.push({
-			x: nt({ value: r + s * Math.cos(l) }),
-			y: nt({ value: i + s * Math.sin(l) })
+			x: rt({ value: r + s * Math.cos(l) }),
+			y: rt({ value: i + s * Math.sin(l) })
 		});
 	}
 	return o;
@@ -2808,8 +2804,8 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	{
 		key: "circle",
 		type: "ellipse",
-		width: G,
-		height: G,
+		width: W,
+		height: W,
 		internalTextInset: {
 			top: .24,
 			right: .24,
@@ -2817,29 +2813,46 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 			left: .24
 		}
 	},
+	{
+		key: "pie",
+		type: "path",
+		...G({
+			width: 34,
+			height: 34
+		}),
+		path: "M34 17A17 17 0 1 1 17 0v17z",
+		internalTextInset: {
+			top: .22,
+			right: .26,
+			bottom: .14,
+			left: .14
+		}
+	},
 	{
 		key: "triangle",
 		type: "triangle",
-		width: G,
-		height: G,
+		...G({
+			width: 38,
+			height: 31
+		}),
 		internalTextInset: {
-			top: .38,
-			right: .2,
-			bottom: .14,
-			left: .2
+			top: .34,
+			right: .18,
+			bottom: .12,
+			left: .18
 		}
 	},
 	{
 		key: "square",
 		type: "rect",
-		width: G,
-		height: G
+		width: W,
+		height: W
 	},
 	{
 		key: "diamond",
 		type: "polygon",
-		width: G,
-		height: G,
+		width: W,
+		height: W,
 		points: [
 			{
 				x: 50,
@@ -2868,95 +2881,194 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	{
 		key: "pentagon",
 		type: "polygon",
-		width: G,
-		height: G,
-		points: rt({
-			sides: 5,
-			radius: 50,
-			rotation: -Math.PI / 2
+		...G({
+			width: 36,
+			height: 33
 		}),
+		points: [
+			{
+				x: 50,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 38.197
+			},
+			{
+				x: 80.9028,
+				y: 100
+			},
+			{
+				x: 19.0972,
+				y: 100
+			},
+			{
+				x: 0,
+				y: 38.197
+			}
+		],
 		internalTextInset: {
-			top: .28,
-			right: .2,
-			bottom: .2,
-			left: .2
+			top: .24,
+			right: .18,
+			bottom: .18,
+			left: .18
 		}
 	},
 	{
 		key: "hexagon",
 		type: "polygon",
-		width: G,
-		height: G,
-		points: rt({
-			sides: 6,
-			radius: 50,
-			rotation: 0
+		...G({
+			width: 32,
+			height: 36
 		}),
+		points: [
+			{
+				x: 50,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 25
+			},
+			{
+				x: 100,
+				y: 75
+			},
+			{
+				x: 50,
+				y: 100
+			},
+			{
+				x: 0,
+				y: 75
+			},
+			{
+				x: 0,
+				y: 25
+			}
+		],
 		internalTextInset: {
-			top: .24,
-			right: .2,
-			bottom: .24,
-			left: .2
+			top: .22,
+			right: .18,
+			bottom: .22,
+			left: .18
 		}
 	},
 	{
 		key: "star",
 		type: "polygon",
-		width: G,
-		height: G,
+		...G({
+			width: 38,
+			height: 36
+		}),
+		points: [
+			{
+				x: 50,
+				y: 0
+			},
+			{
+				x: 61.8026,
+				y: 38.1944
+			},
+			{
+				x: 100,
+				y: 38.1944
+			},
+			{
+				x: 69.0974,
+				y: 61.8056
+			},
+			{
+				x: 80.9026,
+				y: 100
+			},
+			{
+				x: 50,
+				y: 76.3944
+			},
+			{
+				x: 19.0974,
+				y: 100
+			},
+			{
+				x: 30.9026,
+				y: 61.8056
+			},
+			{
+				x: 0,
+				y: 38.1944
+			},
+			{
+				x: 38.1974,
+				y: 38.1944
+			}
+		],
+		internalTextInset: {
+			top: .3,
+			right: .3,
+			bottom: .3,
+			left: .3
+		}
+	},
+	{
+		key: "star-16",
+		type: "polygon",
+		width: W,
+		height: W,
 		points: it({
-			spikes: 5,
+			spikes: 16,
 			outerRadius: 50,
-			innerRadius: 21,
+			innerRadius: 45,
 			rotation: -Math.PI / 2
 		}),
 		internalTextInset: {
-			top: .32,
-			right: .32,
-			bottom: .32,
-			left: .32
+			top: .24,
+			right: .24,
+			bottom: .24,
+			left: .24
 		}
 	},
 	{
 		key: "sparkle",
 		type: "polygon",
-		width: G,
-		height: G,
+		width: W,
+		height: W,
 		points: it({
 			spikes: 4,
 			outerRadius: 50,
-			innerRadius: 16,
+			innerRadius: 19.1,
 			rotation: -Math.PI / 2
 		}),
 		internalTextInset: {
-			top: .34,
-			right: .34,
-			bottom: .34,
-			left: .34
+			top: .32,
+			right: .32,
+			bottom: .32,
+			left: .32
 		}
 	},
 	{
 		key: "heart",
 		type: "path",
-		width: G,
-		height: G,
+		...G({
+			width: 36,
+			height: 34
+		}),
 		path: [
-			"M50 92 C20 74 4 56 4 35",
-			"C4 19 16 8 30 8 C40 8 47 12 50 18",
-			"C53 12 60 8 70 8 C84 8 96 19 96 35",
-			"C96 56 80 74 50 92 Z"
+			"M26 0c5.523 0 10 4.477 10 10l-.013.586",
+			"C35.443 22.876 18.003 33.998 18 34c-.004-.003-18-11.48-18-24",
+			"C0 4.477 4.477 0 10 0a9.99 9.99 0 0 1 8 3.999A9.99 9.99 0 0 1 26 0"
 		].join(" "),
 		internalTextInset: {
-			top: .3,
-			right: .28,
-			bottom: .22,
-			left: .28
+			top: .22,
+			right: .22,
+			bottom: .16,
+			left: .22
 		}
 	},
 	{
 		key: "arrow-right-fat",
 		type: "polygon",
-		width: G,
+		width: W,
 		height: 130,
 		points: [
 			{
@@ -2999,7 +3111,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		key: "arrow-up-fat",
 		type: "polygon",
 		width: 130,
-		height: G,
+		height: W,
 		points: [
 			{
 				x: 38,
@@ -3040,50 +3152,140 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	{
 		key: "arrow-right",
 		type: "polygon",
-		width: G,
-		height: 120,
+		...G({
+			width: 36,
+			height: 28
+		}),
 		points: [
+			{
+				x: 100,
+				y: 50
+			},
+			{
+				x: 61.1111,
+				y: 100
+			},
+			{
+				x: 61.1111,
+				y: 71.4286
+			},
 			{
 				x: 0,
-				y: 42
+				y: 71.4286
 			},
 			{
-				x: 66,
-				y: 42
+				x: 0,
+				y: 28.5714
+			},
+			{
+				x: 61.1111,
+				y: 28.5714
+			},
+			{
+				x: 61.1111,
+				y: 0
+			}
+		],
+		internalTextInset: {
+			top: .2,
+			right: .38,
+			bottom: .2,
+			left: .1
+		}
+	},
+	{
+		key: "arrow-left",
+		type: "polygon",
+		...G({
+			width: 36,
+			height: 28
+		}),
+		points: [
+			{
+				x: 38.8889,
+				y: 28.5714
 			},
 			{
-				x: 66,
-				y: 22
+				x: 100,
+				y: 28.5714
 			},
 			{
 				x: 100,
+				y: 71.4286
+			},
+			{
+				x: 38.8889,
+				y: 71.4286
+			},
+			{
+				x: 38.8889,
+				y: 100
+			},
+			{
+				x: 0,
 				y: 50
 			},
 			{
-				x: 66,
-				y: 78
+				x: 38.8889,
+				y: 0
+			}
+		],
+		internalTextInset: {
+			top: .2,
+			right: .1,
+			bottom: .2,
+			left: .38
+		}
+	},
+	{
+		key: "arrow-up",
+		type: "polygon",
+		...G({
+			width: 28,
+			height: 36
+		}),
+		points: [
+			{
+				x: 71.4286,
+				y: 100
+			},
+			{
+				x: 28.5714,
+				y: 100
 			},
 			{
-				x: 66,
-				y: 58
+				x: 28.5714,
+				y: 38.8889
 			},
 			{
 				x: 0,
-				y: 58
+				y: 38.8889
+			},
+			{
+				x: 50,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 38.8889
+			},
+			{
+				x: 71.4286,
+				y: 38.8889
 			}
 		],
 		internalTextInset: {
-			top: .24,
-			right: .4,
-			bottom: .24,
-			left: .14
+			top: .38,
+			right: .2,
+			bottom: .1,
+			left: .2
 		}
 	},
 	{
 		key: "arrow-down-fat",
 		type: "polygon",
 		width: 130,
-		height: G,
+		height: W,
 		points: [
 			{
 				x: 38,
@@ -3122,193 +3324,315 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		}
 	},
 	{
-		key: "arrow-up-down",
+		key: "arrow-down",
 		type: "polygon",
-		width: 130,
-		height: G,
+		...G({
+			width: 28,
+			height: 36
+		}),
 		points: [
 			{
-				x: 50,
+				x: 0,
+				y: 61.1111
+			},
+			{
+				x: 28.5714,
+				y: 61.1111
+			},
+			{
+				x: 28.5714,
 				y: 0
 			},
 			{
-				x: 82,
-				y: 34
+				x: 71.4286,
+				y: 0
 			},
 			{
-				x: 62,
-				y: 34
+				x: 71.4286,
+				y: 61.1111
 			},
 			{
-				x: 62,
-				y: 66
+				x: 100,
+				y: 61.1111
 			},
 			{
-				x: 82,
-				y: 66
+				x: 50,
+				y: 100
+			}
+		],
+		internalTextInset: {
+			top: .1,
+			right: .2,
+			bottom: .38,
+			left: .2
+		}
+	},
+	{
+		key: "arrow-up-down",
+		type: "polygon",
+		...G({
+			width: 20,
+			height: 38
+		}),
+		points: [
+			{
+				x: 70,
+				y: 73.6842
+			},
+			{
+				x: 100,
+				y: 73.6842
 			},
 			{
 				x: 50,
 				y: 100
 			},
 			{
-				x: 18,
-				y: 66
+				x: 0,
+				y: 73.6842
 			},
 			{
-				x: 38,
-				y: 66
+				x: 30,
+				y: 73.6842
 			},
 			{
-				x: 38,
-				y: 34
+				x: 30,
+				y: 26.3158
 			},
 			{
-				x: 18,
-				y: 34
+				x: 0,
+				y: 26.3158
+			},
+			{
+				x: 50,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 26.3158
+			},
+			{
+				x: 70,
+				y: 26.3158
 			}
 		],
 		internalTextInset: {
-			top: .38,
-			right: .26,
-			bottom: .38,
-			left: .26
+			top: .34,
+			right: .2,
+			bottom: .34,
+			left: .2
 		}
 	},
 	{
 		key: "arrow-left-right",
 		type: "polygon",
-		width: G,
-		height: 130,
+		...G({
+			width: 38,
+			height: 20
+		}),
 		points: [
 			{
-				x: 0,
+				x: 100,
 				y: 50
 			},
 			{
-				x: 30,
-				y: 18
+				x: 73.6842,
+				y: 100
 			},
 			{
-				x: 30,
-				y: 38
+				x: 73.6842,
+				y: 70
 			},
 			{
-				x: 70,
-				y: 38
+				x: 26.3158,
+				y: 70
 			},
 			{
-				x: 70,
-				y: 18
+				x: 26.3158,
+				y: 100
 			},
 			{
-				x: 100,
+				x: 0,
 				y: 50
 			},
 			{
-				x: 70,
-				y: 82
+				x: 26.3158,
+				y: 0
 			},
 			{
-				x: 70,
-				y: 62
+				x: 26.3158,
+				y: 30
 			},
 			{
-				x: 30,
-				y: 62
+				x: 73.6842,
+				y: 30
 			},
 			{
-				x: 30,
-				y: 82
+				x: 73.6842,
+				y: 0
 			}
 		],
 		internalTextInset: {
-			top: .26,
-			right: .34,
-			bottom: .26,
-			left: .34
-		}
-	},
-	{
-		key: "drop",
-		type: "path",
-		width: 140,
-		height: G,
-		path: "M50 0 C68 18 88 41 88 62 C88 84 71 100 50 100 C29 100 12 84 12 62 C12 41 32 18 50 0 Z",
-		internalTextInset: {
-			top: .3,
-			right: .27,
+			top: .2,
+			right: .32,
 			bottom: .2,
-			left: .27
+			left: .32
 		}
 	},
 	{
-		key: "cross",
+		key: "banner",
 		type: "polygon",
-		width: G,
-		height: G,
+		...G({
+			width: 36,
+			height: 24
+		}),
 		points: [
 			{
-				x: 36,
+				x: 0,
+				y: 100
+			},
+			{
+				x: 0,
 				y: 0
 			},
 			{
-				x: 64,
+				x: 77.7778,
 				y: 0
 			},
 			{
-				x: 64,
-				y: 36
+				x: 100,
+				y: 50
+			},
+			{
+				x: 77.7778,
+				y: 100
+			}
+		],
+		internalTextInset: {
+			top: .14,
+			right: .26,
+			bottom: .14,
+			left: .12
+		}
+	},
+	{
+		key: "drop",
+		type: "path",
+		...G({
+			width: 26,
+			height: 36
+		}),
+		path: "M0 23C0 11 13 0 13 0s13 11 13 23c0 7.18-5.82 13-13 13S0 30.18 0 23",
+		internalTextInset: {
+			top: .28,
+			right: .26,
+			bottom: .18,
+			left: .26
+		}
+	},
+	{
+		key: "cross",
+		type: "polygon",
+		width: W,
+		height: W,
+		points: [
+			{
+				x: 67.6471,
+				y: 32.3529
 			},
 			{
 				x: 100,
-				y: 36
+				y: 32.3529
 			},
 			{
 				x: 100,
-				y: 64
+				y: 67.6471
 			},
 			{
-				x: 64,
-				y: 64
+				x: 67.6471,
+				y: 67.6471
 			},
 			{
-				x: 64,
+				x: 67.6471,
 				y: 100
 			},
 			{
-				x: 36,
+				x: 32.3529,
 				y: 100
 			},
 			{
-				x: 36,
-				y: 64
+				x: 32.3529,
+				y: 67.6471
 			},
 			{
 				x: 0,
-				y: 64
+				y: 67.6471
 			},
 			{
 				x: 0,
-				y: 36
+				y: 32.3529
 			},
 			{
-				x: 36,
-				y: 36
+				x: 32.3529,
+				y: 32.3529
+			},
+			{
+				x: 32.3529,
+				y: 0
+			},
+			{
+				x: 67.6471,
+				y: 0
 			}
 		],
 		internalTextInset: {
-			top: .34,
-			right: .34,
-			bottom: .34,
-			left: .34
+			top: .32,
+			right: .32,
+			bottom: .32,
+			left: .32
+		}
+	},
+	{
+		key: "ribbon",
+		type: "polygon",
+		...G({
+			width: 24,
+			height: 34
+		}),
+		points: [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 100
+			},
+			{
+				x: 50,
+				y: 76.4706
+			},
+			{
+				x: 0,
+				y: 100
+			}
+		],
+		internalTextInset: {
+			top: .16,
+			right: .18,
+			bottom: .28,
+			left: .18
 		}
 	},
 	{
 		key: "gear",
 		type: "polygon",
-		width: G,
-		height: G,
+		width: W,
+		height: W,
 		points: it({
 			spikes: 14,
 			outerRadius: 50,
@@ -3325,8 +3649,8 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	{
 		key: "badge",
 		type: "path",
-		width: G,
-		height: G,
+		width: W,
+		height: W,
 		path: "M24 6 H76 L94 24 V76 L76 94 H24 L6 76 V24 Z",
 		internalTextInset: {
 			top: .24,
@@ -3339,7 +3663,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		key: "bookmark",
 		type: "polygon",
 		width: 130,
-		height: G,
+		height: W,
 		points: [
 			{
 				x: 18,
@@ -3372,7 +3696,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 	{
 		key: "tag",
 		type: "path",
-		width: G,
+		width: W,
 		height: 130,
 		path: "M4 20 L64 20 L96 50 L64 80 L4 80 Z",
 		internalTextInset: {
@@ -3386,7 +3710,7 @@ var Xe = ({ canvas: e, options: t = {}, centerPoint: n, flags: r = {} }) => {
 		key: "moon",
 		type: "path",
 		width: 150,
-		height: G,
+		height: W,
 		path: [
 			"M68 4 C36 4 10 30 10 62",
 			"C10 94 36 120 68 120 C85 120 100 112 111 100",
@@ -3407,26 +3731,26 @@ for (let e = 0; e < at.length; e += 1) {
 }
 var ut = lt, dt = ({ presetKey: e }) => ut[e] ?? null, ft = ({ preset: e, rounding: t }) => (typeof t == "number" ? t : 0) <= 0 || e.type === "rect" ? e.key : e.roundedVariant ?? e.key;
 function pt({ value: e, size: t }) {
-	let n = Number.isFinite(e) ? Math.min(Math.max(e, 0), tt) : 0;
+	let n = Number.isFinite(e) ? Math.min(Math.max(e, 0), nt) : 0;
 	return (Number.isFinite(t) && t > 0 ? t : 0) * n;
 }
 var mt = ({ preset: e, width: t, height: n }) => {
 	let r = e.internalTextInset ?? {};
 	return {
 		top: pt({
-			value: r.top ?? et.top,
+			value: r.top ?? tt.top,
 			size: n
 		}),
 		right: pt({
-			value: r.right ?? et.right,
+			value: r.right ?? tt.right,
 			size: t
 		}),
 		bottom: pt({
-			value: r.bottom ?? et.bottom,
+			value: r.bottom ?? tt.bottom,
 			size: n
 		}),
 		left: pt({
-			value: r.left ?? et.left,
+			value: r.left ?? tt.left,
 			size: t
 		})
 	};
@@ -4816,7 +5140,7 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 					width: D,
 					height: O
 				})
-			}), f.set({
+			}), r.shapeReplaceBoxWidth = Math.max(1, r.shapeBaseWidth ?? D), r.shapeReplaceBoxHeight = Math.max(1, r.shapeBaseHeight ?? O), f.set({
 				scaleX: 1,
 				scaleY: 1
 			}), r.set({
@@ -5085,7 +5409,7 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 				width: u,
 				height: d
 			})
-		}), t.set({
+		}), t.shapeReplaceBoxWidth = Math.max(1, t.shapeBaseWidth ?? u), t.shapeReplaceBoxHeight = Math.max(1, t.shapeBaseHeight ?? d), t.set({
 			left: i.lastAllowedLeft,
 			top: i.lastAllowedTop,
 			flipX: i.lastAllowedFlipX,
@@ -5428,7 +5752,7 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 			}
 		}), I;
 	}
-}, or = "#B0B5BF", sr = 0, cr = 1, lr = class {
+}, or = "#B4B7BD", sr = 0, cr = 1, lr = class {
 	constructor({ editor: e }) {
 		this._handleObjectScaling = (e) => {
 			let t = e.target && J(e.target) ? e.target : null;
@@ -5588,44 +5912,55 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 		if (!r) return null;
 		let i = dt({ presetKey: t ?? r.shapePresetKey ?? "circle" });
 		if (!i) return null;
-		let { left: a, top: o, originX: s, originY: c, width: l, height: u, shapeTextAutoExpand: d, text: f, textStyle: p, alignH: m, alignV: h, textPadding: g, rounding: _, withoutSelection: v, withoutSave: y } = n, b = this.editor.canvasManager.resolveObjectPlacement({
+		let { left: a, top: o, originX: s, originY: c, width: l, height: u, preserveCurrentAspectRatio: d, shapeTextAutoExpand: f, text: p, textStyle: m, alignH: h, alignV: g, textPadding: _, rounding: v, withoutSelection: y, withoutSave: b } = n, x = this.editor.canvasManager.resolveObjectPlacement({
 			object: r,
 			left: a,
 			top: o,
 			originX: s,
 			originY: c
-		}), x = this._resolveCurrentDimensions({ group: r }), S = Math.max(1, u ?? x.height), C = this._isShapeTextAutoExpandEnabled({ group: r }), w = d === void 0 ? C : d !== !1, T = _ ?? r.shapeRounding ?? 0, E = dt({ presetKey: ft({
+		}), S = this._resolveCurrentDimensions({ group: r }), C = this._resolveManualDimensions({ group: r }), w = this._resolveReplaceBoxDimensions({ group: r }), T = this._isShapeTextAutoExpandEnabled({ group: r }), E = f === void 0 ? T : f !== !1, D = v ?? r.shapeRounding ?? 0, O = dt({ presetKey: ft({
 			preset: i,
-			rounding: T
-		}) }) ?? i, D = m ?? r.shapeAlignHorizontal ?? "center", O = h ?? r.shapeAlignVertical ?? "middle", k = this._resolveGroupUserPadding({ group: r }), A = Wt({ padding: g }), j = Vt({
-			base: k,
-			override: g
-		}), M = this._resolveShapeStyle({
+			rounding: D
+		}) }) ?? i, { width: k, height: A } = O, j = !!d, M = t !== void 0, N = M && !j ? {
+			width: Math.max(1, l ?? w.width),
+			height: Math.max(1, u ?? w.height)
+		} : null, { width: P, height: F } = N ? this._resolveAspectRatioFittedDimensions({
+			targetWidth: N.width,
+			targetHeight: N.height,
+			aspectWidth: k,
+			aspectHeight: A
+		}) : {
+			width: Math.max(1, l ?? S.width),
+			height: Math.max(1, u ?? S.height)
+		}, I = h ?? r.shapeAlignHorizontal ?? "center", ee = g ?? r.shapeAlignVertical ?? "middle", te = this._resolveGroupUserPadding({ group: r }), L = Wt({ padding: _ }), ne = Vt({
+			base: te,
+			override: _
+		}), re = this._resolveShapeStyle({
 			options: n,
 			fallback: r
-		}), N = Ut({
+		}), R = Ut({
 			baseInset: mt({
-				preset: E,
-				width: x.width,
-				height: S
+				preset: O,
+				width: P,
+				height: F
 			}),
-			stroke: M.stroke,
-			strokeWidth: M.strokeWidth
-		}), P = Ht({
-			base: N,
-			addition: j
-		}), F = Math.max(1, r.shapeManualBaseWidth ?? x.width);
-		l !== void 0 && (F = Math.max(1, l)), l === void 0 && C && !w && (F = Math.max(1, x.width));
-		let I = Math.max(1, u ?? r.shapeManualBaseHeight ?? S), { shape: ee, text: L } = Y({ group: r });
-		if (!ee || !L) return null;
-		let R = this.lifecycleController.createContext({
+			stroke: re.stroke,
+			strokeWidth: re.strokeWidth
+		}), ie = Ht({
+			base: R,
+			addition: ne
+		}), z = C.width, B = C.height;
+		M && (z = P, B = F), !M && l !== void 0 && (z = Math.max(1, l)), !M && u !== void 0 && (B = Math.max(1, u)), !M && l === void 0 && T && !E && (z = S.width);
+		let { shape: V, text: H } = Y({ group: r });
+		if (!V || !H) return null;
+		let U = this.lifecycleController.createContext({
 			group: r,
 			source: "update",
 			target: e,
-			presetKey: E.key,
+			presetKey: O.key,
 			options: n,
-			withoutSave: y
-		}), te = {
+			withoutSave: b
+		}), ae = {
 			angle: 0,
 			skewX: 0,
 			skewY: 0,
@@ -5638,74 +5973,97 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 			top: 0,
 			originX: "left",
 			originY: "top"
-		}, ne = L, z = this._createTextNode({
-			text: ne.textCaseRaw ?? L.text ?? "",
-			textStyle: this._resolveCurrentTextStyle({ textNode: L }),
-			width: Math.max(1, L.width ?? x.width),
-			align: D
+		}, oe = H, se = this._createTextNode({
+			text: oe.textCaseRaw ?? H.text ?? "",
+			textStyle: this._resolveCurrentTextStyle({ textNode: H }),
+			width: Math.max(1, H.width ?? S.width),
+			align: I
 		});
-		z.set(te), this._applyTextUpdates({
-			textNode: z,
-			text: f,
-			textStyle: p,
-			align: D
+		se.set(ae), this._applyTextUpdates({
+			textNode: se,
+			text: p,
+			textStyle: m,
+			align: I
 		});
-		let re = l === void 0 && u === void 0 && t === void 0 && d === void 0 && _ === void 0 && f === void 0 && !this._hasShapeTextSizeAffectingStyleChanges({ textStyle: p }), B = g !== void 0 && re, V = re ? x.width : this._resolveShapeLayoutWidth({
-			text: z,
-			currentWidth: x.width,
-			manualWidth: F,
-			shapeTextAutoExpandEnabled: w,
-			padding: P
-		}), H = await Pt({
-			preset: E,
-			width: V,
-			height: S,
-			style: M,
-			rounding: T
-		}), ie = r.getObjects().indexOf(ee);
-		if (ie < 0) return null;
-		let U = () => {
-			this._detachShapeGroupAutoLayout({ group: r }), L.set(te), this._applyTextUpdates({
-				textNode: L,
-				text: f,
-				textStyle: p,
-				align: D
-			}), r.remove(ee), r.insertAt(ie, H), this._applyShapeGroupMetadata({
+		let ce = l === void 0 && u === void 0 && t === void 0 && f === void 0 && v === void 0 && p === void 0 && !this._hasShapeTextSizeAffectingStyleChanges({ textStyle: m }), le = _ !== void 0 && ce, ue = ce ? S.width : this._resolveShapeLayoutWidth({
+			text: se,
+			currentWidth: P,
+			manualWidth: z,
+			shapeTextAutoExpandEnabled: E,
+			padding: ie
+		}), de = await Pt({
+			preset: O,
+			width: ue,
+			height: F,
+			style: re,
+			rounding: D
+		}), fe = r.getObjects().indexOf(V);
+		if (fe < 0) return null;
+		let pe = () => {
+			this._detachShapeGroupAutoLayout({ group: r }), H.set(ae), this._applyTextUpdates({
+				textNode: H,
+				text: p,
+				textStyle: m,
+				align: I
+			}), r.remove(V), r.insertAt(fe, de), this._applyShapeGroupMetadata({
 				group: r,
-				presetKey: E.key,
-				presetCanRound: gt({ preset: E }),
-				width: V,
-				height: S,
-				manualWidth: F,
-				manualHeight: I,
-				shapeTextAutoExpand: w,
-				alignH: D,
-				alignV: O,
-				padding: j,
-				style: M,
-				rounding: T
+				presetKey: O.key,
+				presetCanRound: gt({ preset: O }),
+				width: ue,
+				height: F,
+				manualWidth: z,
+				manualHeight: B,
+				replaceBoxWidth: N?.width,
+				replaceBoxHeight: N?.height,
+				shapeTextAutoExpand: E,
+				alignH: I,
+				alignV: ee,
+				padding: ne,
+				style: re,
+				rounding: D
 			}), this._applyCurrentLayout({
 				group: r,
-				shape: H,
-				text: L,
-				placement: b,
-				width: V,
-				height: S,
-				alignH: D,
-				alignV: O,
-				internalShapeTextInset: N,
-				expandShapeHeightToFitText: !B,
-				changedPadding: A
-			}), L.isEditing && this.editingPlacements.set(r, b);
+				shape: de,
+				text: H,
+				placement: x,
+				width: ue,
+				height: F,
+				alignH: I,
+				alignV: ee,
+				internalShapeTextInset: R,
+				minimumReplaceBox: N ?? void 0,
+				expandShapeHeightToFitText: !le,
+				changedPadding: L
+			}), H.isEditing && this.editingPlacements.set(r, x);
 		};
-		if (!this._isOnCanvas({ object: r })) return U(), this.lifecycleController.fireBefore({ lifecycle: R }), this.lifecycleController.fireUpdated({ lifecycle: R }), r;
+		if (!this._isOnCanvas({ object: r })) return pe(), this.lifecycleController.fireBefore({ lifecycle: U }), this.lifecycleController.fireUpdated({ lifecycle: U }), r;
 		this._beginMutation();
 		try {
-			U(), !L.isEditing && !v && this.editor.canvas.setActiveObject(r), this.lifecycleController.fireBefore({ lifecycle: R }), this.editor.canvas.requestRenderAll();
+			pe(), !H.isEditing && !y && this.editor.canvas.setActiveObject(r), this.lifecycleController.fireBefore({ lifecycle: U }), this.editor.canvas.requestRenderAll();
 		} finally {
-			this._endMutation({ withoutSave: y });
+			this._endMutation({ withoutSave: b });
 		}
-		return this.lifecycleController.fireUpdated({ lifecycle: R }), r;
+		return this.lifecycleController.fireUpdated({ lifecycle: U }), r;
+	}
+	_resolveAspectRatioFittedDimensions({ targetWidth: e, targetHeight: t, aspectWidth: n, aspectHeight: r }) {
+		let i = Math.max(1, n), a = Math.max(1, r), o = e === void 0 ? void 0 : Math.max(1, e), s = t === void 0 ? void 0 : Math.max(1, t);
+		if (o !== void 0 && s === void 0) return {
+			width: o,
+			height: o / i * a
+		};
+		if (o === void 0 && s !== void 0) return {
+			width: s / a * i,
+			height: s
+		};
+		if (o === void 0 || s === void 0) return {
+			width: i,
+			height: a
+		};
+		let c = Math.min(o / i, s / a);
+		return {
+			width: i * c,
+			height: a * c
+		};
 	}
 	remove({ target: e, withoutSave: t } = {}) {
 		let n = this._resolveShapeGroup({ target: e });
@@ -5926,10 +6284,10 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 			padding: f,
 			internalShapeTextInset: p,
 			changedPadding: m
-		}), this._detachShapeGroupAutoLayout({ group: _ }), _;
+		}), _.shapeReplaceBoxWidth = Math.max(1, _.shapeBaseWidth ?? a), _.shapeReplaceBoxHeight = Math.max(1, _.shapeBaseHeight ?? o), this._detachShapeGroupAutoLayout({ group: _ }), _;
 	}
-	_applyShapeGroupMetadata({ group: e, presetKey: t, presetCanRound: n, width: r, height: i, manualWidth: a, manualHeight: o, shapeTextAutoExpand: s, alignH: c, alignV: l, padding: u, style: d, rounding: f }) {
-		let p = d.strokeDashArray ? d.strokeDashArray.slice() : d.strokeDashArray ?? null;
+	_applyShapeGroupMetadata({ group: e, presetKey: t, presetCanRound: n, width: r, height: i, manualWidth: a, manualHeight: o, replaceBoxWidth: s, replaceBoxHeight: c, shapeTextAutoExpand: l, alignH: u, alignV: d, padding: f, style: p, rounding: m }) {
+		let h = p.strokeDashArray ? p.strokeDashArray.slice() : p.strokeDashArray ?? null;
 		e.set({
 			shapeComposite: !0,
 			shapePresetKey: t,
@@ -5937,19 +6295,21 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 			shapeBaseHeight: i,
 			shapeManualBaseWidth: Math.max(1, a ?? r),
 			shapeManualBaseHeight: Math.max(1, o ?? i),
-			shapeTextAutoExpand: s,
-			shapeAlignHorizontal: c,
-			shapeAlignVertical: l,
-			shapePaddingTop: u.top,
-			shapePaddingRight: u.right,
-			shapePaddingBottom: u.bottom,
-			shapePaddingLeft: u.left,
-			shapeFill: d.fill,
-			shapeStroke: d.stroke,
-			shapeStrokeWidth: d.strokeWidth,
-			shapeStrokeDashArray: p,
-			shapeOpacity: d.opacity,
-			shapeRounding: Math.max(0, f ?? 0),
+			shapeReplaceBoxWidth: Math.max(1, s ?? r),
+			shapeReplaceBoxHeight: Math.max(1, c ?? i),
+			shapeTextAutoExpand: l,
+			shapeAlignHorizontal: u,
+			shapeAlignVertical: d,
+			shapePaddingTop: f.top,
+			shapePaddingRight: f.right,
+			shapePaddingBottom: f.bottom,
+			shapePaddingLeft: f.left,
+			shapeFill: p.fill,
+			shapeStroke: p.stroke,
+			shapeStrokeWidth: p.strokeWidth,
+			shapeStrokeDashArray: h,
+			shapeOpacity: p.opacity,
+			shapeRounding: Math.max(0, m ?? 0),
 			shapeCanRound: n
 		});
 	}
@@ -6046,6 +6406,13 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 			height: Math.max(1, e.shapeManualBaseHeight ?? e.shapeBaseHeight ?? e.height ?? 1)
 		};
 	}
+	_resolveReplaceBoxDimensions({ group: e }) {
+		let t = this._resolveCurrentDimensions({ group: e });
+		return {
+			width: Math.max(1, e.shapeReplaceBoxWidth ?? t.width),
+			height: Math.max(1, e.shapeReplaceBoxHeight ?? t.height)
+		};
+	}
 	_resolveGroupUserPadding({ group: e }) {
 		return zt({ padding: {
 			top: e.shapePaddingTop,
@@ -6097,42 +6464,42 @@ var tr = ({ group: e, shape: t, text: n, width: r, height: i, padding: a, alignH
 		let n = t?.align;
 		return n === "left" || n === "center" || n === "right" || n === "justify" ? n : e.shapeAlignHorizontal ?? "center";
 	}
-	_applyCurrentLayout({ group: e, shape: t, text: n, placement: r, width: i, height: a, alignH: o, alignV: s, internalShapeTextInset: c, expandShapeHeightToFitText: l = !0, changedPadding: u }) {
-		let d = this._resolveCurrentDimensions({ group: e }), f = this._resolveManualDimensions({ group: e }), p = this._resolveGroupUserPadding({ group: e }), m = d.width;
-		m = i === void 0 ? this._resolveShapeLayoutWidth({
+	_applyCurrentLayout({ group: e, shape: t, text: n, placement: r, width: i, height: a, alignH: o, alignV: s, internalShapeTextInset: c, minimumReplaceBox: l, expandShapeHeightToFitText: u = !0, changedPadding: d }) {
+		let f = this._resolveCurrentDimensions({ group: e }), p = this._resolveManualDimensions({ group: e }), m = this._resolveGroupUserPadding({ group: e }), h = f.width;
+		h = i === void 0 ? this._resolveShapeLayoutWidth({
 			text: n,
-			currentWidth: d.width,
-			manualWidth: f.width,
+			currentWidth: f.width,
+			manualWidth: p.width,
 			shapeTextAutoExpandEnabled: this._isShapeTextAutoExpandEnabled({ group: e }),
 			padding: Ht({
 				base: c ?? this._resolveGroupInternalShapeTextInset({
 					group: e,
-					width: m,
-					height: Math.max(1, a ?? d.height)
+					width: h,
+					height: Math.max(1, a ?? f.height)
 				}),
-				addition: p
+				addition: m
 			})
 		}) : Math.max(1, i);
-		let h = Math.max(1, a ?? d.height), g = c ?? this._resolveGroupInternalShapeTextInset({
+		let g = Math.max(1, a ?? f.height), _ = c ?? this._resolveGroupInternalShapeTextInset({
 			group: e,
-			width: m,
-			height: h
-		}), _ = r ?? this.editor.canvasManager.getObjectPlacement({ object: e });
+			width: h,
+			height: g
+		}), v = r ?? this.editor.canvasManager.getObjectPlacement({ object: e });
 		rn({
 			group: e,
 			shape: t,
 			text: n,
-			width: m,
-			height: h,
+			width: h,
+			height: g,
 			alignH: o ?? e.shapeAlignHorizontal ?? "center",
 			alignV: s ?? e.shapeAlignVertical ?? "middle",
-			padding: p,
-			internalShapeTextInset: g,
-			expandShapeHeightToFitText: l,
-			changedPadding: u
-		}), this.editor.canvasManager.applyObjectPlacement({
+			padding: m,
+			internalShapeTextInset: _,
+			expandShapeHeightToFitText: u,
+			changedPadding: d
+		}), e.shapeReplaceBoxWidth = Math.max(1, l?.width ?? 0, e.shapeBaseWidth ?? h), e.shapeReplaceBoxHeight = Math.max(1, l?.height ?? 0, e.shapeBaseHeight ?? g), this.editor.canvasManager.applyObjectPlacement({
 			object: e,
-			placement: _
+			placement: v
 		});
 	}
 	_syncShapeTextLayoutAfterTextMutation({ textNode: e, textStyle: t }) {
@@ -7616,7 +7983,7 @@ var Xr = class {
 					N = e, P = e;
 				}
 			} else l && (N = Math.max(i.minimumWidthScale, i.lastAllowedScaleX * h)), u && (P = Math.max(i.minimumFontScale, i.lastAllowedScaleY * g));
-			let { appliedWidth: ee, dimensionsRounded: L } = Ur({
+			let { appliedWidth: ee, dimensionsRounded: te } = Ur({
 				textbox: n,
 				canvasManager: this.canvasManager,
 				base: a,
@@ -7652,7 +8019,7 @@ var Xr = class {
 					bottomLeft: D
 				},
 				previousWidth: M,
-				dimensionsRounded: L,
+				dimensionsRounded: te,
 				isCornerHandle: c,
 				isHorizontalHandle: l,
 				isVerticalHandle: u,
@@ -7913,7 +8280,7 @@ var Xr = class {
 		let F = i ?? this._getDefaultFontFamily(), I = wr({ width: m }), ee = Cr({
 			strokeColor: p,
 			width: I
-		}), L = {
+		}), te = {
 			id: t,
 			fontFamily: F,
 			fontSize: a,
@@ -7939,33 +8306,33 @@ var Xr = class {
 			radiusBottomRight: w,
 			radiusBottomLeft: T,
 			...E
-		}, R = new Dr(n, L), te = r !== !1;
-		R.autoExpand = te;
-		let ne = E.left !== void 0 || E.top !== void 0;
-		if (R.textCaseRaw = R.text ?? "", l) {
-			let e = Tr({ value: R.textCaseRaw });
-			e !== R.text && R.set({ text: e });
-		}
-		Br({ textbox: R }) && (R.dirty = !0);
-		let z;
-		ne && (z = M.resolveObjectPlacement({
-			object: R,
+		}, L = new Dr(n, te), ne = r !== !1;
+		L.autoExpand = ne;
+		let re = E.left !== void 0 || E.top !== void 0;
+		if (L.textCaseRaw = L.text ?? "", l) {
+			let e = Tr({ value: L.textCaseRaw });
+			e !== L.text && L.set({ text: e });
+		}
+		Br({ textbox: L }) && (L.dirty = !0);
+		let R;
+		re && (R = M.resolveObjectPlacement({
+			object: L,
 			left: E.left,
 			top: E.top,
 			originX: E.originX,
 			originY: E.originY,
 			fallbackPoint: M.getMontageAreaSceneCenter()
 		}));
-		let re = te && e._hasWrappedLinesBeyondExplicitBreaks(R);
-		return (ne || re) && this._normalizeTextboxAfterContentChange({
-			textbox: R,
-			placement: z,
-			shouldAutoExpand: re,
-			clampToMontage: ne
-		}), z || M.centerObjectToMontageArea({ object: R }), A || P.add(R), O || P.setActiveObject(R), P.requestRenderAll(), N.resumeHistory(), k || N.saveState(), j && P.fire("editor:text-added", {
-			textbox: R,
+		let ie = ne && e._hasWrappedLinesBeyondExplicitBreaks(L);
+		return (re || ie) && this._normalizeTextboxAfterContentChange({
+			textbox: L,
+			placement: R,
+			shouldAutoExpand: ie,
+			clampToMontage: re
+		}), R || M.centerObjectToMontageArea({ object: L }), A || P.add(L), O || P.setActiveObject(L), P.requestRenderAll(), N.resumeHistory(), k || N.saveState(), j && P.fire("editor:text-added", {
+			textbox: L,
 			options: {
-				...L,
+				...te,
 				text: n,
 				bold: o,
 				italic: s,
@@ -7980,86 +8347,86 @@ var Xr = class {
 				withoutSave: !!k,
 				withoutAdding: !!A
 			}
-		}), R;
+		}), L;
 	}
 	updateText({ target: t, style: n = {}, withoutSave: r, skipRender: i, selectionRange: a, emitLifecycleEvents: o = !0 } = {}) {
 		let s = this._resolveTextObject(t);
 		if (!s) return null;
 		let { text: c = "" } = s, { historyManager: l } = this.editor, { canvasManager: u } = this.editor, { canvas: d } = this;
 		l.suspendHistory();
-		let f = e._getSnapshot(s), { text: p, autoExpand: m, fontFamily: h, fontSize: g, bold: _, italic: v, underline: y, uppercase: b, strikethrough: x, align: S, color: C, strokeColor: w, strokeWidth: T, opacity: E, backgroundColor: D, backgroundOpacity: O, paddingTop: k, paddingRight: A, paddingBottom: j, paddingLeft: M, radiusTopLeft: N, radiusTopRight: P, radiusBottomRight: F, radiusBottomLeft: I, left: ee, top: L, originX: R, originY: te, ...ne } = n, z = { ...ne }, re = u.resolveObjectPlacement({
+		let f = e._getSnapshot(s), { text: p, autoExpand: m, fontFamily: h, fontSize: g, bold: _, italic: v, underline: y, uppercase: b, strikethrough: x, align: S, color: C, strokeColor: w, strokeWidth: T, opacity: E, backgroundColor: D, backgroundOpacity: O, paddingTop: k, paddingRight: A, paddingBottom: j, paddingLeft: M, radiusTopLeft: N, radiusTopRight: P, radiusBottomRight: F, radiusBottomLeft: I, left: ee, top: te, originX: L, originY: ne, ...re } = n, R = { ...re }, ie = u.resolveObjectPlacement({
 			object: s,
 			left: ee,
-			top: L,
-			originX: R,
-			originY: te
-		}), B = a === void 0 ? vr({ textbox: s }) : Qr({
+			top: te,
+			originX: L,
+			originY: ne
+		}), z = a === void 0 ? vr({ textbox: s }) : Qr({
 			text: c,
 			range: a
-		}), V = B ? $r({
+		}), B = z ? $r({
 			textbox: s,
-			range: B
-		}) : null, H = {}, ie = {}, U = {}, ae, oe, se = br({
+			range: z
+		}) : null, V = {}, H = {}, U = {}, ae, oe, se = br({
 			textbox: s,
-			range: B
-		}), ce = !B || se, le = !B;
-		if (h !== void 0 && (V && (ie.fontFamily = h), ce && (z.fontFamily = h, le && (U.fontFamily = h))), g !== void 0 && (V && (ie.fontSize = g), ce && (z.fontSize = g, le && (U.fontSize = g))), _ !== void 0) {
+			range: z
+		}), ce = !z || se, le = !z;
+		if (h !== void 0 && (B && (H.fontFamily = h), ce && (R.fontFamily = h, le && (U.fontFamily = h))), g !== void 0 && (B && (H.fontSize = g), ce && (R.fontSize = g, le && (U.fontSize = g))), _ !== void 0) {
 			let e = _ ? "bold" : "normal";
-			B && (H.fontWeight = e), ce && (z.fontWeight = e, le && (U.fontWeight = e));
+			z && (V.fontWeight = e), ce && (R.fontWeight = e, le && (U.fontWeight = e));
 		}
 		if (v !== void 0) {
 			let e = v ? "italic" : "normal";
-			B && (H.fontStyle = e), ce && (z.fontStyle = e, le && (U.fontStyle = e));
+			z && (V.fontStyle = e), ce && (R.fontStyle = e, le && (U.fontStyle = e));
 		}
-		if (y !== void 0 && (B && (H.underline = y), ce && (z.underline = y, le && (U.underline = y))), x !== void 0 && (B && (H.linethrough = x), ce && (z.linethrough = x, le && (U.linethrough = x))), S !== void 0 && (z.textAlign = S), C !== void 0 && (B && (H.fill = C), ce && (z.fill = C, le && (U.fill = C))), w !== void 0 || T !== void 0) {
-			let e = B ? Sr({
+		if (y !== void 0 && (z && (V.underline = y), ce && (R.underline = y, le && (U.underline = y))), x !== void 0 && (z && (V.linethrough = x), ce && (R.linethrough = x, le && (U.linethrough = x))), S !== void 0 && (R.textAlign = S), C !== void 0 && (z && (V.fill = C), ce && (R.fill = C, le && (U.fill = C))), w !== void 0 || T !== void 0) {
+			let e = z ? Sr({
 				textbox: s,
-				range: B,
+				range: z,
 				property: "strokeWidth"
-			}) : void 0, t = B ? Sr({
+			}) : void 0, t = z ? Sr({
 				textbox: s,
-				range: B,
+				range: z,
 				property: "stroke"
 			}) : void 0;
 			oe = wr({ width: T ?? e ?? s.strokeWidth ?? 0 }), ae = Cr({
 				strokeColor: w ?? t ?? s.stroke ?? void 0,
 				width: oe
-			}), B && (H.stroke = ae, H.strokeWidth = oe), ce && (z.stroke = ae, z.strokeWidth = oe, le && (U.stroke = ae, U.strokeWidth = oe));
+			}), z && (V.stroke = ae, V.strokeWidth = oe), ce && (R.stroke = ae, R.strokeWidth = oe, le && (U.stroke = ae, U.strokeWidth = oe));
 		}
-		E !== void 0 && (z.opacity = E), D !== void 0 && (z.backgroundColor = D), O !== void 0 && (z.backgroundOpacity = O), k !== void 0 && (z.paddingTop = k), A !== void 0 && (z.paddingRight = A), j !== void 0 && (z.paddingBottom = j), M !== void 0 && (z.paddingLeft = M), N !== void 0 && (z.radiusTopLeft = N), P !== void 0 && (z.radiusTopRight = P), F !== void 0 && (z.radiusBottomRight = F), I !== void 0 && (z.radiusBottomLeft = I);
+		E !== void 0 && (R.opacity = E), D !== void 0 && (R.backgroundColor = D), O !== void 0 && (R.backgroundOpacity = O), k !== void 0 && (R.paddingTop = k), A !== void 0 && (R.paddingRight = A), j !== void 0 && (R.paddingBottom = j), M !== void 0 && (R.paddingLeft = M), N !== void 0 && (R.radiusTopLeft = N), P !== void 0 && (R.radiusTopRight = P), F !== void 0 && (R.radiusBottomRight = F), I !== void 0 && (R.radiusBottomLeft = I);
 		let ue = s.textCaseRaw ?? c, de = !!s.uppercase, fe = p !== void 0, pe = fe ? p ?? "" : ue, me = b ?? de, he = me !== de;
-		fe || he ? (z.text = me ? Tr({ value: pe }) : pe, s.textCaseRaw = pe) : s.textCaseRaw === void 0 && (s.textCaseRaw = ue);
+		fe || he ? (R.text = me ? Tr({ value: pe }) : pe, s.textCaseRaw = pe) : s.textCaseRaw === void 0 && (s.textCaseRaw = ue);
 		let ge = zr({ stylesList: [
-			z,
+			R,
+			V,
 			H,
-			ie,
 			U
 		] }), _e = [
 			ee,
+			te,
 			L,
-			R,
-			te
+			ne
 		], ve = [
 			k,
 			A,
 			j,
 			M
-		], ye = _e.some((e) => e !== void 0), be = ve.some((e) => e !== void 0), xe = Object.prototype.hasOwnProperty.call(z, "width"), Se = be && !ye && !fe && !he && !ge && !xe, Ce = null;
+		], ye = _e.some((e) => e !== void 0), be = ve.some((e) => e !== void 0), xe = Object.prototype.hasOwnProperty.call(R, "width"), Se = be && !ye && !fe && !he && !ge && !xe, Ce = null;
 		Se && (Ce = Ir({
 			textbox: s,
-			originX: re.originX,
-			originY: re.originY
-		})), s.uppercase = me, s.set(z);
+			originX: ie.originX,
+			originY: ie.originY
+		})), s.uppercase = me, s.set(R);
 		let we = !1;
-		if (B) {
+		if (z) {
 			let e = xr({
+				textbox: s,
+				styles: V,
+				range: z
+			}), t = B ? xr({
 				textbox: s,
 				styles: H,
 				range: B
-			}), t = V ? xr({
-				textbox: s,
-				styles: ie,
-				range: V
 			}) : !1;
 			we = e || t;
 		} else if (Object.keys(U).length) {
@@ -8071,14 +8438,14 @@ var Xr = class {
 			}));
 		}
 		let Te = we && zr({ stylesList: [
+			V,
 			H,
-			ie,
 			U
 		] });
-		if (we && (s.dirty = !0), V && (h !== void 0 || g !== void 0)) {
+		if (we && (s.dirty = !0), B && (h !== void 0 || g !== void 0)) {
 			let e = ei({
 				textbox: s,
-				range: V
+				range: B
 			}), t = {};
 			h !== void 0 && (t.fontFamily = h), g !== void 0 && (t.fontSize = g), Ar({
 				textbox: s,
@@ -8086,10 +8453,10 @@ var Xr = class {
 				updates: t
 			});
 		}
-		if (B && (C !== void 0 || w !== void 0 || T !== void 0)) {
+		if (z && (C !== void 0 || w !== void 0 || T !== void 0)) {
 			let e = ti({
 				textbox: s,
-				range: B
+				range: z
 			}), t = {};
 			C !== void 0 && (t.fill = C), (w !== void 0 || T !== void 0) && (ae === null && (t.stroke = null), ae != null && (t.stroke = ae)), Ar({
 				textbox: s,
@@ -8111,7 +8478,7 @@ var Xr = class {
 		let ke = Oe && !xe && (fe || he || ge);
 		this._normalizeTextboxAfterContentChange({
 			textbox: s,
-			placement: re,
+			placement: ie,
 			shouldAutoExpand: ke
 		}), Ce && this._restoreTextboxContentPlacement({
 			textbox: s,
@@ -8120,14 +8487,14 @@ var Xr = class {
 		let Ae = {
 			withoutSave: !!r,
 			skipRender: !!i
-		}, je = !!B && Object.keys(H).length > 0, Me = {
+		}, je = !!z && Object.keys(V).length > 0, Me = {
 			textbox: s,
 			target: t,
 			style: n,
 			options: Ae,
-			updates: z,
-			selectionRange: B ?? void 0,
-			selectionStyles: je ? H : void 0
+			updates: R,
+			selectionRange: z ?? void 0,
+			selectionStyles: je ? V : void 0
 		};
 		o && d.fire("editor:before:text-updated", Me), i || d.requestRenderAll();
 		let Ne = e._getSnapshot(s);
@@ -8492,7 +8859,7 @@ var Xr = class {
 				baseWidth: f.baseWidth,
 				baseHeight: f.baseHeight,
 				useRelativePositions: m
-			}), this.editor.textManager?.commitStandaloneTextScale({ target: e }), qe({ object: e }), e.set({
+			}), this.editor.textManager?.commitStandaloneTextScale({ target: e }), Je({ object: e }), e.set({
 				id: `${e.type}-${D()}`,
 				evented: !0
 			}), n.add(e), e));
@@ -8560,22 +8927,22 @@ var Xr = class {
 			naturalHeight: 0,
 			width: 0,
 			height: 0
-		}, m = W({
+		}, m = We({
 			value: u || f || c.width,
 			fallback: 0
-		}), h = W({
+		}), h = We({
 			value: d || p || c.height,
 			fallback: 0
-		}), g = W({
+		}), g = We({
 			value: r,
 			fallback: m
-		}), _ = W({
+		}), _ = We({
 			value: i,
 			fallback: h
-		}), v = W({
+		}), v = We({
 			value: a,
 			fallback: c.scaleX || 1
-		}), y = W({
+		}), y = We({
 			value: o,
 			fallback: c.scaleY || 1
 		}), b = g * v, x = _ * y, S = m > 0, C = h > 0, w = b > 0, T = x > 0, E = t._resolveImageFit({ customData: s }), D = {};
@@ -8642,18 +9009,18 @@ var Xr = class {
 		}
 	}
 	_transformObject({ object: e, scale: n, bounds: r, baseWidth: i, baseHeight: a, useRelativePositions: o }) {
-		let s = e, { x: c, y: l } = Ge({
+		let s = e, { x: c, y: l } = Ke({
 			object: e,
 			baseWidth: i,
 			baseHeight: a,
 			useRelativePositions: o
-		}), { scaleX: u, scaleY: d } = e, f = W({
+		}), { scaleX: u, scaleY: d } = e, f = We({
 			value: u,
 			fallback: 1
-		}), p = W({
+		}), p = We({
 			value: d,
 			fallback: 1
-		}), m = Ke({
+		}), m = qe({
 			normalizedX: c,
 			normalizedY: l,
 			bounds: t._getPositioningBounds({
@@ -8729,13 +9096,13 @@ var Xr = class {
 		if (!(e instanceof _)) return;
 		let r = typeof e.text == "string" ? e.text : "";
 		if (!r) return;
-		let i = W({
+		let i = We({
 			value: this.editor?.montageArea?.width,
 			fallback: 0
-		}), { width: a = 0 } = e, o = W({
+		}), { width: a = 0 } = e, o = We({
 			value: n,
 			fallback: 0
-		}), s = W({
+		}), s = We({
 			value: a,
 			fallback: 0
 		});
@@ -9637,7 +10004,7 @@ var Xr = class {
 			target: n,
 			transform: i
 		}), !this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: n });
-		let a = Je({ object: n });
+		let a = Ye({ object: n });
 		if (!a) {
 			this._clearSpacingContexts(), this._clearGuides();
 			return;
@@ -9652,7 +10019,7 @@ var Xr = class {
 			n.set({
 				left: e + l,
 				top: t + u
-			}), n.setCoords(), a = Je({ object: n }) ?? a;
+			}), n.setCoords(), a = Ye({ object: n }) ?? a;
 		}
 		let d = this._resolveCurrentTargetBounds({ activeObject: n }), f = this.spacingContexts.vertical || this.spacingContexts.horizontal ? 10 / s : c, p = Hi({
 			activeBounds: a,
@@ -9669,13 +10036,13 @@ var Xr = class {
 			n.set({
 				left: e + p.deltaX,
 				top: t + p.deltaY
-			}), n.setCoords(), a = Je({ object: n }) ?? a;
+			}), n.setCoords(), a = Ye({ object: n }) ?? a;
 		}
 		m || e._applyMovementStep({
 			target: n,
 			transform: i
 		});
-		let h = Je({ object: n }) ?? a, g = zi({
+		let h = Ye({ object: n }) ?? a, g = zi({
 			activeBounds: h,
 			threshold: c,
 			anchors: this.anchors
@@ -9719,7 +10086,7 @@ var Xr = class {
 		}
 		let { anchors: l } = this, { vertical: u, horizontal: d } = l;
 		!u.length && !d.length && this._cacheAnchors({ activeObject: n });
-		let f = Je({ object: n });
+		let f = Ye({ object: n });
 		if (!f) {
 			this._clearGuides();
 			return;
@@ -9843,7 +10210,7 @@ var Xr = class {
 		}
 		let { anchors: a } = this, { vertical: o, horizontal: s } = a;
 		!o.length && !s.length && this._cacheAnchors({ activeObject: t });
-		let c = Je({ object: t });
+		let c = Ye({ object: t });
 		if (!c) {
 			this._clearGuides();
 			return;
@@ -10122,13 +10489,13 @@ var Xr = class {
 			horizontal: []
 		}, r = [];
 		for (let e of t) {
-			let t = Je({ object: e });
+			let t = Ye({ object: e });
 			t && (Ki({
 				anchors: n,
 				bounds: t
 			}), r.push(t));
 		}
-		let { montageArea: i } = this.editor, a = Je({ object: i });
+		let { montageArea: i } = this.editor, a = Ye({ object: i });
 		if (a) {
 			Ki({
 				anchors: n,
@@ -10156,7 +10523,7 @@ var Xr = class {
 	_resolveCurrentTargetBounds({ activeObject: e }) {
 		let t = this._collectTargets({ activeObject: e }), n = [];
 		for (let e of t) {
-			let t = Je({ object: e });
+			let t = Ye({ object: e });
 			t && n.push(t);
 		}
 		return n;
@@ -10234,7 +10601,7 @@ var Xr = class {
 			this._clearGuides();
 			return;
 		}
-		let a = Je({ object: i });
+		let a = Ye({ object: i });
 		if (!a) {
 			this._clearGuides();
 			return;
@@ -10242,7 +10609,7 @@ var Xr = class {
 		let o = e._resolveTarget({
 			event: t,
 			activeObject: i
-		}), { montageArea: s } = r, c = o ?? s, l = c === s, u = Je({ object: c });
+		}), { montageArea: s } = r, c = o ?? s, l = c === s, u = Ye({ object: c });
 		if (!u) {
 			this._clearGuides();
 			return;
@@ -10416,7 +10783,7 @@ var Xr = class {
 	}
 	async init() {
 		let { editorContainerWidth: e, editorContainerHeight: n, canvasWrapperWidth: r, canvasWrapperHeight: i, canvasCSSWidth: a, canvasCSSHeight: o, initialImage: s, initialState: c, scaleType: l, showRotationAngle: u, _onReadyCallback: d } = this.options;
-		if (re.apply(), this.canvas = new t(this.containerId, this.options), this.moduleLoader = new A(), this.workerManager = new M(), this.errorManager = new gr({ editor: this }), this.historyManager = new je({ editor: this }), this.toolbar = new H({ editor: this }), this.transformManager = new He({ editor: this }), this.zoomManager = new Ue({ editor: this }), this.canvasManager = new Ve({ editor: this }), this.imageManager = new Le({ editor: this }), this.layerManager = new $e({ editor: this }), this.shapeManager = new lr({ editor: this }), this.interactionBlocker = new Ze({ editor: this }), this.backgroundManager = new Qe({ editor: this }), this.clipboardManager = new ur({ editor: this }), this.objectLockManager = new dr({ editor: this }), this.groupingManager = new fr({ editor: this }), this.selectionManager = new pr({ editor: this }), this.deletionManager = new mr({ editor: this }), this.panConstraintManager = new _r({ editor: this }), this.snappingManager = new Qi({ editor: this }), this.measurementManager = new ea({ editor: this }), this.fontManager = new B(this.options.fonts ?? []), this.textManager = new ai({ editor: this }), this.templateManager = new ui({ editor: this }), u && (this.angleIndicator = new ae({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.interactionBlocker.ensureOverlay(), this.listeners = new k({
+		if (ie.apply(), this.canvas = new t(this.containerId, this.options), this.moduleLoader = new A(), this.workerManager = new M(), this.errorManager = new gr({ editor: this }), this.historyManager = new je({ editor: this }), this.toolbar = new V({ editor: this }), this.transformManager = new He({ editor: this }), this.zoomManager = new Ue({ editor: this }), this.canvasManager = new Ve({ editor: this }), this.imageManager = new Le({ editor: this }), this.layerManager = new et({ editor: this }), this.shapeManager = new lr({ editor: this }), this.interactionBlocker = new Qe({ editor: this }), this.backgroundManager = new $e({ editor: this }), this.clipboardManager = new ur({ editor: this }), this.objectLockManager = new dr({ editor: this }), this.groupingManager = new fr({ editor: this }), this.selectionManager = new pr({ editor: this }), this.deletionManager = new mr({ editor: this }), this.panConstraintManager = new _r({ editor: this }), this.snappingManager = new Qi({ editor: this }), this.measurementManager = new ea({ editor: this }), this.fontManager = new z(this.options.fonts ?? []), this.textManager = new ai({ editor: this }), this.templateManager = new ui({ editor: this }), u && (this.angleIndicator = new ae({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.interactionBlocker.ensureOverlay(), this.listeners = new k({
 			editor: this,
 			options: this.options
 		}), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(n), this.canvasManager.setCanvasWrapperWidth(r), this.canvasManager.setCanvasWrapperHeight(i), this.canvasManager.setCanvasCSSWidth(a), this.canvasManager.setCanvasCSSHeight(o), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), await this.fontManager.loadFonts(), c) {
@@ -10457,7 +10824,7 @@ var Xr = class {
 	}
 	_createMontageArea() {
 		let { montageAreaWidth: t, montageAreaHeight: n } = this.options, r = new p(t / 2, n / 2);
-		this.montageArea = Xe({
+		this.montageArea = Ze({
 			canvas: this.canvas,
 			centerPoint: r,
 			options: {
@@ -10481,7 +10848,7 @@ var Xr = class {
 	}
 	_createClippingArea() {
 		let { montageAreaWidth: e, montageAreaHeight: t } = this.options, n = new p(e / 2, t / 2);
-		this.canvas.clipPath = Xe({
+		this.canvas.clipPath = Ze({
 			canvas: this.canvas,
 			centerPoint: n,
 			options: {