@nasser-sw/fabric 7.0.0-beta1 → 7.0.1-beta10

package/dist/index.node.mjs

@@ -410,7 +410,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "7.0.0-beta1";
+var version = "7.0.1-beta9";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -17627,33 +17627,30 @@ class PatternBrush extends PencilBrush {
   }
 }
 
-// @TODO this code is terrible and Line should be a special case of polyline.
-
 const coordProps = ['x1', 'x2', 'y1', 'y2'];
-/**
- * A Class to draw a line
- * A bunch of methods will be added to Polyline to handle the line case
- * The line class is very strange to work with, is all special, it hardly aligns
- * to what a developer want everytime there is an angle
- * @deprecated
- */
 class Line extends FabricObject {
-  /**
-   * Constructor
-   * @param {Array} [points] Array of points
-   * @param {Object} [options] Options object
-   * @return {Line} thisArg
-   */
   constructor() {
-    let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 0, 0];
+    let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 100, 0];
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     super();
-    Object.assign(this, Line.ownDefaults);
+    _defineProperty(this, "hitStrokeWidth", 'auto');
+    _defineProperty(this, "_updatingEndpoints", false);
+    _defineProperty(this, "_useEndpointCoords", true);
+    _defineProperty(this, "_exportingSVG", false);
     this.setOptions(options);
     this.x1 = x1;
     this.x2 = x2;
     this.y1 = y1;
     this.y2 = y2;
+    if (options.hitStrokeWidth !== undefined) {
+      this.hitStrokeWidth = options.hitStrokeWidth;
+    }
+    this.hasBorders = false;
+    this.hasControls = true;
+    this.selectable = true;
+    this.hoverCursor = 'move';
+    this.perPixelTargetFind = false;
+    this.strokeLineCap = 'butt';
     this._setWidthHeight();
     const {
       left,
@@ -17661,129 +17658,384 @@ class Line extends FabricObject {
     } = options;
     typeof left === 'number' && this.set(LEFT, left);
     typeof top === 'number' && this.set(TOP, top);
+    this._setupLineControls();
+  }
+  _setupLineControls() {
+    this.controls = {
+      p1: new Control({
+        x: 0,
+        y: 0,
+        cursorStyle: 'move',
+        actionHandler: this._endpointActionHandler.bind(this),
+        positionHandler: this._p1PositionHandler.bind(this),
+        render: this._renderEndpointControl.bind(this),
+        sizeX: 12,
+        sizeY: 12
+      }),
+      p2: new Control({
+        x: 0,
+        y: 0,
+        cursorStyle: 'move',
+        actionHandler: this._endpointActionHandler.bind(this),
+        positionHandler: this._p2PositionHandler.bind(this),
+        render: this._renderEndpointControl.bind(this),
+        sizeX: 12,
+        sizeY: 12
+      })
+    };
+  }
+  _p1PositionHandler() {
+    return new Point(this.x1, this.y1).transform(this.getViewportTransform());
   }
