@web-widget/inspector 1.68.0

package/dist/element.js

@@ -0,0 +1,1544 @@
+import { css, LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/utils/widget-finder.ts
+function findWebWidgetContainer(element) {
+  if (!element) {
+    return null;
+  }
+  if (element.tagName === "WEB-WIDGET" && element.hasAttribute("import")) {
+    return element;
+  }
+  const container = element.closest("web-widget[import]");
+  return container;
+}
+
+// src/utils/storage.ts
+function getStoredValue(key, defaultValue) {
+  const stored = localStorage.getItem(key);
+  if (stored === null) {
+    return defaultValue;
+  }
+  try {
+    return JSON.parse(stored);
+  } catch {
+    return defaultValue;
+  }
+}
+function setStoredValue(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+// src/utils/design-system.ts
+var spacing = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "2rem",
+  "4xl": "2.5rem",
+  "5xl": "3rem"
+};
+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'
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem"
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    none: "1",
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  },
+  letterSpacing: {
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
+  }
+};
+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)"
+};
+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"
+};
+var themes = {
+  light: {
+    bg: "rgba(255, 255, 255, 0.92)",
+    fg: "#222",
+    fgHover: "#111",
+    fgSelected: "#000",
+    border: "#e5e7eb",
+    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)"
+  },
+  dark: {
+    bg: "rgba(17, 17, 17, 0.92)",
+    fg: "#f3f4f6",
+    fgHover: "#ffffff",
+    fgSelected: "#ffffff",
+    border: "#374151",
+    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)"
+  }
+};
+var DESIGN_SYSTEM = {
+  spacing,
+  typography,
+  borderRadius,
+  boxShadow,
+  opacity,
+  backdropBlur,
+  transition,
+  zIndex
+};
+function getThemeVariables(theme) {
+  return themes[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);
+}
+function detectAutoTheme() {
+  if (typeof document === "undefined" || !document.body || !document.documentElement) {
+    return undefined;
+  }
+  const bodyStyle = getComputedStyle(document.body);
+  let bg = bodyStyle?.backgroundColor;
+  if (!bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent") {
+    const docStyle = getComputedStyle(document.documentElement);
+    bg = docStyle?.backgroundColor;
+  }
+  let isTransparent = false;
+  if (!bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent") {
+    bg = "rgb(255,255,255)";
+    isTransparent = true;
+  }
+  let r = 255;
+  let g = 255;
+  let b = 255;
+  const match = bg.match(/rgba?\(([^)]+)\)/);
+  if (match) {
+    const parts = match[1]?.split(",").map((x) => parseFloat(x.trim())) ?? [];
+    r = parts[0] ?? 255;
+    g = parts[1] ?? 255;
+    b = parts[2] ?? 255;
+  }
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  if (isTransparent || Number.isNaN(brightness) || brightness >= 128) {
+    return "light";
+  } else {
+    return "dark";
+  }
+}
+function applyThemeMode(mode) {
+  if (mode !== "auto") {
+    const theme = getThemeVariables(mode);
+    if (theme) {
+      applyTheme(theme);
+    }
+    return;
+  }
+  const autoTheme = detectAutoTheme();
+  if (autoTheme) {
+    const theme = getThemeVariables(autoTheme);
+    if (theme) {
+      applyTheme(theme);
+    } else {
+      applyTheme(getThemeVariables("light"));
+    }
+  } else {
+    applyTheme(getThemeVariables("light"));
+  }
+}
+
+// src/utils/box.ts
+function isValidRect(rect) {
+  return rect.width > 0 || rect.height > 0;
+}
+function mergeRects(rects) {
+  if (rects.length === 0) return null;
+  let top = Infinity, left = Infinity, right = -Infinity, bottom = -Infinity;
+  for (const rect of rects) {
+    top = Math.min(top, rect.top);
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  }
+  return {
+    top,
+    left,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function getNodeRectsDeep(node) {
+  const rects = [];
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    const style = getComputedStyle(el);
+    if (style.display === "none") return [];
+    const rect = el.getBoundingClientRect();
+    if (isValidRect(rect)) rects.push(rect);
+    const children = el.shadowRoot ? Array.from(el.shadowRoot.children) : Array.from(el.children);
+    for (const child of children) {
+      rects.push(...getNodeRectsDeep(child));
+    }
+    if (el.tagName === "SLOT") {
+      const assigned = el.assignedNodes({ flatten: true });
+      for (const assignedNode of assigned) {
+        rects.push(...getNodeRectsDeep(assignedNode));
+      }
+    }
+  } else if (node.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const rect = range.getBoundingClientRect();
+    if (isValidRect(rect)) rects.push(rect);
+  }
+  return rects;
+}
+function getElementBox(el) {
+  const allRects = getNodeRectsDeep(el);
+  return mergeRects(allRects);
+}
+
+// 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;
+  }
+  /**
+   * 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 (performanceData.loadTime) {
+      data.loadTime = performanceData.loadTime;
+    }
+    if (performanceData.mountTime) {
+      data.mountTime = performanceData.mountTime;
+    }
+    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);
+    }
+    if (mountMeasure) {
+      data.mountTime = Math.round(mountMeasure.duration);
+    }
+    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) {
+        items.push({
+          key: "Mount Time",
+          value: `${widgetData.mountTime}ms`,
+          priority: 8
+        });
+      }
+      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";
+  }
+};
+
+// 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"
+};
+
+// src/element.ts
+var HTMLWebWidgetInspectorElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dir = "";
+    this.keys = [];
+    this.pageSource = "";
+    this._theme = "auto";
+    this.isToolbarVisible = true;
+    this.isInspectorMode = false;
+    this.isMinimized = false;
+    this.hoveredElement = null;
+    this.widgetCount = 0;
+    this.pressedKeys = /* @__PURE__ */ new Set();
+    this.tooltipElement = null;
+    this.tooltipTimeout = null;
+  }
+  get theme() {
+    return this._theme;
+  }
+  set theme(value) {
+    const oldValue = this._theme;
+    this._theme = value;
+    this.setAttribute("theme", value);
+    if (oldValue !== value) {
+      this.initializeTheme();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeTheme();
+    this.initializeEventListeners();
+    this.updateWidgetCount();
+    this.loadStoredState();
+    this.loadRouteModuleSourceFromHeaders();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupTooltip();
+    this.cleanupInspectorElements();
+  }
+  initializeTheme() {
+    applyThemeMode(this.theme);
+  }
+  initializeEventListeners() {
+    document.addEventListener("keydown", (e) => this.handleKeyEvent(e, true), {
+      capture: true
+    });
+    document.addEventListener("keyup", (e) => this.handleKeyEvent(e, false), {
+      capture: true
+    });
+    window.addEventListener("blur", this.clearKeys.bind(this), {
+      capture: true
+    });
+    document.addEventListener("mousemove", this.handleHoverEvent.bind(this), {
+      capture: true
+    });
+    document.addEventListener("mouseover", this.handleHoverEvent.bind(this), {
+      capture: true
+    });
+    document.addEventListener("click", this.handleClickEvent.bind(this), {
+      capture: true
+    });
+    document.addEventListener("contextmenu", this.clearKeys.bind(this), {
+      capture: true
+    });
+    window.addEventListener("resize", this.updateState.bind(this));
+    document.addEventListener("scroll", this.updateState.bind(this));
+  }
+  loadStoredState() {
+    this.isToolbarVisible = getStoredValue(
+      "web-widget-inspector-visible",
+      true
+    );
+    this.isMinimized = getStoredValue("web-widget-inspector-minimized", false);
+  }
+  handleKeyEvent(event, add) {
+    if (event.code === "Escape" && this.isInspectorMode) {
+      this.isInspectorMode = false;
+      this.updateState();
+      event.preventDefault();
+      return;
+    }
+    if (add) {
+      this.pressedKeys.add(event.code);
+    } else {
+      this.pressedKeys.delete(event.code);
+    }
+    this.updateState();
+  }
+  clearKeys() {
+    this.pressedKeys.clear();
+  }
+  checkKeysMatch(targetKeys) {
+    if (!targetKeys.length) return false;
+    return targetKeys.every((key) => {
+      const normalizedKey = key === "Shift" ? "ShiftLeft" : key;
+      return this.pressedKeys.has(key) || this.pressedKeys.has(normalizedKey);
+    });
+  }
+  handleHoverEvent(event) {
+    if (!this.isInspectorMode) return;
+    const target = findWebWidgetContainer(event.target);
+    if (this.hoveredElement !== target) {
+      this.hoveredElement = target;
+      this.updateState();
+    }
+  }
+  handleClickEvent(event) {
+    if (this.isInspectorMode) {
+      const toolbar = this.renderRoot?.querySelector(".inspector-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();
+      }
+    }
+  }
+  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);
+    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");
+      }
+    } else {
+      document.body.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();
+    }
+  }
+  setButtonSelected(selected) {
+    const btn = this.renderRoot?.querySelector(".inspect-btn");
+    if (btn) {
+      btn.setAttribute("data-selected", selected ? "true" : "false");
+      btn.setAttribute("aria-pressed", selected ? "true" : "false");
+    }
+  }
+  updateWidgetCount() {
+    this.widgetCount = document.querySelectorAll("web-widget[import]").length;
+  }
+  createTooltipElement() {
+    if (this.tooltipElement) {
+      return this.tooltipElement;
+    }
+    if (!this.isInspectorMode) {
+      const dummy = document.createElement("div");
+      dummy.style.display = "none";
+      return dummy;
+    }
+    this.ensureTooltipStyles();
+    const tooltip = document.createElement("div");
+    tooltip.className = "inspector-tooltip";
+    tooltip.setAttribute("aria-hidden", "true");
+    tooltip.setAttribute("data-visible", "false");
+    document.body.appendChild(tooltip);
+    this.tooltipElement = tooltip;
+    return tooltip;
+  }
+  ensureTooltipStyles() {
+    if (!this.isInspectorMode) {
+      return;
+    }
+    if (document.getElementById("inspector-tooltip-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "inspector-tooltip-styles";
+    style.textContent = `
+      .inspector-tooltip {
+        position: fixed;
+        z-index: ${Z_INDEX.TOOLTIP};
+        pointer-events: none;
+        background: var(--wwi-bg, rgba(255, 255, 255, 0.95));
+        color: var(--wwi-fg, #222);
+        border: 1px solid var(--wwi-border, #e5e7eb);
+        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;
+        line-height: ${DESIGN_SYSTEM.typography.lineHeight.normal};
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
+        letter-spacing: ${DESIGN_SYSTEM.typography.letterSpacing.normal};
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        box-shadow: ${DESIGN_SYSTEM.boxShadow.base};
+        backdrop-filter: blur(8px);
+        max-width: 640px;
+        min-width: 280px;
+        visibility: hidden;
+      }
+
+      .tooltip-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: ${DESIGN_SYSTEM.typography.fontSize.xs};
+        line-height: ${DESIGN_SYSTEM.typography.lineHeight.normal};
+      }
+
+      .tooltip-table td {
+        padding: ${DESIGN_SYSTEM.spacing.xs} 0;
+        vertical-align: top;
+      }
+
+      .tooltip-table .key {
+        color: var(--wwi-accent, #888);
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.medium};
+        padding-right: ${DESIGN_SYSTEM.spacing.lg};
+        white-space: nowrap;
+        text-align: left;
+        opacity: 0.8;
+      }
+
+      .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 {
+        color: var(--wwi-fg, #222);
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.semibold};
+        opacity: 1;
+      }
+
+      .tooltip-table tr.priority-high .value {
+        color: var(--wwi-fg, #222);
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.medium};
+      }
+
+      .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 {
+        color: var(--wwi-fg, #444);
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
+      }
+
+      .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 {
+        color: var(--wwi-fg, #666);
+        font-weight: ${DESIGN_SYSTEM.typography.fontWeight.normal};
+        opacity: 0.8;
+      }
+
+      .tooltip-help {
+        margin-top: ${DESIGN_SYSTEM.spacing.md};
+        padding-top: ${DESIGN_SYSTEM.spacing.md};
+        border-top: 1px solid var(--wwi-border, #e5e7eb);
+        font-size: ${DESIGN_SYSTEM.typography.fontSize.xs};
+        color: var(--wwi-accent, #888);
+        text-align: center;
+        opacity: 0.8;
+      }
+
+      @media (max-width: 768px) {
+        .inspector-toolbar {
+          bottom: ${DESIGN_SYSTEM.spacing.md};
+          left: ${DESIGN_SYSTEM.spacing.md};
+          right: ${DESIGN_SYSTEM.spacing.md};
+          flex-wrap: wrap;
+          max-width: calc(100vw - ${DESIGN_SYSTEM.spacing.xl});
+          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);
+  }
+  calculateSimplePosition(elementRect, tooltipRect) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const padding = 8;
+    const minMargin = 8;
+    let x = elementRect.left;
+    let y = elementRect.top - tooltipRect.height - padding;
+    if (y < minMargin) {
+      y = elementRect.top + elementRect.height + padding;
+    }
+    x = Math.max(
+      minMargin,
+      Math.min(viewportWidth - tooltipRect.width - minMargin, x)
+    );
+    y = Math.max(
+      minMargin,
+      Math.min(viewportHeight - tooltipRect.height - minMargin, y)
+    );
+    return { x, y };
+  }
+  generateTooltipContent(element) {
+    return DebugDataCollector.generateTooltipContent(element);
+  }
+  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 tooltipRect = tooltip.getBoundingClientRect();
+    const position = this.calculateSimplePosition(
+      elementRect ?? {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: 0,
+        height: 0
+      },
+      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";
+    }
+  }
+  cleanupTooltip() {
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+    if (this.tooltipTimeout) {
+      clearTimeout(this.tooltipTimeout);
+      this.tooltipTimeout = null;
+    }
+  }
+  cleanupInspectorElements() {
+    const highlightOverlay = document.querySelector(
+      ".web-widget-inspector-highlight-overlay"
+    );
+    if (highlightOverlay) {
+      highlightOverlay.remove();
+    }
+    const tooltipStyles = document.getElementById("inspector-tooltip-styles");
+    if (tooltipStyles) {
+      tooltipStyles.remove();
+    }
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+    document.body.style.removeProperty("cursor");
+  }
+  toggleInspector() {
+    this.isInspectorMode = !this.isInspectorMode;
+    if (!this.isInspectorMode) {
+      this.cleanupInspectorElements();
+    }
+    this.updateState();
+  }
+  showToolbar() {
+    this.isToolbarVisible = true;
+    this.updateState();
+    setStoredValue("web-widget-inspector-visible", true);
+  }
+  hideToolbar() {
+    this.isToolbarVisible = false;
+    this.updateState();
+    setStoredValue("web-widget-inspector-visible", false);
+  }
+  minimizeToolbar() {
+    this.isMinimized = !this.isMinimized;
+    this.updateState();
+    setStoredValue("web-widget-inspector-minimized", this.isMinimized);
+  }
+  openInEditor(path, srcDir) {
+    if (srcDir) {
+      const resolvedURL = new URL(path, document.baseURI);
+      if (resolvedURL.origin === location.origin) {
+        const filePath = srcDir + resolvedURL.pathname;
+        this.openFileInEditor(filePath);
+      } else {
+        location.href = resolvedURL.href;
+      }
+    } else {
+      this.openFileInEditor(path);
+    }
+  }
+  openFileInEditor(filePath) {
+    document.body.style.cursor = "progress";
+    fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`).finally(
+      () => {
+        document.body.style.removeProperty("cursor");
+      }
+    );
+  }
+  getCurrentFilePath() {
+    if (!this.pageSource) return "";
+    try {
+      if (this.pageSource.startsWith("source://")) {
+        return this.pageSource.replace("source://", "");
+      }
+      const url = new URL(this.pageSource);
+      return url.pathname;
+    } catch {
+      return this.pageSource;
+    }
+  }
+  loadRouteModuleSourceFromHeaders() {
+    if (!this.pageSource) {
+      fetch(window.location.href, { method: "HEAD" }).then((response) => {
+        const moduleSource = response.headers.get("x-module-source");
+        if (moduleSource) {
+          this.pageSource = moduleSource;
+        }
+      }).catch((error) => {
+        console.error(
+          "Error loading route module source from headers:",
+          error
+        );
+      });
+    }
+  }
+  render() {
+    if (!this.isToolbarVisible) {
+      return html``;
+    }
+    return html`
+      <div
+        class="inspector-toolbar"
+        data-minimized=${this.isMinimized ? "true" : "false"}
+        data-inspector-active=${this.isInspectorMode ? "true" : "false"}>
+        <div class="inspector-header">
+          <div
+            class="inspector-logo"
+            tabindex="0"
+            title="Web Widget Inspector"
+            @click=${this.minimizeToolbar}>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true">
+              <path
+                d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2Z" />
+            </svg>
+            <div class="logo-text">
+              <span class="logo-title">WEB WIDGET</span>
+              <span class="logo-subtitle">DEV INSPECTOR</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="inspector-info">
+          <span class="widget-count">${this.widgetCount} widgets</span>
+        </div>
+
+        <div class="inspector-actions">
+          <button
+            class="inspector-btn inspect-btn"
+            @click=${this.toggleInspector}
+            title="Click to activate widget inspector (ESC to exit)"
+            aria-label="Activate widget inspector mode">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <span>Inspect</span>
+          </button>
+
+          <button
+            class="inspector-btn page-btn"
+            @click=${() => {
+      const currentFilePath = this.getCurrentFilePath();
+      if (currentFilePath) {
+        this.openInEditor(currentFilePath);
+      }
+    }}
+            title="Open current page source code"
+            aria-label="Open current page source code">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M9 9h6v6H9z" />
+            </svg>
+            <span>Open Source</span>
+          </button>
+        </div>
+
+        <div class="inspector-controls">
+          <button
+            class="inspector-btn hide-btn"
+            @click=${this.hideToolbar}
+            title="Hide Web Widget Inspector"
+            aria-label="Hide inspector toolbar">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+          <button
+            class="inspector-btn toggle-btn"
+            @click=${this.minimizeToolbar}
+            title="Minimize Web Widget Inspector"
+            aria-label="Minimize inspector toolbar">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+HTMLWebWidgetInspectorElement.styles = css`
+    :host {
+      display: contents;
+    }
+
+    .inspector-toolbar,
+    .inspector-toolbar *,
+    .inspector-tooltip,
+    .inspector-tooltip * {
+      font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Arial, sans-serif !important;
+    }
+
+    .inspector-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      position: fixed;
+      bottom: 1rem;
+      left: 1rem;
+      z-index: ${Z_INDEX.TOOLBAR};
+      background: var(--wwi-bg, rgba(255, 255, 255, 0.95));
+      color: var(--wwi-fg, #222);
+      padding: 0.75rem 1rem;
+      border-radius: 0.375rem;
+      border: 1px solid var(--wwi-border, #e5e7eb);
+      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;
+      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;
+      transition:
+        background 0.2s,
+        border 0.2s !important;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .inspector-toolbar[data-minimized='true']:hover .inspector-logo svg {
+      opacity: 1 !important;
+      filter: none !important;
+    }
+
+    .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;
+    }
+
+    .inspector-overlay {
+      position: fixed;
+      z-index: ${Z_INDEX.OVERLAY};
+      pointer-events: none;
+      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
+      );
+      border: 2px solid rgba(102, 126, 234, 0.9);
+      border-radius: 0;
+      box-sizing: border-box;
+    }
+
+    .inspector-tooltip {
+      /* Styles dynamically injected by ensureTooltipStyles */
+      display: none;
+    }
+
+    .inspector-header {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding-right: 0.5rem;
+    }
+
+    .inspector-logo {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      font-weight: 600;
+      color: var(--wwi-accent, #888);
+      font-size: 0.75rem;
+      user-select: none;
+    }
+
+    .inspector-logo svg {
+      cursor: pointer;
+      color: var(--wwi-accent, #888);
+      width: 16px;
+      height: 16px;
+      margin-right: 0.125rem;
+    }
+
+    .logo-text {
+      display: flex;
+      flex-direction: column;
+      line-height: 1;
+      gap: 0.125rem;
+      align-items: flex-start;
+    }
+
+    .logo-title {
+      font-weight: 700;
+      font-size: 0.7rem;
+      color: var(--wwi-accent, #888);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    .logo-subtitle {
+      font-weight: 500;
+      font-size: 0.5rem;
+      color: var(--wwi-accent, #888);
+      opacity: 0.75;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+
+    .inspector-info {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      color: var(--wwi-fg, #222);
+      opacity: 0.7;
+    }
+
+    .widget-count {
+      color: var(--wwi-accent, #888);
+      font-weight: 500;
+    }
+
+    .inspector-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+
+    .inspector-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.125rem;
+    }
+
+    .inspector-btn {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--wwi-fg, #222);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      font-size: 0.875rem;
+      font-weight: 500;
+      white-space: nowrap;
+      opacity: 0.8;
+    }
+
+    .inspector-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);
+      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 {
+      flex-shrink: 0;
+      width: 14px;
+      height: 14px;
+      stroke: currentColor;
+      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));
+    }
+
+    .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;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .inspector-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;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], HTMLWebWidgetInspectorElement.prototype, "dir", 2);
+__decorateClass([
+  property({ type: Array })
+], HTMLWebWidgetInspectorElement.prototype, "keys", 2);
+__decorateClass([
+  property({ type: String, attribute: "page-source" })
+], HTMLWebWidgetInspectorElement.prototype, "pageSource", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLWebWidgetInspectorElement.prototype, "theme", 1);
+__decorateClass([
+  state()
+], HTMLWebWidgetInspectorElement.prototype, "isToolbarVisible", 2);
+__decorateClass([
+  state()
+], HTMLWebWidgetInspectorElement.prototype, "isInspectorMode", 2);
+__decorateClass([
+  state()
+], HTMLWebWidgetInspectorElement.prototype, "isMinimized", 2);
+__decorateClass([
+  state()
+], HTMLWebWidgetInspectorElement.prototype, "hoveredElement", 2);
+__decorateClass([
+  state()
+], HTMLWebWidgetInspectorElement.prototype, "widgetCount", 2);
+
+export { HTMLWebWidgetInspectorElement };
+//# sourceMappingURL=element.js.map
+//# sourceMappingURL=element.js.map