workbench.glass.main.js · part 333

60 text occurrences from desktop/Cursor.app/Contents/Resources/app/out/vs/workbench/workbench.glass.main.js, part 333. Every entry preserves the shipped literal and its saved verdict or selection reason.

File contents and all parts · All files

(function() {
	'use strict';
	if (window.__cursorDevToolsInjected) return;
	window.__cursorDevToolsInjected = true;
	window.__cursorDevToolsSelectedElement = null;
})();

use strict

(function() {
	'use strict';

	// Prevent multiple injections
	if (window.__cursorBrowserOverlayInjected) return;
	window.__cursorBrowserOverlayInjected = true;

	// Only inject in top-level frame
	if (window !== window.top) return;

	// =============================================================================
	// Shared Overlay System
	// =============================================================================

	let selectionMode = false;
	let selectionFrozen = false;
	let currentSelectionType = null; // 'composer-chat'
	let cursorStyleOverride = null;
	let selectionCursor = null;
	let overlay = null;
	let overlayLabel = null;
	let elementSelectionListeners = null;

	// Expose selected element for CDP access
	window.__cursorDevToolsSelectedElement = null;

	// =============================================================================
	// Unique Element Identifier System
	// =============================================================================
	// Uses data attributes to reliably find elements regardless of class name changes
	const CURSOR_ELEMENT_ID_ATTR = 'data-cursor-element-id';
	let elementIdCounter = 0;

	// Get or assign a unique ID to an element
	function getOrAssignElementId(element) {
		if (!element || element.nodeType !== Node.ELEMENT_NODE) {
			return null;
		}
		let id = element.getAttribute(CURSOR_ELEMENT_ID_ATTR);
		if (!id) {
			id = 'cursor-el-' + (++elementIdCounter);
			element.setAttribute(CURSOR_ELEMENT_ID_ATTR, id);
		}
		return id;
	}

	// Find element by its unique ID (most reliable method)
	function getElementByUniqueId(uniqueId) {
		if (!uniqueId) return null;
		return document.querySelector('[' + CURSOR_ELEMENT_ID_ATTR + '="' + uniqueId + '"]');
	}
	let currentHighlightedElement = null;
	let highlightUpdateScheduled = false;
	let pointerOverSelectedElement = false;
	let hoverOverlay = null;
	let hoverOverlayLabel = null;

	// =============================================================================
	// Link Preview (status bar style URL preview on hover)
	// =============================================================================

	let linkPreviewElement = null;
	let linkPreviewTimeout = null;
	let currentTargetUrl = '';

	function createLinkPreview() {
		if (linkPreviewElement) return;
		linkPreviewElement = document.createElement('div');
		linkPreviewElement.style.cssText =
			'position: fixed;' +
			'bottom: 4px;' +
			'left: 4px;' +
			'max-width: 60%;' +
			'padding: 2px 8px;' +
			'background: rgba(30, 30, 30, 0.9);' +
			'color: rgba(255, 255, 255, 0.9);' +
			'font-size: 12px;' +
			'font-family: -apple-system, BlinkMacSystemFont, sans-serif;' +
			'border-radius: 4px;' +
			'overflow: hidden;' +
			'text-overflow: ellipsis;' +
			'white-space: nowrap;' +
			'z-index: 2147483646;' +
			'pointer-events: none;' +
			'opacity: 0;' +
			'transition: opacity 0.15s ease;';
		linkPreviewElement.setAttribute('data-cursor-link-preview', 'true');
		document.body.appendChild(linkPreviewElement);
	}

	function showLinkPreview(url) {
		if (!url) {
			hideLinkPreview();
			return;
		}
		currentTargetUrl = url;
		createLinkPreview();
		if (linkPreviewTimeout) clearTimeout(linkPreviewTimeout);
		linkPreviewTimeout = setTimeout(function() {
			if (currentTargetUrl === url && linkPreviewElement) {
				linkPreviewElement.textContent = url;
				linkPreviewElement.style.opacity = '1';
			}
		}, 400);
	}

	function hideLinkPreview() {
		currentTargetUrl = '';
		if (linkPreviewTimeout) {
			clearTimeout(linkPreviewTimeout);
			linkPreviewTimeout = null;
		}
		if (linkPreviewElement) {
			linkPreviewElement.style.opacity = '0';
		}
	}

	// =============================================================================
	// React DevTools Integration
	// =============================================================================

	function isLocalhost() {
		const hostname = window.location.hostname;
		return hostname === 'localhost' || hostname === '127.0.0.1';
	}

	function getReactComponentInfo(element) {
		if (!element || typeof element !== 'object') return null;

		try {
			const reactKey = Object.keys(element).find(key =>
				key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')
			);

			if (!reactKey) return null;

			const fiber = element[reactKey];
			if (!fiber) return null;

			let currentFiber = fiber;
			let componentName = null;
			let componentProps = null;

			while (currentFiber) {
				const type = currentFiber.type;
				const elementType = currentFiber.elementType;

				const getComponentNameFromType = (typeToCheck) => {
					if (!typeToCheck) return null;
					if (typeof typeToCheck === 'function') {
						return typeToCheck.displayName || typeToCheck.name || null;
					} else if (typeof typeToCheck === 'object' && typeToCheck !== null) {
						if (typeToCheck.$$typeof) {
							if (typeToCheck.render) {
								return typeToCheck.render.displayName || typeToCheck.render.name || 'ForwardRef';
							}
							if (typeToCheck.type) {
								return getComponentNameFromType(typeToCheck.type) || 'Memo';
							}
						}
					}
					return null;
				};

				const typeToCheck = elementType || type;

				if (typeToCheck && typeof typeToCheck !== 'string') {
					componentName = getComponentNameFromType(typeToCheck);

					if (!componentName && elementType && type && elementType !== type) {
						componentName = getComponentNameFromType(type);
					}

					if (currentFiber.memoizedProps) {
						componentProps = currentFiber.memoizedProps;
					} else if (currentFiber.pendingProps) {
						componentProps = currentFiber.pendingProps;
					}

					if (componentName) break;
				}

				currentFiber = currentFiber.return;
			}

			if (!componentName) return null;

			const isMeaningfulName = componentName.length > 1 && /^[A-Z]/.test(componentName);
			if (!isLocalhost() && !isMeaningfulName) return null;

			// Safely serialize a value with depth limit and circular reference handling
			const serializeValue = (val, depth = 0, seen = new WeakSet()) => {
				const maxDepth = 6;
				const maxArrayLength = 50;
				const maxObjectKeys = 50;

				if (val === null || val === undefined) {
					return val;
				}
				if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {
					return val;
				}
				if (typeof val === 'function') {
					try {
						const fnSource = val.toString();
						const maxLength = 500;
						return { __type: 'function', source: fnSource.length > maxLength ? fnSource.slice(0, maxLength) + '...' : fnSource };
					} catch {
						return { __type: 'function', source: '[Function]' };
					}
				}
				// Check for DOM nodes - don't try to serialize these
				if (val instanceof Node || val instanceof Window || val instanceof Event) {
					return '[DOM Node]';
				}
				// Check for React elements - serialize them specially
				if (val && typeof val === 'object' && val.$$typeof) {
					return '[React Element]';
				}
				if (depth >= maxDepth) {
					if (Array.isArray(val)) {
						return '[Array: ' + val.length + ' items]';
					}
					return '[Object]';
				}
				// Handle circular references
				if (typeof val === 'object') {
					if (seen.has(val)) {
						return '[Circular]';
					}
					seen.add(val);
				}
				if (Array.isArray(val)) {
					const result = [];
					const len = Math.min(val.length, maxArrayLength);
					for (let i = 0; i < len; i++) {
						result.push(serializeValue(val[i], depth + 1, seen));
					}
					if (val.length > maxArrayLength) {
						result.push('... ' + (val.length - maxArrayLength) + ' more items');
					}
					return result;
				}
				if (typeof val === 'object') {
					const result = {};
					const keys = Object.keys(val);
					const len = Math.min(keys.length, maxObjectKeys);
					for (let i = 0; i < len; i++) {
						const key = keys[i];
						try {
							result[key] = serializeValue(val[key], depth + 1, seen);
						} catch {
							result[key] = '[Error reading property]';
						}
					}
					if (keys.length > maxObjectKeys) {
						result['__truncated'] = keys.length - maxObjectKeys + ' more keys';
					}
					return result;
				}
				return String(val);
			};

			const serializedProps = componentProps ? Object.keys(componentProps).reduce((acc, key) => {
				try {
					acc[key] = serializeValue(componentProps[key]);
				} catch {
					acc[key] = '[Error serializing]';
				}
				return acc;
			}, {}) : null;

			return {
				name: componentName,
				props: serializedProps
			};
		} catch (e) {
			return null;
		}
	}

	function collectCustomPropertyNamesFromRules(rules, names, propertyRuleValues) {
		if (!rules) {
			return;
		}
		for (let i = 0; i < rules.length; i++) {
			const rule = rules[i];
			if (!rule) {
				continue;
			}
			// Handle @property rules (registered custom properties) - used by Tailwind v4
			// CSSPropertyRule has type 15 and a .name property containing the custom property name
			if (rule.type === 15 && rule.name && typeof rule.name === 'string') {
				const propName = rule.name;
				if (propName.charCodeAt(0) === 45 && propName.charCodeAt(1) === 45) {
					names.add(propName);
					// Store the initial value from @property rule as a fallback
					if (propertyRuleValues && rule.initialValue) {
						propertyRuleValues.set(propName, rule.initialValue);
					}
				}
			}
			const style = rule.style;
			if (style && style.length > 0) {
				for (let j = 0; j < style.length; j++) {
					const prop = style[j];
					if (!prop || prop.charCodeAt(0) !== 45 || prop.charCodeAt(1) !== 45) {
						continue;
					}
					names.add(prop);
				}
			}
			if (rule.cssRules) {
				collectCustomPropertyNamesFromRules(rule.cssRules, names, propertyRuleValues);
			}
		}
	}

	// Cache for CSS custom property names - they rarely change during a page session
	let cachedPropertyNames = null;
	let cachedPropertyRuleValues = null;
	let cachedPropertyNamesTimestamp = 0;
	const PROPERTY_NAMES_CACHE_TTL = 5000; // 5 seconds cache

	function getCustomPropertyNamesFromStyleSheets() {
		// Return cached result if still valid
		const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
		if (cachedPropertyNames && (now - cachedPropertyNamesTimestamp) < PROPERTY_NAMES_CACHE_TTL) {
			return { names: cachedPropertyNames, propertyRuleValues: cachedPropertyRuleValues };
		}

		const names = new Set();
		const propertyRuleValues = new Map();
		const styleSheets = Array.from(document.styleSheets || []);
		for (const sheet of styleSheets) {
			if (!sheet) {
				continue;
			}
			try {
				const rules = sheet.cssRules;
				if (rules) {
					collectCustomPropertyNamesFromRules(rules, names, propertyRuleValues);
				}
			} catch {
				// Ignore cross-origin stylesheets
			}
		}
		const inlineStyle = document.documentElement?.style;
		if (inlineStyle && inlineStyle.length > 0) {
			for (let i = 0; i < inlineStyle.length; i++) {
				const prop = inlineStyle[i];
				if (!prop || prop.charCodeAt(0) !== 45 || prop.charCodeAt(1) !== 45) {
					continue;
				}
				names.add(prop);
			}
		}

		// Cache the result
		cachedPropertyNames = names;
		cachedPropertyRuleValues = propertyRuleValues;
		cachedPropertyNamesTimestamp = now;
		return { names, propertyRuleValues };
	}

	// =============================================================================
	// Style Extraction
	// =============================================================================

	// Detect modern color formats that need conversion
	function isModernColorFormat(value) {
		if (!value || typeof value !== 'string') return false;
		const normalized = value.toLowerCase().trim();
		return (
			normalized.startsWith('oklab(') ||
			normalized.startsWith('oklch(') ||
			normalized.startsWith('lab(') ||
			normalized.startsWith('lch(') ||
			normalized.startsWith('color(')
		);
	}

	// Convert any CSS color to hex using Canvas API
	// This handles all color formats the browser supports (including oklab, oklch, etc.)
	let colorConversionCanvas = null;
	let colorConversionCtx = null;

	function convertColorToHex(colorValue) {
		if (!colorValue || typeof colorValue !== 'string') {
			return null;
		}

		try {
			// Create canvas lazily
			if (!colorConversionCanvas) {
				colorConversionCanvas = document.createElement('canvas');
				colorConversionCanvas.width = 1;
				colorConversionCanvas.height = 1;
				colorConversionCtx = colorConversionCanvas.getContext('2d', { willReadFrequently: true });
			}

			// Clear and set the color
			colorConversionCtx.clearRect(0, 0, 1, 1);
			colorConversionCtx.fillStyle = colorValue;
			colorConversionCtx.fillRect(0, 0, 1, 1);

			// Read back the pixel data
			const imageData = colorConversionCtx.getImageData(0, 0, 1, 1);
			const [r, g, b, a] = imageData.data;

			// Convert to hex
			const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('').toUpperCase();
			const alpha = Math.round((a / 255) * 100);

			return { hex, alpha };
		} catch {
			return null;
		}
	}

	// Color properties that might use CSS variables
	const colorProperties = [
		'color', 'background-color', 'border-color',
		'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
		'outline-color', 'text-decoration-color', 'fill', 'stroke'
	];

	function getAllComputedStyles(element) {
		// Validate that element is actually a DOM Element
		if (!element || !(element instanceof Element)) {
			console.error('getAllComputedStyles: Invalid element parameter', element);
			return {};
		}

		const computed = window.getComputedStyle(element);
		const styles = {};

		for (let i = 0; i < computed.length; i++) {
			const prop = computed[i];
			const value = computed.getPropertyValue(prop);
			const priority = computed.getPropertyPriority(prop);

			styles[prop] = {
				value: value,
				priority: priority || null
			};
		}

		const inlineStyles = {};
		if (element.style && element.style.length > 0) {
			for (let i = 0; i < element.style.length; i++) {
				const prop = element.style[i];
				inlineStyles[prop] = {
					value: element.style.getPropertyValue(prop),
					priority: element.style.getPropertyPriority(prop) || null
				};
			}
		}

		// Get matched declarations from stylesheets (preserves var() syntax)
		const matchedDeclarations = getMatchedStyleDeclarations(element);

		// Convert modern color formats (oklab, oklch, etc.) to hex for color matching
		const convertedColors = {};
		for (const prop of colorProperties) {
			const value = computed.getPropertyValue(prop);
			if (value && isModernColorFormat(value)) {
				const converted = convertColorToHex(value);
				if (converted) {
					convertedColors[prop] = converted;
				}
			}
		}

		return {
			computed: styles,
			inline: inlineStyles,
			effective: getEffectiveStyles(computed),
			// Original declarations from CSS rules that contain var() syntax
			matched: matchedDeclarations,
			// Converted hex values for modern color formats (oklab, oklch, etc.)
			convertedColors: Object.keys(convertedColors).length > 0 ? convertedColors : undefined
		};
	}

	function getInlineStyles(element) {
		// Validate that element is actually a DOM Element
		if (!element || !(element instanceof Element)) {
			console.error('getInlineStyles: Invalid element parameter', element);
			return {};
		}

		const inlineStyles = {};
		if (element.style && element.style.length > 0) {
			for (let i = 0; i < element.style.length; i++) {
				const prop = element.style[i];
				inlineStyles[prop] = {
					value: element.style.getPropertyValue(prop),
					priority: element.style.getPropertyPriority(prop) || null
				};
			}
		}
		return inlineStyles;
	}

	function getEffectiveStyles(computed) {
		const effective = {};
		const importantProps = [
			'display', 'position', 'top', 'right', 'bottom', 'left',
			'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
			'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
			'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
			'box-sizing', 'overflow', 'overflow-x', 'overflow-y',
			'flex', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items',
			'align-content', 'flex-grow', 'flex-shrink', 'flex-basis',
			'grid-template-columns', 'grid-template-rows', 'grid-gap', 'gap',
			'font-family', 'font-size', 'font-weight', 'font-style',
			'line-height', 'text-align', 'text-decoration', 'text-transform',
			'letter-spacing', 'word-spacing', 'white-space',
			'color', 'background-color', 'background', 'background-image',
			'background-position', 'background-size', 'background-repeat',
			'opacity',
			'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
			'border-radius', 'border-color', 'border-style', 'border-width',
			'box-shadow', 'text-shadow', 'transform', 'transition', 'animation',
			'z-index', 'cursor', 'visibility', 'float', 'clear'
		];

		importantProps.forEach(prop => {
			const value = computed.getPropertyValue(prop);
			if (value && value !== 'none' && value !== 'normal' && value !== 'auto' && value !== '0px' && value !== '') {
				effective[prop] = value;
			}
		});

		return effective;
	}

	// Cache for matched style declarations per element
	const matchedDeclarationsCache = new WeakMap();
	const MATCHED_DECLARATIONS_CACHE_TTL = 2000; // 2 second cache per element

	// Color properties that we need to check for var() references (for token detection)
	const COLOR_PROPERTIES_FOR_MATCHING = [
		'color', 'background-color', 'background',
		'border-color', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
		'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
		'outline-color', 'text-decoration-color', 'fill', 'stroke'
	];

	// Get matched style declarations from stylesheets that preserve var() syntax
	// OPTIMIZED: Only extracts color-related properties with var() references for token detection
	function getMatchedStyleDeclarations(element) {
		if (!element || !(element instanceof Element)) {
			return {};
		}

		// Check cache first
		const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
		const classKey = typeof element.className === 'string' ? element.className : '';
		const cached = matchedDeclarationsCache.get(element);
		if (cached && cached.classKey === classKey && (now - cached.timestamp) < MATCHED_DECLARATIONS_CACHE_TTL) {
			return cached.declarations;
		}

		const declarations = {};
		const styleSheets = Array.from(document.styleSheets || []);

		for (const sheet of styleSheets) {
			if (!sheet) continue;
			try {
				const rules = sheet.cssRules;
				if (rules) {
					collectMatchedDeclarations(rules, element, declarations);
				}
			} catch {
				// Ignore cross-origin stylesheets
			}
		}

		// Cache the result
		matchedDeclarationsCache.set(element, {
			declarations,
			timestamp: now,
			classKey
		});

		return declarations;
	}

	// Recursively collect declarations from CSS rules that match the element
	// OPTIMIZED: Only checks color properties with var() references
	function collectMatchedDeclarations(rules, element, declarations) {
		for (let i = 0; i < rules.length; i++) {
			const rule = rules[i];

			// Handle @media, @supports, @layer rules - recurse into them
			if (rule.cssRules) {
				// For conditional rules, check if they apply
				if (rule.conditionText !== undefined) {
					// CSSMediaRule or CSSSupportsRule
					try {
						const matches = rule.type === CSSRule.MEDIA_RULE
							? window.matchMedia(rule.conditionText).matches
							: CSS.supports(rule.conditionText);
						if (!matches) continue;
					} catch {
						continue;
					}
				}
				collectMatchedDeclarations(rule.cssRules, element, declarations);
				continue;
			}

			// Handle regular style rules
			if (rule.type !== CSSRule.STYLE_RULE) continue;

			try {
				// Check if this rule matches the element
				if (!element.matches(rule.selectorText)) continue;

				// OPTIMIZATION: Only check color properties with var() references
				const style = rule.style;
				for (const prop of COLOR_PROPERTIES_FOR_MATCHING) {
					const value = style.getPropertyValue(prop);
					if (value && value.includes('var(')) {
						declarations[prop] = value;
					}
				}
			} catch {
				// Selector may be invalid or element may not support matches()
			}
		}
	}

	// =============================================================================
	// Element Path
	// =============================================================================

	function getElementPath(element) {
		const path = [];
		let el = element;
		while (el && el !== document.body) {
			let selector = el.tagName.toLowerCase();
			if (el.id) {
				selector += '#' + el.id;
			} else if (el.className && typeof el.className === 'string') {
				const classes = el.className.trim().split(/s+/).filter(c => c);
				if (classes.length > 0) {
					selector += '.' + classes.join('.');
				}
			}

			// Add index if there are multiple siblings with the same selector
			if (el.parentElement && !el.id) { // Only add index if element doesn't have an ID
				const siblings = Array.from(el.parentElement.children);
				const sameSelectorSiblings = siblings.filter(sibling => {
					// Must have same tag
					if (sibling.tagName !== el.tagName) return false;

					// Compare classes
					const siblingClasses = sibling.className && typeof sibling.className === 'string'
						? sibling.className.trim().split(/s+/).filter(c => c).sort().join('.')
						: '';
					const elClasses = el.className && typeof el.className === 'string'
						? el.className.trim().split(/s+/).filter(c => c).sort().join('.')
						: '';

					return siblingClasses === elClasses;
				});

				if (sameSelectorSiblings.length > 1) {
					const index = sameSelectorSiblings.indexOf(el);
					selector += '[' + index + ']';
				}
			}

			path.unshift(selector);
			el = el.parentElement;
		}
		return path.join(' > ');
	}

	/**
	 * Parse a selector part into its components.
	 * Handles complex class names with special characters (Tailwind, CSS-in-JS, etc.)
	 * Format: tagName#id.class1.class2[index]
	 */
	function parseSelectorPart(part) {
		if (!part) return null;

		let remaining = part;
		let tagName = '';
		let id = null;
		let classes = [];
		let elementIndex = -1;

		// Extract trailing index [n] first - we only care about our own index suffix
		// which is always at the very end of the selector.
		// We must distinguish element indices from Tailwind arbitrary values like w-[20], h-[100].
		// Element indices are NEVER preceded by a hyphen, but Tailwind arbitrary values are.
		const trailingIndexMatch = remaining.match(/[(d+)]$/);
		if (trailingIndexMatch) {
			// Check the character before the bracket - if it's a hyphen, this is a Tailwind
			// arbitrary value (e.g., w-[20]), not an element index
			const matchStart = remaining.length - trailingIndexMatch[0].length;
			const charBefore = matchStart > 0 ? remaining[matchStart - 1] : '';
			if (charBefore !== '-') {
				elementIndex = parseInt(trailingIndexMatch[1], 10);
				remaining = remaining.slice(0, -trailingIndexMatch[0].length);
			}
		}

		// Extract tag name (must come first, alphanumeric + hyphens only)
		const tagMatch = remaining.match(/^([a-zA-Z][a-zA-Z0-9-]*)/);
		if (tagMatch) {
			tagName = tagMatch[1];
			remaining = remaining.slice(tagMatch[0].length);
		} else {
			// No valid tag name found
			return null;
		}

		// Extract ID if present (#id)
		if (remaining.startsWith('#')) {
			// ID can contain special chars but typically ends at . or end of string
			const idMatch = remaining.match(/^#([^.]+)/);
			if (idMatch) {
				id = idMatch[1];
				remaining = remaining.slice(idMatch[0].length);
			}
		}

		// Extract classes - everything remaining should be classes
		// Classes are separated by dots, but dots can appear inside class names (rare)
		// We'll use a smarter approach: split by dots that are followed by valid class start chars
		if (remaining.startsWith('.')) {
			remaining = remaining.slice(1); // Remove leading dot

			// Split classes - but handle special chars in class names
			// Tailwind classes like hover:bg-blue-500, w-[100px], mt-1/2
			// We need to be careful not to split on dots inside brackets
			const rawClasses = [];
			let currentClass = '';
			let bracketDepth = 0;

			for (let i = 0; i < remaining.length; i++) {
				const char = remaining[i];
				if (char === '[') {
					bracketDepth++;
					currentClass += char;
				} else if (char === ']') {
					bracketDepth--;
					currentClass += char;
				} else if (char === '.' && bracketDepth === 0) {
					if (currentClass) {
						rawClasses.push(currentClass);
					}
					currentClass = '';
				} else {
					currentClass += char;
				}
			}
			if (currentClass) {
				rawClasses.push(currentClass);
			}

			classes = rawClasses.filter(c => c);
		}

		return { tagName: tagName.toUpperCase(), id, classes, elementIndex };
	}

	function getElementFromPath(path) {
		if (!path) return null;

		// First, check if this looks like a unique ID (most reliable method)
		if (path.startsWith('cursor-el-')) {
			const element = getElementByUniqueId(path);
			if (element) {
				return element;
			}
			// If unique ID lookup fails, fall through to path-based lookup
		}

		// Fall back to path-based lookup
		// Split the path into parts
		const parts = path.split(' > ');
		if (parts.length === 0) return null;

		let current = document.body;

		// Skip body if it's the first part
		let startIndex = 0;
		if (parts[0] === 'body') {
			startIndex = 1;
		}

		// Navigate through each part of the path
		for (let i = startIndex; i < parts.length; i++) {
			const part = parts[i];
			const parsed = parseSelectorPart(part);

			if (!parsed) {
				return null;
			}

			const { tagName, id, classes, elementIndex } = parsed;

			// Find matching children
			const matchingChildren = [];
			for (let child of current.children) {
				if (child.tagName !== tagName) continue;

				if (id && child.id !== id) continue;

				if (classes.length > 0) {
					// Check if child has all required classes
					const hasAllClasses = classes.every(cls => {
						// Direct classList check
						if (child.classList.contains(cls)) return true;

						// For classes with special chars that classList might not handle,
						// check if the class appears in className string
						if (child.className && typeof child.className === 'string') {
							const childClasses = child.className.trim().split(/s+/);
							return childClasses.includes(cls);
						}
						return false;
					});
					if (!hasAllClasses) continue;
				}

				matchingChildren.push(child);
			}

			let found = null;
			if (elementIndex >= 0 && elementIndex < matchingChildren.length) {
				found = matchingChildren[elementIndex];
			} else if (matchingChildren.length > 0) {
				found = matchingChildren[0];
			}

			if (!found) {
				return null;
			}
			current = found;
		}

		return current;
	}

	// Patterns to match Tailwind color utility classes
	// Note: Tailwind escapes special chars in selectors, e.g. .text-[#ff0000]
	// Color names can have multiple hyphens like dark-blue-400
	// Double backslashes needed for template literal escaping
	const TAILWIND_COLOR_CLASS_PATTERNS = [
		// Text colors: text-red-500, text-dark-blue-400, text-[#ff0000], text-black, text-white
		/^\.(text-([a-z]+(?:-[a-z]+)*-\d+|black|white|\\?\[[^\]]+\\?\]))$/,
		// Background colors: bg-red-500, bg-[#ff0000]
		/^\.(bg-([a-z]+(?:-[a-z]+)*-\d+|black|white|\\?\[[^\]]+\\?\]))$/,
		// Border colors: border-red-500, border-[#ff0000]
		/^\.(border-([a-z]+(?:-[a-z]+)*-\d+|black|white|\\?\[[^\]]+\\?\]))$/,
		// Ring colors: ring-red-500
		/^\.(ring-([a-z]+(?:-[a-z]+)*-\d+|black|white|transparent|\\?\[[^\]]+\\?\]))$/,
		// Fill/stroke colors: fill-red-500, stroke-red-500
		/^\.(fill-([a-z]+(?:-[a-z]+)*-\d+|black|white|\\?\[[^\]]+\\?\]))$/,
		/^\.(stroke-([a-z]+(?:-[a-z]+)*-\d+|black|white|\\?\[[^\]]+\\?\]))$/,
	];

	// Map of CSS property to the actual color property in Tailwind compiled CSS
	const COLOR_PROPERTY_MAP = {
		'text-': 'color',
		'bg-': 'background-color',
		'border-': 'border-color',
		'ring-': '--tw-ring-color',
		'fill-': 'fill',
		'stroke-': 'stroke',
	};

	// Extract color from a Tailwind utility rule
	function extractColorFromTailwindRule(style, prefix) {
		const cssProperty = COLOR_PROPERTY_MAP[prefix];
		if (!cssProperty) return null;

		let colorValue = style.getPropertyValue(cssProperty);
		if (!colorValue) return null;

		colorValue = colorValue.trim();

		// Handle Tailwind's opacity variable pattern: rgb(R G B / var(--tw-X-opacity))
		// Extract just the color part (double backslashes for template literal escaping)
		const rgbMatch = colorValue.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
		if (rgbMatch) {
			const [, r, g, b] = rgbMatch;
			return 'rgb(' + r + ', ' + g + ', ' + b + ')';
		}

		if (colorValue && !colorValue.includes('var(')) {
			return colorValue;
		}

		return null;
	}

	// Collect Tailwind color tokens from stylesheet rules
	function collectTailwindColorTokens() {
		const tokens = [];
		const seen = new Set();
		const styleSheets = Array.from(document.styleSheets || []);

		for (const sheet of styleSheets) {
			if (!sheet) continue;
			try {
				const rules = sheet.cssRules || sheet.rules;
				if (!rules) continue;

				for (let i = 0; i < rules.length; i++) {
					const rule = rules[i];
					if (!rule || rule.type !== 1) continue; // Only STYLE_RULE

					const selector = rule.selectorText;
					if (!selector) continue;

					for (const pattern of TAILWIND_COLOR_CLASS_PATTERNS) {
						if (!pattern.test(selector)) continue;

						const className = selector.slice(1);
						if (seen.has(className)) continue;

						let prefix = null;
						for (const p of Object.keys(COLOR_PROPERTY_MAP)) {
							if (className.startsWith(p)) {
								prefix = p;
								break;
							}
						}
						if (!prefix) continue;

						const colorValue = extractColorFromTailwindRule(rule.style, prefix);
						if (!colorValue) continue;

						const converted = convertColorToHex(colorValue);
						if (!converted) continue;

						seen.add(className);
						tokens.push({
							name: className,
							value: colorValue,
							convertedColor: converted,
							isTailwindToken: true,
						});
					}
				}
			} catch {
				// Ignore cross-origin stylesheets
			}
		}

		return tokens;
	}

	function collectCssVariables(targetElement) {
		const results = [];
		const seen = new Set();
		const { names: propertyNames, propertyRuleValues } = getCustomPropertyNamesFromStyleSheets();

		// Fall back to computed style enumeration if no property names were discovered.
		if (propertyNames.size === 0) {
			try {
				const rootFallback = window.getComputedStyle(document.documentElement);
				for (let i = 0; i < rootFallback.length; i++) {
					const property = rootFallback[i];
					if (property && property.charCodeAt(0) === 45 && property.charCodeAt(1) === 45) {
						propertyNames.add(property);
					}
				}
				if (targetElement) {
					const targetFallback = window.getComputedStyle(targetElement);
					for (let i = 0; i < targetFallback.length; i++) {
						const property = targetFallback[i];
						if (property && property.charCodeAt(0) === 45 && property.charCodeAt(1) === 45) {
							propertyNames.add(property);
						}
					}
				}
			} catch {
				// ignore
			}
		}

		const rootStyle = (() => {
			try {
				return window.getComputedStyle(document.documentElement);
			} catch {
				return null;
			}
		})();
		const targetStyle = (() => {
			if (!targetElement) {
				return null;
			}
			try {
				return window.getComputedStyle(targetElement);
			} catch {
				return null;
			}
		})();

		const addToken = (property, value) => {
			if (!value) {
				return false;
			}
			const trimmed = value.trim();
			if (!trimmed || seen.has(property)) {
				return false;
			}
			seen.add(property);
			const entry = {
				name: property,
				value: trimmed,
			};
			// Convert modern color formats to hex for color matching
			if (isModernColorFormat(trimmed)) {
				const converted = convertColorToHex(trimmed);
				if (converted) {
					entry.convertedColor = converted;
				}
			}
			results.push(entry);
			return true;
		};

		for (const property of propertyNames) {
			let added = false;
			if (rootStyle) {
				added = addToken(property, rootStyle.getPropertyValue(property));
			}
			if (!added && targetStyle) {
				added = addToken(property, targetStyle.getPropertyValue(property));
			}
			// Fallback to @property initial value if computed styles didn't have it
			if (!added && propertyRuleValues && propertyRuleValues.has(property)) {
				addToken(property, propertyRuleValues.get(property));
			}
		}

		// Also collect Tailwind color tokens from utility classes
		const tailwindTokens = collectTailwindColorTokens();
		for (const token of tailwindTokens) {
			if (!seen.has(token.name)) {
				seen.add(token.name);
				results.push(token);
			}
		}

		return results;
	}

	const genericFontFamilyTokens = new Set([
		'serif',
		'sans-serif',
		'system-ui',
		'monospace',
		'cursive',
		'fantasy',
		'ui-rounded',
		'ui-serif',
		'ui-sans-serif',
		'ui-monospace',
		'emoji',
		'math',
		'fangsong',
		'inherit',
		'initial',
		'unset',
		'revert',
		'revert-layer'
	]);

	function stripFallbackSuffix(value) {
		if (!value || typeof value !== 'string') {
			return '';
		}
		return value.replace(/s+fallback$/i, '').trim();
	}

	function normalizeFontToken(value) {
		if (!value || typeof value !== 'string') {
			return '';
		}
		const unquoted = value.replace(/['"]/g, '').trim();
		return stripFallbackSuffix(unquoted);
	}

	function extractFontTokens(value) {
		if (!value || typeof value !== 'string') {
			return [];
		}
		return value
			.split(',')
			.map((token) => normalizeFontToken(token))
			.filter((token) => {
				if (!token) {
					return false;
				}
				const lowercase = token.toLowerCase();
				if (genericFontFamilyTokens.has(lowercase)) {
					return false;
				}
				if (lowercase.includes('var(')) {
					return false;
				}
				return true;
			});
	}

	function collectFontFamiliesFromRules(rules, addFonts) {
		if (!rules) {
			return;
		}
		for (let i = 0; i < rules.length; i++) {
			const rule = rules[i];
			if (!rule) {
				continue;
			}
			const isFontFaceRule =
				(typeof CSSRule !== 'undefined' && rule.type === CSSRule.FONT_FACE_RULE) ||
				(rule.constructor && rule.constructor.name === 'CSSFontFaceRule');
			if (isFontFaceRule && rule.style) {
				const fontFamilyValue =
					rule.style.getPropertyValue('font-family') || rule.style.fontFamily;
				addFonts(fontFamilyValue);
			}
			if (rule.cssRules) {
				collectFontFamiliesFromRules(rule.cssRules, addFonts);
			}
		}
	}

	function collectAvailableFontFamilies(targetElement) {
		const fontMap = new Map();

		const addFontsFromValue = (value) => {
			if (!value) {
				return;
			}
			const tokens = extractFontTokens(value);
			for (const token of tokens) {
				const normalizedKeySource = stripFallbackSuffix(token);
				if (!normalizedKeySource) {
					continue;
				}
				const key = normalizedKeySource.toLowerCase();
				if (!fontMap.has(key)) {
					fontMap.set(key, token);
				}
			}
		};

		const rootElement = document.documentElement;
		if (rootElement) {
			if (rootElement.style && rootElement.style.fontFamily) {
				addFontsFromValue(rootElement.style.fontFamily);
			}
			try {
				const rootComputed = window.getComputedStyle(rootElement);
				if (rootComputed && rootComputed.fontFamily) {
					addFontsFromValue(rootComputed.fontFamily);
				}
			} catch {
				// ignore errors from getComputedStyle
			}
		}

		if (targetElement) {
			if (targetElement.style && targetElement.style.fontFamily) {
				addFontsFromValue(targetElement.style.fontFamily);
			}
			try {
				const targetComputed = window.getComputedStyle(targetElement);
				if (targetComputed && targetComputed.fontFamily) {
					addFontsFromValue(targetComputed.fontFamily);
				}
			} catch {
				// ignore errors from getComputedStyle
			}
		}

		const styleSheets = Array.from(document.styleSheets || []);
		for (const sheet of styleSheets) {
			if (!sheet) {
				continue;
			}
			let rules = null;
			try {
				rules = sheet.cssRules;
			} catch {
				// Ignore cross-origin stylesheets
			}
			if (rules) {
				collectFontFamiliesFromRules(rules, addFontsFromValue);
			}
		}

		const fontSet = document.fonts;
		if (fontSet && typeof fontSet.forEach === 'function') {
			try {
				fontSet.forEach((fontFace) => {
					if (fontFace && typeof fontFace.family === 'string') {
						addFontsFromValue(fontFace.family);
					}
				});
			} catch {
				// Ignore errors from FontFaceSet iteration
			}
		}

		return Array.from(fontMap.values());
	}

	// =============================================================================
	// Full DOM Tree Building
	// =============================================================================

	function buildDOMTree(element, selectedElement, maxDepth = 50, currentDepth = 0) {
		if (!element || currentDepth > maxDepth) {
			return null;
		}

		// Skip text nodes and other non-element nodes
		if (element.nodeType !== Node.ELEMENT_NODE) {
			return null;
		}

		// Build selector for this element
		let selector = element.tagName.toLowerCase();
		if (element.id) {
			selector += '#' + element.id;
		} else if (element.className && typeof element.className === 'string') {
			const classes = element.className.trim().split(/s+/).filter(c => c);
			if (classes.length > 0) {
				selector += '.' + classes[0]; // Just use first class for readability
			}
		}

		// Get React component info
		const reactInfo = getReactComponentInfo(element);

		// Get the full unique path for this element (fallback)
		const uniquePath = getElementPath(element);

		// Assign a unique ID to this element for reliable lookup
		const uniqueId = getOrAssignElementId(element);

		// Build the node
		// Note: className can be SVGAnimatedString for SVG elements, convert to string
		const classNameStr = typeof element.className === 'string' ? element.className : (element.className && element.className.baseVal) || null;
		const node = {
			selector: selector,
			tagName: element.tagName.toLowerCase(),
			id: element.id || null,
			className: classNameStr,
			isSelected: element === selectedElement,
			reactComponent: reactInfo ? {
				name: reactInfo.name,
				props: reactInfo.props
			} : null,
			children: [],
			fullPath: uniquePath, // Store the full unique path (fallback)
			uniqueId: uniqueId // Store the unique ID for reliable lookup
		};

		// Add all children
		for (const child of Array.from(element.children)) {
			const childNode = buildDOMTree(child, selectedElement, maxDepth, currentDepth + 1);
			if (childNode) {
				node.children.push(childNode);
			}
		}

		return node;
	}

	function getRootDOMTree(selectedElement) {
		// Start from document.body or a reasonable root
		let root = document.body;

		// For React apps, try to find the root element
		const reactRoot = document.getElementById('root') || document.querySelector('[id*="root"]');
		if (reactRoot && reactRoot.contains(selectedElement)) {
			root = reactRoot;
		}

		// Build the tree
		return buildDOMTree(root, selectedElement);
	}

	// =============================================================================
	// Cursor Creation
	// =============================================================================

	function createSelectionCursor() {
		const svgNS = 'http://www.w3.org/2000/svg';
		const cursor = document.createElementNS(svgNS, 'svg');
		cursor.setAttribute('width', '16');
		cursor.setAttribute('height', '16');
		cursor.setAttribute('viewBox', '0 0 16 16');
		cursor.setAttribute('fill', 'none');
		cursor.setAttribute('data-cursor-overlay', 'true');
		cursor.setAttribute('aria-hidden', 'true');
		cursor.setAttribute('focusable', 'false');
		cursor.style.position = 'fixed';
		cursor.style.pointerEvents = 'none';
		cursor.style.zIndex = '2147483646';
		cursor.style.transform = 'translate(-50%, -50%)';
		cursor.style.left = '-1000px';
		cursor.style.top = '-1000px';

		const title = document.createElementNS(svgNS, 'title');
		title.textContent = 'Cursor overlay';
		cursor.appendChild(title);

		const gClip = document.createElementNS(svgNS, 'g');
		gClip.setAttribute('clip-path', 'url(#clip0_cursor_overlay)');

		const gFilter = document.createElementNS(svgNS, 'g');
		gFilter.setAttribute('filter', 'url(#filter0_cursor_overlay)');

		const path = document.createElementNS(svgNS, 'path');
		path.setAttribute('d', 'M1.68066 2.14282C1.5253 1.49746 2.16954 0.975576 2.75195 1.21118L2.86816 1.26782L3.11035 1.41333L12.958 7.27954L13.2031 7.42505C13.8128 7.78856 13.682 8.70779 12.9951 8.88696L12.7197 8.95825L8.28223 10.1155L6.16895 13.9592L6.02148 14.2288C5.66933 14.869 4.71301 14.741 4.54199 14.0305L4.4707 13.7317L1.74707 2.41724L1.68066 2.14282Z');
		path.setAttribute('fill', 'black');
		path.setAttribute('stroke', 'white');

		gFilter.appendChild(path);
		gClip.appendChild(gFilter);

		const defs = document.createElementNS(svgNS, 'defs');
		const filter = document.createElementNS(svgNS, 'filter');
		filter.setAttribute('id', 'filter0_cursor_overlay');
		filter.setAttribute('x', '-1.51042');
		filter.setAttribute('y', '-1.34839');
		filter.setAttribute('width', '18.2708');
		filter.setAttribute('height', '19.8255');
		filter.setAttribute('filterUnits', 'userSpaceOnUse');
		filter.setAttribute('color-interpolation-filters', 'sRGB');

		const feFlood = document.createElementNS(svgNS, 'feFlood');
		feFlood.setAttribute('flood-opacity', '0');
		feFlood.setAttribute('result', 'BackgroundImageFix');
		filter.appendChild(feFlood);

		const feColorMatrix1 = document.createElementNS(svgNS, 'feColorMatrix');
		feColorMatrix1.setAttribute('in', 'SourceAlpha');
		feColorMatrix1.setAttribute('type', 'matrix');
		feColorMatrix1.setAttribute('values', '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0');
		feColorMatrix1.setAttribute('result', 'hardAlpha');
		filter.appendChild(feColorMatrix1);

		const feOffset = document.createElementNS(svgNS, 'feOffset');
		feOffset.setAttribute('dy', '0.666667');
		filter.appendChild(feOffset);

		const feGaussianBlur = document.createElementNS(svgNS, 'feGaussianBlur');
		feGaussianBlur.setAttribute('stdDeviation', '1.33333');
		filter.appendChild(feGaussianBlur);

		const feComposite = document.createElementNS(svgNS, 'feComposite');
		feComposite.setAttribute('in2', 'hardAlpha');
		feComposite.setAttribute('operator', 'out');
		filter.appendChild(feComposite);

		const feColorMatrix2 = document.createElementNS(svgNS, 'feColorMatrix');
		feColorMatrix2.setAttribute('type', 'matrix');
		feColorMatrix2.setAttribute('values', '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0');
		filter.appendChild(feColorMatrix2);

		const feBlend1 = document.createElementNS(svgNS, 'feBlend');
		feBlend1.setAttribute('mode', 'normal');
		feBlend1.setAttribute('in2', 'BackgroundImageFix');
		feBlend1.setAttribute('result', 'effect1_dropShadow_cursor_overlay');
		filter.appendChild(feBlend1);

		const feBlend2 = document.createElementNS(svgNS, 'feBlend');
		feBlend2.setAttribute('mode', 'normal');
		feBlend2.setAttribute('in', 'SourceGraphic');
		feBlend2.setAttribute('in2', 'effect1_dropShadow_cursor_overlay');
		feBlend2.setAttribute('result', 'shape');
		filter.appendChild(feBlend2);

		defs.appendChild(filter);

		const clipPath = document.createElementNS(svgNS, 'clipPath');
		clipPath.setAttribute('id', 'clip0_cursor_overlay');
		const rect = document.createElementNS(svgNS, 'rect');
		rect.setAttribute('width', '16');
		rect.setAttribute('height', '16');
		rect.setAttribute('fill', 'white');
		clipPath.appendChild(rect);
		defs.appendChild(clipPath);

		cursor.appendChild(gClip);
		cursor.appendChild(defs);

		return cursor;
	}

	// =============================================================================
	// Toast Notifications
	// =============================================================================

	function showToast(message) {
		try {
			const toast = document.createElement('div');
			toast.textContent = message;
			toast.style.position = 'fixed';
			toast.style.bottom = '16px';
			toast.style.right = '16px';
			toast.style.background = 'rgba(0, 0, 0, 0.85)';
			toast.style.color = 'rgba(255, 255, 255, 0.95)';
			toast.style.padding = '6px 10px';
			toast.style.borderRadius = '3px';
			toast.style.fontSize = '12px';
			toast.style.fontFamily = 'system-ui, -apple-system, sans-serif';
			toast.style.fontWeight = '400';
			toast.style.zIndex = '2147483647';
			toast.style.pointerEvents = 'none';
			toast.style.opacity = '0';
			toast.style.transition = 'opacity 150ms ease';

			document.body.appendChild(toast);

			requestAnimationFrame(() => {
				toast.style.opacity = '1';
			});

			setTimeout(() => {
				toast.style.opacity = '0';
				setTimeout(() => {
					if (toast.parentNode) {
						toast.parentNode.removeChild(toast);
					}
				}, 150);
			}, 2000);
		} catch (e) {
			// Silently fail
		}
	}

	// =============================================================================
	// Selection Mode Management
	// =============================================================================

	function isRectVisible(rect) {
		const viewportWidth = window.innerWidth || (document.documentElement ? document.documentElement.clientWidth : 0);
		const viewportHeight = window.innerHeight || (document.documentElement ? document.documentElement.clientHeight : 0);

		if (!viewportWidth || !viewportHeight) {
			return true;
		}

		if (rect.width === 0 && rect.height === 0) {
			return false;
		}

		const fullyAbove = rect.bottom <= 0;
		const fullyBelow = rect.top >= viewportHeight;
		const fullyLeft = rect.right <= 0;
		const fullyRight = rect.left >= viewportWidth;

		return !(fullyAbove || fullyBelow || fullyLeft || fullyRight);
	}

	function getActiveHighlightElement() {
		if (currentHighlightedElement && currentHighlightedElement.isConnected) {
			return currentHighlightedElement;
		}
		return null;
	}

	function scheduleHighlightUpdate() {
		if (!selectionMode || highlightUpdateScheduled) {
			return;
		}

		const targetElement = getActiveHighlightElement();
		if (!targetElement) {
			return;
		}

		highlightUpdateScheduled = true;
		const raf = window.requestAnimationFrame || function(callback) {
			return setTimeout(callback, 16);
		};

		raf(() => {
			highlightUpdateScheduled = false;
			if (!selectionMode) {
				return;
			}
			const activeElement = getActiveHighlightElement();
			if (activeElement) {
				updateHighlight(activeElement);
			}
		});
	}

	function updateHighlight(element) {
		if (!element) {
			return;
		}

		currentHighlightedElement = element;

		if (typeof element.isConnected !== 'undefined') {
			if (!element.isConnected) {
				updateOverlayDisplay('none');
				return;
			}
		} else if (!document.documentElement || !document.documentElement.contains(element)) {
			updateOverlayDisplay('none');
			return;
		}

		// Create overlay elements if they don't exist
		if (!overlay) {
			overlay = document.createElement('div');
			overlay.style.cssText = 'position:fixed;border:2px solid #3a96dd;pointer-events:none;z-index:2147483647;';
			document.body.appendChild(overlay);
		}

		if (!overlayLabel) {
			overlayLabel = document.createElement('div');
			overlayLabel.style.cssText = 'position:fixed;background:#3a96dd;color:white;padding:2px 6px;font-size:11px;font-family:system-ui,-apple-system,sans-serif;font-weight:500;border-radius:2px;pointer-events:none;z-index:2147483648;white-space:nowrap;';
			document.body.appendChild(overlayLabel);
		}

		const rect = element.getBoundingClientRect();

		if (!isRectVisible(rect)) {
			updateOverlayDisplay('none');
			return;
		}

		// Always ensure overlay is visible when updateHighlight is called
		updateOverlayDisplay('block');
		overlay.style.top = rect.top + 'px';
		overlay.style.left = rect.left + 'px';
		overlay.style.width = rect.width + 'px';
		overlay.style.height = rect.height + 'px';

		// Update label
		const label = element.tagName.toLowerCase() +
			(element.id ? '#' + element.id : '') +
			(element.className && typeof element.className === 'string' ?
				'.' + element.className.split(' ').filter(c => c).join('.') : '');
		overlayLabel.textContent = label;
		overlayLabel.style.top = Math.max(0, rect.top - 26) + 'px';
		overlayLabel.style.left = rect.left + 'px';
	}

	function setPointerOverSelectedElement(isOverSelected) {
		pointerOverSelectedElement = !!isOverSelected;
	}

	function updatePointerOverSelectedElement(_target) {
		setPointerOverSelectedElement(false);
	}

	function shouldHideHighlight() {
		return false;
	}

	function updateOverlayDisplay(displayValue = 'block') {
		if (!overlay) {
			return;
		}
		if (shouldHideHighlight()) {
			overlay.style.display = 'none';
			if (overlayLabel) {
				overlayLabel.style.display = 'none';
			}
			hideHoverOverlay();
			return;
		}
		overlay.style.display = displayValue;
		if (overlayLabel) {
			overlayLabel.style.display = displayValue;
		}
	}

	function ensureHoverOverlay() {
		if (!hoverOverlay) {
			hoverOverlay = document.createElement('div');
			hoverOverlay.style.cssText = 'position:fixed;border:1px dashed #5eb2f6;pointer-events:none;z-index:2147483646;';
			hoverOverlay.style.display = 'none';
			document.body.appendChild(hoverOverlay);
		}
		if (!hoverOverlayLabel) {
			hoverOverlayLabel = document.createElement('div');
			hoverOverlayLabel.style.cssText = 'position:fixed;background:rgba(62,150,221,0.9);color:white;padding:2px 6px;font-size:11px;font-family:system-ui,-apple-system,sans-serif;font-weight:500;border-radius:2px;pointer-events:none;z-index:2147483647;white-space:nowrap;';
			hoverOverlayLabel.style.display = 'none';
			document.body.appendChild(hoverOverlayLabel);
		}
	}

	function hideHoverOverlay() {
		if (hoverOverlay) {
			hoverOverlay.style.display = 'none';
		}
		if (hoverOverlayLabel) {
			hoverOverlayLabel.style.display = 'none';
		}
	}

	function updateHoverOverlay(_element) {
		hideHoverOverlay();
	}

	const scrollUpdateOptions = { passive: true, capture: true };
	document.addEventListener('scroll', scheduleHighlightUpdate, scrollUpdateOptions);
	window.addEventListener('scroll', scheduleHighlightUpdate, { passive: true });
	window.addEventListener('resize', scheduleHighlightUpdate);

	function enableElementSelection(type) {
		if (elementSelectionListeners) {
			return;
		}

		selectionMode = true;
		// Always use composer-chat selection behavior.
		currentSelectionType = 'composer-chat';
		selectionFrozen = false;
		setPointerOverSelectedElement(false);
		hideHoverOverlay();

		document.body.style.cursor = 'none';

		if (!cursorStyleOverride) {
			cursorStyleOverride = document.createElement('style');
			cursorStyleOverride.textContent = '* { cursor: none !important; }';
			document.head.appendChild(cursorStyleOverride);
		}

		if (!selectionCursor) {
			selectionCursor = createSelectionCursor();
			document.body.appendChild(selectionCursor);
		}

		if (!overlay) {
			overlay = document.createElement('div');
			overlay.style.cssText = 'position:fixed;border:2px solid #3a96dd;pointer-events:none;z-index:2147483647;';
			document.body.appendChild(overlay);

			overlayLabel = document.createElement('div');
			overlayLabel.style.cssText = 'position:fixed;background:#3a96dd;color:white;padding:2px 6px;font-size:11px;font-family:system-ui,-apple-system,sans-serif;font-weight:500;border-radius:2px;pointer-events:none;z-index:2147483648;white-space:nowrap;';
			document.body.appendChild(overlayLabel);
		}

		const mousemoveListener = (e) => {
			if (!selectionMode) return;

			if (selectionCursor && !selectionFrozen) {
				selectionCursor.style.left = e.clientX + 'px';
				selectionCursor.style.top = e.clientY + 'px';
			}

			const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
			const hoverCandidate = elementAtPoint &&
				elementAtPoint !== overlay &&
				elementAtPoint !== overlayLabel &&
				elementAtPoint !== selectionCursor &&
				elementAtPoint !== hoverOverlay &&
				elementAtPoint !== hoverOverlayLabel
				? elementAtPoint
				: null;

			updatePointerOverSelectedElement(hoverCandidate || null);

			hideHoverOverlay();

			// Update overlay if not frozen
			if (!selectionFrozen && overlay && overlayLabel) {
				const element = hoverCandidate;
				if (element) {
					const rect = element.getBoundingClientRect();
					updateOverlayDisplay('');
					overlay.style.left = rect.left + 'px';
					overlay.style.top = rect.top + 'px';
					overlay.style.width = rect.width + 'px';
					overlay.style.height = rect.height + 'px';

					// Try to get React component info
					const reactInfo = isLocalhost() ? getReactComponentInfo(element) : null;
					let labelText = element.tagName.toLowerCase();
					if (reactInfo && reactInfo.name) {
						labelText = reactInfo.name + ' · ' + element.tagName.toLowerCase();
					}

					if (overlayLabel) {
						overlayLabel.textContent = labelText;
					}

					const labelTop = rect.top > 20 ? rect.top - 20 : rect.top + 2;
					if (overlayLabel) {
						overlayLabel.style.left = rect.left + 'px';
						overlayLabel.style.top = labelTop + 'px';
					}
				} else {
					updateOverlayDisplay('none');
				}
			}
		};

		const clickListener = (e) => {
			if (!selectionMode) return;
			// DOM events cross isolated worlds. Only a real user click may select.
			if (!e.isTrusted) return;

			// Allow clicks on special toast elements
			if (e.target && e.target.closest && e.target.closest('[data-cursor-toast]')) {
				return;
			}

			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();

			// Multi-select is always enabled - keep selection mode active after each click
			const isMultiSelect = true;

			// Use elementFromPoint to get the actual visible element at click position.
			// This ensures we select the topmost child element, not a parent that might
			// have captured the event through propagation.
			const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
			const element = elementAtPoint &&
				elementAtPoint !== overlay &&
				elementAtPoint !== overlayLabel &&
				elementAtPoint !== selectionCursor &&
				elementAtPoint !== hoverOverlay &&
				elementAtPoint !== hoverOverlayLabel
				? elementAtPoint
				: e.target;

			if (!element) return;

			const rect = element.getBoundingClientRect();
			const computedStyle = window.getComputedStyle(element);

			// Build element info
			// Note: className can be SVGAnimatedString for SVG elements
			const elementClassName = typeof element.className === 'string' ? element.className : (element.className && element.className.baseVal) || '';
			const elementData = {
				tagName: element.tagName,
				id: element.id || '',
				uniqueId: getOrAssignElementId(element),  // Stable ID for reliable undo/redo targeting
				className: elementClassName,
				innerText: element.innerText ? element.innerText.substring(0, 200) : '',
				innerHTML: element.innerHTML || '',  // Full HTML, not truncated
				path: getElementPath(element),
				attributes: Array.from(element.attributes || []).map(a => ({
					name: a.name,
					value: a.value
				})),
				rect: {
					top: rect.top,
					left: rect.left,
					width: rect.width,
					height: rect.height
				},
				styles: {
					color: computedStyle.color,
					backgroundColor: computedStyle.backgroundColor,
					fontSize: computedStyle.fontSize,
					fontFamily: computedStyle.fontFamily,
					display: computedStyle.display,
					position: computedStyle.position
				},
				keepSelectionActive: isMultiSelect,
				shiftKey: isMultiSelect
			};

			// Add React component info if available
			const reactInfo = getReactComponentInfo(element);
			if (reactInfo) {
				elementData.reactComponent = {
					name: reactInfo.name,
					props: reactInfo.props
				};
			}

			// Send element selected event
			if (window.cursorBrowser) {
				window.cursorBrowser.send('element-selected', elementData);
			}

			const elementDesc = reactInfo && reactInfo.name
				? reactInfo.name
				: (element.id ? `<${element.tagName.toLowerCase()}#${element.id}>` : `<${element.tagName.toLowerCase()}>`);
			showToast(`Element ${elementDesc} added to chat`);

			// Exit selection mode if not multi-select
			if (!isMultiSelect) {
				disableElementSelection();
				window.cursorBrowser.send('element-selection-complete', {});
			}
		};

		const blockPointerEvent = (e) => {
			if (!selectionMode) return;

			// Allow clicks on special toast elements
			if (e.target && e.target.closest && e.target.closest('[data-cursor-toast]')) {
				return;
			}

			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();
			return false;
		};

		document.addEventListener('mousemove', mousemoveListener);
		document.addEventListener('click', clickListener, true);

		// Add additional event listeners to block interactions
		document.addEventListener('mousedown', blockPointerEvent, true);
		document.addEventListener('mouseup', blockPointerEvent, true);
		document.addEventListener('pointerdown', blockPointerEvent, true);
		document.addEventListener('pointerup', blockPointerEvent, true);
		document.addEventListener('touchstart', blockPointerEvent, true);
		document.addEventListener('touchend', blockPointerEvent, true);

		elementSelectionListeners = {
			mousemove: mousemoveListener,
			click: clickListener,
			mousedown: blockPointerEvent,
			mouseup: blockPointerEvent,
			pointerdown: blockPointerEvent,
			pointerup: blockPointerEvent,
			touchstart: blockPointerEvent,
			touchend: blockPointerEvent
		};
	}

	function disableElementSelection() {
		selectionMode = false;
		selectionFrozen = false;
		setPointerOverSelectedElement(false);
		hideHoverOverlay();
		currentSelectionType = null;
		window.__cursorDevToolsSelectedElement = null;
		currentHighlightedElement = null;
		highlightUpdateScheduled = false;
		document.body.style.cursor = '';

		if (cursorStyleOverride) {
			cursorStyleOverride.remove();
			cursorStyleOverride = null;
		}

		if (selectionCursor) {
			selectionCursor.remove();
			selectionCursor = null;
		}

		if (overlay) {
			overlay.remove();
			overlay = null;
		}

		if (overlayLabel) {
			overlayLabel.remove();
			overlayLabel = null;
		}

		if (elementSelectionListeners) {
			const { mousemove, click, mousedown, mouseup, pointerdown, pointerup, touchstart, touchend } = elementSelectionListeners;
			document.removeEventListener('mousemove', mousemove);
			document.removeEventListener('click', click, true);
			document.removeEventListener('mousedown', mousedown, true);
			document.removeEventListener('mouseup', mouseup, true);
			document.removeEventListener('pointerdown', pointerdown, true);
			document.removeEventListener('pointerup', pointerup, true);
			document.removeEventListener('touchstart', touchstart, true);
			document.removeEventListener('touchend', touchend, true);
			elementSelectionListeners = null;
		}
	}

	// =============================================================================
	// Message Handling
	// =============================================================================

	function handleOverlayCommand(data) {
		if (!data || !data.type) {
			return;
		}
		if (data.type === 'enable-element-selection') {
			const selectionType = data.selectionType || 'composer-chat';
			if (!selectionMode || currentSelectionType !== selectionType) {
				enableElementSelection(selectionType);
			}
		} else if (data.type === 'disable-element-selection') {
			disableElementSelection();
		} else if (data.type === 'freeze-element-selection') {
			selectionFrozen = true;
			if (selectionCursor) {
				selectionCursor.style.display = 'none';
			}
		} else if (data.type === 'unfreeze-element-selection') {
			selectionFrozen = false;
			if (selectionCursor) {
				selectionCursor.style.display = '';
			}
			hideHoverOverlay();
		} else if (data.type === 'update-target-url') {
			var url = data.url || '';
			if (url) {
				showLinkPreview(url);
			} else {
				hideLinkPreview();
			}
		}
	}
	window.__cursorOverlayCommand = handleOverlayCommand;

	// =============================================================================
	// Keyboard Shortcuts
	// =============================================================================

	document.addEventListener('keydown', (e) => {
		if (e.key === 'Escape' && selectionMode) {
			e.preventDefault();
			e.stopPropagation();
			handleOverlayCommand({ type: 'disable-element-selection' });
			return;
		}

	}, true);

	// =============================================================================
	// Cleanup
	// =============================================================================

	window.addEventListener('beforeunload', () => {
		disableElementSelection();
	});

})();

