workbench.desktop.main.js · part 301

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

File contents and all parts · All files

monaco-icon-label file-icon

use strict

background-color: var(--ai-input-mention-background, var(--cursor-bg-blue-secondary)); color: var(--cursor-text-link)

background-color: var(--ai-input-mention-background, var(--cursor-bg-yellow-secondary)); color: var(--cursor-text-yellow-primary)

Diff with Main

mention mention-plain

use strict

<div role=checkbox>

cursor-setting-value-checkbox codicon codicon-check${e.value?" checked":""} ${t()} ${e.highlightedBorder?"highlighted-border":""} ${e.noBackground?"no-background":""} ${e.filled?"filled":""} outline-hidden

use strict

use strict

translateX(-50%) translateY(-100%)

translateX(-100%) translateY(-50%)

translateX(-100%) translateY(-100%)

use strict

use strict

 ${e.class}

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

0px 16px 23px 0px rgba(0, 0, 0, 0.10)

use strict

0 2px 8px var(--vscode-widget-shadow)

workbench-hover-container composer-thinking-hover-tooltip

use strict

<div class=hover-contents>

use strict

use strict

scrollable-div-container ${e.class} ${e.onlyShowScrollbarOnHover?"show-only-on-hover":""} ${e.onlyShowScrollbarOnScroll?"show-only-on-scroll":""} ${e.roundedScrollbar?"rounded-scrollbar":""} ${I()}

use strict

use strict

(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: ${h6(e.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: ${h6(e.background)};
		}
		.browser-welcome-icon {
			color: ${h6(e.descriptionForeground)};
			opacity: 0.6;
			margin-bottom: 24px;
		}
		.browser-welcome-title {
			font-size: 14px;
			font-weight: 500;
			color: ${h6(e.foreground)};
			margin-bottom: 2px;
			max-width: 300px;
		}
		.browser-welcome-subtitle {
			font-size: 12px;
			color: ${h6(e.descriptionForeground)};
			max-width: 300px;
			text-align: center;
		}
	`;
	document.head.appendChild(style);
	document.body.innerHTML = `
		<div class="browser-welcome-screen">
			<div class="browser-welcome-icon">${Eyo}</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. ${r2n(t)}

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">${r2n(t.errorDetails)}</div>
				<button class="browser-error-copy-button" title="Copy error details">
					<span class="copy-icon">${xdh}</span>
					<span class="check-icon" style="display:none">${Idh}</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: ${h6(e.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: ${h6(e.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: ${h6(e.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: ${h6(e.foreground)};
			margin: 0;
		}
		.browser-error-subtitle {
			font-size: 13px;
			line-height: 1.6;
			color: ${h6(e.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: ${h6(e.textSecondary)};
			opacity: 0.5;
		}
		.browser-error-details-toggle {
			padding: 0;
			background: transparent;
			border: none;
			color: ${h6(e.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 ${h6(e.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, ${h6(e.inputBackground)} 40%, transparent);
			border: 1px solid color-mix(in srgb, ${h6(e.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: ${h6(e.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: ${h6(e.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: ${h6(e.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: ${h6(e.foreground)};
			border: 1px solid ${h6(e.strokeSecondary)};
			border-radius: 4px;
			cursor: pointer;
			font-size: 12px;
			font-family: inherit;
			margin-top: 4px;
		}
		.browser-error-restart-button:hover {
			background: ${h6(e.buttonHoverBackground)};
		}
	`;
	document.head.appendChild(style);
	document.body.innerHTML = `
		<div class="browser-error-overlay">
			<div class="browser-error-content">
				<div class="browser-error-icon">${Eyo.replace(/"/g,"'")}</div>
				<div class="browser-error-title">${c}</div>
				<div class="browser-error-subtitle">${l}${u}</div>
				${h}
				<button class="browser-error-restart-button">${p}</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: '${g}'}); }
		});
	}
})()

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: ${e[0]}

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

${i}/${r} Actions

${r} ${e[4]}

${r} Releases

PR #${n}

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

${s}: ${a}

${o}: ${a}

${s}: ${a}

SO: ${u}