chrometools-mcp 2.5.0 → 3.1.2

package/utils/ui-framework-detector.js

@@ -0,0 +1,392 @@
+/**
+ * UI Framework Detector
+ * Detects and extracts information from various UI component libraries
+ */
+
+/**
+ * Detect UI framework used by an element
+ * @param {HTMLElement} element - DOM element to analyze
+ * @returns {Object} Framework information
+ */
+function detectUIFramework(element) {
+  const classes = Array.from(element.classList || []);
+  const dataAttrs = Array.from(element.attributes || [])
+    .filter(attr => attr.name.startsWith('data-'))
+    .map(attr => attr.name);
+
+  // Material-UI (MUI) detection
+  if (classes.some(c => c.startsWith('Mui')) ||
+      classes.some(c => c.startsWith('MuiInput')) ||
+      classes.some(c => c.startsWith('MuiSelect')) ||
+      classes.some(c => c.startsWith('MuiButton'))) {
+    return {
+      name: 'mui',
+      version: detectMUIVersion(element),
+      component: detectMUIComponent(element, classes)
+    };
+  }
+
+  // Ant Design detection
+  if (classes.some(c => c.startsWith('ant-')) ||
+      dataAttrs.includes('data-antd')) {
+    return {
+      name: 'antd',
+      version: null, // Can be enhanced
+      component: detectAntDComponent(element, classes)
+    };
+  }
+
+  // Chakra UI detection
+  if (classes.some(c => c.startsWith('chakra-')) ||
+      dataAttrs.includes('data-chakra-component')) {
+    return {
+      name: 'chakra',
+      version: null,
+      component: element.getAttribute('data-chakra-component') || 'unknown'
+    };
+  }
+
+  // Bootstrap detection
+  if (classes.some(c => c.startsWith('form-')) ||
+      classes.some(c => c.startsWith('btn-')) ||
+      classes.includes('form-control') ||
+      classes.includes('form-select')) {
+    return {
+      name: 'bootstrap',
+      version: detectBootstrapVersion(element),
+      component: detectBootstrapComponent(element, classes)
+    };
+  }
+
+  // Vuetify detection
+  if (classes.some(c => c.startsWith('v-')) ||
+      dataAttrs.includes('data-v-')) {
+    return {
+      name: 'vuetify',
+      version: null,
+      component: detectVuetifyComponent(element, classes)
+    };
+  }
+
+  // Semantic UI detection
+  if (classes.includes('ui') &&
+      (classes.includes('input') || classes.includes('dropdown') || classes.includes('button'))) {
+    return {
+      name: 'semantic-ui',
+      version: null,
+      component: detectSemanticUIComponent(element, classes)
+    };
+  }
+
+  // Default: vanilla HTML
+  return {
+    name: 'vanilla',
+    version: null,
+    component: element.tagName.toLowerCase()
+  };
+}
+
+/**
+ * Detect MUI version
+ */
+function detectMUIVersion(element) {
+  // MUI v5 uses different class naming than v4
+  const classes = Array.from(element.classList || []);
+
+  // v5: MuiInputBase-root, MuiOutlinedInput-root
+  if (classes.some(c => c.match(/^Mui[A-Z][a-z]+Base-/))) {
+    return '5.x';
+  }
+
+  // v4: MuiInput-root, MuiSelect-root
+  if (classes.some(c => c.match(/^Mui[A-Z][a-z]+-root$/))) {
+    return '4.x';
+  }
+
+  return null;
+}
+
+/**
+ * Detect MUI component type
+ */
+function detectMUIComponent(element, classes) {
+  if (classes.some(c => c.includes('TextField'))) return 'TextField';
+  if (classes.some(c => c.includes('Select'))) return 'Select';
+  if (classes.some(c => c.includes('Autocomplete'))) return 'Autocomplete';
+  if (classes.some(c => c.includes('Button'))) return 'Button';
+  if (classes.some(c => c.includes('Checkbox'))) return 'Checkbox';
+  if (classes.some(c => c.includes('Radio'))) return 'Radio';
+  if (classes.some(c => c.includes('Switch'))) return 'Switch';
+  return 'unknown';
+}
+
+/**
+ * Detect Ant Design component type
+ */
+function detectAntDComponent(element, classes) {
+  if (classes.includes('ant-input')) return 'Input';
+  if (classes.includes('ant-select')) return 'Select';
+  if (classes.includes('ant-picker')) return 'DatePicker';
+  if (classes.includes('ant-btn')) return 'Button';
+  if (classes.includes('ant-checkbox')) return 'Checkbox';
+  if (classes.includes('ant-radio')) return 'Radio';
+  if (classes.includes('ant-switch')) return 'Switch';
+  return 'unknown';
+}
+
+/**
+ * Detect Bootstrap version
+ */
+function detectBootstrapVersion(element) {
+  // Check for Bootstrap 5 specific classes
+  const classes = Array.from(element.classList || []);
+  if (classes.includes('form-select')) return '5.x';
+
+  // Bootstrap 4 and earlier use 'custom-select'
+  if (classes.includes('custom-select')) return '4.x';
+
+  return null;
+}
+
+/**
+ * Detect Bootstrap component type
+ */
+function detectBootstrapComponent(element, classes) {
+  if (classes.includes('form-control')) {
+    if (element.tagName === 'SELECT') return 'Select';
+    if (element.tagName === 'TEXTAREA') return 'Textarea';
+    return 'Input';
+  }
+  if (classes.includes('form-select')) return 'Select';
+  if (classes.includes('form-check-input')) {
+    if (element.type === 'checkbox') return 'Checkbox';
+    if (element.type === 'radio') return 'Radio';
+  }
+  if (classes.some(c => c.startsWith('btn'))) return 'Button';
+  return 'unknown';
+}
+
+/**
+ * Detect Vuetify component type
+ */
+function detectVuetifyComponent(element, classes) {
+  if (classes.includes('v-text-field')) return 'TextField';
+  if (classes.includes('v-select')) return 'Select';
+  if (classes.includes('v-autocomplete')) return 'Autocomplete';
+  if (classes.includes('v-btn')) return 'Button';
+  if (classes.includes('v-checkbox')) return 'Checkbox';
+  if (classes.includes('v-radio')) return 'Radio';
+  if (classes.includes('v-switch')) return 'Switch';
+  return 'unknown';
+}
+
+/**
+ * Detect Semantic UI component type
+ */
+function detectSemanticUIComponent(element, classes) {
+  if (classes.includes('input')) return 'Input';
+  if (classes.includes('dropdown')) return 'Dropdown';
+  if (classes.includes('button')) return 'Button';
+  if (classes.includes('checkbox')) return 'Checkbox';
+  if (classes.includes('radio')) return 'Radio';
+  return 'unknown';
+}
+
+/**
+ * Extract options from a select/dropdown element
+ * Handles both native <select> and custom UI framework dropdowns
+ */
+function extractSelectOptions(element) {
+  const framework = detectUIFramework(element);
+
+  switch (framework.name) {
+    case 'vanilla':
+      return extractVanillaSelectOptions(element);
+
+    case 'mui':
+      return extractMUISelectOptions(element);
+
+    case 'antd':
+      return extractAntDSelectOptions(element);
+
+    case 'chakra':
+      return extractChakraSelectOptions(element);
+
+    case 'bootstrap':
+      return extractVanillaSelectOptions(element); // Bootstrap uses native select
+
+    case 'vuetify':
+      return extractVuetifySelectOptions(element);
+
+    case 'semantic-ui':
+      return extractSemanticUISelectOptions(element);
+
+    default:
+      return extractVanillaSelectOptions(element);
+  }
+}
+
+/**
+ * Extract options from vanilla HTML <select>
+ */
+function extractVanillaSelectOptions(element) {
+  if (element.tagName !== 'SELECT') return null;
+
+  const options = [];
+  let currentGroup = null;
+
+  Array.from(element.children).forEach((child, idx) => {
+    if (child.tagName === 'OPTGROUP') {
+      currentGroup = child.label;
+      Array.from(child.children).forEach((opt, subIdx) => {
+        if (opt.tagName === 'OPTION') {
+          options.push({
+            value: opt.value,
+            text: opt.textContent.trim(),
+            index: options.length,
+            selected: opt.selected,
+            disabled: opt.disabled,
+            group: currentGroup
+          });
+        }
+      });
+    } else if (child.tagName === 'OPTION') {
+      options.push({
+        value: child.value,
+        text: child.textContent.trim(),
+        index: idx,
+        selected: child.selected,
+        disabled: child.disabled,
+        group: null
+      });
+    }
+  });
+
+  return {
+    options,
+    selectedIndex: element.selectedIndex,
+    selectedValue: element.value,
+    selectedText: element.options[element.selectedIndex]?.textContent.trim() || null,
+    multiple: element.multiple
+  };
+}
+
+/**
+ * Extract options from MUI Select
+ */
+function extractMUISelectOptions(element) {
+  // MUI Select renders native select or custom menu
+  const nativeSelect = element.querySelector('select');
+  if (nativeSelect) {
+    return extractVanillaSelectOptions(nativeSelect);
+  }
+
+  // For custom MUI Select, options are in menu (not always rendered)
+  // We need to look for data attributes or aria-attributes
+  const selectedValue = element.getAttribute('aria-activedescendant') ||
+                       element.querySelector('input')?.value || '';
+
+  return {
+    options: [], // Options may not be in DOM until dropdown opens
+    selectedValue,
+    selectedText: element.textContent.trim(),
+    note: 'MUI Select options may require opening the dropdown to extract'
+  };
+}
+
+/**
+ * Extract options from Ant Design Select
+ */
+function extractAntDSelectOptions(element) {
+  // Ant Design Select stores value in hidden input
+  const input = element.querySelector('.ant-select-selection-item');
+  const selectedText = input?.textContent.trim() || '';
+
+  // Options are rendered in dropdown (may not be in DOM)
+  const dropdown = document.querySelector('.ant-select-dropdown:not(.ant-select-dropdown-hidden)');
+  const options = [];
+
+  if (dropdown) {
+    dropdown.querySelectorAll('.ant-select-item-option').forEach((opt, idx) => {
+      options.push({
+        value: opt.getAttribute('data-value') || opt.textContent.trim(),
+        text: opt.textContent.trim(),
+        index: idx,
+        selected: opt.classList.contains('ant-select-item-option-selected'),
+        disabled: opt.classList.contains('ant-select-item-option-disabled'),
+        group: null
+      });
+    });
+  }
+
+  return {
+    options,
+    selectedText,
+    note: 'Ant Design Select options may require opening the dropdown to extract'
+  };
+}
+
+/**
+ * Extract options from Chakra UI Select
+ */
+function extractChakraSelectOptions(element) {
+  // Chakra UI typically uses native select
+  const nativeSelect = element.querySelector('select');
+  if (nativeSelect) {
+    return extractVanillaSelectOptions(nativeSelect);
+  }
+
+  return {
+    options: [],
+    note: 'Chakra UI Select options need specific extraction logic'
+  };
+}
+
+/**
+ * Extract options from Vuetify Select
+ */
+function extractVuetifySelectOptions(element) {
+  // Vuetify stores selected value in data attributes or input
+  const input = element.querySelector('input');
+  const selectedText = input?.value || '';
+
+  // Options are in menu (may not be rendered)
+  return {
+    options: [],
+    selectedText,
+    note: 'Vuetify Select options may require opening the dropdown to extract'
+  };
+}
+
+/**
+ * Extract options from Semantic UI Dropdown
+ */
+function extractSemanticUISelectOptions(element) {
+  const options = [];
+
+  element.querySelectorAll('.item').forEach((item, idx) => {
+    options.push({
+      value: item.getAttribute('data-value') || item.textContent.trim(),
+      text: item.textContent.trim(),
+      index: idx,
+      selected: item.classList.contains('selected'),
+      disabled: item.classList.contains('disabled'),
+      group: null
+    });
+  });
+
+  const selectedText = element.querySelector('.text')?.textContent.trim() || '';
+
+  return {
+    options,
+    selectedText
+  };
+}
+
+// Export for use in page context
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    detectUIFramework,
+    extractSelectOptions
+  };
+}