(function() {
	if (window.__cursorPlaceholderInjected) return;
	window.__cursorPlaceholderInjected = true;

	var style = document.createElement('style');
	style.textContent = `
		* { margin: 0; padding: 0; box-sizing: border-box; }
		body {
			background: ${nG(t.background)};
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			-webkit-font-smoothing: antialiased;
			user-select: none;
		}
		.browser-welcome-screen {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: ${nG(t.background)};
		}
		.browser-welcome-icon {
			color: ${nG(t.descriptionForeground)};
			opacity: 0.6;
			margin-bottom: 24px;
		}
		.browser-welcome-title {
			font-size: 14px;
			font-weight: 500;
			color: ${nG(t.foreground)};
			margin-bottom: 2px;
			max-width: 300px;
		}
		.browser-welcome-subtitle {
			font-size: 12px;
			color: ${nG(t.descriptionForeground)};
			max-width: 300px;
			text-align: center;
		}
	`;
	document.head.appendChild(style);
	document.body.innerHTML = `
		<div class="browser-welcome-screen">
			<div class="browser-welcome-icon">${Dnl}</div>
			<div class="browser-welcome-title">Browser</div>
			<div class="browser-welcome-subtitle">Enter a URL above, or instruct the Agent to navigate and use the browser</div>
		</div>
	`;
})()

