@nasser-sw/fabric 7.0.1-beta16 → 7.0.1-beta17

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta15";
+  var version = "7.0.1-beta16";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -4806,7 +4806,7 @@
   const TEXT_DECORATION_THICKNESS = 'textDecorationThickness';
   const fontProperties = ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle'];
   const textDecorationProperties = ['underline', 'overline', 'linethrough'];
-  const textLayoutProperties = [...fontProperties, 'lineHeight', 'text', 'charSpacing', 'textAlign', 'styles', 'path', 'pathStartOffset', 'pathSide', 'pathAlign', 'wrap', 'ellipsis', 'letterSpacing', 'enableAdvancedLayout', 'verticalAlign'];
+  const textLayoutProperties = [...fontProperties, 'lineHeight', 'text', 'charSpacing', 'textAlign', 'styles', 'path', 'pathStartOffset', 'pathSide', 'pathAlign', 'wrap', 'ellipsis', 'letterSpacing', 'enableAdvancedLayout', 'verticalAlign', 'kashida'];
   const additionalProps = [...textLayoutProperties, ...textDecorationProperties, 'textBackgroundColor', 'direction', TEXT_DECORATION_THICKNESS, 'useOverlayEditing'];
   const styleProperties = [...fontProperties, ...textDecorationProperties, STROKE, 'strokeWidth', FILL, 'deltaY', 'textBackgroundColor', TEXT_DECORATION_THICKNESS];
 
@@ -4843,6 +4843,7 @@
     letterSpacing: 0,
     enableAdvancedLayout: false,
     verticalAlign: 'top',
+    kashida: 'none',
     // Overlay editor properties
     useOverlayEditing: false,
     CACHE_FONT_SIZE: 400,
@@ -19675,6 +19676,14 @@
    * and grapheme cluster boundary detection.
    */
 