+  _p2PositionHandler() {
+    return new Point(this.x2, this.y2).transform(this.getViewportTransform());
+  }
+  _renderEndpointControl(ctx, left, top) {
+    const size = 12;
+    ctx.save();
+    ctx.fillStyle = '#007bff';
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(left, top, size / 2, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+  }
+  drawBorders(ctx) {
+    let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (this._useEndpointCoords) {
+      this._drawLineBorders(ctx, styleOverride);
+      return this;
+    }
+    return super.drawBorders(ctx, styleOverride, {});
+  }
+  _drawLineBorders(ctx) {
+    var _this$canvas;
+    let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const vpt = ((_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.viewportTransform) || [1, 0, 0, 1, 0, 0];
+    ctx.save();
+    ctx.setTransform(vpt[0], vpt[1], vpt[2], vpt[3], vpt[4], vpt[5]);
+    ctx.strokeStyle = styleOverride.borderColor || this.borderColor || 'rgba(100, 200, 200, 0.5)';
+    ctx.lineWidth = (this.strokeWidth || 1) + 5;
+    ctx.lineCap = this.strokeLineCap || 'butt';
+    ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+    ctx.beginPath();
+    ctx.moveTo(this.x1, this.y1);
+    ctx.lineTo(this.x2, this.y2);
+    ctx.stroke();
+    ctx.restore();
+  }
+  _renderControls(ctx) {
+    let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    ctx.save();
+    ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+    this.drawControls(ctx, styleOverride);
+    ctx.restore();
+  }
+  getBoundingRect() {
+    if (this._useEndpointCoords) {
+      const {
+        x1,
+        y1,
+        x2,
+        y2
+      } = this;
+      const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+      const padding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+      return {
+        left: Math.min(x1, x2) - padding,
+        top: Math.min(y1, y2) - padding,
+        width: Math.abs(x2 - x1) + padding * 2 || padding * 2,
+        height: Math.abs(y2 - y1) + padding * 2 || padding * 2
+      };
+    }
+    return super.getBoundingRect();
+  }
+  setCoords() {
+    if (this._useEndpointCoords) {
+      // Set width and height for hit detection and bounding box
+      const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+      const hitPadding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+      this.width = Math.abs(this.x2 - this.x1) + hitPadding * 2;
+      this.height = Math.abs(this.y2 - this.y1) + hitPadding * 2;
 
-  /**
-   * @private
-   * @param {Object} [options] Options
-   */
-  _setWidthHeight() {
-    const {
-      x1,
-      y1,
-      x2,
-      y2
-    } = this;
-    this.width = Math.abs(x2 - x1);
-    this.height = Math.abs(y2 - y1);
-    const {
-      left,
-      top,
-      width,
-      height
-    } = makeBoundingBoxFromPoints([{
-      x: x1,
-      y: y1
-    }, {
-      x: x2,
-      y: y2
-    }]);
-    const position = new Point(left + width / 2, top + height / 2);
-    this.setPositionByOrigin(position, CENTER, CENTER);
+      // Only update left/top if they haven't been explicitly set (e.g., during loading)
+      if (this.left === 0 && this.top === 0) {
+        const center = this._findCenterFromElement();
+        this.left = center.x;
+        this.top = center.y;
+      }
+    }
+    super.setCoords();
   }
+  getCoords() {
+    if (this._useEndpointCoords) {
+      const deltaX = this.x2 - this.x1;
+      const deltaY = this.y2 - this.y1;
+      const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (length === 0) {
+        return super.getCoords();
+      }
+      const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+      const halfWidth = Math.max(effectiveStrokeWidth / 2 + 2, 5);
 
-  /**
-   * @private
-   * @param {String} key
-   * @param {*} value
-   */
+      // Unit vector perpendicular to line
+      const perpX = -deltaY / length;
+      const perpY = deltaX / length;
+
+      // Four corners of oriented rectangle
+      return [new Point(this.x1 + perpX * halfWidth, this.y1 + perpY * halfWidth), new Point(this.x2 + perpX * halfWidth, this.y2 + perpY * halfWidth), new Point(this.x2 - perpX * halfWidth, this.y2 - perpY * halfWidth), new Point(this.x1 - perpX * halfWidth, this.y1 - perpY * halfWidth)];
+    }
+    return super.getCoords();
+  }
+  containsPoint(point) {
+    if (this._useEndpointCoords) {
+      var _this$canvas2;
+      if (((_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.getActiveObject()) === this) {
+        return super.containsPoint(point);
+      }
+      const distance = this._distanceToLineSegment(point.x, point.y);
+      const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth || 1;
+      const tolerance = Math.max(effectiveStrokeWidth / 2 + 2, 5);
+      return distance <= tolerance;
+    }
+    return super.containsPoint(point);
+  }
+  _distanceToLineSegment(px, py) {
+    const x1 = this.x1,
+      y1 = this.y1,
+      x2 = this.x2,
+      y2 = this.y2;
+    const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+    if (pd2 === 0) {
+      return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+    }
+    const u = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / pd2;
+    let closestX, closestY;
+    if (u < 0) {
+      closestX = x1;
+      closestY = y1;
+    } else if (u > 1) {
+      closestX = x2;
+      closestY = y2;
+    } else {
+      closestX = x1 + u * (x2 - x1);
+      closestY = y1 + u * (y2 - y1);
+    }
+    return Math.sqrt((px - closestX) * (px - closestX) + (py - closestY) * (py - closestY));
+  }
+  _endpointActionHandler(eventData, transformData, x, y) {
+    var _this$canvas4;
+    const controlKey = transformData.corner;
+    const pointer = new Point(x, y);
+    let newX = pointer.x;
+    let newY = pointer.y;
+    if (eventData.shiftKey) {
+      const otherControl = controlKey === 'p1' ? 'p2' : 'p1';
+      const otherX = this[otherControl === 'p1' ? 'x1' : 'x2'];
+      const otherY = this[otherControl === 'p1' ? 'y1' : 'y2'];
+      const snapped = this._snapToAngle(otherX, otherY, newX, newY);
+      newX = snapped.x;
+      newY = snapped.y;
+    }
+    if (this._useEndpointCoords) {
+      var _this$canvas3;
+      if (controlKey === 'p1') {
+        this.x1 = newX;
+        this.y1 = newY;
+      } else if (controlKey === 'p2') {
+        this.x2 = newX;
+        this.y2 = newY;
+      }
+
+      // Update gradient coordinates if stroke is a gradient (but not during SVG export)
+      if (this.stroke instanceof Gradient && !this._exportingSVG) {
+        this.stroke.coords.x1 = this.x1;
+        this.stroke.coords.y1 = this.y1;
+        this.stroke.coords.x2 = this.x2;
+        this.stroke.coords.y2 = this.y2;
+      }
+      this.dirty = true;
+      this.setCoords();
+      (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+      return true;
+    }
+
+    // Fallback for old system
+    this._updatingEndpoints = true;
+    if (controlKey === 'p1') {
+      this.x1 = newX;
+      this.y1 = newY;
+    } else if (controlKey === 'p2') {
+      this.x2 = newX;
+      this.y2 = newY;
+    }
+    this._setWidthHeight();
+    this.dirty = true;
+    this._updatingEndpoints = false;
+    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
+    this.fire('modified', {
+      transform: transformData,
+      target: this,
+      e: eventData
+    });
+    return true;
+  }
+  _snapToAngle(fromX, fromY, toX, toY) {
+    const deltaX = toX - fromX;
+    const deltaY = toY - fromY;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (distance === 0) return {
+      x: toX,
+      y: toY
+    };
+    let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+    const snapIncrement = 15;
+    const snappedAngle = Math.round(angle / snapIncrement) * snapIncrement;
+    const snappedRadians = snappedAngle * (Math.PI / 180);
+    return {
+      x: fromX + Math.cos(snappedRadians) * distance,
+      y: fromY + Math.sin(snappedRadians) * distance
+    };
+  }
+  _setWidthHeight() {
+    let skipReposition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    this.width = Math.abs(this.x2 - this.x1) || 1;
+    this.height = Math.abs(this.y2 - this.y1) || 1;
+    if (!skipReposition && !this._updatingEndpoints) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = makeBoundingBoxFromPoints([{
+        x: this.x1,
+        y: this.y1
+      }, {
+        x: this.x2,
+        y: this.y2
+      }]);
+      this.setPositionByOrigin(new Point(left + width / 2, top + height / 2), CENTER, CENTER);
+    }
+  }
   _set(key, value) {
+    const oldLeft = this.left;
+    const oldTop = this.top;
     super._set(key, value);
     if (coordProps.includes(key)) {
-      // this doesn't make sense very much, since setting x1 when top or left
-      // are already set, is just going to show a strange result since the
-      // line will move way more than the developer expect.
-      // in fabric5 it worked only when the line didn't have extra transformations,
-      // in fabric6 too. With extra transform they behave bad in different ways.
-      // This needs probably a good rework or a tutorial if you have to create a dynamic line
       this._setWidthHeight();
+      this.dirty = true;
+
+      // Update gradient coordinates if stroke is a gradient (but not during SVG export)
+      if (this.stroke instanceof Gradient && !this._exportingSVG) {
+        this.stroke.coords.x1 = this.x1;
+        this.stroke.coords.y1 = this.y1;
+        this.stroke.coords.x2 = this.x2;
+        this.stroke.coords.y2 = this.y2;
+      }
+    }
+    if ((key === 'left' || key === 'top') && this.canvas && !this._updatingEndpoints) {
+      const deltaX = this.left - oldLeft;
+      const deltaY = this.top - oldTop;
+      if (deltaX !== 0 || deltaY !== 0) {
+        this._updatingEndpoints = true;
+        this.x1 += deltaX;
+        this.y1 += deltaY;
+        this.x2 += deltaX;
+        this.y2 += deltaY;
+
+        // Update gradient coordinates if stroke is a gradient
+        if (this.stroke instanceof Gradient) {
+          this.stroke.coords.x1 = this.x1;
+          this.stroke.coords.y1 = this.y1;
+          this.stroke.coords.x2 = this.x2;
+          this.stroke.coords.y2 = this.y2;
+        }
+        this._updatingEndpoints = false;
+      }
     }
     return this;
   }
-
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   */
+  render(ctx) {
+    if (this._useEndpointCoords) {
+      this._renderDirectly(ctx);
+      return;
+    }
+    super.render(ctx);
+  }
+  _renderDirectly(ctx) {
+    if (!this.visible) return;
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    ctx.lineWidth = this.strokeWidth;
+    ctx.lineCap = this.strokeLineCap || 'butt';
+    ctx.beginPath();
+    ctx.moveTo(this.x1, this.y1);
+    ctx.lineTo(this.x2, this.y2);
+    const origStrokeStyle = ctx.strokeStyle;
+    if (isFiller(this.stroke)) {
+      ctx.strokeStyle = this.stroke.toLive(ctx);
+    } else {
+      var _this$stroke;
+      ctx.strokeStyle = ((_this$stroke = this.stroke) === null || _this$stroke === void 0 ? void 0 : _this$stroke.toString()) || '#000';
+    }
+    ctx.stroke();
+    ctx.strokeStyle = origStrokeStyle;
+    ctx.restore();
+  }
   _render(ctx) {
+    if (this._useEndpointCoords) return;
     ctx.beginPath();
     const p = this.calcLinePoints();
     ctx.moveTo(p.x1, p.y1);
     ctx.lineTo(p.x2, p.y2);
     ctx.lineWidth = this.strokeWidth;
-
-    // TODO: test this
-    // make sure setting "fill" changes color of a line
-    // (by copying fillStyle to strokeStyle, since line is stroked, not filled)
     const origStrokeStyle = ctx.strokeStyle;
     if (isFiller(this.stroke)) {
       ctx.strokeStyle = this.stroke.toLive(ctx);
-    } else {
-      var _this$stroke;
-      ctx.strokeStyle = (_this$stroke = this.stroke) !== null && _this$stroke !== void 0 ? _this$stroke : ctx.fillStyle;
     }
     this.stroke && this._renderStroke(ctx);
     ctx.strokeStyle = origStrokeStyle;
   }
-
-  /**
-   * This function is an helper for svg import. it returns the center of the object in the svg
-   * untransformed coordinates
-   * @private
-   * @return {Point} center point from element coordinates
-   */
   _findCenterFromElement() {
     return new Point((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2);
   }
-
-  /**
-   * Returns object representation of an instance
-   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-   * @return {Object} object representation of an instance
-   */
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    if (this._useEndpointCoords) {
+      return {
+        ...super.toObject(propertiesToInclude),
+        x1: this.x1,
+        y1: this.y1,
+        x2: this.x2,
+        y2: this.y2
+      };
+    }
     return {
       ...super.toObject(propertiesToInclude),
       ...this.calcLinePoints()
     };
   }
-
-  /*
-   * Calculate object dimensions from its properties
-   * @private
-   */
   _getNonTransformedDimensions() {
     const dim = super._getNonTransformedDimensions();
-    if (this.strokeLineCap === 'butt') {
-      if (this.width === 0) {
-        dim.y -= this.strokeWidth;
-      }
-      if (this.height === 0) {
-        dim.x -= this.strokeWidth;
-      }
+    if (this.strokeLineCap === 'round') {
+      dim.x += this.strokeWidth;
+      dim.y += this.strokeWidth;
     }
     return dim;
   }
-
-  /**
-   * Recalculates line points given width and height
-   * Those points are simply placed around the center,
-   * This is not useful outside internal render functions and svg output
-   * Is not meant to be for the developer.
-   * @private
-   */
   calcLinePoints() {
+    if (this._updatingEndpoints) {
+      const centerX = (this.x1 + this.x2) / 2;
+      const centerY = (this.y1 + this.y2) / 2;
+      return {
+        x1: this.x1 - centerX,
+        y1: this.y1 - centerY,
+        x2: this.x2 - centerX,
+        y2: this.y2 - centerY
+      };
+    }
     const {
       x1: _x1,
       x2: _x2,
@@ -17792,48 +18044,64 @@ class Line extends FabricObject {
       width,
       height
     } = this;
-    const xMult = _x1 <= _x2 ? -1 : 1,
-      yMult = _y1 <= _y2 ? -1 : 1,
-      x1 = xMult * width / 2,
-      y1 = yMult * height / 2,
-      x2 = xMult * -width / 2,
-      y2 = yMult * -height / 2;
+    const xMult = _x1 <= _x2 ? -1 : 1;
+    const yMult = _y1 <= _y2 ? -1 : 1;
     return {
-      x1,
-      x2,
-      y1,
-      y2
+      x1: xMult * width / 2,
+      y1: yMult * height / 2,
+      x2: xMult * -width / 2,
+      y2: yMult * -height / 2
     };
   }
-
-  /* _FROM_SVG_START_ */
-
-  /**
-   * Returns svg representation of an instance
-   * @return {Array} an array of strings with the specific svg representation
-   * of the instance
-   */
   _toSVG() {
-    const {
-      x1,
-      x2,
-      y1,
-      y2
-    } = this.calcLinePoints();
-    return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
+    if (this._useEndpointCoords) {
+      // Use absolute coordinates to bypass all Fabric.js transforms
+      // Handle gradients manually for proper SVG export
+      let strokeAttr = '';
+      if (this.stroke instanceof Gradient) {
+        // Let Fabric.js handle gradient definition, but we'll use the reference
+        strokeAttr = `stroke="url(#${this.stroke.id})"`;
+      } else {
+        strokeAttr = `stroke="${this.stroke || 'none'}"`;
+      }
+      return [`<line ${strokeAttr} stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLineCap}" `, `stroke-dasharray="${this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none'}" `, `stroke-dashoffset="${this.strokeDashOffset}" stroke-linejoin="${this.strokeLineJoin}" `, `stroke-miterlimit="${this.strokeMiterLimit}" fill="${this.fill || 'none'}" `, `fill-rule="${this.fillRule}" opacity="${this.opacity}" `, `x1="${this.x1}" y1="${this.y1}" x2="${this.x2}" y2="${this.y2}" />\n`];
+    } else {
+      // Use standard calcLinePoints for legacy mode
+      const {
+        x1,
+        x2,
+        y1,
+        y2
+      } = this.calcLinePoints();
+      return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
+    }
   }
+  toSVG(reviver) {
+    if (this._useEndpointCoords) {
+      // For endpoint coords, we need to bypass transforms but still allow gradients
+      // Let's temporarily disable transforms during SVG generation
+      const originalLeft = this.left;
+      const originalTop = this.top;
 
-  /**
-   * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})
-   * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
-   */
+      // Set position to center of line for gradient calculation
+      this.left = (this.x1 + this.x2) / 2;
+      this.top = (this.y1 + this.y2) / 2;
 
-  /**
-   * Returns Line instance from an SVG element
-   * @param {HTMLElement} element Element to parse
-   * @param {Object} [options] Options object
-   * @param {Function} [callback] callback function invoked after parsing
-   */
+      // Get the SVG with standard system (for gradient handling)
+      const standardSVG = super.toSVG(reviver);
+
+      // Restore original position
+      this.left = originalLeft;
+      this.top = originalTop;
+
+      // Extract gradient definition and clean up the line element
+      // Remove the transform wrapper and update coordinates
+      const cleanSVG = standardSVG.replace(/<g transform="[^"]*"[^>]*>/g, '').replace(/<\/g>/g, '').replace(/x1="[^"]*"/g, `x1="${this.x1}"`).replace(/y1="[^"]*"/g, `y1="${this.y1}"`).replace(/x2="[^"]*"/g, `x2="${this.x2}"`).replace(/y2="[^"]*"/g, `y2="${this.y2}"`);
+      return cleanSVG;
+    }
+    // Use default behavior for legacy mode
+    return super.toSVG(reviver);
+  }
   static async fromElement(element, options, cssRules) {
     const {
       x1 = 0,
@@ -17844,14 +18112,6 @@ class Line extends FabricObject {
     } = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);
     return new this([x1, y1, x2, y2], parsedAttributes);
   }
-
-  /* _FROM_SVG_END_ */
-
-  /**
-   * Returns Line instance from an object representation
-   * @param {Object} object Object to create an instance from
-   * @returns {Promise<Line>}
-   */
   static fromObject(_ref) {
     let {
       x1,
@@ -17868,32 +18128,195 @@ class Line extends FabricObject {
     });
   }
 }
+_defineProperty(Line, "type", 'Line');
+_defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
+_defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
+classRegistry.setClass(Line);
+classRegistry.setSVGClass(Line);
+
 /**
- * x value or first line edge
- * @type number
+ * Calculate the distance between two points
  */
+function pointDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+
 /**
- * y value or first line edge
- * @type number
+ * Normalize a vector
  */
+function normalizeVector(vector) {
+  const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
+  if (length === 0) return {
+    x: 0,
+    y: 0
+  };
+  return {
+    x: vector.x / length,
+    y: vector.y / length
+  };
+}
+
 /**
- * x value or second line edge
- * @type number
+ * Get the maximum allowed radius for a corner based on adjacent edge lengths
  */
+function getMaxRadius(prevPoint, currentPoint, nextPoint) {
+  const dist1 = pointDistance(prevPoint, currentPoint);
+  const dist2 = pointDistance(currentPoint, nextPoint);
+  return Math.min(dist1, dist2) / 2;
+}
+
 /**
- * y value or second line edge
- * @type number
+ * Calculate rounded corner data for a single corner
  */
-_defineProperty(Line, "type", 'Line');
-_defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
-_defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
-classRegistry.setClass(Line);
-classRegistry.setSVGClass(Line);
+function calculateRoundedCorner(prevPoint, currentPoint, nextPoint, radius) {
+  // Calculate edge vectors
+  const edge1 = {
+    x: currentPoint.x - prevPoint.x,
+    y: currentPoint.y - prevPoint.y
+  };
+  const edge2 = {
+    x: nextPoint.x - currentPoint.x,
+    y: nextPoint.y - currentPoint.y
+  };
+
+  // Normalize edge vectors
+  const norm1 = normalizeVector(edge1);
+  const norm2 = normalizeVector(edge2);
+
+  // Calculate the maximum allowed radius
+  const maxRadius = getMaxRadius(prevPoint, currentPoint, nextPoint);
+  const actualRadius = Math.min(radius, maxRadius);
+
+  // Calculate start and end points of the rounded corner
+  const startPoint = {
+    x: currentPoint.x - norm1.x * actualRadius,
+    y: currentPoint.y - norm1.y * actualRadius
+  };
+  const endPoint = {
+    x: currentPoint.x + norm2.x * actualRadius,
+    y: currentPoint.y + norm2.y * actualRadius
+  };
+
+  // Calculate control points for bezier curve
+  // Using the magic number kRect for optimal circular approximation
+  const controlOffset = actualRadius * kRect;
+  const cp1 = {
+    x: startPoint.x + norm1.x * controlOffset,
+    y: startPoint.y + norm1.y * controlOffset
+  };
+  const cp2 = {
+    x: endPoint.x - norm2.x * controlOffset,
+    y: endPoint.y - norm2.y * controlOffset
+  };
+  return {
+    corner: currentPoint,
+    start: startPoint,
+    end: endPoint,
+    cp1,
+    cp2,
+    actualRadius
+  };
+}
+
+/**
+ * Apply corner radius to a polygon defined by points
+ */
+function applyCornerRadiusToPolygon(points, radius) {
+  let radiusAsPercentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (points.length < 3) {
+    throw new Error('Polygon must have at least 3 points');
+  }
+
+  // Calculate bounding box if radius is percentage-based
+  let actualRadius = radius;
+  if (radiusAsPercentage) {
+    const minX = Math.min(...points.map(p => p.x));
+    const maxX = Math.max(...points.map(p => p.x));
+    const minY = Math.min(...points.map(p => p.y));
+    const maxY = Math.max(...points.map(p => p.y));
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const minDimension = Math.min(width, height);
+    actualRadius = radius / 100 * minDimension;
+  }
+  const roundedCorners = [];
+  for (let i = 0; i < points.length; i++) {
+    const prevIndex = (i - 1 + points.length) % points.length;
+    const nextIndex = (i + 1) % points.length;
+    const prevPoint = points[prevIndex];
+    const currentPoint = points[i];
+    const nextPoint = points[nextIndex];
+    const roundedCorner = calculateRoundedCorner(prevPoint, currentPoint, nextPoint, actualRadius);
+    roundedCorners.push(roundedCorner);
+  }
+  return roundedCorners;
+}
+
+/**
+ * Render a rounded polygon to a canvas context
+ */
+function renderRoundedPolygon(ctx, roundedCorners) {
+  let closed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (roundedCorners.length === 0) return;
+  ctx.beginPath();
+
+  // Start at the first corner's start point
+  const firstCorner = roundedCorners[0];
+  ctx.moveTo(firstCorner.start.x, firstCorner.start.y);
+  for (let i = 0; i < roundedCorners.length; i++) {
+    const corner = roundedCorners[i];
+    const nextIndex = (i + 1) % roundedCorners.length;
+    const nextCorner = roundedCorners[nextIndex];
+
+    // Draw the rounded corner using bezier curve
+    ctx.bezierCurveTo(corner.cp1.x, corner.cp1.y, corner.cp2.x, corner.cp2.y, corner.end.x, corner.end.y);
+
+    // Draw line to next corner's start point (if not the last segment in open path)
+    if (i < roundedCorners.length - 1 || closed) {
+      ctx.lineTo(nextCorner.start.x, nextCorner.start.y);
+    }
+  }
+  if (closed) {
+    ctx.closePath();
+  }
+}
+
+/**
+ * Generate SVG path data for a rounded polygon
+ */
+function generateRoundedPolygonPath(roundedCorners) {
+  let closed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  if (roundedCorners.length === 0) return '';
+  const pathData = [];
+  const firstCorner = roundedCorners[0];
+
+  // Move to first corner's start point
+  pathData.push(`M ${firstCorner.start.x} ${firstCorner.start.y}`);
+  for (let i = 0; i < roundedCorners.length; i++) {
+    const corner = roundedCorners[i];
+    const nextIndex = (i + 1) % roundedCorners.length;
+    const nextCorner = roundedCorners[nextIndex];
+
+    // Add bezier curve for the rounded corner
+    pathData.push(`C ${corner.cp1.x} ${corner.cp1.y} ${corner.cp2.x} ${corner.cp2.y} ${corner.end.x} ${corner.end.y}`);
+
+    // Add line to next corner's start point (if not the last segment in open path)
+    if (i < roundedCorners.length - 1 || closed) {
+      pathData.push(`L ${nextCorner.start.x} ${nextCorner.start.y}`);
+    }
+  }
+  if (closed) {
+    pathData.push('Z');
+  }
+  return pathData.join(' ');
+}
 
 const triangleDefaultValues = {
   width: 100,
-  height: 100
+  height: 100,
+  cornerRadius: 0
 };
+const TRIANGLE_PROPS = ['cornerRadius'];
 class Triangle extends FabricObject {
   static getDefaults() {
     return {
@@ -17912,34 +18335,90 @@ class Triangle extends FabricObject {
     this.setOptions(options);
   }
 
+  /**
+   * Get triangle points as an array of XY coordinates
+   * @private
+   */
+  _getTrianglePoints() {
+    const widthBy2 = this.width / 2;
+    const heightBy2 = this.height / 2;
+    return [{
+      x: -widthBy2,
+      y: heightBy2
+    },
+    // bottom left
+    {
+      x: 0,
+      y: -heightBy2
+    },
+    // top center
+    {
+      x: widthBy2,
+      y: heightBy2
+    } // bottom right
+    ];
+  }
+
   /**
    * @private
    * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _render(ctx) {
-    const widthBy2 = this.width / 2,
-      heightBy2 = this.height / 2;
-    ctx.beginPath();
-    ctx.moveTo(-widthBy2, heightBy2);
-    ctx.lineTo(0, -heightBy2);
-    ctx.lineTo(widthBy2, heightBy2);
-    ctx.closePath();
+    if (this.cornerRadius > 0) {
+      // Render rounded triangle
+      const points = this._getTrianglePoints();
+      const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+      renderRoundedPolygon(ctx, roundedCorners, true);
+    } else {
+      // Render sharp triangle (original implementation)
+      const widthBy2 = this.width / 2;
+      const heightBy2 = this.height / 2;
+      ctx.beginPath();
+      ctx.moveTo(-widthBy2, heightBy2);
+      ctx.lineTo(0, -heightBy2);
+      ctx.lineTo(widthBy2, heightBy2);
+      ctx.closePath();
+    }
     this._renderPaintInOrder(ctx);
   }
 
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
+   */
+  toObject() {
+    let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return super.toObject([...TRIANGLE_PROPS, ...propertiesToInclude]);
+  }
+
   /**
    * Returns svg representation of an instance
    * @return {Array} an array of strings with the specific svg representation
    * of the instance
    */
   _toSVG() {
-    const widthBy2 = this.width / 2,
-      heightBy2 = this.height / 2,
-      points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
-    return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+    if (this.cornerRadius > 0) {
+      // Generate rounded triangle as path
+      const points = this._getTrianglePoints();
+      const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+      const pathData = generateRoundedPolygonPath(roundedCorners, true);
+      return ['<path ', 'COMMON_PARTS', `d="${pathData}" />`];
+    } else {
+      // Original sharp triangle implementation
+      const widthBy2 = this.width / 2;
+      const heightBy2 = this.height / 2;
+      const points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
+      return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+    }
   }
 }
+/**
+ * Corner radius for rounded triangle corners
+ * @type Number
+ */
 _defineProperty(Triangle, "type", 'Triangle');
+_defineProperty(Triangle, "cacheProperties", [...cacheProperties, ...TRIANGLE_PROPS]);
 _defineProperty(Triangle, "ownDefaults", triangleDefaultValues);
 classRegistry.setClass(Triangle);
 classRegistry.setSVGClass(Triangle);
@@ -18104,7 +18583,8 @@ const polylineDefaultValues = {
   /**
    * @deprecated transient option soon to be removed in favor of a different design
    */
-  exactBoundingBox: false
+  exactBoundingBox: false,
+  cornerRadius: 0
 };
 class Polyline extends FabricObject {
   static getDefaults() {
@@ -18318,7 +18798,7 @@ class Polyline extends FabricObject {
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return {
-      ...super.toObject(propertiesToInclude),
+      ...super.toObject(['cornerRadius', ...propertiesToInclude]),
       points: this.points.map(_ref => {
         let {
           x,
@@ -18338,14 +18818,28 @@ class Polyline extends FabricObject {
    * of the instance
    */
   _toSVG() {
-    const points = [],
-      diffX = this.pathOffset.x,
-      diffY = this.pathOffset.y,
-      NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
-    for (let i = 0, len = this.points.length; i < len; i++) {
-      points.push(toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ');
+    if (this.cornerRadius > 0 && this.points.length >= 3) {
+      // Generate rounded polygon/polyline as path
+      const diffX = this.pathOffset.x;
+      const diffY = this.pathOffset.y;
+      const adjustedPoints = this.points.map(point => ({
+        x: point.x - diffX,
+        y: point.y - diffY
+      }));
+      const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+      const pathData = generateRoundedPolygonPath(roundedCorners, !this.isOpen());
+      return ['<path ', 'COMMON_PARTS', `d="${pathData}" />\n`];
+    } else {
+      // Original sharp corners implementation
+      const points = [];
+      const diffX = this.pathOffset.x;
+      const diffY = this.pathOffset.y;
+      const NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
+      for (let i = 0, len = this.points.length; i < len; i++) {
+        points.push(toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ');
+      }
+      return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
     }
-    return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
   }
 
   /**
@@ -18361,13 +18855,24 @@ class Polyline extends FabricObject {
       // NaN comes from parseFloat of a empty string in parser
       return;
     }
-    ctx.beginPath();
-    ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
-    for (let i = 0; i < len; i++) {
-      const point = this.points[i];
-      ctx.lineTo(point.x - x, point.y - y);
+    if (this.cornerRadius > 0 && len >= 3) {
+      // Render with rounded corners
+      const adjustedPoints = this.points.map(point => ({
+        x: point.x - x,
+        y: point.y - y
+      }));
+      const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+      renderRoundedPolygon(ctx, roundedCorners, !this.isOpen());
+    } else {
+      // Original sharp corners implementation
+      ctx.beginPath();
+      ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
+      for (let i = 0; i < len; i++) {
+        const point = this.points[i];
+        ctx.lineTo(point.x - x, point.y - y);
+      }
+      !this.isOpen() && ctx.closePath();
     }
-    !this.isOpen() && ctx.closePath();
     this._renderPaintInOrder(ctx);
   }
 
@@ -18432,10 +18937,15 @@ class Polyline extends FabricObject {
  * @type Boolean
  * @default false
  */
+/**
+ * Corner radius for rounded corners
+ * @type Number
+ * @default 0
+ */
 _defineProperty(Polyline, "ownDefaults", polylineDefaultValues);
 _defineProperty(Polyline, "type", 'Polyline');
 _defineProperty(Polyline, "layoutProperties", [SKEW_X, SKEW_Y, 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
-_defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points']);
+_defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points', 'cornerRadius']);
 _defineProperty(Polyline, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES]);
 classRegistry.setClass(Polyline);
 classRegistry.setSVGClass(Polyline);
@@ -18819,6 +19329,97 @@ function measureGraphemeWithKerning(grapheme, previousGrapheme, options, ctx) {
   };
 }
 
+/**
+ * Get a representative character for font metrics measurement
+ * Uses canvas to test which scripts the font actually supports
+ */
+function getRepresentativeCharacter(fontFamily) {
+  const context = getMeasurementContext();
+
+  // Wait for font to be ready if possible
+  if (typeof document !== 'undefined' && 'fonts' in document) {
+    try {
+      // Check if font is ready, if not, use fallback immediately
+      if (!document.fonts.check(`16px ${fontFamily}`)) {
+        return 'M'; // Use safe fallback while font loads
+      }
+    } catch (e) {
+      // Font check failed, use fallback
+      return 'M';
+    }
+  }
+
+  // Test characters for different scripts
+  const testChars = [{
+    char: 'م',
+    script: 'Arabic'
+  },
+  // Arabic
+  {
+    char: 'א',
+    script: 'Hebrew'
+  },
+  // Hebrew  
+  {
+    char: 'अ',
+    script: 'Devanagari'
+  },
+  // Hindi/Sanskrit
+  {
+    char: 'ا',
+    script: 'Urdu'
+  },
+  // Urdu
+  {
+    char: 'ک',
+    script: 'Persian'
+  },
+  // Persian
+  {
+    char: 'த',
+    script: 'Tamil'
+  },
+  // Tamil
+  {
+    char: 'ก',
+    script: 'Thai'
+  },
+  // Thai
+  {
+    char: 'М',
+    script: 'Cyrillic'
+  },
+  // Cyrillic
+  {
+    char: 'Ω',
+    script: 'Greek'
+  },
+  // Greek
+  {
+    char: 'M',
+    script: 'Latin'
+  } // Latin (fallback)
+  ];
+
+  // Set the font
+  context.font = `16px ${fontFamily}`;
+
+  // Test each character to see which ones render properly
+  // Use a more robust width check to avoid false positives
+  const fallbackWidth = context.measureText('M').width;
+  for (const test of testChars) {
+    const metrics = context.measureText(test.char);
+
+    // Character is valid if it has width and isn't just a fallback glyph
+    if (metrics.width > 0 && Math.abs(metrics.width - fallbackWidth) > 0.1) {
+      return test.char;
+    }
+  }
+
+  // Fallback to Latin 'M'
+  return 'M';
+}
+
 /**
  * Get font metrics for layout calculations
  */
@@ -18832,8 +19433,9 @@ function getFontMetrics(options) {
   const context = getMeasurementContext();
   applyFontStyle(context, options);
 
-  // Use 'M' as sample character for metrics
-  const metrics = context.measureText('M');
+  // Use representative character based on font's primary script
+  const sample = getRepresentativeCharacter(options.fontFamily);
+  const metrics = context.measureText(sample);
   const fontSize = options.fontSize;
 
   // Calculate metrics with fallbacks
@@ -18885,7 +19487,11 @@ function getFontDeclaration(options) {
   } = options;
 
   // Normalize font family (add quotes if needed)
-  const normalizedFamily = fontFamily.includes(' ') && !fontFamily.includes('"') && !fontFamily.includes("'") ? `"${fontFamily}"` : fontFamily;
+  let normalizedFamily = fontFamily.includes(' ') && !fontFamily.includes('"') && !fontFamily.includes("'") ? `"${fontFamily}"` : fontFamily;
+
+  // Note: Font fallbacks are handled in the rendering phase only
+  // to avoid affecting measurement calculations for text wrapping
+
   return `${fontStyle} ${fontWeight} ${fontSize}px ${normalizedFamily}`;
 }
 
@@ -19037,6 +19643,81 @@ const measurementCache = new MeasurementCache();
 const kerningCache = new KerningCache();
 const fontMetricsCache = new FontMetricsCache();
 
+// Set up font loading listener to clear caches when fonts change
+if (typeof document !== 'undefined' && 'fonts' in document) {
+  document.fonts.addEventListener('loadingdone', () => {
+    // Clear all caches when fonts finish loading
+    clearAllCaches();
+  });
+}
+
+/**
+ * Clear all measurement caches
+ */
+function clearAllCaches() {
+  measurementCache.clear();
+  kerningCache.clear();
+  fontMetricsCache.clear();
+}
+
+/**
+ * Detect if a font lacks English glyph support
+ * These fonts should use browser-native measurement instead of Fabric's character-by-character measurement
+ */
+function fontLacksEnglishGlyphs(fontFamily) {
+  if (typeof document === 'undefined') return false;
+
+  // Known fonts that lack English glyphs
+  const knownNonEnglishFonts = ['stv', 'arabic', 'naskh', 'thuluth', 'kufi', 'diwani', 'nastaliq', 'kufic', 'hijazi', 'madinah', 'makkah'];
+  const lowerFontFamily = fontFamily.toLowerCase();
+
+  // Check known list first
+  if (knownNonEnglishFonts.some(font => lowerFontFamily.includes(font))) {
+    return true;
+  }
+
+  // Dynamic glyph support detection
+  const context = getMeasurementContext();
+  context.font = `16px ${fontFamily}`;
+
+  // Test English characters
+  const englishChars = ['A', 'B', 'C', 'a', 'b', 'c', 'M', 'W'];
+  const fallbackFont = 'Arial, sans-serif';
+
+  // Measure with target font
+  const targetWidths = englishChars.map(char => context.measureText(char).width);
+
+  // Measure with fallback font
+  context.font = `16px ${fallbackFont}`;
+  const fallbackWidths = englishChars.map(char => context.measureText(char).width);
+
+  // If most measurements are identical, the font likely doesn't have English glyphs
+  let identicalCount = 0;
+  for (let i = 0; i < englishChars.length; i++) {
+    if (Math.abs(targetWidths[i] - fallbackWidths[i]) < 0.5) {
+      identicalCount++;
+    }
+  }
+  const lacksSupportThreshold = englishChars.length * 0.7; // 70% identical = lacks support
+  const lacksSupport = identicalCount >= lacksSupportThreshold;
+  return lacksSupport;
+}
+
+// Cache for font glyph detection results
+const fontGlyphCache = new Map();
+
+/**
+ * Cached version of font glyph detection
+ */
+function fontLacksEnglishGlyphsCached(fontFamily) {
+  if (fontGlyphCache.has(fontFamily)) {
+    return fontGlyphCache.get(fontFamily);
+  }
+  const result = fontLacksEnglishGlyphs(fontFamily);
+  fontGlyphCache.set(fontFamily, result);
+  return result;
+}
+
 /**
  * Unicode and Internationalization Support
  * 
@@ -20220,6 +20901,15 @@ class FabricText extends StyledText {
    * Does not return dimensions.
    */
   initDimensions() {
+    // Check if font is ready for accurate measurements
+    // Only block initialization if it's a critical font loading situation
+    const fontReady = this._isFontReady();
+    if (!fontReady && !this.initialized) {
+      // Only schedule font loading on first initialization
+      this._scheduleInitAfterFontLoad();
+      // Continue with fallback measurements for now
+    }
+
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout && !this.path) {
       return this.initDimensionsAdvanced();
@@ -20236,7 +20926,21 @@ class FabricText extends StyledText {
     }
     if (this.textAlign.includes(JUSTIFY)) {
       // once text is measured we need to make space fatter to make justified text.
-      this.enlargeSpaces();
+      // Ensure __charBounds exists before calling enlargeSpaces
+      if (this.__charBounds && this.__charBounds.length > 0) {
+        this.enlargeSpaces();
+      } else {
+        console.warn('⚠️ __charBounds not ready for justify alignment, deferring enlargeSpaces');
+        // Defer the justify calculation until the next frame
+        setTimeout(() => {
+          if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+            var _this$canvas;
+            console.log('🔧 Applying deferred justify alignment');
+            this.enlargeSpaces();
+            (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+          }
+        }, 0);
+      }
     }
   }
 
@@ -20245,8 +20949,9 @@ class FabricText extends StyledText {
    */
   enlargeSpaces() {
     let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
+    const isRtl = this.direction === 'rtl';
     for (let i = 0, len = this._textLines.length; i < len; i++) {
-      if (this.textAlign !== JUSTIFY && (i === len - 1 || this.isEndOfWrapping(i))) {
+      if (!this.textAlign.includes('justify') && (i === len - 1 || this.isEndOfWrapping(i))) {
         continue;
       }
       accumulatedSpace = 0;
@@ -20255,15 +20960,47 @@ class FabricText extends StyledText {
       if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
         numberOfSpaces = spaces.length;
         diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-        for (let j = 0; j <= line.length; j++) {
-          charBound = this.__charBounds[i][j];
-          if (this._reSpaceAndTab.test(line[j])) {
-            charBound.width += diffSpace;
-            charBound.kernedWidth += diffSpace;
-            charBound.left += accumulatedSpace;
-            accumulatedSpace += diffSpace;
-          } else {
-            charBound.left += accumulatedSpace;
+        console.log(`🔧 EnlargeSpaces Line ${i}:`);
+        console.log(`   Current width: ${currentLineWidth}, Target: ${this.width}`);
+        console.log(`   Spaces: ${numberOfSpaces}, diffSpace: ${diffSpace.toFixed(2)}`);
+        if (isRtl) {
+          for (let j = 0; j < line.length; j++) {
+            if (this._reSpaceAndTab.test(line[j])) ;
+          }
+
+          // For RTL, we need to work backwards through the visual positions
+          // but still update logical positions correctly
+          let spaceCount = 0;
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                charBound.kernedWidth += diffSpace;
+                spaceCount++;
+              }
+
+              // For RTL, shift all characters to the right by the total expansion
+              // minus the expansion that comes after this character
+              const remainingSpaces = numberOfSpaces - spaceCount;
+              const shiftAmount = remainingSpaces * diffSpace;
+              charBound.left += shiftAmount;
+            }
+          }
+        } else {
+          // LTR processing (original logic)
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                charBound.kernedWidth += diffSpace;
+                charBound.left += accumulatedSpace;
+                accumulatedSpace += diffSpace;
+              } else {
+                charBound.left += accumulatedSpace;
+              }
+            }
           }
         }
       }
@@ -20341,6 +21078,18 @@ class FabricText extends StyledText {
 
     // Convert layout to legacy format for compatibility
     this._convertLayoutToLegacyFormat(layout);
+
+    // Ensure justify alignment is properly applied for compatibility with legacy rendering
+    if (this.textAlign.includes(JUSTIFY)) {
+      // Force enlarge spaces after advanced layout calculation
+      setTimeout(() => {
+        if (this.enlargeSpaces) {
+          var _this$canvas2;
+          this.enlargeSpaces();
+          (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.renderAll();
+        }
+      }, 0);
+    }
     this.dirty = true;
   }
 
@@ -20921,7 +21670,15 @@ class FabricText extends StyledText {
     if (currentDirection !== this.direction) {
       ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
-      ctx.textAlign = isLtr ? LEFT : RIGHT;
+
+      // For justify alignments, we need to set the correct canvas text alignment
+      // This is crucial for RTL text to render in the correct order
+      if (isJustify) {
+        // Justify uses LEFT alignment as a base, letting the character positioning handle justification
+        ctx.textAlign = LEFT;
+      } else {
+        ctx.textAlign = isLtr ? LEFT : RIGHT;
+      }
     }
     top -= lineHeight * this._fontSizeFraction / this.lineHeight;
     if (shortCut) {
@@ -21157,9 +21914,21 @@ class FabricText extends StyledText {
       direction = this.direction,
       isEndOfWrapping = this.isEndOfWrapping(lineIndex);
     let leftOffset = 0;
-    if (textAlign === JUSTIFY || textAlign === JUSTIFY_CENTER && !isEndOfWrapping || textAlign === JUSTIFY_RIGHT && !isEndOfWrapping || textAlign === JUSTIFY_LEFT && !isEndOfWrapping) {
-      return 0;
+
+    // Handle justify alignments (excluding last lines and wrapped line ends)
+    const isJustifyLine = textAlign === JUSTIFY || textAlign === JUSTIFY_CENTER && !isEndOfWrapping || textAlign === JUSTIFY_RIGHT && !isEndOfWrapping || textAlign === JUSTIFY_LEFT && !isEndOfWrapping;
+    if (isJustifyLine) {
+      // Justify lines should start at the left edge for LTR and right edge for RTL
+      // The space distribution is handled by enlargeSpaces()
+      if (direction === 'rtl') {
+        // For RTL justify, we need to account for the line being right-aligned
+        return 0;
+      } else {
+        return 0;
+      }
     }
+
+    // Handle non-justify alignments
     if (textAlign === CENTER) {
       leftOffset = lineDiff / 2;
     }
@@ -21172,6 +21941,8 @@ class FabricText extends StyledText {
     if (textAlign === JUSTIFY_RIGHT) {
       leftOffset = lineDiff;
     }
+
+    // Apply RTL adjustments for non-justify alignments
     if (direction === 'rtl') {
       if (textAlign === RIGHT || textAlign === JUSTIFY || textAlign === JUSTIFY_RIGHT) {
         leftOffset = 0;
@@ -21330,7 +22101,19 @@ class FabricText extends StyledText {
       fontSize = this.fontSize
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let forMeasuring = arguments.length > 1 ? arguments[1] : undefined;
-    const parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || FabricText.genericFonts.includes(fontFamily.toLowerCase()) ? fontFamily : `"${fontFamily}"`;
+    let parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || FabricText.genericFonts.includes(fontFamily.toLowerCase()) ? fontFamily : `"${fontFamily}"`;
+
+    // For fonts like STV that don't support English/Latin characters,
+    // add fallback fonts for consistent rendering of unsupported characters
+    // Only add fallbacks during actual rendering, not for measurements
+    if (!forMeasuring &&
+    // Only during rendering, not measuring
+    !fontFamily.includes(',') && (
+    // Don't add fallbacks if already has them
+    fontFamily.toLowerCase().includes('stv') || fontFamily.toLowerCase().includes('arabic') || fontFamily.toLowerCase().includes('naskh') || fontFamily.toLowerCase().includes('kufi'))) {
+      // Add fallback fonts for unsupported characters (spaces, punctuation, etc.)
+      parsedFontFamily = `${parsedFontFamily}, "Arial Unicode MS", Arial, sans-serif`;
+    }
     return [fontStyle, fontWeight, `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, parsedFontFamily].join(' ');
   }
 
@@ -21374,7 +22157,13 @@ class FabricText extends StyledText {
       newLine = ['\n'];
     let newText = [];
     for (let i = 0; i < lines.length; i++) {
-      newLines[i] = this.graphemeSplit(lines[i]);
+      // Use BiDi-aware grapheme splitting for RTL text
+      if (this.direction === 'rtl' || this._containsArabicText(lines[i])) {
+        newLines[i] = segmentGraphemes(lines[i]);
+        console.log(`🔤 BiDi-aware split line ${i}: "${lines[i]}" -> [${newLines[i].join(', ')}]`);
+      } else {
+        newLines[i] = this.graphemeSplit(lines[i]);
+      }
       newText = newText.concat(newLines[i], newLine);
     }
     newText.pop();
@@ -21386,6 +22175,14 @@ class FabricText extends StyledText {
     };
   }
 
+  /**
+   * Check if text contains Arabic characters
+   * @private
+   */
+  _containsArabicText(text) {
+    return /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+  }
+
   /**
    * Returns object representation of an instance
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
@@ -21508,6 +22305,88 @@ class FabricText extends StyledText {
 
   /* _FROM_SVG_END_ */
 
+  /**
+   * Check if the font is ready for accurate measurements
+   * @private
+   */
+  _isFontReady() {
+    if (typeof document === 'undefined' || !('fonts' in document)) {
+      return true; // Assume ready in non-browser environments
+    }
+    try {
+      return document.fonts.check(`${this.fontSize}px ${this.fontFamily}`);
+    } catch (e) {
+      return true; // Fallback to assuming ready if check fails
+    }
+  }
+
+  /**
+   * Schedule re-initialization after font loads
+   * @private
+   */
+  _scheduleInitAfterFontLoad() {
+    if (typeof document === 'undefined' || !('fonts' in document)) {
+      return;
+    }
+
+    // Only schedule if not already waiting
+    if (this._fontLoadScheduled) {
+      return;
+    }
+    this._fontLoadScheduled = true;
+    const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
+    document.fonts.load(fontSpec).then(() => {
+      this._fontLoadScheduled = false;
+      // Re-initialize dimensions with proper font metrics
+      this.initDimensions();
+
+      // Extra step for justify alignment after font loading
+      if (this.textAlign && this.textAlign.includes(JUSTIFY)) {
+        setTimeout(() => {
+          var _this$canvas3;
+          if (this.enlargeSpaces) {
+            this.enlargeSpaces();
+          }
+          (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+        }, 10);
+      } else {
+        var _this$canvas4;
+        (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
+      }
+    }).catch(() => {
+      this._fontLoadScheduled = false;
+    });
+  }
+
+  /**
+   * Force complete text re-initialization (useful after JSON loading)
+   */
+  forceTextReinitialization() {
+    console.log('🔄 Force reinitializing text object');
+
+    // Clear all caches
+    this._clearCache();
+    this.dirty = true;
+
+    // Force text splitting to rebuild internal structures
+    this._splitText();
+
+    // Re-initialize dimensions
+    this.initDimensions();
+
+    // Special handling for justify alignment
+    if (this.textAlign && this.textAlign.includes(JUSTIFY)) {
+      // Ensure justify is applied after dimensions are set
+      setTimeout(() => {
+        if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+          var _this$canvas5;
+          this.enlargeSpaces();
+          (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        }
+      }, 10);
+    }
+  }
+
   /**
    * Returns FabricText instance from an object representation
    * @param {Object} object plain js Object to create an instance from
@@ -21519,6 +22398,93 @@ class FabricText extends StyledText {
       styles: stylesFromArray(object.styles || {}, object.text)
     }, {
       extraParam: 'text'
+    }).then(textObject => {
+      // Ensure text object is properly initialized after JSON deserialization
+      // This is critical for justify alignment and other text layout features
+      textObject.initialized = true;
+
+      // Force reinitialization to ensure proper layout
+      if (textObject._clearCache) {
+        textObject._clearCache();
+      }
+      textObject.dirty = true;
+
+      // Check if we need to wait for font loading (especially for custom fonts like STV)
+      const fontSpec = `${textObject.fontSize}px ${textObject.fontFamily}`;
+
+      // For custom fonts, ensure they're loaded before initializing dimensions
+      if (typeof document !== 'undefined' && 'fonts' in document && textObject.fontFamily !== 'Arial' && textObject.fontFamily !== 'Times New Roman') {
+        return document.fonts.load(fontSpec).then(() => {
+          var _textObject$fontFamil;
+          console.log(`🔤 Font loaded for JSON object: ${fontSpec}`);
+          // Ensure initialized flag is set again (in case constructor reset it)
+          textObject.initialized = true;
+
+          // Special handling for STV fonts which have measurement issues
+          const isStvFont = (_textObject$fontFamil = textObject.fontFamily) === null || _textObject$fontFamil === void 0 ? void 0 : _textObject$fontFamil.toLowerCase().includes('stv');
+          if (isStvFont) {
+            console.log(`🔤 STV font detected, using enhanced reinitialization`);
+
+            // Clear all cached state that might interfere with browser wrapping
+            textObject._browserWrapCache = null;
+            textObject._lastDimensionState = null;
+            textObject._browserWrapInitialized = false;
+            console.log(`🔤 STV font: Cleared all cached states for fresh initialization`);
+
+            // Force browser wrapping flag for STV fonts
+            textObject._usingBrowserWrapping = true;
+            console.log(`🔤 STV font: Forcing browser wrapping flag during JSON load`);
+
+            // Multiple initialization attempts for STV fonts
+            const reinitWithDelay = attempt => {
+              if (textObject.forceTextReinitialization) {
+                textObject.forceTextReinitialization();
+              } else {
+                textObject.initDimensions();
+              }
+
+              // Check if width is still problematic after initialization
+              if (textObject.width < 50 && attempt < 3) {
+                console.log(`🔤 STV font width still ${textObject.width}px, retrying in ${100 * attempt}ms (attempt ${attempt + 1}/3)`);
+                setTimeout(() => reinitWithDelay(attempt + 1), 100 * attempt);
+              }
+            };
+            reinitWithDelay(0);
+          } else {
+            // Use specialized reinitialization for Textbox objects
+            if (textObject.forceTextReinitialization) {
+              console.log(`🔤 Using Textbox specialized reinitialization`);
+              textObject.forceTextReinitialization();
+            } else {
+              // Reinitialize dimensions with proper font metrics
+              textObject.initDimensions();
+            }
+          }
+          return textObject;
+        }).catch(() => {
+          console.warn(`⚠️ Font loading failed for ${fontSpec}, proceeding with fallback`);
+          // Ensure initialized flag is set again
+          textObject.initialized = true;
+
+          // Still initialize dimensions even if font loading fails
+          if (textObject.forceTextReinitialization) {
+            textObject.forceTextReinitialization();
+          } else {
+            textObject.initDimensions();
+          }
+          return textObject;
+        });
+      } else {
+        // Standard fonts - ensure initialized and use appropriate method
+        textObject.initialized = true;
+        if (textObject.forceTextReinitialization) {
+          console.log(`🔤 Using Textbox specialized reinitialization for standard font`);
+          textObject.forceTextReinitialization();
+        } else {
+          textObject.initDimensions();
+        }
+        return textObject;
+      }
     });
   }
 }
@@ -21958,8 +22924,12 @@ class OverlayEditor {
     this.textarea.style.pointerEvents = 'auto';
     // Set appropriate unicodeBidi based on content and direction
     const hasArabicText = /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(this.target.text || '');
+    const hasLatinText = /[a-zA-Z]/.test(this.target.text || '');
     const isLTRDirection = this.target.direction === 'ltr';
-    if (hasArabicText && isLTRDirection) {
+    if (hasArabicText && hasLatinText && isLTRDirection) {
+      // For mixed Arabic/Latin text in LTR mode, use embed for consistent line wrapping
+      this.textarea.style.unicodeBidi = 'embed';
+    } else if (hasArabicText && isLTRDirection) {
       // For Arabic text in LTR mode, use embed to preserve shaping while respecting direction
       this.textarea.style.unicodeBidi = 'embed';
     } else {
@@ -22048,14 +23018,26 @@ class OverlayEditor {
     parseFloat(this.hostDiv.style.width) / zoom;
     const currentHeight = parseFloat(this.hostDiv.style.height) / zoom;
 
-    // Only update if there's a meaningful change (avoid float precision issues)
+    // Always update height for responsive controls (especially important for line deletion)
     const heightDiff = Math.abs(currentHeight - target.height);
-    const threshold = 1; // 1px threshold to avoid micro-changes
+    const threshold = 0.5; // Lower threshold for better responsiveness to line changes
 
     if (heightDiff > threshold) {
+      target.height;
       target.height = currentHeight;
       target.setCoords(); // Update control positions
+
+      // Force dirty to ensure proper re-rendering
+      target.dirty = true;
       this.canvas.requestRenderAll(); // Re-render to show updated selection
+
+      // IMPORTANT: Reposition overlay after height change
+      requestAnimationFrame(() => {
+        if (!this.isDestroyed) {
+          this.applyOverlayStyle();
+          console.log('📐 Height changed - rechecking alignment after repositioning:');
+        }
+      });
     }
   }
 
@@ -22083,14 +23065,6 @@ class OverlayEditor {
     target.setCoords();
     const aCoords = target.aCoords;
 
-    // DEBUG: Log dimensions before edit
-    console.log('BEFORE EDIT:');
-    console.log('  target.width =', target.width);
-    console.log('  target.height =', target.height);
-    console.log('  target.getScaledWidth() =', target.getScaledWidth());
-    console.log('  target.getScaledHeight() =', target.getScaledHeight());
-    console.log('  target.padding =', target.padding);
-
     // 2. Get canvas position and scroll offsets (like rtl-test.html)
     const canvasEl = canvas.upperCanvasEl;
     const canvasRect = canvasEl.getBoundingClientRect();
@@ -22113,14 +23087,12 @@ class OverlayEditor {
     const left = canvasRect.left + scrollX + screenPoint.x;
     const top = canvasRect.top + scrollY + screenPoint.y;
 
-    // 4. Get dimensions with zoom scaling - use target.width for text wrapping, scaled height for container
-    const width = target.width * (target.scaleX || 1) * zoom; // Account for object scale and viewport zoom
-    const height = target.height * (target.scaleY || 1) * zoom;
-    console.log('WIDTH CALCULATION:');
-    console.log('  target.width =', target.width);
-    console.log('  scaledWidth =', target.getScaledWidth());
-    console.log('  zoom =', zoom);
-    console.log('  final width =', width);
+    // 4. Calculate the precise width and height for the container
+    // **THE FIX:** Use getBoundingRect() for BOTH width and height.
+    // This is the most reliable measure of the object's final rendered dimensions.
+    const objectBounds = target.getBoundingRect();
+    const width = Math.round(objectBounds.width * zoom);
+    const height = Math.round(objectBounds.height * zoom);
 
     // 5. Apply styles to host DIV - absolute positioning like rtl-test.html
     this.hostDiv.style.position = 'absolute';
@@ -22144,50 +23116,333 @@ class OverlayEditor {
     const scaleX = target.scaleX || 1;
     const finalFontSize = baseFontSize * scaleX * zoom;
     const fabricLineHeight = target.lineHeight || 1.16;
-    // Apply padding and dimensions to textarea
-    const textareaWidth = paddingX > 0 ? `calc(100% - ${2 * paddingX}px)` : '100%';
-    const textareaHeight = paddingY > 0 ? `calc(100% - ${2 * paddingY}px)` : '100%';
-    this.textarea.style.width = textareaWidth;
-    this.textarea.style.height = textareaHeight;
+    // **THE FIX:** Use 'border-box' so the width property includes padding.
+    // This makes alignment much easier and more reliable.
+    this.textarea.style.boxSizing = 'border-box';
+
+    // **THE FIX:** Set the textarea width to be IDENTICAL to the host div's width.
+    // The padding will now be correctly contained *inside* this width.
+    this.textarea.style.width = `${width}px`;
+    this.textarea.style.height = '100%'; // Let hostDiv control height
     this.textarea.style.padding = `${paddingY}px ${paddingX}px`;
+
+    // Apply all other font and text styles to match Fabric
+    const letterSpacingPx = (target.charSpacing || 0) / 1000 * finalFontSize;
+
+    // Special handling for text objects loaded from JSON - ensure they're properly initialized
+    if (target.dirty !== false && target.initDimensions) {
+      console.log('🔧 Ensuring text object is properly initialized before overlay editing');
+      // Force re-initialization if the text object seems to be in a dirty state
+      target.initDimensions();
+    }
     this.textarea.style.fontSize = `${finalFontSize}px`;
-    this.textarea.style.lineHeight = String(fabricLineHeight); // Use unit-less multiplier
+    this.textarea.style.lineHeight = String(fabricLineHeight);
     this.textarea.style.fontFamily = target.fontFamily || 'Arial';
     this.textarea.style.fontWeight = String(target.fontWeight || 'normal');
     this.textarea.style.fontStyle = target.fontStyle || 'normal';
-    this.textarea.style.textAlign = target.textAlign || 'left';
+    // Handle text alignment and justification
+    const textAlign = target.textAlign || 'left';
+    let cssTextAlign = textAlign;
+
+    // Detect text direction from content for proper justify handling
+    const autoDetectedDirection = this.firstStrongDir(this.textarea.value || '');
+
+    // DEBUG: Log alignment details
+    console.log('🔍 ALIGNMENT DEBUG:');
+    console.log('   Fabric textAlign:', textAlign);
+    console.log('   Fabric direction:', target.direction);
+    console.log('   Text content:', JSON.stringify(target.text));
+    console.log('   Detected direction:', autoDetectedDirection);
+
+    // Map fabric.js justify to CSS
+    if (textAlign.includes('justify')) {
+      // Try to match fabric.js justify behavior more precisely
+      try {
+        // For justify, we need to replicate fabric.js space expansion
+        // Use CSS justify but with specific settings to match fabric.js better
+        cssTextAlign = 'justify';
+
+        // Set text-align-last based on justify type and detected direction
+        // Smart justify: respect detected direction even when fabric alignment doesn't match
+        if (textAlign === 'justify') {
+          this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';
+        } else if (textAlign === 'justify-left') {
+          // If text is RTL but fabric says justify-left, override to justify-right for better UX
+          if (autoDetectedDirection === 'rtl') {
+            this.textarea.style.textAlignLast = 'right';
+            console.log('   → Overrode justify-left to justify-right for RTL text');
+          } else {
+            this.textarea.style.textAlignLast = 'left';
+          }
+        } else if (textAlign === 'justify-right') {
+          // If text is LTR but fabric says justify-right, override to justify-left for better UX  
+          if (autoDetectedDirection === 'ltr') {
+            this.textarea.style.textAlignLast = 'left';
+            console.log('   → Overrode justify-right to justify-left for LTR text');
+          } else {
+            this.textarea.style.textAlignLast = 'right';
+          }
+        } else if (textAlign === 'justify-center') {
+          this.textarea.style.textAlignLast = 'center';
+        }
+
+        // Enhanced justify settings for better fabric.js matching
+        this.textarea.style.textJustify = 'inter-word';
+        this.textarea.style.wordSpacing = 'normal';
+
+        // Additional CSS properties for better justify matching
+        this.textarea.style.textAlign = 'justify';
+        this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;
+
+        // Try to force better justify behavior
+        this.textarea.style.textJustifyTrim = 'none';
+        this.textarea.style.textAutospace = 'none';
+        console.log('   → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);
+      } catch (error) {
+        console.warn('   → Justify setup failed, falling back to standard alignment:', error);
+        cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');
+      }
+    } else {
+      this.textarea.style.textAlignLast = 'auto';
+      this.textarea.style.textJustify = 'auto';
+      this.textarea.style.wordSpacing = 'normal';
+      console.log('   → Applied standard alignment:', cssTextAlign);
+    }
+    this.textarea.style.textAlign = cssTextAlign;
     this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
-    this.textarea.style.letterSpacing = `${(target.charSpacing || 0) / 1000}em`;
-    this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+    this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
 
-    // Ensure consistent font rendering between Fabric and CSS
+    // Use the already detected direction from above
+    const fabricDirection = target.direction;
+
+    // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense
+    this.textarea.style.direction = autoDetectedDirection || fabricDirection || 'ltr';
     this.textarea.style.fontVariant = 'normal';
     this.textarea.style.fontStretch = 'normal';
-    this.textarea.style.textRendering = 'auto';
-    this.textarea.style.fontKerning = 'auto';
-    this.textarea.style.boxSizing = 'content-box'; // Padding is added outside width/height
+    this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas
+    this.textarea.style.fontKerning = 'normal';
+    this.textarea.style.fontFeatureSettings = 'normal';
+    this.textarea.style.fontVariationSettings = 'normal';
     this.textarea.style.margin = '0';
     this.textarea.style.border = 'none';
     this.textarea.style.outline = 'none';
     this.textarea.style.background = 'transparent';
-    this.textarea.style.wordWrap = 'break-word';
+    this.textarea.style.overflowWrap = 'break-word';
     this.textarea.style.whiteSpace = 'pre-wrap';
-
-    // DEBUG: Log final textarea dimensions
-    console.log('TEXTAREA AFTER SETUP:');
-    console.log('  textarea width =', this.textarea.style.width);
-    console.log('  textarea height =', this.textarea.style.height);
-    console.log('  textarea padding =', this.textarea.style.padding);
-    console.log('  paddingX =', paddingX, 'paddingY =', paddingY);
-    console.log('  baseFontSize =', baseFontSize);
-    console.log('  scaleX =', scaleX);
-    console.log('  zoom =', zoom);
-    console.log('  finalFontSize =', finalFontSize);
-    console.log('  fabricLineHeight =', fabricLineHeight);
+    this.textarea.style.hyphens = 'none';
+
+    // DEBUG: Log final CSS properties
+    console.log('🎨 FINAL TEXTAREA CSS:');
+    console.log('   textAlign:', this.textarea.style.textAlign);
+    console.log('   textAlignLast:', this.textarea.style.textAlignLast);
+    console.log('   direction:', this.textarea.style.direction);
+    console.log('   unicodeBidi:', this.textarea.style.unicodeBidi);
+    console.log('   width:', this.textarea.style.width);
+    console.log('   textJustify:', this.textarea.style.textJustify);
+    console.log('   wordSpacing:', this.textarea.style.wordSpacing);
+    console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+
+    // If justify, log Fabric object dimensions for comparison
+    if (textAlign.includes('justify')) {
+      var _calcTextWidth, _ref;
+      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      console.log('   Fabric width:', target.width);
+      console.log('   Fabric calcTextWidth:', (_calcTextWidth = (_ref = target).calcTextWidth) === null || _calcTextWidth === void 0 ? void 0 : _calcTextWidth.call(_ref));
+      console.log('   Fabric textAlign:', target.textAlign);
+      console.log('   Text lines:', target.textLines);
+    }
+
+    // Debug font properties matching
+    console.log('🔤 FONT PROPERTIES COMPARISON:');
+    console.log('   Fabric fontFamily:', target.fontFamily);
+    console.log('   Fabric fontWeight:', target.fontWeight);
+    console.log('   Fabric fontStyle:', target.fontStyle);
+    console.log('   Fabric fontSize:', target.fontSize);
+    console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
+    console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
+    console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
+    console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+
+    // Enhanced font rendering to better match fabric.js canvas rendering
+    // Default to auto for more natural rendering
+    this.textarea.style.webkitFontSmoothing = 'auto';
+    this.textarea.style.mozOsxFontSmoothing = 'auto';
+    this.textarea.style.fontSmooth = 'auto';
+    this.textarea.style.textSizeAdjust = 'none';
+
+    // For bold fonts, use subpixel rendering to match canvas thickness better
+    const fontWeight = String(target.fontWeight || 'normal');
+    const isBold = fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 600;
+    if (isBold) {
+      this.textarea.style.webkitFontSmoothing = 'subpixel-antialiased';
+      this.textarea.style.mozOsxFontSmoothing = 'unset';
+      console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+    }
+    console.log('🎨 FONT SMOOTHING APPLIED:');
+    console.log('   webkitFontSmoothing:', this.textarea.style.webkitFontSmoothing);
+    console.log('   mozOsxFontSmoothing:', this.textarea.style.mozOsxFontSmoothing);
 
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
 
+  /**
+   * Debug method to compare textarea and canvas object bounding boxes
+   */
+  debugBoundingBoxComparison() {
+    const target = this.target;
+    const canvas = this.canvas;
+    const zoom = canvas.getZoom();
+
+    // Get textarea bounding box (in screen coordinates)
+    const textareaRect = this.textarea.getBoundingClientRect();
+    const hostRect = this.hostDiv.getBoundingClientRect();
+
+    // Get canvas object bounding box (in screen coordinates)
+    const canvasBounds = target.getBoundingRect();
+    const canvasRect = canvas.upperCanvasEl.getBoundingClientRect();
+
+    // Convert canvas object bounds to screen coordinates
+    const vpt = canvas.viewportTransform;
+    const screenObjectBounds = {
+      left: canvasRect.left + canvasBounds.left * zoom + vpt[4],
+      top: canvasRect.top + canvasBounds.top * zoom + vpt[5],
+      width: canvasBounds.width * zoom,
+      height: canvasBounds.height * zoom
+    };
+    console.log('🔍 BOUNDING BOX COMPARISON:');
+    console.log('📦 Textarea Rect:', {
+      left: Math.round(textareaRect.left * 100) / 100,
+      top: Math.round(textareaRect.top * 100) / 100,
+      width: Math.round(textareaRect.width * 100) / 100,
+      height: Math.round(textareaRect.height * 100) / 100
+    });
+    console.log('📦 Host Div Rect:', {
+      left: Math.round(hostRect.left * 100) / 100,
+      top: Math.round(hostRect.top * 100) / 100,
+      width: Math.round(hostRect.width * 100) / 100,
+      height: Math.round(hostRect.height * 100) / 100
+    });
+    console.log('📦 Canvas Object Bounds (screen):', {
+      left: Math.round(screenObjectBounds.left * 100) / 100,
+      top: Math.round(screenObjectBounds.top * 100) / 100,
+      width: Math.round(screenObjectBounds.width * 100) / 100,
+      height: Math.round(screenObjectBounds.height * 100) / 100
+    });
+    console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);
+
+    // Calculate differences
+    const hostVsObject = {
+      leftDiff: Math.round((hostRect.left - screenObjectBounds.left) * 100) / 100,
+      topDiff: Math.round((hostRect.top - screenObjectBounds.top) * 100) / 100,
+      widthDiff: Math.round((hostRect.width - screenObjectBounds.width) * 100) / 100,
+      heightDiff: Math.round((hostRect.height - screenObjectBounds.height) * 100) / 100
+    };
+    const textareaVsObject = {
+      leftDiff: Math.round((textareaRect.left - screenObjectBounds.left) * 100) / 100,
+      topDiff: Math.round((textareaRect.top - screenObjectBounds.top) * 100) / 100,
+      widthDiff: Math.round((textareaRect.width - screenObjectBounds.width) * 100) / 100,
+      heightDiff: Math.round((textareaRect.height - screenObjectBounds.height) * 100) / 100
+    };
+    console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);
+    console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);
+
+    // Check if they're aligned (within 2px tolerance)
+    const tolerance = 2;
+    const hostAligned = Math.abs(hostVsObject.leftDiff) < tolerance && Math.abs(hostVsObject.topDiff) < tolerance && Math.abs(hostVsObject.widthDiff) < tolerance && Math.abs(hostVsObject.heightDiff) < tolerance;
+    const textareaAligned = Math.abs(textareaVsObject.leftDiff) < tolerance && Math.abs(textareaVsObject.topDiff) < tolerance && Math.abs(textareaVsObject.widthDiff) < tolerance && Math.abs(textareaVsObject.heightDiff) < tolerance;
+    console.log(hostAligned ? '✅ Host Div ALIGNED with canvas object' : '❌ Host Div MISALIGNED with canvas object');
+    console.log(textareaAligned ? '✅ Textarea ALIGNED with canvas object' : '❌ Textarea MISALIGNED with canvas object');
+    console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  }
+
+  /**
+   * Debug method to compare text wrapping between textarea and Fabric text object
+   */
+  debugTextWrapping() {
+    const target = this.target;
+    const text = this.textarea.value;
+    console.log('📝 TEXT WRAPPING COMPARISON:');
+    console.log('📄 Text Content:', `"${text}"`);
+    console.log('📄 Text Length:', text.length);
+
+    // Analyze line breaks
+    const explicitLines = text.split('\n');
+    console.log('📄 Explicit Lines (\\n):', explicitLines.length);
+    explicitLines.forEach((line, i) => {
+      console.log(`   Line ${i + 1}: "${line}" (${line.length} chars)`);
+    });
+
+    // Get textarea computed styles for wrapping analysis
+    const textareaStyles = window.getComputedStyle(this.textarea);
+    console.log('📐 Textarea Wrapping Styles:');
+    console.log('   width:', textareaStyles.width);
+    console.log('   fontSize:', textareaStyles.fontSize);
+    console.log('   fontFamily:', textareaStyles.fontFamily);
+    console.log('   fontWeight:', textareaStyles.fontWeight);
+    console.log('   letterSpacing:', textareaStyles.letterSpacing);
+    console.log('   lineHeight:', textareaStyles.lineHeight);
+    console.log('   whiteSpace:', textareaStyles.whiteSpace);
+    console.log('   wordWrap:', textareaStyles.wordWrap);
+    console.log('   overflowWrap:', textareaStyles.overflowWrap);
+    console.log('   direction:', textareaStyles.direction);
+    console.log('   textAlign:', textareaStyles.textAlign);
+
+    // Get Fabric text object properties for comparison
+    console.log('📐 Fabric Text Object Properties:');
+    console.log('   width:', target.width);
+    console.log('   fontSize:', target.fontSize);
+    console.log('   fontFamily:', target.fontFamily);
+    console.log('   fontWeight:', target.fontWeight);
+    console.log('   charSpacing:', target.charSpacing);
+    console.log('   lineHeight:', target.lineHeight);
+    console.log('   direction:', target.direction);
+    console.log('   textAlign:', target.textAlign);
+    console.log('   scaleX:', target.scaleX);
+    console.log('   scaleY:', target.scaleY);
+
+    // Calculate effective dimensions for comparison - use actual rendered width
+    // **THE FIX:** Use getBoundingRect to get the *actual rendered width* of the Fabric object.
+    const fabricEffectiveWidth = this.target.getBoundingRect().width;
+    // Use the exact width set on textarea for comparison
+    const textareaComputedWidth = parseFloat(window.getComputedStyle(this.textarea).width);
+    const textareaEffectiveWidth = textareaComputedWidth / this.canvas.getZoom();
+    const widthDiff = Math.abs(textareaEffectiveWidth - fabricEffectiveWidth);
+    console.log('📏 Effective Width Comparison:');
+    console.log('   Textarea Effective Width:', textareaEffectiveWidth);
+    console.log('   Fabric Effective Width:', fabricEffectiveWidth);
+    console.log('   Width Difference:', widthDiff.toFixed(2) + 'px');
+    console.log(widthDiff < 1 ? '✅ Widths MATCH for wrapping' : '❌ Width MISMATCH may cause different wrapping');
+
+    // Check text direction and bidi handling
+    const hasRTLText = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+    const hasBidiText = /[\u0590-\u06FF]/.test(text) && /[a-zA-Z]/.test(text);
+    console.log('🌍 Text Direction Analysis:');
+    console.log('   Has RTL characters:', hasRTLText);
+    console.log('   Has mixed Bidi text:', hasBidiText);
+    console.log('   Textarea direction:', textareaStyles.direction);
+    console.log('   Fabric direction:', target.direction || 'auto');
+    console.log('   Textarea unicodeBidi:', textareaStyles.unicodeBidi);
+
+    // Measure actual rendered line count
+    const textareaScrollHeight = this.textarea.scrollHeight;
+    const textareaLineHeight = parseFloat(textareaStyles.lineHeight) || parseFloat(textareaStyles.fontSize) * 1.2;
+    const estimatedTextareaLines = Math.round(textareaScrollHeight / textareaLineHeight);
+    console.log('📊 Line Count Analysis:');
+    console.log('   Textarea scrollHeight:', textareaScrollHeight);
+    console.log('   Textarea lineHeight:', textareaLineHeight);
+    console.log('   Estimated rendered lines:', estimatedTextareaLines);
+    console.log('   Explicit line breaks:', explicitLines.length);
+    if (estimatedTextareaLines > explicitLines.length) {
+      console.log('🔄 Text wrapping detected in textarea');
+      console.log('   Wrapped lines:', estimatedTextareaLines - explicitLines.length);
+    } else {
+      console.log('📏 No text wrapping in textarea');
+    }
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  }
+
   /**
    * Focus the textarea and position cursor at end
    */
@@ -22216,6 +23471,11 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
     this.target.setCoords();
     this.applyOverlayStyle();
+
+    // Fix character mapping issues after JSON loading for browser-wrapped fonts
+    if (this.target._fixCharacterMappingAfterJsonLoad) {
+      this.target._fixCharacterMappingAfterJsonLoad();
+    }
     this.textarea.focus();
     this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
 
@@ -22261,6 +23521,23 @@ class OverlayEditor {
     // Handle commit/cancel after restoring visibility
     if (commit && !this.isComposing) {
       const finalText = this.textarea.value;
+
+      // Auto-detect text direction and update fabric object if needed
+      const detectedDirection = this.firstStrongDir(finalText);
+      const currentDirection = this.target.direction || 'ltr';
+      if (detectedDirection && detectedDirection !== currentDirection) {
+        console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
+        console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+
+        // Update the fabric object's direction
+        this.target.set('direction', detectedDirection);
+
+        // Force a re-render to apply the direction change
+        this.canvas.requestRenderAll();
+        console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+      } else {
+        console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+      }
       if (this.onCommit) {
         this.onCommit(finalText);
       }
@@ -22300,25 +23577,40 @@ class OverlayEditor {
     }
   }
   autoResizeTextarea() {
-    // Allow both vertical growth and shrinking; host width stays fixed
-    const oldHeight = parseFloat(window.getComputedStyle(this.textarea).height);
-
-    // Reset height to measure actual needed height
-    this.textarea.style.height = 'auto';
+    // Store the scroll position and the container's old height for comparison.
+    const scrollTop = this.textarea.scrollTop;
+    const oldHeight = parseFloat(this.hostDiv.style.height || '0');
+
+    // 1. **Force a reliable reflow.**
+    //    First, reset the textarea's height to a minimal value. This is the crucial step
+    //    that forces the browser to recalculate the content's height from scratch,
+    //    ignoring the hostDiv's larger, stale height.
+    this.textarea.style.height = '1px';
+
+    // 2. Read the now-accurate scrollHeight. This value reflects the minimum
+    //    height required for the content, whether it's single or multi-line.
     const scrollHeight = this.textarea.scrollHeight;
 
-    // Add extra padding to prevent text clipping (especially for line height)
-    const lineHeightBuffer = 8; // Extra space to prevent clipping
-    const newHeight = Math.max(scrollHeight + lineHeightBuffer, 25); // Minimum height with buffer
-    const heightChanged = Math.abs(newHeight - oldHeight) > 2; // Only if meaningful change
+    // A small buffer for rendering consistency across browsers.
+    const buffer = 2;
+    const newHeight = scrollHeight + buffer;
 
-    this.textarea.style.height = `${newHeight}px`;
-    this.hostDiv.style.height = `${newHeight}px`; // Match exactly
+    // Check if the height has changed significantly.
+    const heightChanged = Math.abs(newHeight - oldHeight) > 1;
 
-    // Only update object bounds if height actually changed
+    // 4. Only update heights and object bounds if there was a change.
     if (heightChanged) {
+      this.textarea.style.height = `${newHeight}px`;
+      this.hostDiv.style.height = `${newHeight}px`;
       this.updateObjectBounds();
+    } else {
+      // If no significant change, ensure the textarea's height matches the container
+      // to prevent any minor visual misalignment.
+      this.textarea.style.height = this.hostDiv.style.height;
     }
+
+    // 5. Restore the original scroll position.
+    this.textarea.scrollTop = scrollTop;
   }
   handleKeyDown(e) {
     if (e.key === 'Escape') {
@@ -22327,6 +23619,19 @@ class OverlayEditor {
     } else if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
       e.preventDefault();
       this.destroy(true); // Commit
+    } else if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {
+      // For keys that might change the height, schedule a resize check
+      // Use both immediate and delayed checks to catch all scenarios
+      requestAnimationFrame(() => {
+        if (!this.isDestroyed) {
+          this.autoResizeTextarea();
+        }
+      });
+      setTimeout(() => {
+        if (!this.isDestroyed) {
+          this.autoResizeTextarea();
+        }
+      }, 10); // Small delay to ensure DOM is updated
     }
   }
   handleFocus() {
@@ -25303,6 +26608,7 @@ class Textbox extends IText {
       ...Textbox.ownDefaults,
       ...options
     });
+    this.initializeEventListeners();
   }
 
   /**
@@ -25324,8 +26630,27 @@ class Textbox extends IText {
    */
   initDimensions() {
     if (!this.initialized) {
+      this.initialized = true;
+    }
+
+    // Prevent rapid recalculations during moves
+    if (this._usingBrowserWrapping) {
+      const now = Date.now();
+      const lastCall = this._lastInitDimensionsTime || 0;
+      const isRapidCall = now - lastCall < 100;
+      const isDuringLoading = this._jsonLoading || !this._browserWrapInitialized;
+      if (isRapidCall && !isDuringLoading) {
+        return;
+      }
+      this._lastInitDimensionsTime = now;
+    }
+
+    // Skip if nothing changed
+    const currentState = `${this.text}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
+    if (this._lastDimensionState === currentState && this._textLines && this._textLines.length > 0) {
       return;
     }
+    this._lastDimensionState = currentState;
 
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout) {
@@ -25336,17 +26661,142 @@ class Textbox extends IText {
     // clear dynamicMinWidth as it will be different after we re-wrap line
     this.dynamicMinWidth = 0;
     // wrap lines
-    this._styleMap = this._generateStyleMap(this._splitText());
-    // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap
-    if (this.dynamicMinWidth > this.width) {
+    const splitTextResult = this._splitText();
+    this._styleMap = this._generateStyleMap(splitTextResult);
+
+    // For browser wrapping, ensure _textLines is set from browser results
+    if (this._usingBrowserWrapping && splitTextResult && splitTextResult.lines) {
+      this._textLines = splitTextResult.lines.map(line => line.split(''));
+
+      // Store justify measurements and browser height
+      const justifyMeasurements = splitTextResult.justifySpaceMeasurements;
+      if (justifyMeasurements) {
+        this._styleMap.justifySpaceMeasurements = justifyMeasurements;
+      }
+      const actualHeight = splitTextResult.actualBrowserHeight;
+      if (actualHeight) {
+        this._actualBrowserHeight = actualHeight;
+      }
+    }
+    // Don't auto-resize width when using browser wrapping to prevent width increases during moves
+    if (!this._usingBrowserWrapping && this.dynamicMinWidth > this.width) {
       this._set('width', this.dynamicMinWidth);
     }
+
+    // For browser wrapping fonts (like STV), ensure minimum width for new textboxes
+    // since these fonts can't measure English characters properly
+    if (this._usingBrowserWrapping && this.width < 50) {
+      console.log(`🔤 BROWSER WRAP: Font ${this.fontFamily} has width ${this.width}px, setting to 300px for usability`);
+      this.width = 300;
+    }
+
+    // Mark browser wrapping as initialized when complete
+    if (this._usingBrowserWrapping) {
+      this._browserWrapInitialized = true;
+    }
     if (this.textAlign.includes(JUSTIFY)) {
+      // For browser wrapping fonts, apply browser-calculated justify spaces
+      if (this._usingBrowserWrapping) {
+        console.log('🔤 BROWSER WRAP: Applying browser-calculated justify spaces');
+        this._applyBrowserJustifySpaces();
+        return;
+      }
+
+      // Don't apply justify alignment during drag operations to prevent snapping
+      const now = Date.now();
+      const lastDragTime = this._lastInitDimensionsTime || 0;
+      const isDuringDrag = now - lastDragTime < 200; // 200ms window for drag detection
+
+      if (isDuringDrag) {
+        console.log('🔤 Skipping justify during drag operation to prevent snapping');
+        return;
+      }
+
+      // For non-browser-wrapping fonts, use Fabric's justify system
       // once text is measured we need to make space fatter to make justified text.
-      this.enlargeSpaces();
+      // Ensure __charBounds exists and fonts are ready before applying justify
+      if (this.__charBounds && this.__charBounds.length > 0) {
+        // Check if font is ready for accurate justify calculations
+        const fontReady = this._isFontReady ? this._isFontReady() : true;
+        if (fontReady) {
+          this.enlargeSpaces();
+        } else {
+          console.warn('⚠️ Textbox: Font not ready for justify, deferring enlargeSpaces');
+          // Defer justify calculation until font is ready
+          this._scheduleJustifyAfterFontLoad();
+        }
+      } else {
+        console.warn('⚠️ Textbox: __charBounds not ready for justify alignment, deferring enlargeSpaces');
+        // Defer the justify calculation until the next frame
+        setTimeout(() => {
+          if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+            var _this$canvas;
+            console.log('🔧 Applying deferred Textbox justify alignment');
+            this.enlargeSpaces();
+            (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+          }
+        }, 0);
+      }
+    }
+    // Calculate height - use Fabric's calculation for proper text rendering space
+    if (this._usingBrowserWrapping && this._textLines && this._textLines.length > 0) {
+      const actualBrowserHeight = this._actualBrowserHeight;
+      const oldHeight = this.height;
+      // Use Fabric's height calculation since it knows how much space text rendering needs
+      this.height = this.calcTextHeight();
+
+      // Force canvas refresh and control update if height changed significantly
+      if (Math.abs(this.height - oldHeight) > 1) {
+        var _this$canvas2, _this$_textLines;
+        this.setCoords();
+        (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.requestRenderAll();
+
+        // DEBUG: Log exact positioning details
+        console.log(`🎯 POSITIONING DEBUG:`);
+        console.log(`   Textbox height: ${this.height}px`);
+        console.log(`   Textbox top: ${this.top}px`);
+        console.log(`   Textbox left: ${this.left}px`);
+        console.log(`   Text lines: ${((_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _this$_textLines.length) || 0}`);
+        console.log(`   Font size: ${this.fontSize}px`);
+        console.log(`   Line height: ${this.lineHeight || 1.16}`);
+        console.log(`   Calculated line height: ${this.fontSize * (this.lineHeight || 1.16)}px`);
+        console.log(`   _getTopOffset(): ${this._getTopOffset()}px`);
+        console.log(`   calcTextHeight(): ${this.calcTextHeight()}px`);
+        console.log(`   Browser height: ${actualBrowserHeight}px`);
+        console.log(`   Height difference: ${this.height - this.calcTextHeight()}px`);
+      }
+    } else {
+      this.height = this.calcTextHeight();
+    }
+  }
+
+  /**
+   * Schedule justify calculation after font loads (Textbox-specific)
+   * @private
+   */
+  _scheduleJustifyAfterFontLoad() {
+    if (typeof document === 'undefined' || !('fonts' in document)) {
+      return;
     }
-    // clear cache and re-calculate height
-    this.height = this.calcTextHeight();
+
+    // Only schedule if not already waiting
+    if (this._fontJustifyScheduled) {
+      return;
+    }
+    this._fontJustifyScheduled = true;
+    const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
+    document.fonts.load(fontSpec).then(() => {
+      var _this$canvas3;
+      this._fontJustifyScheduled = false;
+      console.log('🔧 Textbox: Font loaded, applying justify alignment');
+
+      // Re-run initDimensions to ensure proper justify calculation
+      this.initDimensions();
+      (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+    }).catch(() => {
+      this._fontJustifyScheduled = false;
+      console.warn('⚠️ Textbox: Font loading failed, justify may be incorrect');
+    });
   }
 
   /**
@@ -25713,19 +27163,33 @@ class Textbox extends IText {
         width: wordWidth
       } = data[i];
       offset += word.length;
-      lineWidth += infixWidth + wordWidth - additionalSpace;
-      if (lineWidth > maxWidth && !lineJustStarted) {
+
+      // Predictive wrapping: check if adding this word would exceed the width
+      const potentialLineWidth = lineWidth + infixWidth + wordWidth - additionalSpace;
+      // Use exact width to match overlay editor behavior
+      const conservativeMaxWidth = maxWidth; // No artificial buffer
+
+      // Debug logging for wrapping decisions
+      const currentLineText = line.join('');
+      console.log(`🔧 FABRIC WRAP CHECK: "${data[i].word}" -> potential: ${potentialLineWidth.toFixed(1)}px vs limit: ${conservativeMaxWidth.toFixed(1)}px`);
+      if (potentialLineWidth > conservativeMaxWidth && !lineJustStarted) {
+        // This word would exceed the width, wrap before adding it
+        console.log(`🔧 FABRIC WRAP! Line: "${currentLineText}" (${lineWidth.toFixed(1)}px)`);
         graphemeLines.push(line);
         line = [];
-        lineWidth = wordWidth;
+        lineWidth = wordWidth; // Start new line with just this word
         lineJustStarted = true;
       } else {
-        lineWidth += additionalSpace;
+        // Word fits, add it to current line
+        lineWidth = potentialLineWidth + additionalSpace;
       }
       if (!lineJustStarted && !splitByGrapheme) {
         line.push(infix);
       }
       line = line.concat(word);
+
+      // Debug: show current line after adding word
+      console.log(`🔧 FABRIC AFTER ADD: Line now: "${line.join('')}" (${line.length} chars)`);
       infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset);
       offset++;
       lineJustStarted = false;
@@ -25735,9 +27199,19 @@ class Textbox extends IText {
     // TODO: this code is probably not necessary anymore.
     // it can be moved out of this function since largestWordWidth is now
     // known in advance
-    if (largestWordWidth + reservedSpace > this.dynamicMinWidth) {
+    // Don't modify dynamicMinWidth when using browser wrapping to prevent width increases
+    if (!this._usingBrowserWrapping && largestWordWidth + reservedSpace > this.dynamicMinWidth) {
+      console.log(`🔧 FABRIC updating dynamicMinWidth: ${this.dynamicMinWidth} -> ${largestWordWidth - additionalSpace + reservedSpace}`);
       this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
+    } else if (this._usingBrowserWrapping) {
+      console.log(`🔤 BROWSER WRAP: Skipping dynamicMinWidth update to prevent width increase`);
     }
+
+    // Debug: show final wrapped lines
+    console.log(`🔧 FABRIC FINAL LINES: ${graphemeLines.length} lines`);
+    graphemeLines.forEach((line, i) => {
+      console.log(`   Line ${i + 1}: "${line.join('')}" (${line.length} chars)`);
+    });
     return graphemeLines;
   }
 
@@ -25781,6 +27255,260 @@ class Textbox extends IText {
    * @override
    */
   _splitTextIntoLines(text) {
+    // Check if we need browser wrapping using smart font detection
+    const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily);
+    if (needsBrowserWrapping) {
+      // Cache key based on text content, width, font properties, AND text alignment
+      const textHash = text.length + text.slice(0, 50); // Include text content in cache key
+      const cacheKey = `${textHash}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
+
+      // Check if we have a cached result and nothing has changed
+      if (this._browserWrapCache && this._browserWrapCache.key === cacheKey) {
+        const cachedResult = this._browserWrapCache.result;
+
+        // For justify alignment, ensure we have the measurements
+        if (this.textAlign.includes('justify') && !cachedResult.justifySpaceMeasurements) ; else {
+          return cachedResult;
+        }
+      }
+      const result = this._splitTextIntoLinesWithBrowser(text);
+
+      // Cache the result
+      this._browserWrapCache = {
+        key: cacheKey,
+        result
+      };
+
+      // Mark that we used browser wrapping to prevent dynamicMinWidth modifications
+      this._usingBrowserWrapping = true;
+      return result;
+    }
+
+    // Clear the browser wrapping flag when using regular wrapping
+    this._usingBrowserWrapping = false;
+
+    // Default Fabric wrapping for other fonts
+    const newText = super._splitTextIntoLines(text),
+      graphemeLines = this._wrapText(newText.lines, this.width),
+      lines = new Array(graphemeLines.length);
+    for (let i = 0; i < graphemeLines.length; i++) {
+      lines[i] = graphemeLines[i].join('');
+    }
+    newText.lines = lines;
+    newText.graphemeLines = graphemeLines;
+    return newText;
+  }
+
+  /**
+   * Use browser's native text wrapping for accurate handling of fonts without English glyphs
+   * @private
+   */
+  _splitTextIntoLinesWithBrowser(text) {
+    if (typeof document === 'undefined') {
+      // Fallback to regular wrapping in Node.js
+      return this._splitTextIntoLinesDefault(text);
+    }
+
+    // Create a hidden element that mimics the overlay editor
+    const testElement = document.createElement('div');
+    testElement.style.position = 'absolute';
+    testElement.style.left = '-9999px';
+    testElement.style.visibility = 'hidden';
+    testElement.style.fontSize = `${this.fontSize}px`;
+    testElement.style.fontFamily = `"${this.fontFamily}"`;
+    testElement.style.fontWeight = String(this.fontWeight || 'normal');
+    testElement.style.fontStyle = String(this.fontStyle || 'normal');
+    testElement.style.lineHeight = String(this.lineHeight || 1.16);
+    testElement.style.width = `${this.width}px`;
+    testElement.style.direction = this.direction || 'ltr';
+    testElement.style.whiteSpace = 'pre-wrap';
+    testElement.style.wordBreak = 'normal';
+    testElement.style.overflowWrap = 'break-word';
+
+    // Set browser-native text alignment (including justify)
+    if (this.textAlign.includes('justify')) {
+      testElement.style.textAlign = 'justify';
+      testElement.style.textAlignLast = 'auto'; // Let browser decide last line alignment
+    } else {
+      testElement.style.textAlign = this.textAlign;
+    }
+    testElement.textContent = text;
+    document.body.appendChild(testElement);
+
+    // Get the browser's natural line breaks
+    const range = document.createRange();
+    const lines = [];
+    const graphemeLines = [];
+    try {
+      // Simple approach: split by measuring character positions
+      const textNode = testElement.firstChild;
+      if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        let currentLineStart = 0;
+        const textLength = text.length;
+        let previousBottom = 0;
+        for (let i = 0; i <= textLength; i++) {
+          range.setStart(textNode, currentLineStart);
+          range.setEnd(textNode, i);
+          const rect = range.getBoundingClientRect();
+          if (i > currentLineStart && (rect.bottom > previousBottom + 5 || i === textLength)) {
+            // New line detected or end of text
+            const lineEnd = i === textLength ? i : i - 1;
+            const lineText = text.substring(currentLineStart, lineEnd).trim();
+            if (lineText) {
+              lines.push(lineText);
+              // Convert to graphemes for compatibility
+              const graphemeLine = lineText.split('');
+              graphemeLines.push(graphemeLine);
+            }
+            currentLineStart = lineEnd;
+            previousBottom = rect.bottom;
+          }
+        }
+      }
+    } catch (error) {
+      console.warn('Browser wrapping failed, using fallback:', error);
+      document.body.removeChild(testElement);
+      return this._splitTextIntoLinesDefault(text);
+    }
+
+    // Extract actual browser height BEFORE removing element
+    const actualBrowserHeight = testElement.scrollHeight;
+    const offsetHeight = testElement.offsetHeight;
+    const clientHeight = testElement.clientHeight;
+    const boundingRect = testElement.getBoundingClientRect();
+    console.log(`🔤 Browser element measurements:`);
+    console.log(`   scrollHeight: ${actualBrowserHeight}px (content + padding + hidden overflow)`);
+    console.log(`   offsetHeight: ${offsetHeight}px (content + padding + border)`);
+    console.log(`   clientHeight: ${clientHeight}px (content + padding, no border/scrollbar)`);
+    console.log(`   boundingRect.height: ${boundingRect.height}px (actual rendered height)`);
+    console.log(`   Font size: ${this.fontSize}px, Line height: ${this.lineHeight || 1.16}, Lines: ${lines.length}`);
+
+    // For justify alignment, extract space measurements from browser BEFORE removing element
+    let justifySpaceMeasurements = null;
+    if (this.textAlign.includes('justify')) {
+      justifySpaceMeasurements = this._extractJustifySpaceMeasurements(testElement, lines);
+    }
+    document.body.removeChild(testElement);
+    console.log(`🔤 Browser wrapping result: ${lines.length} lines`);
+
+    // Try different height measurements to find the most accurate
+    let bestHeight = actualBrowserHeight;
+
+    // If scrollHeight and offsetHeight differ significantly, investigate
+    if (Math.abs(actualBrowserHeight - offsetHeight) > 2) {
+      console.log(`🔤 Height discrepancy detected: scrollHeight=${actualBrowserHeight}px vs offsetHeight=${offsetHeight}px`);
+    }
+
+    // Consider using boundingRect height if it's larger (sometimes more accurate for visible content)
+    if (boundingRect.height > bestHeight) {
+      console.log(`🔤 Using boundingRect height (${boundingRect.height}px) instead of scrollHeight (${bestHeight}px)`);
+      bestHeight = boundingRect.height;
+    }
+
+    // Font-specific height adjustments for accurate bounding box
+    let adjustedHeight = bestHeight;
+
+    // Fonts without English glyphs need additional height buffer due to different font metrics
+    const lacksEnglishGlyphs = fontLacksEnglishGlyphsCached(this.fontFamily);
+    if (lacksEnglishGlyphs) {
+      const glyphBuffer = this.fontSize * 0.25; // 25% of font size for non-English fonts
+      adjustedHeight = bestHeight + glyphBuffer;
+      console.log(`🔤 Non-English font detected (${this.fontFamily}): Adding ${glyphBuffer}px buffer (${bestHeight}px + ${glyphBuffer}px = ${adjustedHeight}px)`);
+    } else {
+      console.log(`🔤 Standard font (${this.fontFamily}): Using browser height directly (${bestHeight}px)`);
+    }
+    return {
+      _unwrappedLines: [text.split('')],
+      lines: lines,
+      graphemeText: text.split(''),
+      graphemeLines: graphemeLines,
+      justifySpaceMeasurements: justifySpaceMeasurements,
+      actualBrowserHeight: adjustedHeight
+    };
+  }
+
+  /**
+   * Extract justify space measurements from browser
+   * @private
+   */
+  _extractJustifySpaceMeasurements(element, lines) {
+    console.log(`🔤 Extracting browser justify space measurements for ${lines.length} lines`);
+
+    // For now, we'll use a simplified approach:
+    // Apply uniform space expansion to match the line width
+    const spaceWidths = [];
+    lines.forEach((line, lineIndex) => {
+      const lineSpaces = [];
+      const spaceCount = (line.match(/\s/g) || []).length;
+      if (spaceCount > 0 && lineIndex < lines.length - 1) {
+        // Don't justify last line
+        // Calculate how much space expansion is needed
+        const normalSpaceWidth = 6.4; // Default space width for STV font
+        const lineWidth = this.width;
+
+        // Estimate natural line width
+        const charCount = line.length - spaceCount;
+        const avgCharWidth = 12; // Approximate for STV font
+
+        // Calculate expanded space width
+        const remainingSpace = lineWidth - charCount * avgCharWidth;
+        const expandedSpaceWidth = remainingSpace / spaceCount;
+        console.log(`🔤 Line ${lineIndex}: ${spaceCount} spaces, natural: ${normalSpaceWidth}px -> justified: ${expandedSpaceWidth.toFixed(1)}px`);
+
+        // Fill array with expanded space widths for this line
+        for (let i = 0; i < spaceCount; i++) {
+          lineSpaces.push(expandedSpaceWidth);
+        }
+      }
+      spaceWidths.push(lineSpaces);
+    });
+    return spaceWidths;
+  }
+
+  /**
+   * Apply browser-calculated justify space measurements
+   * @private
+   */
+  _applyBrowserJustifySpaces() {
+    if (!this._textLines || !this.__charBounds) {
+      console.warn('🔤 BROWSER JUSTIFY: _textLines or __charBounds not ready');
+      return;
+    }
+
+    // Get space measurements from browser wrapping result
+    const styleMap = this._styleMap;
+    if (!styleMap || !styleMap.justifySpaceMeasurements) {
+      console.warn('🔤 BROWSER JUSTIFY: No justify space measurements available');
+      return;
+    }
+    const spaceWidths = styleMap.justifySpaceMeasurements;
+    console.log('🔤 BROWSER JUSTIFY: Applying space measurements to __charBounds');
+
+    // Apply space widths to character bounds
+    this._textLines.forEach((line, lineIndex) => {
+      if (!this.__charBounds || !this.__charBounds[lineIndex] || !spaceWidths[lineIndex]) return;
+      const lineBounds = this.__charBounds[lineIndex];
+      const lineSpaceWidths = spaceWidths[lineIndex];
+      let spaceIndex = 0;
+      for (let charIndex = 0; charIndex < line.length; charIndex++) {
+        if (/\s/.test(line[charIndex]) && spaceIndex < lineSpaceWidths.length) {
+          const expandedWidth = lineSpaceWidths[spaceIndex];
+          if (lineBounds[charIndex]) {
+            const oldWidth = lineBounds[charIndex].width;
+            lineBounds[charIndex].width = expandedWidth;
+            console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${expandedWidth.toFixed(1)}px`);
+          }
+          spaceIndex++;
+        }
+      }
+    });
+  }
+
+  /**
+   * Fallback to default Fabric wrapping
+   * @private
+   */
+  _splitTextIntoLinesDefault(text) {
     const newText = super._splitTextIntoLines(text),
       graphemeLines = this._wrapText(newText.lines, this.width),
       lines = new Array(graphemeLines.length);
@@ -25810,6 +27538,204 @@ class Textbox extends IText {
     }
   }
 
+  /**
+   * Initialize event listeners for safety snap functionality
+   * @private
+   */
+  initializeEventListeners() {
+    var _this$canvas4;
+    // Track which side is being used for resize to handle position compensation
+    let resizeOrigin = null;
+
+    // Detect resize origin during resizing
+    this.on('resizing', e => {
+      // Check transform origin to determine which side is being resized
+      if (e.transform) {
+        const {
+          originX
+        } = e.transform;
+        // originX tells us which side is the anchor - opposite side is being dragged
+        resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
+      } else if (e.originX) {
+        const {
+          originX
+        } = e;
+        resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
+      }
+    });
+
+    // Only trigger safety snap after resize is complete (not during)
+    // Use 'modified' event which fires after user releases the mouse
+    this.on('modified', () => {
+      const currentResizeOrigin = resizeOrigin; // Capture the value before reset
+      // Small delay to ensure text layout is updated
+      setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
+      resizeOrigin = null; // Reset after capturing
+    });
+
+    // Also listen to canvas-level modified event as backup
+    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.on('object:modified', e => {
+      if (e.target === this) {
+        const currentResizeOrigin = resizeOrigin; // Capture the value before reset
+        setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
+        resizeOrigin = null; // Reset after capturing
+      }
+    });
+  }
+
+  /**
+   * Safety snap to prevent glyph clipping after manual resize.
+   * Similar to Polotno - checks if any glyphs are too close to edges
+   * and automatically expands width if needed.
+   * @private
+   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
+   */
+  safetySnapWidth(resizeOrigin) {
+    // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
+    if (!this._textLines || this.type.toLowerCase() !== 'textbox' || this._textLines.length === 0) {
+      return;
+    }
+    const lineCount = this._textLines.length;
+    if (lineCount === 0) return;
+    let maxRequiredWidth = 0; // Width including RTL buffer
+
+    for (let i = 0; i < lineCount; i++) {
+      const lineText = this._textLines[i].join(''); // Convert grapheme array to string
+      const lineWidth = this.getLineWidth(i);
+
+      // RTL detection - regex for Arabic, Hebrew, and other RTL characters
+      const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
+      if (rtlRegex.test(lineText)) {
+        // Add minimal RTL compensation buffer - just enough to prevent clipping
+        const rtlBuffer = (this.fontSize || 16) * 0.15; // 15% of font size (much smaller)
+        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth + rtlBuffer);
+      } else {
+        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth);
+      }
+    }
+
+    // Safety margin - how close glyphs can get before we snap
+    const safetyThreshold = 2; // px - very subtle trigger
+
+    if (maxRequiredWidth > this.width - safetyThreshold) {
+      var _this$canvas5;
+      // Set width to exactly what's needed + minimal safety margin
+      const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
+
+      // Store original position before width change
+      const originalLeft = this.left;
+      const originalTop = this.top;
+      const widthIncrease = newWidth - this.width;
+
+      // Change width 
+      this.set('width', newWidth);
+
+      // Force text layout recalculation
+      this.initDimensions();
+
+      // Only compensate position when resizing from left handle
+      // Right handle resize doesn't shift the text position
+      if (resizeOrigin === 'left') {
+        // When resizing from left, the expansion pushes text right
+        // Compensate by moving the textbox left by the width increase
+        this.set({
+          'left': originalLeft - widthIncrease,
+          'top': originalTop
+        });
+      }
+      this.setCoords();
+
+      // Also refresh the overlay editor if it exists
+      if (this.__overlayEditor) {
+        setTimeout(() => {
+          this.__overlayEditor.refresh();
+        }, 0);
+      }
+      (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+    }
+  }
+
+  /**
+   * Fix character selection mismatch after JSON loading for browser-wrapped fonts
+   * @private
+   */
+  _fixCharacterMappingAfterJsonLoad() {
+    if (this._usingBrowserWrapping) {
+      // Clear all cached states to force fresh text layout calculation
+      this._browserWrapCache = null;
+      this._lastDimensionState = null;
+
+      // Force complete re-initialization
+      this.initDimensions();
+      this._forceClearCache = true;
+
+      // Ensure canvas refresh
+      this.setCoords();
+      if (this.canvas) {
+        this.canvas.requestRenderAll();
+      }
+    }
+  }
+
+  /**
+   * Force complete textbox re-initialization (useful after JSON loading)
+   * Overrides Text version with Textbox-specific logic
+   */
+  forceTextReinitialization() {
+    console.log('🔄 Force reinitializing Textbox object');
+
+    // CRITICAL: Ensure textbox is marked as initialized
+    this.initialized = true;
+
+    // Clear all caches and force dirty state
+    this._clearCache();
+    this.dirty = true;
+    this.dynamicMinWidth = 0;
+
+    // Force isEditing false to ensure clean state
+    this.isEditing = false;
+    console.log('   → Set initialized=true, dirty=true, cleared caches');
+
+    // Re-initialize dimensions (this will handle justify properly)
+    this.initDimensions();
+
+    // Double-check that justify was applied by checking space widths
+    if (this.textAlign.includes('justify') && this.__charBounds) {
+      setTimeout(() => {
+        var _this$canvas6;
+        // Verify justify was applied by checking if space widths vary
+        let hasVariableSpaces = false;
+        this.__charBounds.forEach((lineBounds, i) => {
+          if (lineBounds && this._textLines && this._textLines[i]) {
+            const spaces = lineBounds.filter((bound, j) => /\s/.test(this._textLines[i][j]));
+            if (spaces.length > 1) {
+              const firstSpaceWidth = spaces[0].width;
+              hasVariableSpaces = spaces.some(space => Math.abs(space.width - firstSpaceWidth) > 0.1);
+            }
+          }
+        });
+        if (!hasVariableSpaces && this.__charBounds.length > 0) {
+          console.warn('   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again');
+          if (this.enlargeSpaces) {
+            this.enlargeSpaces();
+          }
+        } else {
+          console.log('   ✅ Justify spaces properly expanded');
+        }
+
+        // Ensure height is recalculated - use browser height if available
+        if (this._usingBrowserWrapping && this._actualBrowserHeight) {
+          this.height = this._actualBrowserHeight;
+          console.log(`🔤 JUSTIFY: Preserved browser height: ${this.height}px`);
+        } else {
+          this.height = this.calcTextHeight();
+          console.log(`🔧 JUSTIFY: Used calcTextHeight: ${this.height}px`);
+        }
+        (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+      }, 10);
+    }
+  }
+
   /**
    * Returns object representation of an instance
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output