@promakeai/inspector 0.0.3 → 0.1.0

package/dist/plugin.js

@@ -61,13 +61,23 @@ export function inspectorPlugin() {
   let selectedElementData = null;
   let overlay = null;
   let controlBox = null;
+  let promakeBadge = null;
+  
+  // Immediate update flags
+  let updateTextImmediately = false;
+  let updateImageImmediately = false;
   
   // Customizable labels
   let labels = {
     editText: 'Edit Text',
     textPlaceholder: 'Enter text...',
     updateText: 'Update',
-    promptPlaceholder: 'Ask Promake for changes...'
+    promptPlaceholder: 'Ask Promake for changes...',
+    editImage: 'Change Image',
+    imageUploadTitle: 'Select Image',
+    imageUploadHint: 'Click or drag',
+    updateImage: 'Update Image',
+    badgeText: 'Built with Promake'
   };
   
   // Customizable theme colors
@@ -78,7 +88,10 @@ export function inspectorPlugin() {
     buttonTextColor: '#ffffff',
     inputBackgroundColor: '#f9fafb',
     inputTextColor: '#111827',
-    inputBorderColor: '#d1d5db'
+    inputBorderColor: '#d1d5db',
+    badgeGradientStart: '#411E93',
+    badgeGradientEnd: '#E87C85',
+    badgeTextColor: '#ffffff'
   };
   
   // Create overlay for highlighting
@@ -114,37 +127,63 @@ export function inspectorPlugin() {
     const isTextElement = element.textContent && element.children.length === 0;
     const currentText = isTextElement ? element.textContent.trim() : '';
     
-    // Store text info in data attribute for later use
+    // Check if element is an image
+    const isImageElement = element.tagName === 'IMG';
+    const currentImageUrl = isImageElement ? element.src : '';
+    
+    // Store element info in data attributes for later use
     controlBox.setAttribute('data-is-text-element', isTextElement);
     controlBox.setAttribute('data-current-text', currentText);
+    controlBox.setAttribute('data-is-image-element', isImageElement);
+    controlBox.setAttribute('data-current-image-url', currentImageUrl);
     
-    // Calculate position
-    const boxWidth = Math.max(320, Math.min(rect.width, 500));
-    const centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
+    // Calculate position with viewport bounds
+    const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
+    const padding = 10; // Minimum padding from viewport edges
+    
+    // Calculate box width (responsive, between 320 and 600px, but never wider than viewport)
+    const maxWidth = Math.min(600, viewportWidth - (padding * 2));
+    const minWidth = Math.min(320, maxWidth);
+    const boxWidth = Math.max(minWidth, Math.min(rect.width, maxWidth));
+    
+    // Calculate horizontal position (centered on element, but within viewport)
+    let centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
+    // Ensure box doesn't overflow left or right
+    centerLeft = Math.max(padding, Math.min(centerLeft, viewportWidth - boxWidth - padding));
+    
+    // Calculate vertical position
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
     
     // Estimate box height (only prompt input now, smaller)
     const estimatedBoxHeight = 100;
     
-    // Show above if not enough space below
+    // Calculate available space and max height
+    const maxBoxHeight = Math.min(400, viewportHeight - (padding * 4)); // Max 400px or viewport - padding
+    
+    // Determine if box should be above or below element
     let topPosition;
-    if (spaceBelow < estimatedBoxHeight && spaceAbove > spaceBelow) {
-      // Show above element (positioned from top, showing above element)
-      topPosition = rect.top - estimatedBoxHeight - 10;
+    if (spaceBelow < estimatedBoxHeight + padding && spaceAbove > spaceBelow) {
+      // Show above element
+      topPosition = Math.max(padding, rect.top - maxBoxHeight - 10);
       controlBox.setAttribute('data-position', 'above');
     } else {
       // Show below element
       topPosition = rect.bottom + 10;
+      // Ensure box fits in viewport
+      if (topPosition + maxBoxHeight > viewportHeight - padding) {
+        topPosition = Math.max(padding, viewportHeight - maxBoxHeight - padding);
+      }
       controlBox.setAttribute('data-position', 'below');
     }
     
     controlBox.style.cssText = \`
       position: fixed;
       top: \${topPosition}px;
-      left: \${Math.max(10, centerLeft)}px;
+      left: \${centerLeft}px;
       width: \${boxWidth}px;
+      max-height: \${maxBoxHeight}px;
       background: \${theme.backgroundColor};
       border: 1px solid #e5e7eb;
       border-radius: 14px;
@@ -156,6 +195,7 @@ export function inspectorPlugin() {
       display: flex;
       flex-direction: column;
       gap: 0;
+      overflow-y: auto;
     \`;
     
     // Only prompt input and buttons (always shown)
@@ -208,13 +248,14 @@ export function inspectorPlugin() {
       const prompt = promptInput.value.trim();
       if (prompt) {
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_PROMPT_SUBMITTED',
             data: {
               prompt: prompt,
               element: elementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Prompt submitted:', elementData);
         
@@ -298,15 +339,37 @@ export function inspectorPlugin() {
       textSubmit.addEventListener('click', (e) => {
         e.stopPropagation();
         const newText = textInput.value;
+        
+        // Update DOM immediately if requested
+        if (updateTextImmediately && selectedElement) {
+          // Find all text nodes and update them
+          const updateTextNodes = (element) => {
+            for (let i = 0; i < element.childNodes.length; i++) {
+              const node = element.childNodes[i];
+              if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+                node.textContent = newText;
+                break; // Update only the first text node
+              } else if (node.nodeType === Node.ELEMENT_NODE) {
+                // Skip inspector elements
+                if (!node.id || !node.id.startsWith('inspector-')) {
+                  updateTextNodes(node);
+                }
+              }
+            }
+          };
+          updateTextNodes(selectedElement);
+        }
+        
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_TEXT_UPDATED',
             data: {
               text: newText,
               originalText: currentText,
               element: selectedElementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Text updated:', newText);
         
@@ -345,31 +408,276 @@ export function inspectorPlugin() {
     }
   }
   
+  // Show or hide image input section
+  function toggleImageInput(show) {
+    if (!controlBox) return;
+    
+    const isImageElement = controlBox.getAttribute('data-is-image-element') === 'true';
+    const currentImageUrl = controlBox.getAttribute('data-current-image-url') || '';
+    
+    // Check if image input already exists
+    let imageSection = controlBox.querySelector('#inspector-image-section');
+    
+    if (show && !imageSection && isImageElement) {
+      // Create image input section
+      imageSection = document.createElement('div');
+      imageSection.id = 'inspector-image-section';
+      imageSection.style.cssText = 'margin-bottom: 12px;';
+      
+      imageSection.innerHTML = \`
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+          <label style="font-weight: 500; color: \${theme.textColor}; font-size: 13px;">
+            \${labels.editImage}
+          </label>
+        </div>
+        <input 
+          type="file"
+          id="inspector-image-input"
+          accept="image/*"
+          style="display: none;"
+        />
+        <div 
+          id="inspector-image-upload-box"
+          style="
+            width: 100%;
+            min-height: 100px;
+            border: 2px dashed \${theme.inputBorderColor};
+            border-radius: 12px;
+            background: \${theme.inputBackgroundColor};
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 8px;
+            padding: 16px;
+            margin-bottom: 8px;
+            position: relative;
+            overflow: hidden;
+          "
+          onmouseover="this.style.borderColor='#9ca3af'; this.style.background='#ffffff';"
+          onmouseout="this.style.borderColor='\${theme.inputBorderColor}'; this.style.background='\${theme.inputBackgroundColor}';"
+        >
+          <div id="inspector-upload-placeholder" style="text-align: center; pointer-events: none;">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" style="margin: 0 auto 8px; opacity: 0.5;">
+              <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M17 8L12 3M12 3L7 8M12 3V15" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <div style="font-size: 13px; color: #6b7280; font-weight: 500;">\${labels.imageUploadTitle}</div>
+            <div style="font-size: 11px; color: #9ca3af; margin-top: 2px;">\${labels.imageUploadHint}</div>
+          </div>
+          <img 
+            id="inspector-image-preview-img" 
+            src="" 
+            alt="Preview" 
+            style="
+              display: none;
+              width: 100%;
+              height: auto;
+              max-height: 100px;
+              object-fit: contain;
+              border-radius: 8px;
+              pointer-events: none;
+            " 
+          />
+        </div>
+        <div style="margin-top: 8px;">
+          <button 
+            id="inspector-image-submit"
+            style="width: 100%; padding: 10px 16px; background: \${theme.buttonColor}; color: \${theme.buttonTextColor}; border: none; border-radius: 14px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all 0.2s; opacity: 0.5;"
+            onmouseover="if(!this.disabled) this.style.opacity='0.85';"
+            onmouseout="if(!this.disabled) this.style.opacity='1';"
+            title="\${labels.updateImage}"
+            disabled
+          >
+            \${labels.updateImage}
+          </button>
+        </div>
+        <div style="border-top: 1px solid #e5e7eb; margin-top: 12px; margin-bottom: 12px;"></div>
+      \`;
+      
+      // Insert at the beginning of controlBox
+      const promptSection = controlBox.querySelector('#inspector-prompt-section');
+      controlBox.insertBefore(imageSection, promptSection);
+      
+      // Add event listeners
+      const imageInput = imageSection.querySelector('#inspector-image-input');
+      const imageSubmit = imageSection.querySelector('#inspector-image-submit');
+      const uploadBox = imageSection.querySelector('#inspector-image-upload-box');
+      const uploadPlaceholder = imageSection.querySelector('#inspector-upload-placeholder');
+      const imagePreviewImg = imageSection.querySelector('#inspector-image-preview-img');
+      
+      let selectedFile = null;
+      let imageData = null;
+      
+      // Handle file selection
+      const handleFile = (file) => {
+        if (file && file.type.startsWith('image/')) {
+          selectedFile = file;
+          
+          // Read file as base64
+          const reader = new FileReader();
+          reader.onload = (evt) => {
+            imageData = evt.target.result;
+            imagePreviewImg.src = imageData;
+            imagePreviewImg.style.display = 'block';
+            uploadPlaceholder.style.display = 'none';
+            imageSubmit.disabled = false;
+            imageSubmit.style.opacity = '1';
+            imageSubmit.style.cursor = 'pointer';
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      
+      // Click to select file
+      uploadBox.addEventListener('click', (e) => {
+        e.stopPropagation();
+        imageInput.click();
+      });
+      
+      // File input change
+      imageInput.addEventListener('change', (e) => {
+        e.stopPropagation();
+        const file = e.target.files[0];
+        handleFile(file);
+      });
+      
+      // Drag and drop support
+      uploadBox.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        uploadBox.style.borderColor = '#4417db';
+        uploadBox.style.background = '#f0ebff';
+      });
+      
+      uploadBox.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        uploadBox.style.borderColor = theme.inputBorderColor;
+        uploadBox.style.background = theme.inputBackgroundColor;
+      });
+      
+      uploadBox.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        uploadBox.style.borderColor = theme.inputBorderColor;
+        uploadBox.style.background = theme.inputBackgroundColor;
+        
+        const file = e.dataTransfer.files[0];
+        handleFile(file);
+      });
+      
+      // Submit image update
+      imageSubmit.addEventListener('click', (e) => {
+        e.stopPropagation();
+        
+        if (!selectedFile || !imageData) return;
+        
+        // Update DOM immediately if requested
+        if (updateImageImmediately && selectedElement) {
+          // If it's an img element, update src directly
+          if (selectedElement.tagName.toLowerCase() === 'img') {
+            selectedElement.src = imageData;
+          }
+          // If element has background-image, update it
+          else if (window.getComputedStyle(selectedElement).backgroundImage !== 'none') {
+            selectedElement.style.backgroundImage = \`url("\${imageData}")\`;
+          }
+          // Try to find img child
+          else {
+            const imgChild = selectedElement.querySelector('img');
+            if (imgChild) {
+              imgChild.src = imageData;
+            }
+          }
+        }
+        
+        if (window.parent !== window) {
+          const message = JSON.stringify({
+            type: 'INSPECTOR_IMAGE_UPDATED',
+            data: {
+              imageData: imageData,
+              imageFile: {
+                name: selectedFile.name,
+                size: selectedFile.size,
+                type: selectedFile.type
+              },
+              originalImageUrl: currentImageUrl,
+              element: selectedElementData
+            }
+          });
+          window.parent.postMessage(message, '*');
+        }
+        console.log('Image updated:', selectedFile.name);
+        
+        // Turn off inspect mode after updating
+        toggleInspectMode(false);
+      });
+      
+      // Adjust box height
+      adjustControlBoxPosition();
+    } else if (!show && imageSection) {
+      // Remove image input section
+      imageSection.remove();
+      
+      // Refocus prompt input
+      const promptInput = controlBox.querySelector('#inspector-prompt-input');
+      if (promptInput) {
+        setTimeout(() => promptInput.focus(), 100);
+      }
+      
+      // Adjust box height
+      adjustControlBoxPosition();
+    }
+  }
+  
   // Adjust control box position based on content
   function adjustControlBoxPosition() {
     if (!controlBox || !selectedElement) return;
     
     const rect = selectedElement.getBoundingClientRect();
-    const boxWidth = Math.max(320, Math.min(rect.width, 500));
-    const centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
+    const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
+    const padding = 10;
+    
+    // Calculate box width with viewport bounds
+    const maxWidth = Math.min(600, viewportWidth - (padding * 2));
+    const minWidth = Math.min(320, maxWidth);
+    const boxWidth = Math.max(minWidth, Math.min(rect.width, maxWidth));
+    
+    // Calculate horizontal position with viewport bounds
+    let centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
+    centerLeft = Math.max(padding, Math.min(centerLeft, viewportWidth - boxWidth - padding));
+    
+    // Calculate vertical position
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
     
-    // Get actual box height
+    // Get actual box height and apply max height
     const boxHeight = controlBox.offsetHeight;
+    const maxBoxHeight = Math.min(400, viewportHeight - (padding * 4));
     
-    // Show above if not enough space below
+    // Determine position with viewport bounds
     let topPosition;
-    if (spaceBelow < boxHeight + 20 && spaceAbove > spaceBelow) {
-      topPosition = rect.top - boxHeight - 10;
+    if (spaceBelow < boxHeight + padding && spaceAbove > spaceBelow) {
+      // Show above element
+      topPosition = Math.max(padding, rect.top - maxBoxHeight - 10);
       controlBox.setAttribute('data-position', 'above');
     } else {
+      // Show below element
       topPosition = rect.bottom + 10;
+      // Ensure box fits in viewport
+      if (topPosition + maxBoxHeight > viewportHeight - padding) {
+        topPosition = Math.max(padding, viewportHeight - maxBoxHeight - padding);
+      }
       controlBox.setAttribute('data-position', 'below');
     }
     
     controlBox.style.top = topPosition + 'px';
+    controlBox.style.left = centerLeft + 'px';
+    controlBox.style.width = boxWidth + 'px';
+    controlBox.style.maxHeight = maxBoxHeight + 'px';
   }
   
   // Pause inspection
@@ -499,6 +807,40 @@ export function inspectorPlugin() {
     highlightElement(hoveredElement);
   }
 
+  // Handle scroll - update highlight position
+  function handleScroll() {
+    if (!inspectMode) return;
+    
+    if (isPaused && selectedElement) {
+      // Update overlay for selected element
+      highlightElement(selectedElement);
+      // Update control box position
+      if (controlBox) {
+        adjustControlBoxPosition();
+      }
+    } else if (hoveredElement) {
+      // Update overlay for hovered element
+      highlightElement(hoveredElement);
+    }
+  }
+
+  // Handle resize - update control box position
+  function handleResize() {
+    if (!inspectMode) return;
+    
+    if (isPaused && selectedElement) {
+      // Update overlay for selected element
+      highlightElement(selectedElement);
+      // Update control box position
+      if (controlBox) {
+        adjustControlBoxPosition();
+      }
+    } else if (hoveredElement) {
+      // Update overlay for hovered element
+      highlightElement(hoveredElement);
+    }
+  }
+
   // Handle click
   function handleClick(e) {
     if (!inspectMode) return;
@@ -528,6 +870,11 @@ export function inspectorPlugin() {
     
     // Check if element is a text node
     const isTextNode = element.textContent && element.children.length === 0;
+    const textContent = isTextNode ? element.textContent.trim() : '';
+    
+    // Check if element is an image node
+    const isImageNode = element.tagName === 'IMG';
+    const imageUrl = isImageNode ? element.src : '';
     
     const elementData = {
       tagName: element.tagName,
@@ -540,22 +887,28 @@ export function inspectorPlugin() {
         width: element.getBoundingClientRect().width,
         height: element.getBoundingClientRect().height
       },
-      isTextNode: isTextNode
+      isTextNode: isTextNode,
+      textContent: textContent,
+      isImageNode: isImageNode,
+      imageUrl: imageUrl
     };
     
     // Send info to parent window
     if (window.parent !== window) {
-      window.parent.postMessage({
+      // Use JSON.stringify to ensure all properties are serialized correctly
+      const message = JSON.stringify({
         type: 'INSPECTOR_ELEMENT_SELECTED',
         data: elementData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     
     // Log for debugging
     console.log('Element selected:', {
       element,
       componentInfo,
-      isTextNode
+      isTextNode,
+      textContent
     });
     
     // Pause inspection and show control box
@@ -571,6 +924,8 @@ export function inspectorPlugin() {
       document.body.style.cursor = 'crosshair';
       document.addEventListener('mousemove', handleMouseMove, true);
       document.addEventListener('click', handleClick, true);
+      document.addEventListener('scroll', handleScroll, true);
+      window.addEventListener('resize', handleResize, true);
     } else {
       // Clean up everything
       clearHighlight();
@@ -578,6 +933,14 @@ export function inspectorPlugin() {
       document.body.style.cursor = '';
       document.removeEventListener('mousemove', handleMouseMove, true);
       document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleResize, true);
+      
+      // Notify parent that inspector is closed
+      window.parent.postMessage({
+        type: 'INSPECTOR_CLOSED',
+        source: 'inspector'
+      }, '*');
     }
   }
 
@@ -596,10 +959,184 @@ export function inspectorPlugin() {
         theme = { ...theme, ...event.data.theme };
       }
     } else if (event.data.type === 'SHOW_CONTENT_INPUT') {
+      updateTextImmediately = event.data.updateImmediately || false;
       toggleContentInput(event.data.show);
+    } else if (event.data.type === 'SHOW_IMAGE_INPUT') {
+      updateImageImmediately = event.data.updateImmediately || false;
+      toggleImageInput(event.data.show);
+    } else if (event.data.type === 'SET_BADGE_VISIBLE') {
+      if (event.data.badgeText) {
+        labels.badgeText = event.data.badgeText;
+      }
+      setBadgeVisible(event.data.visible);
     }
   });
 
+  // Create Promake badge
+  function createPromakeBadge() {
+    if (promakeBadge) return;
+    
+    promakeBadge = document.createElement('div');
+    promakeBadge.id = 'promake-badge';
+    promakeBadge.setAttribute('data-inspector-ignore', 'true');
+    promakeBadge.style.cssText = \`
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: linear-gradient(135deg, \${theme.badgeGradientStart} 0%, \${theme.badgeGradientEnd} 100%);
+      color: \${theme.badgeTextColor};
+      padding: 10px 16px;
+      border-radius: 25px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      font-size: 13px;
+      font-weight: 600;
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      cursor: pointer;
+      z-index: 999999;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.3s ease;
+      text-decoration: none;
+      opacity: 0;
+      transform: translateY(10px);
+    \`;
+    
+    promakeBadge.innerHTML = \`
+      <svg width="18" height="18" viewBox="0 0 380 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M251.207 64.1165C237.318 55.3491 219.31 53.3822 203.749 56.7106C188.186 60.0395 175.085 68.6608 170.995 81.0528L170.995 81.0537C167.196 92.5423 168.03 106.257 170.817 120.204C173.603 134.149 178.341 148.32 182.349 160.724L182.439 160.941L182.392 160.96L182.345 160.979C177.201 148.366 169.529 136.94 159.801 127.405C150.073 117.87 138.497 110.428 125.784 105.537L125.784 105.536L125.437 105.425C114.066 102.063 101.905 102.529 90.8242 106.749C79.7511 110.966 70.3677 118.699 64.1131 128.762L64.1203 128.77C55.3499 142.664 53.3822 160.676 56.71 176.238C60.0383 191.802 68.6596 204.902 81.0519 208.992C92.5485 212.789 106.795 212.017 121.273 209.292C135.749 206.567 150.449 201.891 162.852 197.883L162.853 197.884L162.856 197.883L162.89 197.976C150.273 203.12 136.95 210.452 127.415 220.177C117.879 229.903 110.435 241.479 105.542 254.19L105.43 254.54C102.068 265.911 102.533 278.071 106.753 289.153C110.841 299.888 118.234 309.034 127.851 315.282L128.788 315.878C142.683 324.648 160.692 326.615 176.253 323.286C191.816 319.957 204.916 311.336 209.011 298.946C212.811 287.456 210.342 273.716 205.916 259.738C203.703 252.75 201.002 245.705 198.354 238.855C195.705 232.005 193.108 225.35 191.105 219.144L191.191 219.097L191.192 219.098L191.193 219.098C191.193 219.099 191.194 219.101 191.195 219.102C191.198 219.105 191.2 219.11 191.205 219.115C191.214 219.127 191.229 219.143 191.247 219.166C191.284 219.212 191.338 219.28 191.41 219.369C191.553 219.546 191.766 219.808 192.039 220.145C192.585 220.818 193.377 221.79 194.357 222.987C196.317 225.381 199.031 228.671 202.05 232.26C208.088 239.439 215.34 247.808 220.204 252.576C229.929 262.112 241.502 269.559 254.212 274.458L254.211 274.457L254.544 274.574L254.543 274.574C265.915 277.93 278.075 277.463 289.156 273.245C299.891 269.158 309.041 261.77 315.295 252.157L315.891 251.22C324.659 237.331 326.624 219.325 323.295 203.765C319.966 188.203 311.344 175.104 298.955 171.008C287.458 167.212 273.211 167.95 258.732 170.641C244.254 173.332 229.55 177.973 217.141 181.979L217.107 181.885C229.723 176.739 243.054 169.544 252.586 159.819C262.121 150.092 269.563 138.516 274.455 125.804L274.567 125.453L274.568 125.453C277.921 114.082 277.451 101.925 273.232 90.8464C269.013 79.767 261.276 70.3771 251.208 64.117L251.207 64.1165ZM196.312 178.439C199.375 180.118 201.646 182.945 202.625 186.298C203.604 189.65 203.211 193.255 201.532 196.318C199.854 199.381 197.027 201.653 193.674 202.632C190.321 203.61 186.716 203.217 183.653 201.539C180.59 199.86 178.32 197.033 177.34 193.681C176.362 190.328 176.754 186.722 178.433 183.659C180.112 180.596 182.939 178.326 186.292 177.347C189.645 176.368 193.249 176.761 196.312 178.439Z" fill="url(#promake-gradient)" stroke="white" stroke-width="0.1"/>
+        <path d="M248.582 92.4298C249.573 90.6498 251.841 89.9883 253.443 91.2462C254.876 92.3714 256.175 93.6632 257.313 95.0972C259.216 97.4972 260.628 100.249 261.468 103.194C262.308 106.14 262.56 109.222 262.209 112.265C261.999 114.083 261.576 115.866 260.952 117.578C260.255 119.491 257.979 120.126 256.199 119.136V119.136C254.419 118.146 253.826 115.902 254.381 113.943C254.615 113.118 254.783 112.275 254.881 111.419C255.121 109.339 254.949 107.231 254.375 105.217C253.801 103.203 252.835 101.322 251.534 99.6805C250.999 99.0059 250.411 98.3775 249.778 97.8004C248.272 96.4288 247.592 94.2098 248.582 92.4298V92.4298Z" fill="white"/>
+        <path d="M215.025 79.7402C213.937 78.0186 214.443 75.7101 216.314 74.9064C217.988 74.1876 219.744 73.6656 221.548 73.3541C224.566 72.8328 227.658 72.9111 230.646 73.5845C233.634 74.258 236.46 75.5134 238.963 77.2791C240.459 78.3341 241.822 79.559 243.025 80.9264C244.371 82.4552 243.838 84.7576 242.116 85.846V85.846C240.395 86.9343 238.141 86.3802 236.687 84.9538C236.076 84.3537 235.415 83.8025 234.712 83.3062C233 82.0989 231.068 81.2405 229.024 80.78C226.981 80.3195 224.867 80.2659 222.803 80.6224C221.955 80.7689 221.122 80.9835 220.312 81.2632C218.387 81.9281 216.113 81.4619 215.025 79.7402V79.7402Z" fill="white"/>
+        <defs>
+          <radialGradient id="promake-gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(158.467 247.082) rotate(-57.462) scale(150.285 150.298)">
+            <stop stop-color="#4417DB"/>
+            <stop offset="1" stop-color="#DA738C"/>
+          </radialGradient>
+        </defs>
+      </svg>
+      <span>\${labels.badgeText}</span>
+      <button id="promake-badge-close" style="
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.6);
+        color: white;
+        border: 2px solid white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: bold;
+        opacity: 0;
+        transition: all 0.2s ease;
+        padding: 0;
+        line-height: 1;
+      ">×</button>
+    \`;
+    
+    // Get close button
+    const closeButton = promakeBadge.querySelector('#promake-badge-close');
+    
+    // Hover effect - show close button on hover
+    promakeBadge.addEventListener('mouseenter', () => {
+      promakeBadge.style.transform = 'translateY(-2px)';
+      promakeBadge.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.6)';
+      if (closeButton) {
+        closeButton.style.opacity = '1';
+      }
+    });
+    
+    promakeBadge.addEventListener('mouseleave', () => {
+      promakeBadge.style.transform = 'translateY(0)';
+      promakeBadge.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
+      if (closeButton) {
+        closeButton.style.opacity = '0';
+      }
+    });
+    
+    // Close button click handler
+    if (closeButton) {
+      closeButton.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent badge click event
+        setBadgeVisible(false);
+      });
+      
+      // Hover effect for close button
+      closeButton.addEventListener('mouseenter', () => {
+        closeButton.style.background = 'rgba(0, 0, 0, 0.8)';
+        closeButton.style.transform = 'scale(1.1)';
+      });
+      
+      closeButton.addEventListener('mouseleave', () => {
+        closeButton.style.background = 'rgba(0, 0, 0, 0.6)';
+        closeButton.style.transform = 'scale(1)';
+      });
+    }
+    
+    // Click to open Promake website (optional)
+    promakeBadge.addEventListener('click', () => {
+      window.open('https://promake.ai', '_blank');
+    });
+    
+    document.body.appendChild(promakeBadge);
+    
+    // Animate in
+    setTimeout(() => {
+      promakeBadge.style.opacity = '1';
+      promakeBadge.style.transform = 'translateY(0)';
+    }, 100);
+  }
+  
+  // Update badge text
+  function updateBadgeText() {
+    if (promakeBadge) {
+      const textSpan = promakeBadge.querySelector('span');
+      if (textSpan) {
+        textSpan.textContent = labels.badgeText;
+      }
+    }
+  }
+  
+  // Update badge colors
+  function updateBadgeColors() {
+    if (promakeBadge) {
+      promakeBadge.style.background = \`linear-gradient(135deg, \${theme.badgeGradientStart} 0%, \${theme.badgeGradientEnd} 100%)\`;
+      promakeBadge.style.color = theme.badgeTextColor;
+    }
+  }
+  
+  // Set badge visibility
+  function setBadgeVisible(visible) {
+    if (visible) {
+      if (!promakeBadge) {
+        createPromakeBadge();
+      } else {
+        // Update text and colors if badge already exists
+        updateBadgeText();
+        updateBadgeColors();
+        promakeBadge.style.display = 'flex';
+        setTimeout(() => {
+          promakeBadge.style.opacity = '1';
+          promakeBadge.style.transform = 'translateY(0)';
+        }, 50);
+      }
+    } else {
+      if (promakeBadge) {
+        promakeBadge.style.opacity = '0';
+        promakeBadge.style.transform = 'translateY(10px)';
+        setTimeout(() => {
+          if (promakeBadge) {
+            promakeBadge.style.display = 'none';
+          }
+        }, 300);
+      }
+    }
+  }
+
   // Track URL changes
   let lastUrl = location.href;
   
@@ -609,7 +1146,7 @@ export function inspectorPlugin() {
       lastUrl = newUrl;
       
       if (window.parent !== window) {
-        window.parent.postMessage({
+        const message = JSON.stringify({
           type: 'URL_CHANGED',
           data: {
             url: newUrl,
@@ -617,7 +1154,8 @@ export function inspectorPlugin() {
             search: location.search,
             hash: location.hash
           }
-        }, '*');
+        });
+        window.parent.postMessage(message, '*');
       }
     }
   }
@@ -650,10 +1188,11 @@ export function inspectorPlugin() {
   
   function sendError(errorData) {
     if (window.parent !== window) {
-      window.parent.postMessage({
+      const message = JSON.stringify({
         type: 'INSPECTOR_ERROR',
         data: errorData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     // Use original console.error to avoid infinite loop
     originalConsoleError.call(console, '🔍 Inspector Error:', errorData);
@@ -699,6 +1238,13 @@ export function inspectorPlugin() {
     originalConsoleError.apply(console, args);
   };
 
+  // Auto-show badge in preview.promake.ai environment (when not in iframe)
+  if (window.parent === window && window.location.href.includes('preview.promake.ai')) {
+    // Not in iframe and in preview environment - show badge automatically
+    setBadgeVisible(true);
+    console.log('🏷️ Badge auto-enabled for preview.promake.ai');
+  }
+
   console.log('🔍 Inspector plugin loaded');
 })();
             `,