+  // Unicode character categories for text processing
+  const UNICODE_CATEGORIES = {
+    // Bidirectional types
+    L: /[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]/,
+    R: /[\u05BE\u05C0\u05C3\u05C6\u05D0-\u05EA\u05F0-\u05F4\u0608\u060B\u060D]/,
+    AL: /[\u0627\u0629-\u063A\u0641-\u064A\u066D-\u066F\u0671-\u06D3\u06D5]/,
+    EN: /[\u0030-\u0039\u00B2\u00B3\u00B9\u06F0-\u06F9]/,
+    AN: /[\u0660-\u0669\u066B\u066C]/};
 
   /**
    * Enhanced grapheme segmentation using Intl.Segmenter when available
@@ -19698,6 +19707,291 @@
     return graphemeSplit(text);
   }
 
+  /**
+   * Analyze text for bidirectional runs using Unicode BiDi algorithm (simplified)
+   */
+  function analyzeBiDi(text) {
+    let baseDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ltr';
+    if (!text) return [];
+    const runs = [];
+    const chars = Array.from(text);
+    let currentRun = null;
+    for (let i = 0; i < chars.length; i++) {
+      const char = chars[i];
+      const charDirection = getBidiDirection(char, baseDirection);
+
+      // Start new run if direction changes
+      if (!currentRun || currentRun.direction !== charDirection) {
+        if (currentRun) {
+          runs.push(currentRun);
+        }
+        currentRun = {
+          text: char,
+          direction: charDirection,
+          level: charDirection === 'rtl' ? 1 : 0,
+          start: i,
+          end: i + 1
+        };
+      } else {
+        // Continue current run
+        currentRun.text += char;
+        currentRun.end = i + 1;
+      }
+    }
+
+    // Add final run
+    if (currentRun) {
+      runs.push(currentRun);
+    }
+    return runs.length > 0 ? runs : [{
+      text,
+      direction: baseDirection,
+      level: baseDirection === 'rtl' ? 1 : 0,
+      start: 0,
+      end: text.length
+    }];
+  }
+
+  /**
+   * Character classification functions
+   */
+  function isWhitespace(grapheme) {
+    return /\s/.test(grapheme);
+  }
+
+  /**
+   * Get bidirectional character type
+   */
+  function getBidiDirection(char, baseDirection) {
+    // Strong RTL characters
+    if (UNICODE_CATEGORIES.R.test(char) || UNICODE_CATEGORIES.AL.test(char)) {
+      return 'rtl';
+    }
+
+    // Strong LTR characters  
+    if (UNICODE_CATEGORIES.L.test(char)) {
+      return 'ltr';
+    }
+
+    // Numbers follow base direction in simplified algorithm
+    if (UNICODE_CATEGORIES.EN.test(char) || UNICODE_CATEGORIES.AN.test(char)) {
+      return baseDirection;
+    }
+
+    // Neutral characters follow context
+    return baseDirection;
+  }
+
+  // ============================================================================
+  // Arabic Kashida (Tatweel) Support
+  // ============================================================================
+
+  /**
+   * Arabic Tatweel (kashida) character used for justification
+   */
+  const ARABIC_TATWEEL = '\u0640';
+
+  /**
+   * Arabic letters that do NOT connect to the following letter (non-connecting on left).
+   * These letters cannot have kashida inserted after them.
+   * ا (Alef), د (Dal), ذ (Thal), ر (Ra), ز (Zay), و (Waw), ة (Teh Marbuta), ء (Hamza)
+   */
+  const ARABIC_NON_CONNECTING = new Set(['\u0627',
+  // Alef
+  '\u062F',
+  // Dal
+  '\u0630',
+  // Thal
+  '\u0631',
+  // Ra
+  '\u0632',
+  // Zay
+  '\u0648',
+  // Waw
+  '\u0629',
+  // Teh Marbuta
+  '\u0621',
+  // Hamza
+  '\u0622',
+  // Alef with Madda
+  '\u0623',
+  // Alef with Hamza Above
+  '\u0625',
+  // Alef with Hamza Below
+  '\u0672',
+  // Alef with Wavy Hamza Above
+  '\u0673',
+  // Alef with Wavy Hamza Below
+  '\u0675',
+  // High Hamza Alef
+  '\u0688',
+  // Dal with Small Tah
+  '\u0689',
+  // Dal with Ring
+  '\u068A',
+  // Dal with Dot Below
+  '\u068B',
+  // Dal with Dot Below and Small Tah
+  '\u068C',
+  // Dahal
+  '\u068D',
+  // Ddahal
+  '\u068E',
+  // Dul
+  '\u068F',
+  // Dal with Three Dots Above Downwards
+  '\u0690',
+  // Dal with Four Dots Above
+  '\u0691',
+  // Rreh
+  '\u0692',
+  // Reh with Small V
+  '\u0693',
+  // Reh with Ring
+  '\u0694',
+  // Reh with Dot Below
+  '\u0695',
+  // Reh with Small V Below
+  '\u0696',
+  // Reh with Dot Below and Dot Above
+  '\u0697',
+  // Reh with Two Dots Above
+  '\u0698',
+  // Jeh
+  '\u0699',
+  // Reh with Four Dots Above
+  '\u06C4',
+  // Waw with Ring
+  '\u06C5',
+  // Kirghiz Oe
+  '\u06C6',
+  // Oe
+  '\u06C7',
+  // U
+  '\u06C8',
+  // Yu
+  '\u06C9',
+  // Kirghiz Yu
+  '\u06CA',
+  // Waw with Two Dots Above
+  '\u06CB',
+  // Ve
+  '\u06CD',
+  // Yeh with Tail
+  '\u06CF' // Waw with Dot Above
+  ]);
+
+  /**
+   * Check if a character is an Arabic letter (main Arabic block + extended)
+   */
+  function isArabicLetter(char) {
+    if (!char) return false;
+    const code = char.charCodeAt(0);
+    // Arabic: U+0600-U+06FF (main block)
+    // Arabic Supplement: U+0750-U+077F
+    // Arabic Extended-A: U+08A0-U+08FF
+    return code >= 0x0620 && code <= 0x064A ||
+    // Main letters
+    code >= 0x066E && code <= 0x06D3 ||
+    // Extended letters
+    code >= 0x0750 && code <= 0x077F ||
+    // Arabic Supplement
+    code >= 0x08A0 && code <= 0x08FF // Arabic Extended-A
+    ;
+  }
+
+  /**
+   * Check if kashida can be inserted between two characters.
+   * Kashida can only be inserted:
+   * - Between two Arabic letters
+   * - After a letter that connects to the next (not in ARABIC_NON_CONNECTING)
+   * - Not at word boundaries (no whitespace before/after)
+   */
+  // Alef variants that form ligatures with lam
+  const ARABIC_ALEF_VARIANTS = new Set(['\u0627',
+  // ا ALEF
+  '\u0623',
+  // أ ALEF WITH HAMZA ABOVE
+  '\u0625',
+  // إ ALEF WITH HAMZA BELOW
+  '\u0622',
+  // آ ALEF WITH MADDA ABOVE
+  '\u0671' // ٱ ALEF WASLA
+  ]);
+
+  // Lam character
+  const ARABIC_LAM = '\u0644'; // ل
+
+  function canInsertKashida(prevChar, nextChar) {
+    if (!prevChar || !nextChar) return false;
+
+    // Can't insert at whitespace boundaries
+    if (/\s/.test(prevChar) || /\s/.test(nextChar)) return false;
+
+    // Both must be Arabic letters
+    if (!isArabicLetter(prevChar) || !isArabicLetter(nextChar)) return false;
+
+    // Previous char must connect to the next (not be non-connecting)
+    if (ARABIC_NON_CONNECTING.has(prevChar)) return false;
+
+    // NEVER insert kashida between lam and alef - they form a ligature (لا)
+    if (prevChar === ARABIC_LAM && ARABIC_ALEF_VARIANTS.has(nextChar)) return false;
+    return true;
+  }
+
+  /**
+   * Represents a valid kashida insertion point
+   */
+
+  /**
+   * Find all valid kashida insertion points in a line of text.
+   * Returns points sorted by priority (highest first).
+   *
+   * Priority rules (similar to Adobe Illustrator):
+   * 1. Between connected letters (ب + ب = highest)
+   * 2. Prefer middle of words over edges
+   * 3. Avoid inserting right before/after spaces
+   */
+  function findKashidaPoints(graphemes) {
+    const points = [];
+    for (let i = 0; i < graphemes.length - 1; i++) {
+      const prev = graphemes[i];
+      const next = graphemes[i + 1];
+      if (canInsertKashida(prev, next)) {
+        // Calculate priority based on position in word
+        let priority = 1;
+
+        // Find word boundaries
+        let wordStart = i;
+        let wordEnd = i + 1;
+        while (wordStart > 0 && !isWhitespace(graphemes[wordStart - 1])) {
+          wordStart--;
+        }
+        while (wordEnd < graphemes.length && !isWhitespace(graphemes[wordEnd])) {
+          wordEnd++;
+        }
+        const wordLength = wordEnd - wordStart;
+        const posInWord = i - wordStart;
+
+        // Higher priority for middle positions
+        const distFromEdge = Math.min(posInWord, wordLength - 1 - posInWord);
+        priority = distFromEdge + 1;
+
+        // Boost priority for longer words
+        if (wordLength > 4) priority += 1;
+        if (wordLength > 6) priority += 1;
+        points.push({
+          charIndex: i,
+          priority
+        });
+      }
+    }
+
+    // Sort by priority descending
+    points.sort((a, b) => b.priority - a.priority);
+    return points;
+  }
+
   /**
    * Ellipsis Text Truncation System
    * 
@@ -20056,7 +20350,7 @@
     let lineHeight = 0;
     let charIndex = textOffset; // Track character position in original text
 
-    // Measure each grapheme
+    // Measure each grapheme in logical order
     for (let i = 0; i < graphemes.length; i++) {
       const grapheme = graphemes[i];
       const prevGrapheme = i > 0 ? graphemes[i - 1] : undefined;
@@ -20072,12 +20366,14 @@
       bounds.push({
         grapheme,
         x,
+        // Will be updated by BiDi reordering
         y: 0,
         // Will be adjusted later
         width: measurement.width,
         height: measurement.height,
         kernedWidth: measurement.kernedWidth,
         left: x,
+        // Logical position (cumulative)
         baseline: measurement.baseline,
         charIndex: charIndex,
         // Character position in original text
@@ -20091,6 +20387,9 @@
       lineHeight = Math.max(lineHeight, measurement.height);
     }
 
+    // Note: BiDi visual reordering is handled by the browser's canvas fillText
+    // The layout stores positions in logical order; hit testing handles the visual mapping
+
     // Remove trailing spacing from total width (but keep in bounds for rendering)
     if (bounds.length > 0) {
       options.letterSpacing || 0;
@@ -20101,7 +20400,9 @@
     }
 
     // Apply line height
-    const finalHeight = lineHeight * options.lineHeight;
+    // Note: Fabric.js uses _fontSizeMult = 1.13 for line height calculation
+    const fontSizeMult = 1.13;
+    const finalHeight = lineHeight * options.lineHeight * fontSizeMult;
     return {
       text,
       graphemes,
@@ -20171,11 +20472,119 @@
     return lines.length > 0 ? lines : [''];
   }
 
+  /**
+   * Apply BiDi visual reordering to calculate correct visual X positions
+   * This implements the Unicode Bidirectional Algorithm for character placement
+   */
+  function applyBiDiVisualReordering(line, options) {
+    const baseDirection = options.direction === 'inherit' ? 'ltr' : options.direction;
+
+    // Quick check: if all characters are same direction as base, no reordering needed
+    const runs = analyzeBiDi(line.text, baseDirection);
+    const hasMixedBiDi = runs.length > 1 || runs.length === 1 && runs[0].direction !== baseDirection;
+    if (!hasMixedBiDi) {
+      // For pure LTR or pure RTL, just set visual x = logical left
+      // For RTL base direction, we need to flip positions
+      if (baseDirection === 'rtl') {
+        // RTL: rightmost character should be at x=0, leftmost at x=lineWidth
+        line.bounds.forEach(bound => {
+          bound.x = line.width - bound.left - bound.kernedWidth;
+        });
+      }
+      // For LTR, x is already correct (same as left)
+      return line;
+    }
+
+    // Mixed BiDi text - need to reorder runs visually
+    // 1. Build mapping from grapheme index to run
+    const graphemeToRun = [];
+    let runGraphemeStart = 0;
+    for (let runIdx = 0; runIdx < runs.length; runIdx++) {
+      const run = runs[runIdx];
+      const runGraphemes = segmentGraphemes(run.text);
+      for (let i = 0; i < runGraphemes.length; i++) {
+        graphemeToRun.push(runIdx);
+      }
+      runGraphemeStart += runGraphemes.length;
+    }
+
+    // 2. Calculate run widths and positions
+    const runWidths = [];
+    const runStartIndices = [];
+    let currentIdx = 0;
+    for (const run of runs) {
+      runStartIndices.push(currentIdx);
+      const runGraphemes = segmentGraphemes(run.text);
+      let runWidth = 0;
+      for (let i = 0; i < runGraphemes.length; i++) {
+        if (currentIdx + i < line.bounds.length) {
+          const letterSpacing = options.letterSpacing || 0;
+          const charSpacing = options.charSpacing ? options.fontSize * options.charSpacing / 1000 : 0;
+          runWidth += line.bounds[currentIdx + i].kernedWidth + letterSpacing + charSpacing;
+        }
+      }
+      runWidths.push(runWidth);
+      currentIdx += runGraphemes.length;
+    }
+
+    // 3. Determine visual order of runs based on base direction
+    // RTL base: runs display right-to-left (first run on right)
+    // LTR base: runs display left-to-right (first run on left)
+    const visualRunOrder = runs.map((_, i) => i);
+    if (baseDirection === 'rtl') {
+      visualRunOrder.reverse();
+    }
+
+    // 4. Calculate visual X position for each run
+    const runVisualX = new Array(runs.length);
+    let currentX = 0;
+    for (const runIdx of visualRunOrder) {
+      runVisualX[runIdx] = currentX;
+      currentX += runWidths[runIdx];
+    }
+
+    // 5. Assign visual X positions to each grapheme
+    for (let i = 0; i < line.bounds.length; i++) {
+      const runIdx = graphemeToRun[i];
+      if (runIdx === undefined) continue;
+      const run = runs[runIdx];
+      const runStart = runStartIndices[runIdx];
+
+      // Calculate spacing once
+      const letterSpacing = options.letterSpacing || 0;
+      const charSpacing = options.charSpacing ? options.fontSize * options.charSpacing / 1000 : 0;
+      const totalSpacing = letterSpacing + charSpacing;
+
+      // Calculate offset within run (sum of widths of chars before this one)
+      let offsetInRun = 0;
+      for (let j = runStart; j < i; j++) {
+        offsetInRun += line.bounds[j].kernedWidth + totalSpacing;
+      }
+
+      // Character width including spacing
+      const charWidth = line.bounds[i].kernedWidth + totalSpacing;
+
+      // For RTL runs, characters within the run are reversed visually
+      // First logical char appears on the right, last on the left
+      if (run.direction === 'rtl') {
+        // Visual X = run right edge - cumulative width including this char
+        // This places first char at right side of run, last char at left side
+        line.bounds[i].x = runVisualX[runIdx] + runWidths[runIdx] - offsetInRun - charWidth;
+      } else {
+        // LTR run: visual position is run start + offset within run
+        line.bounds[i].x = runVisualX[runIdx] + offsetInRun;
+      }
+    }
+    return line;
+  }
+
   /**
    * Apply text alignment to lines
    */
   function applyAlignment(lines, align, containerWidth, options) {
     return lines.map(line => {
+      // First apply BiDi reordering to get correct visual X positions
+      applyBiDiVisualReordering(line, options);
       let offsetX = 0;
       switch (align) {
         case 'center':
@@ -20195,7 +20604,7 @@
           break;
       }
 
-      // Apply offset to all bounds
+      // Apply offset to all bounds (both visual x and logical left for alignment)
       if (offsetX !== 0) {
         line.bounds.forEach(bound => {
           bound.x += offsetX;
@@ -20279,7 +20688,9 @@
    * Create empty line for empty paragraphs
    */
   function createEmptyLine(options) {
-    const height = options.fontSize * options.lineHeight;
+    // Fabric.js uses _fontSizeMult = 1.13 for line height calculation
+    const fontSizeMult = 1.13;
+    const height = options.fontSize * options.lineHeight * fontSizeMult;
     return {
       text: '',
       graphemes: [],
@@ -20765,6 +21176,12 @@
        * @protected
        */
       _defineProperty(this, "__charBounds", []);
+      /**
+       * contains kashida extension info for each line.
+       * Each entry contains { charIndex, width } for characters that have kashida extensions.
+       * @protected
+       */
+      _defineProperty(this, "__kashidaInfo", []);
       Object.assign(this, FabricText.ownDefaults);
       this.setOptions(options);
       if (!this.styles) {
@@ -20883,11 +21300,31 @@
     }
 
     /**
-     * Enlarge space boxes and shift the others for justify alignment
+     * Enlarge space boxes and shift the others for justify alignment.
+     * Supports Arabic kashida (tatweel) justification when kashida property is set.
+     * When kashida is enabled, actual tatweel characters are inserted into the text.
      */
     enlargeSpaces() {
-      let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
+      // console.log('=== enlargeSpaces START ===');
+      // console.log('this.kashida:', this.kashida);
+
+      // Kashida ratios: proportion of extra space distributed via kashida vs space expansion
+      const kashidaRatios = {
+        none: 0,
+        short: 0.25,
+        medium: 0.5,
+        long: 0.75,
+        stylistic: 1.0
+      };
+      const kashidaRatio = kashidaRatios[this.kashida] || 0;
+      // console.log('kashidaRatio:', kashidaRatio);
+
+      // Reset kashida info
+      this.__kashidaInfo = [];
       for (let i = 0, len = this._textLines.length; i < len; i++) {
+        // Initialize kashida info for this line
+        this.__kashidaInfo[i] = [];
+
         // Check if this line should be justified
         const hasTextAfter = this._textLines.slice(i + 1).some(line => {
           const lineText = Array.isArray(line) ? line.join('') : line;
@@ -20897,33 +21334,121 @@
         const isLastLine = i === len - 1 || this.isEndOfWrapping(i) || isVisualLastLine;
         const shouldJustifyLine = this.textAlign.includes('justify') && !isLastLine;
         if (!shouldJustifyLine) {
+          // console.log(`  Line ${i}: skipped (not justified)`);
           continue;
         }
-        accumulatedSpace = 0;
-        line = this._textLines[i];
-        currentLineWidth = this.getLineWidth(i);
-        if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
-          numberOfSpaces = spaces.length;
-          diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-
-          // Same logic for both LTR and RTL:
-          // Expand space widths and shift subsequent characters
-          // The rendering handles direction via ctx.direction
-          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;
+        const line = this._textLines[i];
+        const currentLineWidth = this.getLineWidth(i);
+        const totalExtraSpace = this.width - currentLineWidth;
+        // console.log(`  Line ${i}: width=${this.width}, lineWidth=${currentLineWidth}, extraSpace=${totalExtraSpace}`);
+
+        if (totalExtraSpace <= 0) {
+          // console.log(`  Line ${i}: skipped (no extra space)`);
+          continue;
+        }
+
+        // Find spaces for space expansion
+        const spaces = this.textLines[i].match(this._reSpacesAndTabs);
+        const numberOfSpaces = spaces ? spaces.length : 0;
+
+        // Find kashida points if enabled
+        const kashidaPoints = kashidaRatio > 0 ? findKashidaPoints(line) : [];
+        const hasKashidaPoints = kashidaPoints.length > 0;
+
+        // Calculate space distribution
+        let kashidaSpace = 0;
+        if (hasKashidaPoints && kashidaRatio > 0) {
+          // Distribute between kashida and spaces
+          kashidaSpace = totalExtraSpace * kashidaRatio;
+        }
+
+        // Calculate per-kashida and per-space widths
+        const perKashidaWidth = hasKashidaPoints ? kashidaSpace / kashidaPoints.length : 0;
+
+        // If kashida is enabled, insert tatweel characters into the text
+        if (hasKashidaPoints && perKashidaWidth > 0) {
+          // console.log(`=== Inserting kashida for line ${i} ===`);
+          // console.log(`  kashidaPoints: ${kashidaPoints.length}, perKashidaWidth: ${perKashidaWidth}`);
+
+          // Sort by charIndex descending to insert from end (so indices stay valid)
+          const sortedPoints = [...kashidaPoints].sort((a, b) => b.charIndex - a.charIndex);
+
+          // Calculate how many tatweels to insert per point
+          // Measure tatweel width to determine count
+          const ctx = getMeasuringContext();
+          // console.log(`  getMeasuringContext: ${ctx ? 'OK' : 'NULL'}`);
+
+          if (ctx) {
+            ctx.font = this._getFontDeclaration();
+            const tatweelWidth = ctx.measureText(ARABIC_TATWEEL).width;
+            // console.log(`  tatweelWidth: ${tatweelWidth}`);
+
+            if (tatweelWidth > 0) {
+              const newLine = [...line];
+              for (const point of sortedPoints) {
+                const tatweelCount = Math.max(1, Math.round(perKashidaWidth / tatweelWidth));
+                // console.log(`  Point ${point.charIndex}: inserting ${tatweelCount} tatweels`);
+
+                // Insert tatweels after the character
+                for (let t = 0; t < tatweelCount; t++) {
+                  newLine.splice(point.charIndex + 1, 0, ARABIC_TATWEEL);
+                }
+
+                // Store kashida info with updated indices and tatweel count
+                this.__kashidaInfo[i].push({
+                  charIndex: point.charIndex,
+                  width: perKashidaWidth,
+                  tatweelCount: tatweelCount
+                });
+              }
+
+              // console.log(`  Total inserted: ${insertedCount} tatweels`);
+              // console.log(`  Original line length: ${line.length}, new line length: ${newLine.length}`);
+              // console.log(`  New line: ${newLine.join('')}`);
+
+              // Update _textLines with the new line containing tatweels
+              this._textLines[i] = newLine;
+
+              // Update textLines string version
+              if (this.textLines && this.textLines[i] !== undefined) {
+                this.textLines[i] = newLine.join('');
               }
+
+              // Recalculate charBounds for this line since text changed
+              this.__charBounds[i] = [];
+              this.__lineWidths[i] = undefined;
+              this._measureLine(i);
+
+              // console.log(`  After remeasure, lineWidth: ${this.__lineWidths[i]}`);
+            }
+          }
+        }
+
+        // Now apply space expansion to remaining extra space
+        const newLineWidth = this.getLineWidth(i);
+        const remainingSpace = this.width - newLineWidth;
+        if (remainingSpace > 0 && numberOfSpaces > 0) {
+          const extraPerSpace = remainingSpace / numberOfSpaces;
+          let accumulatedOffset = 0;
+          for (let j = 0; j < this._textLines[i].length; j++) {
+            const charBound = this.__charBounds[i][j];
+            if (!charBound) continue;
+            charBound.left += accumulatedOffset;
+            if (this._reSpaceAndTab.test(this._textLines[i][j])) {
+              charBound.width += extraPerSpace;
+              charBound.kernedWidth += extraPerSpace;
+              accumulatedOffset += extraPerSpace;
             }
           }
         }
       }
+
+      // Final debug log showing kashida state
+      // console.log('=== enlargeSpaces END ===');
+      // console.log('Final __kashidaInfo:', JSON.stringify(this.__kashidaInfo.map((lineInfo, i) => ({
+      //   line: i,
+      //   entries: lineInfo.map(k => ({ charIndex: k.charIndex, tatweelCount: k.tatweelCount }))
+      // }))));
     }
 
     /**
@@ -20943,7 +21468,9 @@
       return {
         text: this.text,
         width: this.width,
-        height: this.height,
+        // Don't pass height constraint to allow vertical auto-expansion
+        // Only pass height if ellipsis is enabled (need to truncate)
+        height: this.ellipsis ? this.height : undefined,
         wrap: this.wrap || 'word',
         align: this._mapTextAlignToAlign(this.textAlign),
         ellipsis: this.ellipsis || false,
@@ -20998,9 +21525,13 @@
       // Convert layout to legacy format for compatibility
       this._convertLayoutToLegacyFormat(layout);
 
-      // Ensure justify alignment is properly applied for compatibility with legacy rendering
-      // Skip legacy enlargeSpaces when using advanced layout; Konva layout already distributes spaces.
-
+      // Apply kashida if enabled for justify alignment
+      // This must be called after _convertLayoutToLegacyFormat to ensure __charBounds exists
+      if (this.textAlign.includes(JUSTIFY) && this.kashida && this.kashida !== 'none') {
+        if (this.__charBounds && this.__charBounds.length > 0) {
+          this.enlargeSpaces();
+        }
+      }
       this.dirty = true;
     }
 
@@ -21012,16 +21543,27 @@
       this._textLines = layout.lines.map(line => line.graphemes);
       this.textLines = layout.lines.map(line => line.text);
 
+      // Set _text as flat array of all graphemes (required for editing)
+      this._text = layout.lines.flatMap(line => line.graphemes);
+
       // Convert bounds to legacy format
+      // IMPORTANT: Preserve both logical (left) and visual (renderLeft) positions
+      // - left: cumulative logical offset (for text editing operations)
+      // - renderLeft: actual visual X position after BiDi reordering and alignment
+      // The renderLeft is critical for correct cursor/selection hit testing in mixed RTL/LTR text
       this.__charBounds = layout.lines.map(line => line.bounds.map(bound => ({
         left: bound.left,
         top: bound.y,
         width: bound.width,
         height: bound.height,
         kernedWidth: bound.kernedWidth,
-        deltaY: bound.deltaY || 0
+        deltaY: bound.deltaY || 0,
+        renderLeft: bound.x // Visual X position for hit testing
       })));
 
+      // Populate line widths cache to prevent getLineWidth from triggering legacy measurement
+      this.__lineWidths = layout.lines.map(line => line.width);
+
       // Update grapheme info for compatibility
       if (layout.lines.length > 0) {
         this._unwrappedTextLines = layout.lines.map(line => line.graphemes);
@@ -21189,6 +21731,48 @@
       this._renderChars(method, ctx, line, left, top, lineIndex);
     }
 
+    /**
+     * Build display text lines with kashida characters inserted.
+     * This creates a version of _textLines with tatweel characters added at kashida points.
+     * @private
+     */
+    _buildKashidaDisplayLines() {
+      if (this.kashida === 'none' || !this.__kashidaInfo) {
+        return this._textLines;
+      }
+      const displayLines = [];
+      for (let lineIndex = 0; lineIndex < this._textLines.length; lineIndex++) {
+        const line = this._textLines[lineIndex];
+        const kashidaInfo = this.__kashidaInfo[lineIndex];
+        if (!kashidaInfo || kashidaInfo.length === 0) {
+          displayLines.push([...line]);
+          continue;
+        }
+
+        // Sort kashida points by charIndex descending so we can insert from the end
+        const sortedKashida = [...kashidaInfo].sort((a, b) => b.charIndex - a.charIndex);
+
+        // Calculate how many tatweels to insert based on width
+        const newLine = [...line];
+        for (const {
+          charIndex,
+          width
+        } of sortedKashida) {
+          if (width <= 0 || charIndex >= newLine.length) continue;
+
+          // Calculate number of tatweel characters based on width
+          // Each tatweel is approximately 5px at font size 24
+          const tatweelCount = Math.max(1, Math.round(width / 3));
+          const tatweels = ARABIC_TATWEEL.repeat(tatweelCount);
+
+          // Insert tatweels after the character at charIndex
+          newLine.splice(charIndex + 1, 0, tatweels);
+        }
+        displayLines.push(newLine);
+      }
+      return displayLines;
+    }
+
     /**
      * Renders the text background for lines, taking care of style
      * @private
@@ -21269,10 +21853,13 @@
       const fontCache = cache.getFontCache(charStyle),
         fontDeclaration = this._getFontDeclaration(charStyle),
         couple = previousChar + _char,
-        stylesAreEqual = previousChar && fontDeclaration === this._getFontDeclaration(prevCharStyle),
+        // Skip kerning for tatweel (kashida) characters - they extend connections
+        // and kerning would make the following character appear too narrow
+        isTatweel = previousChar === '\u0640',
+        stylesAreEqual = previousChar && !isTatweel && fontDeclaration === this._getFontDeclaration(prevCharStyle),
         fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE;
       let width, coupleWidth, previousWidth, kernedWidth;
-      if (previousChar && fontCache[previousChar] !== undefined) {
+      if (previousChar && !isTatweel && fontCache[previousChar] !== undefined) {
         previousWidth = fontCache[previousChar];
       }
       if (fontCache[_char] !== undefined) {
@@ -21290,11 +21877,11 @@
           kernedWidth = width = ctx.measureText(_char).width;
           fontCache[_char] = width;
         }
-        if (previousWidth === undefined && stylesAreEqual && previousChar) {
+        if (previousWidth === undefined && stylesAreEqual && previousChar && !isTatweel) {
           previousWidth = ctx.measureText(previousChar).width;
           fontCache[previousChar] = previousWidth;
         }
-        if (stylesAreEqual && coupleWidth === undefined) {
+        if (stylesAreEqual && coupleWidth === undefined && !isTatweel) {
           // we can measure the kerning couple and subtract the width of the previous character
           coupleWidth = ctx.measureText(couple).width;
           fontCache[couple] = coupleWidth;
@@ -21341,10 +21928,7 @@
      */
     _measureLine(lineIndex) {
       // Debug: detect if measureLine is called after justify was applied
-      if (this._justifyApplied) {
-        console.warn(`WARNING: _measureLine called for line ${lineIndex} AFTER justify was applied! This will overwrite justified charBounds.`);
-        console.trace('Stack trace:');
-      }
+      if (this._justifyApplied) ;
       let width = 0,
         prevGrapheme,
         graphemeInfo;
@@ -21519,13 +22103,7 @@
         top = this._getTopOffset();
 
       // Debug: log once per render
-      if (method === 'fillText' && (_this$textAlign = this.textAlign) !== null && _this$textAlign !== void 0 && _this$textAlign.includes('justify')) {
-        console.log('=== RENDER DEBUG ===');
-        console.log('direction:', this.direction);
-        console.log('textAlign:', this.textAlign);
-        console.log('width:', this.width);
-        console.log('_getLeftOffset:', left);
-      }
+      if (method === 'fillText' && (_this$textAlign = this.textAlign) !== null && _this$textAlign !== void 0 && _this$textAlign.includes('justify')) ;
       for (let i = 0, len = this._textLines.length; i < len; i++) {
         var _this$textAlign2;
         const heightOfLine = this.getHeightOfLine(i),
@@ -21534,8 +22112,8 @@
 
         // Debug: log line offsets for justify
         if (method === 'fillText' && (_this$textAlign2 = this.textAlign) !== null && _this$textAlign2 !== void 0 && _this$textAlign2.includes('justify')) {
-          const lineWidth = this.getLineWidth(i);
-          console.log(`Line ${i}: leftOffset=${leftOffset.toFixed(2)}, lineWidth=${lineWidth.toFixed(2)}, renderAt=${(left + leftOffset).toFixed(2)}`);
+          this.getLineWidth(i);
+          // console.log(`Line ${i}: leftOffset=${leftOffset.toFixed(2)}, lineWidth=${lineWidth.toFixed(2)}, renderAt=${(left + leftOffset).toFixed(2)}`);
         }
         this._renderTextLine(method, ctx, this._textLines[i], left + leftOffset, top + lineHeights + maxHeight, i);
         lineHeights += heightOfLine;
@@ -21586,12 +22164,18 @@
       const lineHeight = this.getHeightOfLine(lineIndex),
         isJustify = this.textAlign.includes(JUSTIFY),
         path = this.path,
-        shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path,
         isLtr = this.direction === 'ltr',
         sign = this.direction === 'ltr' ? 1 : -1,
         // this was changed in the PR #7674
         // currentDirection = ctx.canvas.getAttribute('dir');
         currentDirection = ctx.direction;
+
+      // Check if we should use BiDi-aware rendering with pre-calculated positions
+      // This is needed for advanced layout with RTL or mixed BiDi text
+      const chars = this.__charBounds[lineIndex];
+      this.enableAdvancedLayout && (chars === null || chars === void 0 ? void 0 : chars.length) > 0 && chars[0].renderLeft !== undefined;
+
+      const shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path;
       let actualStyle,
         nextStyle,
         charsToRender = '',
@@ -21600,6 +22184,9 @@
         timeToRender,
         drawingLeft;
       ctx.save();
+
+      // For BiDi rendering with pre-calculated positions, disable browser BiDi
+      // and render each character at its calculated visual position
       if (currentDirection !== this.direction) {
         ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
         ctx.direction = isLtr ? 'ltr' : 'rtl';
@@ -21619,12 +22206,12 @@
       }
       // Debug: Log charBounds being used for first line only during justify
       if (isJustify && lineIndex === 0 && method === 'fillText') {
-        console.log(`\n=== RENDER _renderChars line ${lineIndex} ===`);
-        console.log('Initial left:', left.toFixed(2), 'sign:', sign);
-        console.log('_justifyApplied flag:', this._justifyApplied);
+        // console.log(`\n=== RENDER _renderChars line ${lineIndex} ===`);
+        // console.log('Initial left:', left.toFixed(2), 'sign:', sign);
+        // console.log('_justifyApplied flag:', (this as any)._justifyApplied);
         const lineBounds = this.__charBounds[lineIndex];
-        const totalKW = (lineBounds === null || lineBounds === void 0 ? void 0 : lineBounds.reduce((s, b) => s + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0)) || 0;
-        console.log('Total kernedWidth in charBounds:', totalKW.toFixed(2), '(should be ~300 if justify was applied)');
+        (lineBounds === null || lineBounds === void 0 ? void 0 : lineBounds.reduce((s, b) => s + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0)) || 0;
+        // console.log('Total kernedWidth in charBounds:', totalKW.toFixed(2), '(should be ~300 if justify was applied)');
         // Log first few space widths to verify expansion
         const spaceIndices = [3, 9, 15, 23, 31];
         spaceIndices.forEach(idx => {
@@ -21673,10 +22260,6 @@
             // For RTL with textAlign='right': x is the right edge, so drawingLeft = left
             // Both cases: drawingLeft = left (the text alignment handles the edge correctly)
             drawingLeft = left;
-            // Debug: log first chunk positioning for justify
-            if (isJustify && lineIndex === 0 && method === 'fillText' && i < 5) {
-              console.log(`  Chunk ending at char ${i}: left=${left.toFixed(2)}, boxWidth=${boxWidth.toFixed(2)}, drawingLeft=${drawingLeft.toFixed(2)}, textAlign=${isLtr ? 'left' : 'right'}`);
-            }
             this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top);
           }
           charsToRender = '';
@@ -21685,11 +22268,6 @@
           boxWidth = 0;
         }
       }
-      // Debug: log final position for justify
-      if (isJustify && lineIndex === 0 && method === 'fillText') {
-        console.log('Final left position after rendering:', left.toFixed(2));
-        console.log('Expected final position:', (sign > 0 ? this.width / 2 : -this.width / 2).toFixed(2));
-      }
       ctx.restore();
     }
 
@@ -21921,12 +22499,159 @@
      * @private
      */
     _clearCache() {
+      // console.log('🗑️ _clearCache called');
+      // console.trace('🗑️ _clearCache stack trace');
       this._forceClearCache = false;
       this.__lineWidths = [];
       this.__lineHeights = [];
       this.__charBounds = [];
+      this.__kashidaInfo = [];
       // Reset justify applied flag
       this._justifyApplied = false;
+      // Reset dimension state to force recalculation
+      this._lastDimensionState = null;
+    }
+
+    /**
+     * Convert a display character index (in _textLines with tatweels) to original text index.
+     * When kashida is applied, _textLines contains extra tatweel characters that don't exist
+     * in the original text. This method maps back to the original index.
+     * @param lineIndex - The line index
+     * @param displayCharIndex - Character index in the display text (with tatweels)
+     * @returns Original character index (without tatweels)
+     */
+    _displayToOriginalIndex(lineIndex, displayCharIndex) {
+      var _this$__kashidaInfo;
+      // console.log(`🔄 _displayToOriginalIndex called: line=${lineIndex}, displayIdx=${displayCharIndex}`);
+      // console.log(`🔄 __kashidaInfo exists: ${!!this.__kashidaInfo}, length: ${this.__kashidaInfo?.length}`);
+      // console.log(`🔄 __kashidaInfo raw:`, JSON.stringify(this.__kashidaInfo));
+
+      const kashidaInfo = (_this$__kashidaInfo = this.__kashidaInfo) === null || _this$__kashidaInfo === void 0 ? void 0 : _this$__kashidaInfo[lineIndex];
+      if (!kashidaInfo || kashidaInfo.length === 0) {
+        // No kashida on this line, indices are the same
+        // console.log(`🔄 No kashida info for line ${lineIndex}, returning same index`);
+        return displayCharIndex;
+      }
+
+      // Sort kashida info by charIndex ascending for proper traversal
+      const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+
+      // console.log(`🔄 _displayToOriginalIndex: line=${lineIndex}, displayIdx=${displayCharIndex}`);
+      // console.log(`🔄 kashidaInfo:`, sortedKashida.map(k => `{charIdx:${k.charIndex}, cnt:${k.tatweelCount}}`).join(', '));
+
+      let tatweelsBeforeIndex = 0;
+      for (const k of sortedKashida) {
+        const tatweelCount = k.tatweelCount || 0;
+        // Position where tatweels start (after the original character)
+        const tatweelStartPos = k.charIndex + 1 + tatweelsBeforeIndex;
+        const tatweelEndPos = tatweelStartPos + tatweelCount;
+
+        // console.log(`🔄   k.charIndex=${k.charIndex}, tatweelStartPos=${tatweelStartPos}, tatweelEndPos=${tatweelEndPos}, tatweelsBeforeIndex=${tatweelsBeforeIndex}`);
+
+        if (displayCharIndex < tatweelStartPos) {
+          // Before this kashida point
+          // console.log(`🔄   displayIdx < tatweelStartPos, break`);
+          break;
+        } else if (displayCharIndex < tatweelEndPos) {
+          // Within tatweel characters - map to the character before tatweels
+          // console.log(`🔄   Within tatweel, return ${k.charIndex + 1}`);
+          return k.charIndex + 1;
+        } else {
+          // After this kashida point
+          tatweelsBeforeIndex += tatweelCount;
+          // console.log(`🔄   After this kashida, tatweelsBeforeIndex now=${tatweelsBeforeIndex}`);
+        }
+      }
+
+      // Subtract all tatweels that come before this position
+      const result = displayCharIndex - tatweelsBeforeIndex;
+      // console.log(`🔄 Final result: ${displayCharIndex} - ${tatweelsBeforeIndex} = ${result}`);
+      return result;
+    }
+
+    /**
+     * Convert an original text character index to display index (in _textLines with tatweels).
+     * @param lineIndex - The line index
+     * @param originalCharIndex - Character index in the original text (without tatweels)
+     * @returns Display character index (with tatweels)
+     */
+    _originalToDisplayIndex(lineIndex, originalCharIndex) {
+      var _this$__kashidaInfo2;
+      const kashidaInfo = (_this$__kashidaInfo2 = this.__kashidaInfo) === null || _this$__kashidaInfo2 === void 0 ? void 0 : _this$__kashidaInfo2[lineIndex];
+      if (!kashidaInfo || kashidaInfo.length === 0) {
+        // No kashida on this line, indices are the same
+        return originalCharIndex;
+      }
+
+      // Sort kashida info by charIndex ascending
+      const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+      let tatweelsBeforeIndex = 0;
+      for (const k of sortedKashida) {
+        const tatweelCount = k.tatweelCount || 0;
+        // If the original char index is after this kashida insertion point,
+        // add the tatweels to the offset
+        if (originalCharIndex > k.charIndex) {
+          tatweelsBeforeIndex += tatweelCount;
+        } else {
+          break;
+        }
+      }
+      return originalCharIndex + tatweelsBeforeIndex;
+    }
+
+    /**
+     * Check if a display character index points to a tatweel character.
+     * @param lineIndex - The line index
+     * @param displayCharIndex - Character index in the display text
+     * @returns True if the character at this index is a tatweel
+     */
+    _isTatweelAtDisplayIndex(lineIndex, displayCharIndex) {
+      var _this$__kashidaInfo3;
+      const kashidaInfo = (_this$__kashidaInfo3 = this.__kashidaInfo) === null || _this$__kashidaInfo3 === void 0 ? void 0 : _this$__kashidaInfo3[lineIndex];
+      if (!kashidaInfo || kashidaInfo.length === 0) {
+        return false;
+      }
+
+      // Sort kashida info by charIndex ascending
+      const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+      let tatweelsBeforeIndex = 0;
+      for (const k of sortedKashida) {
+        const tatweelCount = k.tatweelCount || 0;
+        const tatweelStartPos = k.charIndex + 1 + tatweelsBeforeIndex;
+        const tatweelEndPos = tatweelStartPos + tatweelCount;
+        if (displayCharIndex >= tatweelStartPos && displayCharIndex < tatweelEndPos) {
+          return true;
+        }
+        tatweelsBeforeIndex += tatweelCount;
+      }
+      return false;
+    }
+
+    /**
+     * Get the total number of tatweel characters inserted in a line.
+     * @param lineIndex - The line index
+     * @returns Total number of tatweels in this line
+     */
+    _getTatweelCountForLine(lineIndex) {
+      var _this$__kashidaInfo4;
+      const kashidaInfo = (_this$__kashidaInfo4 = this.__kashidaInfo) === null || _this$__kashidaInfo4 === void 0 ? void 0 : _this$__kashidaInfo4[lineIndex];
+      if (!kashidaInfo || kashidaInfo.length === 0) {
+        return 0;
+      }
+      return kashidaInfo.reduce((sum, k) => sum + (k.tatweelCount || 0), 0);
+    }
+
+    /**
+     * Get the original line length (without tatweels).
+     * When kashida is applied, _textLines contains extra tatweel characters.
+     * This returns the length as it would be in the original text.
+     * @param lineIndex - The line index
+     * @returns Original line length without tatweels
+     */
+    _getOriginalLineLength(lineIndex) {
+      var _this$_textLines$line;
+      const displayLength = ((_this$_textLines$line = this._textLines[lineIndex]) === null || _this$_textLines$line === void 0 ? void 0 : _this$_textLines$line.length) || 0;
+      return displayLength - this._getTatweelCountForLine(lineIndex);
     }
 
     /**
@@ -22970,7 +23695,9 @@
         requestAnimationFrame(() => {
           if (!this.isDestroyed) {
             this.applyOverlayStyle();
-            console.log('📐 Height changed - rechecking alignment after repositioning:');
+            // console.log(
+            //   '📐 Height changed - rechecking alignment after repositioning:',
+            // );
           }
         });
       }
@@ -23066,7 +23793,7 @@
 
       // 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');
+        // 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();
       }
@@ -23083,11 +23810,11 @@
       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);
+      // console.log('🔍 ALIGNMENT DEBUG:');
+      // console.log('   Fabric textAlign:', textAlign);
+      // console.log('   Fabric direction:', (target as any).direction);
+      // console.log('   Text content:', JSON.stringify(target.text));
+      // console.log('   Detected direction:', autoDetectedDirection);
 
       // Map fabric.js justify to CSS
       if (textAlign.includes('justify')) {
@@ -23105,7 +23832,7 @@
             // 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');
+              // console.log('   → Overrode justify-left to justify-right for RTL text');
             } else {
               this.textarea.style.textAlignLast = 'left';
             }
@@ -23113,7 +23840,7 @@
             // 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');
+              // console.log('   → Overrode justify-right to justify-left for LTR text');
             } else {
               this.textarea.style.textAlignLast = 'right';
             }
@@ -23132,16 +23859,17 @@
           // 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);
+
+          // 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);
+          // 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);
+        // 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';
@@ -23167,37 +23895,31 @@
       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);
+      // 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 as any).textJustify);
+      // console.log('   wordSpacing:', (this.textarea.style as any).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);
-      }
+      if (textAlign.includes('justify')) ;
 
       // 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+      // 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
@@ -23212,11 +23934,12 @@
       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('🔤 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);
+
+      // console.log('🎨 FONT SMOOTHING APPLIED:');
+      // console.log('   webkitFontSmoothing:', (this.textarea.style as any).webkitFontSmoothing);
+      // console.log('   mozOsxFontSmoothing:', (this.textarea.style as any).mozOsxFontSmoothing);
 
       // Initial bounds are set correctly by Fabric.js - don't force update here
     }
@@ -23245,137 +23968,130 @@
         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);
+
+      // 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+      // 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;
+      this.target;
       const text = this.textarea.value;
-      console.log('📝 TEXT WRAPPING COMPARISON:');
-      console.log('📄 Text Content:', `"${text}"`);
-      console.log('📄 Text Length:', text.length);
+
+      // 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);
+      // console.log('📄 Explicit Lines (\\n):', explicitLines.length);
       explicitLines.forEach((line, i) => {
-        console.log(`   Line ${i + 1}: "${line}" (${line.length} chars)`);
+        // 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);
+      // 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);
+      // console.log('📐 Fabric Text Object Properties:');
+      // console.log('   width:', (target as any).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 as any).direction);
+      // console.log('   textAlign:', (target as any).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;
+      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);
+      textareaComputedWidth / this.canvas.getZoom();
+
+      // 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 as any).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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+
+      // 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     }
 
     /**
@@ -23464,17 +24180,16 @@
 
         // Only update direction when not explicitly set on the object
         if (!hasExplicitDirection && detectedDirection && detectedDirection !== currentDirection) {
-          console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
-          console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+          // 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)}..."`);
+
+          // console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
         }
         if (this.onCommit) {
           this.onCommit(finalText);
@@ -23684,7 +24399,11 @@
    *  - `\-`     Matches a "-" character (char code 45).
    */
   // eslint-disable-next-line no-useless-escape
-  const reNonWord = /[ \n\.,;!\?\-]/;
+  // Word boundary characters for Latin, Arabic, and Hebrew
+  // Latin: space, newline, punctuation
+  // Arabic: ، (comma U+060C), ؛ (semicolon U+061B), ؟ (question U+061F), ۔ (full stop U+06D4), ـ (tatweel U+0640)
+  // Hebrew: ׃ (sof pasuq U+05C3), ״ (gershayim U+05F4)
+  const reNonWord = /[ \n\.,;!\?\-\u060C\u061B\u061F\u06D4\u0640\u05C3\u05F4\u2000-\u206F]/;
   class ITextBehavior extends FabricText {
     constructor() {
       super(...arguments);
@@ -23905,12 +24624,99 @@
 
     /**
      * Finds index corresponding to beginning or end of a word
+     * Uses Intl.Segmenter for proper Unicode word segmentation when available,
+     * falls back to regex-based detection for older browsers.
      * @param {Number} selectionStart Index of a character
      * @param {Number} direction 1 or -1
      * @return {Number} Index of the beginning or end of a word
      */
     searchWordBoundary(selectionStart, direction) {
-      const text = this._text;
+      // Try to use Intl.Segmenter for proper Unicode word segmentation
+      if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+        return this._searchWordBoundaryWithSegmenter(selectionStart, direction);
+      }
+      // Fallback to regex-based detection
+      return this._searchWordBoundaryWithRegex(selectionStart, direction);
+    }
+
+    /**
+     * Word boundary search using Intl.Segmenter (proper Unicode support)
+     * Works on original text (this.text) since selectionStart is in original text space
+     */
+    _searchWordBoundaryWithSegmenter(selectionStart, direction) {
+      // Use original text (without kashida) since indices are in original text space
+      const originalText = this.text;
+      const SegmenterClass = Intl.Segmenter;
+      const segmenter = new SegmenterClass(undefined, {
+        granularity: 'word'
+      });
+      const segments = Array.from(segmenter.segment(originalText));
+      if (segments.length === 0) {
+        return direction === -1 ? 0 : originalText.length;
+      }
+
+      // Find the segment containing the cursor position
+      let currentSegmentIdx = 0;
+      for (let i = 0; i < segments.length; i++) {
+        const seg = segments[i];
+        if (selectionStart >= seg.index && selectionStart < seg.index + seg.segment.length) {
+          currentSegmentIdx = i;
+          break;
+        }
+        if (selectionStart >= seg.index + seg.segment.length) {
+          currentSegmentIdx = i;
+        }
+      }
+
+      // Find word boundaries
+      if (direction === -1) {
+        // Search backwards for word start
+        let targetIdx = currentSegmentIdx;
+
+        // If cursor is at the start of a segment, look at previous segment
+        if (selectionStart === segments[targetIdx].index && targetIdx > 0) {
+          targetIdx--;
+        }
+
+        // Skip non-word segments
+        while (targetIdx > 0 && !segments[targetIdx].isWordLike) {
+          targetIdx--;
+        }
+
+        // Return the start of the word segment
+        if (segments[targetIdx].isWordLike) {
+          return segments[targetIdx].index;
+        }
+        return 0;
+      } else {
+        // Search forwards for word end
+        let targetIdx = currentSegmentIdx;
+
+        // If we're in a word, find its end
+        if (segments[targetIdx].isWordLike) {
+          return segments[targetIdx].index + segments[targetIdx].segment.length;
+        }
+
+        // Skip non-word segments to find next word
+        while (targetIdx < segments.length && !segments[targetIdx].isWordLike) {
+          targetIdx++;
+        }
+
+        // Return the end of the next word segment
+        if (targetIdx < segments.length && segments[targetIdx].isWordLike) {
+          return segments[targetIdx].index + segments[targetIdx].segment.length;
+        }
+        return originalText.length;
+      }
+    }
+
+    /**
+     * Word boundary search using regex (fallback for older browsers)
+     * Works on original text (this.text) since selectionStart is in original text space
+     */
+    _searchWordBoundaryWithRegex(selectionStart, direction) {
+      // Use original text as an array of characters
+      const text = Array.from(this.text);
       // if we land on a space we move the cursor backwards
       // if we are searching boundary end we move the cursor backwards ONLY if we don't land on a line break
       let index = selectionStart > 0 && this._reSpace.test(text[selectionStart]) && (direction === -1 || !reNewline.test(text[selectionStart - 1])) ? selectionStart - 1 : selectionStart,
@@ -24025,8 +24831,8 @@
       });
     }
 
-    /**
-     * Commit overlay editing changes
+    /**
+     * Commit overlay editing changes
      */
     commitOverlayEdit(text) {
       // Preserve geometry to avoid nudge when layout recalculates
@@ -24037,17 +24843,17 @@
       const prevUsingBrowserWrap = this._usingBrowserWrapping;
       const hadLock = this.lockDynamicMinWidth;
       this.lockDynamicMinWidth = true;
-      const countKashida = val => val ? (val.match(/\u0640/g) || []).length : 0;
-      console.log('[OverlayCommit] pre-layout', {
-        textLength: text === null || text === void 0 ? void 0 : text.length,
-        kashidas: countKashida(text),
-        prevWidth,
-        prevMinWidth,
-        prevUsingBrowserWrap,
-        hadLock,
-        dir: this.direction,
-        align: this.textAlign
-      });
+      // console.log('[OverlayCommit] pre-layout', {
+      //   textLength: text?.length,
+      //   kashidas: countKashida(text),
+      //   prevWidth,
+      //   prevMinWidth,
+      //   prevUsingBrowserWrap,
+      //   hadLock,
+      //   dir: (this as any).direction,
+      //   align: (this as any).textAlign,
+      // });
+
       const overlayEditor = this.__overlayEditor;
       if (overlayEditor) {
         // Extract browser lines for pixel-perfect rendering
@@ -24055,7 +24861,7 @@
           const result = extractLinesFromDOM(overlayEditor.textareaElement);
           storeBrowserLines(this, result.lines);
         } catch (error) {
-          console.warn('Failed to extract browser lines:', error);
+          // console.warn('Failed to extract browser lines:', error);
         }
       }
 
@@ -24071,15 +24877,15 @@
       }
       this.dirty = true;
       this.initDimensions();
-      console.log('[OverlayCommit] post-layout', {
-        width: this.get('width'),
-        dynMinWidth: this.dynamicMinWidth,
-        usingBrowserWrap: this._usingBrowserWrapping,
-        lockDynamicMinWidth: this.lockDynamicMinWidth,
-        kashidas: countKashida(this.text),
-        left: this.left,
-        top: this.top
-      });
+      // console.log('[OverlayCommit] post-layout', {
+      //   width: this.get('width'),
+      //   dynMinWidth: (this as any).dynamicMinWidth,
+      //   usingBrowserWrap: (this as any)._usingBrowserWrapping,
+      //   lockDynamicMinWidth: (this as any).lockDynamicMinWidth,
+      //   kashidas: countKashida(this.text),
+      //   left: this.left,
+      //   top: this.top,
+      // });
       // Restore geometry after layout so the object doesn't drift
       this.set({
         left: prevLeft,
@@ -24089,13 +24895,13 @@
       this.setCoords();
       this.exitEditing();
       this.lockDynamicMinWidth = hadLock;
-      console.log('[OverlayCommit] final', {
-        width: this.get('width'),
-        dynMinWidth: this.dynamicMinWidth,
-        lockRestored: hadLock,
-        left: this.left,
-        top: this.top
-      });
+      // console.log('[OverlayCommit] final', {
+      //   width: this.get('width'),
+      //   dynMinWidth: (this as any).dynamicMinWidth,
+      //   lockRestored: hadLock,
+      //   left: this.left,
+      //   top: this.top,
+      // });
       this.fire('changed');
       this.canvas && this.canvas.requestRenderAll();
     }
@@ -24195,7 +25001,7 @@
      * @private
      */
     _updateTextarea() {
-      console.log('🔤 _updateTextarea called with fabric text:', this.text);
+      // console.log('🔤 _updateTextarea called with fabric text:', this.text);
       this.cursorOffsetCache = {};
       if (!this.hiddenTextarea) {
         return;
@@ -24204,9 +25010,9 @@
       // Sync textarea content with fabric text to prevent double-keypress issues
       const currentFabricText = this.text;
       if (this.hiddenTextarea.value !== currentFabricText) {
-        console.log('🔤 _updateTextarea: syncing textarea to fabric text');
-        console.log('🔤 _updateTextarea: textarea was:', this.hiddenTextarea.value);
-        console.log('🔤 _updateTextarea: fabric is:', currentFabricText);
+        // console.log('🔤 _updateTextarea: syncing textarea to fabric text');
+        // console.log('🔤 _updateTextarea: textarea was:', this.hiddenTextarea.value);
+        // console.log('🔤 _updateTextarea: fabric is:', currentFabricText);
         this.hiddenTextarea.value = currentFabricText;
       }
       if (!this.inCompositionMode) {
@@ -24857,34 +25663,29 @@
       }
 
       // Debug log to track the double keypress issue
-      console.log('🔤 onInput debug:', {
-        fabricText: this.text,
-        textareaValue: value,
-        fabricSelection: {
-          start: this.selectionStart,
-          end: this.selectionEnd
-        },
-        textareaSelection: {
-          start: selectionStart,
-          end: selectionEnd
-        },
-        fromPaste,
-        inComposition: this.inCompositionMode
-      });
+      // console.log('🔤 onInput debug:', {
+      //   fabricText: this.text,
+      //   textareaValue: value,
+      //   fabricSelection: { start: this.selectionStart, end: this.selectionEnd },
+      //   textareaSelection: { start: selectionStart, end: selectionEnd },
+      //   fromPaste,
+      //   inComposition: this.inCompositionMode
+      // });
 
       // Immediate sync for simple character replacement - fix for double keypress issue
       if (this.text !== value && !this.inCompositionMode) {
-        console.log('🔤 Immediate sync: fabric text differs from textarea, syncing immediately');
-        console.log('🔤 Before sync - fabric text:', this.text);
-        console.log('🔤 Before sync - textarea value:', value);
-        console.log('🔤 fromPaste:', fromPaste);
+        // console.log('🔤 Immediate sync: fabric text differs from textarea, syncing immediately');
+        // console.log('🔤 Before sync - fabric text:', this.text);
+        // console.log('🔤 Before sync - textarea value:', value);
+        // console.log('🔤 fromPaste:', fromPaste);
 
         // Clear all relevant caches that might prevent visual updates
         this.cursorOffsetCache = {};
         this._browserWrapCache = null;
         this._lastDimensionState = null;
         this._forceClearCache = true;
-        console.log('🔤 Cleared all caches');
+
+        // console.log('🔤 Cleared all caches');
 
         // Use the same logic as updateAndFire but immediately
         this.updateFromTextArea();
@@ -24897,8 +25698,9 @@
           // Remove requestRenderAll() which queues for next animation frame
           this.canvas.renderAll();
         }
-        console.log('🔤 After updateFromTextArea - fabric text:', this.text);
-        console.log('🔤 Sync complete, caches cleared, synchronous render only');
+
+        // console.log('🔤 After updateFromTextArea - fabric text:', this.text);
+        // console.log('🔤 Sync complete, caches cleared, synchronous render only');
         return;
       }
       const updateAndFire = () => {
@@ -25542,8 +26344,10 @@
       // use character left positions which are always increasing even with RTL segments
 
       for (let j = 0; j < charLength; j++) {
+        var _chars$left, _chars;
         const charStart = lineLeftOffset + chars[j].left;
-        const charEnd = lineLeftOffset + chars[j + 1].left;
+        // For last character, use its width to calculate end position
+        const charEnd = lineLeftOffset + ((_chars$left = (_chars = chars[j + 1]) === null || _chars === void 0 ? void 0 : _chars.left) !== null && _chars$left !== void 0 ? _chars$left : chars[j].left + chars[j].kernedWidth);
         const charMiddle = (charStart + charEnd) / 2;
         if (mouseOffset.x <= charMiddle) {
           charIndex = lineStartIndex + j;
@@ -25554,9 +26358,24 @@
         }
         charIndex = lineStartIndex + charLength;
       }
-      const lineCharIndex = charIndex - lineStartIndex;
-      const result = this.flipX ? lineStartIndex + (charLength - lineCharIndex) : charIndex;
-      return Math.min(result, this._text.length);
+      let lineCharIndex = charIndex - lineStartIndex;
+
+      // Handle flipX
+      if (this.flipX) {
+        lineCharIndex = charLength - lineCharIndex;
+      }
+
+      // Convert display index to original index (handles kashida)
+      const originalLineCharIndex = this._displayToOriginalIndex(lineIndex, lineCharIndex);
+
+      // Calculate original line start (sum of original line lengths before this line)
+      let originalLineStart = 0;
+      for (let i = 0; i < lineIndex; i++) {
+        const originalLineLength = this._getOriginalLineLength(i);
+        originalLineStart += originalLineLength + this.missingNewlineOffset(i);
+      }
+      const originalIndex = originalLineStart + originalLineCharIndex;
+      return Math.min(originalIndex, this.text.length);
     }
   }
 
@@ -25567,50 +26386,6 @@
    * for interactive text editing with grapheme-aware boundaries.
    */
 
-  /**
-   * Hit test a point against laid out text to find insertion position
-   */
-  function hitTest(x, y, layout, options) {
-    if (layout.lines.length === 0) {
-      return {
-        lineIndex: 0,
-        charIndex: 0,
-        graphemeIndex: 0,
-        isAtLineEnd: true,
-        isAtTextEnd: true,
-        insertionIndex: 0
-      };
-    }
-
-    // Find the line containing the y coordinate
-    const lineResult = findLineAtY(y, layout.lines);
-    const line = layout.lines[lineResult.lineIndex];
-    if (!line || line.bounds.length === 0) {
-      return {
-        lineIndex: lineResult.lineIndex,
-        charIndex: 0,
-        graphemeIndex: 0,
-        isAtLineEnd: true,
-        isAtTextEnd: lineResult.lineIndex >= layout.lines.length - 1,
-        insertionIndex: calculateInsertionIndex(lineResult.lineIndex, 0, layout)
-      };
-    }
-
-    // Find the character position within the line
-    const charResult = findCharAtX(x, line);
-
-    // Calculate total insertion index
-    const insertionIndex = calculateInsertionIndex(lineResult.lineIndex, charResult.graphemeIndex, layout);
-    return {
-      lineIndex: lineResult.lineIndex,
-      charIndex: charResult.charIndex,
-      graphemeIndex: charResult.graphemeIndex,
-      isAtLineEnd: charResult.isAtLineEnd,
-      isAtTextEnd: lineResult.lineIndex >= layout.lines.length - 1 && charResult.isAtLineEnd,
-      insertionIndex,
-      closestBound: charResult.closestBound
-    };
-  }
 
   /**
    * Get cursor rectangle for a given insertion index
@@ -25658,159 +26433,6 @@
     };
   }
 
-  // Private helper functions
-
-  /**
-   * Find which line contains the given Y coordinate
-   */
-  function findLineAtY(y, lines) {
-    var _lines;
-    let currentY = 0;
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      if (y >= currentY && y < currentY + line.height) {
-        return {
-          lineIndex: i,
-          offsetY: y - currentY
-        };
-      }
-      currentY += line.height;
-    }
-
-    // Y is past all lines - return last line
-    return {
-      lineIndex: lines.length - 1,
-      offsetY: ((_lines = lines[lines.length - 1]) === null || _lines === void 0 ? void 0 : _lines.height) || 0
-    };
-  }
-
-  /**
-   * Find character position within a line at given X coordinate
-   */
-  function findCharAtX(x, line, options) {
-    if (line.bounds.length === 0) {
-      return {
-        charIndex: 0,
-        graphemeIndex: 0,
-        isAtLineEnd: true
-      };
-    }
-
-    // Create visual ordering: sort bounds by visual X position (left-to-right)
-    // This handles mixed LTR/RTL content where visual order != logical order
-    const visualBounds = line.bounds.map((bound, logicalIndex) => ({
-      bound,
-      logicalIndex,
-      visualX: bound.x,
-      visualXEnd: bound.x + bound.kernedWidth
-    })).sort((a, b) => a.visualX - b.visualX);
-
-    // Find leftmost and rightmost visual positions
-    const leftmostX = visualBounds[0].visualX;
-    const rightmostX = visualBounds[visualBounds.length - 1].visualXEnd;
-
-    // Handle clicks before the line starts
-    if (x < leftmostX) {
-      // Find the character that appears visually first
-      const firstVisualBound = visualBounds[0];
-      return {
-        charIndex: firstVisualBound.bound.charIndex,
-        graphemeIndex: firstVisualBound.bound.graphemeIndex,
-        isAtLineEnd: false,
-        closestBound: firstVisualBound.bound
-      };
-    }
-
-    // Handle clicks after the line ends
-    if (x >= rightmostX) {
-      // Find the character that appears visually last
-      const lastVisualBound = visualBounds[visualBounds.length - 1];
-      return {
-        charIndex: lastVisualBound.bound.charIndex + 1,
-        graphemeIndex: lastVisualBound.bound.graphemeIndex + 1,
-        isAtLineEnd: true,
-        closestBound: lastVisualBound.bound
-      };
-    }
-
-    // Find the character containing the X coordinate
-    for (let i = 0; i < visualBounds.length; i++) {
-      const {
-        bound,
-        visualX,
-        visualXEnd
-      } = visualBounds[i];
-      if (x >= visualX && x < visualXEnd) {
-        // Determine if closer to start or end of character
-        const midpoint = visualX + (visualXEnd - visualX) / 2;
-        const insertBeforeChar = x < midpoint;
-        if (insertBeforeChar) {
-          return {
-            charIndex: bound.charIndex,
-            graphemeIndex: bound.graphemeIndex,
-            isAtLineEnd: false,
-            closestBound: bound
-          };
-        } else {
-          // Insert after this character
-          return {
-            charIndex: bound.charIndex + 1,
-            graphemeIndex: bound.graphemeIndex + 1,
-            isAtLineEnd: false,
-            closestBound: bound
-          };
-        }
-      }
-
-      // Check if x is in the gap between this character and the next
-      if (i < visualBounds.length - 1) {
-        const nextVisual = visualBounds[i + 1];
-        if (x >= visualXEnd && x < nextVisual.visualX) {
-          // Click in gap - place cursor after current character
-          return {
-            charIndex: bound.charIndex + 1,
-            graphemeIndex: bound.graphemeIndex + 1,
-            isAtLineEnd: false,
-            closestBound: bound
-          };
-        }
-      }
-    }
-
-    // Fallback - find closest character
-    const closestBound = visualBounds.reduce((closest, current) => {
-      const closestDistance = Math.abs((closest.visualX + closest.visualXEnd) / 2 - x);
-      const currentDistance = Math.abs((current.visualX + current.visualXEnd) / 2 - x);
-      return currentDistance < closestDistance ? current : closest;
-    });
-    return {
-      charIndex: closestBound.bound.charIndex,
-      graphemeIndex: closestBound.bound.graphemeIndex,
-      isAtLineEnd: false,
-      closestBound: closestBound.bound
-    };
-  }
-
-  /**
-   * Calculate total insertion index from line and character indices
-   */
-  function calculateInsertionIndex(lineIndex, graphemeIndex, layout) {
-    let insertionIndex = 0;
-
-    // Add characters from all previous lines
-    for (let i = 0; i < lineIndex && i < layout.lines.length; i++) {
-      insertionIndex += layout.lines[i].graphemes.length;
-      // Add newline character (except for last line)
-      if (i < layout.lines.length - 1) {
-        insertionIndex += 1; // \n character
-      }
-    }
-
-    // Add characters within current line
-    insertionIndex += graphemeIndex;
-    return insertionIndex;
-  }
-
   /**
    * Find line and grapheme position from insertion index
    */
@@ -26024,6 +26646,20 @@
         ...IText.ownDefaults,
         ...options
       });
+      /**
+       * Index where text selection starts (or where cursor is when there is no selection)
+       * @type Number
+       */
+      /**
+       * Index where text selection ends
+       * @type Number
+       */
+      /**
+       * Cache for visual positions per line to ensure consistency
+       * during selection operations
+       * @private
+       */
+      _defineProperty(this, "_visualPositionsCache", new Map());
       this.initBehavior();
     }
 
@@ -26147,6 +26783,8 @@
       // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor
       // the correct position but not at every cursor animation.
       this.cursorOffsetCache = {};
+      // Clear visual positions cache on full render since dimensions may have changed
+      this._clearVisualPositionsCache();
       this.renderCursorOrSelection();
     }
 
@@ -26174,6 +26812,9 @@
       if (!ctx) {
         return;
       }
+      // Clear cache to ensure fresh cursor position calculation
+      // This is important during selection drag when positions change frequently
+      this.cursorOffsetCache = {};
       const boundaries = this._getCursorBoundaries();
       const ancestors = this.findAncestorsWithClipPath();
       const hasAncestorsWithClipping = ancestors.length > 0;
@@ -26251,12 +26892,8 @@
     _getCursorBoundaries() {
       let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
       let skipCaching = arguments.length > 1 ? arguments[1] : undefined;
-      // Use advanced cursor positioning if available
-      if (this.enableAdvancedLayout) {
-        return this._getCursorBoundariesAdvanced(index);
-      }
-
-      // Fall back to original method
+      // Always use original method which uses __charBounds directly
+      // and has proper RTL handling built-in
       return this._getCursorBoundariesOriginal(index, skipCaching);
     }
 
@@ -26295,19 +26932,261 @@
     }
 
     /**
-     * Enhanced selection start from pointer using BiDi-aware hit testing
-     * @override
+     * Override selection to use measureText-based visual positions
+     * This ensures hit testing matches actual browser BiDi rendering
      */
     getSelectionStartFromPointer(e) {
-      if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
-        return super.getSelectionStartFromPointer(e);
+      // Get mouse position in object-local coordinates (origin at center)
+      const scenePoint = this.canvas.getScenePoint(e);
+      const localPoint = scenePoint.transform(invertTransform(this.calcTransformMatrix()));
+
+      // Convert to top-left origin coordinates
+      const mouseX = localPoint.x + this.width / 2;
+      const mouseY = localPoint.y + this.height / 2;
+
+      // Find the line based on Y position
+      let height = 0,
+        lineIndex = 0;
+      for (let i = 0; i < this._textLines.length; i++) {
+        const lineHeight = this.getHeightOfLine(i);
+        if (mouseY >= height && mouseY < height + lineHeight) {
+          lineIndex = i;
+          break;
+        }
+        height += lineHeight;
+        if (i === this._textLines.length - 1) {
+          lineIndex = i;
+        }
       }
-      const mouseOffset = this.canvas.getScenePoint(e).transform(invertTransform(this.calcTransformMatrix())).add(new Point(-this._getLeftOffset(), -this._getTopOffset()));
 
-      // Use BiDi-aware hit testing instead of naive RTL coordinate flipping
-      const layout = this._layoutTextAdvanced();
-      const hitResult = hitTest(mouseOffset.x, mouseOffset.y, layout, this._getAdvancedLayoutOptions());
-      return Math.min(hitResult.charIndex, this._text.length);
+      // Calculate line start index using ORIGINAL line lengths (without tatweels)
+      // This ensures selection indices refer to the original text, not the display text
+      let lineStartIndex = 0;
+      for (let i = 0; i < lineIndex; i++) {
+        const origLen = this._getOriginalLineLength(i);
+        const newlineOffset = this.missingNewlineOffset(i);
+        console.log(`📍 Line ${i}: origLen=${origLen}, displayLen=${this._textLines[i].length}, tatweels=${this._getTatweelCountForLine(i)}, newlineOffset=${newlineOffset}`);
+        lineStartIndex += origLen + newlineOffset;
+      }
+      console.log(`📍 Click on line ${lineIndex}, lineStartIndex=${lineStartIndex}`);
+      const line = this._textLines[lineIndex];
+      const lineText = line.join('');
+      const displayCharLength = line.length;
+      const originalCharLength = this._getOriginalLineLength(lineIndex);
+      if (displayCharLength === 0) {
+        return lineStartIndex;
+      }
+
+      // Use measureText to get actual visual character positions
+      // This matches exactly how the canvas renders BiDi text
+      const visualPositions = this._measureVisualPositions(lineIndex, lineText);
+
+      // Calculate line offset based on alignment
+      const lineWidth = this.getLineWidth(lineIndex);
+      let lineStartX = 0;
+      if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+        lineStartX = (this.width - lineWidth) / 2;
+      } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+        lineStartX = this.width - lineWidth;
+      } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+        // For RTL with left/justify, text starts from right
+        lineStartX = this.width - lineWidth;
+      }
+
+      // Find which character was clicked based on visual position
+      const clickX = mouseX - lineStartX;
+
+      // Sort positions by visual X for hit testing
+      const sortedPositions = [...visualPositions].sort((a, b) => a.visualX - b.visualX);
+
+      // Handle click before first character
+      if (sortedPositions.length > 0 && clickX < sortedPositions[0].visualX) {
+        // Before first visual character - cursor at visual left edge
+        // For RTL base direction, this means logical end of line
+        return this.direction === 'rtl' ? lineStartIndex + originalCharLength : lineStartIndex;
+      }
+
+      // Handle click after last character
+      if (sortedPositions.length > 0) {
+        const lastPos = sortedPositions[sortedPositions.length - 1];
+        if (clickX > lastPos.visualX + lastPos.width) {
+          // After last visual character - cursor at visual right edge
+          // For RTL base direction, this means logical start of line
+          return this.direction === 'rtl' ? lineStartIndex : lineStartIndex + originalCharLength;
+        }
+      }
+
+      // Find the character at click position
+      for (let i = 0; i < sortedPositions.length; i++) {
+        const pos = sortedPositions[i];
+        const charEnd = pos.visualX + pos.width;
+        if (clickX >= pos.visualX && clickX <= charEnd) {
+          // Convert display index to original index
+          // This also handles tatweels - they map to the character they extend
+          const originalCharIndex = this._displayToOriginalIndex(lineIndex, pos.logicalIndex);
+
+          // Check if this is a tatweel - if so, treat click as clicking on the extended character
+          const isTatweel = this._isTatweelAtDisplayIndex(lineIndex, pos.logicalIndex);
+          console.log(`📍 Hit char: displayIdx=${pos.logicalIndex}, origIdx=${originalCharIndex}, isTatweel=${isTatweel}, char="${this._textLines[lineIndex][pos.logicalIndex]}"`);
+          const charMiddle = pos.visualX + pos.width / 2;
+          const clickedLeftHalf = clickX <= charMiddle;
+
+          // For tatweels, clicking anywhere on it should place cursor after the extended character
+          if (isTatweel) {
+            // Tatweel extends the character before it, so cursor goes after that character
+            // originalCharIndex from _displayToOriginalIndex already maps tatweel to char+1
+            const result = lineStartIndex + originalCharIndex;
+            console.log(`📍 Tatweel click result: ${result}`);
+            return result;
+          }
+
+          // For RTL characters: left visual half means cursor AFTER (higher logical index)
+          // For LTR characters: left visual half means cursor BEFORE (lower logical index)
+          if (pos.isRtl) {
+            // RTL character
+            const result = lineStartIndex + (clickedLeftHalf ? originalCharIndex + 1 : originalCharIndex);
+            console.log(`📍 RTL char result: ${result} (clickedLeftHalf=${clickedLeftHalf})`);
+            return result;
+          } else {
+            // LTR character
+            const result = lineStartIndex + (clickedLeftHalf ? originalCharIndex : originalCharIndex + 1);
+            console.log(`📍 LTR char result: ${result} (clickedLeftHalf=${clickedLeftHalf})`);
+            return result;
+          }
+        }
+      }
+
+      // console.log(`📍 No match, returning end: ${lineStartIndex + originalCharLength}`);
+      return lineStartIndex + originalCharLength;
+    }
+
+    /**
+     * Clear the visual positions cache
+     * Should be called when text content or dimensions change
+     */
+    _clearVisualPositionsCache() {
+      this._visualPositionsCache.clear();
+    }
+
+    /**
+     * Measure visual character positions for hit testing using BiDi analysis
+     * This properly handles mixed RTL/LTR text by analyzing BiDi runs
+     * Results are cached per line for consistency during selection operations
+     */
+    _measureVisualPositions(lineIndex, lineText) {
+      // Check cache first
+      if (this._visualPositionsCache.has(lineIndex)) {
+        return this._visualPositionsCache.get(lineIndex);
+      }
+      const line = this._textLines[lineIndex];
+      const positions = [];
+      const chars = this.__charBounds[lineIndex];
+      if (!chars || chars.length === 0) {
+        this._visualPositionsCache.set(lineIndex, positions);
+        return positions;
+      }
+
+      // For LTR direction, use logical positions directly
+      if (this.direction !== 'rtl') {
+        for (let i = 0; i < line.length; i++) {
+          var _chars$i, _chars$i2;
+          positions.push({
+            logicalIndex: i,
+            visualX: ((_chars$i = chars[i]) === null || _chars$i === void 0 ? void 0 : _chars$i.left) || 0,
+            width: ((_chars$i2 = chars[i]) === null || _chars$i2 === void 0 ? void 0 : _chars$i2.kernedWidth) || 0,
+            isRtl: false
+          });
+        }
+        this._visualPositionsCache.set(lineIndex, positions);
+        return positions;
+      }
+
+      // For RTL, use BiDi analysis to determine visual positions
+      const runs = analyzeBiDi(lineText, 'rtl');
+
+      // Build mapping from string position to grapheme index
+      // This is needed because analyzeBiDi works on string positions (code points)
+      // but we need grapheme indices for charBounds
+      const stringPosToGrapheme = [];
+      let strPos = 0;
+      for (let gi = 0; gi < line.length; gi++) {
+        const grapheme = line[gi];
+        for (let j = 0; j < grapheme.length; j++) {
+          stringPosToGrapheme[strPos + j] = gi;
+        }
+        strPos += grapheme.length;
+      }
+
+      // Calculate width for each run
+
+      const runInfos = [];
+      for (const run of runs) {
+        const runChars = [];
+        let runWidth = 0;
+        const seenGraphemes = new Set();
+
+        // Map string positions in this run to grapheme indices
+        for (let sp = run.start; sp < run.end; sp++) {
+          const gi = stringPosToGrapheme[sp];
+          if (gi !== undefined && !seenGraphemes.has(gi)) {
+            var _chars$gi;
+            seenGraphemes.add(gi);
+            runChars.push(gi);
+            runWidth += ((_chars$gi = chars[gi]) === null || _chars$gi === void 0 ? void 0 : _chars$gi.kernedWidth) || 0;
+          }
+        }
+        runInfos.push({
+          run,
+          width: runWidth,
+          charIndices: runChars
+        });
+      }
+
+      // For RTL base direction, runs are displayed right-to-left
+      // So first run appears on the right, last run on the left
+      const totalWidth = this.getLineWidth(lineIndex);
+      let visualX = totalWidth; // Start from right edge
+
+      for (const runInfo of runInfos) {
+        visualX -= runInfo.width; // Move left by run width
+
+        const isRtlRun = runInfo.run.direction === 'rtl';
+        if (isRtlRun) {
+          // RTL run: characters displayed right-to-left within run
+          // First char of run at visual right of run, last at visual left
+          let charX = visualX + runInfo.width;
+          for (const idx of runInfo.charIndices) {
+            var _chars$idx;
+            const charWidth = ((_chars$idx = chars[idx]) === null || _chars$idx === void 0 ? void 0 : _chars$idx.kernedWidth) || 0;
+            charX -= charWidth;
+            positions.push({
+              logicalIndex: idx,
+              visualX: charX,
+              width: charWidth,
+              isRtl: true
+            });
+          }
+        } else {
+          // LTR run: characters displayed left-to-right within run
+          // First char of run at visual left of run, last at visual right
+          let charX = visualX;
+          for (const idx of runInfo.charIndices) {
+            var _chars$idx2;
+            const charWidth = ((_chars$idx2 = chars[idx]) === null || _chars$idx2 === void 0 ? void 0 : _chars$idx2.kernedWidth) || 0;
+            positions.push({
+              logicalIndex: idx,
+              visualX: charX,
+              width: charWidth,
+              isRtl: false
+            });
+            charX += charWidth;
+          }
+        }
+      }
+
+      // Cache the result
+      this._visualPositionsCache.set(lineIndex, positions);
+      return positions;
     }
 
     /**
@@ -26327,40 +27206,140 @@
     }
 
     /**
-     * Calculates cursor left/top offset relative to instance's center point
+     * Calculates cursor left/top offset relative to _getLeftOffset()
+     * Uses visual positions for BiDi text support
+     * Handles kashida by converting original indices to display indices
      * @private
-     * @param {number} index index from start
+     * @param {number} index index from start (in original text space, without tatweels)
      */
     __getCursorBoundariesOffsets(index) {
-      let topOffset = 0,
-        leftOffset = 0;
-      const {
-        charIndex,
-        lineIndex
-      } = this.get2DCursorLocation(index);
+      let topOffset = 0;
+
+      // Find line index and original char index using original line lengths
+      let lineIndex = 0;
+      let originalCharIndex = index;
+      for (let i = 0; i < this._textLines.length; i++) {
+        const originalLineLength = this._getOriginalLineLength(i);
+        if (originalCharIndex <= originalLineLength) {
+          lineIndex = i;
+          break;
+        }
+        originalCharIndex -= originalLineLength + this.missingNewlineOffset(i);
+        lineIndex = i + 1;
+      }
+
+      // Clamp lineIndex to valid range
+      if (lineIndex >= this._textLines.length) {
+        lineIndex = this._textLines.length - 1;
+        originalCharIndex = this._getOriginalLineLength(lineIndex);
+      }
       for (let i = 0; i < lineIndex; i++) {
         topOffset += this.getHeightOfLine(i);
       }
-      const lineLeftOffset = this._getLineLeftOffset(lineIndex);
-      const bound = this.__charBounds[lineIndex][charIndex];
-      bound && (leftOffset = bound.left);
-      if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
-        leftOffset -= this._getWidthOfCharSpacing();
+
+      // Convert original char index to display char index for visual lookup
+      const displayCharIndex = this._originalToDisplayIndex(lineIndex, originalCharIndex);
+
+      // Get visual positions for cursor placement
+      const lineText = this._textLines[lineIndex].join('');
+      const visualPositions = this._measureVisualPositions(lineIndex, lineText);
+      const lineWidth = this.getLineWidth(lineIndex);
+      this._textLines[lineIndex].length;
+      const originalLineLength = this._getOriginalLineLength(lineIndex);
+
+      // Find visual X position for cursor (0 to lineWidth, from visual left)
+      let visualX = 0;
+      if (visualPositions.length === 0) {
+        // Fallback for empty line
+        return {
+          top: topOffset,
+          left: 0
+        };
       }
-      const boundaries = {
-        top: topOffset,
-        left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0)
-      };
-      if (this.direction === 'rtl') {
-        if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
-          boundaries.left *= -1;
-        } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
-          boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
-        } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
-          boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
+      if (originalCharIndex === 0) {
+        // Cursor at logical start
+        // For RTL base direction, logical start is at visual right
+        if (this.direction === 'rtl') {
+          visualX = lineWidth; // Right edge
+        } else {
+          visualX = 0; // Left edge
+        }
+      } else if (originalCharIndex >= originalLineLength) {
+        // Cursor at logical end
+        // For RTL base direction, logical end is at visual left
+        if (this.direction === 'rtl') {
+          visualX = 0; // Left edge
+        } else {
+          visualX = lineWidth; // Right edge
+        }
+      } else {
+        // Cursor between characters - find visual position of character at displayCharIndex
+        const charPos = visualPositions.find(p => p.logicalIndex === displayCharIndex);
+        if (charPos) {
+          // Use character's direction to determine cursor position
+          // For RTL char: cursor "before" it appears at its right visual edge
+          // For LTR char: cursor "before" it appears at its left visual edge
+          if (charPos.isRtl) {
+            visualX = charPos.visualX + charPos.width;
+          } else {
+            visualX = charPos.visualX;
+          }
+        } else {
+          // Fallback - try the previous character in display space
+          const prevDisplayIndex = displayCharIndex > 0 ? displayCharIndex - 1 : 0;
+          const prevCharPos = visualPositions.find(p => p.logicalIndex === prevDisplayIndex);
+          if (prevCharPos) {
+            // Cursor after previous character
+            if (prevCharPos.isRtl) {
+              visualX = prevCharPos.visualX;
+            } else {
+              visualX = prevCharPos.visualX + prevCharPos.width;
+            }
+          } else {
+            // Ultimate fallback
+            const bound = this.__charBounds[lineIndex][displayCharIndex];
+            visualX = (bound === null || bound === void 0 ? void 0 : bound.left) || 0;
+          }
         }
       }
