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

package/src/text/overlayEditor.ts

@@ -240,9 +240,9 @@ export class OverlayEditor {
       requestAnimationFrame(() => {
         if (!this.isDestroyed) {
           this.applyOverlayStyle();
-          console.log(
-            '📐 Height changed - rechecking alignment after repositioning:',
-          );
+          // console.log(
+          //   '📐 Height changed - rechecking alignment after repositioning:',
+          // );
         }
       });
     }
@@ -340,7 +340,7 @@ export class OverlayEditor {
     
     // 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();
     }
@@ -358,11 +358,11 @@ export class OverlayEditor {
     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 as any).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')) {
@@ -380,7 +380,7 @@ export class OverlayEditor {
           // 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';
           }
@@ -388,7 +388,7 @@ export class OverlayEditor {
           // 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';
           }
@@ -408,16 +408,16 @@ export class OverlayEditor {
         (this.textarea.style as any).textJustifyTrim = 'none';
         (this.textarea.style as any).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 as any).textJustify = 'auto';
       (this.textarea.style as any).wordSpacing = 'normal';
-      console.log('   → Applied standard alignment:', cssTextAlign);
+      // console.log('   → Applied standard alignment:', cssTextAlign);
     }
     
     this.textarea.style.textAlign = cssTextAlign;
@@ -444,37 +444,37 @@ export class OverlayEditor {
     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 as any).textJustify);
-    console.log('   wordSpacing:', (this.textarea.style as any).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')) {
-      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
-      console.log('   Fabric width:', (target as any).width);
-      console.log('   Fabric calcTextWidth:', (target as any).calcTextWidth?.());
-      console.log('   Fabric textAlign:', (target as any).textAlign);
-      console.log('   Text lines:', (target as any).textLines);
+      // console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      // console.log('   Fabric width:', (target as any).width);
+      // console.log('   Fabric calcTextWidth:', (target as any).calcTextWidth?.());
+      // console.log('   Fabric textAlign:', (target as any).textAlign);
+      // console.log('   Text lines:', (target as any).textLines);
     }
     
     // Debug font properties matching
-    console.log('🔤 FONT PROPERTIES COMPARISON:');
-    console.log('   Fabric fontFamily:', target.fontFamily);
-    console.log('   Fabric fontWeight:', target.fontWeight);
-    console.log('   Fabric fontStyle:', target.fontStyle);
-    console.log('   Fabric fontSize:', target.fontSize);
-    console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
-    console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
-    console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
-    console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+    // console.log('🔤 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     
     // Enhanced font rendering to better match fabric.js canvas rendering
     // Default to auto for more natural rendering
@@ -491,12 +491,12 @@ export class OverlayEditor {
     if (isBold) {
       (this.textarea.style as any).webkitFontSmoothing = 'subpixel-antialiased';
       (this.textarea.style as any).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 as any).webkitFontSmoothing);
-    console.log('   mozOsxFontSmoothing:', (this.textarea.style as any).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
@@ -527,26 +527,26 @@ export class OverlayEditor {
       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 = {
@@ -571,8 +571,8 @@ export class OverlayEditor {
         100,
     };
 
-    console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);
-    console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);
+    // 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;
@@ -588,18 +588,18 @@ export class OverlayEditor {
       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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
   /**
@@ -609,44 +609,44 @@ export class OverlayEditor {
     const target = this.target;
     const text = this.textarea.value;
 
-    console.log('📝 TEXT WRAPPING COMPARISON:');
-    console.log('📄 Text Content:', `"${text}"`);
-    console.log('📄 Text Length:', text.length);
+    // 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 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);
+    // 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.
@@ -659,15 +659,15 @@ export class OverlayEditor {
       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',
-    );
+    // 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 =
@@ -676,12 +676,12 @@ export class OverlayEditor {
       );
     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 as any).direction || 'auto');
-    console.log('   Textarea unicodeBidi:', textareaStyles.unicodeBidi);
+    // 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;
@@ -692,23 +692,23 @@ export class OverlayEditor {
       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);
+    // 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,
-      );
+      // console.log('🔄 Text wrapping detected in textarea');
+      // console.log(
+      //   '   Wrapped lines:',
+      //   estimatedTextareaLines - explicitLines.length,
+      // );
     } else {
-      console.log('📏 No text wrapping in textarea');
+      // console.log('📏 No text wrapping in textarea');
     }
 
-    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    // console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
 
@@ -795,28 +795,28 @@ export class OverlayEditor {
 
     // Handle commit/cancel after restoring visibility
     if (commit && !this.isComposing) {
-      const finalText = this.textarea.value;
-      
-      // Auto-detect text direction and update fabric object if needed
-      const detectedDirection = this.firstStrongDir(finalText);
-      const currentDirection = (this.target as any).direction || 'ltr';
-      const hasExplicitDirection =
-        currentDirection && currentDirection !== 'inherit';
-      
-      // 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)}..."`);
-        
-        // Update the fabric object's direction
-        (this.target as any).set('direction', detectedDirection);
+      const finalText = this.textarea.value;
+      
+      // Auto-detect text direction and update fabric object if needed
+      const detectedDirection = this.firstStrongDir(finalText);
+      const currentDirection = (this.target as any).direction || 'ltr';
+      const hasExplicitDirection =
+        currentDirection && currentDirection !== 'inherit';
+      
+      // 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)}..."`);
+        
+        // Update the fabric object's direction
+        (this.target as any).set('direction', detectedDirection);
         
         // Force a re-render to apply the direction change
         this.canvas.requestRenderAll();
         
-        console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+        // console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
       } else {
-        console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+        // console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
       }
       
       if (this.onCommit) {

package/src/text/unicode.ts

@@ -445,11 +445,186 @@ export function getLineBreakClass(char: string): string {
 export function isLineBreakAllowed(before: string, after: string): boolean {
   const beforeClass = getLineBreakClass(before);
   const afterClass = getLineBreakClass(after);
-  
+
   // Simplified line breaking rules
   if (beforeClass === 'OP') return false; // Don't break after opening
   if (afterClass === 'CL') return false; // Don't break before closing
   if (beforeClass === 'SP') return true; // Always allow break after space
-  
+
   return true; // Default allow
+}
+
+// ============================================================================
+// Arabic Kashida (Tatweel) Support
+// ============================================================================
+
+/**
+ * Arabic Tatweel (kashida) character used for justification
+ */
+export 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)
+ */
+export function isArabicLetter(char: string): boolean {
+  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'; // ل
+
+export function canInsertKashida(prevChar: string, nextChar: string): boolean {
+  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
+ */
+export interface KashidaPoint {
+  /** Index in the grapheme array where kashida can be inserted after */
+  charIndex: number;
+  /** Priority for kashida insertion (higher = insert here first) */
+  priority: number;
+}
+
+/**
+ * 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
+ */
+export function findKashidaPoints(graphemes: string[]): KashidaPoint[] {
+  const points: KashidaPoint[] = [];
+
+  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;
 }