@tanstack/devtools-a11y 0.0.1 → 0.1.1

package/dist/esm/core/utils/ui.utils.js

@@ -0,0 +1,330 @@
+//#region src/core/utils/ui.utils.ts
+function scrollToElement(selector) {
+	try {
+		const element = document.querySelector(selector);
+		if (element) {
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "start",
+				inline: "nearest"
+			});
+			return true;
+		}
+	} catch (error) {
+		console.warn("[A11y Panel] Could not scroll to element:", selector, error);
+	}
+	return false;
+}
+var HIGHLIGHT_CLASS = "tsd-a11y-highlight";
+var HIGHLIGHT_STYLE_ID = "tsd-a11y-highlight-styles";
+var TOOLTIP_CLASS = "tsd-a11y-tooltip";
+var activeTooltips = /* @__PURE__ */ new Map();
+var scrollHandler = null;
+var TOOLTIP_HEIGHT = 28;
+/**
+* Severity levels mapped to numeric values for comparison (higher = more severe)
+*/
+var SEVERITY_ORDER = {
+	critical: 4,
+	serious: 3,
+	moderate: 2,
+	minor: 1
+};
+/**
+* Selectors for devtools elements that should never be highlighted
+*/
+var DEVTOOLS_SELECTORS = [
+	"[data-testid=\"tanstack_devtools\"]",
+	"[data-devtools]",
+	"[data-devtools-panel]",
+	"[data-a11y-overlay]"
+];
+/**
+* Check if an element is inside the devtools panel
+*/
+function isInsideDevtools(element) {
+	for (const selector of DEVTOOLS_SELECTORS) if (element.closest(selector)) return true;
+	return false;
+}
+var SEVERITY_LABELS = {
+	critical: "Critical",
+	serious: "Serious",
+	moderate: "Moderate",
+	minor: "Minor"
+};
+var RULE_SET_LABELS = {
+	wcag2a: "WCAG 2.0 A",
+	wcag2aa: "WCAG 2.0 AA",
+	wcag21aa: "WCAG 2.1 AA",
+	wcag22aa: "WCAG 2.2 AA",
+	section508: "Section 508",
+	"best-practice": "Best Practice",
+	all: "All Rules"
+};
+/**
+* Color scheme for different severity levels
+*/
+var SEVERITY_COLORS = {
+	critical: {
+		border: "#dc2626",
+		bg: "rgba(220, 38, 38, 0.15)",
+		text: "#dc2626"
+	},
+	serious: {
+		border: "#ea580c",
+		bg: "rgba(234, 88, 12, 0.15)",
+		text: "#ea580c"
+	},
+	moderate: {
+		border: "#ca8a04",
+		bg: "rgba(202, 138, 4, 0.15)",
+		text: "#ca8a04"
+	},
+	minor: {
+		border: "#2563eb",
+		bg: "rgba(37, 99, 235, 0.15)",
+		text: "#2563eb"
+	}
+};
+/**
+* Inject overlay styles into the document
+*/
+function injectStyles() {
+	if (document.getElementById(HIGHLIGHT_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = HIGHLIGHT_STYLE_ID;
+	style.textContent = `
+    .${HIGHLIGHT_CLASS}--critical {
+      outline: 3px solid ${SEVERITY_COLORS.critical.border} !important;
+      outline-offset: 2px !important;
+      background-color: ${SEVERITY_COLORS.critical.bg} !important;
+    }
+
+    .${HIGHLIGHT_CLASS}--serious {
+      outline: 3px solid ${SEVERITY_COLORS.serious.border} !important;
+      outline-offset: 2px !important;
+      background-color: ${SEVERITY_COLORS.serious.bg} !important;
+    }
+
+    .${HIGHLIGHT_CLASS}--moderate {
+      outline: 2px solid ${SEVERITY_COLORS.moderate.border} !important;
+      outline-offset: 2px !important;
+      background-color: ${SEVERITY_COLORS.moderate.bg} !important;
+    }
+
+    .${HIGHLIGHT_CLASS}--minor {
+      outline: 2px dashed ${SEVERITY_COLORS.minor.border} !important;
+      outline-offset: 2px !important;
+      background-color: ${SEVERITY_COLORS.minor.bg} !important;
+    }
+
+    .${TOOLTIP_CLASS} {
+      position: fixed;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: system-ui, -apple-system, sans-serif;
+      white-space: nowrap;
+      z-index: 99990;
+      pointer-events: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      max-width: 90vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .${TOOLTIP_CLASS}--critical {
+      background: ${SEVERITY_COLORS.critical.border};
+      color: white;
+    }
+
+    .${TOOLTIP_CLASS}--serious {
+      background: ${SEVERITY_COLORS.serious.border};
+      color: white;
+    }
+
+    .${TOOLTIP_CLASS}--moderate {
+      background: ${SEVERITY_COLORS.moderate.border};
+      color: white;
+    }
+
+    .${TOOLTIP_CLASS}--minor {
+      background: ${SEVERITY_COLORS.minor.border};
+      color: white;
+    }
+  `;
+	document.head.appendChild(style);
+}
+/**
+* Calculate optimal tooltip position, ensuring it's always visible in viewport
+*/
+function calculateTooltipPosition(targetElement, tooltip) {
+	const rect = targetElement.getBoundingClientRect();
+	const tooltipHeight = TOOLTIP_HEIGHT;
+	const gap = 4;
+	const viewportPadding = 8;
+	let top = rect.top - tooltipHeight - gap;
+	let flipped = false;
+	if (top < viewportPadding) {
+		const belowTop = rect.top + gap + viewportPadding;
+		if (rect.bottom + gap + tooltipHeight < window.innerHeight) {
+			top = rect.bottom + gap;
+			flipped = true;
+		} else if (belowTop + tooltipHeight < window.innerHeight) {
+			top = belowTop;
+			flipped = true;
+		} else {
+			top = viewportPadding;
+			flipped = true;
+		}
+	}
+	let left = rect.left;
+	const tooltipWidth = tooltip.offsetWidth || 150;
+	if (left + tooltipWidth > window.innerWidth) left = Math.max(viewportPadding, window.innerWidth - tooltipWidth - viewportPadding);
+	if (left < viewportPadding) left = viewportPadding;
+	return {
+		top,
+		left,
+		flipped
+	};
+}
+/**
+* Update all tooltip positions based on their target elements
+*/
+function updateTooltipPositions() {
+	activeTooltips.forEach((targetElement, tooltip) => {
+		const { top, left } = calculateTooltipPosition(targetElement, tooltip);
+		tooltip.style.top = `${top}px`;
+		tooltip.style.left = `${left}px`;
+	});
+}
+/**
+* Start listening for scroll events to update tooltip positions
+*/
+function startScrollListener() {
+	if (scrollHandler) return;
+	scrollHandler = () => {
+		requestAnimationFrame(updateTooltipPositions);
+	};
+	window.addEventListener("scroll", scrollHandler, true);
+}
+/**
+* Stop listening for scroll events
+*/
+function stopScrollListener() {
+	if (scrollHandler) {
+		window.removeEventListener("scroll", scrollHandler, true);
+		scrollHandler = null;
+	}
+}
+/**
+* Create a tooltip element for issues and position it above the target element
+*/
+function createTooltip(issues, targetElement) {
+	if (issues.length === 0) return null;
+	const sortedIssues = [...issues].sort((a, b) => SEVERITY_ORDER[b.impact] - SEVERITY_ORDER[a.impact]);
+	const firstIssue = sortedIssues[0];
+	if (!firstIssue) return null;
+	const mostSevere = firstIssue.impact;
+	const tooltip = document.createElement("div");
+	tooltip.className = `${TOOLTIP_CLASS} ${TOOLTIP_CLASS}--${mostSevere}`;
+	if (sortedIssues.length === 1) tooltip.textContent = `${mostSevere.toUpperCase()}: ${firstIssue.ruleId}`;
+	else {
+		const issueList = sortedIssues.map((issue) => `${issue.impact.charAt(0).toUpperCase()}: ${issue.ruleId}`).join(" | ");
+		tooltip.textContent = `${sortedIssues.length} issues: ${issueList}`;
+	}
+	tooltip.setAttribute("data-a11y-overlay", "true");
+	activeTooltips.set(tooltip, targetElement);
+	if (activeTooltips.size === 1) startScrollListener();
+	const { top, left } = calculateTooltipPosition(targetElement, tooltip);
+	tooltip.style.top = `${top}px`;
+	tooltip.style.left = `${left}px`;
+	return tooltip;
+}
+/**
+* Highlight a single element with the specified severity
+*/
+function highlightElement(selector, impact = "serious", options = {}) {
+	const { showTooltip = true, ruleId } = options;
+	try {
+		injectStyles();
+		const elements = document.querySelectorAll(selector);
+		if (elements.length === 0) {
+			console.warn(`[A11y Overlay] No elements found for selector: ${selector}`);
+			return;
+		}
+		let highlightedCount = 0;
+		elements.forEach((el) => {
+			if (isInsideDevtools(el)) return;
+			el.classList.add(HIGHLIGHT_CLASS, `${HIGHLIGHT_CLASS}--${impact}`);
+			if (showTooltip && highlightedCount === 0 && ruleId) {
+				const tooltip = createTooltip([{
+					ruleId,
+					impact
+				}], el);
+				if (tooltip) document.body.appendChild(tooltip);
+			}
+			highlightedCount++;
+		});
+		if (highlightedCount > 0) console.log(`[A11y Overlay] Highlighted ${highlightedCount} element(s) with selector: ${selector}`);
+	} catch (error) {
+		console.error("[A11y Overlay] Error highlighting element:", error);
+	}
+}
+/**
+* Highlight all elements with issues.
+* Shows all issues per element in the tooltip, using the most severe for highlighting.
+*/
+function highlightAllIssues(issues) {
+	injectStyles();
+	clearHighlights();
+	const selectorIssues = /* @__PURE__ */ new Map();
+	for (const issue of issues) for (const node of issue.nodes) {
+		const selector = node.selector;
+		const impact = issue.impact ?? "minor";
+		const existing = selectorIssues.get(selector) || [];
+		if (!existing.some((e) => e.ruleId === issue.ruleId)) {
+			existing.push({
+				ruleId: issue.ruleId,
+				impact
+			});
+			selectorIssues.set(selector, existing);
+		}
+	}
+	for (const [selector, issueList] of selectorIssues) {
+		if (issueList.length === 0) continue;
+		const mostSevereImpact = issueList.reduce((max, issue) => SEVERITY_ORDER[issue.impact] > SEVERITY_ORDER[max.impact] ? issue : max).impact;
+		try {
+			const elements = document.querySelectorAll(selector);
+			if (elements.length === 0) continue;
+			let highlightedCount = 0;
+			elements.forEach((el) => {
+				if (isInsideDevtools(el)) return;
+				el.classList.add(HIGHLIGHT_CLASS, `${HIGHLIGHT_CLASS}--${mostSevereImpact}`);
+				if (highlightedCount === 0) {
+					const tooltip = createTooltip(issueList, el);
+					if (tooltip) document.body.appendChild(tooltip);
+				}
+				highlightedCount++;
+			});
+		} catch (error) {
+			console.error("[A11y Overlay] Error highlighting element:", error);
+		}
+	}
+}
+/**
+* Clear all highlights from the page
+*/
+function clearHighlights() {
+	document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((el) => {
+		el.classList.remove(HIGHLIGHT_CLASS, `${HIGHLIGHT_CLASS}--critical`, `${HIGHLIGHT_CLASS}--serious`, `${HIGHLIGHT_CLASS}--moderate`, `${HIGHLIGHT_CLASS}--minor`);
+	});
+	document.querySelectorAll(`.${TOOLTIP_CLASS}`).forEach((el) => el.remove());
+	activeTooltips.clear();
+	stopScrollListener();
+}
+//#endregion
+export { RULE_SET_LABELS, SEVERITY_LABELS, SEVERITY_ORDER, clearHighlights, highlightAllIssues, highlightElement, scrollToElement };
+
+//# sourceMappingURL=ui.utils.js.map

package/dist/esm/core/utils/ui.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.utils.js","names":[],"sources":["../../../../src/core/utils/ui.utils.ts"],"sourcesContent":["// types\nimport type {\n  A11yIssue,\n  RuleSetPreset,\n  SeverityThreshold,\n} from '../types/types'\n\nexport function scrollToElement(selector: string): boolean {\n  try {\n    const element = document.querySelector(selector)\n    if (element) {\n      element.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n      })\n      return true\n    }\n  } catch (error) {\n    console.warn('[A11y Panel] Could not scroll to element:', selector, error)\n  }\n  return false\n}\n\nconst HIGHLIGHT_CLASS = 'tsd-a11y-highlight'\nconst HIGHLIGHT_STYLE_ID = 'tsd-a11y-highlight-styles'\nconst TOOLTIP_CLASS = 'tsd-a11y-tooltip'\n\n// Track active tooltips and their target elements for scroll updates\nconst activeTooltips = new Map<HTMLElement, Element>()\nlet scrollHandler: (() => void) | null = null\n\n// Tooltip height (padding + font size + some buffer)\nconst TOOLTIP_HEIGHT = 28\n\n/**\n * Severity levels mapped to numeric values for comparison (higher = more severe)\n */\nexport const SEVERITY_ORDER: Record<SeverityThreshold, number> = {\n  critical: 4,\n  serious: 3,\n  moderate: 2,\n  minor: 1,\n}\n\n/**\n * Selectors for devtools elements that should never be highlighted\n */\nconst DEVTOOLS_SELECTORS = [\n  '[data-testid=\"tanstack_devtools\"]',\n  '[data-devtools]',\n  '[data-devtools-panel]',\n  '[data-a11y-overlay]',\n]\n\n/**\n * Check if an element is inside the devtools panel\n */\nfunction isInsideDevtools(element: Element): boolean {\n  for (const selector of DEVTOOLS_SELECTORS) {\n    if (element.closest(selector)) {\n      return true\n    }\n  }\n  return false\n}\n\nexport const SEVERITY_LABELS: Record<SeverityThreshold, string> = {\n  critical: 'Critical',\n  serious: 'Serious',\n  moderate: 'Moderate',\n  minor: 'Minor',\n}\n\nexport const RULE_SET_LABELS: Record<RuleSetPreset, string> = {\n  wcag2a: 'WCAG 2.0 A',\n  wcag2aa: 'WCAG 2.0 AA',\n  wcag21aa: 'WCAG 2.1 AA',\n  wcag22aa: 'WCAG 2.2 AA',\n  section508: 'Section 508',\n  'best-practice': 'Best Practice',\n  all: 'All Rules',\n}\n\n/**\n * Color scheme for different severity levels\n */\nconst SEVERITY_COLORS: Record<\n  SeverityThreshold,\n  { border: string; bg: string; text: string }\n> = {\n  critical: {\n    border: '#dc2626',\n    bg: 'rgba(220, 38, 38, 0.15)',\n    text: '#dc2626',\n  },\n  serious: {\n    border: '#ea580c',\n    bg: 'rgba(234, 88, 12, 0.15)',\n    text: '#ea580c',\n  },\n  moderate: {\n    border: '#ca8a04',\n    bg: 'rgba(202, 138, 4, 0.15)',\n    text: '#ca8a04',\n  },\n  minor: { border: '#2563eb', bg: 'rgba(37, 99, 235, 0.15)', text: '#2563eb' },\n}\n\n/**\n * Inject overlay styles into the document\n */\nfunction injectStyles(): void {\n  if (document.getElementById(HIGHLIGHT_STYLE_ID)) {\n    return\n  }\n\n  const style = document.createElement('style')\n  style.id = HIGHLIGHT_STYLE_ID\n  // Highlights use outline which doesn't affect layout\n  // Tooltips use fixed positioning to avoid layout shifts\n  style.textContent = `\n    .${HIGHLIGHT_CLASS}--critical {\n      outline: 3px solid ${SEVERITY_COLORS.critical.border} !important;\n      outline-offset: 2px !important;\n      background-color: ${SEVERITY_COLORS.critical.bg} !important;\n    }\n\n    .${HIGHLIGHT_CLASS}--serious {\n      outline: 3px solid ${SEVERITY_COLORS.serious.border} !important;\n      outline-offset: 2px !important;\n      background-color: ${SEVERITY_COLORS.serious.bg} !important;\n    }\n\n    .${HIGHLIGHT_CLASS}--moderate {\n      outline: 2px solid ${SEVERITY_COLORS.moderate.border} !important;\n      outline-offset: 2px !important;\n      background-color: ${SEVERITY_COLORS.moderate.bg} !important;\n    }\n\n    .${HIGHLIGHT_CLASS}--minor {\n      outline: 2px dashed ${SEVERITY_COLORS.minor.border} !important;\n      outline-offset: 2px !important;\n      background-color: ${SEVERITY_COLORS.minor.bg} !important;\n    }\n\n    .${TOOLTIP_CLASS} {\n      position: fixed;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 600;\n      font-family: system-ui, -apple-system, sans-serif;\n      white-space: nowrap;\n      z-index: 99990;\n      pointer-events: none;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n      max-width: 90vw;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .${TOOLTIP_CLASS}--critical {\n      background: ${SEVERITY_COLORS.critical.border};\n      color: white;\n    }\n\n    .${TOOLTIP_CLASS}--serious {\n      background: ${SEVERITY_COLORS.serious.border};\n      color: white;\n    }\n\n    .${TOOLTIP_CLASS}--moderate {\n      background: ${SEVERITY_COLORS.moderate.border};\n      color: white;\n    }\n\n    .${TOOLTIP_CLASS}--minor {\n      background: ${SEVERITY_COLORS.minor.border};\n      color: white;\n    }\n  `\n  document.head.appendChild(style)\n}\n\n/**\n * Calculate optimal tooltip position, ensuring it's always visible in viewport\n */\nfunction calculateTooltipPosition(\n  targetElement: Element,\n  tooltip: HTMLElement,\n): { top: number; left: number; flipped: boolean } {\n  const rect = targetElement.getBoundingClientRect()\n  const tooltipHeight = TOOLTIP_HEIGHT\n  const gap = 4 // Small gap between tooltip and element\n  const viewportPadding = 8 // Minimum distance from viewport edge\n\n  // Default: position above the element\n  let top = rect.top - tooltipHeight - gap\n  let flipped = false\n\n  // If tooltip would be above viewport, we need to find a visible position\n  if (top < viewportPadding) {\n    // Try positioning below the element's top edge (inside the element but visible)\n    const belowTop = rect.top + gap + viewportPadding\n\n    // If the element's bottom is within the viewport, position below the element\n    if (rect.bottom + gap + tooltipHeight < window.innerHeight) {\n      top = rect.bottom + gap\n      flipped = true\n    }\n    // Otherwise, position at the top of the viewport (for large elements like <main>)\n    else if (belowTop + tooltipHeight < window.innerHeight) {\n      top = belowTop\n      flipped = true\n    }\n    // Fallback: just keep it at the top of the viewport\n    else {\n      top = viewportPadding\n      flipped = true\n    }\n  }\n\n  // Also handle horizontal overflow - keep tooltip within viewport\n  let left = rect.left\n  const tooltipWidth = tooltip.offsetWidth || 150 // Estimate if not yet rendered\n  if (left + tooltipWidth > window.innerWidth) {\n    left = Math.max(\n      viewportPadding,\n      window.innerWidth - tooltipWidth - viewportPadding,\n    )\n  }\n  if (left < viewportPadding) {\n    left = viewportPadding\n  }\n\n  return { top, left, flipped }\n}\n\n/**\n * Update all tooltip positions based on their target elements\n */\nfunction updateTooltipPositions(): void {\n  activeTooltips.forEach((targetElement, tooltip) => {\n    const { top, left } = calculateTooltipPosition(targetElement, tooltip)\n    tooltip.style.top = `${top}px`\n    tooltip.style.left = `${left}px`\n  })\n}\n\n/**\n * Start listening for scroll events to update tooltip positions\n */\nfunction startScrollListener(): void {\n  if (scrollHandler) return\n\n  scrollHandler = () => {\n    requestAnimationFrame(updateTooltipPositions)\n  }\n\n  window.addEventListener('scroll', scrollHandler, true) // capture phase to catch all scrolls\n}\n\n/**\n * Stop listening for scroll events\n */\nfunction stopScrollListener(): void {\n  if (scrollHandler) {\n    window.removeEventListener('scroll', scrollHandler, true)\n    scrollHandler = null\n  }\n}\n\n/**\n * Issue info for tooltip display\n */\ninterface TooltipIssue {\n  ruleId: string\n  impact: SeverityThreshold\n}\n\n/**\n * Create a tooltip element for issues and position it above the target element\n */\nfunction createTooltip(\n  issues: Array<TooltipIssue>,\n  targetElement: Element,\n): HTMLElement | null {\n  if (issues.length === 0) {\n    return null\n  }\n\n  // Sort issues by severity (most severe first)\n  const sortedIssues = [...issues].sort(\n    (a, b) => SEVERITY_ORDER[b.impact] - SEVERITY_ORDER[a.impact],\n  )\n\n  const firstIssue = sortedIssues[0]\n  if (!firstIssue) {\n    return null\n  }\n\n  const mostSevere = firstIssue.impact\n  const tooltip = document.createElement('div')\n  tooltip.className = `${TOOLTIP_CLASS} ${TOOLTIP_CLASS}--${mostSevere}`\n\n  // Build tooltip content showing all issues\n  if (sortedIssues.length === 1) {\n    tooltip.textContent = `${mostSevere.toUpperCase()}: ${firstIssue.ruleId}`\n  } else {\n    // Multiple issues - show count and list\n    const issueList = sortedIssues\n      .map(\n        (issue) => `${issue.impact.charAt(0).toUpperCase()}: ${issue.ruleId}`,\n      )\n      .join(' | ')\n    tooltip.textContent = `${sortedIssues.length} issues: ${issueList}`\n  }\n\n  // Mark as overlay element so it's excluded from a11y scans\n  tooltip.setAttribute('data-a11y-overlay', 'true')\n\n  // Track this tooltip for scroll updates (need to add before positioning)\n  activeTooltips.set(tooltip, targetElement)\n\n  // Start scroll listener if not already running\n  if (activeTooltips.size === 1) {\n    startScrollListener()\n  }\n\n  // Position the tooltip - will flip below element if above viewport\n  const { top, left } = calculateTooltipPosition(targetElement, tooltip)\n  tooltip.style.top = `${top}px`\n  tooltip.style.left = `${left}px`\n\n  return tooltip\n}\n\n/**\n * Highlight a single element with the specified severity\n */\nexport function highlightElement(\n  selector: string,\n  impact: SeverityThreshold = 'serious',\n  options: { showTooltip?: boolean; ruleId?: string } = {},\n): void {\n  const { showTooltip = true, ruleId } = options\n\n  try {\n    injectStyles()\n\n    const elements = document.querySelectorAll(selector)\n    if (elements.length === 0) {\n      console.warn(`[A11y Overlay] No elements found for selector: ${selector}`)\n      return\n    }\n\n    let highlightedCount = 0\n    elements.forEach((el) => {\n      // Skip elements inside devtools\n      if (isInsideDevtools(el)) {\n        return\n      }\n\n      el.classList.add(HIGHLIGHT_CLASS, `${HIGHLIGHT_CLASS}--${impact}`)\n\n      // Add tooltip to first highlighted element only\n      if (showTooltip && highlightedCount === 0 && ruleId) {\n        const tooltip = createTooltip([{ ruleId, impact }], el)\n        if (tooltip) {\n          document.body.appendChild(tooltip)\n        }\n      }\n\n      highlightedCount++\n    })\n\n    if (highlightedCount > 0) {\n      console.log(\n        `[A11y Overlay] Highlighted ${highlightedCount} element(s) with selector: ${selector}`,\n      )\n    }\n  } catch (error) {\n    console.error('[A11y Overlay] Error highlighting element:', error)\n  }\n}\n\n/**\n * Highlight all elements with issues.\n * Shows all issues per element in the tooltip, using the most severe for highlighting.\n */\nexport function highlightAllIssues(issues: Array<A11yIssue>): void {\n  injectStyles()\n  clearHighlights()\n\n  // Track ALL issues for each selector\n  // Map: selector -> Array<{ ruleId, impact }>\n  const selectorIssues = new Map<string, Array<TooltipIssue>>()\n\n  // Collect all issues per selector\n  for (const issue of issues) {\n    for (const node of issue.nodes) {\n      const selector = node.selector\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      const impact = issue.impact ?? 'minor'\n\n      const existing = selectorIssues.get(selector) || []\n      // Avoid duplicate rule IDs for the same selector\n      if (!existing.some((e) => e.ruleId === issue.ruleId)) {\n        existing.push({ ruleId: issue.ruleId, impact })\n        selectorIssues.set(selector, existing)\n      }\n    }\n  }\n\n  // Highlight each selector with its most severe issue, but show all in tooltip\n  for (const [selector, issueList] of selectorIssues) {\n    // Skip empty lists (shouldn't happen, but guards against undefined)\n    if (issueList.length === 0) {\n      continue\n    }\n\n    // Find most severe impact for highlighting\n    const mostSevereImpact = issueList.reduce((max, issue) =>\n      SEVERITY_ORDER[issue.impact] > SEVERITY_ORDER[max.impact] ? issue : max,\n    ).impact\n\n    try {\n      const elements = document.querySelectorAll(selector)\n      if (elements.length === 0) {\n        continue\n      }\n\n      let highlightedCount = 0\n      elements.forEach((el) => {\n        // Skip elements inside devtools\n        if (isInsideDevtools(el)) {\n          return\n        }\n\n        el.classList.add(\n          HIGHLIGHT_CLASS,\n          `${HIGHLIGHT_CLASS}--${mostSevereImpact}`,\n        )\n\n        // Add tooltip to first highlighted element only, showing ALL issues\n        if (highlightedCount === 0) {\n          const tooltip = createTooltip(issueList, el)\n          if (tooltip) {\n            document.body.appendChild(tooltip)\n          }\n        }\n\n        highlightedCount++\n      })\n    } catch (error) {\n      console.error('[A11y Overlay] Error highlighting element:', error)\n    }\n  }\n}\n\n/**\n * Clear all highlights from the page\n */\nexport function clearHighlights(): void {\n  // Remove highlight classes\n  const highlighted = document.querySelectorAll(`.${HIGHLIGHT_CLASS}`)\n  highlighted.forEach((el) => {\n    el.classList.remove(\n      HIGHLIGHT_CLASS,\n      `${HIGHLIGHT_CLASS}--critical`,\n      `${HIGHLIGHT_CLASS}--serious`,\n      `${HIGHLIGHT_CLASS}--moderate`,\n      `${HIGHLIGHT_CLASS}--minor`,\n    )\n  })\n\n  // Remove tooltips and clear tracking\n  const tooltips = document.querySelectorAll(`.${TOOLTIP_CLASS}`)\n  tooltips.forEach((el) => el.remove())\n  activeTooltips.clear()\n  stopScrollListener()\n}\n"],"mappings":"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"}

package/dist/esm/react/A11yDevtools.d.ts

@@ -0,0 +1,5 @@
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/react';
+export interface A11yDevtoolsReactInit extends DevtoolsPanelProps {
+}
+declare const A11yDevtoolsPanel: (props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element, A11yDevtoolsPanelNoOp: (_props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+export { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp };

package/dist/esm/react/A11yDevtools.js

@@ -0,0 +1,8 @@
+import { A11yDevtoolsCore } from "../core/index.js";
+import { createReactPanel } from "@tanstack/devtools-utils/react";
+//#region src/react/A11yDevtools.ts
+var [A11yDevtoolsPanel, A11yDevtoolsPanelNoOp] = createReactPanel(A11yDevtoolsCore);
+//#endregion
+export { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp };
+
+//# sourceMappingURL=A11yDevtools.js.map

package/dist/esm/react/A11yDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yDevtools.js","names":[],"sources":["../../../src/react/A11yDevtools.ts"],"sourcesContent":["import { createReactPanel } from '@tanstack/devtools-utils/react'\nimport { A11yDevtoolsCore } from '../core'\n\n// type\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'\n\nexport interface A11yDevtoolsReactInit extends DevtoolsPanelProps {}\n\nconst [A11yDevtoolsPanel, A11yDevtoolsPanelNoOp] =\n  createReactPanel(A11yDevtoolsCore)\n\nexport { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp }\n"],"mappings":";;;AAQA,IAAM,CAAC,mBAAmB,yBACxB,iBAAiB,iBAAiB"}

package/dist/esm/react/index.d.ts

@@ -0,0 +1,8 @@
+export declare const A11yDevtoolsPanel: (props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+export declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export type { A11yDevtoolsReactInit } from './A11yDevtools.js';

package/dist/esm/react/index.js

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import { A11yDevtoolsPanel as A11yDevtoolsPanel$1, A11yDevtoolsPanelNoOp } from "./A11yDevtools.js";
+import { a11yDevtoolsNoOpPlugin, a11yDevtoolsPlugin as a11yDevtoolsPlugin$1 } from "./plugin.js";
+//#region src/react/index.ts
+var A11yDevtoolsPanel = process.env.NODE_ENV !== "development" ? A11yDevtoolsPanelNoOp : A11yDevtoolsPanel$1;
+var a11yDevtoolsPlugin = process.env.NODE_ENV !== "development" ? a11yDevtoolsNoOpPlugin : a11yDevtoolsPlugin$1;
+//#endregion
+export { A11yDevtoolsPanel, a11yDevtoolsPlugin };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './A11yDevtools'\nimport * as plugin from './plugin'\n\nexport const A11yDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.A11yDevtoolsPanelNoOp\n    : Devtools.A11yDevtoolsPanel\n\nexport const a11yDevtoolsPlugin =\n  process.env.NODE_ENV !== 'development'\n    ? plugin.a11yDevtoolsNoOpPlugin\n    : plugin.a11yDevtoolsPlugin\n\nexport type { A11yDevtoolsReactInit } from './A11yDevtools'\n"],"mappings":";;;;;AAKA,IAAA,oBAAA,QAAA,IAAA,aAAA,gBAAA,wBAAA;AAKA,IAAA,qBAAA,QAAA,IAAA,aAAA,gBAAA,yBAAA"}

package/dist/esm/react/plugin.d.ts

@@ -0,0 +1,12 @@
+declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, a11yDevtoolsNoOpPlugin: () => {
+    render: (_el: HTMLElement, _props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export { a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin };

package/dist/esm/react/plugin.js

@@ -0,0 +1,11 @@
+import { A11yDevtoolsPanel } from "./A11yDevtools.js";
+import { createReactPlugin } from "@tanstack/devtools-utils/react";
+//#region src/react/plugin.ts
+var [a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin] = createReactPlugin({
+	name: "TanStack A11y",
+	Component: A11yDevtoolsPanel
+});
+//#endregion
+export { a11yDevtoolsNoOpPlugin, a11yDevtoolsPlugin };
+
+//# sourceMappingURL=plugin.js.map

package/dist/esm/react/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../src/react/plugin.ts"],"sourcesContent":["import { createReactPlugin } from '@tanstack/devtools-utils/react'\nimport { A11yDevtoolsPanel } from './A11yDevtools'\n\nconst [a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin] = createReactPlugin({\n  name: 'TanStack A11y',\n  Component: A11yDevtoolsPanel,\n})\n\nexport { a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin }\n"],"mappings":";;;AAGA,IAAM,CAAC,oBAAoB,0BAA0B,kBAAkB;CACrE,MAAM;CACN,WAAW;CACZ,CAAC"}

package/dist/esm/react/production/A11yDevtools.d.ts

@@ -0,0 +1,5 @@
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/react';
+export interface A11yDevtoolsReactInit extends DevtoolsPanelProps {
+}
+declare const A11yDevtoolsPanel: (props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+export { A11yDevtoolsPanel };

package/dist/esm/react/production/A11yDevtools.js

@@ -0,0 +1,8 @@
+import { A11yDevtoolsCore } from "../../core/index.js";
+import { createReactPanel } from "@tanstack/devtools-utils/react";
+//#region src/react/production/A11yDevtools.ts
+var [A11yDevtoolsPanel] = createReactPanel(A11yDevtoolsCore);
+//#endregion
+export { A11yDevtoolsPanel };
+
+//# sourceMappingURL=A11yDevtools.js.map

package/dist/esm/react/production/A11yDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yDevtools.js","names":[],"sources":["../../../../src/react/production/A11yDevtools.ts"],"sourcesContent":["import { createReactPanel } from '@tanstack/devtools-utils/react'\nimport { A11yDevtoolsCore } from '../../core'\n\n// type\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'\n\nexport interface A11yDevtoolsReactInit extends DevtoolsPanelProps {}\n\nconst [A11yDevtoolsPanel] = createReactPanel(A11yDevtoolsCore)\n\nexport { A11yDevtoolsPanel }\n"],"mappings":";;;AAQA,IAAM,CAAC,qBAAqB,iBAAiB,iBAAiB"}

package/dist/esm/react/production/plugin.d.ts

@@ -0,0 +1,7 @@
+declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export { a11yDevtoolsPlugin };

package/dist/esm/react/production/plugin.js

@@ -0,0 +1,11 @@
+import { A11yDevtoolsPanel } from "./A11yDevtools.js";
+import { createReactPlugin } from "@tanstack/devtools-utils/react";
+//#region src/react/production/plugin.ts
+var [a11yDevtoolsPlugin] = createReactPlugin({
+	name: "TanStack A11y",
+	Component: A11yDevtoolsPanel
+});
+//#endregion
+export { a11yDevtoolsPlugin };
+
+//# sourceMappingURL=plugin.js.map

package/dist/esm/react/production/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../../src/react/production/plugin.ts"],"sourcesContent":["import { createReactPlugin } from '@tanstack/devtools-utils/react'\nimport { A11yDevtoolsPanel } from './A11yDevtools'\n\nconst [a11yDevtoolsPlugin] = createReactPlugin({\n  name: 'TanStack A11y',\n  Component: A11yDevtoolsPanel,\n})\n\nexport { a11yDevtoolsPlugin }\n"],"mappings":";;;AAGA,IAAM,CAAC,sBAAsB,kBAAkB;CAC7C,MAAM;CACN,WAAW;CACZ,CAAC"}

package/dist/esm/react/production.d.ts

@@ -0,0 +1,3 @@
+export { A11yDevtoolsPanel } from './production/A11yDevtools.js';
+export type { A11yDevtoolsReactInit } from './production/A11yDevtools.js';
+export { a11yDevtoolsPlugin } from './production/plugin.js';

package/dist/esm/react/production.js

@@ -0,0 +1,5 @@
+"use client";
+"use client";
+import { A11yDevtoolsPanel } from "./production/A11yDevtools.js";
+import { a11yDevtoolsPlugin } from "./production/plugin.js";
+export { A11yDevtoolsPanel, a11yDevtoolsPlugin };

package/dist/esm/solid/A11yDevtools.d.ts

@@ -0,0 +1,5 @@
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid';
+declare const A11yDevtoolsPanel: (props: DevtoolsPanelProps) => import("solid-js").JSX.Element, A11yDevtoolsPanelNoOp: (_props: DevtoolsPanelProps) => import("solid-js").JSX.Element;
+export interface A11yDevtoolsSolidInit extends DevtoolsPanelProps {
+}
+export { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp };

package/dist/esm/solid/A11yDevtools.js

@@ -0,0 +1,8 @@
+import { A11yDevtoolsCore } from "../core/index.js";
+import { createSolidPanel } from "@tanstack/devtools-utils/solid";
+//#region src/solid/A11yDevtools.ts
+var [A11yDevtoolsPanel, A11yDevtoolsPanelNoOp] = createSolidPanel(A11yDevtoolsCore);
+//#endregion
+export { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp };
+
+//# sourceMappingURL=A11yDevtools.js.map

package/dist/esm/solid/A11yDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yDevtools.js","names":[],"sources":["../../../src/solid/A11yDevtools.ts"],"sourcesContent":["import { createSolidPanel } from '@tanstack/devtools-utils/solid'\nimport { A11yDevtoolsCore } from '../core'\n\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'\n\nconst [A11yDevtoolsPanel, A11yDevtoolsPanelNoOp] =\n  createSolidPanel(A11yDevtoolsCore)\n\nexport interface A11yDevtoolsSolidInit extends DevtoolsPanelProps {}\n\nexport { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp }\n"],"mappings":";;;AAKA,IAAM,CAAC,mBAAmB,yBACxB,iBAAiB,iBAAiB"}

package/dist/esm/solid/index.d.ts

@@ -0,0 +1,8 @@
+export declare const A11yDevtools: (props: import('@tanstack/devtools-utils/solid').DevtoolsPanelProps) => import("solid-js").JSX.Element;
+export declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("solid-js").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export type { A11yDevtoolsSolidInit } from './A11yDevtools.js';

package/dist/esm/solid/index.js

@@ -0,0 +1,9 @@
+import { A11yDevtoolsPanel, A11yDevtoolsPanelNoOp } from "./A11yDevtools.js";
+import { a11yDevtoolsNoOpPlugin, a11yDevtoolsPlugin as a11yDevtoolsPlugin$1 } from "./plugin.js";
+//#region src/solid/index.ts
+var A11yDevtools = process.env.NODE_ENV !== "development" ? A11yDevtoolsPanelNoOp : A11yDevtoolsPanel;
+var a11yDevtoolsPlugin = process.env.NODE_ENV !== "development" ? a11yDevtoolsNoOpPlugin : a11yDevtoolsPlugin$1;
+//#endregion
+export { A11yDevtools, a11yDevtoolsPlugin };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/solid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/solid/index.ts"],"sourcesContent":["import * as Devtools from './A11yDevtools'\nimport * as plugin from './plugin'\n\nexport const A11yDevtools =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.A11yDevtoolsPanelNoOp\n    : Devtools.A11yDevtoolsPanel\n\nexport const a11yDevtoolsPlugin =\n  process.env.NODE_ENV !== 'development'\n    ? plugin.a11yDevtoolsNoOpPlugin\n    : plugin.a11yDevtoolsPlugin\n\nexport type { A11yDevtoolsSolidInit } from './A11yDevtools'\n"],"mappings":";;;AAGA,IAAa,eAAA,QAAA,IAAA,aACc,gBACrB,wBACA;AAEN,IAAa,qBAAA,QAAA,IAAA,aACc,gBACrB,yBACA"}

package/dist/esm/solid/plugin.d.ts

@@ -0,0 +1,12 @@
+declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("solid-js").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, a11yDevtoolsNoOpPlugin: () => {
+    render: (_el: HTMLElement, _props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("solid-js").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export { a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin };

package/dist/esm/solid/plugin.js

@@ -0,0 +1,11 @@
+import { A11yDevtoolsPanel } from "./A11yDevtools.js";
+import { createSolidPlugin } from "@tanstack/devtools-utils/solid";
+//#region src/solid/plugin.ts
+var [a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin] = createSolidPlugin({
+	name: "TanStack A11y",
+	Component: A11yDevtoolsPanel
+});
+//#endregion
+export { a11yDevtoolsNoOpPlugin, a11yDevtoolsPlugin };
+
+//# sourceMappingURL=plugin.js.map

package/dist/esm/solid/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../src/solid/plugin.ts"],"sourcesContent":["import { createSolidPlugin } from '@tanstack/devtools-utils/solid'\nimport { A11yDevtoolsPanel } from './A11yDevtools'\n\nconst [a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin] = createSolidPlugin({\n  name: 'TanStack A11y',\n  Component: A11yDevtoolsPanel,\n})\n\nexport { a11yDevtoolsPlugin, a11yDevtoolsNoOpPlugin }\n"],"mappings":";;;AAGA,IAAM,CAAC,oBAAoB,0BAA0B,kBAAkB;CACrE,MAAM;CACN,WAAW;CACZ,CAAC"}

package/dist/esm/solid/production/A11yDevtools.d.ts

@@ -0,0 +1,5 @@
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid';
+declare const A11yDevtoolsPanel: (props: DevtoolsPanelProps) => import("solid-js").JSX.Element;
+export interface A11yDevtoolsSolidInit extends DevtoolsPanelProps {
+}
+export { A11yDevtoolsPanel };

package/dist/esm/solid/production/A11yDevtools.js

@@ -0,0 +1,8 @@
+import { A11yDevtoolsCore } from "../../core/index.js";
+import { createSolidPanel } from "@tanstack/devtools-utils/solid";
+//#region src/solid/production/A11yDevtools.ts
+var [A11yDevtoolsPanel] = createSolidPanel(A11yDevtoolsCore);
+//#endregion
+export { A11yDevtoolsPanel };
+
+//# sourceMappingURL=A11yDevtools.js.map

package/dist/esm/solid/production/A11yDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yDevtools.js","names":[],"sources":["../../../../src/solid/production/A11yDevtools.ts"],"sourcesContent":["import { createSolidPanel } from '@tanstack/devtools-utils/solid'\nimport { A11yDevtoolsCore } from '../../core'\n\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'\n\nconst [A11yDevtoolsPanel] = createSolidPanel(A11yDevtoolsCore)\n\nexport interface A11yDevtoolsSolidInit extends DevtoolsPanelProps {}\n\nexport { A11yDevtoolsPanel }\n"],"mappings":";;;AAKA,IAAM,CAAC,qBAAqB,iBAAiB,iBAAiB"}

package/dist/esm/solid/production/plugin.d.ts

@@ -0,0 +1,7 @@
+declare const a11yDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, props: import('@tanstack/devtools').TanStackDevtoolsPluginProps) => import("solid-js").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export { a11yDevtoolsPlugin };

package/dist/esm/solid/production/plugin.js

@@ -0,0 +1,11 @@
+import { A11yDevtoolsPanel } from "./A11yDevtools.js";
+import { createSolidPlugin } from "@tanstack/devtools-utils/solid";
+//#region src/solid/production/plugin.ts
+var [a11yDevtoolsPlugin] = createSolidPlugin({
+	name: "TanStack A11y",
+	Component: A11yDevtoolsPanel
+});
+//#endregion
+export { a11yDevtoolsPlugin };
+
+//# sourceMappingURL=plugin.js.map

package/dist/esm/solid/production/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../../src/solid/production/plugin.ts"],"sourcesContent":["import { createSolidPlugin } from '@tanstack/devtools-utils/solid'\nimport { A11yDevtoolsPanel } from './A11yDevtools'\n\nconst [a11yDevtoolsPlugin] = createSolidPlugin({\n  name: 'TanStack A11y',\n  Component: A11yDevtoolsPanel,\n})\n\nexport { a11yDevtoolsPlugin }\n"],"mappings":";;;AAGA,IAAM,CAAC,sBAAsB,kBAAkB;CAC7C,MAAM;CACN,WAAW;CACZ,CAAC"}

package/dist/esm/solid/production.d.ts

@@ -0,0 +1,3 @@
+export { A11yDevtoolsPanel } from './A11yDevtools.js';
+export type { A11yDevtoolsSolidInit } from './production/A11yDevtools.js';
+export { a11yDevtoolsPlugin } from './production/plugin.js';

package/dist/esm/solid/production.js

@@ -0,0 +1,3 @@
+import { A11yDevtoolsPanel } from "./A11yDevtools.js";
+import { a11yDevtoolsPlugin } from "./production/plugin.js";
+export { A11yDevtoolsPanel, a11yDevtoolsPlugin };