Merge pull request #349 from Weaverse/dev

Refine variant media grouping matching logic

Author: hta218

.guides/cookbooks/variant-media-grouping.md

@@ -6,13 +6,14 @@ Groups product media by variant option (e.g., Color). When a visitor selects "Bl
 
 1. Get the selected option value from `selectedVariant.selectedOptions` (e.g., "Black")
 2. Get all known option values from `product.options` for the grouping option (e.g., ["Black", "Cream"])
-3. For each media item, extract the option value from the image filename URL
-4. **Filename matching** supports:
+3. Sort option values by length (descending) so longer values match first (e.g., "Gray Eucalyptus" before "Gray")
+4. For each media item, extract the option value from the image filename URL
+5. **Filename matching** supports:
    - Single-word values: `_black`, `-black`, `black_`, `black-`, `black` (end)
-   - Multi-word values: space is replaced with `_`, `-`, or removed
-     - "Slate Brown" matches `slate-brown`, `slate_brown`, `slatebrown`
-5. Group media into a `Map<string, MediaFragment[]>` keyed by option value. Media not matching any option goes to `ungrouped[]`
-6. Return `{ media: [...matched, ...ungrouped], isGrouped: true }`. If no matches, return `{ media: allMedia, isGrouped: false }` as fallback
+   - Multi-word values: space is replaced with `_` or `-`
+     - "Slate Brown" matches `slate-brown`, `slate_brown`
+6. Group media into a `Map<string, MediaFragment[]>` keyed by option value. Media not matching any option goes to `ungrouped[]`
+7. Return `{ media: [...matched, ...ungrouped], isGrouped: true }`. If no matches, return `{ media: allMedia, isGrouped: false }` as fallback
 
 ## Files
 

.weaverse/specs/2026-03-03--variant-media-grouping/README.md

@@ -5,7 +5,7 @@
 | **Status**   | `completed`                        |
 | **Owner**    | @hta218                            |
 | **Created**  | 2026-03-03                         |
-| **Last Updated** | 2026-03-09                         |
+| **Last Updated** | 2026-03-09 (refined matching logic) |
 
 ## Original Prompt
 

.weaverse/specs/2026-03-03--variant-media-grouping/plan.md

@@ -288,29 +288,28 @@ Same two settings as main-product:
 
 ## 7. Filename Matching Strategy
 
-Media is grouped by extracting option values from image filenames using delimiter-based pattern matching (`_`, `-`). The matching checks for the option value at the start, middle, or end of the filename, bounded by delimiters.
+Media is grouped by extracting option values from image filenames using delimiter-based pattern matching (`_`, `-`). The matching checks for the option value at the start or end of the filename, bounded by delimiters.
+
+**Priority Matching**: Option values are sorted by length (descending) so longer, more specific values match first. This prevents "Gray" from matching before "Gray Eucalyptus".
 
 **Single-word option values** (e.g., "black"):
 ```
   black_xxx.jpg       (start + _)
   black-xxx.jpg       (start + -)
   xxx_black.jpg       (end + _)
   xxx-black.jpg       (end + -)
-  xxx_black_yyy.jpg   (middle + _)
-  xxx-black-yyy.jpg   (middle + -)
   xxxblack.jpg        (end, no delimiter)
 ```
 
 **Multi-word option values** (e.g., "Slate Brown") are matched against transformed versions:
 ```
   slate-brown_xxx.jpg     (space → dash)
   slate_brown_xxx.jpg     (space → underscore)
-  slatebrown_xxx.jpg      (space removed)
   xxx_slate-brown.jpg     (end + dash)
   xxx_slate_brown.jpg     (end + underscore)
 ```
 
-This handles common filename conventions while avoiding false positives.
+Note: Middle-of-filename matching and space-removed transformations (e.g., "slatebrown") were removed to reduce false positives.
 
 ---
 

app/components/product/product-media/variant-media-group.ts

@@ -23,7 +23,7 @@ interface VariantGroupedMediaResult {
  * e.g., filename "24b_xxx_black.jpg" with options ["Black", "Cream"] → "black"
  *
  * Handles multi-word option values by checking transformed versions:
- * - "Slate Brown" matches "slate-brown", "slate_brown", "slatebrown"
+ * - "Slate Brown" matches "slate-brown", "slate_brown"
  */
 function extractOptionValueFromUrl(
   url: string,
@@ -36,16 +36,20 @@ function extractOptionValueFromUrl(
     const nameWithoutExt = filename.replace(/\.[^.]+$/, "").toLowerCase();
 
     // Check if any known option value appears in the filename
-    for (let optionValue of knownOptionValues) {
+    // Sort by length descending to match longer (more specific) values first
+    // e.g., "Gray Eucalyptus" should match before "Gray"
+    let sortedOptionValues = [...knownOptionValues].sort(
+      (a, b) => b.length - a.length,
+    );
+    for (let optionValue of sortedOptionValues) {
       let optionLower = optionValue.toLowerCase();
 
       // Generate transformed versions for multi-word option values
-      // e.g., "Slate Brown" → "slate-brown", "slate_brown", "slatebrown"
+      // e.g., "Slate Brown" → "slate-brown", "slate_brown"
       let transformations = [optionLower];
       if (optionLower.includes(" ")) {
         transformations.push(optionLower.replace(/\s+/g, "-")); // space → dash
         transformations.push(optionLower.replace(/\s+/g, "_")); // space → underscore
-        transformations.push(optionLower.replace(/\s+/g, "")); // remove spaces
       }
 
       // Check each transformation against the filename
@@ -55,8 +59,6 @@ function extractOptionValueFromUrl(
           nameWithoutExt.startsWith(`${transformed}-`) ||
           nameWithoutExt.endsWith(`_${transformed}`) ||
           nameWithoutExt.endsWith(`-${transformed}`) ||
-          nameWithoutExt.includes(`_${transformed}_`) ||
-          nameWithoutExt.includes(`-${transformed}-`) ||
           nameWithoutExt.endsWith(transformed)
         ) {
           return optionLower;