-      return boundaries;
+
+      // Calculate alignment offset (how much line is shifted from left edge)
+      let alignOffset = 0;
+      if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+        alignOffset = (this.width - lineWidth) / 2;
+      } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+        alignOffset = this.width - lineWidth;
+      } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+        alignOffset = this.width - lineWidth;
+      }
+
+      // The returned left value is added to _getLeftOffset() in _getCursorBoundaries
+      // _getLeftOffset() returns -width/2 for LTR, +width/2 for RTL
+      // Final cursor X = _getLeftOffset() + leftOffset
+      //
+      // For LTR: cursor X = -width/2 + (alignOffset + visualX)
+      // For RTL: cursor X = +width/2 + leftOffset
+      //          We want cursor at: -width/2 + alignOffset + visualX
+      //          So leftOffset = -width/2 + alignOffset + visualX - width/2 = alignOffset + visualX - width
+
+      let leftOffset;
+      if (this.direction === 'rtl') {
+        // For RTL, _getLeftOffset() = +width/2
+        // We want final X = -width/2 + alignOffset + visualX
+        // So: +width/2 + leftOffset = -width/2 + alignOffset + visualX
+        // leftOffset = -width + alignOffset + visualX
+        leftOffset = -this.width + alignOffset + visualX;
+      } else {
+        // For LTR, _getLeftOffset() = -width/2
+        // We want final X = -width/2 + alignOffset + visualX
+        // So: -width/2 + leftOffset = -width/2 + alignOffset + visualX
+        // leftOffset = alignOffset + visualX
+        leftOffset = alignOffset + visualX;
+      }
+      return {
+        top: topOffset,
+        left: leftOffset
+      };
     }
 
     /**
@@ -26452,51 +27431,119 @@
     }
 
     /**
-     * Renders text selection
+     * Renders text selection using visual positions for BiDi support
+     * Handles kashida by converting original indices to display indices
      * @private
-     * @param {{ selectionStart: number, selectionEnd: number }} selection
+     * @param {{ selectionStart: number, selectionEnd: number }} selection (in original text space)
      * @param {Object} boundaries Object with left/top/leftOffset/topOffset
      * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     _renderSelection(ctx, selection, boundaries) {
       const selectionStart = selection.selectionStart,
         selectionEnd = selection.selectionEnd,
-        isJustify = this.textAlign.includes(JUSTIFY),
-        start = this.get2DCursorLocation(selectionStart),
-        end = this.get2DCursorLocation(selectionEnd),
-        startLine = start.lineIndex,
-        endLine = end.lineIndex,
-        startChar = start.charIndex < 0 ? 0 : start.charIndex,
-        endChar = end.charIndex < 0 ? 0 : end.charIndex;
+        isJustify = this.textAlign.includes(JUSTIFY);
+
+      // Convert selection indices to line/char using original text space
+      // This handles kashida properly since selection indices don't include tatweels
+      let startLine = 0,
+        endLine = 0;
+      let originalStartChar = selectionStart,
+        originalEndChar = selectionEnd;
+
+      // Find start line and char
+      let charCount = 0;
+      for (let i = 0; i < this._textLines.length; i++) {
+        const originalLineLength = this._getOriginalLineLength(i);
+        if (charCount + originalLineLength >= selectionStart) {
+          startLine = i;
+          originalStartChar = selectionStart - charCount;
+          break;
+        }
+        charCount += originalLineLength + this.missingNewlineOffset(i);
+      }
+
+      // Find end line and char
+      charCount = 0;
+      for (let i = 0; i < this._textLines.length; i++) {
+        const originalLineLength = this._getOriginalLineLength(i);
+        if (charCount + originalLineLength >= selectionEnd) {
+          endLine = i;
+          originalEndChar = selectionEnd - charCount;
+          break;
+        }
+        charCount += originalLineLength + this.missingNewlineOffset(i);
+        if (i === this._textLines.length - 1) {
+          endLine = i;
+          originalEndChar = originalLineLength;
+        }
+      }
       for (let i = startLine; i <= endLine; i++) {
-        const lineOffset = this._getLineLeftOffset(i) || 0;
         let lineHeight = this.getHeightOfLine(i),
-          realLineHeight = 0,
-          boxStart = 0,
-          boxEnd = 0;
+          realLineHeight = 0;
 
-        // Simplified selection rendering that works for both LTR and RTL
+        // Get visual positions for this line
+        const lineText = this._textLines[i].join('');
+        const visualPositions = this._measureVisualPositions(i, lineText);
+        this._textLines[i].length;
+        const originalLineLength = this._getOriginalLineLength(i);
+
+        // Calculate selection bounds in original space, then convert to display
+        let originalLineStartChar = 0;
+        let originalLineEndChar = originalLineLength;
         if (i === startLine) {
-          boxStart = this.__charBounds[startLine][startChar].left;
+          originalLineStartChar = originalStartChar;
+        }
+        if (i === endLine) {
+          originalLineEndChar = originalEndChar;
+        }
+
+        // Convert original char indices to display indices for visual lookup
+        const displayLineStartChar = this._originalToDisplayIndex(i, originalLineStartChar);
+        const displayLineEndChar = this._originalToDisplayIndex(i, originalLineEndChar);
+
+        // Get visual X positions for selection range
+        let minVisualX = Infinity;
+        let maxVisualX = -Infinity;
+        for (const pos of visualPositions) {
+          if (pos.logicalIndex >= displayLineStartChar && pos.logicalIndex < displayLineEndChar) {
+            minVisualX = Math.min(minVisualX, pos.visualX);
+            maxVisualX = Math.max(maxVisualX, pos.visualX + pos.width);
+          }
         }
-        if (i >= startLine && i < endLine) {
-          boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5;
-        } else if (i === endLine) {
-          if (endChar === 0) {
-            boxEnd = this.__charBounds[endLine][endChar].left;
+
+        // Handle edge cases
+        if (minVisualX === Infinity || maxVisualX === -Infinity) {
+          if (i >= startLine && i < endLine) {
+            // Full line selection
+            minVisualX = 0;
+            maxVisualX = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5;
           } else {
-            const charSpacing = this._getWidthOfCharSpacing();
-            boxEnd = this.__charBounds[endLine][endChar - 1].left + this.__charBounds[endLine][endChar - 1].width - charSpacing;
+            continue; // No selection on this line
           }
         }
         realLineHeight = lineHeight;
         if (this.lineHeight < 1 || i === endLine && this.lineHeight > 1) {
           lineHeight /= this.lineHeight;
         }
-        let drawStart = boundaries.left + lineOffset + boxStart,
-          drawHeight = lineHeight,
-          extraTop = 0;
-        const drawWidth = boxEnd - boxStart;
+
+        // Calculate draw position
+        // Visual positions are relative to line start (0 to lineWidth)
+        // Need to add alignment offset
+        const lineWidth = this.getLineWidth(i);
+        let alignOffset = 0;
+        if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+          alignOffset = (this.width - lineWidth) / 2;
+        } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+          alignOffset = this.width - lineWidth;
+        } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+          alignOffset = this.width - lineWidth;
+        }
+
+        // Draw from center origin (-width/2 to width/2)
+        const drawStart = -this.width / 2 + alignOffset + minVisualX;
+        const drawWidth = maxVisualX - minVisualX;
+        let drawHeight = lineHeight;
+        let extraTop = 0;
         if (this.inCompositionMode) {
           ctx.fillStyle = this.compositionColor || 'black';
           drawHeight = 1;
@@ -26504,15 +27551,6 @@
         } else {
           ctx.fillStyle = this.selectionColor;
         }
-        if (this.direction === 'rtl') {
-          if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
-            drawStart = this.width - drawStart - drawWidth;
-          } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
-            drawStart = boundaries.left + lineOffset - boxEnd;
-          } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
-            drawStart = boundaries.left + lineOffset - boxEnd;
-          }
-        }
         ctx.fillRect(drawStart, boundaries.top + boundaries.topOffset + extraTop, drawWidth, drawHeight);
         boundaries.topOffset += realLineHeight;
       }
@@ -26561,53 +27599,6 @@
       super.dispose();
     }
   }
-  /**
-   * Index where text selection starts (or where cursor is when there is no selection)
-   * @type Number
-   */
-  /**
-   * Index where text selection ends
-   * @type Number
-   */
-  /**
-   * Color of text selection
-   * @type String
-   */
-  /**
-   * Indicates whether text is in editing mode
-   * @type Boolean
-   */
-  /**
-   * Indicates whether a text can be edited
-   * @type Boolean
-   */
-  /**
-   * Border color of text object while it's in editing mode
-   * @type String
-   */
-  /**
-   * Width of cursor (in px)
-   * @type Number
-   */
-  /**
-   * Color of text cursor color in editing mode.
-   * if not set (default) will take color from the text.
-   * if set to a color value that fabric can understand, it will
-   * be used instead of the color of the text at the current position.
-   * @type String
-   */
-  /**
-   * Delay between cursor blink (in ms)
-   * @type Number
-   */
-  /**
-   * Duration of cursor fade in (in ms)
-   * @type Number
-   */
-  /**
-   * Indicates whether internal text char widths can be cached
-   * @type Boolean
-   */
   _defineProperty(IText, "ownDefaults", iTextDefaultValues);
   _defineProperty(IText, "type", 'IText');
   classRegistry.setClass(IText);
