@web-widget/inspector 1.68.0 → 1.70.0

package/dist/element.js

@@ -46,118 +46,41 @@ var spacing = {
   sm: "0.5rem",
   md: "0.75rem",
   lg: "1rem",
-  xl: "1.25rem",
-  "2xl": "1.5rem",
-  "3xl": "2rem",
-  "4xl": "2.5rem",
-  "5xl": "3rem"
+  xl: "1.25rem"
 };
 var typography = {
   fontFamily: {
-    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
   },
   fontSize: {
     xs: "0.75rem",
     sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem"
+    base: "1rem"
   },
   fontWeight: {
     normal: "400",
     medium: "500",
-    semibold: "600",
-    bold: "700"
+    semibold: "600"
   },
   lineHeight: {
-    none: "1",
-    tight: "1.25",
-    normal: "1.5",
-    relaxed: "1.75"
+    normal: "1.5"
   },
   letterSpacing: {
-    normal: "0",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
+    normal: "0"
   }
 };
-var borderRadius = {
-  none: "0",
-  sm: "0.125rem",
-  base: "0.25rem",
-  md: "0.375rem",
-  lg: "0.5rem",
-  xl: "0.75rem",
-  "2xl": "1rem",
-  "3xl": "1.5rem",
-  full: "9999px"
-};
 var boxShadow = {
-  none: "none",
-  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-  base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-};
-var opacity = {
-  0: "0",
-  5: "0.05",
-  10: "0.1",
-  20: "0.2",
-  25: "0.25",
-  30: "0.3",
-  40: "0.4",
-  50: "0.5",
-  60: "0.6",
-  70: "0.7",
-  75: "0.75",
-  80: "0.8",
-  85: "0.85",
-  90: "0.9",
-  95: "0.95",
-  98: "0.98",
-  100: "1"
-};
-var backdropBlur = {
-  none: "0",
-  sm: "4px",
-  base: "8px",
-  md: "12px",
-  lg: "16px",
-  xl: "24px",
-  "2xl": "40px",
-  "3xl": "64px"
-};
-var transition = {
-  none: "none",
-  all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
-  colors: "color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)",
-  opacity: "opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)",
-  transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+  base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
 };
 var zIndex = {
-  auto: "auto",
-  0: "0",
-  10: "10",
-  20: "20",
-  30: "30",
-  40: "40",
-  50: "50",
-  dropdown: "1000",
-  sticky: "1020",
-  fixed: "1030",
-  modal: "1040",
-  popover: "1050",
-  tooltip: "1060",
-  toast: "1070"
+  TOOLTIP: 2147483647,
+  TOOLBAR: 2147483646,
+  OVERLAY: 2147483645
+};
+var colors = {
+  green: "#22c55e",
+  // Primary green
+  overlayBorder: "#22c55e"
 };
 var themes = {
   light: {
@@ -169,9 +92,10 @@ var themes = {
     accent: "#888",
     accentHover: "#666",
     accentSelected: "#444",
-    primary: "rgba(102, 126, 234, 1)",
-    primaryHover: "rgba(102, 126, 234, 0.9)",
-    primarySelected: "rgba(102, 126, 234, 1)"
+    primary: colors.green,
+    primaryHover: "#16a34a",
+    primarySelected: "#15803d",
+    overlayBorder: colors.overlayBorder
   },
   dark: {
     bg: "rgba(17, 17, 17, 0.92)",
@@ -182,20 +106,56 @@ var themes = {
     accent: "#9ca3af",
     accentHover: "#d1d5db",
     accentSelected: "#f3f4f6",
-    primary: "rgba(102, 126, 234, 1)",
-    primaryHover: "rgba(102, 126, 234, 0.9)",
-    primarySelected: "rgba(102, 126, 234, 1)"
+    primary: colors.green,
+    primaryHover: "#4ade80",
+    primarySelected: "#16a34a",
+    overlayBorder: colors.overlayBorder
   }
 };
+function generateCSSVariables() {
+  return {
+    // Typography - only used values
+    "--wwi-font-sans": typography.fontFamily.sans,
+    "--wwi-font-size-xs": typography.fontSize.xs,
+    "--wwi-font-size-sm": typography.fontSize.sm,
+    "--wwi-font-size-base": typography.fontSize.base,
+    "--wwi-font-weight-normal": typography.fontWeight.normal,
+    "--wwi-font-weight-medium": typography.fontWeight.medium,
+    "--wwi-font-weight-semibold": typography.fontWeight.semibold,
+    "--wwi-line-height-normal": typography.lineHeight.normal,
+    "--wwi-letter-spacing-normal": typography.letterSpacing.normal,
+    // Spacing - only used values
+    "--wwi-spacing-xs": spacing.xs,
+    "--wwi-spacing-sm": spacing.sm,
+    "--wwi-spacing-md": spacing.md,
+    "--wwi-spacing-lg": spacing.lg,
+    "--wwi-spacing-xl": spacing.xl,
+    // Box shadow - only used values
+    "--wwi-shadow-base": boxShadow.base,
+    // Z-index - only used values
+    "--wwi-z-tooltip": zIndex.TOOLTIP.toString(),
+    "--wwi-z-toolbar": zIndex.TOOLBAR.toString(),
+    "--wwi-z-overlay": zIndex.OVERLAY.toString(),
+    // Brand colors - only used values
+    "--wwi-green": colors.green,
+    "--wwi-overlay-border": colors.overlayBorder
+  };
+}
+var designSystem = {
+  spacing,
+  typography,
+  boxShadow,
+  zIndex,
+  colors,
+  themes,
+  cssVariables: generateCSSVariables()
+};
 var DESIGN_SYSTEM = {
   spacing,
   typography,
-  borderRadius,
   boxShadow,
-  opacity,
-  backdropBlur,
-  transition,
-  zIndex
+  zIndex,
+  colors
 };
 function getThemeVariables(theme) {
   return themes[theme];
@@ -203,11 +163,26 @@ function getThemeVariables(theme) {
 
 // src/utils/theme.ts
 function applyTheme(vars) {
-  const root = document.documentElement;
-  root.style.setProperty("--wwi-bg", vars.bg);
-  root.style.setProperty("--wwi-fg", vars.fg);
-  root.style.setProperty("--wwi-border", vars.border);
-  root.style.setProperty("--wwi-accent", vars.accent);
+  const existingStyle = document.getElementById("wwi-design-system-styles");
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  const style = document.createElement("style");
+  style.id = "wwi-design-system-styles";
+  const cssVariables = Object.entries(designSystem.cssVariables).map(([property2, value]) => `  ${property2}: ${value};`).join("\n");
+  const themeVariables = `
+  --wwi-bg: ${vars.bg};
+  --wwi-fg: ${vars.fg};
+  --wwi-border: ${vars.border};
+  --wwi-accent: ${vars.accent};
+  `;
+  style.textContent = `
+:root {
+${cssVariables}
+${themeVariables}
+}
+  `;
+  document.head.appendChild(style);
 }
 function detectAutoTheme() {
   if (typeof document === "undefined" || !document.body || !document.documentElement) {
@@ -316,192 +291,154 @@ function getElementBox(el) {
 }
 
 // src/utils/debug-data.ts
-var DebugDataCollector = class {
-  /**
-   * Collect debug data for an element
-   */
-  static collectElementData(element) {
-    const bounds = getElementBox(element) ?? {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: 0,
-      height: 0
-    };
-    const isWebWidget = element.tagName === "WEB-WIDGET";
-    const data = {
-      tag: element.tagName.toLowerCase(),
-      bounds,
-      isWebWidget
-    };
-    if (element.id) {
-      data.id = element.id;
-    }
-    if (isWebWidget) {
-      data.webWidgetData = this.collectWebWidgetData(element);
-    }
-    return data;
+function collectElementData(element) {
+  const bounds = getElementBox(element) ?? {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  };
+  const isWebWidget = element.tagName === "WEB-WIDGET";
+  const data = {
+    tag: element.tagName.toLowerCase(),
+    bounds,
+    isWebWidget
+  };
+  if (element.id) {
+    data.id = element.id;
   }
-  /**
-   * Collect debug data for Web Widget
-   */
-  static collectWebWidgetData(element) {
-    const data = {};
-    const name = element.getAttribute("name");
-    if (name) {
-      data.name = name;
-    }
-    const importUrl = element.getAttribute("import");
-    if (importUrl) {
-      data.module = importUrl;
-    }
-    const loading = element.loading;
-    if (loading && loading !== "eager") {
-      data.loading = loading;
-    }
-    const renderTarget = element.renderTarget;
-    if (renderTarget && renderTarget !== "light") {
-      data.renderTarget = renderTarget;
-    }
-    const status = element.status;
-    if (status) {
-      data.status = status;
-    }
-    if (element.inactive) {
-      data.inactive = true;
-    }
-    const contextData = element.getAttribute("contextdata");
-    if (contextData) {
-      try {
-        data.contextData = JSON.parse(contextData);
-      } catch {
-      }
-    }
-    const performanceData = this.collectPerformanceData();
+  if (isWebWidget) {
+    data.webWidgetData = collectWebWidgetData(element);
+  }
+  return data;
+}
+function collectWebWidgetData(element) {
+  const data = {};
+  const webWidgetElement = element;
+  const name = element.getAttribute("name");
+  if (name) {
+    data.name = name;
+  }
+  const importUrl = element.getAttribute("import");
+  if (importUrl) {
+    data.module = importUrl;
+  }
+  const loading = webWidgetElement.loading;
+  if (loading && loading !== "eager") {
+    data.loading = loading;
+  }
+  const renderTarget = webWidgetElement.renderTarget;
+  if (renderTarget && renderTarget !== "light") {
+    data.renderTarget = renderTarget;
+  }
+  const status = webWidgetElement.status;
+  if (status) {
+    data.status = status;
+  }
+  if (webWidgetElement.inactive) {
+    data.inactive = true;
+  }
+  const contextData = webWidgetElement.contextData;
+  if (contextData && typeof contextData === "object") {
+    data.contextData = contextData;
+  }
+  const performanceData = collectPerformanceData(element);
+  if (performanceData.loadTime !== undefined) {
+    data.loadTime = performanceData.loadTime;
+  }
+  if (performanceData.mountTime !== undefined) {
+    data.mountTime = performanceData.mountTime;
+  }
+  return data;
+}
+function collectPerformanceData(element) {
+  const data = {};
+  const webWidgetElement = element;
+  const performanceData = webWidgetElement.performance;
+  if (performanceData && typeof performanceData === "object") {
     if (performanceData.loadTime) {
-      data.loadTime = performanceData.loadTime;
+      const loadTimeStr = performanceData.loadTime;
+      if (typeof loadTimeStr === "string" && loadTimeStr.endsWith("ms")) {
+        data.loadTime = parseInt(loadTimeStr, 10);
+      }
     }
     if (performanceData.mountTime) {
-      data.mountTime = performanceData.mountTime;
+      const mountTimeStr = performanceData.mountTime;
+      if (typeof mountTimeStr === "string" && mountTimeStr.endsWith("ms")) {
+        data.mountTime = parseInt(mountTimeStr, 10);
+      }
     }
-    return data;
   }
-  /**
-   * Collect performance data
-   */
-  static collectPerformanceData() {
-    const data = {};
-    const loadMeasure = performance.getEntriesByName("web-widget:load")[0];
-    const mountMeasure = performance.getEntriesByName("web-widget:mount")[0];
-    if (loadMeasure) {
-      data.loadTime = Math.round(loadMeasure.duration);
+  return data;
+}
+function formatDebugData(data, element) {
+  const items = [];
+  if (data.isWebWidget && data.webWidgetData) {
+    const widgetData = data.webWidgetData;
+    const componentName = element.getAttribute("name");
+    if (componentName) {
+      items.push({ key: "Name", value: componentName, priority: 1 });
+    }
+    if (widgetData.module) {
+      items.push({ key: "Module", value: widgetData.module, priority: 2 });
+    }
+    if (widgetData.loadTime !== undefined) {
+      items.push({
+        key: "Load Time",
+        value: `${widgetData.loadTime}ms`,
+        priority: 3
+      });
     }
-    if (mountMeasure) {
-      data.mountTime = Math.round(mountMeasure.duration);
+    if (widgetData.mountTime !== undefined) {
+      items.push({
+        key: "Mount Time",
+        value: `${widgetData.mountTime}ms`,
+        priority: 3
+      });
     }
-    return data;
-  }
-  /**
-   * Convert debug data to display format with priority-based sorting
-   */
-  static formatDebugData(data) {
-    const items = [];
-    if (data.isWebWidget && data.webWidgetData) {
-      const widgetData = data.webWidgetData;
-      if (widgetData.name) {
-        items.push({ key: "Component", value: widgetData.name, priority: 1 });
-      }
-      if (widgetData.module) {
-        items.push({ key: "Module", value: widgetData.module, priority: 2 });
-      }
-      if (widgetData.status) {
-        items.push({ key: "Status", value: widgetData.status, priority: 3 });
-      }
-      if (widgetData.inactive) {
-        items.push({ key: "State", value: "inactive", priority: 4 });
-      }
-      if (widgetData.loading) {
-        items.push({ key: "Loading", value: widgetData.loading, priority: 5 });
-      }
-      if (widgetData.renderTarget) {
-        items.push({
-          key: "Render",
-          value: widgetData.renderTarget,
-          priority: 6
-        });
-      }
-      if (widgetData.loadTime) {
-        items.push({
-          key: "Load Time",
-          value: `${widgetData.loadTime}ms`,
-          priority: 7
-        });
-      }
-      if (widgetData.mountTime) {
+    if (widgetData.status) {
+      items.push({ key: "Status", value: widgetData.status, priority: 4 });
+    }
+    if (widgetData.loading) {
+      items.push({ key: "Loading", value: widgetData.loading, priority: 4 });
+    }
+    if (widgetData.renderTarget) {
+      items.push({
+        key: "Render",
+        value: widgetData.renderTarget,
+        priority: 4
+      });
+    }
+    if (widgetData.contextData) {
+      const dataKeys = Object.keys(widgetData.contextData);
+      if (dataKeys.length > 0) {
         items.push({
-          key: "Mount Time",
-          value: `${widgetData.mountTime}ms`,
-          priority: 8
+          key: "Parameters",
+          value: `${dataKeys.length} keys`,
+          priority: 5
         });
       }
-      if (widgetData.contextData) {
-        const dataKeys = Object.keys(widgetData.contextData);
-        if (dataKeys.length > 0) {
-          items.push({
-            key: "Parameters",
-            value: `${dataKeys.length} keys`,
-            priority: 9
-          });
-        }
-      }
-    } else {
-      items.push({ key: "Tag", value: data.tag, priority: 1 });
-      if (data.id) {
-        items.push({ key: "ID", value: data.id, priority: 2 });
-      }
     }
-    items.push({
-      key: "Size",
-      value: `${Math.round(data.bounds.width)}\xD7${Math.round(data.bounds.height)}px`,
-      priority: 10
-    });
-    return items.sort((a, b) => a.priority - b.priority);
-  }
-  /**
-   * Generate tooltip content with priority-based styling
-   */
-  static generateTooltipContent(element) {
-    const debugData = this.collectElementData(element);
-    const formattedData = this.formatDebugData(debugData);
-    const tableRows = formattedData.map((item) => {
-      const priorityClass = this.getPriorityClass(item.priority);
-      return `<tr class="${priorityClass}"><td class="key">${item.key}</td><td class="value">${item.value}</td></tr>`;
-    }).join("");
-    const helpText = debugData.isWebWidget ? '<div class="tooltip-help">\u{1F4A1} Click to open source code</div>' : "";
-    return `<table class="tooltip-table">${tableRows}</table>${helpText}`;
-  }
-  /**
-   * Get CSS class based on priority level
-   */
-  static getPriorityClass(priority) {
-    if (priority <= 3) return "priority-high";
-    if (priority <= 6) return "priority-medium";
-    return "priority-low";
+  } else {
+    items.push({ key: "Tag", value: data.tag, priority: 1 });
+    if (data.id) {
+      items.push({ key: "ID", value: data.id, priority: 2 });
+    }
   }
-};
-
-// src/constants.ts
-var Z_INDEX = {
-  /** Tooltip/Bubble - Highest priority for information display */
-  TOOLTIP: 2147483647,
-  /** Toolbar - Inspector controls and UI */
-  TOOLBAR: 2147483646,
-  /** Overlay - Element highlighting during inspection mode */
-  OVERLAY: 2147483645,
-  /** Page elements - Default z-index for normal content */
-  PAGE_ELEMENTS: "auto"
-};
+  items.push({
+    key: "Size",
+    value: `${Math.round(data.bounds.width)}\xD7${Math.round(data.bounds.height)}px`,
+    priority: 10
+  });
+  return items.sort((a, b) => a.priority - b.priority);
+}
+function getPriorityClass(priority) {
+  if (priority <= 3) return "priority-high";
+  if (priority <= 6) return "priority-medium";
+  return "priority-low";
+}
 
 // src/element.ts
 var HTMLWebWidgetInspectorElement = class extends LitElement {
@@ -518,7 +455,15 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
     this.widgetCount = 0;
     this.pressedKeys = /* @__PURE__ */ new Set();
     this.tooltipElement = null;
-    this.tooltipTimeout = null;
+    this.currentElementBounds = {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    };
+    this.overlayElement = null;
   }
   get theme() {
     return this._theme;
@@ -541,7 +486,6 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.cleanupTooltip();
     this.cleanupInspectorElements();
   }
   initializeTheme() {
@@ -607,108 +551,95 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
     if (!this.isInspectorMode) return;
     const target = findWebWidgetContainer(event.target);
     if (this.hoveredElement !== target) {
+      if (this.hoveredElement) {
+        this.hoveredElement.style.removeProperty("cursor");
+      }
       this.hoveredElement = target;
       this.updateState();
     }
   }
   handleClickEvent(event) {
     if (this.isInspectorMode) {
-      const toolbar = this.renderRoot?.querySelector(".inspector-toolbar");
+      const toolbar = this.renderRoot?.querySelector(".wwi-toolbar");
       const isToolbarClick = toolbar?.contains(event.target);
       if (isToolbarClick) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
-      event.stopImmediatePropagation();
       const widgetTarget = findWebWidgetContainer(event.target);
-      const inspectUrl = widgetTarget?.getAttribute("import");
-      if (inspectUrl) {
-        document.body.style.cursor = "progress";
-        this.openInEditor(inspectUrl, this.dir);
-        this.updateState();
+      if (widgetTarget) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        const inspectUrl = widgetTarget?.getAttribute("import");
+        if (inspectUrl) {
+          document.body.style.cursor = "progress";
+          this.openInEditor(inspectUrl, this.dir);
+          this.updateState();
+        }
       }
     }
   }
   updateState() {
-    const shouldShowInspector = !!(this.hoveredElement && this.isInspectorMode);
     const targetKeys = this.keys;
-    this.isToolbarVisible || this.checkKeysMatch(targetKeys);
     if (!this.isToolbarVisible && this.checkKeysMatch(targetKeys)) {
       this.showToolbar();
     }
-    this.updateOverlay(shouldShowInspector);
+    if (this.isInspectorMode && this.hoveredElement) {
+      this.updateInspectorOverlays(this.hoveredElement);
+    } else {
+      this.clearInspectorOverlays();
+    }
     this.setButtonSelected(this.isInspectorMode);
     if (this.isInspectorMode) {
-      const shouldShowPointer = !!this.hoveredElement;
-      if (shouldShowPointer) {
-        document.body.style.setProperty("cursor", "pointer", "important");
-      } else {
-        document.body.style.removeProperty("cursor");
+      if (this.hoveredElement) {
+        this.hoveredElement.style.cursor = "pointer";
       }
     } else {
       document.body.style.removeProperty("cursor");
+      const allElements = document.querySelectorAll("*");
+      allElements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          el.style.removeProperty("cursor");
+        }
+      });
     }
     this.requestUpdate();
   }
-  updateOverlay(show) {
-    let highlightOverlay = document.querySelector(
-      ".web-widget-inspector-highlight-overlay"
-    );
-    if (this.isInspectorMode) {
-      if (show && this.hoveredElement) {
-        if (!highlightOverlay) {
-          highlightOverlay = document.createElement("div");
-          highlightOverlay.className = "web-widget-inspector-highlight-overlay";
-          highlightOverlay.setAttribute("aria-hidden", "true");
-          document.body.appendChild(highlightOverlay);
-        }
-        const rect = getElementBox(this.hoveredElement) ?? {
-          top: 0,
-          left: 0,
-          width: 0,
-          height: 0
-        };
-        highlightOverlay.style.cssText = `
-          position: fixed !important;
-          top: ${rect.top}px !important;
-          left: ${rect.left}px !important;
-          width: ${rect.width}px !important;
-          height: ${rect.height}px !important;
-          z-index: 999998 !important;
-          pointer-events: none !important;
-          visibility: visible !important;
-          opacity: 1 !important;
-          display: block !important;
-          cursor: pointer !important;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-          background: repeating-linear-gradient(
-            45deg,
-            rgba(102, 126, 234, 0.5),
-            rgba(102, 126, 234, 0.5) 5px,
-            rgba(255, 255, 255, 0.5) 5px,
-            rgba(255, 255, 255, 0.5) 10px
-          ) !important;
-          border: 2px solid rgba(102, 126, 234, 0.9) !important;
-          border-radius: 0 !important;
-          box-sizing: border-box !important;
-        `;
-        this.showTooltip(this.hoveredElement);
-      } else {
-        if (highlightOverlay) {
-          highlightOverlay.remove();
-        }
-        this.hideTooltip();
-      }
-    } else {
-      if (highlightOverlay) {
-        highlightOverlay.remove();
-      }
-      this.hideTooltip();
+  createOverlayElement() {
+    if (this.overlayElement) {
+      return this.overlayElement;
+    }
+    if (!this.isInspectorMode) {
+      const dummy = document.createElement("div");
+      dummy.style.visibility = "hidden";
+      return dummy;
+    }
+    this.ensureOverlayStyles();
+    const overlay = document.createElement("div");
+    overlay.className = "wwi-overlay";
+    overlay.setAttribute("aria-hidden", "true");
+    document.body.appendChild(overlay);
+    this.overlayElement = overlay;
+    return overlay;
+  }
+  showOverlay(element) {
+    if (!this.isInspectorMode || !element) return;
+    const overlay = this.createOverlayElement();
+    const rect = this.currentElementBounds;
+    overlay.style.top = `${rect.top}px`;
+    overlay.style.left = `${rect.left}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    overlay.style.visibility = "visible";
+  }
+  cleanupOverlay() {
+    if (this.overlayElement) {
+      this.overlayElement.remove();
+      this.overlayElement = null;
     }
   }
   setButtonSelected(selected) {
-    const btn = this.renderRoot?.querySelector(".inspect-btn");
+    const btn = this.renderRoot?.querySelector(".wwi-inspect-btn");
     if (btn) {
       btn.setAttribute("data-selected", selected ? "true" : "false");
       btn.setAttribute("aria-pressed", selected ? "true" : "false");
@@ -723,31 +654,56 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
     }
     if (!this.isInspectorMode) {
       const dummy = document.createElement("div");
-      dummy.style.display = "none";
+      dummy.style.visibility = "hidden";
       return dummy;
     }
     this.ensureTooltipStyles();
     const tooltip = document.createElement("div");
-    tooltip.className = "inspector-tooltip";
+    tooltip.className = "wwi-tooltip";
     tooltip.setAttribute("aria-hidden", "true");
-    tooltip.setAttribute("data-visible", "false");
     document.body.appendChild(tooltip);
     this.tooltipElement = tooltip;
     return tooltip;
   }
+  ensureOverlayStyles() {
+    if (!this.isInspectorMode) {
+      return;
+    }
+    if (document.getElementById("wwi-overlay-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "wwi-overlay-styles";
+    style.textContent = `
+      .wwi-overlay {
+        position: fixed;
+        z-index: ${DESIGN_SYSTEM.zIndex.OVERLAY};
+        pointer-events: none;
+        visibility: hidden;
+        opacity: 1;
+        display: block;
+        background: rgba(34, 197, 94, 0.3);
+        border: 2px solid var(--wwi-overlay-border, #22c55e);
+        border-radius: 0;
+        box-sizing: border-box;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    `;
+    document.head.appendChild(style);
+  }
   ensureTooltipStyles() {
     if (!this.isInspectorMode) {
       return;
     }
-    if (document.getElementById("inspector-tooltip-styles")) {
+    if (document.getElementById("wwi-tooltip-styles")) {
       return;
     }
     const style = document.createElement("style");
-    style.id = "inspector-tooltip-styles";
+    style.id = "wwi-tooltip-styles";
     style.textContent = `
-      .inspector-tooltip {
+      .wwi-tooltip {
         position: fixed;
-        z-index: ${Z_INDEX.TOOLTIP};
+        z-index: ${DESIGN_SYSTEM.zIndex.TOOLTIP};
         pointer-events: none;
         background: var(--wwi-bg, rgba(255, 255, 255, 0.95));
         color: var(--wwi-fg, #222);
@@ -755,7 +711,7 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
         border-radius: 0.375rem;
         padding: ${DESIGN_SYSTEM.spacing.lg} ${DESIGN_SYSTEM.spacing.xl};
         font-size: ${DESIGN_SYSTEM.typography.fontSize.base};
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+        font-family: ${DESIGN_SYSTEM.typography.fontFamily.sans};
         line-height: ${DESIGN_SYSTEM.typography.lineHeight.normal};
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
         letter-spacing: ${DESIGN_SYSTEM.typography.letterSpacing.normal};
@@ -766,21 +722,22 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
         max-width: 640px;
         min-width: 280px;
         visibility: hidden;
+        display: block;
       }
 
-      .tooltip-table {
+      .wwi-tooltip-table {
         width: 100%;
         border-collapse: collapse;
         font-size: ${DESIGN_SYSTEM.typography.fontSize.xs};
         line-height: ${DESIGN_SYSTEM.typography.lineHeight.normal};
       }
 
-      .tooltip-table td {
+      .wwi-tooltip-table td {
         padding: ${DESIGN_SYSTEM.spacing.xs} 0;
         vertical-align: top;
       }
 
-      .tooltip-table .key {
+      .wwi-tooltip-table .key {
         color: var(--wwi-accent, #888);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.medium};
         padding-right: ${DESIGN_SYSTEM.spacing.lg};
@@ -789,49 +746,48 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
         opacity: 0.8;
       }
 
-      .tooltip-table .value {
+      .wwi-tooltip-table .value {
         color: var(--wwi-fg, #222);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
         word-break: break-all;
         text-align: right;
       }
 
-      /* Priority-based styling */
-      .tooltip-table tr.priority-high .key {
+      .wwi-tooltip-table tr.priority-high .key {
         color: var(--wwi-fg, #222);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.semibold};
         opacity: 1;
       }
 
-      .tooltip-table tr.priority-high .value {
+      .wwi-tooltip-table tr.priority-high .value {
         color: var(--wwi-fg, #222);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.medium};
       }
 
-      .tooltip-table tr.priority-medium .key {
+      .wwi-tooltip-table tr.priority-medium .key {
         color: var(--wwi-accent, #666);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.medium};
         opacity: 0.9;
       }
 
-      .tooltip-table tr.priority-medium .value {
+      .wwi-tooltip-table tr.priority-medium .value {
         color: var(--wwi-fg, #444);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
       }
 
-      .tooltip-table tr.priority-low .key {
+      .wwi-tooltip-table tr.priority-low .key {
         color: var(--wwi-accent, #888);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
         opacity: 0.7;
       }
 
-      .tooltip-table tr.priority-low .value {
+      .wwi-tooltip-table tr.priority-low .value {
         color: var(--wwi-fg, #666);
         font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
         opacity: 0.8;
       }
 
-      .tooltip-help {
+      .wwi-tooltip-help {
         margin-top: ${DESIGN_SYSTEM.spacing.md};
         padding-top: ${DESIGN_SYSTEM.spacing.md};
         border-top: 1px solid var(--wwi-border, #e5e7eb);
@@ -851,25 +807,6 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
           padding: ${DESIGN_SYSTEM.spacing.md} ${DESIGN_SYSTEM.spacing.lg};
           gap: ${DESIGN_SYSTEM.spacing.md};
         }
-
-        .inspector-btn {
-          padding: ${DESIGN_SYSTEM.spacing.md} ${DESIGN_SYSTEM.spacing.md};
-          font-size: ${DESIGN_SYSTEM.typography.fontSize.sm};
-        }
-
-        .inspector-info {
-          font-size: ${DESIGN_SYSTEM.typography.fontSize.sm};
-        }
-
-        .inspector-tooltip {
-          font-size: ${DESIGN_SYSTEM.typography.fontSize.sm};
-          padding: ${DESIGN_SYSTEM.spacing.md} ${DESIGN_SYSTEM.spacing.lg};
-          max-width: calc(100vw - ${DESIGN_SYSTEM.spacing.xl});
-        }
-        
-        .tooltip-table {
-          font-size: ${DESIGN_SYSTEM.typography.fontSize.sm};
-        }
       }
     `;
     document.head.appendChild(style);
@@ -895,45 +832,32 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
     return { x, y };
   }
   generateTooltipContent(element) {
-    return DebugDataCollector.generateTooltipContent(element);
+    const debugData = collectElementData(element);
+    const formattedData = formatDebugData(debugData, element);
+    const tableRows = formattedData.map((item) => {
+      const priorityClass = getPriorityClass(item.priority);
+      return `<tr class="${priorityClass}"><td class="key">${item.key}</td><td class="value">${item.value}</td></tr>`;
+    }).join("");
+    const helpText = debugData.isWebWidget ? '<div class="wwi-tooltip-help">\u{1F4A1} Click to open source code</div>' : "";
+    return `<table class="wwi-tooltip-table">${tableRows}</table>${helpText}`;
   }
   showTooltip(element) {
     if (!this.isInspectorMode || !element) return;
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-      this.tooltipTimeout = null;
-    }
     const tooltip = this.createTooltipElement();
     const content = this.generateTooltipContent(element);
     tooltip.innerHTML = content;
     tooltip.style.visibility = "hidden";
     tooltip.style.display = "block";
     tooltip.offsetHeight;
-    const elementRect = getElementBox(element);
+    const elementRect = this.currentElementBounds;
     const tooltipRect = tooltip.getBoundingClientRect();
-    const position = this.calculateSimplePosition(
-      elementRect ?? {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: 0,
-        height: 0
-      },
-      tooltipRect
-    );
+    const position = this.calculateSimplePosition(elementRect, tooltipRect);
     tooltip.style.left = `${position.x}px`;
     tooltip.style.top = `${position.y}px`;
-    tooltip.setAttribute("data-visible", "true");
     tooltip.style.visibility = "visible";
   }
   hideTooltip() {
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-      this.tooltipTimeout = null;
-    }
     if (this.tooltipElement) {
-      this.tooltipElement.setAttribute("data-visible", "false");
       this.tooltipElement.style.visibility = "hidden";
     }
   }
@@ -942,19 +866,23 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
       this.tooltipElement.remove();
       this.tooltipElement = null;
     }
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-      this.tooltipTimeout = null;
+  }
+  updateTooltipContent() {
+    if (this.hoveredElement && this.tooltipElement) {
+      const content = this.generateTooltipContent(this.hoveredElement);
+      this.tooltipElement.innerHTML = content;
     }
   }
   cleanupInspectorElements() {
-    const highlightOverlay = document.querySelector(
-      ".web-widget-inspector-highlight-overlay"
-    );
-    if (highlightOverlay) {
-      highlightOverlay.remove();
+    if (this.overlayElement) {
+      this.overlayElement.remove();
+      this.overlayElement = null;
+    }
+    const overlayStyles = document.getElementById("wwi-overlay-styles");
+    if (overlayStyles) {
+      overlayStyles.remove();
     }
-    const tooltipStyles = document.getElementById("inspector-tooltip-styles");
+    const tooltipStyles = document.getElementById("wwi-tooltip-styles");
     if (tooltipStyles) {
       tooltipStyles.remove();
     }
@@ -1034,18 +962,47 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
       });
     }
   }
+  /**
+   * Batch update all inspector overlays for the current hovered element
+   * This avoids multiple expensive getElementBox calls
+   */
+  updateInspectorOverlays(element) {
+    const bounds = getElementBox(element);
+    this.currentElementBounds = bounds ?? {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    };
+    this.showOverlay(element);
+    this.showTooltip(element);
+  }
+  clearInspectorOverlays() {
+    this.currentElementBounds = {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    };
+    this.cleanupOverlay();
+    this.cleanupTooltip();
+  }
   render() {
     if (!this.isToolbarVisible) {
       return html``;
     }
     return html`
       <div
-        class="inspector-toolbar"
+        class="wwi-toolbar"
         data-minimized=${this.isMinimized ? "true" : "false"}
         data-inspector-active=${this.isInspectorMode ? "true" : "false"}>
-        <div class="inspector-header">
+        <div class="wwi-header">
           <div
-            class="inspector-logo"
+            class="wwi-logo"
             tabindex="0"
             title="Web Widget Inspector"
             @click=${this.minimizeToolbar}>
@@ -1065,13 +1022,13 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
           </div>
         </div>
 
-        <div class="inspector-info">
+        <div class="wwi-info">
           <span class="widget-count">${this.widgetCount} widgets</span>
         </div>
 
-        <div class="inspector-actions">
+        <div class="wwi-actions">
           <button
-            class="inspector-btn inspect-btn"
+            class="wwi-btn wwi-inspect-btn"
             @click=${this.toggleInspector}
             title="Click to activate widget inspector (ESC to exit)"
             aria-label="Activate widget inspector mode">
@@ -1091,7 +1048,7 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
           </button>
 
           <button
-            class="inspector-btn page-btn"
+            class="wwi-btn wwi-page-btn"
             @click=${() => {
       const currentFilePath = this.getCurrentFilePath();
       if (currentFilePath) {
@@ -1116,9 +1073,9 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
           </button>
         </div>
 
-        <div class="inspector-controls">
+        <div class="wwi-controls">
           <button
-            class="inspector-btn hide-btn"
+            class="wwi-btn wwi-hide-btn"
             @click=${this.hideToolbar}
             title="Hide Web Widget Inspector"
             aria-label="Hide inspector toolbar">
@@ -1136,7 +1093,7 @@ var HTMLWebWidgetInspectorElement = class extends LitElement {
             </svg>
           </button>
           <button
-            class="inspector-btn toggle-btn"
+            class="wwi-btn wwi-toggle-btn"
             @click=${this.minimizeToolbar}
             title="Minimize Web Widget Inspector"
             aria-label="Minimize inspector toolbar">
@@ -1162,23 +1119,30 @@ HTMLWebWidgetInspectorElement.styles = css`
       display: contents;
     }
 
-    .inspector-toolbar,
-    .inspector-toolbar *,
-    .inspector-tooltip,
-    .inspector-tooltip * {
-      font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-        Arial, sans-serif !important;
+    .wwi-toolbar,
+    .wwi-toolbar *,
+    .wwi-tooltip,
+    .wwi-tooltip * {
+      font-family: var(
+        --wwi-font-sans,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        sans-serif
+      );
     }
 
-    .inspector-toolbar {
+    .wwi-toolbar {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       position: fixed;
       bottom: 1rem;
       left: 1rem;
-      z-index: ${Z_INDEX.TOOLBAR};
+      z-index: ${DESIGN_SYSTEM.zIndex.TOOLBAR};
       background: var(--wwi-bg, rgba(255, 255, 255, 0.95));
       color: var(--wwi-fg, #222);
       padding: 0.75rem 1rem;
@@ -1187,89 +1151,93 @@ HTMLWebWidgetInspectorElement.styles = css`
       box-shadow:
         0 1px 3px 0 rgba(0, 0, 0, 0.1),
         0 1px 2px 0 rgba(0, 0, 0, 0.06);
-      font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-        Arial, sans-serif;
-      font-size: 0.875rem;
+      font-family: var(
+        --wwi-font-sans,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        sans-serif
+      );
+      font-size: 0.75rem;
       min-width: max-content;
       transition: all 0.2s;
       backdrop-filter: blur(8px);
     }
 
-    .inspector-toolbar[data-minimized='true'] {
-      padding: 0 !important;
-      gap: 0 !important;
-      min-width: 0 !important;
-      width: 32px !important;
-      height: 32px !important;
-      background: var(--wwi-bg, rgba(255, 255, 255, 0.95)) !important;
-      border: 1px solid var(--wwi-border, #e5e7eb) !important;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
-      border-radius: 50% !important;
-      cursor: pointer !important;
-      justify-content: center !important;
-      align-items: center !important;
-      display: flex !important;
+    .wwi-toolbar[data-minimized='true'] {
+      padding: 0;
+      gap: 0;
+      min-width: 0;
+      width: 32px;
+      height: 32px;
+      background: var(--wwi-bg, rgba(255, 255, 255, 0.95));
+      border: 1px solid var(--wwi-border, #e5e7eb);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      border-radius: 50%;
+      cursor: pointer;
+      justify-content: center;
+      align-items: center;
+      display: flex;
       transition:
         background 0.2s,
-        border 0.2s !important;
+        border 0.2s;
     }
 
-    .inspector-toolbar[data-minimized='true']:hover {
-      background: var(--wwi-bg, rgba(255, 255, 255, 0.98)) !important;
-      border: 1px solid var(--wwi-border, #e5e7eb) !important;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+    .wwi-toolbar[data-minimized='true']:hover {
+      background: var(--wwi-bg, rgba(255, 255, 255, 0.98));
+      border: 1px solid var(--wwi-border, #e5e7eb);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }
 
-    .inspector-toolbar[data-minimized='true'] .inspector-header {
-      display: flex !important;
-      flex: 1 1 auto !important;
-      align-items: center !important;
-      justify-content: center !important;
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100% !important;
+    .wwi-toolbar[data-minimized='true'] .wwi-header {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      height: 100%;
     }
 
-    .inspector-toolbar[data-minimized='true'] .inspector-logo {
-      display: flex !important;
-      align-items: center !important;
-      justify-content: center !important;
-      width: 100% !important;
-      height: 100% !important;
-      margin: 0 !important;
-      padding: 0 !important;
+    .wwi-toolbar[data-minimized='true'] .wwi-logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
     }
 
-    .inspector-toolbar[data-minimized='true'] .inspector-logo svg {
-      margin: 0 !important;
-      width: 16px !important;
-      height: 16px !important;
-      display: block !important;
-      opacity: 0.7 !important;
-      filter: none !important;
-      transition: opacity 0.2s !important;
+    .wwi-toolbar[data-minimized='true'] .wwi-logo svg {
+      margin: 0;
+      width: 16px;
+      height: 16px;
+      display: block;
+      opacity: 0.7;
+      filter: none;
+      transition: opacity 0.2s;
     }
 
-    .inspector-toolbar[data-minimized='true']:hover .inspector-logo svg {
-      opacity: 1 !important;
-      filter: none !important;
+    .wwi-toolbar[data-minimized='true']:hover .wwi-logo svg {
+      opacity: 1;
+      filter: none;
     }
 
-    .inspector-toolbar[data-minimized='true']
-      .inspector-header
-      .inspector-logo
-      span,
-    .inspector-toolbar[data-minimized='true'] .inspector-logo .logo-text,
-    .inspector-toolbar[data-minimized='true'] .inspector-info,
-    .inspector-toolbar[data-minimized='true'] .inspector-actions,
-    .inspector-toolbar[data-minimized='true'] .inspector-controls {
-      display: none !important;
+    .wwi-toolbar[data-minimized='true'] .wwi-header .wwi-logo span,
+    .wwi-toolbar[data-minimized='true'] .wwi-logo .logo-text,
+    .wwi-toolbar[data-minimized='true'] .wwi-info,
+    .wwi-toolbar[data-minimized='true'] .wwi-actions,
+    .wwi-toolbar[data-minimized='true'] .wwi-controls {
+      display: none;
     }
 
-    .inspector-overlay {
+    .wwi-overlay {
       position: fixed;
-      z-index: ${Z_INDEX.OVERLAY};
+      z-index: ${DESIGN_SYSTEM.zIndex.OVERLAY};
       pointer-events: none;
       background: repeating-linear-gradient(
         45deg,
@@ -1283,19 +1251,19 @@ HTMLWebWidgetInspectorElement.styles = css`
       box-sizing: border-box;
     }
 
-    .inspector-tooltip {
+    .wwi-tooltip {
       /* Styles dynamically injected by ensureTooltipStyles */
-      display: none;
+      visibility: hidden;
     }
 
-    .inspector-header {
+    .wwi-header {
       display: flex;
       align-items: center;
       gap: 0.375rem;
       padding-right: 0.5rem;
     }
 
-    .inspector-logo {
+    .wwi-logo {
       display: flex;
       align-items: center;
       gap: 0.375rem;
@@ -1305,7 +1273,7 @@ HTMLWebWidgetInspectorElement.styles = css`
       user-select: none;
     }
 
-    .inspector-logo svg {
+    .wwi-logo svg {
       cursor: pointer;
       color: var(--wwi-accent, #888);
       width: 16px;
@@ -1338,11 +1306,11 @@ HTMLWebWidgetInspectorElement.styles = css`
       text-transform: uppercase;
     }
 
-    .inspector-info {
+    .wwi-info {
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      font-size: 0.875rem;
+      font-size: 0.75rem;
       color: var(--wwi-fg, #222);
       opacity: 0.7;
     }
@@ -1352,19 +1320,19 @@ HTMLWebWidgetInspectorElement.styles = css`
       font-weight: 500;
     }
 
-    .inspector-actions {
+    .wwi-actions {
       display: flex;
       align-items: center;
       gap: 0.375rem;
     }
 
-    .inspector-controls {
+    .wwi-controls {
       display: flex;
       align-items: center;
       gap: 0.125rem;
     }
 
-    .inspector-btn {
+    .wwi-btn {
       display: flex;
       align-items: center;
       gap: 0.25rem;
@@ -1375,65 +1343,31 @@ HTMLWebWidgetInspectorElement.styles = css`
       border-radius: 0.25rem;
       cursor: pointer;
       transition: all 0.15s ease;
-      font-size: 0.875rem;
+      font-size: 0.75rem;
       font-weight: 500;
       white-space: nowrap;
       opacity: 0.8;
     }
 
-    .inspector-btn:hover {
+    .wwi-btn:hover {
       background: rgba(0, 0, 0, 0.12);
       border-color: rgba(0, 0, 0, 0.2);
       color: var(--wwi-fg, #111);
       opacity: 1;
-      transform: translateY(-1px);
       box-shadow:
         0 1px 3px 0 rgba(0, 0, 0, 0.1),
         0 1px 2px 0 rgba(0, 0, 0, 0.06);
     }
 
-    .inspector-btn[data-selected='true'] {
-      background: rgba(102, 126, 234, 0.15);
-      border-color: rgba(102, 126, 234, 0.4);
-      color: rgba(102, 126, 234, 1);
-      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+    .wwi-btn[data-selected='true'] {
+      background: rgba(34, 197, 94, 0.15);
+      border-color: #22c55e;
+      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
       opacity: 1;
       position: relative;
     }
 
-    .inspector-btn[data-selected='true']::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      background: linear-gradient(
-        45deg,
-        rgba(102, 126, 234, 0.3),
-        rgba(102, 126, 234, 0.1)
-      );
-      border-radius: 0.375rem;
-      z-index: -1;
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0%,
-      100% {
-        opacity: 0.6;
-      }
-      50% {
-        opacity: 1;
-      }
-    }
-
-    .inspector-btn[data-selected='true'] svg {
-      stroke: rgba(102, 126, 234, 1);
-      filter: drop-shadow(0 0 2px rgba(102, 126, 234, 0.3));
-    }
-
-    .inspector-btn svg {
+    .wwi-btn svg {
       flex-shrink: 0;
       width: 14px;
       height: 14px;
@@ -1441,73 +1375,22 @@ HTMLWebWidgetInspectorElement.styles = css`
       opacity: 0.9;
     }
 
-    .inspector-toolbar[data-inspector-active='true'] {
-      border-color: rgba(102, 126, 234, 0.4);
-      box-shadow:
-        0 2px 8px rgba(0, 0, 0, 0.06),
-        0 0 0 1px rgba(102, 126, 234, 0.2);
-      background: var(--wwi-bg, rgba(255, 255, 255, 0.98));
+    .wwi-controls .wwi-btn {
+      padding: 0.25rem;
+      border-radius: 50%;
     }
 
-    .inspector-toolbar[data-inspector-active='true']::before {
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      right: -1px;
-      bottom: -1px;
-      background: linear-gradient(
-        45deg,
-        rgba(102, 126, 234, 0.1),
-        rgba(102, 126, 234, 0.05)
-      );
-      border-radius: 0.5rem;
-      z-index: -1;
-      animation: toolbar-pulse 3s infinite;
-    }
-
-    @keyframes toolbar-pulse {
-      0%,
-      100% {
-        opacity: 0.3;
-      }
-      50% {
-        opacity: 0.6;
-      }
+    .wwi-toolbar[data-inspector-active='true'] {
+      background: var(--wwi-bg, rgba(255, 255, 255, 0.98));
     }
 
     @media (max-width: 768px) {
-      .inspector-toolbar {
+      .wwi-toolbar {
         bottom: 0.75rem;
         left: 0.75rem;
         right: 0.75rem;
         flex-wrap: wrap;
         max-width: calc(100vw - 1.25rem);
-        padding: 0.75rem 1rem;
-        gap: 0.75rem;
-      }
-
-      .inspector-btn {
-        padding: 0.75rem 0.75rem;
-        font-size: 0.875rem;
-      }
-
-      .inspector-info {
-        font-size: 0.875rem;
-      }
-
-      .logo-text {
-        gap: 0.1rem;
-      }
-
-      .logo-title {
-        font-size: 0.6rem;
-        letter-spacing: 0.04em;
-      }
-
-      .logo-subtitle {
-        font-size: 0.45rem;
-        letter-spacing: 0.12em;
       }
     }
   `;