@codedesignai/nextjs-live-edit-plugin 1.0.3 → 1.0.5

package/index.js

@@ -3,21 +3,25 @@ const path = require('path');
 /**
  * Next.js config wrapper that enables the live edit plugin.
  * Uses Turbopack's built-in webpack loader support via turbopack.rules.
- * 
+ *
+ * NOTE: Only Turbopack is supported. Adding a `webpack` key to the config
+ * causes hydration mismatches in Next.js 16 because the loader would only
+ * run on client-side builds, while server-rendered HTML has no data attributes.
+ *
  * Usage in next.config.js (CommonJS):
- * 
+ *
  *   const { withLiveEdit } = require('@codedesignai/nextjs-live-edit-plugin');
  *   module.exports = withLiveEdit({
  *     // your normal Next.js config
  *   });
- * 
+ *
  * Usage in next.config.ts (ESM):
- * 
+ *
  *   import { withLiveEdit } from '@codedesignai/nextjs-live-edit-plugin';
  *   export default withLiveEdit({
  *     // your normal Next.js config
  *   });
- * 
+ *
  * @param {Object} nextConfig - Your Next.js configuration object
  * @param {Object} pluginOptions - Plugin-specific options
  * @param {string[]} pluginOptions.sourceDirs - Directories to process (default: ['app', 'components', 'src'])
@@ -50,7 +54,6 @@ function withLiveEdit(nextConfig = {}, pluginOptions = {}) {
       ...existingTurbopack,
       rules: {
         ...existingRules,
-        // Apply our source mapper loader to JSX and TSX files
         '*.jsx': {
           loaders: [loaderConfig],
         },

package/live-edit-handler.js

@@ -6,66 +6,72 @@ const _traverse = require('@babel/traverse');
 // Handle both ES module and CommonJS exports
 const traverse = _traverse.default || _traverse;
 
+// ─── Utility Functions ──────────────────────────────────────────────────────
+
 /**
- * Convert character position to line number and character position within line
- * Returns 0-based indexing (line 0 = first line, char 0 = first character in line)
+ * Convert character position to line number and character position within line.
+ * Returns 0-based indexing.
  */
 function getLineAndCharPosition(content, charPosition) {
   const lines = content.split('\n');
   let currentPos = 0;
-  
+
   for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
-    const lineLength = lines[lineIndex].length + 1; // +1 for newline character
-    
+    const lineLength = lines[lineIndex].length + 1;
+
     if (charPosition < currentPos + lineLength) {
-      const charInLine = charPosition - currentPos;
       return {
         line: lineIndex,
-        character: charInLine
+        character: charPosition - currentPos,
       };
     }
-    
+
     currentPos += lineLength;
   }
-  
+
   return {
     line: lines.length - 1,
-    character: lines[lines.length - 1].length
+    character: lines[lines.length - 1].length,
   };
 }
 
+// ─── Validation ─────────────────────────────────────────────────────────────
+
 /**
- * Validate that the location data is correct in the current source file
- * Returns validation result with details
+ * Validate that the location data is correct in the current source file.
+ * Performs bounds checking, text matching, and AST-level verification.
  */
 function validateLocationInSource(originalContent, location) {
   // 1. Basic bounds checking
   if (location.start < 0 || location.end < 0) {
     return { valid: false, error: 'Invalid location: negative positions' };
   }
-  
+
   if (location.start >= location.end) {
     return { valid: false, error: 'Invalid location: start >= end' };
   }
-  
+
   if (location.end > originalContent.length) {
-    return { valid: false, error: `Invalid location: end position ${location.end} exceeds file length ${originalContent.length}` };
+    return {
+      valid: false,
+      error: `Invalid location: end position ${location.end} exceeds file length ${originalContent.length}`,
+    };
   }
 
   // 2. Verify the text at the location matches what we expect
   const actualText = originalContent.substring(location.start, location.end);
   const expectedText = location.text;
-  
+
   if (actualText !== expectedText) {
-    return { 
-      valid: false, 
-      error: `Location mismatch: expected "${expectedText}" but found "${actualText}". Source file may have changed.` 
+    return {
+      valid: false,
+      error: `Location mismatch: expected "${expectedText}" but found "${actualText}". Source file may have changed.`,
     };
   }
 
   // 3. AST verification based on type
   const locationType = location.type || 'text-content';
-  
+
   try {
     const ast = parser.parse(originalContent, {
       sourceType: 'module',
@@ -75,7 +81,7 @@ function validateLocationInSource(originalContent, location) {
     let foundMatchingNode = false;
 
     if (locationType === 'text-content') {
-      // Validate JSXText node
+      // Validate JSXText node at the expected position
       traverse(ast, {
         JSXText(astPath) {
           const { node } = astPath;
@@ -83,52 +89,134 @@ function validateLocationInSource(originalContent, location) {
             foundMatchingNode = true;
             astPath.stop();
           }
-        }
+        },
+      });
+
+      if (!foundMatchingNode) {
+        return {
+          valid: false,
+          error: `AST mismatch: no JSXText node at position ${location.start}-${location.end}.`,
+        };
+      }
+    } else if (locationType === 'string-expression') {
+      // Validate StringLiteral inside a JSXExpressionContainer
+      traverse(ast, {
+        JSXExpressionContainer(astPath) {
+          const expr = astPath.node.expression;
+          if (
+            expr.type === 'StringLiteral' &&
+            expr.start + 1 === location.start &&
+            expr.end - 1 === location.end
+          ) {
+            foundMatchingNode = true;
+            astPath.stop();
+          }
+        },
       });
 
       if (!foundMatchingNode) {
         return {
           valid: false,
-          error: `AST structure mismatch: no JSXText node found at position ${location.start}-${location.end}. Source structure may have changed.`
+          error: `AST mismatch: no StringLiteral expression at position ${location.start}-${location.end}.`,
+        };
+      }
+    } else if (locationType === 'template-literal') {
+      // Validate static TemplateLiteral inside a JSXExpressionContainer
+      traverse(ast, {
+        JSXExpressionContainer(astPath) {
+          const expr = astPath.node.expression;
+          if (
+            expr.type === 'TemplateLiteral' &&
+            expr.expressions.length === 0 &&
+            expr.quasis.length === 1
+          ) {
+            const quasi = expr.quasis[0];
+            if (quasi.start === location.start && quasi.end === location.end) {
+              foundMatchingNode = true;
+              astPath.stop();
+            }
+          }
+        },
+      });
+
+      if (!foundMatchingNode) {
+        return {
+          valid: false,
+          error: `AST mismatch: no static TemplateLiteral at position ${location.start}-${location.end}.`,
         };
       }
     } else if (locationType === 'image-src') {
-      // Validate img src attribute
+      // Validate img/Image src attribute StringLiteral
       traverse(ast, {
         JSXAttribute(astPath) {
           const { node } = astPath;
           if (node.name.name === 'src' && node.value) {
             let valueNode = node.value;
-            
-            // Handle string literals and expression containers
+
             if (valueNode.type === 'JSXExpressionContainer') {
               valueNode = valueNode.expression;
             }
-            
+
             if (valueNode.type === 'StringLiteral') {
-              const actualStart = valueNode.start + 1;
-              const actualEnd = valueNode.end - 1;
-              
-              if (actualStart === location.start && actualEnd === location.end) {
+              if (
+                valueNode.start + 1 === location.start &&
+                valueNode.end - 1 === location.end
+              ) {
                 foundMatchingNode = true;
                 astPath.stop();
               }
             }
           }
-        }
+        },
       });
 
       if (!foundMatchingNode) {
         return {
           valid: false,
-          error: `AST structure mismatch: no img src attribute found at position ${location.start}-${location.end}. Source structure may have changed.`
+          error: `AST mismatch: no src attribute at position ${location.start}-${location.end}.`,
         };
       }
+    } else if (locationType.startsWith('attribute:')) {
+      // Validate a named attribute with StringLiteral value
+      const attrName = locationType.split(':')[1];
+      traverse(ast, {
+        JSXAttribute(astPath) {
+          const { node } = astPath;
+          if (node.name.name === attrName && node.value) {
+            let valueNode = node.value;
+
+            if (valueNode.type === 'JSXExpressionContainer') {
+              valueNode = valueNode.expression;
+            }
+
+            if (valueNode.type === 'StringLiteral') {
+              if (
+                valueNode.start + 1 === location.start &&
+                valueNode.end - 1 === location.end
+              ) {
+                foundMatchingNode = true;
+                astPath.stop();
+              }
+            }
+          }
+        },
+      });
+
+      if (!foundMatchingNode) {
+        return {
+          valid: false,
+          error: `AST mismatch: no ${attrName} attribute at position ${location.start}-${location.end}.`,
+        };
+      }
+    } else if (locationType === 'style-background-image') {
+      // For background images, we do positional text verification only (already done above).
+      // Full AST verification of nested style objects is complex and the text match is sufficient.
+      foundMatchingNode = true;
     }
   } catch (parseError) {
     return {
       valid: false,
-      error: `Source file has syntax errors: ${parseError.message}`
+      error: `Source file has syntax errors: ${parseError.message}`,
     };
   }
 
@@ -136,7 +224,7 @@ function validateLocationInSource(originalContent, location) {
 }
 
 /**
- * Validate that the updated content is syntactically valid
+ * Validate that the updated content is syntactically valid JSX/TSX.
  */
 function validateUpdatedContent(content, filePath) {
   try {
@@ -146,71 +234,77 @@ function validateUpdatedContent(content, filePath) {
     });
     return { valid: true };
   } catch (error) {
-    return { 
-      valid: false, 
+    return {
+      valid: false,
       error: `Syntax error in updated content: ${error.message}`,
-      details: error
+      details: error,
     };
   }
 }
 
 /**
- * Validate image URL for security and correctness
+ * Validate image URL for security and correctness.
  */
 function validateImageUrl(url) {
-  // Reject potentially harmful protocols
   const dangerousProtocols = ['javascript:', 'data:text/html', 'vbscript:'];
   const lowerUrl = url.toLowerCase();
-  
+
   for (const protocol of dangerousProtocols) {
     if (lowerUrl.startsWith(protocol)) {
       return { valid: false, error: `Dangerous protocol detected: ${protocol}` };
     }
   }
 
-  // Basic length check
   if (url.length > 2000) {
     return { valid: false, error: 'Image URL too long (max 2000 characters)' };
   }
 
-  // Allow relative paths, http(s), data:image, and common protocols
   const validPatterns = [
-    /^https?:\/\//,           // http:// or https://
-    /^\/[^\/]/,               // Absolute path (starts with single /)
-    /^\.\.?\//,               // Relative path (starts with ./ or ../)
-    /^[a-zA-Z0-9]/,           // Relative path (no protocol)
-    /^data:image\//,          // Data URI for images only
+    /^https?:\/\//,     // http:// or https://
+    /^\/[^\/]/,         // Absolute path (starts with single /)
+    /^\.\.?\//,         // Relative path (starts with ./ or ../)
+    /^[a-zA-Z0-9]/,     // Relative path (no protocol)
+    /^data:image\//,    // Data URI for images only
   ];
 
-  const isValid = validPatterns.some(pattern => pattern.test(url));
-  
-  if (!isValid) {
+  if (!validPatterns.some(pattern => pattern.test(url))) {
     return { valid: false, error: 'Invalid image URL format' };
   }
 
   return { valid: true };
 }
 
+// ─── Core Update Logic ──────────────────────────────────────────────────────
+
 /**
- * Handle text and image updates using AST-injected location data
- * PRODUCTION-READY with full validation and rollback capability
- * 
+ * Handle text and image updates using AST-injected location data.
+ * Supports all region types: text-content, string-expression, template-literal,
+ * image-src, attribute:*, and style-background-image.
+ *
  * @param {Object} data - The update data from the client
  * @param {Object} options - Configuration options
- * @param {string[]} options.sourceDirs - Source directories to search (default: ['app', 'components', 'src'])
- * @param {string} options.projectRoot - Project root directory (default: process.cwd())
+ * @param {string[]} options.sourceDirs - Source directories to search
+ * @param {string} options.projectRoot - Project root directory
  */
 async function handleEnhancedTextUpdate(data, options = {}) {
   const { element, content, imageUrl, updateType } = data;
-  const { sourceDirs = ['app', 'components', 'src'], projectRoot = process.cwd() } = options;
-  
-  // Normalize content field - handle both 'content' and 'imageUrl'
+  const {
+    sourceDirs = ['app', 'components', 'src'],
+    projectRoot = process.cwd(),
+  } = options;
+
+  // Normalize content field
   const actualContent = content || imageUrl;
-  
+
   // === INPUT VALIDATION ===
   if (!element || !actualContent) {
     console.error('❌ Live edit failed: Missing element or content data');
-    console.error('   Received data:', { hasElement: !!element, hasContent: !!content, hasImageUrl: !!imageUrl, updateType });
+    console.error('   Received data:', {
+      hasElement: !!element,
+      hasContent: !!content,
+      hasImageUrl: !!imageUrl,
+      updateType,
+    });
     return { success: false, error: 'Missing element or content data' };
   }
 
@@ -222,33 +316,68 @@ async function handleEnhancedTextUpdate(data, options = {}) {
   // Extract location data from element
   const sourceLocAttr = element.sourceLoc || element['data-source-loc'];
   const elementId = element.elementId || element['data-element-id'];
-  
+
   console.log(`📥 Live edit request for element: ${elementId}, tagName: ${element.tagName}`);
-  
+
   if (!sourceLocAttr) {
     console.error(`❌ Live edit failed: No source location data for element ${elementId}`);
     console.error('   Element data:', JSON.stringify(element, null, 2));
-    return { success: false, error: 'No source location data available - element may not have been compiled with source mapping' };
+    return {
+      success: false,
+      error: 'No source location data available - element may not have been compiled with source mapping',
+    };
   }
 
-  let originalContent = null; // Backup for rollback
+  let originalContent = null;
   let fullFilePath = null;
 
   try {
-    // Parse the location data (it's a JSON string)
-    const location = typeof sourceLocAttr === 'string' 
-      ? JSON.parse(sourceLocAttr.replace(/&apos;/g, "'")) 
-      : sourceLocAttr;
-    
+    // Parse the location data — handle both legacy single-object and new array format
+    let parsed =
+      typeof sourceLocAttr === 'string'
+        ? JSON.parse(sourceLocAttr.replace(/&apos;/g, "'"))
+        : sourceLocAttr;
+
+    // Backward compatibility: if it's a single object (legacy format), wrap in array
+    // Then pick the region the client wants to edit.
+    // The client can specify `regionIndex` to target a specific region,
+    // or `regionType` to target by type. Default: first region.
+    let location;
+
+    if (Array.isArray(parsed)) {
+      const regionIndex = data.regionIndex;
+      const regionType = data.regionType;
+
+      if (typeof regionIndex === 'number' && regionIndex < parsed.length) {
+        location = parsed[regionIndex];
+      } else if (regionType) {
+        location = parsed.find(r => r.type === regionType);
+      }
+
+      if (!location) {
+        location = parsed[0]; // default to first region
+      }
+    } else {
+      // Legacy single-object format
+      location = parsed;
+    }
+
     // Validate location object structure
-    if (!location || !location.file || typeof location.start !== 'number' || typeof location.end !== 'number') {
+    if (
+      !location ||
+      !location.file ||
+      typeof location.start !== 'number' ||
+      typeof location.end !== 'number'
+    ) {
       return { success: false, error: 'Invalid location data structure' };
     }
 
     const locationType = location.type || 'text-content';
-    
-    console.log(`🎯 Updating ${location.file} [${locationType}] at characters ${location.start}-${location.end}`);
-    
+
+    console.log(
+      `🎯 Updating ${location.file} [${locationType}] at characters ${location.start}-${location.end}`
+    );
+
     // Try to find the file in any of the source directories
     fullFilePath = null;
     for (const dir of sourceDirs) {
@@ -273,21 +402,21 @@ async function handleEnhancedTextUpdate(data, options = {}) {
 
     // === READ & BACKUP ORIGINAL ===
     originalContent = fs.readFileSync(fullFilePath, 'utf-8');
-    
+
     // === PRE-FLIGHT VALIDATION ===
     const preValidation = validateLocationInSource(originalContent, location);
     if (!preValidation.valid) {
       console.error(`❌ Pre-flight validation failed: ${preValidation.error}`);
       return { success: false, error: `Validation failed: ${preValidation.error}` };
     }
-    
+
     console.log('✓ Pre-flight validation passed');
-    
+
     // === EXTRACT NEW CONTENT ===
     let newContent;
-    
-    if (locationType === 'image-src') {
-      // For images, extract the src value
+
+    if (locationType === 'image-src' || locationType === 'style-background-image') {
+      // For images / background images — extract the URL
       if (actualContent.startsWith('<img')) {
         const srcMatch = actualContent.match(/src=["']([^"']+)["']/);
         if (srcMatch) {
@@ -305,8 +434,10 @@ async function handleEnhancedTextUpdate(data, options = {}) {
         return { success: false, error: `Image URL validation failed: ${urlValidation.error}` };
       }
     } else {
-      // For text content, extract text from HTML if needed
+      // For text content (text-content, string-expression, template-literal, attribute:*)
       newContent = actualContent;
+
+      // Strip HTML tags if the content looks like HTML
       if (actualContent.startsWith('<') && actualContent.endsWith('>')) {
         newContent = actualContent.replace(/<[^>]*>/g, '');
       }
@@ -318,43 +449,45 @@ async function handleEnhancedTextUpdate(data, options = {}) {
     }
 
     // === APPLY UPDATE ===
-    const updatedContent = 
-      originalContent.substring(0, location.start) + 
-      newContent + 
+    const updatedContent =
+      originalContent.substring(0, location.start) +
+      newContent +
       originalContent.substring(location.end);
-    
+
     // === POST-UPDATE VALIDATION ===
     const postValidation = validateUpdatedContent(updatedContent, fullFilePath);
     if (!postValidation.valid) {
       console.error(`❌ Post-update validation failed: ${postValidation.error}`);
-      return { 
-        success: false, 
-        error: `Updated content has syntax errors: ${postValidation.error}. Changes not applied.` 
+      return {
+        success: false,
+        error: `Updated content has syntax errors: ${postValidation.error}. Changes not applied.`,
       };
     }
-    
+
     console.log('✓ Post-update validation passed');
-    
+
     // === WRITE CHANGES (only after all validation passes) ===
     fs.writeFileSync(fullFilePath, updatedContent, 'utf-8');
 
     // Next.js Fast Refresh will automatically detect the file change
-    // No need to manually trigger HMR like in Vite
-
-    const updateLabel = locationType === 'image-src' ? '🖼️  Image' : '📝 Text';
+    const updateLabel =
+      locationType === 'image-src'
+        ? '🖼️  Image'
+        : locationType === 'style-background-image'
+        ? '🖼️  Background Image'
+        : '📝 Text';
     console.log(`✅ ${updateLabel} updated in ${location.file}`);
     console.log(`   "${location.text}" → "${newContent}"`);
-    
-    return { 
-      success: true, 
+
+    return {
+      success: true,
       message: `Updated ${path.basename(fullFilePath)}`,
       file: fullFilePath,
-      type: locationType
+      type: locationType,
     };
-
   } catch (error) {
     console.error('❌ Error updating source file:', error);
-    
+
     // === ROLLBACK ON ERROR ===
     if (originalContent && fullFilePath) {
       try {
@@ -364,13 +497,15 @@ async function handleEnhancedTextUpdate(data, options = {}) {
         console.error('❌ Failed to rollback:', rollbackError);
       }
     }
-    
+
     return { success: false, error: error.message };
   }
 }
 
+// ─── API Route Handlers ─────────────────────────────────────────────────────
+
 /**
- * CORS headers for the live-edit API
+ * CORS headers for the live-edit API.
  */
 const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
@@ -380,18 +515,18 @@ const corsHeaders = {
 
 /**
  * Create a Next.js App Router API route handler for live editing.
- * 
+ *
  * Usage in app/api/live-edit/route.js:
- * 
+ *
  *   const { createLiveEditHandler } = require('@codedesignai/nextjs-live-edit-plugin/live-edit-handler');
  *   const { POST, OPTIONS } = createLiveEditHandler();
  *   module.exports = { POST, OPTIONS };
- * 
+ *
  * Or for ES modules (app/api/live-edit/route.ts):
- * 
+ *
  *   import { createLiveEditHandler } from '@codedesignai/nextjs-live-edit-plugin/live-edit-handler';
  *   export const { POST, OPTIONS } = createLiveEditHandler();
- * 
+ *
  * @param {Object} options
  * @param {string[]} options.sourceDirs - Directories to search for source files
  * @param {string} options.projectRoot - Project root directory
@@ -406,7 +541,10 @@ function createLiveEditHandler(options = {}) {
     // Only allow in development
     if (process.env.NODE_ENV === 'production') {
       return new Response(
-        JSON.stringify({ success: false, error: 'Live editing is only available in development mode' }),
+        JSON.stringify({
+          success: false,
+          error: 'Live editing is only available in development mode',
+        }),
         { status: 403, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
       );
     }
@@ -416,24 +554,24 @@ function createLiveEditHandler(options = {}) {
       console.log('🔄 Received enhanced live edit request:', JSON.stringify(data, null, 2));
 
       const result = await handleEnhancedTextUpdate(data, handlerOptions);
-      
+
       if (result.success) {
-        return new Response(
-          JSON.stringify({ success: true, message: result.message }),
-          { status: 200, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
-        );
+        return new Response(JSON.stringify({ success: true, message: result.message }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json', ...corsHeaders },
+        });
       } else {
-        return new Response(
-          JSON.stringify({ success: false, error: result.error }),
-          { status: 400, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
-        );
+        return new Response(JSON.stringify({ success: false, error: result.error }), {
+          status: 400,
+          headers: { 'Content-Type': 'application/json', ...corsHeaders },
+        });
       }
     } catch (error) {
       console.error('❌ Error processing enhanced live edit request:', error);
-      return new Response(
-        JSON.stringify({ success: false, error: error.message }),
-        { status: 500, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
-      );
+      return new Response(JSON.stringify({ success: false, error: error.message }), {
+        status: 500,
+        headers: { 'Content-Type': 'application/json', ...corsHeaders },
+      });
     }
   }
 
@@ -449,7 +587,7 @@ function createLiveEditHandler(options = {}) {
 
 /**
  * Create a Pages Router API handler (for pages/api/live-edit.js)
- * 
+ *
  * Usage:
  *   const { createPagesApiHandler } = require('@codedesignai/nextjs-live-edit-plugin/live-edit-handler');
  *   module.exports = createPagesApiHandler();
@@ -466,21 +604,20 @@ function createPagesApiHandler(options = {}) {
     res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
 
-    // Handle OPTIONS preflight
     if (req.method === 'OPTIONS') {
       res.status(200).end();
       return;
     }
 
-    // Only allow POST
     if (req.method !== 'POST') {
       res.status(405).json({ success: false, error: 'Method Not Allowed' });
       return;
     }
 
-    // Only allow in development
     if (process.env.NODE_ENV === 'production') {
-      res.status(403).json({ success: false, error: 'Live editing is only available in development mode' });
+      res
+        .status(403)
+        .json({ success: false, error: 'Live editing is only available in development mode' });
       return;
     }
 
@@ -489,7 +626,7 @@ function createPagesApiHandler(options = {}) {
       console.log('🔄 Received enhanced live edit request:', JSON.stringify(data, null, 2));
 
       const result = await handleEnhancedTextUpdate(data, handlerOptions);
-      
+
       if (result.success) {
         res.status(200).json({ success: true, message: result.message });
       } else {
@@ -502,6 +639,8 @@ function createPagesApiHandler(options = {}) {
   };
 }
 
+// ─── Exports ────────────────────────────────────────────────────────────────
+
 module.exports = {
   handleEnhancedTextUpdate,
   validateLocationInSource,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codedesignai/nextjs-live-edit-plugin",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Next.js plugin for live editing React components with AST-powered source mapping",
   "main": "index.js",
   "exports": {

package/source-mapper-loader.js

@@ -5,17 +5,41 @@ const _traverse = require('@babel/traverse');
 // Handle both ES module and CommonJS exports
 const traverse = _traverse.default || _traverse;
 
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+/**
+ * Tags whose content is never visible text on the page.
+ * We skip these entirely to avoid injecting data attributes into non-visible elements.
+ */
+const EXCLUDED_TAGS = new Set([
+  'script', 'style', 'meta', 'link', 'head', 'noscript',
+  'title', 'html', 'base', 'template',
+]);
+
+/**
+ * Elements whose `src` attribute is an editable image source.
+ */
+const IMAGE_ELEMENTS = new Set(['img', 'Image']);
+
+/**
+ * Attributes that contain user-visible text worth making editable.
+ * Scoped to `placeholder` per the current requirements.
+ */
+const TEXT_ATTRIBUTES = new Set(['placeholder']);
+
+// ─── Utility Functions ──────────────────────────────────────────────────────
+
 /**
- * Convert character position to line number and character position within line
- * Returns 0-based indexing (line 0 = first line, char 0 = first character in line)
+ * Convert character position to line number and character position within line.
+ * Returns 0-based indexing (line 0 = first line, char 0 = first character in line).
  */
 function getLineAndCharPosition(content, charPosition) {
   const lines = content.split('\n');
   let currentPos = 0;
-  
+
   for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
     const lineLength = lines[lineIndex].length + 1; // +1 for newline character
-    
+
     if (charPosition < currentPos + lineLength) {
       const charInLine = charPosition - currentPos;
       return {
@@ -23,11 +47,11 @@ function getLineAndCharPosition(content, charPosition) {
         character: charInLine   // 0-based character position within line
       };
     }
-    
+
     currentPos += lineLength;
   }
-  
-  // Fallback - shouldn't happen with valid positions
+
+  // Fallback — shouldn't happen with valid positions
   return {
     line: lines.length - 1,
     character: lines[lines.length - 1].length
@@ -35,22 +59,91 @@ function getLineAndCharPosition(content, charPosition) {
 }
 
 /**
- * Generate a unique element ID
+ * Generate a unique element ID.
+ * Uses a file-wide counter to avoid collisions when multiple same-tag
+ * elements appear on the same line.
  */
-function generateElementId(filePath, lineNumber, elementName, index = 0) {
+function generateElementId(filePath, lineNumber, elementName, counter) {
   const fileName = path.basename(filePath, path.extname(filePath));
   const cleanFileName = fileName.replace(/[^a-zA-Z0-9]/g, '');
-  return `${cleanFileName}-${elementName}-L${lineNumber}-${index}`;
+  return `${cleanFileName}-${elementName}-L${lineNumber}-${counter}`;
 }
 
 /**
- * Custom webpack loader that injects AST-powered source mapping data
- * into JSX elements. This is the Next.js equivalent of the Vite
- * sourceMapperPlugin() transform hook.
+ * Build a region descriptor for injection into data-source-loc.
+ */
+function makeRegion(source, file, start, end, text, type) {
+  const startPos = getLineAndCharPosition(source, start);
+  const endPos = getLineAndCharPosition(source, end);
+  return {
+    file,
+    start,
+    end,
+    text,
+    type,
+    line: startPos.line,
+    character: startPos.character,
+    endLine: endPos.line,
+    endCharacter: endPos.character,
+  };
+}
+
+/**
+ * Resolve the tag name string from an opening element's name node.
+ * Handles JSXIdentifier (`div`) and JSXMemberExpression (`motion.div`).
+ * Returns null for unsupported name types (JSXNamespacedName, etc.).
+ */
+function resolveTagName(nameNode) {
+  if (nameNode.type === 'JSXIdentifier') {
+    return nameNode.name;
+  }
+  if (nameNode.type === 'JSXMemberExpression') {
+    return nameNode.property.name;
+  }
+  return null;
+}
+
+/**
+ * Extract a string literal value from a JSXAttribute's value node.
+ * Handles both bare StringLiterals and JSXExpressionContainer wrapping.
+ * Returns { value, start, end } or null.
+ */
+function extractStringFromAttrValue(valueNode) {
+  if (!valueNode) return null;
+
+  if (valueNode.type === 'StringLiteral') {
+    return {
+      value: valueNode.value,
+      start: valueNode.start + 1, // skip opening quote
+      end: valueNode.end - 1,     // skip closing quote
+    };
+  }
+
+  if (valueNode.type === 'JSXExpressionContainer') {
+    const expr = valueNode.expression;
+    if (expr.type === 'StringLiteral') {
+      return {
+        value: expr.value,
+        start: expr.start + 1,
+        end: expr.end - 1,
+      };
+    }
+  }
+
+  return null;
+}
+
+// ─── Webpack Loader ─────────────────────────────────────────────────────────
+
+/**
+ * Custom webpack / Turbopack loader that injects AST-powered source mapping
+ * data into JSX elements for live editing.
  *
- * Injects `data-element-id` and `data-source-loc` attributes into:
- * - Text content elements (JSXText nodes)
- * - Image elements (<img> and <Image>) with src attributes
+ * Injects `data-element-id` and `data-source-loc` attributes for:
+ *   - Text content (JSXText, string expressions, static template literals)
+ *   - Image sources (<img>, <Image> src)
+ *   - Text-bearing attributes (placeholder)
+ *   - Inline backgroundImage styles
  */
 module.exports = function sourceMapperLoader(source) {
   // Only run in development mode
@@ -60,7 +153,7 @@ module.exports = function sourceMapperLoader(source) {
 
   const resourcePath = this.resourcePath;
   const options = this.getOptions() || {};
-  
+
   // Configurable source directories (default: app, components, src)
   const sourceDirs = options.sourceDirs || ['app', 'components', 'src'];
   const projectRoot = options.projectRoot || process.cwd();
@@ -72,17 +165,24 @@ module.exports = function sourceMapperLoader(source) {
 
   // Check if the file is in one of the configured source directories
   const relativePath = path.relative(projectRoot, resourcePath);
-  const isInSourceDir = sourceDirs.some(dir => relativePath.startsWith(dir + path.sep) || relativePath.startsWith(dir + '/'));
-  
+  const isInSourceDir = sourceDirs.some(
+    dir => relativePath.startsWith(dir + path.sep) || relativePath.startsWith(dir + '/')
+  );
+
   if (!isInSourceDir) {
     return source;
   }
 
-  // Use the first matching source dir to compute the relative path for element IDs
-  const matchingDir = sourceDirs.find(dir => relativePath.startsWith(dir + path.sep) || relativePath.startsWith(dir + '/'));
-  const relativeToSrcDir = matchingDir ? path.relative(matchingDir, relativePath) : relativePath;
+  // Compute the relative path from the matching source dir (for element IDs / location data)
+  const matchingDir = sourceDirs.find(
+    dir => relativePath.startsWith(dir + path.sep) || relativePath.startsWith(dir + '/')
+  );
+  const relativeToSrcDir = matchingDir
+    ? path.relative(matchingDir, relativePath)
+    : relativePath;
 
   const modifications = [];
+  let elementCounter = 0; // file-wide counter to avoid ID collisions
 
   try {
     const ast = parser.parse(source, {
@@ -94,139 +194,206 @@ module.exports = function sourceMapperLoader(source) {
       JSXElement(astPath) {
         const { node } = astPath;
         const openingElement = node.openingElement;
-        
-        // Handle JSXIdentifier and JSXMemberExpression
-        let tagName;
-        if (openingElement.name.type === 'JSXIdentifier') {
-          tagName = openingElement.name.name;
-        } else if (openingElement.name.type === 'JSXMemberExpression') {
-          // e.g., motion.div → use the property name
-          tagName = openingElement.name.property.name;
-        } else {
-          return; // Skip unsupported tag name types
-        }
-        
+
+        // ── Resolve tag name ─────────────────────────────────────────────
+        const tagName = resolveTagName(openingElement.name);
+        if (!tagName) return; // unsupported name type
+
+        // ── Skip non-visible elements ────────────────────────────────────
+        if (EXCLUDED_TAGS.has(tagName.toLowerCase())) return;
+
         const { line } = openingElement.loc.start;
 
-        // === HANDLE IMAGE ELEMENTS (both <img> and <Image>) ===
-        const isImageElement = tagName === 'img' || tagName === 'Image';
-        
-        if (isImageElement) {
-          // Find the src attribute
-          const srcAttribute = openingElement.attributes.find(attr => 
-            attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'src'
+        // Collect all editable regions for this element
+        const regions = [];
+
+        // ── 1. IMAGE SOURCES ─────────────────────────────────────────────
+        if (IMAGE_ELEMENTS.has(tagName)) {
+          const srcAttr = openingElement.attributes.find(
+            attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'src'
           );
 
-          if (srcAttribute && srcAttribute.value) {
-            let srcValue, srcStart, srcEnd;
-
-            // Handle different src value types
-            if (srcAttribute.value.type === 'StringLiteral') {
-              // src="image.jpg"
-              srcValue = srcAttribute.value.value;
-              srcStart = srcAttribute.value.start + 1; // Skip opening quote
-              srcEnd = srcAttribute.value.end - 1;     // Skip closing quote
-            } else if (srcAttribute.value.type === 'JSXExpressionContainer') {
-              // src={variable} or src={`template`}
-              const expression = srcAttribute.value.expression;
-              if (expression.type === 'StringLiteral') {
-                srcValue = expression.value;
-                srcStart = expression.start + 1;
-                srcEnd = expression.end - 1;
-              } else if (expression.type === 'TemplateLiteral') {
-                // For template literals, we'll skip for now as they're dynamic
-                return;
-              } else {
-                // Skip dynamic expressions (variables, etc.)
-                return;
-              }
+          if (srcAttr && srcAttr.value) {
+            const extracted = extractStringFromAttrValue(srcAttr.value);
+
+            if (extracted) {
+              regions.push(
+                makeRegion(source, relativeToSrcDir, extracted.start, extracted.end, extracted.value, 'image-src')
+              );
             }
+            // If src is a dynamic expression (variable, template literal with expressions), skip it
+          }
+        }
+
+        // ── 2. TEXT CHILDREN ─────────────────────────────────────────────
+        // Process ALL children (not just the first) to capture every editable text segment.
+        for (const child of node.children) {
+          // 2a. Direct JSXText with non-whitespace content
+          if (child.type === 'JSXText') {
+            const trimmed = child.value.trim();
+            if (trimmed.length > 0) {
+              regions.push(
+                makeRegion(source, relativeToSrcDir, child.start, child.end, trimmed, 'text-content')
+              );
+            }
+          }
 
-            if (srcValue !== undefined) {
-              // Get line-based positions for chat AI mode
-              const startLinePos = getLineAndCharPosition(source, srcStart);
-              const endLinePos = getLineAndCharPosition(source, srcEnd);
-              
-              const locationData = {
-                file: relativeToSrcDir,
-                start: srcStart,
-                end: srcEnd,
-                text: srcValue,
-                type: 'image-src', // Mark this as an image source
-                // Line-based information for chat AI mode (0-based indexing)
-                line: startLinePos.line,
-                character: startLinePos.character,
-                endLine: endLinePos.line,
-                endCharacter: endLinePos.character
-              };
-
-              const elementId = generateElementId(relativeToSrcDir, line, tagName, 0);
-              
-              const insertPosition = openingElement.selfClosing 
-                ? openingElement.end - 2  // Before '/>'
-                : openingElement.end - 1; // Before '>'
-
-              const attributes = ` data-element-id="${elementId}" data-source-loc='${JSON.stringify(locationData).replace(/'/g, "&apos;")}'`;
-
-              modifications.push({ position: insertPosition, text: attributes });
+          // 2b. String literal inside expression container: {"Hello"}
+          if (child.type === 'JSXExpressionContainer') {
+            const expr = child.expression;
+
+            if (expr.type === 'StringLiteral') {
+              regions.push(
+                makeRegion(
+                  source, relativeToSrcDir,
+                  expr.start + 1, // skip opening quote
+                  expr.end - 1,   // skip closing quote
+                  expr.value,
+                  'string-expression'
+                )
+              );
+            }
+
+            // 2c. Static template literal (no expressions): {`Hello`}
+            if (
+              expr.type === 'TemplateLiteral' &&
+              expr.expressions.length === 0 &&
+              expr.quasis.length === 1
+            ) {
+              const quasi = expr.quasis[0];
+              const text = quasi.value.cooked || quasi.value.raw;
+              if (text.trim().length > 0) {
+                regions.push(
+                  makeRegion(
+                    source, relativeToSrcDir,
+                    quasi.start, // template quasi start is after the backtick
+                    quasi.end,   // template quasi end is before the closing backtick
+                    text,
+                    'template-literal'
+                  )
+                );
+              }
             }
           }
-          return; // Done processing this image element
         }
 
-        // === HANDLE TEXT CONTENT ELEMENTS ===
-        // Find text content children
-        const textChildren = node.children.filter(child => 
-          child.type === 'JSXText' && child.value.trim().length > 0
+        // ── 3. TEXT-BEARING ATTRIBUTES ───────────────────────────────────
+        for (const attr of openingElement.attributes) {
+          if (attr.type !== 'JSXAttribute' || !attr.name) continue;
+
+          const attrName = attr.name.name;
+          if (!TEXT_ATTRIBUTES.has(attrName)) continue;
+
+          const extracted = extractStringFromAttrValue(attr.value);
+          if (extracted && extracted.value.trim().length > 0) {
+            regions.push(
+              makeRegion(
+                source, relativeToSrcDir,
+                extracted.start, extracted.end,
+                extracted.value,
+                `attribute:${attrName}`
+              )
+            );
+          }
+        }
+
+        // ── 4. INLINE backgroundImage STYLE ──────────────────────────────
+        const styleAttr = openingElement.attributes.find(
+          attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'style'
         );
 
-        // Skip if no text content
-        if (textChildren.length === 0) return;
-
-        // Only inject once per element, using the FIRST text child
-        const firstTextNode = textChildren[0];
-        
-        // Get line-based positions for chat AI mode
-        const startLinePos = getLineAndCharPosition(source, firstTextNode.start);
-        const endLinePos = getLineAndCharPosition(source, firstTextNode.end);
-        
-        const locationData = {
-          file: relativeToSrcDir,
-          start: firstTextNode.start,
-          end: firstTextNode.end,
-          text: firstTextNode.value.trim(),
-          type: 'text-content', // Mark this as text content
-          // Line-based information for chat AI mode (0-based indexing)
-          line: startLinePos.line,
-          character: startLinePos.character,
-          endLine: endLinePos.line,
-          endCharacter: endLinePos.character
-        };
-
-        const elementId = generateElementId(relativeToSrcDir, line, tagName, 0);
-        
-        // Inject attributes into the opening tag
-        const insertPosition = openingElement.selfClosing 
-          ? openingElement.end - 2  // Before '/>'
-          : openingElement.end - 1; // Before '>'
-
-        const attributes = ` data-element-id="${elementId}" data-source-loc='${JSON.stringify(locationData).replace(/'/g, "&apos;")}'`;
-
-        modifications.push({ position: insertPosition, text: attributes });
+        if (styleAttr && styleAttr.value && styleAttr.value.type === 'JSXExpressionContainer') {
+          const styleExpr = styleAttr.value.expression;
+
+          // style={{ backgroundImage: 'url(...)' }} or style={{ backgroundImage: "url(...)" }}
+          if (styleExpr.type === 'ObjectExpression') {
+            for (const prop of styleExpr.properties) {
+              if (
+                prop.type === 'ObjectProperty' &&
+                prop.key &&
+                (prop.key.name === 'backgroundImage' || prop.key.value === 'backgroundImage')
+              ) {
+                if (prop.value.type === 'StringLiteral') {
+                  const bgValue = prop.value.value;
+                  // Extract URL from url('...') or url("...") or url(...)
+                  const urlMatch = bgValue.match(/url\(\s*['"]?([^'")\s]+)['"]?\s*\)/);
+                  if (urlMatch) {
+                    const url = urlMatch[1];
+                    // Find the position of the URL within the full string literal value
+                    const urlIndexInValue = bgValue.indexOf(url);
+                    // prop.value.start + 1 skips the opening quote of the string literal
+                    const urlStart = prop.value.start + 1 + urlIndexInValue;
+                    const urlEnd = urlStart + url.length;
+
+                    regions.push(
+                      makeRegion(
+                        source, relativeToSrcDir,
+                        urlStart, urlEnd,
+                        url,
+                        'style-background-image'
+                      )
+                    );
+                  }
+                }
+
+                // style={{ backgroundImage: `url(...)` }} — static template literal
+                if (
+                  prop.value.type === 'TemplateLiteral' &&
+                  prop.value.expressions.length === 0 &&
+                  prop.value.quasis.length === 1
+                ) {
+                  const quasi = prop.value.quasis[0];
+                  const bgValue = quasi.value.cooked || quasi.value.raw;
+                  const urlMatch = bgValue.match(/url\(\s*['"]?([^'")\s]+)['"]?\s*\)/);
+                  if (urlMatch) {
+                    const url = urlMatch[1];
+                    const urlIndexInValue = bgValue.indexOf(url);
+                    const urlStart = quasi.start + urlIndexInValue;
+                    const urlEnd = urlStart + url.length;
+
+                    regions.push(
+                      makeRegion(
+                        source, relativeToSrcDir,
+                        urlStart, urlEnd,
+                        url,
+                        'style-background-image'
+                      )
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        // ── INJECT ───────────────────────────────────────────────────────
+        if (regions.length > 0) {
+          const currentId = generateElementId(relativeToSrcDir, line, tagName, elementCounter++);
+
+          const insertPosition = openingElement.selfClosing
+            ? openingElement.end - 2  // Before '/>'
+            : openingElement.end - 1; // Before '>'
+
+          const locJson = JSON.stringify(regions).replace(/'/g, '&apos;');
+          const attributes = ` data-element-id="${currentId}" data-source-loc='${locJson}'`;
+
+          modifications.push({ position: insertPosition, text: attributes });
+        }
       },
     });
 
-    // Apply modifications from end to start to preserve positions
+    // Apply modifications from end to start to preserve character positions
     if (modifications.length > 0) {
       let transformedCode = source.split('');
-      modifications.sort((a, b) => b.position - a.position).forEach(mod => {
-        transformedCode.splice(mod.position, 0, mod.text);
-      });
+      modifications
+        .sort((a, b) => b.position - a.position)
+        .forEach(mod => {
+          transformedCode.splice(mod.position, 0, mod.text);
+        });
       return transformedCode.join('');
     }
-
   } catch (e) {
-    // Don't break the build on parse errors - just skip transformation
+    // Don't break the build on parse errors — just skip transformation
     console.error(`❌ [nextjs-live-edit] Failed to parse ${relativePath}:`, e.message);
   }