@@ -26678,7 +27669,7 @@
       }
 
       // Skip if nothing changed
-      const currentState = `${this.text}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
+      const currentState = `${this.text}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}|${this.kashida}`;
       if (this._lastDimensionState === currentState && this._textLines && this._textLines.length > 0) {
         return;
       }
@@ -26777,12 +27768,18 @@
       }
 
       // Use new layout engine
+      // When kashida is enabled, don't let layout engine apply justify - we'll handle it with kashida
+      const useKashidaJustify = this.kashida !== 'none' && this.textAlign.includes(JUSTIFY);
+      const effectiveAlign = useKashidaJustify ? this.direction === 'rtl' ? 'right' : 'left' // Natural alignment, kashida will justify
+      : this._mapTextAlignToAlign(this.textAlign);
       const layout = layoutText({
         text: this.text,
         width: this.width,
-        height: this.height,
+        // Don't pass height constraint to allow vertical auto-expansion
+        // Only pass height if explicitly set to constrain (e.g., for ellipsis)
+        height: this.ellipsis ? this.height : undefined,
         wrap: this.wrap || 'word',
-        align: this._mapTextAlignToAlign(this.textAlign),
+        align: effectiveAlign,
         ellipsis: this.ellipsis || false,
         fontSize: this.fontSize,
         lineHeight: this.lineHeight,
@@ -26820,9 +27817,264 @@
 
       // Generate style map for compatibility
       this._styleMap = this._generateStyleMapFromLayout(layout);
+
+      // Apply kashida for justified text in advanced layout mode
+      if (this.textAlign.includes(JUSTIFY) && this.kashida !== 'none') {
+        this._applyKashidaToLayout();
+      }
       this.dirty = true;
     }
 
+    /**
+     * Apply kashida (tatweel) characters to layout for Arabic text justification.
+     * This method INSERTS actual tatweel characters into the text lines.
+     * @private
+     */
+    _applyKashidaToLayout() {
+      if (!this._textLines || !this.__charBounds) {
+        return;
+      }
+
+      // Clear visual positions cache - it becomes stale when kashida is applied
+      // Check if cache exists (it's initialized in IText constructor which runs after this during construction)
+      if (this._visualPositionsCache) {
+        this._clearVisualPositionsCache();
+      }
+      const kashidaRatios = {
+        none: 0,
+        short: 0.25,
+        medium: 0.5,
+        long: 0.75,
+        stylistic: 1.0
+      };
+      const kashidaRatio = kashidaRatios[this.kashida] || 0;
+      if (kashidaRatio === 0) {
+        return;
+      }
+
+      // Calculate tatweel width once
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+      ctx.font = this._getFontDeclaration();
+      const tatweelWidth = ctx.measureText(ARABIC_TATWEEL).width;
+      if (tatweelWidth <= 0) {
+        return;
+      }
+
+      // Reset kashida info
+      this.__kashidaInfo = [];
+      const totalLines = this._textLines.length;
+      for (let lineIndex = 0; lineIndex < totalLines; lineIndex++) {
+        this.__kashidaInfo[lineIndex] = [];
+        const line = this._textLines[lineIndex];
+        if (!this.__charBounds || !this.__charBounds[lineIndex]) {
+          continue;
+        }
+
+        // Don't apply kashida to the last line
+        const isLastLine = lineIndex === totalLines - 1;
+        if (isLastLine) {
+          continue;
+        }
+        const lineBounds = this.__charBounds[lineIndex];
+        const lastBound = lineBounds[lineBounds.length - 1];
+
+        // Calculate current line width
+        const currentLineWidth = lastBound ? lastBound.left + lastBound.kernedWidth : 0;
+        const totalExtraSpace = this.width - currentLineWidth;
+
+        // Only apply kashida if there's significant extra space to fill
+        if (totalExtraSpace <= 2) {
+          continue;
+        }
+
+        // Find kashida points
+        const kashidaPoints = findKashidaPoints(line);
+        if (kashidaPoints.length === 0) {
+          continue;
+        }
+
+        // Calculate kashida space
+        const kashidaSpace = totalExtraSpace * kashidaRatio;
+
+        // Calculate how many tatweels can fit
+        const totalTatweels = Math.floor(kashidaSpace / tatweelWidth);
+        if (totalTatweels === 0) {
+          continue;
+        }
+
+        // Limit kashida points
+        const maxKashidaPoints = Math.min(kashidaPoints.length, totalTatweels);
+        const usedKashidaPoints = kashidaPoints.slice(0, maxKashidaPoints);
+
+        // Distribute tatweels evenly
+        const tatweelsPerPoint = Math.floor(totalTatweels / maxKashidaPoints);
+        const extraTatweels = totalTatweels % maxKashidaPoints;
+
+        // console.log(`=== Inserting Kashida into line ${lineIndex} ===`);
+        // console.log(`  totalTatweels: ${totalTatweels}, usedPoints: ${usedKashidaPoints.length}`);
+
+        // Sort by charIndex descending so we insert from the end (prevents index shifting issues)
+        const sortedPoints = [...usedKashidaPoints].sort((a, b) => b.charIndex - a.charIndex);
+
+        // Create new line with tatweels inserted
+        const newLine = [...line];
+        for (let i = 0; i < sortedPoints.length; i++) {
+          const point = sortedPoints[i];
+          const originalIndex = usedKashidaPoints.indexOf(point);
+          const count = tatweelsPerPoint + (originalIndex < extraTatweels ? 1 : 0);
+          if (count > 0) {
+            // Insert tatweels AFTER the character at charIndex
+            const tatweels = Array(count).fill(ARABIC_TATWEEL);
+            newLine.splice(point.charIndex + 1, 0, ...tatweels);
+            // console.log(`  Inserted ${count} tatweels after char ${point.charIndex}`);
+
+            // Store kashida info for index conversion
+            this.__kashidaInfo[lineIndex].push({
+              charIndex: point.charIndex,
+              width: count * tatweelWidth,
+              tatweelCount: count
+            });
+          }
+        }
+
+        // Update _textLines with the new line containing tatweels
+        this._textLines[lineIndex] = newLine;
+
+        // Update textLines (string version)
+        if (this.textLines) {
+          this.textLines[lineIndex] = newLine.join('');
+        }
+
+        // Clear and recalculate charBounds for this line
+        this.__charBounds[lineIndex] = [];
+        this.__lineWidths[lineIndex] = undefined;
+        this._measureLine(lineIndex);
+
+        // Now expand spaces to fill any remaining gap
+        let newLineBounds = this.__charBounds[lineIndex];
+        if (newLineBounds && newLineBounds.length > 0) {
+          let newLastBound = newLineBounds[newLineBounds.length - 1];
+          let newLineWidth = newLastBound ? newLastBound.left + newLastBound.kernedWidth : 0;
+          let remainingGap = this.width - newLineWidth;
+          if (remainingGap > 0.5) {
+            // Count spaces in the new line
+            let spaceCount = 0;
+            for (let i = 0; i < newLine.length; i++) {
+              if (/\s/.test(newLine[i])) {
+                spaceCount++;
+              }
+            }
+            if (spaceCount > 0) {
+              const extraPerSpace = remainingGap / spaceCount;
+              let accumulatedExtra = 0;
+
+              // Expand space widths AND update left positions for subsequent chars
+              for (let i = 0; i < newLineBounds.length; i++) {
+                const bound = newLineBounds[i];
+                if (!bound) continue;
+
+                // Update left position to account for previous space expansions
+                bound.left += accumulatedExtra;
+
+                // If this is a space, expand it
+                if (/\s/.test(newLine[i])) {
+                  bound.width += extraPerSpace;
+                  bound.kernedWidth += extraPerSpace;
+                  accumulatedExtra += extraPerSpace;
+                }
+              }
+              // Update the extra entry at the end (cursor position)
+              if (newLineBounds[newLine.length]) {
+                newLineBounds[newLine.length].left += accumulatedExtra;
+              }
+
+              // Recalculate remaining gap after space expansion
+              newLastBound = newLineBounds[newLineBounds.length - 1];
+              newLineWidth = newLastBound ? newLastBound.left + newLastBound.kernedWidth : 0;
+              remainingGap = this.width - newLineWidth;
+            }
+          }
+
+          // If there's still a gap after space expansion, distribute it across all kashida points
+          if (remainingGap > 0.5 && this.__kashidaInfo[lineIndex].length > 0) {
+            const kashidaPointCount = this.__kashidaInfo[lineIndex].length;
+            const extraPerKashida = remainingGap / kashidaPointCount;
+
+            // Find kashida positions in newLine and expand their widths
+            let kashidaIndex = 0;
+            let accumulatedExtra = 0;
+            for (let i = 0; i < newLineBounds.length; i++) {
+              const bound = newLineBounds[i];
+              if (!bound) continue;
+
+              // Update left position for accumulated expansion
+              bound.left += accumulatedExtra;
+
+              // Check if this is a tatweel character
+              if (newLine[i] === ARABIC_TATWEEL) {
+                var _this$__kashidaInfo$l;
+                // Distribute extra width among tatweels
+                const extraForThis = extraPerKashida / (((_this$__kashidaInfo$l = this.__kashidaInfo[lineIndex][kashidaIndex]) === null || _this$__kashidaInfo$l === void 0 ? void 0 : _this$__kashidaInfo$l.tatweelCount) || 1);
+                bound.width += extraForThis;
+                bound.kernedWidth += extraForThis;
+                accumulatedExtra += extraForThis;
+
+                // Move to next kashida info when we've passed this group
+                const currentKashidaInfo = this.__kashidaInfo[lineIndex][kashidaIndex];
+                if (currentKashidaInfo && i > 0) {
+                  // Check if next char is not tatweel - means we're done with this group
+                  if (i + 1 >= newLine.length || newLine[i + 1] !== ARABIC_TATWEEL) {
+                    kashidaIndex++;
+                  }
+                }
+              }
+            }
+
+            // Update the extra entry at the end
+            if (newLineBounds[newLine.length]) {
+              newLineBounds[newLine.length].left += accumulatedExtra;
+            }
+          }
+        }
+
+        // Set line width to textbox width (for justified lines)
+        this.__lineWidths[lineIndex] = this.width;
+
+        // console.log(`  New line length: ${newLine.length}, text: ${newLine.join('')}`);
+      }
+
+      // For justified lines with kashida, line width should equal textbox width
+      // Only set undefined widths (non-justified lines without kashida)
+      for (let i = 0; i < this._textLines.length; i++) {
+        if (this.__lineWidths[i] === undefined && this.__charBounds[i]) {
+          const bounds = this.__charBounds[i];
+          const lastBound = bounds[bounds.length - 1];
+          if (lastBound) {
+            this.__lineWidths[i] = lastBound.left + lastBound.kernedWidth;
+          }
+        }
+      }
+
+      // Update _text to match the new _textLines (required for editing)
+      this._text = this._textLines.flat();
+
+      // DON'T update this.text - keep the original text intact
+      // The tatweels are in _textLines and _text for rendering purposes only
+
+      this._justifyApplied = true;
+
+      // Debug log final kashida state
+      // console.log('=== _applyKashidaToLayout END ===');
+      // console.log('Final __kashidaInfo:', JSON.stringify(this.__kashidaInfo.map((lineInfo, i) => ({
+      //   line: i,
+      //   entries: lineInfo.map(k => ({ charIndex: k.charIndex, tatweelCount: k.tatweelCount }))
+      // }))));
+    }
+
     /**
      * Generate style map from new layout format
      * @private
@@ -27345,84 +28597,100 @@
      * @private
      */
     _extractJustifySpaceMeasurements(element, lines) {
-      console.log('=== _extractJustifySpaceMeasurements START ===');
-      console.log('Textbox width:', this.width);
-      console.log('Lines count:', lines.length);
+      // console.log('=== _extractJustifySpaceMeasurements START ===');
+      // console.log('Textbox width:', this.width);
+      // console.log('Lines count:', lines.length);
+
       const measureCtx = this._browserMeasureCtx || (this._browserMeasureCtx = document.createElement('canvas').getContext('2d'));
       if (!measureCtx) {
-        console.log('ERROR: No measure context');
+        // console.log('ERROR: No measure context');
         return [];
       }
       measureCtx.font = `${this.fontStyle || 'normal'} ${this.fontWeight || 'normal'} ${this.fontSize}px "${this.fontFamily}"`;
       const normalSpaceWidth = measureCtx.measureText(' ').width || 6;
-      console.log('Font:', measureCtx.font);
-      console.log('Normal space width:', normalSpaceWidth);
+      // console.log('Font:', measureCtx.font);
+      // console.log('Normal space width:', normalSpaceWidth);
+
       const spaceWidths = [];
       lines.forEach((line, lineIndex) => {
         const lineSpaces = [];
         const spaceCount = (line.match(/\s/g) || []).length;
         const isLastLine = lineIndex === lines.length - 1;
-        console.log(`\nLine ${lineIndex}: "${line.substring(0, 50)}..." spaces: ${spaceCount}, isLast: ${isLastLine}`);
+
+        // console.log(`\nLine ${lineIndex}: "${line.substring(0, 50)}..." spaces: ${spaceCount}, isLast: ${isLastLine}`);
+
         if (spaceCount > 0 && !isLastLine) {
           // Don't justify last line
           const naturalWidth = measureCtx.measureText(line).width;
           const remainingSpace = this.width - naturalWidth;
           const extraPerSpace = remainingSpace > 0 ? remainingSpace / spaceCount : 0;
           const expandedSpaceWidth = normalSpaceWidth + extraPerSpace;
-          console.log(`  Natural width: ${naturalWidth.toFixed(2)}, Remaining: ${remainingSpace.toFixed(2)}`);
-          console.log(`  Extra per space: ${extraPerSpace.toFixed(2)}, Expanded space: ${expandedSpaceWidth.toFixed(2)}`);
+
+          // console.log(`  Natural width: ${naturalWidth.toFixed(2)}, Remaining: ${remainingSpace.toFixed(2)}`);
+          // console.log(`  Extra per space: ${extraPerSpace.toFixed(2)}, Expanded space: ${expandedSpaceWidth.toFixed(2)}`);
+
           const safeWidth = Math.max(normalSpaceWidth, expandedSpaceWidth);
           for (let i = 0; i < spaceCount; i++) {
             lineSpaces.push(safeWidth);
           }
         } else if (spaceCount > 0) {
           // Last line: keep natural space width
-          console.log(`  Last line - using normal space width: ${normalSpaceWidth}`);
+          // console.log(`  Last line - using normal space width: ${normalSpaceWidth}`);
           for (let i = 0; i < spaceCount; i++) {
             lineSpaces.push(normalSpaceWidth);
           }
         }
         spaceWidths.push(lineSpaces);
       });
-      console.log('\nFinal spaceWidths:', spaceWidths);
-      console.log('=== _extractJustifySpaceMeasurements END ===\n');
+
+      // console.log('\nFinal spaceWidths:', spaceWidths);
+      // console.log('=== _extractJustifySpaceMeasurements END ===\n');
       return spaceWidths;
     }
 
     /**
-     * Apply justify space expansion using actual charBounds measurements
+     * Apply justify space expansion using actual charBounds measurements.
+     * Supports Arabic kashida (tatweel) justification when kashida property is set.
      * @private
      */
     _applyBrowserJustifySpaces() {
-      var _this$_textLines, _this$__charBounds;
-      console.log('=== _applyBrowserJustifySpaces START ===');
-      console.log('_textLines:', (_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _this$_textLines.length, 'lines');
-      console.log('__charBounds:', (_this$__charBounds = this.__charBounds) === null || _this$__charBounds === void 0 ? void 0 : _this$__charBounds.length, 'lines');
-      console.log('textbox width:', this.width);
       if (!this._textLines || !this.__charBounds) {
-        console.log('EARLY RETURN: _textLines or __charBounds missing');
         return;
       }
+
+      // Kashida ratios: proportion of extra space distributed via kashida vs space expansion
+      const kashidaRatios = {
+        none: 0,
+        short: 0.25,
+        medium: 0.5,
+        long: 0.75,
+        stylistic: 1.0
+      };
+      const kashidaRatio = kashidaRatios[this.kashida] || 0;
+
+      // Reset kashida info
+      this.__kashidaInfo = [];
       const totalLines = this._textLines.length;
       this._textLines.forEach((line, lineIndex) => {
-        const lineText = line.join('');
-        const isLastLine = lineIndex === totalLines - 1;
-        console.log(`\n--- Line ${lineIndex}: "${lineText}" isLast: ${isLastLine} ---`);
+        // Initialize kashida info for this line
+        this.__kashidaInfo[lineIndex] = [];
         if (!this.__charBounds || !this.__charBounds[lineIndex]) {
-          console.log('  SKIP: No charBounds for this line');
           return;
         }
 
         // Don't justify the last line
+        const isLastLine = lineIndex === totalLines - 1;
         if (isLastLine) {
-          console.log('  SKIP: Last line - no justify');
           return;
         }
         const lineBounds = this.__charBounds[lineIndex];
 
         // Calculate current line width from charBounds
         const currentLineWidth = lineBounds.reduce((sum, b) => sum + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0);
-        console.log('  Current line width from charBounds:', currentLineWidth);
+        const totalExtraSpace = this.width - currentLineWidth;
+        if (totalExtraSpace <= 0) {
+          return;
+        }
 
         // Count spaces and find space indices
         const spaceIndices = [];
@@ -27432,53 +28700,118 @@
           }
         }
         const spaceCount = spaceIndices.length;
-        console.log('  Space count:', spaceCount, 'at indices:', spaceIndices);
-        if (spaceCount === 0) {
-          console.log('  SKIP: No spaces to expand');
-          return;
+
+        // Find kashida points if enabled
+        const kashidaPoints = kashidaRatio > 0 ? findKashidaPoints(line) : [];
+        const hasKashidaPoints = kashidaPoints.length > 0;
+
+        // Calculate space distribution
+        let kashidaSpace = 0;
+        if (hasKashidaPoints && kashidaRatio > 0) {
+          // Distribute between kashida and spaces
+          kashidaSpace = totalExtraSpace * kashidaRatio;
         }
 
-        // Calculate how much extra space we need
-        const remainingSpace = this.width - currentLineWidth;
-        console.log('  Remaining space to fill:', remainingSpace);
-        if (remainingSpace <= 0) {
-          console.log('  SKIP: Line already fills or exceeds width');
-          return;
+        // Calculate per-kashida and per-space widths
+        const perKashidaWidth = hasKashidaPoints ? kashidaSpace / kashidaPoints.length : 0;
+
+        // If kashida is enabled, insert actual tatweel characters
+        if (hasKashidaPoints && perKashidaWidth > 0) {
+          // console.log(`=== Inserting kashida in _applyBrowserJustifySpaces line ${lineIndex} ===`);
+
+          // Sort by charIndex descending to insert from end
+          const sortedPoints = [...kashidaPoints].sort((a, b) => b.charIndex - a.charIndex);
+
+          // Calculate tatweel width
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.font = this._getFontDeclaration();
+            const tatweelWidth = ctx.measureText(ARABIC_TATWEEL).width;
+            // console.log(`  tatweelWidth: ${tatweelWidth}`);
+
+            if (tatweelWidth > 0) {
+              const newLine = [...line];
+              for (const point of sortedPoints) {
+                const tatweelCount = Math.max(1, Math.round(perKashidaWidth / tatweelWidth));
+                // console.log(`  Point ${point.charIndex}: inserting ${tatweelCount} tatweels`);
+
+                // Insert tatweels after the character
+                for (let t = 0; t < tatweelCount; t++) {
+                  newLine.splice(point.charIndex + 1, 0, ARABIC_TATWEEL);
+                }
+
+                // Store kashida info with tatweelCount for index conversion
+                this.__kashidaInfo[lineIndex].push({
+                  charIndex: point.charIndex,
+                  width: perKashidaWidth,
+                  tatweelCount: tatweelCount
+                });
+              }
+
+              // console.log(`  New line: ${newLine.join('')}`);
+
+              // Update _textLines with kashida
+              this._textLines[lineIndex] = newLine;
+
+              // Update textLines string version
+              if (this.textLines && this.textLines[lineIndex] !== undefined) {
+                this.textLines[lineIndex] = newLine.join('');
+              }
+
+              // Recalculate charBounds
+              this.__charBounds[lineIndex] = [];
+              this.__lineWidths[lineIndex] = undefined;
+              this._measureLine(lineIndex);
+            }
+          }
+        } else {
+          // No kashida - just store info for reference (tatweelCount is 0 since no tatweels inserted)
+          for (const point of kashidaPoints) {
+            this.__kashidaInfo[lineIndex].push({
+              charIndex: point.charIndex,
+              width: perKashidaWidth,
+              tatweelCount: 0
+            });
+          }
         }
-        const extraPerSpace = remainingSpace / spaceCount;
-        console.log('  Extra per space:', extraPerSpace);
-
-        // Apply expansion
-        let accumulated = 0;
-        for (let charIndex = 0; charIndex < line.length; charIndex++) {
-          const bound = lineBounds[charIndex];
-          if (!bound) continue;
-
-          // Shift this character by accumulated expansion
-          bound.left += accumulated;
-
-          // If this is a space, expand it
-          if (spaceIndices.includes(charIndex)) {
-            const oldWidth = bound.width;
-            const newWidth = oldWidth + extraPerSpace;
-            bound.width = newWidth;
-            bound.kernedWidth = newWidth;
-            accumulated += extraPerSpace;
-            console.log(`  Space at char ${charIndex}: ${oldWidth.toFixed(2)} -> ${newWidth.toFixed(2)} (accumulated: ${accumulated.toFixed(2)})`);
+
+        // Now apply space expansion to remaining extra space
+        const newLineBounds = this.__charBounds[lineIndex];
+        const newLineWidth = newLineBounds.reduce((sum, b) => sum + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0);
+        const remainingSpace = this.width - newLineWidth;
+        if (remainingSpace > 0 && spaceCount > 0) {
+          const extraPerSpace = remainingSpace / spaceCount;
+          let accumulated = 0;
+          for (let charIndex = 0; charIndex < this._textLines[lineIndex].length; charIndex++) {
+            const bound = newLineBounds[charIndex];
+            if (!bound) continue;
+            bound.left += accumulated;
+
+            // Check if this is a space (need to check against the updated line)
+            if (/\s/.test(this._textLines[lineIndex][charIndex])) {
+              bound.width += extraPerSpace;
+              bound.kernedWidth += extraPerSpace;
+              accumulated += extraPerSpace;
+            }
           }
         }
 
         // Update cached line width
-        const finalLineWidth = lineBounds.reduce((max, b) => Math.max(max, b.left + b.width), 0);
+        const finalLineBounds = this.__charBounds[lineIndex];
+        const finalLineWidth = finalLineBounds.reduce((max, b) => Math.max(max, ((b === null || b === void 0 ? void 0 : b.left) || 0) + ((b === null || b === void 0 ? void 0 : b.width) || 0)), 0);
         this.__lineWidths[lineIndex] = finalLineWidth;
-        console.log('  Final line width:', finalLineWidth.toFixed(2), 'target:', this.width);
       });
-      console.log('=== _applyBrowserJustifySpaces END ===\n');
       this.dirty = true;
       // Mark that justify has been applied - for debugging to detect if measureLine overwrites it
       this._justifyApplied = true;
-      // Don't call requestRenderAll here - it will be called by the caller
-      // and calling it here might trigger another initDimensions that clears justify
+
+      // Debug log final kashida state
+      // console.log('=== _applyBrowserJustifySpaces END ===');
+      // console.log('Final __kashidaInfo:', JSON.stringify(this.__kashidaInfo.map((lineInfo, i) => ({
+      //   line: i,
+      //   entries: lineInfo.map(k => ({ charIndex: k.charIndex, tatweelCount: k.tatweelCount }))
+      // }))));
     }
 
     /**