package/RELEASE_NOTES_v2.5.0.md

@@ -1,109 +0,0 @@
-# Release v2.5.0 - Major Update: 4 New Tools + Critical Fixes
-
-## 🎉 New Tools (4)
-
-### 1. `selectOption` - Dropdown Selection
-Select options in HTML dropdown elements with intelligent priority-based selection.
-- **Parameters**: `selector`, `value`, `text`, or `index`
-- **Priority**: value → text → index
-- **React/Vue support**: Automatically triggers input/change events
-- Perfect for automated form filling
-
-### 2. `drag` - Mouse Drag Emulation
-Drag elements by mouse (click-hold-move-release) in any direction.
-- **8 directions**: up, down, left, right, + 4 diagonals
-- **Use cases**: Interactive maps, Gantt charts, SVG diagrams, canvas
-- **How it works**: Puppeteer's `page.mouse` API for real drag events
-- **NOT for**: Standard overflow scrollbars (use `scrollTo` instead)
-
-### 3. `scrollHorizontal` - Horizontal Scrolling
-Scroll elements horizontally for tables, carousels, and wide content.
-- **Directions**: left, right
-- **Amount**: Pixels or 'full' to scroll to end
-- **Behavior**: smooth or auto
-- Returns detailed scroll state
-
-### 4. `convertFigmaToCode` ⭐
-Convert Figma designs to React+Tailwind code.
-- **Frameworks**: React, React TypeScript, HTML
-- **Styling**: Tailwind CSS optimized
-- **Input**: Figma file key + node ID
-- **Output**: Clean, semantic component code with AI-generated instructions
-
-## 🔥 Critical Fixes
-
-### Fixed Tailwind CSS Selector Generation Bug
-**Impact**: ALL AI tools failed on Tailwind/styled-components apps with `SyntaxError: invalid selector`
-
-**Affected tools**:
-- ❌ `analyzePage` - couldn't read page state
-- ❌ `findElementsByText` - couldn't find elements
-- ❌ `smartFindElement` - couldn't locate elements
-- ❌ `getAllInteractiveElements` - couldn't list interactive elements
-
-**Solution**:
-- New `isTailwindClass()` function filters utility classes with `:`, `/`, `[]`
-- Smart priority: id → data-testid → aria-label → semantic classes
-- CSS.escape() for all selectors
-- **Result**: ✅ Unblocks testing of ALL modern apps (Tailwind, styled-components, CSS modules, Emotion)
-
-### Fixed `drag` Tool Implementation
-Previously used `scrollLeft`/`scrollTop` which only works with `overflow: auto/scroll` containers.
-
-**Now works with**:
-- ✅ Interactive maps (Google Maps, Leaflet, Mapbox)
-- ✅ Gantt charts and SVG diagrams
-- ✅ Canvas elements with pan/zoom
-- ✅ Custom drag handlers (React DnD, interact.js)
-
-### Fixed `analyzePage` SVG Crash
-Fixed `className.split is not a function` error when page contains SVG elements.
-- Now handles both HTML (string) and SVG (SVGAnimatedString) className types
-
-## 🔧 Improvements
-
-### Better AI Agent Behavior
-- Improved tool descriptions to prevent premature `executeScript` usage
-- `click`, `type`, `analyzePage` emphasized as PRIMARY tools
-- `executeScript` marked as ⚠️ LAST RESORT
-- New "Tool Usage Priority" section in README
-
-### Enhanced `analyzePage`
-- Now detects HTML select elements with all options
-- Returns: value, text, index, selected, disabled status
-- Enables smarter `selectOption` usage
-
-## 📊 Stats
-
-- **Total tools**: 44 (was 40)
-- **Files changed**: 9
-- **Lines added**: +957
-- **Lines removed**: -48
-
-## 🚀 Installation
-
-```bash
-npx chrometools-mcp
-```
-
-Or update in your MCP config:
-```json
-{
-  "mcpServers": {
-    "chrometools": {
-      "command": "npx",
-      "args": ["chrometools-mcp"]
-    }
-  }
-}
-```
-
-## 🙏 Contributors
-
-Special thanks to users who reported issues:
-- Tailwind CSS selector bug reporter
-- Gantt chart drag testing feedback
-
----
-
-**Full Changelog**: https://github.com/docentovich/chrometools-mcp/blob/main/CHANGELOG.md