This site can't be reached

Restart Browser

Connection Failed

Connection was refused. ${SCi(e)}

Restart Browser

Connection Failed

Restart Browser

Connection Failed

		<span class="browser-error-details-toggle-group">
			<span class="browser-error-details-separator">·</span>
			<button class="browser-error-details-toggle">Show Details</button>
		</span>
	

		<div class="browser-error-details-box" style="display: none;">
			<div class="browser-error-details-content">
				<div class="browser-error-details-label">${SCi(e.errorDetails)}</div>
				<button class="browser-error-copy-button" title="Copy error details">
					<span class="copy-icon">${eQm}</span>
					<span class="check-icon" style="display:none">${tQm}</span>
				</button>
			</div>
		</div>
	

(function() {
	if (window.__cursorPlaceholderInjected) return;
	window.__cursorPlaceholderInjected = true;

	var style = document.createElement('style');
	style.textContent = `
		* { margin: 0; padding: 0; box-sizing: border-box; }
		body {
			background: ${nG(t.background)};
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			-webkit-font-smoothing: antialiased;
		}
		.browser-error-overlay {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding-top: 120px;
			background: ${nG(t.background)};
		}
		.browser-error-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
			gap: 8px;
			max-width: 520px;
			width: 90%;
		}
		.browser-error-icon {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: ${nG(t.foreground)};
			opacity: 0.4;
			margin-bottom: 8px;
		}
		.browser-error-icon svg {
			width: 32px;
			height: 32px;
		}
		.browser-error-title {
			font-size: 16px;
			opacity: 0.8;
			color: ${nG(t.foreground)};
			margin: 0;
		}
		.browser-error-subtitle {
			font-size: 13px;
			line-height: 1.6;
			color: ${nG(t.textSecondary)};
			max-width: 480px;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: 0 2px;
		}
		.browser-error-details-toggle-group {
			display: inline-flex;
			align-items: baseline;
			gap: 6px;
		}
		.browser-error-details-separator {
			color: ${nG(t.textSecondary)};
			opacity: 0.5;
		}
		.browser-error-details-toggle {
			padding: 0;
			background: transparent;
			border: none;
			color: ${nG(t.textSecondary)};
			font-size: 13px;
			cursor: pointer;
			font-family: inherit;
			transition: opacity 0.15s ease;
			outline: none;
		}
		.browser-error-details-toggle:focus-visible {
			outline: 1px solid ${nG(t.foreground)};
			outline-offset: -1px;
		}
		.browser-error-details-toggle:hover { opacity: 0.7; }
		.browser-error-details-box {
			width: 100%;
			max-width: 480px;
			background: color-mix(in srgb, ${nG(t.inputBackground)} 40%, transparent);
			border: 1px solid color-mix(in srgb, ${nG(t.strokeSecondary)} 40%, transparent);
			border-radius: 6px;
			padding: 6px 8px;
			font-family: monospace;
			margin-top: 4px;
			line-height: 1;
			user-select: text;
		}
		.browser-error-details-content {
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.browser-error-details-label {
			flex: 1;
			min-width: 0;
			font-size: 11px;
			color: ${nG(t.textSecondary)};
			text-align: left;
			word-break: break-word;
		}
		.browser-error-copy-button {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 24px;
			width: 24px;
			height: 24px;
			padding: 0;
			background: transparent;
			border: none;
			border-radius: 3px;
			color: ${nG(t.foreground)};
			opacity: 0.5;
			cursor: pointer;
			transition: opacity 0.15s ease, background-color 0.15s ease;
			flex-shrink: 0;
		}
		.browser-error-copy-button:hover {
			opacity: 1;
			background: ${nG(t.buttonHoverBackground)};
		}
		.browser-error-copy-button .copy-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 14px;
			height: 14px;
		}
		.browser-error-copy-button .check-icon {
			font-size: 12px;
			line-height: 1;
		}
		.browser-error-restart-button {
			padding: 4px 8px;
			background: transparent;
			color: ${nG(t.foreground)};
			border: 1px solid ${nG(t.strokeSecondary)};
			border-radius: 4px;
			cursor: pointer;
			font-size: 12px;
			font-family: inherit;
			margin-top: 4px;
		}
		.browser-error-restart-button:hover {
			background: ${nG(t.buttonHoverBackground)};
		}
	`;
	document.head.appendChild(style);
	document.body.innerHTML = `
		<div class="browser-error-overlay">
			<div class="browser-error-content">
				<div class="browser-error-icon">${Dnl.replace(/"/g,"'")}</div>
				<div class="browser-error-title">${l}</div>
				<div class="browser-error-subtitle">${c}${u}</div>
				${d}
				<button class="browser-error-restart-button">${h}</button>
			</div>
		</div>
	`;

	var detailsToggle = document.querySelector('.browser-error-details-toggle');
	if (detailsToggle) {
		detailsToggle.addEventListener('click', function() {
			var box = document.querySelector('.browser-error-details-box');
			var btn = this;
			if (!box) { return; }
			if (box.style.display === 'none') { box.style.display = 'block'; btn.textContent = 'Hide Details'; }
			else { box.style.display = 'none'; btn.textContent = 'Show Details'; }
		});
	}

	var copyBtn = document.querySelector('.browser-error-copy-button');
	if (copyBtn) {
		copyBtn.addEventListener('click', function() {
			if (window.cursorBrowser) { window.cursorBrowser.send('browser-error-action', {action: 'copy-details'}); }
			this.title = 'Copied!';
			this.querySelector('.copy-icon').style.display = 'none';
			this.querySelector('.check-icon').style.display = 'inline';
			var btn = this;
			setTimeout(function() {
				btn.querySelector('.copy-icon').style.display = 'inline';
				btn.querySelector('.check-icon').style.display = 'none';
				btn.title = 'Copy error details';
			}, 2000);
		});
	}

	var restartBtn = document.querySelector('.browser-error-restart-button');
	if (restartBtn) {
		restartBtn.addEventListener('click', function() {
			if (window.cursorBrowser) { window.cursorBrowser.send('browser-error-action', {action: '${p}'}); }
		});
	}
})()

