@herb-tools/dev-tools 0.8.9 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/dev-tools",
-  "version": "0.8.9",
+  "version": "0.9.0",
   "description": "Development tools for visual debugging in HTML+ERB templates",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.8.9"
+    "@herb-tools/core": "0.9.0"
   },
   "files": [
     "package.json",

package/src/error-overlay.ts

@@ -76,7 +76,7 @@ export class ErrorOverlay {
 
     htmlTemplates.forEach((template, _index) => {
       try {
-        let htmlContent = template.innerHTML?.trim() || template.textContent?.trim();
+        const htmlContent = template.innerHTML?.trim() || template.textContent?.trim();
 
         if (htmlContent) {
           this.displayParserErrorOverlay(htmlContent);

package/src/herb-overlay.ts

@@ -157,7 +157,7 @@ export class HerbOverlay {
             <label class="herb-toggle-label">
               <input type="checkbox" id="herbToggleViewOutlines" class="herb-toggle-input">
               <span class="herb-toggle-switch"></span>
-              <span class="herb-toggle-text">Show View Outlines</span>
+              <span class="herb-toggle-text herb-outline-preview herb-outline-view">View Outlines</span>
             </label>
           </div>
 
@@ -165,7 +165,7 @@ export class HerbOverlay {
             <label class="herb-toggle-label">
               <input type="checkbox" id="herbTogglePartialOutlines" class="herb-toggle-input">
               <span class="herb-toggle-switch"></span>
-              <span class="herb-toggle-text">Show Partial Outlines</span>
+              <span class="herb-toggle-text herb-outline-preview herb-outline-partial">Partial Outlines</span>
             </label>
           </div>
 
@@ -173,7 +173,7 @@ export class HerbOverlay {
             <label class="herb-toggle-label">
               <input type="checkbox" id="herbToggleComponentOutlines" class="herb-toggle-input">
               <span class="herb-toggle-switch"></span>
-              <span class="herb-toggle-text">Show Component Outlines</span>
+              <span class="herb-toggle-text herb-outline-preview herb-outline-component">Component Outlines</span>
             </label>
           </div>
 
@@ -181,7 +181,7 @@ export class HerbOverlay {
             <label class="herb-toggle-label">
               <input type="checkbox" id="herbToggleERBOutlines" class="herb-toggle-input">
               <span class="herb-toggle-switch"></span>
-              <span class="herb-toggle-text">Show ERB Output Outlines</span>
+              <span class="herb-toggle-text herb-outline-preview herb-outline-erb">ERB Output Outlines</span>
             </label>
 
             <div class="herb-nested-toggle" id="herbERBHoverRevealNested" style="display: none;">
@@ -551,7 +551,7 @@ export class HerbOverlay {
     if (element.localName === 'html' || window.getComputedStyle(element).overflowY !== 'visible') {
       label.style.top = '0';
     }
-    
+
     if (window.getComputedStyle(element).position === 'static') {
       element.style.position = 'relative';
     }
@@ -586,7 +586,7 @@ export class HerbOverlay {
     const elements = document.querySelectorAll('[data-herb-debug-showing-erb')
 
     elements.forEach(element => {
-      const originalContent = element.getAttribute('data-herb-debug-original')  || "";
+      const originalContent = element.getAttribute('data-herb-debug-original')  || "";
 
       element.innerHTML = originalContent;
       element.removeAttribute("data-herb-debug-showing-erb")
@@ -617,7 +617,7 @@ export class HerbOverlay {
           this.addTooltipHoverHandler(element);
         }
       } else {
-        const originalContent = element.getAttribute('data-herb-debug-original')  || "";
+        const originalContent = element.getAttribute('data-herb-debug-original')  || "";
 
         if (element && element.hasAttribute("data-herb-debug-showing-erb")) {
           element.innerHTML = originalContent;
@@ -1055,7 +1055,7 @@ export class HerbOverlay {
     if (url) {
       try {
         window.open(url, '_self');
-      } catch (error) {
+      } catch (_error) {
         console.log(`Open in editor: ${absolutePath}:${line}:${column}`);
       }
     } else {

package/src/styles.css

@@ -421,6 +421,32 @@
   flex: 1;
 }
 
+.herb-outline-preview {
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 2px dotted transparent;
+}
+
+.herb-outline-view {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.herb-outline-partial {
+  border-color: #10b981;
+  background-color: #ecfdf5;
+}
+
+.herb-outline-component {
+  border-color: #f59e0b;
+  background-color: #fffbeb;
+}
+
+.herb-outline-erb {
+  border-color: #a78bfa;
+  background-color: #f5f3ff;
+}
+
 .herb-toggle-label:hover .herb-toggle-switch {
   background: #94a3b8;
 }