@naniteninja/profile-comparison-lib 1.0.26 → 1.0.28

package/fesm2022/naniteninja-profile-comparison-lib.mjs

@@ -17,9 +17,23 @@ var BackendMode;
     /** Use a local mock server at localhost:44101. */
     BackendMode[BackendMode["Mock"] = 1] = "Mock";
 })(BackendMode || (BackendMode = {}));
+const PROFILE_COMPARISON_PROD_API_BASE_URL = 'https://api.test.thecyrano.app/api/profile-comparison/api';
+const PROFILE_COMPARISON_LOCAL_API_BASE_URL = 'http://localhost:44101/api';
+function isLocalBrowserRuntime() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hostname = window.location?.hostname?.toLowerCase() ?? '';
+    return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+}
+function resolveDefaultRealBackendUrl() {
+    return isLocalBrowserRuntime()
+        ? PROFILE_COMPARISON_LOCAL_API_BASE_URL
+        : PROFILE_COMPARISON_PROD_API_BASE_URL;
+}
 const BACKEND_MODE_URLS = {
-    [BackendMode.Real]: 'https://api.test.thecyrano.app/api/profile-comparison/api',
-    [BackendMode.Mock]: 'http://localhost:44101/api',
+    [BackendMode.Real]: resolveDefaultRealBackendUrl(),
+    [BackendMode.Mock]: PROFILE_COMPARISON_LOCAL_API_BASE_URL,
 };
 /**
  * Legacy injection token for the backend base URL.
@@ -203,10 +217,10 @@ class CachePersistenceService {
     static STORE_OPENAI_EMBEDDINGS = STORE_OPENAI_EMBEDDINGS;
     static STORE_PROFILE_FACE = STORE_PROFILE_FACE;
     static STORE_PROFILE_COMPARE = STORE_PROFILE_COMPARE;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CachePersistenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -314,10 +328,10 @@ class FileConversionService {
         const mime = this.getMimeFromFilename(imageStr);
         return this.urlToFile(imageStr, fileBaseName, mime);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FileConversionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FileConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -433,10 +447,10 @@ class ImageCompressionService {
             return `${base}.webp`;
         return `${base}.jpg`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ImageCompressionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -580,96 +594,96 @@ class OpenAIEmbeddingService {
             [OpenAIEmbeddingService.HEADER_CONTENT_TYPE]: OpenAIEmbeddingService.CONTENT_TYPE_JSON,
             [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
         });
-        const prompt = `
-    You are an expert semantic alignment engine.
-    Task: Align the items from List A to List B based on semantic similarity.
-    Context: This is a heuristic, human-semantic alignment (use embeddings later if you want it algorithmically strict).
-    
-    List A: ${JSON.stringify(validA)}
-    List B: ${JSON.stringify(validB)}
-
-    SEMANTIC STRATEGY (3-PASS PROCESS):
-    1. **Pass 1: Exact & Strong Matches**: First, lock in all exact synonyms (e.g., "Dog" vs "Puppy") and strong category matches (e.g., "Tennis" vs "Badminton"). These are your anchors.
-    2. **Pass 2: Thematic Clustering**: Next, group remaining items by sub-theme (e.g., "Water Sports", "Asian Cuisine"). Align items within these themes even if they aren't perfect pairs.
-    3. **Pass 3: Contextual & Loose Matches**: Look for looser associations (e.g., "Reading" vs "Library").
-    4. **Isolation**: If an item truly has NO relation to anything remaining in the other list, ISOLATE it using "----". Do NOT force a bad match.
-
-    Rules:
-    1. Align items into clusters with variable dash-gaps to show semantic distance.
-    2. Use "-" for a small hop (related but distinct).
-    3. Use "----" for a hard theme switch (different category).
-    4. You MUST reorder items to create the best semantic clusters.
-    5. Ensure the output arrays "listA" and "listB" have the SAME length.
-    6. If an item has no match, align it with "-" or "----" as appropriate, or just a gap.
-    7. Output MUST be a JSON object with "listA" and "listB".
-    8. **COMPLETENESS**: You MUST include EVERY item from the input List A and List B in the output. Do not omit any items.
-    9. **Handling Leftovers**: If you have items left over at the end that don't match well, still include them in the list, aligned with "-" if necessary, or grouped together if they are somewhat related.
-    10. **Spacer Alignment**: You MUST align "----" with "----" in both lists. Do NOT align a hard switch "----" with a word. If you need a switch on one side, put it on the other side too.
-    11. **Strict Side Adherence**: Items from Input List A MUST ONLY appear in Output List A. Items from Input List B MUST ONLY appear in Output List B. Do not mix them up.
-    12. **Mandatory Spacers**: You MUST insert a spacer ("-" or "----") between clusters of related items. Avoid putting "----" between every single item; use it only when the topic truly shifts.
-    13. **NO TRAILING SPACER**: The last item in both lists MUST be a word. Do NOT put a spacer at the very end.
-    14. **Length Mismatch Handling**: If one list is shorter than the other, you MUST fill the empty slots in the shorter list with spacers ("-") ONLY. DO NOT invent words or reuse words to fill the space.
-    15. **HIGH SIMILARITY CONSOLIDATION (>= 0.8)**: This is CRITICAL for center display:
-        - When you find a pair with VERY HIGH semantic similarity (>= 0.8), you MUST output the SAME TEXT in both listA and listB at that position.
-        - **Key principle**: If the items are synonyms, very similar activities, or one is a specific type of the other, consolidate them!
-        - **STRICT CONSTRAINT**: You can ONLY consolidate if BOTH items actually exist in the input lists and are semantically related.
-        - **NEVER** invent an item for List B just to make a pair with List A. If List A has "figma" and List B has NOTHING related, output "figma" in List A and "-" in List B. DO NOT put "figma" in List B.
-        - **STRICT SYMMETRY**: If you use the "×" symbol to consolidate, you MUST output the EXACT SAME string in BOTH "listA" and "listB" at that index.
-        - This allows the system to automatically move these items to the center display!
-        - **NEVER** use "×" on one side and a spacer on the other. That is a critical failure.
-        - **NEVER** include similarity scores or any other numbers in the output strings unless they are part of the original item text.
-        - **ONLY** use "×" as the separator for consolidated items. Do not use "/", "&", or other symbols for this purpose.
-        - Example: "Jogging" (List A) + "Running" (List B) -> "Jogging × Running" in BOTH listA and listB.
-        - **NEVER DROP CONSOLIDATED ITEMS**: If you consolidate "Jogging" and "Running" into "Jogging × Running", you MUST put this string in **BOTH** List A and List B. Do NOT put it in List A and a spacer in List B. That would delete "Running" from the output.
-        - **CRITICAL ERROR PREVENTION**: Do NOT drop items from List B. If "Running" is in Input List B, it MUST appear in Output List B (either as "Running" or "Jogging × Running"). If you output "Jogging × Running" in List A but "-" in List B, you have FAILED.
-        - **COMPLETENESS CHECK**: You MUST verify that EVERY item from the input lists is present in the output. If "Running" is in Input List B, it MUST be in Output List B (or consolidated). DO NOT DROP ITEMS.
-        - **DETERMINISM**: Process the list from top to bottom. Do not change your output between runs.
-        - This allows the system to automatically move these items to the center display!
-    16. Do not insert any new, inferred, or related words. Each pair must be created strictly from the existing list items only.
-
-    NEGATIVE CONSTRAINTS:
-    - NEVER put an item from List A into List B.
-    - NEVER put an item from List B into List A.
-    - NEVER invent new items. Only use items from the input lists.
-    - **NEVER DUPLICATE ITEMS**. Each item from the input list must appear EXACTLY ONCE in the output.
-
-    VERIFICATION STEP:
-    Before outputting, verify every single item:
-    - "Is this item in Input List A?" -> If yes, put it in Output List A.
-    - "Is this item in Input List B?" -> If yes, put it in Output List B.
-    - "Is this item in neither?" -> It is a hallucination. DELETE IT.
-
-    CRITICAL: OUTPUT MUST CONTAIN EXACTLY THE SAME ITEMS AS INPUT. NO DELETIONS ALLOWED.
-
-    FINAL SANITY CHECK:
-    - **HALLUCINATION CHECK**: Go through every word in your Output List A. Is it EXACTLY present in Input List A? If not, DELETE IT. Do the same for List B.
-    - **DUPLICATION CHECK**: Scan List A and List B. Does ANY word appear more than once? If so, DELETE the extra occurrences immediately. Each item must appear EXACTLY ONCE.
-    - **COUNT CHECK**: Count the number of non-spacer items in your Output List A. Does it match the number of items in Input List A? If not, you are missing items. FIND THEM AND ADD THEM.
-    - **COUNT CHECK**: Do the same for List B.
-    - Look at your generated "listA". Are there any items that belong to Input List B? REMOVE THEM immediately.
-    - Look at your generated "listB". Are there any items that belong to Input List A? REMOVE THEM immediately.
-    - **Did you miss any items from Input List A? ADD THEM NOW.**
-    - **Did you miss any items from Input List B? ADD THEM NOW.**
-    - If you are unsure where an item belongs, check the Input Lists provided above. Do NOT guess.
-
-    Example of Desired Output Logic:
-    - "Volunteering at animal shelter" vs "Dog training" -> Related? Yes. Similarity >= 0.8? No (different activities)
-    - NEXT PAIR: "Trail biking" vs "Rock climbing" -> Is this related to Animals? No. -> INSERT "----"
-    - "Trail biking" vs "Rock climbing" -> Related? Yes (Outdoors).
-    - NEXT PAIR: "Jogging" vs "Running" -> Similarity >= 0.8? YES! -> Output "Jogging × Running" in BOTH lists
-    - "Jogging" vs "Running" -> Related? Yes (Exercise).
-    - NEXT PAIR: "Beach volleyball" vs "Salsa dancing" -> Is this related to Exercise? Yes. -> INSERT "-" (Small hop)
-    - "Beach volleyball" vs "Salsa dancing" -> Related? Yes (Hobbies). Similarity >= 0.8? No (different hobbies)
-    - NEXT PAIR: "Fermenting kimchi" vs "Korean cooking" -> Is this related to Hobbies? No. -> INSERT "----"
-
-    JSON Output Structure:
-    {
-      "listA": ["Consolidated Item × Match", "----", "Unique Item A", "-" , "Unique Item A1" , "-" , "Unique Item A2" ,"----" , "Unique Item A3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item A5, "----" , Uniue Item A6   ],
-      "listB": ["Consolidated Item × Match", "----", "Unique Item B", "-" , "Unique Item B1" , "-" , "Unique Item B2" ,"----" , "Unique Item B3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item B5, "----" , - ]
-    }
-    Note: In this case, List A has more items, so the last remaining item is displayed as a single card.In other cases, List B may have more words, and in that situation, the extra word from List B is shown as a single card.
-    Each unique item in List A has a corresponding unique item in List B that is highly similar in meaning or related in terms of concept. 
-    VARIATION & SIMILARITY CONTROL: Maintain strict consistency. If the same semantic relationship appears multiple times, align it identically every time.
+        const prompt = `
+    You are an expert semantic alignment engine.
+    Task: Align the items from List A to List B based on semantic similarity.
+    Context: This is a heuristic, human-semantic alignment (use embeddings later if you want it algorithmically strict).
+    
+    List A: ${JSON.stringify(validA)}
+    List B: ${JSON.stringify(validB)}
+
+    SEMANTIC STRATEGY (3-PASS PROCESS):
+    1. **Pass 1: Exact & Strong Matches**: First, lock in all exact synonyms (e.g., "Dog" vs "Puppy") and strong category matches (e.g., "Tennis" vs "Badminton"). These are your anchors.
+    2. **Pass 2: Thematic Clustering**: Next, group remaining items by sub-theme (e.g., "Water Sports", "Asian Cuisine"). Align items within these themes even if they aren't perfect pairs.
+    3. **Pass 3: Contextual & Loose Matches**: Look for looser associations (e.g., "Reading" vs "Library").
+    4. **Isolation**: If an item truly has NO relation to anything remaining in the other list, ISOLATE it using "----". Do NOT force a bad match.
+
+    Rules:
+    1. Align items into clusters with variable dash-gaps to show semantic distance.
+    2. Use "-" for a small hop (related but distinct).
+    3. Use "----" for a hard theme switch (different category).
+    4. You MUST reorder items to create the best semantic clusters.
+    5. Ensure the output arrays "listA" and "listB" have the SAME length.
+    6. If an item has no match, align it with "-" or "----" as appropriate, or just a gap.
+    7. Output MUST be a JSON object with "listA" and "listB".
+    8. **COMPLETENESS**: You MUST include EVERY item from the input List A and List B in the output. Do not omit any items.
+    9. **Handling Leftovers**: If you have items left over at the end that don't match well, still include them in the list, aligned with "-" if necessary, or grouped together if they are somewhat related.
+    10. **Spacer Alignment**: You MUST align "----" with "----" in both lists. Do NOT align a hard switch "----" with a word. If you need a switch on one side, put it on the other side too.
+    11. **Strict Side Adherence**: Items from Input List A MUST ONLY appear in Output List A. Items from Input List B MUST ONLY appear in Output List B. Do not mix them up.
+    12. **Mandatory Spacers**: You MUST insert a spacer ("-" or "----") between clusters of related items. Avoid putting "----" between every single item; use it only when the topic truly shifts.
+    13. **NO TRAILING SPACER**: The last item in both lists MUST be a word. Do NOT put a spacer at the very end.
+    14. **Length Mismatch Handling**: If one list is shorter than the other, you MUST fill the empty slots in the shorter list with spacers ("-") ONLY. DO NOT invent words or reuse words to fill the space.
+    15. **HIGH SIMILARITY CONSOLIDATION (>= 0.8)**: This is CRITICAL for center display:
+        - When you find a pair with VERY HIGH semantic similarity (>= 0.8), you MUST output the SAME TEXT in both listA and listB at that position.
+        - **Key principle**: If the items are synonyms, very similar activities, or one is a specific type of the other, consolidate them!
+        - **STRICT CONSTRAINT**: You can ONLY consolidate if BOTH items actually exist in the input lists and are semantically related.
+        - **NEVER** invent an item for List B just to make a pair with List A. If List A has "figma" and List B has NOTHING related, output "figma" in List A and "-" in List B. DO NOT put "figma" in List B.
+        - **STRICT SYMMETRY**: If you use the "×" symbol to consolidate, you MUST output the EXACT SAME string in BOTH "listA" and "listB" at that index.
+        - This allows the system to automatically move these items to the center display!
+        - **NEVER** use "×" on one side and a spacer on the other. That is a critical failure.
+        - **NEVER** include similarity scores or any other numbers in the output strings unless they are part of the original item text.
+        - **ONLY** use "×" as the separator for consolidated items. Do not use "/", "&", or other symbols for this purpose.
+        - Example: "Jogging" (List A) + "Running" (List B) -> "Jogging × Running" in BOTH listA and listB.
+        - **NEVER DROP CONSOLIDATED ITEMS**: If you consolidate "Jogging" and "Running" into "Jogging × Running", you MUST put this string in **BOTH** List A and List B. Do NOT put it in List A and a spacer in List B. That would delete "Running" from the output.
+        - **CRITICAL ERROR PREVENTION**: Do NOT drop items from List B. If "Running" is in Input List B, it MUST appear in Output List B (either as "Running" or "Jogging × Running"). If you output "Jogging × Running" in List A but "-" in List B, you have FAILED.
+        - **COMPLETENESS CHECK**: You MUST verify that EVERY item from the input lists is present in the output. If "Running" is in Input List B, it MUST be in Output List B (or consolidated). DO NOT DROP ITEMS.
+        - **DETERMINISM**: Process the list from top to bottom. Do not change your output between runs.
+        - This allows the system to automatically move these items to the center display!
+    16. Do not insert any new, inferred, or related words. Each pair must be created strictly from the existing list items only.
+
+    NEGATIVE CONSTRAINTS:
+    - NEVER put an item from List A into List B.
+    - NEVER put an item from List B into List A.
+    - NEVER invent new items. Only use items from the input lists.
+    - **NEVER DUPLICATE ITEMS**. Each item from the input list must appear EXACTLY ONCE in the output.
+
+    VERIFICATION STEP:
+    Before outputting, verify every single item:
+    - "Is this item in Input List A?" -> If yes, put it in Output List A.
+    - "Is this item in Input List B?" -> If yes, put it in Output List B.
+    - "Is this item in neither?" -> It is a hallucination. DELETE IT.
+
+    CRITICAL: OUTPUT MUST CONTAIN EXACTLY THE SAME ITEMS AS INPUT. NO DELETIONS ALLOWED.
+
+    FINAL SANITY CHECK:
+    - **HALLUCINATION CHECK**: Go through every word in your Output List A. Is it EXACTLY present in Input List A? If not, DELETE IT. Do the same for List B.
+    - **DUPLICATION CHECK**: Scan List A and List B. Does ANY word appear more than once? If so, DELETE the extra occurrences immediately. Each item must appear EXACTLY ONCE.
+    - **COUNT CHECK**: Count the number of non-spacer items in your Output List A. Does it match the number of items in Input List A? If not, you are missing items. FIND THEM AND ADD THEM.
+    - **COUNT CHECK**: Do the same for List B.
+    - Look at your generated "listA". Are there any items that belong to Input List B? REMOVE THEM immediately.
+    - Look at your generated "listB". Are there any items that belong to Input List A? REMOVE THEM immediately.
+    - **Did you miss any items from Input List A? ADD THEM NOW.**
+    - **Did you miss any items from Input List B? ADD THEM NOW.**
+    - If you are unsure where an item belongs, check the Input Lists provided above. Do NOT guess.
+
+    Example of Desired Output Logic:
+    - "Volunteering at animal shelter" vs "Dog training" -> Related? Yes. Similarity >= 0.8? No (different activities)
+    - NEXT PAIR: "Trail biking" vs "Rock climbing" -> Is this related to Animals? No. -> INSERT "----"
+    - "Trail biking" vs "Rock climbing" -> Related? Yes (Outdoors).
+    - NEXT PAIR: "Jogging" vs "Running" -> Similarity >= 0.8? YES! -> Output "Jogging × Running" in BOTH lists
+    - "Jogging" vs "Running" -> Related? Yes (Exercise).
+    - NEXT PAIR: "Beach volleyball" vs "Salsa dancing" -> Is this related to Exercise? Yes. -> INSERT "-" (Small hop)
+    - "Beach volleyball" vs "Salsa dancing" -> Related? Yes (Hobbies). Similarity >= 0.8? No (different hobbies)
+    - NEXT PAIR: "Fermenting kimchi" vs "Korean cooking" -> Is this related to Hobbies? No. -> INSERT "----"
+
+    JSON Output Structure:
+    {
+      "listA": ["Consolidated Item × Match", "----", "Unique Item A", "-" , "Unique Item A1" , "-" , "Unique Item A2" ,"----" , "Unique Item A3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item A5, "----" , Uniue Item A6   ],
+      "listB": ["Consolidated Item × Match", "----", "Unique Item B", "-" , "Unique Item B1" , "-" , "Unique Item B2" ,"----" , "Unique Item B3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item B5, "----" , - ]
+    }
+    Note: In this case, List A has more items, so the last remaining item is displayed as a single card.In other cases, List B may have more words, and in that situation, the extra word from List B is shown as a single card.
+    Each unique item in List A has a corresponding unique item in List B that is highly similar in meaning or related in terms of concept. 
+    VARIATION & SIMILARITY CONTROL: Maintain strict consistency. If the same semantic relationship appears multiple times, align it identically every time.
     `;
         const body = {
             model: this.MODEL,
@@ -863,40 +877,40 @@ class OpenAIEmbeddingService {
             [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
         });
         // Construct the prompt
-        const prompt = `
-    You are an expert semantic alignment engine.
-    Task: Align the items from List A to List B based on semantic similarity.
-    
-    List A: ${JSON.stringify(validA)}
-    List B: ${JSON.stringify(validB)}
-
-    Rules:
-    1. Match items that are semantically similar.
-    2. Support One-to-One, One-to-Many, and Many-to-Many matches.
-    3. **CRITICAL**: Avoid duplicate alignments. If multiple items in List B are highly similar to a single item in List A, group them ALL under that single List A item.
-    4. **CONSISTENCY**: The alignment must be symmetric. If "Mutton" matches "Chicken" when "Mutton" is on the left, it MUST also match "Chicken" when "Mutton" is on the right.
-    5. **ORDER**: You MUST reorder the items from BOTH lists to create the best semantic clusters. Place related groups next to each other (e.g., put all food items together, all tech items together).
-    6. If an item in List A has no match in List B, map it to "-".
-    7. If an item in List B is not matched to anything in List A, add a row with "-" on the left.
-    8. Output MUST be a JSON object with a single key "alignment" containing an array of objects.
-    9. Each object in the array must have:
-       - "left": string (item from List A or "-")
-       - "right": string (item from List B or "-")
-       - "score": number (similarity score between 0 and 1)
-
-    Example Output Format:
-    {
-      "alignment": [
-        { "left": "Seafood", "right": "Fish", "score": 0.9 },
-        { "left": "Seafood", "right": "Clams", "score": 0.85 },
-        { "left": "Seafood", "right": "Crab", "score": 0.88 },
-        { "left": "Chicken", "right": "Meat", "score": 0.8 },
-        { "left": "Chicken", "right": "Poultry", "score": 0.9 },
-        { "left": "Chicken", "right": "Mutton", "score": 0.85 },
-        { "left": "Coffee", "right": "Cafés", "score": 0.9 },
-        { "left": "Coding", "right": "-", "score": 0 }
-      ]
-    }
+        const prompt = `
+    You are an expert semantic alignment engine.
+    Task: Align the items from List A to List B based on semantic similarity.
+    
+    List A: ${JSON.stringify(validA)}
+    List B: ${JSON.stringify(validB)}
+
+    Rules:
+    1. Match items that are semantically similar.
+    2. Support One-to-One, One-to-Many, and Many-to-Many matches.
+    3. **CRITICAL**: Avoid duplicate alignments. If multiple items in List B are highly similar to a single item in List A, group them ALL under that single List A item.
+    4. **CONSISTENCY**: The alignment must be symmetric. If "Mutton" matches "Chicken" when "Mutton" is on the left, it MUST also match "Chicken" when "Mutton" is on the right.
+    5. **ORDER**: You MUST reorder the items from BOTH lists to create the best semantic clusters. Place related groups next to each other (e.g., put all food items together, all tech items together).
+    6. If an item in List A has no match in List B, map it to "-".
+    7. If an item in List B is not matched to anything in List A, add a row with "-" on the left.
+    8. Output MUST be a JSON object with a single key "alignment" containing an array of objects.
+    9. Each object in the array must have:
+       - "left": string (item from List A or "-")
+       - "right": string (item from List B or "-")
+       - "score": number (similarity score between 0 and 1)
+
+    Example Output Format:
+    {
+      "alignment": [
+        { "left": "Seafood", "right": "Fish", "score": 0.9 },
+        { "left": "Seafood", "right": "Clams", "score": 0.85 },
+        { "left": "Seafood", "right": "Crab", "score": 0.88 },
+        { "left": "Chicken", "right": "Meat", "score": 0.8 },
+        { "left": "Chicken", "right": "Poultry", "score": 0.9 },
+        { "left": "Chicken", "right": "Mutton", "score": 0.85 },
+        { "left": "Coffee", "right": "Cafés", "score": 0.9 },
+        { "left": "Coding", "right": "-", "score": 0 }
+      ]
+    }
     `;
         const body = {
             model: this.MODEL,
@@ -1215,10 +1229,10 @@ class OpenAIEmbeddingService {
         this.persistence.clear(CachePersistenceService.STORE_OPENAI_SIMILARITY);
         this.persistence.clear(CachePersistenceService.STORE_OPENAI_EMBEDDINGS);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1250,10 +1264,10 @@ class ProfileComparisonLibService {
     getVersion() {
         return '0.0.0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1507,10 +1521,10 @@ class ProfileService {
         this.compareInterestsCache.clear();
         this.persistence.clear(CachePersistenceService.STORE_PROFILE_COMPARE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
@@ -1566,10 +1580,10 @@ class ProfileComparisonBackendService {
             return throwError(() => err);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1718,6 +1732,39 @@ class ProfileComparisonLibComponent {
     static MIN_CROSS_LINKS_PER_NODE = 0;
     static MAX_INTRA_LINKS_PER_NODE = 2;
     static MAX_RELEVANT_INTERESTS_PER_SIDE = 6;
+    static COLUMN_CORE_SEED_PIXELS = 9;
+    static IDLE_ALPHA_TARGET = 0.012;
+    static CLICK_REHEAT_ALPHA = 0.065;
+    static SEMANTIC_STABILITY_ALPHA_FLOOR = 0.012;
+    static RELATIVE_MEDIAN_ALPHA_FLOOR = 0.01;
+    static RELATIVE_MEDIAN_ATTRACT_STRENGTH = 0.44;
+    static RELATIVE_MEDIAN_REPEL_STRENGTH = 0.58;
+    static RELATIVE_MEDIAN_ATTRACT_RADIUS = 72;
+    static RELATIVE_MEDIAN_REPEL_RADIUS = 194;
+    static STRONG_SIMILARITY_BOOST_EXPONENT = 3.2;
+    static STRONG_SIMILARITY_BOOST_SCALE = 0.5;
+    static PRIORITY_PAIR_MIN_SIMILARITY = 0.62;
+    static PRIORITY_PAIR_ATTRACTION_STRENGTH = 1.02;
+    static PRIORITY_PAIR_CORRIDOR_RADIUS = 42;
+    static PRIORITY_PAIR_CORRIDOR_REPEL_STRENGTH = 0.64;
+    static MUTUAL_TOP_PAIR_MIN_SIMILARITY = 0.58;
+    static MUTUAL_TOP_PAIR_MARGIN = 0.12;
+    static MUTUAL_TOP_PAIR_ATTRACTION_STRENGTH = 1.12;
+    static MUTUAL_TOP_PAIR_BARRIER_RADIUS = 56;
+    static MUTUAL_TOP_PAIR_REPEL_STRENGTH = 1.06;
+    static DETERMINISTIC_SEED_PASSES = 6;
+    static DETERMINISTIC_SEED_BLEND = 0.86;
+    static OBJECTIVE_OPTIMIZER_ITERATIONS = 56;
+    static OBJECTIVE_STEP_START = 0.34;
+    static OBJECTIVE_STEP_END = 0.09;
+    static OBJECTIVE_ATTRACTION_WEIGHT = 0.74;
+    static OBJECTIVE_REPULSION_WEIGHT = 0.5;
+    static OBJECTIVE_ANCHOR_WEIGHT = 0.34;
+    static OBJECTIVE_BOUNDARY_WEIGHT = 0.92;
+    static DISSIMILAR_REPEL_THRESHOLD = 0.52;
+    static DISSIMILAR_REPEL_STRENGTH = 0.34;
+    static DISSIMILAR_REPEL_MAX_DISTANCE = 220;
+    static DISSIMILAR_REPEL_DECAY_DISTANCE = 130;
     static CHIP_RADIUS = 18; // half chip height for collision
     static CHIP_COLLISION_BORDER_PADDING = 6;
     static MAX_LINK_DISTANCE = 120;
@@ -1968,11 +2015,15 @@ class ProfileComparisonLibComponent {
                     this.log('fetchComparison', 'ignoring stale error', { requestId, current: this.fetchRequestId, status: err?.status });
                     return;
                 }
-                this.log('fetchComparison', 'backend error', err);
-                const msg = err?.error?.message ?? err?.message ?? err?.statusText ?? (typeof err?.error === 'string' ? err.error : null) ?? 'Request failed';
-                this.backendError = msg;
-                console.error('[ProfileComparisonLib] fetchComparison error', err?.status ?? '', msg);
+                this.log('fetchComparison', 'backend unavailable, using raw interests as fallback', err);
                 this.isAligning = false;
+                this.backendError = null;
+                this.displayPerson1Interests = [...this.person1Interests];
+                this.displayPerson2Interests = [...this.person2Interests];
+                this.alignedPerson1Interests = [];
+                this.alignedPerson2Interests = [];
+                this.centerItem = this.findNaiveOverlap(this.person1Interests, this.person2Interests);
+                this.buildForceGraph();
                 this.cdr.detectChanges();
             }
         });
@@ -2526,6 +2577,11 @@ class ProfileComparisonLibComponent {
         }
         return selected;
     }
+    findNaiveOverlap(list1, list2) {
+        const norm = (s) => s.trim().toLowerCase();
+        const set2 = new Set((list2 ?? []).map(norm));
+        return (list1 ?? []).filter(item => set2.has(norm(item)));
+    }
     filterCenterItemsByThreshold(centerItems, p1Items, p2Items) {
         if (!centerItems?.length)
             return [];
@@ -2731,17 +2787,33 @@ class ProfileComparisonLibComponent {
         if (matrixMax <= springThreshold)
             matrixMax = 1.0;
         const simRange = matrixMax - springThreshold;
-        const distributedYForIndex = (index, total) => {
-            if (total <= 1)
-                return minCenterY + verticalSpan * 0.5;
-            const t = index / Math.max(1, total - 1);
-            return minCenterY + verticalSpan * t;
+        const columnCoreY = minCenterY + verticalSpan * 0.5;
+        const getMedian = (values) => {
+            if (!values.length)
+                return 0;
+            const sorted = [...values].sort((a, b) => a - b);
+            const mid = Math.floor(sorted.length / 2);
+            if (sorted.length % 2 === 1)
+                return sorted[mid];
+            return (sorted[mid - 1] + sorted[mid]) / 2;
+        };
+        const getTopSixMedian = (values) => {
+            if (!values.length)
+                return 0;
+            const top = [...values].sort((a, b) => b - a).slice(0, Math.min(6, values.length));
+            return getMedian(top);
+        };
+        const hashToken = (value) => {
+            let hash = 0;
+            for (let i = 0; i < value.length; i++) {
+                hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0;
+            }
+            return Math.abs(hash);
         };
         const nodes = [];
         const addNodes = (items, group, zoneX) => {
-            const total = items.length;
             items.forEach((label, i) => {
-                const targetY = distributedYForIndex(i, total);
+                const targetY = columnCoreY;
                 nodes.push({
                     id: `${group}-${i}-${label}`,
                     label,
@@ -2782,8 +2854,10 @@ class ProfileComparisonLibComponent {
                     : zoneP2 + (zoneShared - zoneP2) * centerPull;
             }
         });
-        // Vertical placement should be driven by cross-list similarity, not by
-        // whichever list happens to have fewer items.
+        // Build a relative attractiveness score (median of top-six similarities)
+        // and seed chips from each column core with only a tiny 9x9 perturbation.
+        // This lets forces "emanate" from a shared origin while preserving
+        // deterministic reset behavior.
         const semanticPool = (node) => {
             if (node.group === 'p1')
                 return nodes.filter(n => n.group === 'p2' || n.group === 'shared');
@@ -2791,35 +2865,50 @@ class ProfileComparisonLibComponent {
                 return nodes.filter(n => n.group === 'p1' || n.group === 'shared');
             return nodes.filter(n => n.group === 'p1' || n.group === 'p2');
         };
-        const ySimilarityFloor = Math.max(0.18, springThreshold - 0.06);
-        for (let pass = 0; pass < 6; pass++) {
-            const snapshotY = new Map();
-            nodes.forEach(node => {
-                snapshotY.set(node.id, node.targetY ?? (minCenterY + verticalSpan * 0.5));
-            });
-            nodes.forEach(node => {
-                const pool = semanticPool(node);
-                if (!pool.length)
+        const getSemanticAttractiveness = (node) => {
+            const pool = semanticPool(node);
+            if (!pool.length)
+                return 0;
+            const similarities = pool.map(other => Math.max(0, this.getSimilarity(node.label, other.label)));
+            return getTopSixMedian(similarities);
+        };
+        const microSeedSpan = ProfileComparisonLibComponent.COLUMN_CORE_SEED_PIXELS;
+        const microSeedHalf = microSeedSpan / 2;
+        const deterministicPasses = ProfileComparisonLibComponent.DETERMINISTIC_SEED_PASSES;
+        const deterministicBlend = ProfileComparisonLibComponent.DETERMINISTIC_SEED_BLEND;
+        for (let pass = 0; pass < deterministicPasses; pass++) {
+            ['p1', 'shared', 'p2'].forEach(group => {
+                const groupNodes = nodes.filter(node => node.group === group);
+                if (groupNodes.length <= 1)
                     return;
-                let weightedY = 0;
-                let totalWeight = 0;
-                pool.forEach(other => {
-                    const similarity = this.getSimilarity(node.label, other.label);
-                    if (similarity < ySimilarityFloor)
-                        return;
-                    const weight = Math.pow(Math.max(0.001, similarity - ySimilarityFloor + 0.05), 2);
-                    const otherY = snapshotY.get(other.id) ?? (other.targetY ?? minCenterY);
-                    weightedY += otherY * weight;
-                    totalWeight += weight;
+                const ranked = groupNodes
+                    .map(node => ({
+                    node,
+                    attractiveness: getSemanticAttractiveness(node),
+                    tie: this.normalizeSimilarityToken(node.label),
+                }))
+                    .sort((a, b) => (b.attractiveness - a.attractiveness) || a.tie.localeCompare(b.tie));
+                ranked.forEach((entry, index) => {
+                    const rankT = ranked.length <= 1 ? 0.5 : (index / Math.max(1, ranked.length - 1));
+                    const yOffset = (rankT - 0.5) * microSeedSpan;
+                    const desiredY = Math.max(minCenterY, Math.min(maxY, columnCoreY + yOffset));
+                    const currentY = entry.node.targetY ?? columnCoreY;
+                    entry.node.targetY = Math.max(minCenterY, Math.min(maxY, currentY + (desiredY - currentY) * deterministicBlend));
+                    const xSeedRaw = hashToken(`${entry.node.id}:${pass}`) % (microSeedSpan + 1);
+                    const xOffset = xSeedRaw - microSeedHalf;
+                    const baseTargetX = entry.node.targetX ?? (entry.node.group === 'p1'
+                        ? zoneP1
+                        : (entry.node.group === 'p2' ? zoneP2 : zoneShared));
+                    entry.node.x = Math.max(globalMinX, Math.min(globalMaxX, baseTargetX + xOffset));
+                    entry.node.y = entry.node.targetY;
                 });
-                if (totalWeight <= 0)
-                    return;
-                const semanticY = weightedY / totalWeight;
-                const currentY = snapshotY.get(node.id) ?? semanticY;
-                const blend = node.group === 'shared' ? 0.84 : 0.78;
-                node.targetY = Math.max(minCenterY, Math.min(maxY, currentY + (semanticY - currentY) * blend));
             });
         }
+        nodes.forEach(node => {
+            const fallbackX = node.targetX ?? (node.group === 'p1' ? zoneP1 : (node.group === 'p2' ? zoneP2 : zoneShared));
+            node.x = Math.max(globalMinX, Math.min(globalMaxX, node.x ?? fallbackX));
+            node.y = Math.max(minCenterY, Math.min(maxY, node.targetY ?? columnCoreY));
+        });
         const buildNodeBounds = (node) => {
             let minX = globalMinX;
             let maxX = globalMaxX;
@@ -2999,10 +3088,96 @@ class ProfileComparisonLibComponent {
             };
         })
             .filter((record) => !!record);
+        const dissimilarThreshold = ProfileComparisonLibComponent.DISSIMILAR_REPEL_THRESHOLD;
+        const dissimilarPairs = [];
+        for (let i = 0; i < nodes.length; i++) {
+            for (let j = i + 1; j < nodes.length; j++) {
+                const source = nodes[i];
+                const target = nodes[j];
+                const similarity = Math.max(0, this.getSimilarity(source.label, target.label));
+                if (similarity >= dissimilarThreshold)
+                    continue;
+                const laneFactor = source.group === target.group
+                    ? 1
+                    : (source.group === 'shared' || target.group === 'shared' ? 0.62 : 0.44);
+                const repulsion = laneFactor * (dissimilarThreshold - similarity) / Math.max(0.001, dissimilarThreshold);
+                dissimilarPairs.push({
+                    source,
+                    target,
+                    repulsion,
+                });
+            }
+        }
+        const relativeMedianByNode = new Map();
+        const relativeMedianPairs = [];
+        ['p1', 'shared', 'p2'].forEach(group => {
+            const groupNodes = nodes.filter(node => node.group === group);
+            if (groupNodes.length <= 1)
+                return;
+            groupNodes.forEach(node => {
+                const similarities = groupNodes
+                    .filter(other => other.id !== node.id)
+                    .map(other => Math.max(0, this.getSimilarity(node.label, other.label)));
+                relativeMedianByNode.set(node.id, getTopSixMedian(similarities));
+            });
+            for (let i = 0; i < groupNodes.length; i++) {
+                for (let j = i + 1; j < groupNodes.length; j++) {
+                    const source = groupNodes[i];
+                    const target = groupNodes[j];
+                    const similarity = Math.max(0, this.getSimilarity(source.label, target.label));
+                    const sourceMedian = relativeMedianByNode.get(source.id) ?? 0;
+                    const targetMedian = relativeMedianByNode.get(target.id) ?? 0;
+                    const median = (sourceMedian + targetMedian) / 2;
+                    relativeMedianPairs.push({ source, target, similarity, median });
+                }
+            }
+        });
         const maxLinkSimilarity = Math.max(0.001, ...linkRecords.map(record => Math.max(0, record.similarity)));
         const MIN_PAIR_DISTANCE = 34;
         const MAX_PAIR_DISTANCE = 88;
+        const semanticAlphaFloor = ProfileComparisonLibComponent.SEMANTIC_STABILITY_ALPHA_FLOOR;
+        const relativeMedianColumnForce = (alpha) => {
+            const effectiveAlpha = Math.max(alpha, ProfileComparisonLibComponent.RELATIVE_MEDIAN_ALPHA_FLOOR);
+            const attractStrength = ProfileComparisonLibComponent.RELATIVE_MEDIAN_ATTRACT_STRENGTH;
+            const repelStrength = ProfileComparisonLibComponent.RELATIVE_MEDIAN_REPEL_STRENGTH;
+            const attractRadius = ProfileComparisonLibComponent.RELATIVE_MEDIAN_ATTRACT_RADIUS;
+            const repelRadius = ProfileComparisonLibComponent.RELATIVE_MEDIAN_REPEL_RADIUS;
+            const deltaDeadband = 0.025;
+            relativeMedianPairs.forEach(pair => {
+                const dx = (pair.target.x ?? 0) - (pair.source.x ?? 0);
+                const dy = (pair.target.y ?? 0) - (pair.source.y ?? 0);
+                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                const delta = pair.similarity - pair.median;
+                if (Math.abs(delta) <= deltaDeadband)
+                    return;
+                if (delta >= 0) {
+                    const closenessBias = Math.max(0.08, Math.min(1, delta + 0.08));
+                    const targetDistance = Math.max(24, attractRadius - closenessBias * 46);
+                    if (dist <= targetDistance + 2)
+                        return;
+                    const pull = attractStrength * effectiveAlpha * closenessBias * ((dist - targetDistance) / dist);
+                    pair.source.vx = (pair.source.vx ?? 0) + dx * pull;
+                    pair.source.vy = (pair.source.vy ?? 0) + dy * pull;
+                    pair.target.vx = (pair.target.vx ?? 0) - dx * pull;
+                    pair.target.vy = (pair.target.vy ?? 0) - dy * pull;
+                    return;
+                }
+                if (dist >= repelRadius || dist <= 28)
+                    return;
+                const underMedian = Math.min(1, Math.abs(delta) / Math.max(0.001, pair.median + 0.05));
+                const push = repelStrength * effectiveAlpha * underMedian * (1 - (dist / repelRadius));
+                if (push <= 0)
+                    return;
+                const unitX = dx / dist;
+                const unitY = dy / dist;
+                pair.source.vx = (pair.source.vx ?? 0) - unitX * push;
+                pair.source.vy = (pair.source.vy ?? 0) - unitY * push;
+                pair.target.vx = (pair.target.vx ?? 0) + unitX * push;
+                pair.target.vy = (pair.target.vy ?? 0) + unitY * push;
+            });
+        };
         const similarityAttractionForce = (alpha) => {
+            const effectiveAlpha = Math.max(alpha, semanticAlphaFloor);
             linkRecords.forEach(record => {
                 const dx = (record.target.x ?? 0) - (record.source.x ?? 0);
                 const dy = (record.target.y ?? 0) - (record.source.y ?? 0);
@@ -3012,14 +3187,348 @@ class ProfileComparisonLibComponent {
                 if (dist <= targetDistance)
                     return;
                 const pullGap = dist - targetDistance;
-                const pullBase = record.kind === 'cross' ? 0.9 : 0.82;
-                const pullFactor = pullBase * alpha * (pullGap / dist);
+                const pullBase = record.kind === 'cross' ? 0.86 : 0.78;
+                const nonlinearBoost = 1
+                    + Math.pow(normalizedSimilarity, ProfileComparisonLibComponent.STRONG_SIMILARITY_BOOST_EXPONENT)
+                        * ProfileComparisonLibComponent.STRONG_SIMILARITY_BOOST_SCALE;
+                const pullFactor = pullBase * nonlinearBoost * effectiveAlpha * (pullGap / dist);
                 record.source.vx = (record.source.vx ?? 0) + dx * pullFactor;
                 record.source.vy = (record.source.vy ?? 0) + dy * pullFactor;
                 record.target.vx = (record.target.vx ?? 0) - dx * pullFactor;
                 record.target.vy = (record.target.vy ?? 0) - dy * pullFactor;
             });
         };
+        const dissimilarRepulsionForce = (alpha) => {
+            const effectiveAlpha = Math.max(alpha, semanticAlphaFloor * 0.9);
+            const maxDistance = ProfileComparisonLibComponent.DISSIMILAR_REPEL_MAX_DISTANCE;
+            const decayDistance = ProfileComparisonLibComponent.DISSIMILAR_REPEL_DECAY_DISTANCE;
+            const baseStrength = ProfileComparisonLibComponent.DISSIMILAR_REPEL_STRENGTH;
+            dissimilarPairs.forEach(record => {
+                const dx = (record.target.x ?? 0) - (record.source.x ?? 0);
+                const dy = (record.target.y ?? 0) - (record.source.y ?? 0);
+                const rawDistance = Math.sqrt(dx * dx + dy * dy) || 1;
+                if (rawDistance >= maxDistance)
+                    return;
+                const distance = Math.max(8, rawDistance);
+                const closeness = 1 - Math.min(1, distance / maxDistance);
+                const decay = Math.exp(-Math.pow(distance / Math.max(1, decayDistance), 2));
+                const push = baseStrength * effectiveAlpha * record.repulsion * closeness * decay;
+                if (push <= 0)
+                    return;
+                const unitX = dx / distance;
+                const unitY = dy / distance;
+                record.source.vx = (record.source.vx ?? 0) - unitX * push;
+                record.source.vy = (record.source.vy ?? 0) - unitY * push;
+                record.target.vx = (record.target.vx ?? 0) + unitX * push;
+                record.target.vy = (record.target.vy ?? 0) + unitY * push;
+            });
+        };
+        const priorityMinSimilarity = ProfileComparisonLibComponent.PRIORITY_PAIR_MIN_SIMILARITY;
+        const priorityPairCandidates = [...crossCandidates, ...intraCandidates]
+            .filter(link => link.similarity >= priorityMinSimilarity)
+            .sort((a, b) => (b.similarity - a.similarity) || (b.strength - a.strength));
+        const priorityPairKeys = new Set();
+        const endpointClaims = new Map();
+        const maxPairsPerNode = 2;
+        const getClaimCount = (id) => endpointClaims.get(id) ?? 0;
+        const priorityPairs = priorityPairCandidates
+            .filter(candidate => {
+            const sourceId = this.getLinkNodeId(candidate.source);
+            const targetId = this.getLinkNodeId(candidate.target);
+            const key = this.getLinkPairKey(sourceId, targetId);
+            if (priorityPairKeys.has(key))
+                return false;
+            if (getClaimCount(sourceId) >= maxPairsPerNode || getClaimCount(targetId) >= maxPairsPerNode)
+                return false;
+            priorityPairKeys.add(key);
+            endpointClaims.set(sourceId, getClaimCount(sourceId) + 1);
+            endpointClaims.set(targetId, getClaimCount(targetId) + 1);
+            return true;
+        })
+            .map(link => {
+            const source = typeof link.source === 'object' ? link.source : nodeById.get(String(link.source));
+            const target = typeof link.target === 'object' ? link.target : nodeById.get(String(link.target));
+            if (!source || !target)
+                return null;
+            return {
+                source,
+                target,
+                similarity: Math.max(priorityMinSimilarity, Number(link.similarity ?? 0)),
+            };
+        })
+            .filter((pair) => !!pair);
+        const maxPrioritySimilarity = Math.max(priorityMinSimilarity, ...priorityPairs.map(pair => pair.similarity));
+        const priorityPairForce = (alpha) => {
+            const effectiveAlpha = Math.max(alpha, semanticAlphaFloor);
+            const pairStrength = ProfileComparisonLibComponent.PRIORITY_PAIR_ATTRACTION_STRENGTH;
+            const corridorRadius = ProfileComparisonLibComponent.PRIORITY_PAIR_CORRIDOR_RADIUS;
+            const corridorRepel = ProfileComparisonLibComponent.PRIORITY_PAIR_CORRIDOR_REPEL_STRENGTH;
+            priorityPairs.forEach(pair => {
+                const ax = pair.source.x ?? 0;
+                const ay = pair.source.y ?? 0;
+                const bx = pair.target.x ?? 0;
+                const by = pair.target.y ?? 0;
+                const dx = bx - ax;
+                const dy = by - ay;
+                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                const similarityNorm = Math.max(0, Math.min(1, pair.similarity / Math.max(0.001, maxPrioritySimilarity)));
+                const targetDistance = 26 + (1 - similarityNorm) * 20;
+                if (dist > targetDistance) {
+                    const pull = pairStrength * effectiveAlpha * ((dist - targetDistance) / dist);
+                    pair.source.vx = (pair.source.vx ?? 0) + dx * pull;
+                    pair.source.vy = (pair.source.vy ?? 0) + dy * pull;
+                    pair.target.vx = (pair.target.vx ?? 0) - dx * pull;
+                    pair.target.vy = (pair.target.vy ?? 0) - dy * pull;
+                }
+                const segmentLenSq = dx * dx + dy * dy;
+                if (segmentLenSq <= 1)
+                    return;
+                nodes.forEach(candidate => {
+                    if (candidate.id === pair.source.id || candidate.id === pair.target.id)
+                        return;
+                    const candidateSimilarity = Math.max(this.getSimilarity(candidate.label, pair.source.label), this.getSimilarity(candidate.label, pair.target.label));
+                    if (candidateSimilarity >= pair.similarity * 0.74)
+                        return;
+                    const px = candidate.x ?? 0;
+                    const py = candidate.y ?? 0;
+                    const tRaw = ((px - ax) * dx + (py - ay) * dy) / segmentLenSq;
+                    const t = Math.max(0, Math.min(1, tRaw));
+                    if (t <= 0.12 || t >= 0.88)
+                        return;
+                    const closestX = ax + dx * t;
+                    const closestY = ay + dy * t;
+                    const offX = px - closestX;
+                    const offY = py - closestY;
+                    const offDist = Math.sqrt(offX * offX + offY * offY) || 1;
+                    if (offDist >= corridorRadius)
+                        return;
+                    const proximity = 1 - (offDist / corridorRadius);
+                    const mismatch = 1 - Math.max(0, Math.min(1, candidateSimilarity / Math.max(0.001, pair.similarity)));
+                    const push = corridorRepel * effectiveAlpha * proximity * mismatch;
+                    if (push <= 0)
+                        return;
+                    const unitOffX = offX / offDist;
+                    const unitOffY = offY / offDist;
+                    candidate.vx = (candidate.vx ?? 0) + unitOffX * push;
+                    candidate.vy = (candidate.vy ?? 0) + unitOffY * push;
+                    // Counter-force keeps the pair stable while opening a semantic corridor.
+                    const damp = push * 0.24;
+                    pair.source.vx = (pair.source.vx ?? 0) - unitOffX * damp;
+                    pair.source.vy = (pair.source.vy ?? 0) - unitOffY * damp;
+                    pair.target.vx = (pair.target.vx ?? 0) - unitOffX * damp;
+                    pair.target.vy = (pair.target.vy ?? 0) - unitOffY * damp;
+                });
+            });
+        };
+        const bestByNode = new Map();
+        nodes.forEach(node => {
+            let bestNode = null;
+            let best = -1;
+            let second = -1;
+            nodes.forEach(other => {
+                if (other.id === node.id)
+                    return;
+                const similarity = Math.max(0, this.getSimilarity(node.label, other.label));
+                if (similarity > best) {
+                    second = best;
+                    best = similarity;
+                    bestNode = other;
+                }
+                else if (similarity > second) {
+                    second = similarity;
+                }
+            });
+            bestByNode.set(node.id, { node: bestNode, best: Math.max(0, best), second: Math.max(0, second) });
+        });
+        const mutualPairMinSimilarity = ProfileComparisonLibComponent.MUTUAL_TOP_PAIR_MIN_SIMILARITY;
+        const mutualPairMargin = ProfileComparisonLibComponent.MUTUAL_TOP_PAIR_MARGIN;
+        const mutualPairKeys = new Set();
+        const mutualTopPairs = nodes
+            .map(node => {
+            const best = bestByNode.get(node.id);
+            if (!best?.node)
+                return null;
+            if (best.best < mutualPairMinSimilarity)
+                return null;
+            if (best.best - best.second < mutualPairMargin)
+                return null;
+            const reverse = bestByNode.get(best.node.id);
+            if (!reverse?.node || reverse.node.id !== node.id)
+                return null;
+            if (reverse.best < mutualPairMinSimilarity || reverse.best - reverse.second < mutualPairMargin)
+                return null;
+            const key = this.getLinkPairKey(node.id, best.node.id);
+            if (mutualPairKeys.has(key))
+                return null;
+            mutualPairKeys.add(key);
+            return {
+                source: node,
+                target: best.node,
+                similarity: Math.min(best.best, reverse.best),
+            };
+        })
+            .filter((pair) => !!pair);
+        const mutualTopPairForce = (alpha) => {
+            const effectiveAlpha = Math.max(alpha, semanticAlphaFloor * 1.15);
+            const attractionStrength = ProfileComparisonLibComponent.MUTUAL_TOP_PAIR_ATTRACTION_STRENGTH;
+            const baseBarrierRadius = ProfileComparisonLibComponent.MUTUAL_TOP_PAIR_BARRIER_RADIUS;
+            const repelStrength = ProfileComparisonLibComponent.MUTUAL_TOP_PAIR_REPEL_STRENGTH;
+            mutualTopPairs.forEach(pair => {
+                const ax = pair.source.x ?? 0;
+                const ay = pair.source.y ?? 0;
+                const bx = pair.target.x ?? 0;
+                const by = pair.target.y ?? 0;
+                const dx = bx - ax;
+                const dy = by - ay;
+                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                const norm = Math.max(0, Math.min(1, pair.similarity));
+                const targetDistance = 24 + (1 - norm) * 26;
+                if (dist > targetDistance) {
+                    const pull = attractionStrength * effectiveAlpha * ((dist - targetDistance) / dist);
+                    pair.source.vx = (pair.source.vx ?? 0) + dx * pull;
+                    pair.source.vy = (pair.source.vy ?? 0) + dy * pull;
+                    pair.target.vx = (pair.target.vx ?? 0) - dx * pull;
+                    pair.target.vy = (pair.target.vy ?? 0) - dy * pull;
+                }
+                const segmentLenSq = dx * dx + dy * dy;
+                if (segmentLenSq <= 1)
+                    return;
+                const barrierRadius = baseBarrierRadius + (1 - norm) * 10;
+                nodes.forEach(candidate => {
+                    if (candidate.id === pair.source.id || candidate.id === pair.target.id)
+                        return;
+                    const candidateSimilarity = Math.max(this.getSimilarity(candidate.label, pair.source.label), this.getSimilarity(candidate.label, pair.target.label));
+                    if (candidateSimilarity >= pair.similarity * 0.76)
+                        return;
+                    const px = candidate.x ?? 0;
+                    const py = candidate.y ?? 0;
+                    const tRaw = ((px - ax) * dx + (py - ay) * dy) / segmentLenSq;
+                    const t = Math.max(0, Math.min(1, tRaw));
+                    if (t <= 0.08 || t >= 0.92)
+                        return;
+                    const closestX = ax + dx * t;
+                    const closestY = ay + dy * t;
+                    const offX = px - closestX;
+                    const offY = py - closestY;
+                    const offDist = Math.sqrt(offX * offX + offY * offY) || 1;
+                    if (offDist >= barrierRadius)
+                        return;
+                    const proximity = 1 - (offDist / barrierRadius);
+                    const mismatch = 1 - Math.max(0, Math.min(1, candidateSimilarity / Math.max(0.001, pair.similarity)));
+                    const push = repelStrength * effectiveAlpha * proximity * mismatch;
+                    if (push <= 0)
+                        return;
+                    const unitOffX = offX / offDist;
+                    const unitOffY = offY / offDist;
+                    candidate.vx = (candidate.vx ?? 0) + unitOffX * push;
+                    candidate.vy = (candidate.vy ?? 0) + unitOffY * push;
+                    const damp = push * 0.26;
+                    pair.source.vx = (pair.source.vx ?? 0) - unitOffX * damp;
+                    pair.source.vy = (pair.source.vy ?? 0) - unitOffY * damp;
+                    pair.target.vx = (pair.target.vx ?? 0) - unitOffX * damp;
+                    pair.target.vy = (pair.target.vy ?? 0) - unitOffY * damp;
+                });
+            });
+        };
+        const runObjectiveOptimizer = () => {
+            if (!nodes.length)
+                return;
+            const attractionFloor = springThreshold;
+            const dissimilarFloor = dissimilarThreshold;
+            const pairRecords = [];
+            for (let i = 0; i < nodes.length; i++) {
+                for (let j = i + 1; j < nodes.length; j++) {
+                    const similarity = Math.max(0, this.getSimilarity(nodes[i].label, nodes[j].label));
+                    if (similarity <= dissimilarFloor || similarity >= attractionFloor) {
+                        pairRecords.push({ a: nodes[i], b: nodes[j], similarity });
+                    }
+                }
+            }
+            const iterations = ProfileComparisonLibComponent.OBJECTIVE_OPTIMIZER_ITERATIONS;
+            const stepStart = ProfileComparisonLibComponent.OBJECTIVE_STEP_START;
+            const stepEnd = ProfileComparisonLibComponent.OBJECTIVE_STEP_END;
+            const attractionWeight = ProfileComparisonLibComponent.OBJECTIVE_ATTRACTION_WEIGHT;
+            const repulsionWeight = ProfileComparisonLibComponent.OBJECTIVE_REPULSION_WEIGHT;
+            const anchorWeight = ProfileComparisonLibComponent.OBJECTIVE_ANCHOR_WEIGHT;
+            const boundaryWeight = ProfileComparisonLibComponent.OBJECTIVE_BOUNDARY_WEIGHT;
+            for (let iteration = 0; iteration < iterations; iteration++) {
+                const progress = iteration / Math.max(1, iterations - 1);
+                const step = stepStart + (stepEnd - stepStart) * progress;
+                const gradient = new Map();
+                nodes.forEach(node => gradient.set(node.id, { x: 0, y: 0 }));
+                pairRecords.forEach(record => {
+                    const ax = record.a.x ?? record.a.targetX ?? 0;
+                    const ay = record.a.y ?? record.a.targetY ?? 0;
+                    const bx = record.b.x ?? record.b.targetX ?? 0;
+                    const by = record.b.y ?? record.b.targetY ?? 0;
+                    const dx = bx - ax;
+                    const dy = by - ay;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const unitX = dx / dist;
+                    const unitY = dy / dist;
+                    if (record.similarity >= attractionFloor) {
+                        const normalized = Math.max(0, Math.min(1, (record.similarity - attractionFloor) / Math.max(0.001, 1 - attractionFloor)));
+                        const targetDistance = 24 + (1 - normalized) * 66;
+                        if (dist > targetDistance) {
+                            const pull = attractionWeight * Math.pow(normalized, 1.4) * ((dist - targetDistance) / dist);
+                            const gradA = gradient.get(record.a.id);
+                            const gradB = gradient.get(record.b.id);
+                            if (gradA && gradB) {
+                                gradA.x += dx * pull;
+                                gradA.y += dy * pull;
+                                gradB.x -= dx * pull;
+                                gradB.y -= dy * pull;
+                            }
+                        }
+                        return;
+                    }
+                    if (record.similarity > dissimilarFloor)
+                        return;
+                    const normalized = (dissimilarFloor - record.similarity) / Math.max(0.001, dissimilarFloor);
+                    const maxDistance = 210;
+                    if (dist >= maxDistance)
+                        return;
+                    const push = repulsionWeight * normalized * (1 - (dist / maxDistance));
+                    const gradA = gradient.get(record.a.id);
+                    const gradB = gradient.get(record.b.id);
+                    if (gradA && gradB) {
+                        gradA.x -= unitX * push;
+                        gradA.y -= unitY * push;
+                        gradB.x += unitX * push;
+                        gradB.y += unitY * push;
+                    }
+                });
+                nodes.forEach(node => {
+                    const grad = gradient.get(node.id);
+                    if (!grad)
+                        return;
+                    const currentX = node.x ?? node.targetX ?? zoneShared;
+                    const currentY = node.y ?? node.targetY ?? minCenterY;
+                    const targetX = node.targetX ?? currentX;
+                    const targetY = node.targetY ?? currentY;
+                    grad.x += (targetX - currentX) * anchorWeight;
+                    grad.y += (targetY - currentY) * anchorWeight;
+                    const bounds = nodeBounds.get(node.id) ?? buildNodeBounds(node);
+                    if (currentX < bounds.minX)
+                        grad.x += (bounds.minX - currentX) * boundaryWeight;
+                    if (currentX > bounds.maxX)
+                        grad.x -= (currentX - bounds.maxX) * boundaryWeight;
+                    if (currentY < bounds.minY)
+                        grad.y += (bounds.minY - currentY) * boundaryWeight;
+                    if (currentY > bounds.maxY)
+                        grad.y -= (currentY - bounds.maxY) * boundaryWeight;
+                });
+                nodes.forEach(node => {
+                    const grad = gradient.get(node.id);
+                    if (!grad)
+                        return;
+                    node.x = (node.x ?? node.targetX ?? zoneShared) + grad.x * step;
+                    node.y = (node.y ?? node.targetY ?? minCenterY) + grad.y * step;
+                    clampNodeToBounds(node);
+                });
+            }
+        };
+        runObjectiveOptimizer();
         this.ngZone.runOutsideAngular(() => {
             const sim = forceSimulation(nodes)
                 .alphaDecay(0.014)
@@ -3038,7 +3547,11 @@ class ProfileComparisonLibComponent {
                 .strength(d => d.group === 'shared' ? 1.15 : 0.85))
                 .force('yTargetSeed', forceY(d => d.targetY ?? minCenterY).strength(0.1))
                 .force('crossAlign', crossAlignForce)
-                .force('similarityAttraction', similarityAttractionForce);
+                .force('relativeMedianColumn', relativeMedianColumnForce)
+                .force('similarityAttraction', similarityAttractionForce)
+                .force('dissimilarRepulsion', dissimilarRepulsionForce)
+                .force('priorityPair', priorityPairForce)
+                .force('mutualTopPair', mutualTopPairForce);
             for (let i = 0; i < 420 && sim.alpha() > 0.0035; i++) {
                 sim.tick();
                 nodes.forEach(n => {
@@ -3054,8 +3567,9 @@ class ProfileComparisonLibComponent {
             sim.force('yTargetSeed', null);
             sim.force('crossAlign', null);
             sim.force('xTarget', forceX(d => d.originalFx ?? d.x ?? 0)
-                .strength(d => d.group === 'shared' ? 0.12 : 0.045));
-            sim.force('yTarget', forceY(d => d.originalFy ?? d.y ?? 0).strength(0.045));
+                .strength(d => d.group === 'shared' ? 0.085 : 0.03));
+            sim.force('yTarget', forceY(d => d.originalFy ?? d.y ?? 0).strength(0.03));
+            sim.alphaTarget(ProfileComparisonLibComponent.IDLE_ALPHA_TARGET);
             this.simulation = sim;
             this.ngZone.run(() => {
                 this.forceNodes = [...nodes];
@@ -3493,10 +4007,14 @@ class ProfileComparisonLibComponent {
             return;
         this.simulation.force('attraction', null);
         if (anchorNode) {
-            this.simulation.alpha(0.24).restart();
+            const minClickAlpha = ProfileComparisonLibComponent.CLICK_REHEAT_ALPHA;
+            if (this.simulation.alpha() < minClickAlpha) {
+                this.simulation.alpha(minClickAlpha);
+            }
+            this.simulation.alphaTarget(ProfileComparisonLibComponent.IDLE_ALPHA_TARGET).restart();
         }
         else if (!this.isDragging) {
-            this.simulation.alphaTarget(0);
+            this.simulation.alphaTarget(ProfileComparisonLibComponent.IDLE_ALPHA_TARGET);
         }
     }
     isNodeConnected(node) {
@@ -3595,10 +4113,10 @@ class ProfileComparisonLibComponent {
                 collideForce.strength(1.0);
             const xTarget = this.simulation.force('xTarget');
             if (xTarget)
-                xTarget.strength((d) => d.group === 'shared' ? 0.12 : 0.05);
+                xTarget.strength((d) => d.group === 'shared' ? 0.1 : 0.045);
             const yTarget = this.simulation.force('yTarget');
             if (yTarget)
-                yTarget.strength(0.05);
+                yTarget.strength(0.042);
         }
         // Pull connected chips toward the dragged node
         this.updateAttractionForce(node);
@@ -3657,21 +4175,21 @@ class ProfileComparisonLibComponent {
                 collideForce.strength(1.0);
             const xTarget = this.simulation.force('xTarget');
             if (xTarget)
-                xTarget.strength((d) => d.group === 'shared' ? 0.12 : 0.045);
+                xTarget.strength((d) => d.group === 'shared' ? 0.1 : 0.045);
             const yTarget = this.simulation.force('yTarget');
             if (yTarget)
-                yTarget.strength(0.045);
+                yTarget.strength(0.042);
         }
         // Cool down simulation targets
-        this.simulation.alphaTarget(0);
-        this.simulation.alpha(0.4).restart();
+        this.simulation.alphaTarget(ProfileComparisonLibComponent.IDLE_ALPHA_TARGET);
+        this.simulation.alpha(0.2).restart();
         this.draggedNode = null;
         this.isDragging = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", user1File: "user1File", user2File: "user2File", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges", person1Name: "person1Name", person2Name: "person2Name", imageProxyPath: "imageProxyPath" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick()", "document:mousemove": "onDocumentDragMove($event)", "document:touchmove": "onDocumentDragMove($event)", "document:mouseup": "onDocumentDragEnd()", "document:touchend": "onDocumentDragEnd()" } }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }, { propertyName: "chipsGrid", first: true, predicate: ["chipsGrid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\r\n      <g filter=\"url(#filter0_n_1_1753)\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\r\n      </g>\r\n      <defs>\r\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\r\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\r\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\r\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\r\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\r\n          </feComponentTransfer>\r\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\r\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\r\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\r\n          <feMerge result=\"effect1_noise_1_1753\">\r\n            <feMergeNode in=\"shape\"/>\r\n            <feMergeNode in=\"color1\"/>\r\n          </feMerge>\r\n        </filter>\r\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\r\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\r\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\r\n        </radialGradient>\r\n      </defs>\r\n    </svg>\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.top]=\"user1Top\"\r\n        [style.height]=\"user1Height\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.top]=\"user2Top\"\r\n        [style.height]=\"user2Height\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"image-shade-overlay\"></div>\r\n\r\n  <!-- Frosted Glass Overlay Layer -->\r\n  <div class=\"overlay-container\">\r\n    <!-- Top Headers \u2014 absolutely positioned overlays, exactly as original -->\r\n    <div class=\"header-label left\">{{ person1Name }}</div>\r\n    <div class=\"header-label center\">Shared</div>\r\n    <div class=\"header-label right\">{{ person2Name }}</div>\r\n\r\n    <!-- Force-directed chip canvas (scrollable) -->\r\n    <div class=\"chips-grid\" #chipsGrid>\r\n      <div class=\"force-canvas\" [style.height.px]=\"forceCanvasHeight\">\r\n        <!-- SVG Connections Layer -->\r\n        <svg class=\"connections-svg\" [style.height.px]=\"forceCanvasHeight\">\r\n          <line\r\n            *ngFor=\"let link of sortedForceLinks\"\r\n            [attr.x1]=\"getLinkSourceX(link)\"\r\n            [attr.y1]=\"getLinkSourceY(link)\"\r\n            [attr.x2]=\"getLinkTargetX(link)\"\r\n            [attr.y2]=\"getLinkTargetY(link)\"\r\n            class=\"connection-line\"\r\n            [class.active]=\"isLinkConnectedToActive(link)\"\r\n            [class.cross-group]=\"isCrossGroupLink(link)\"\r\n          ></line>\r\n        </svg>\r\n\r\n        <div\r\n          *ngFor=\"let node of forceNodes\"\r\n          class=\"frosted-chip\"\r\n          [class.person-a]=\"node.group === 'p1'\"\r\n          [class.shared]=\"node.group === 'shared'\"\r\n          [class.person-b]=\"node.group === 'p2'\"\r\n          [class.active]=\"activeNode === node\"\r\n          [class.dimmed]=\"activeNode && !isNodeConnected(node)\"\r\n          [style.left.px]=\"node.x\"\r\n          [style.top.px]=\"node.y\"\r\n          [style.padding]=\"chipPaddingYPx + 'px ' + chipPaddingXPx + 'px'\"\r\n          (mouseenter)=\"onNodeMouseEnter(node)\"\r\n          (mouseleave)=\"onNodeMouseLeave(node)\"\r\n          (click)=\"onNodeClick(node, $event)\"\r\n          (mousedown)=\"onNodeDragStart(node, $event)\"\r\n          (touchstart)=\"onNodeDragStart(node, $event)\"\r\n        >\r\n          <span\r\n            class=\"chip-label\"\r\n            [style.font-size.px]=\"chipFontSizePx\"\r\n            [style.line-height]=\"chipLineHeight\"\r\n          >{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Bottom Actions -->\r\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\r\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);--name-label-font-size: 14px}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:25%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{left:75%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.chips-grid{position:absolute;inset:45px 0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.force-canvas{position:relative;width:100%;box-sizing:border-box;min-height:120px}.connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}@keyframes lineGlow{0%{opacity:0;stroke-dashoffset:8}30%{opacity:.15}to{opacity:.6;stroke-dashoffset:0}}.connection-line{stroke:#fe3c72d1;stroke-width:1.5px;stroke-dasharray:4;opacity:0;pointer-events:none;transition:opacity .3s ease}.connection-line.active{animation:lineGlow .7s cubic-bezier(.4,0,.2,1) forwards}.frosted-chip{position:absolute;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .3s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2;border:1px solid rgba(255,255,255,.24);background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59,0 0 0 1px #0f172a38;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:translate(-50%,-50%) scale(1.04);background:#ffffff29;cursor:grab}.frosted-chip.active{background:#ffffff4d;box-shadow:0 0 15px #fe3c7261,inset 0 1.5px 2px #ffffff80,0 0 0 1px #ffffff52;transform:translate(-50%,-50%) scale(1.06);z-index:10;cursor:grabbing}.frosted-chip.active .chip-label{color:#fff!important}.frosted-chip.dimmed{opacity:.35}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:8px;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:var(--name-label-font-size);font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:8%;width:34%;text-align:left;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:8%;width:34%;text-align:right;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0;top:45px;bottom:50px;box-sizing:border-box}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:10px}}@media(max-width:480px){.overlay-container{--name-label-font-size: 12px}.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label,.header-label.center{font-size:10px}}\n"], dependencies: [{ kind: "directive", type: i2_1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2_1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", user1File: "user1File", user2File: "user2File", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges", person1Name: "person1Name", person2Name: "person2Name", imageProxyPath: "imageProxyPath" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick()", "document:mousemove": "onDocumentDragMove($event)", "document:touchmove": "onDocumentDragMove($event)", "document:mouseup": "onDocumentDragEnd()", "document:touchend": "onDocumentDragEnd()" } }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }, { propertyName: "chipsGrid", first: true, predicate: ["chipsGrid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\r\n      <g filter=\"url(#filter0_n_1_1753)\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\r\n      </g>\r\n      <defs>\r\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\r\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\r\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\r\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\r\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\r\n          </feComponentTransfer>\r\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\r\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\r\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\r\n          <feMerge result=\"effect1_noise_1_1753\">\r\n            <feMergeNode in=\"shape\"/>\r\n            <feMergeNode in=\"color1\"/>\r\n          </feMerge>\r\n        </filter>\r\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\r\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\r\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\r\n        </radialGradient>\r\n      </defs>\r\n    </svg>\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.top]=\"user1Top\"\r\n        [style.height]=\"user1Height\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.top]=\"user2Top\"\r\n        [style.height]=\"user2Height\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"image-shade-overlay\"></div>\r\n\r\n  <!-- Frosted Glass Overlay Layer -->\r\n  <div class=\"overlay-container\">\r\n    <!-- Top Headers \u2014 absolutely positioned overlays, exactly as original -->\r\n    <div class=\"header-label left\">{{ person1Name }}</div>\r\n    <div class=\"header-label center\">Shared</div>\r\n    <div class=\"header-label right\">{{ person2Name }}</div>\r\n\r\n    <!-- Force-directed chip canvas (scrollable) -->\r\n    <div class=\"chips-grid\" #chipsGrid>\r\n      <div class=\"force-canvas\" [style.height.px]=\"forceCanvasHeight\">\r\n        <!-- SVG Connections Layer -->\r\n        <svg class=\"connections-svg\" [style.height.px]=\"forceCanvasHeight\">\r\n          <line\r\n            *ngFor=\"let link of sortedForceLinks\"\r\n            [attr.x1]=\"getLinkSourceX(link)\"\r\n            [attr.y1]=\"getLinkSourceY(link)\"\r\n            [attr.x2]=\"getLinkTargetX(link)\"\r\n            [attr.y2]=\"getLinkTargetY(link)\"\r\n            class=\"connection-line\"\r\n            [class.active]=\"isLinkConnectedToActive(link)\"\r\n            [class.cross-group]=\"isCrossGroupLink(link)\"\r\n          ></line>\r\n        </svg>\r\n\r\n        <div\r\n          *ngFor=\"let node of forceNodes\"\r\n          class=\"frosted-chip\"\r\n          [class.person-a]=\"node.group === 'p1'\"\r\n          [class.shared]=\"node.group === 'shared'\"\r\n          [class.person-b]=\"node.group === 'p2'\"\r\n          [class.active]=\"activeNode === node\"\r\n          [class.dimmed]=\"activeNode && !isNodeConnected(node)\"\r\n          [style.left.px]=\"node.x\"\r\n          [style.top.px]=\"node.y\"\r\n          [style.padding]=\"chipPaddingYPx + 'px ' + chipPaddingXPx + 'px'\"\r\n          (mouseenter)=\"onNodeMouseEnter(node)\"\r\n          (mouseleave)=\"onNodeMouseLeave(node)\"\r\n          (click)=\"onNodeClick(node, $event)\"\r\n          (mousedown)=\"onNodeDragStart(node, $event)\"\r\n          (touchstart)=\"onNodeDragStart(node, $event)\"\r\n        >\r\n          <span\r\n            class=\"chip-label\"\r\n            [style.font-size.px]=\"chipFontSizePx\"\r\n            [style.line-height]=\"chipLineHeight\"\r\n          >{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Bottom Actions -->\r\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\r\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);--name-label-font-size: 14px}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:25%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{left:75%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.chips-grid{position:absolute;inset:45px 0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.force-canvas{position:relative;width:100%;box-sizing:border-box;min-height:120px}.connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}@keyframes lineGlow{0%{opacity:0;stroke-dashoffset:8}30%{opacity:.15}to{opacity:.6;stroke-dashoffset:0}}.connection-line{stroke:#fe3c72d1;stroke-width:1.5px;stroke-dasharray:4;opacity:0;pointer-events:none;transition:opacity .3s ease}.connection-line.active{animation:lineGlow .7s cubic-bezier(.4,0,.2,1) forwards}.frosted-chip{position:absolute;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .3s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2;border:1px solid rgba(255,255,255,.24);background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59,0 0 0 1px #0f172a38;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:translate(-50%,-50%) scale(1.04);background:#ffffff29;cursor:grab}.frosted-chip.active{background:#ffffff4d;box-shadow:0 0 15px #fe3c7261,inset 0 1.5px 2px #ffffff80,0 0 0 1px #ffffff52;transform:translate(-50%,-50%) scale(1.06);z-index:10;cursor:grabbing}.frosted-chip.active .chip-label{color:#fff!important}.frosted-chip.dimmed{opacity:.35}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:8px;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:var(--name-label-font-size);font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:8%;width:34%;text-align:left;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:8%;width:34%;text-align:right;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0;top:45px;bottom:50px;box-sizing:border-box}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:10px}}@media(max-width:480px){.overlay-container{--name-label-font-size: 12px}.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label,.header-label.center{font-size:10px}}\n"], dependencies: [{ kind: "directive", type: i2_1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2_1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\r\n      <g filter=\"url(#filter0_n_1_1753)\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\r\n      </g>\r\n      <defs>\r\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\r\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\r\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\r\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\r\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\r\n          </feComponentTransfer>\r\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\r\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\r\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\r\n          <feMerge result=\"effect1_noise_1_1753\">\r\n            <feMergeNode in=\"shape\"/>\r\n            <feMergeNode in=\"color1\"/>\r\n          </feMerge>\r\n        </filter>\r\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\r\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\r\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\r\n        </radialGradient>\r\n      </defs>\r\n    </svg>\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.top]=\"user1Top\"\r\n        [style.height]=\"user1Height\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.top]=\"user2Top\"\r\n        [style.height]=\"user2Height\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"image-shade-overlay\"></div>\r\n\r\n  <!-- Frosted Glass Overlay Layer -->\r\n  <div class=\"overlay-container\">\r\n    <!-- Top Headers \u2014 absolutely positioned overlays, exactly as original -->\r\n    <div class=\"header-label left\">{{ person1Name }}</div>\r\n    <div class=\"header-label center\">Shared</div>\r\n    <div class=\"header-label right\">{{ person2Name }}</div>\r\n\r\n    <!-- Force-directed chip canvas (scrollable) -->\r\n    <div class=\"chips-grid\" #chipsGrid>\r\n      <div class=\"force-canvas\" [style.height.px]=\"forceCanvasHeight\">\r\n        <!-- SVG Connections Layer -->\r\n        <svg class=\"connections-svg\" [style.height.px]=\"forceCanvasHeight\">\r\n          <line\r\n            *ngFor=\"let link of sortedForceLinks\"\r\n            [attr.x1]=\"getLinkSourceX(link)\"\r\n            [attr.y1]=\"getLinkSourceY(link)\"\r\n            [attr.x2]=\"getLinkTargetX(link)\"\r\n            [attr.y2]=\"getLinkTargetY(link)\"\r\n            class=\"connection-line\"\r\n            [class.active]=\"isLinkConnectedToActive(link)\"\r\n            [class.cross-group]=\"isCrossGroupLink(link)\"\r\n          ></line>\r\n        </svg>\r\n\r\n        <div\r\n          *ngFor=\"let node of forceNodes\"\r\n          class=\"frosted-chip\"\r\n          [class.person-a]=\"node.group === 'p1'\"\r\n          [class.shared]=\"node.group === 'shared'\"\r\n          [class.person-b]=\"node.group === 'p2'\"\r\n          [class.active]=\"activeNode === node\"\r\n          [class.dimmed]=\"activeNode && !isNodeConnected(node)\"\r\n          [style.left.px]=\"node.x\"\r\n          [style.top.px]=\"node.y\"\r\n          [style.padding]=\"chipPaddingYPx + 'px ' + chipPaddingXPx + 'px'\"\r\n          (mouseenter)=\"onNodeMouseEnter(node)\"\r\n          (mouseleave)=\"onNodeMouseLeave(node)\"\r\n          (click)=\"onNodeClick(node, $event)\"\r\n          (mousedown)=\"onNodeDragStart(node, $event)\"\r\n          (touchstart)=\"onNodeDragStart(node, $event)\"\r\n        >\r\n          <span\r\n            class=\"chip-label\"\r\n            [style.font-size.px]=\"chipFontSizePx\"\r\n            [style.line-height]=\"chipLineHeight\"\r\n          >{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Bottom Actions -->\r\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\r\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);--name-label-font-size: 14px}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:25%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{left:75%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.chips-grid{position:absolute;inset:45px 0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.force-canvas{position:relative;width:100%;box-sizing:border-box;min-height:120px}.connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}@keyframes lineGlow{0%{opacity:0;stroke-dashoffset:8}30%{opacity:.15}to{opacity:.6;stroke-dashoffset:0}}.connection-line{stroke:#fe3c72d1;stroke-width:1.5px;stroke-dasharray:4;opacity:0;pointer-events:none;transition:opacity .3s ease}.connection-line.active{animation:lineGlow .7s cubic-bezier(.4,0,.2,1) forwards}.frosted-chip{position:absolute;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .3s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2;border:1px solid rgba(255,255,255,.24);background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59,0 0 0 1px #0f172a38;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:translate(-50%,-50%) scale(1.04);background:#ffffff29;cursor:grab}.frosted-chip.active{background:#ffffff4d;box-shadow:0 0 15px #fe3c7261,inset 0 1.5px 2px #ffffff80,0 0 0 1px #ffffff52;transform:translate(-50%,-50%) scale(1.06);z-index:10;cursor:grabbing}.frosted-chip.active .chip-label{color:#fff!important}.frosted-chip.dimmed{opacity:.35}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:8px;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:var(--name-label-font-size);font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:8%;width:34%;text-align:left;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:8%;width:34%;text-align:right;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0;top:45px;bottom:50px;box-sizing:border-box}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:10px}}@media(max-width:480px){.overlay-container{--name-label-font-size: 12px}.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label,.header-label.center{font-size:10px}}\n"] }]
         }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -3763,19 +4281,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             }] } });
 
 class ProfileComparisonLibModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibModule, providers: [
             ProfileComparisonBackendService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [