rivet-design 0.1.0

package/dist/scripts/selection-script.js

@@ -0,0 +1,724 @@
+(function() {
+  // Prevent multiple injections
+  if (window.rivetSelectionInjected) return;
+  window.rivetSelectionInjected = true;
+
+  console.log('🔧 Rivet selection script loading...');
+
+  let isSelectionMode = false;
+  let hoveredElement = null;
+  
+  // Selection box variables
+  let isBoxSelection = false;
+  let boxSelectionStart = null;
+  let selectionBox = null;
+  let scrollAccumulation = 0;
+  let currentMousePos = { x: 0, y: 0 };
+
+  const transformComputedStyles = (computedStyles) => 
+    Object.fromEntries(
+      Array.from(computedStyles).map(prop => [prop, computedStyles.getPropertyValue(prop)])
+    );
+  ;
+
+  // Add selection styles
+  const style = document.createElement('style');
+  style.id = 'rivet-selection-styles';
+  style.textContent = `
+    .rivet-highlight {
+      outline: 2px solid #007acc !important;
+      outline-offset: 2px !important;
+      cursor: crosshair !important;
+    }
+    .rivet-selected {
+      outline: 2px solid #ff6b35 !important;
+      outline-offset: 2px !important;
+    }
+    .rivet-selection-box {
+      position: fixed !important;
+      border: 3px solid #ff6b35 !important;
+      background-color: rgba(255, 107, 53, 0.5) !important;
+      pointer-events: none !important;
+      z-index: 999999 !important;
+      display: none !important;
+      box-sizing: border-box !important;
+      border-radius: 4px !important;
+      /* Debug styles to make it very obvious */
+      box-shadow: 0 0 10px rgba(255, 107, 53, 0.7) !important;
+      opacity: 1 !important;
+    }
+  `;
+  document.head.appendChild(style);
+
+
+  const removeHighlight = (element) => {
+    element.classList.remove('rivet-highlight');
+  };
+
+  const getXPath = (element) => {
+    if (element.id) return `//*[@id="${element.id}"]`;
+    if (element === document.body) return '/html/body';
+    
+    let ix = 0;
+    const siblings = element.parentNode?.childNodes || [];
+    for (let i = 0; i < siblings.length; i++) {
+      const sibling = siblings[i];
+      if (sibling === element) {
+        const parent = element.parentNode;
+        return getXPath(parent) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']';
+      }
+      if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+        ix++;
+      }
+    }
+    return '';
+  };
+
+  const getSourceFile = (element) => {
+    console.log('DEBUG: getSourceFile invoked', element);
+    try {
+      // Strategy 1: React Dev Tools fiber with debug source
+      console.log('DEBUG: Attempting strategy 1: React dev tools');
+
+      const reactFiberKeys = Object.keys(element).filter(key => 
+        key.startsWith('__reactInternalInstance$') || 
+        key.startsWith('__reactFiber$')
+      );
+      
+      for (const key of reactFiberKeys) {
+        const fiber = element[key];
+        let current = fiber;
+        let depth = 0;
+        
+        // Walk up the fiber tree looking for _debugSource
+        while (current && depth < 10) {
+          if (current._debugSource && current._debugSource.fileName) {
+            const fileName = current._debugSource.fileName;
+            // Convert absolute path to relative from project root
+            const srcMatch = fileName.match(/(src\/.+)$/);
+            if (srcMatch) {
+              console.log('🗂️ Found source file via React fiber:', srcMatch[1]);
+              return srcMatch[1];
+            }
+            return fileName;
+          }
+          
+          // Try different fiber navigation patterns
+          current = current.return || current.parent || current._owner;
+          depth++;
+        }
+      }
+
+      // Strategy 2: Check for Next.js development data attributes
+      console.log('DEBUG: Attempting strategy 2: Next.js data attributes');
+      let currentEl = element;
+      let attempts = 0;
+      while (currentEl && attempts < 5) {
+        const nextjsSource = currentEl.getAttribute?.('data-nextjs-source');
+        if (nextjsSource) {
+          console.log('🗂️ Found source file via Next.js data attribute:', nextjsSource);
+          return nextjsSource;
+        }
+        
+        const reactSource = currentEl.getAttribute?.('data-reactroot') || 
+                           currentEl.getAttribute?.('data-react-component');
+        if (reactSource) {
+          console.log('🗂️ Found React component data attribute:', reactSource);
+          return reactSource;
+        }
+        
+        currentEl = currentEl.parentElement;
+        attempts++;
+      }
+
+      // Strategy 3: Check for webpack/dev server source mapping comments
+      console.log('DEBUG: Attempting strategy 3: webpack/dev server source mapping comments');
+      const scripts = document.querySelectorAll('script[src*="webpack"], script[src*="vite"], script[src*="next"]');
+      if (scripts.length > 0) {
+        // In dev mode, try to extract from current script stack
+        const error = new Error();
+        const stack = error.stack || '';
+        
+        // Look for webpack module paths in stack trace
+        const webpackMatch = stack.match(/webpack:\/\/.*\/(src\/[^?\\s:]+\.(tsx?|jsx?))/);
+        if (webpackMatch) {
+          console.log('🗂️ Found source file via webpack stack:', webpackMatch[1]);
+          return webpackMatch[1];
+        }
+        
+        // Look for localhost dev server paths
+        const devMatch = stack.match(/localhost:\d+.*\/(src\/[^?\\s:]+\.(tsx?|jsx?))/);
+        if (devMatch) {
+          console.log('🗂️ Found source file via dev server:', devMatch[1]);
+          return devMatch[1];
+        }
+      }
+
+      console.log('⚠️ No source file detected for element', element);
+      return null;
+    } catch (error) {
+      console.warn('Error detecting source file:', error);
+      return null;
+    }
+  };
+
+  // Selection box functions
+  const createSelectionBox = () => {
+    if (selectionBox) {
+      console.log('🔍 Reusing existing selection box:', selectionBox);
+      return selectionBox;
+    }
+    
+    selectionBox = document.createElement('div');
+    selectionBox.id = 'rivet-debug-selection-box';
+    // Don't use the CSS class - apply styles directly to avoid display:none conflict
+    
+    // Force all styles directly to avoid any CSS conflicts
+    // TODO: Standardize this with the element data above 
+    selectionBox.style.position = 'fixed';
+    selectionBox.style.pointerEvents = 'none';
+    selectionBox.style.zIndex = '999999';
+    selectionBox.style.boxSizing = 'border-box';
+    selectionBox.style.border = '3px solid #ff6b35';
+    selectionBox.style.backgroundColor = 'rgba(255, 107, 53, 0.5)';
+    selectionBox.style.borderRadius = '4px';
+    selectionBox.style.boxShadow = '0 0 10px rgba(255, 107, 53, 0.7)';
+    selectionBox.style.display = 'none'; // Will be set to block when shown
+    
+    document.body.appendChild(selectionBox);
+    console.log('🔍 Created new selection box:', selectionBox, 'Parent:', document.body);
+    return selectionBox;
+  };
+
+  const showSelectionBox = (startX, startY, endX, endY) => {
+    const box = createSelectionBox();
+    
+    // Use viewport coordinates directly since we're using fixed positioning
+    const left = Math.min(startX, endX);
+    const top = Math.min(startY, endY);
+    const width = Math.abs(endX - startX) + scrollAccumulation;
+    const height = Math.abs(endY - startY) + scrollAccumulation;
+    
+    // Figma-style: start from exact size (even 0px) for precise feedback
+    box.style.left = left + 'px';
+    box.style.top = top + 'px';
+    box.style.width = width + 'px';
+    box.style.height = height + 'px';
+    box.style.display = 'block';
+    
+    // Debug: Force visible styles with display:block override
+    box.style.backgroundColor = 'rgba(255, 107, 53, 0.5)';
+    box.style.border = '3px solid #ff6b35';
+    box.style.zIndex = '999999';
+    box.style.display = 'block';
+    box.style.visibility = 'visible';
+    
+    console.log('🔍 Selection box updated:', { 
+      left, top, width, height, 
+      scrollAccumulation,
+      element: box,
+      computedStyle: window.getComputedStyle(box).display,
+      visible: box.offsetWidth > 0 && box.offsetHeight > 0
+    });
+  };
+
+  const hideSelectionBox = () => {
+    if (selectionBox) {
+      selectionBox.style.display = 'none';
+    }
+  };
+
+  // Box selection event handlers
+  const handleMouseDown = (e) => {
+    console.log('🔍 MouseDown event triggered:', {
+      isSelectionMode,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      target: e.target
+    });
+    
+    // Only enable bounding box interactions in edit mode
+    if (isSelectionMode) {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      isBoxSelection = true;
+      scrollAccumulation = 0;
+      boxSelectionStart = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      
+      // Update current mouse position
+      currentMousePos = { x: e.clientX, y: e.clientY };
+      
+      // Disable individual element highlighting during box selection
+      if (hoveredElement) {
+        removeHighlight(hoveredElement);
+        hoveredElement = null;
+      }
+      
+      // Show initial selection box immediately (even with 0 size)
+      console.log('🔍 About to show selection box...');
+      showSelectionBox(
+        boxSelectionStart.x,
+        boxSelectionStart.y,
+        boxSelectionStart.x,
+        boxSelectionStart.y
+      );
+      
+      console.log('🔍 Box selection started at:', boxSelectionStart);
+    }
+  };
+
+  const handleMouseMove = (e) => {
+    // Always track mouse position for wheel events
+    currentMousePos = { x: e.clientX, y: e.clientY };
+    
+    // Figma-style: Immediate and smooth bounding box updates during drag
+    if (isBoxSelection && boxSelectionStart && isSelectionMode) {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      console.log('🔍 MouseMove during drag:', {
+        startX: boxSelectionStart.x,
+        startY: boxSelectionStart.y,
+        currentX: e.clientX,
+        currentY: e.clientY
+      });
+      
+      showSelectionBox(
+        boxSelectionStart.x,
+        boxSelectionStart.y,
+        e.clientX,
+        e.clientY
+      );
+    }
+  };
+
+  const handleMouseUp = (e) => {
+    if (!isBoxSelection || !isSelectionMode) return;
+    
+    if (boxSelectionStart) {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      // Store coordinates before cleanup for element selection
+      const selectionCoords = {
+        left: Math.min(boxSelectionStart.x, e.clientX),
+        top: Math.min(boxSelectionStart.y, e.clientY),
+        width: Math.abs(e.clientX - boxSelectionStart.x) + scrollAccumulation,
+        height: Math.abs(e.clientY - boxSelectionStart.y) + scrollAccumulation
+      };
+      
+      // Always clean up the visual bounding box
+      hideSelectionBox();
+      isBoxSelection = false;
+      boxSelectionStart = null;
+      scrollAccumulation = 0;
+      
+      // Process element selection and highlighting
+      if (isSelectionMode) {
+        // Use stored coordinates for element selection
+        const { left, top, width, height } = selectionCoords;
+        
+        // Convert to document coordinates for element intersection checks
+        const docLeft = left + window.scrollX;
+        const docTop = top + window.scrollY;
+        
+        // Find elements within selection box
+        const rawSelectedElements = [];
+        const allElements = document.querySelectorAll('*');
+      
+      allElements.forEach(element => {
+        const rect = element.getBoundingClientRect();
+        const elemLeft = rect.left + window.scrollX;
+        const elemTop = rect.top + window.scrollY;
+        const elemRight = elemLeft + rect.width;
+        const elemBottom = elemTop + rect.height;
+        
+        // Check if element intersects with selection box
+        if (elemLeft < docLeft + width && 
+            elemRight > docLeft && 
+            elemTop < docTop + height && 
+            elemBottom > docTop &&
+            rect.width > 0 && rect.height > 0) { // Only include visible elements
+          rawSelectedElements.push(element);
+        }
+      });
+      
+      // Find meaningful elements for multi-selection  
+      const findMeaningfulElements = (elements) => {
+        const selectionArea = width * height;
+        
+        // Step 1: Score by fit to selection box
+        const scored = elements.map(el => {
+          const rect = el.getBoundingClientRect();
+          const elementArea = rect.width * rect.height;
+          const ratio = elementArea / selectionArea;
+          const tagName = el.tagName.toLowerCase();
+          
+          // Good fit: similar size to selection (0.2x to 3x)  
+          let score = (ratio >= 0.2 && ratio <= 3) ? 100 : 20;
+          
+          // Boost interactive elements
+          if (['button', 'a', 'input', 'select', 'textarea'].includes(tagName)) score += 50;
+          
+          // Penalty for tiny noise or huge containers
+          if (ratio < 0.05 || ratio > 10) score -= 50;
+          
+          return { element: el, score, ratio };
+        });
+        
+        // Step 2: Remove noise and sort by score
+        const filtered = scored
+          .filter(item => item.score > 30)
+          .filter(item => !isDecorative(item.element))
+          .sort((a, b) => b.score - a.score);
+        
+        // Step 3: Remove children if parent selected  
+        const final = [];
+        for (const candidate of filtered) {
+          const hasParentInList = final.some(chosen => 
+            chosen.element.contains(candidate.element)
+          );
+          if (!hasParentInList) {
+            final.push(candidate);
+          }
+        }
+        
+        console.log(`🎯 Multi-selection: ${final.length} elements selected`);
+        return final.slice(0, 6).map(item => item.element);
+      };
+      
+      // Helper: Check if element is decorative noise
+      const isDecorative = (element) => {
+        const tagName = element.tagName.toLowerCase();
+        
+        // SVG children
+        if (['path', 'g', 'circle', 'rect', 'line', 'polygon'].includes(tagName)) return true;
+        
+        // Icon fonts
+        if (tagName === 'i' && element.className && /\b(fa|icon|material)\b/.test(element.className)) return true;
+        
+        return false;
+      };
+
+      // Find the most specific single element using a scoring system
+      const findMostSpecificElement = (elements) => {
+        // Calculate selection center for proximity scoring
+        const selectionCenterX = left + width / 2;
+        const selectionCenterY = top + height / 2;
+        
+        // Score each element based on specificity and relevance
+        const scoredElements = elements.map(element => {
+          const tagName = element.tagName.toLowerCase();
+          const rect = element.getBoundingClientRect();
+          const elementCenterX = rect.left + rect.width / 2;
+          const elementCenterY = rect.top + rect.height / 2;
+          
+          let score = 0;
+          
+          // 1. Semantic element type scoring (higher = more specific)
+          const semanticScores = {
+            'button': 100,
+            'input': 95,
+            'select': 95,
+            'textarea': 95,
+            'a': 90,
+            'img': 85,
+            'h1': 80, 'h2': 80, 'h3': 80, 'h4': 80, 'h5': 80, 'h6': 80,
+            'p': 70,
+            'span': 60,
+            'strong': 60, 'em': 60, 'b': 60, 'i': 60,
+            'li': 55,
+            'div': 40,
+            'section': 30, 'article': 30, 'header': 30, 'footer': 30, 'nav': 30,
+            'main': 20,
+            'html': 0, 'body': 0, 'head': 0
+          };
+          score += semanticScores[tagName] || 50;
+          
+          // 2. Meaningful attributes boost score
+          try {
+            const className = element.className && typeof element.className === 'string' 
+              ? element.className 
+              : (element.className && element.className.baseVal) || '';
+            const id = element.id || '';
+            
+            if (id.trim()) score += 30;
+            if (className.trim()) score += 20;
+            
+            // Specific class patterns that indicate interactive elements
+            const interactiveClasses = ['btn', 'button', 'link', 'card', 'item', 'component'];
+            if (interactiveClasses.some(cls => className.toLowerCase().includes(cls))) {
+              score += 40;
+            }
+          } catch (e) {
+            // Handle SVG or other special elements
+          }
+          
+          // 3. Content specificity
+          const textContent = element.textContent ? element.textContent.trim() : '';
+          if (textContent && textContent.length < 200) { // Meaningful but not too verbose
+            score += Math.min(textContent.length, 50); // Up to 50 points for content
+          }
+          
+          // 4. Penalty for overly large elements (likely containers)
+          const elementArea = rect.width * rect.height;
+          const screenArea = window.innerWidth * window.innerHeight;
+          if (elementArea > screenArea * 0.5) {
+            score -= 100; // Major penalty for very large elements
+          } else if (elementArea > screenArea * 0.2) {
+            score -= 50; // Moderate penalty for large elements
+          }
+          
+          // 5. Proximity to selection center (closer = better)
+          const distance = Math.sqrt(
+            Math.pow(elementCenterX - selectionCenterX, 2) + 
+            Math.pow(elementCenterY - selectionCenterY, 2)
+          );
+          const maxDistance = Math.sqrt(width * width + height * height);
+          const proximityScore = Math.max(0, (maxDistance - distance) / maxDistance * 30);
+          score += proximityScore;
+          
+          // 6. Size appropriateness (elements that closely match selection size get bonus)
+          const selectionArea = width * height;
+          const sizeRatio = Math.min(elementArea, selectionArea) / Math.max(elementArea, selectionArea);
+          score += sizeRatio * 25; // Up to 25 points for size match
+          
+          // 7. Depth in DOM (deeper = more specific)
+          let depth = 0;
+          let current = element;
+          while (current.parentElement && depth < 50) {
+            depth++;
+            current = current.parentElement;
+          }
+          score += Math.min(depth * 2, 30); // Up to 30 points for depth
+          
+          // 8. Penalty for structural elements
+          const structuralElements = ['html', 'body', 'head', 'meta', 'script', 'style', 'link'];
+          if (structuralElements.includes(tagName)) {
+            score -= 1000; // Eliminate structural elements
+          }
+          
+          return { element, score, tagName, rect };
+        });
+        
+        // Filter out elements with negative scores and structural elements
+        const validElements = scoredElements.filter(item => item.score > 0);
+        
+        if (validElements.length === 0) {
+          console.log('🔍 No valid elements found in selection');
+          return [];
+        }
+        
+        // Sort by score (highest first) and return the best match
+        validElements.sort((a, b) => b.score - a.score);
+        
+        console.log('🔍 Element scoring results:', validElements.slice(0, 5).map(item => ({
+          tag: item.tagName,
+          score: Math.round(item.score),
+          className: item.element.className,
+          id: item.element.id,
+          text: item.element.textContent?.substring(0, 50)
+        })));
+        
+        // Return only the single best element
+        const bestElement = validElements[0].element;
+        console.log(`🎯 Selected best element: <${bestElement.tagName.toLowerCase()}> with score ${Math.round(validElements[0].score)}`);
+        return [bestElement];
+      };
+      
+      // Apply filtering to determine meaningful elements BEFORE highlighting
+      const selectionArea = width * height;
+      const isSmallSelection = selectionArea < 2000;
+      const hasMultipleRelevantElements = rawSelectedElements.length > 3;
+      
+      let selectedElements; // These will be both highlighted AND sent to design panel
+      if (isSmallSelection || !hasMultipleRelevantElements) {
+        selectedElements = findMostSpecificElement(rawSelectedElements);
+        console.log('🎯 Using single-element selection logic');
+      } else {
+        selectedElements = findMeaningfulElements(rawSelectedElements);
+        console.log('🎯 Using multi-element selection logic');
+      }
+      
+      // Send selection data to parent
+      const selectionData = selectedElements.map(element => {
+        const rect = element.getBoundingClientRect();
+        const computedStyles = window.getComputedStyle(element);
+        
+        // Safely extract className (handle SVG elements)
+        let className = '';
+        try {
+          className = element.className && typeof element.className === 'string' 
+            ? element.className 
+            : (element.className && element.className.baseVal) || '';
+        } catch (e) {
+          className = '';
+        }
+        
+        // Safely extract id
+        let id = '';
+        try {
+          id = element.id || '';
+        } catch (e) {
+          id = '';
+        }
+        
+        const filePath = getSourceFile(element);
+        console.log('🧭 Element source mapping:', {
+          tag: element.tagName.toLowerCase(),
+          id,
+          className,
+          filePath
+        });
+        return {
+          tagName: element.tagName.toLowerCase(),
+          className: className,
+          id: id,
+          textContent: element.textContent?.trim().substring(0, 100) || '',
+          innerHTML: element.innerHTML?.substring(0, 200) || '',
+          attributes: Array.from(element.attributes).reduce((acc, attr) => {
+            acc[attr.name] = attr.value;
+            return acc;
+          }, {}),
+          computedStyles: transformComputedStyles(computedStyles),
+          boundingRect: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            top: rect.top,
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+          },
+          xpath: getXPath(element),
+          filePath
+        };
+      });
+      
+      // Apply visual feedback to selected elements
+      document.querySelectorAll('.rivet-selected').forEach(el => {
+        el.classList.remove('rivet-selected');
+      });
+      
+      selectedElements.forEach(element => {
+        element.classList.add('rivet-selected');
+      });
+      
+      console.log('Box selection completed:', { 
+        selectionBox: { left, top, width, height },
+        elementsFound: selectedElements.length,
+        selectedElement: selectedElements.length > 0 ? selectedElements[0].tagName : 'none',
+        selectionArea: selectionCoords.width * selectionCoords.height
+      });
+      
+        // Send different message types based on selection count
+        if (selectedElements.length === 1) {
+          // Single element selected - treat as individual element selection
+          console.log('🎯 Single element selected via box, sending as ELEMENT_SELECTED');
+          window.parent.postMessage({
+            type: 'ELEMENT_SELECTED',
+            element: selectionData[0]
+          }, '*');
+        } else if (selectedElements.length > 1) {
+          // Multiple elements - send as box selection
+          console.log('📦 Multiple elements selected, sending as BOX_SELECTION_COMPLETE');
+          window.parent.postMessage({
+            type: 'BOX_SELECTION_COMPLETE',
+            elements: selectionData,
+            selectionBox: { left, top, width, height }
+          }, '*');
+        } else {
+          console.log('⚠️ No elements selected in bounding box');
+        }
+      }
+    }
+  };
+
+  const handleWheel = (e) => {
+    if (!isBoxSelection || !boxSelectionStart || !isSelectionMode) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Accumulate scroll for growing the box
+    const scrollDelta = Math.abs(e.deltaY) * 1.0; // Increased scale factor for better visibility
+    scrollAccumulation += scrollDelta;
+    
+    console.log('Wheel event detected, scroll accumulation:', scrollAccumulation);
+    
+    // Update the selection box with current mouse position
+    showSelectionBox(
+      boxSelectionStart.x,
+      boxSelectionStart.y,
+      currentMousePos.x,
+      currentMousePos.y
+    );
+  };
+
+  // Event handlers
+  const handleMouseOver = (e) => {
+    // Disable individual element highlighting since box selection is default
+    return;
+  };
+
+  const handleMouseOut = (e) => {
+    // Disable individual element highlighting since box selection is default
+    return;
+  };
+
+  const handleClick = (e) => {
+    // Disable individual element selection since box selection is default
+    return;
+  };
+
+  // Add event listeners
+  document.addEventListener('mouseover', handleMouseOver);
+  document.addEventListener('mouseout', handleMouseOut);
+  document.addEventListener('click', handleClick);
+  document.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+  document.addEventListener('wheel', handleWheel, { passive: false });
+
+  // Listen for commands from parent
+  window.addEventListener('message', (event) => {
+    console.log('📨 Message received:', event.data, 'from origin:', event.origin);
+    
+    if (event.data.type === 'TOGGLE_SELECTION') {
+      isSelectionMode = event.data.enabled;
+      console.log('🔄 Selection mode changed:', isSelectionMode);
+      document.body.style.cursor = isSelectionMode ? 'crosshair' : 'auto';
+      
+      // Clear highlights when disabling selection mode (but keep visual box enabled)
+      if (!isSelectionMode) {
+        document.querySelectorAll('.rivet-highlight, .rivet-selected').forEach(el => {
+          el.classList.remove('rivet-highlight', 'rivet-selected');
+        });
+        hoveredElement = null;
+        
+        // Only clean up box selection if not currently dragging
+        if (!isBoxSelection) {
+          hideSelectionBox();
+        }
+        
+        // Notify parent to clear selection state and close RHS panel
+        console.log('🔄 Clearing selection state in parent');
+        window.parent.postMessage({
+          type: 'CLEAR_SELECTION'
+        }, '*');
+      }
+    }
+  });
+
+  // Notify parent that script is loaded
+  window.parent.postMessage({
+    type: 'SCRIPT_INJECTED'
+  }, '*');
+
+  console.log('✅ Rivet selection script loaded');
+})();