use strict

<svg width="48" height="48" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7zm5.94 6.5H11.5c-.08-1.68-.48-3.2-1.14-4.38A6.02 6.02 0 0 1 13.94 7.5zM8 14c-.82 0-2.07-1.87-2.24-5.5h4.48C10.07 12.13 8.82 14 8 14zm-2.24-6.5C5.93 3.87 7.18 2 8 2s2.07 1.87 2.24 5.5H5.76zM5.64 3.12C4.98 4.3 4.58 5.82 4.5 7.5H2.06A6.02 6.02 0 0 1 5.64 3.12zM2.06 8.5H4.5c.08 1.68.48 3.2 1.14 4.38A6.02 6.02 0 0 1 2.06 8.5zm8.3 4.38c.66-1.18 1.06-2.7 1.14-4.38h2.44a6.02 6.02 0 0 1-3.58 4.38z" fill="currentColor"/>
</svg>

<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4l1-1h5.414L14 6.586V14l-1 1H5l-1-1V4zm9 3l-3-3H5v10h8V7zM3 1L2 2v10l1 1V2h6.414l-1-1H3z"/></svg>

<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.763.646z"/></svg>

use strict

GitHub: ${t[0]}

${i}/${r} #${o}

${i}/${r} Actions

${r} ${t[4]}

${r} Releases

PR #${n}

${t}/${e} ${s}

${s}: ${a}

${o}: ${a}

${s}: ${a}

SO: ${u}

npm: ${u}

Google: ${u}

MDN: ${u}

${a}: ${d}

use strict

Zoom out

3px 0 0 3px

Zoom in

0 3px 3px 0

Reset zoom

Reset zoom to 100%

codicon codicon-history

Browser Menu

codicon codicon-ellipsis

More options

Browser options

Take Screenshot

Capture Area Screenshot

Hard Reload

Copy Current URL

Hard Reload

Copy Current URL

Show Bookmark Bar

Clear Browsing History

Clear Cookies

Clear Cache

Clear Accepted Certificates

use strict

1px solid var(--vscode-panel-border)