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

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   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;
@@ -17577,33 +17577,30 @@
     }
   }
 
-  // @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,
@@ -17611,129 +17608,384 @@
       } = 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,
@@ -17742,48 +17994,64 @@
         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,
@@ -17794,14 +18062,6 @@
       } = 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,
@@ -17818,32 +18078,195 @@
       });
     }
   }
+  _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 {
@@ -17862,34 +18285,90 @@
       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);
@@ -18054,7 +18533,8 @@
     /**
      * @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() {
@@ -18268,7 +18748,7 @@
     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,
@@ -18288,14 +18768,28 @@
      * 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`];
     }
 
     /**
@@ -18311,13 +18805,24 @@
         // 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);
     }
 
@@ -18382,10 +18887,15 @@
    * @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);
@@ -18769,6 +19279,97 @@
     };
   }
 
+  /**
+   * 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
    */
@@ -18782,8 +19383,9 @@
     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
@@ -18835,7 +19437,11 @@
     } = 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}`;
   }
 
@@ -18987,6 +19593,81 @@
   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
    * 
@@ -20170,6 +20851,15 @@
      * 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();
@@ -20186,7 +20876,21 @@
       }
       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);
+        }
       }
     }
 
@@ -20195,8 +20899,9 @@
      */
     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;
@@ -20205,15 +20910,47 @@
         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;
+                }
+              }
             }
           }
         }
@@ -20291,6 +21028,18 @@
 
       // 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;
     }
 
@@ -20871,7 +21620,15 @@
       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) {
@@ -21107,9 +21864,21 @@
         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;
       }
@@ -21122,6 +21891,8 @@
       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;
@@ -21280,7 +22051,19 @@
         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(' ');
     }
 
@@ -21324,7 +22107,13 @@
         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();
@@ -21336,6 +22125,14 @@
       };
     }
 
+    /**
+     * 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
@@ -21458,6 +22255,88 @@
 
     /* _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
@@ -21469,6 +22348,93 @@
         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;
+        }
       });
     }
   }
@@ -21908,8 +22874,12 @@
       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 {
@@ -21998,14 +22968,26 @@
       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:');
+          }
+        });
       }
     }
 
@@ -22033,14 +23015,6 @@
       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();
@@ -22063,14 +23037,12 @@
       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';
@@ -22094,50 +23066,333 @@
       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
      */
@@ -22166,6 +23421,11 @@
       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);
 
@@ -22211,6 +23471,23 @@
       // 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);
         }
@@ -22250,25 +23527,40 @@
       }
     }
     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') {
@@ -22277,6 +23569,19 @@
       } 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() {
@@ -25253,6 +26558,7 @@
         ...Textbox.ownDefaults,
         ...options
       });
+      this.initializeEventListeners();
     }
 
     /**
@@ -25274,8 +26580,27 @@
      */
     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) {
@@ -25286,17 +26611,142 @@
       // 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');
+      });
     }
 
     /**
@@ -25663,19 +27113,33 @@
           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;
@@ -25685,9 +27149,19 @@
       // 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;
     }
 
@@ -25731,6 +27205,260 @@
      * @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);
@@ -25760,6 +27488,204 @@
       }
     }
 
+    /**
+     * 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