agentation 1.0.0

data/vendor/javascript/agentation.esm.js

@@ -0,0 +1,2129 @@
+/**
+ * Agentation - Visual Feedback Toolbar for Rails
+ * ES Module version for importmaps
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const STORAGE_PREFIX = 'feedback-annotations-';
+const DEFAULT_RETENTION_DAYS = 7;
+const BLUE = '#3c82f7';
+const RED = '#ff3b30';
+const GREEN = '#34c759';
+const VERSION = '1.0.0';
+
+const DEFAULT_SETTINGS = {
+  outputDetail: 'standard',
+  autoClearAfterCopy: false,
+  annotationColor: BLUE,
+  blockInteractions: false
+};
+
+const OUTPUT_DETAIL_OPTIONS = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'standard', label: 'Standard' },
+  { value: 'detailed', label: 'Detailed' },
+  { value: 'forensic', label: 'Forensic' }
+];
+
+const COLOR_OPTIONS = [
+  { value: '#AF52DE', label: 'Purple' },
+  { value: '#3c82f7', label: 'Blue' },
+  { value: '#5AC8FA', label: 'Cyan' },
+  { value: '#34C759', label: 'Green' },
+  { value: '#FFD60A', label: 'Yellow' },
+  { value: '#FF9500', label: 'Orange' },
+  { value: '#FF3B30', label: 'Red' }
+];
+
+// =============================================================================
+// Storage Utilities
+// =============================================================================
+
+function getStorageKey(pathname) {
+  return STORAGE_PREFIX + pathname;
+}
+
+function loadAnnotations(pathname) {
+  try {
+    const stored = localStorage.getItem(getStorageKey(pathname));
+    if (!stored) return [];
+    const data = JSON.parse(stored);
+    const cutoff = Date.now() - DEFAULT_RETENTION_DAYS * 24 * 60 * 60 * 1000;
+    return data.filter(a => !a.timestamp || a.timestamp > cutoff);
+  } catch (e) {
+    return [];
+  }
+}
+
+function saveAnnotations(pathname, annotations) {
+  try {
+    localStorage.setItem(getStorageKey(pathname), JSON.stringify(annotations));
+  } catch (e) {
+    // localStorage might be full or disabled
+  }
+}
+
+function loadSettings() {
+  try {
+    const stored = localStorage.getItem('feedback-toolbar-settings');
+    if (stored) {
+      return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
+    }
+  } catch (e) {}
+  return { ...DEFAULT_SETTINGS };
+}
+
+function saveSettings(settings) {
+  try {
+    localStorage.setItem('feedback-toolbar-settings', JSON.stringify(settings));
+  } catch (e) {}
+}
+
+function loadTheme() {
+  try {
+    const saved = localStorage.getItem('feedback-toolbar-theme');
+    if (saved !== null) {
+      return saved === 'dark';
+    }
+  } catch (e) {}
+  return true; // default dark
+}
+
+function saveTheme(isDark) {
+  try {
+    localStorage.setItem('feedback-toolbar-theme', isDark ? 'dark' : 'light');
+  } catch (e) {}
+}
+
+// =============================================================================
+// Element Identification Utilities
+// =============================================================================
+
+function getElementPath(target, maxDepth = 4) {
+  const parts = [];
+  let current = target;
+  let depth = 0;
+
+  while (current && depth < maxDepth) {
+    const tag = current.tagName.toLowerCase();
+    if (tag === 'html' || tag === 'body') break;
+
+    let identifier = tag;
+    if (current.id) {
+      identifier = '#' + current.id;
+    } else if (current.className && typeof current.className === 'string') {
+      const classes = current.className.split(/\s+/);
+      const meaningfulClass = classes.find(c =>
+        c.length > 2 && !c.match(/^[a-z]{1,2}$/) && !c.match(/[A-Z0-9]{5,}/)
+      );
+      if (meaningfulClass) {
+        identifier = '.' + meaningfulClass.split('_')[0];
+      }
+    }
+
+    parts.unshift(identifier);
+    current = current.parentElement;
+    depth++;
+  }
+
+  return parts.join(' > ');
+}
+
+function identifyElement(target) {
+  const path = getElementPath(target);
+
+  if (target.dataset?.element) {
+    return { name: target.dataset.element, path };
+  }
+
+  const tag = target.tagName.toLowerCase();
+
+  // SVG elements
+  if (['path', 'circle', 'rect', 'line', 'g'].includes(tag)) {
+    const svg = target.closest('svg');
+    if (svg) {
+      const parent = svg.parentElement;
+      if (parent) {
+        const parentName = identifyElement(parent).name;
+        return { name: `graphic in ${parentName}`, path };
+      }
+    }
+    return { name: 'graphic element', path };
+  }
+  if (tag === 'svg') {
+    const btnParent = target.parentElement;
+    if (btnParent?.tagName.toLowerCase() === 'button') {
+      const btnText = btnParent.textContent?.trim();
+      return { name: btnText ? `icon in "${btnText}" button` : 'button icon', path };
+    }
+    return { name: 'icon', path };
+  }
+
+  // Interactive elements
+  if (tag === 'button') {
+    const text = target.textContent?.trim();
+    const ariaLabel = target.getAttribute('aria-label');
+    if (ariaLabel) return { name: `button [${ariaLabel}]`, path };
+    return { name: text ? `button "${text.slice(0, 25)}"` : 'button', path };
+  }
+  if (tag === 'a') {
+    const linkText = target.textContent?.trim();
+    const href = target.getAttribute('href');
+    if (linkText) return { name: `link "${linkText.slice(0, 25)}"`, path };
+    if (href) return { name: `link to ${href.slice(0, 30)}`, path };
+    return { name: 'link', path };
+  }
+  if (tag === 'input') {
+    const type = target.getAttribute('type') || 'text';
+    const placeholder = target.getAttribute('placeholder');
+    const inputName = target.getAttribute('name');
+    if (placeholder) return { name: `input "${placeholder}"`, path };
+    if (inputName) return { name: `input [${inputName}]`, path };
+    return { name: `${type} input`, path };
+  }
+
+  // Headings
+  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {
+    const headingText = target.textContent?.trim();
+    return { name: headingText ? `${tag} "${headingText.slice(0, 35)}"` : tag, path };
+  }
+
+  // Text elements
+  if (tag === 'p') {
+    const pText = target.textContent?.trim();
+    if (pText) return { name: `paragraph: "${pText.slice(0, 40)}${pText.length > 40 ? '...' : ''}"`, path };
+    return { name: 'paragraph', path };
+  }
+  if (tag === 'span' || tag === 'label') {
+    const spanText = target.textContent?.trim();
+    if (spanText && spanText.length < 40) return { name: `"${spanText}"`, path };
+    return { name: tag, path };
+  }
+  if (tag === 'li') {
+    const liText = target.textContent?.trim();
+    if (liText && liText.length < 40) return { name: `list item: "${liText.slice(0, 35)}"`, path };
+    return { name: 'list item', path };
+  }
+  if (tag === 'blockquote') return { name: 'blockquote', path };
+  if (tag === 'code') {
+    const codeText = target.textContent?.trim();
+    if (codeText && codeText.length < 30) return { name: `code: \`${codeText}\``, path };
+    return { name: 'code', path };
+  }
+  if (tag === 'pre') return { name: 'code block', path };
+
+  // Media
+  if (tag === 'img') {
+    const alt = target.getAttribute('alt');
+    return { name: alt ? `image "${alt.slice(0, 30)}"` : 'image', path };
+  }
+  if (tag === 'video') return { name: 'video', path };
+
+  // Containers
+  if (['div', 'section', 'article', 'nav', 'header', 'footer', 'aside', 'main'].includes(tag)) {
+    const className = target.className;
+    const role = target.getAttribute('role');
+    const containerAriaLabel = target.getAttribute('aria-label');
+
+    if (containerAriaLabel) return { name: `${tag} [${containerAriaLabel}]`, path };
+    if (role) return { name: role, path };
+
+    if (typeof className === 'string' && className) {
+      const words = className
+        .split(/[\s_-]+/)
+        .map(c => c.replace(/[A-Z0-9]{5,}.*$/, ''))
+        .filter(c => c.length > 2 && !/^[a-z]{1,2}$/.test(c))
+        .slice(0, 2);
+      if (words.length > 0) return { name: words.join(' '), path };
+    }
+
+    return { name: tag === 'div' ? 'container' : tag, path };
+  }
+
+  return { name: tag, path };
+}
+
+function getNearbyText(element) {
+  const texts = [];
+  const ownText = element.textContent?.trim();
+  if (ownText && ownText.length < 100) {
+    texts.push(ownText);
+  }
+
+  const prev = element.previousElementSibling;
+  if (prev) {
+    const prevText = prev.textContent?.trim();
+    if (prevText && prevText.length < 50) {
+      texts.unshift(`[before: "${prevText.slice(0, 40)}"]`);
+    }
+  }
+
+  const next = element.nextElementSibling;
+  if (next) {
+    const nextText = next.textContent?.trim();
+    if (nextText && nextText.length < 50) {
+      texts.push(`[after: "${nextText.slice(0, 40)}"]`);
+    }
+  }
+
+  return texts.join(' ');
+}
+
+function getElementClasses(target) {
+  const className = target.className;
+  if (typeof className !== 'string' || !className) return '';
+
+  const classes = className
+    .split(/\s+/)
+    .filter(c => c.length > 0)
+    .map(c => {
+      const match = c.match(/^([a-zA-Z][a-zA-Z0-9_-]*?)(?:_[a-zA-Z0-9]{5,})?$/);
+      return match ? match[1] : c;
+    })
+    .filter((c, i, arr) => arr.indexOf(c) === i);
+
+  return classes.join(', ');
+}
+
+const DEFAULT_STYLE_VALUES = new Set(['none', 'normal', 'auto', '0px', 'rgba(0, 0, 0, 0)', 'transparent', 'static', 'visible']);
+const TEXT_ELEMENTS = new Set(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label', 'li', 'td', 'th', 'blockquote', 'figcaption', 'caption', 'legend', 'dt', 'dd', 'pre', 'code', 'em', 'strong', 'b', 'i', 'a', 'time', 'cite', 'q']);
+const FORM_INPUT_ELEMENTS = new Set(['input', 'textarea', 'select']);
+const MEDIA_ELEMENTS = new Set(['img', 'video', 'canvas', 'svg']);
+const CONTAINER_ELEMENTS = new Set(['div', 'section', 'article', 'nav', 'header', 'footer', 'aside', 'main', 'ul', 'ol', 'form', 'fieldset']);
+
+function getDetailedComputedStyles(target) {
+  const styles = window.getComputedStyle(target);
+  const result = {};
+  const tag = target.tagName.toLowerCase();
+
+  let properties;
+  if (TEXT_ELEMENTS.has(tag)) {
+    properties = ['color', 'fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+  } else if (tag === 'button' || (tag === 'a' && target.getAttribute('role') === 'button')) {
+    properties = ['backgroundColor', 'color', 'padding', 'borderRadius', 'fontSize'];
+  } else if (FORM_INPUT_ELEMENTS.has(tag)) {
+    properties = ['backgroundColor', 'color', 'padding', 'borderRadius', 'fontSize'];
+  } else if (MEDIA_ELEMENTS.has(tag)) {
+    properties = ['width', 'height', 'objectFit', 'borderRadius'];
+  } else if (CONTAINER_ELEMENTS.has(tag)) {
+    properties = ['display', 'padding', 'margin', 'gap', 'backgroundColor'];
+  } else {
+    properties = ['color', 'fontSize', 'margin', 'padding', 'backgroundColor'];
+  }
+
+  for (const prop of properties) {
+    const cssPropertyName = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const value = styles.getPropertyValue(cssPropertyName);
+    if (value && !DEFAULT_STYLE_VALUES.has(value)) {
+      result[prop] = value;
+    }
+  }
+
+  return result;
+}
+
+const FORENSIC_PROPERTIES = [
+  'color', 'backgroundColor', 'borderColor',
+  'fontSize', 'fontWeight', 'fontFamily', 'lineHeight', 'letterSpacing', 'textAlign',
+  'width', 'height', 'padding', 'margin', 'border', 'borderRadius',
+  'display', 'position', 'top', 'right', 'bottom', 'left', 'zIndex',
+  'flexDirection', 'justifyContent', 'alignItems', 'gap',
+  'opacity', 'visibility', 'overflow', 'boxShadow',
+  'transform'
+];
+
+function getForensicComputedStyles(target) {
+  const styles = window.getComputedStyle(target);
+  const parts = [];
+
+  for (const prop of FORENSIC_PROPERTIES) {
+    const cssPropertyName = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const value = styles.getPropertyValue(cssPropertyName);
+    if (value && !DEFAULT_STYLE_VALUES.has(value)) {
+      parts.push(`${cssPropertyName}: ${value}`);
+    }
+  }
+
+  return parts.join('; ');
+}
+
+function getAccessibilityInfo(target) {
+  const parts = [];
+  const role = target.getAttribute('role');
+  const ariaLabel = target.getAttribute('aria-label');
+  const ariaDescribedBy = target.getAttribute('aria-describedby');
+  const tabIndex = target.getAttribute('tabindex');
+  const ariaHidden = target.getAttribute('aria-hidden');
+
+  if (role) parts.push(`role="${role}"`);
+  if (ariaLabel) parts.push(`aria-label="${ariaLabel}"`);
+  if (ariaDescribedBy) parts.push(`aria-describedby="${ariaDescribedBy}"`);
+  if (tabIndex) parts.push(`tabindex=${tabIndex}`);
+  if (ariaHidden === 'true') parts.push('aria-hidden');
+
+  const focusable = target.matches('a, button, input, select, textarea, [tabindex]');
+  if (focusable) parts.push('focusable');
+
+  return parts.join(', ');
+}
+
+function getFullElementPath(target) {
+  const parts = [];
+  let current = target;
+
+  while (current && current.tagName.toLowerCase() !== 'html') {
+    const tag = current.tagName.toLowerCase();
+    let identifier = tag;
+
+    if (current.id) {
+      identifier = `${tag}#${current.id}`;
+    } else if (current.className && typeof current.className === 'string') {
+      const cls = current.className
+        .split(/\s+/)
+        .map(c => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, ''))
+        .find(c => c.length > 2);
+      if (cls) identifier = `${tag}.${cls}`;
+    }
+
+    parts.unshift(identifier);
+    current = current.parentElement;
+  }
+
+  return parts.join(' > ');
+}
+
+function getNearbyElements(element) {
+  const parent = element.parentElement;
+  if (!parent) return '';
+
+  const siblings = Array.from(parent.children).filter(
+    child => child !== element && child instanceof HTMLElement
+  );
+
+  if (siblings.length === 0) return '';
+
+  const siblingIds = siblings.slice(0, 4).map(sib => {
+    const tag = sib.tagName.toLowerCase();
+    const className = sib.className;
+    let cls = '';
+
+    if (typeof className === 'string' && className) {
+      const meaningful = className
+        .split(/\s+/)
+        .map(c => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, ''))
+        .find(c => c.length > 2 && !/^[a-z]{1,2}$/.test(c));
+      if (meaningful) cls = '.' + meaningful;
+    }
+
+    if (tag === 'button' || tag === 'a') {
+      const text = sib.textContent?.trim().slice(0, 15);
+      if (text) return `${tag}${cls} "${text}"`;
+    }
+
+    return tag + cls;
+  });
+
+  const parentTag = parent.tagName.toLowerCase();
+  let parentId = parentTag;
+  if (typeof parent.className === 'string' && parent.className) {
+    const parentCls = parent.className
+      .split(/\s+/)
+      .map(c => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, ''))
+      .find(c => c.length > 2 && !/^[a-z]{1,2}$/.test(c));
+    if (parentCls) parentId = '.' + parentCls;
+  }
+
+  const total = parent.children.length;
+  const suffix = total > siblingIds.length + 1 ? ` (${total} total in ${parentId})` : '';
+
+  return siblingIds.join(', ') + suffix;
+}
+
+// =============================================================================
+// Utility Functions
+// =============================================================================
+
+function isElementFixed(element) {
+  let current = element;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    const position = style.position;
+    if (position === 'fixed' || position === 'sticky') {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function darkenColor(hex, percent) {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = Math.max((num >> 16) - amt, 0);
+  const G = Math.max((num >> 8 & 0x00FF) - amt, 0);
+  const B = Math.max((num & 0x0000FF) - amt, 0);
+  return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);
+}
+
+function generateId() {
+  return 'agnt-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+}
+
+function generateOutput(annotations, pathname, detailLevel = 'standard') {
+  if (annotations.length === 0) return '';
+
+  const viewport = `${window.innerWidth}\u00D7${window.innerHeight}`;
+  let output = `## Page Feedback: ${pathname}\n`;
+
+  if (detailLevel === 'forensic') {
+    output += `\n**Environment:**\n`;
+    output += `- Viewport: ${viewport}\n`;
+    output += `- URL: ${window.location.href}\n`;
+    output += `- User Agent: ${navigator.userAgent}\n`;
+    output += `- Timestamp: ${new Date().toISOString()}\n`;
+    output += `- Device Pixel Ratio: ${window.devicePixelRatio}\n`;
+    output += `\n---\n`;
+  } else if (detailLevel !== 'compact') {
+    output += `**Viewport:** ${viewport}\n`;
+  }
+  output += '\n';
+
+  annotations.forEach((a, i) => {
+    if (detailLevel === 'compact') {
+      output += `${i + 1}. **${a.element}**: ${a.comment}`;
+      if (a.selectedText) {
+        output += ` (re: "${a.selectedText.slice(0, 30)}${a.selectedText.length > 30 ? '...' : ''}")`;
+      }
+      output += '\n';
+    } else if (detailLevel === 'forensic') {
+      output += `### ${i + 1}. ${a.element}\n`;
+      if (a.isMultiSelect && a.fullPath) {
+        output += `*Forensic data shown for first element of selection*\n`;
+      }
+      if (a.fullPath) output += `**Full DOM Path:** ${a.fullPath}\n`;
+      if (a.cssClasses) output += `**CSS Classes:** ${a.cssClasses}\n`;
+      if (a.boundingBox) {
+        output += `**Position:** x:${Math.round(a.boundingBox.x)}, y:${Math.round(a.boundingBox.y)} (${Math.round(a.boundingBox.width)}\u00D7${Math.round(a.boundingBox.height)}px)\n`;
+      }
+      output += `**Annotation at:** ${a.x.toFixed(1)}% from left, ${Math.round(a.y)}px from top\n`;
+      if (a.selectedText) output += `**Selected text:** "${a.selectedText}"\n`;
+      if (a.nearbyText && !a.selectedText) output += `**Context:** ${a.nearbyText.slice(0, 100)}\n`;
+      if (a.computedStyles) output += `**Computed Styles:** ${a.computedStyles}\n`;
+      if (a.accessibility) output += `**Accessibility:** ${a.accessibility}\n`;
+      if (a.nearbyElements) output += `**Nearby Elements:** ${a.nearbyElements}\n`;
+      output += `**Feedback:** ${a.comment}\n\n`;
+    } else {
+      output += `### ${i + 1}. ${a.element}\n`;
+      output += `**Location:** ${a.elementPath}\n`;
+
+      if (detailLevel === 'detailed') {
+        if (a.cssClasses) output += `**Classes:** ${a.cssClasses}\n`;
+        if (a.boundingBox) {
+          output += `**Position:** ${Math.round(a.boundingBox.x)}px, ${Math.round(a.boundingBox.y)}px (${Math.round(a.boundingBox.width)}\u00D7${Math.round(a.boundingBox.height)}px)\n`;
+        }
+      }
+
+      if (a.selectedText) output += `**Selected text:** "${a.selectedText}"\n`;
+      if (detailLevel === 'detailed' && a.nearbyText && !a.selectedText) {
+        output += `**Context:** ${a.nearbyText.slice(0, 100)}\n`;
+      }
+
+      output += `**Feedback:** ${a.comment}\n\n`;
+    }
+  });
+
+  return output.trim();
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function getSelectedText() {
+  const selection = window.getSelection();
+  if (selection && selection.toString().trim()) {
+    return selection.toString().trim();
+  }
+  return '';
+}
+
+// =============================================================================
+// Icons
+// =============================================================================
+
+const Icons = {
+  listSparkle: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><g clip-path="url(#clip0_list_sparkle)"><path d="M11.5 12L5.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 6.75L5.5 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.25 17.25L5.5 17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 12.75L16.5179 13.9677C16.8078 14.6494 17.3506 15.1922 18.0323 15.4821L19.25 16L18.0323 16.5179C17.3506 16.8078 16.8078 17.3506 16.5179 18.0323L16 19.25L15.4821 18.0323C15.1922 17.3506 14.6494 16.8078 13.9677 16.5179L12.75 16L13.9677 15.4821C14.6494 15.1922 15.1922 14.6494 15.4821 13.9677L16 12.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></g></svg>`,
+  check: (size = 16) => `<svg width="${size}" height="${size}" viewBox="0 0 16 16" fill="none"><path d="M3 8l3.5 3.5L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  checkSmall: (size = 14) => `<svg width="${size}" height="${size}" viewBox="0 0 14 14" fill="none"><path d="M3.9375 7L6.125 9.1875L10.5 4.8125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  copy: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M4.75 11.25C4.75 10.4216 5.42157 9.75 6.25 9.75H12.75C13.5784 9.75 14.25 10.4216 14.25 11.25V17.75C14.25 18.5784 13.5784 19.25 12.75 19.25H6.25C5.42157 19.25 4.75 18.5784 4.75 17.75V11.25Z" stroke="currentColor" stroke-width="1.5"/><path d="M17.25 14.25H17.75C18.5784 14.25 19.25 13.5784 19.25 12.75V6.25C19.25 5.42157 18.5784 4.75 17.75 4.75H11.25C10.4216 4.75 9.75 5.42157 9.75 6.25V6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`,
+  checkCircle: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 10L11 14.25L9.25 12.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  eye: (size = 24, isOpen = true) => isOpen
+    ? `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M3.91752 12.7539C3.65127 12.2996 3.65037 11.7515 3.9149 11.2962C4.9042 9.59346 7.72688 5.49994 12 5.49994C16.2731 5.49994 19.0958 9.59346 20.0851 11.2962C20.3496 11.7515 20.3487 12.2996 20.0825 12.7539C19.0908 14.4459 16.2694 18.4999 12 18.4999C7.73064 18.4999 4.90918 14.4459 3.91752 12.7539Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14.8261C13.5608 14.8261 14.8261 13.5608 14.8261 12C14.8261 10.4392 13.5608 9.17392 12 9.17392C10.4392 9.17392 9.17391 10.4392 9.17391 12C9.17391 13.5608 10.4392 14.8261 12 14.8261Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+    : `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M18.6025 9.28503C18.9174 8.9701 19.4364 8.99481 19.7015 9.35271C20.1484 9.95606 20.4943 10.507 20.7342 10.9199C21.134 11.6086 21.1329 12.4454 20.7303 13.1328C20.2144 14.013 19.2151 15.5225 17.7723 16.8193C16.3293 18.1162 14.3852 19.2497 12.0008 19.25C11.4192 19.25 10.8638 19.1823 10.3355 19.0613C9.77966 18.934 9.63498 18.2525 10.0382 17.8493C10.2412 17.6463 10.5374 17.573 10.8188 17.6302C11.1993 17.7076 11.5935 17.75 12.0008 17.75C13.8848 17.7497 15.4867 16.8568 16.7693 15.7041C18.0522 14.5511 18.9606 13.1867 19.4363 12.375C19.5656 12.1543 19.5659 11.8943 19.4373 11.6729C19.2235 11.3049 18.921 10.8242 18.5364 10.3003C18.3085 9.98991 18.3302 9.5573 18.6025 9.28503ZM12.0008 4.75C12.5814 4.75006 13.1358 4.81803 13.6632 4.93953C14.2182 5.06741 14.362 5.74812 13.9593 6.15091C13.7558 6.35435 13.4589 6.42748 13.1771 6.36984C12.7983 6.29239 12.4061 6.25006 12.0008 6.25C10.1167 6.25 8.51415 7.15145 7.23028 8.31543C5.94678 9.47919 5.03918 10.8555 4.56426 11.6729C4.43551 11.8945 4.43582 12.1542 4.56524 12.375C4.77587 12.7343 5.07189 13.2012 5.44718 13.7105C5.67623 14.0213 5.65493 14.4552 5.38193 14.7282C5.0671 15.0431 4.54833 15.0189 4.28292 14.6614C3.84652 14.0736 3.50813 13.5369 3.27129 13.1328C2.86831 12.4451 2.86717 11.6088 3.26739 10.9199C3.78185 10.0345 4.77959 8.51239 6.22247 7.2041C7.66547 5.89584 9.61202 4.75 12.0008 4.75Z" fill="currentColor"/><path d="M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`,
+  pausePlay: (size = 24, isPaused = false) => isPaused
+    ? `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M17.75 10.701C18.75 11.2783 18.75 12.7217 17.75 13.299L8.75 18.4952C7.75 19.0725 6.5 18.3509 6.5 17.1962L6.5 6.80384C6.5 5.64914 7.75 4.92746 8.75 5.50481L17.75 10.701Z" stroke="currentColor" stroke-width="1.5"/></svg>`
+    : `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M8 6L8 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16 18L16 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`,
+  gear: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M10.6504 5.81117C10.9939 4.39628 13.0061 4.39628 13.3496 5.81117C13.5715 6.72517 14.6187 7.15891 15.4219 6.66952C16.6652 5.91193 18.0881 7.33479 17.3305 8.57815C16.8411 9.38134 17.2748 10.4285 18.1888 10.6504C19.6037 10.9939 19.6037 13.0061 18.1888 13.3496C17.2748 13.5715 16.8411 14.6187 17.3305 15.4219C18.0881 16.6652 16.6652 18.0881 15.4219 17.3305C14.6187 16.8411 13.5715 17.2748 13.3496 18.1888C13.0061 19.6037 10.9939 19.6037 10.6504 18.1888C10.4285 17.2748 9.38135 16.8411 8.57815 17.3305C7.33479 18.0881 5.91193 16.6652 6.66952 15.4219C7.15891 14.6187 6.72517 13.5715 5.81117 13.3496C4.39628 13.0061 4.39628 10.9939 5.81117 10.6504C6.72517 10.4285 7.15891 9.38134 6.66952 8.57815C5.91193 7.33479 7.33479 5.91192 8.57815 6.66952C9.38135 7.15891 10.4285 6.72517 10.6504 5.81117Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>`,
+  trash: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M13.5 4C14.7426 4 15.75 5.00736 15.75 6.25V7H18.5C18.9142 7 19.25 7.33579 19.25 7.75C19.25 8.16421 18.9142 8.5 18.5 8.5H17.9678L17.6328 16.2217C17.61 16.7475 17.5912 17.1861 17.5469 17.543C17.5015 17.9087 17.4225 18.2506 17.2461 18.5723C16.9747 19.0671 16.5579 19.4671 16.0518 19.7168C15.7227 19.8791 15.3772 19.9422 15.0098 19.9717C14.6514 20.0004 14.2126 20 13.6865 20H10.3135C9.78735 20 9.34856 20.0004 8.99023 19.9717C8.62278 19.9422 8.27729 19.8791 7.94824 19.7168C7.44205 19.4671 7.02532 19.0671 6.75391 18.5723C6.57751 18.2506 6.49853 17.9087 6.45312 17.543C6.40883 17.1861 6.39005 16.7475 6.36719 16.2217L6.03223 8.5H5.5C5.08579 8.5 4.75 8.16421 4.75 7.75C4.75 7.33579 5.08579 7 5.5 7H8.25V6.25C8.25 5.00736 9.25736 4 10.5 4H13.5ZM7.86621 16.1562C7.89013 16.7063 7.90624 17.0751 7.94141 17.3584C7.97545 17.6326 8.02151 17.7644 8.06934 17.8516C8.19271 18.0763 8.38239 18.2577 8.6123 18.3711C8.70153 18.4151 8.83504 18.4545 9.11035 18.4766C9.39482 18.4994 9.76335 18.5 10.3135 18.5H13.6865C14.2367 18.5 14.6052 18.4994 14.8896 18.4766C15.165 18.4545 15.2985 18.4151 15.3877 18.3711C15.6176 18.2577 15.8073 18.0763 15.9307 17.8516C15.9785 17.7644 16.0245 17.6326 16.0586 17.3584C16.0938 17.0751 16.1099 16.7063 16.1338 16.1562L16.4668 8.5H7.5332L7.86621 16.1562ZM9.97656 10.75C10.3906 10.7371 10.7371 11.0626 10.75 11.4766L10.875 15.4766C10.8879 15.8906 10.5624 16.2371 10.1484 16.25C9.73443 16.2629 9.38794 15.9374 9.375 15.5234L9.25 11.5234C9.23706 11.1094 9.56255 10.7629 9.97656 10.75ZM14.0244 10.75C14.4384 10.7635 14.7635 11.1105 14.75 11.5244L14.6201 15.5244C14.6066 15.9384 14.2596 16.2634 13.8457 16.25C13.4317 16.2365 13.1067 15.8896 13.1201 15.4756L13.251 11.4756C13.2645 11.0617 13.6105 10.7366 14.0244 10.75ZM10.5 5.5C10.0858 5.5 9.75 5.83579 9.75 6.25V7H14.25V6.25C14.25 5.83579 13.9142 5.5 13.5 5.5H10.5Z" fill="currentColor"/></svg>`,
+  close: (size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M16.7198 6.21973C17.0127 5.92683 17.4874 5.92683 17.7803 6.21973C18.0732 6.51262 18.0732 6.9874 17.7803 7.28027L13.0606 12L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4875 18.0731 17.0127 18.0731 16.7198 17.7803L12.0001 13.0605L7.28033 17.7803C6.98746 18.0731 6.51268 18.0731 6.21979 17.7803C5.92689 17.4874 5.92689 17.0126 6.21979 16.7197L10.9395 12L6.21979 7.28027C5.92689 6.98738 5.92689 6.51262 6.21979 6.21973C6.51268 5.92683 6.98744 5.92683 7.28033 6.21973L12.0001 10.9395L16.7198 6.21973Z" fill="currentColor"/></svg>`,
+  sun: (size = 16) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M12 5V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 21V19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16.95 7.05L18.36 5.64" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M5.64 18.36L7.05 16.95" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M19 12H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M3 12H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16.95 16.95L18.36 18.36" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M5.64 5.64L7.05 7.05" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`,
+  moon: (size = 16) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  chevron: (size = 14) => `<svg width="${size}" height="${size}" viewBox="0 0 14 14" fill="none"><path d="M5.5 10.25L9 7.25L5.75 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+};
+
+// =============================================================================
+// AgentationStore - Simple State Management
+// =============================================================================
+
+class AgentationStore {
+  constructor(initialState = {}) {
+    this.state = initialState;
+    this.listeners = [];
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  setState(updates) {
+    const prevState = this.state;
+    if (typeof updates === 'function') {
+      this.state = { ...this.state, ...updates(this.state) };
+    } else {
+      this.state = { ...this.state, ...updates };
+    }
+    this.notify(prevState);
+  }
+
+  subscribe(callback) {
+    this.listeners.push(callback);
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== callback);
+    };
+  }
+
+  notify(prevState) {
+    const state = this.state;
+    this.listeners.forEach(callback => callback(state, prevState));
+  }
+}
+
+// =============================================================================
+// AnnotationPopup Class
+// =============================================================================
+
+class AnnotationPopup {
+  constructor(options) {
+    this.options = {
+      element: '',
+      timestamp: '',
+      selectedText: '',
+      placeholder: 'What should change?',
+      initialValue: '',
+      submitLabel: 'Add',
+      accentColor: BLUE,
+      lightMode: false,
+      computedStyles: null,
+      onSubmit: () => {},
+      onCancel: () => {},
+      ...options
+    };
+
+    this.text = this.options.initialValue;
+    this.isShaking = false;
+    this.animState = 'initial';
+    this.isFocused = false;
+    this.isStylesExpanded = false;
+    this.el = null;
+    this.textareaEl = null;
+
+    this.render();
+    this.bindEvents();
+    this.animateIn();
+  }
+
+  render() {
+    const opts = this.options;
+    const el = document.createElement('div');
+    el.className = 'agentation-popup' + (opts.lightMode ? ' agentation-popup--light' : '');
+    el.setAttribute('data-annotation-popup', 'true');
+    el.style.zIndex = '100001'; // Ensure popup is always on top
+
+    const hasStyles = opts.computedStyles && Object.keys(opts.computedStyles).length > 0;
+
+    let html = '<div class="agentation-popup__header">';
+
+    if (hasStyles) {
+      html += '<button class="agentation-popup__header-toggle" type="button">';
+      html += '<span class="agentation-popup__chevron">' + Icons.chevron(14) + '</span>';
+      html += '<span class="agentation-popup__element">' + escapeHtml(opts.element) + '</span>';
+      html += '</button>';
+    } else {
+      html += '<span class="agentation-popup__element">' + escapeHtml(opts.element) + '</span>';
+    }
+
+    if (opts.timestamp) {
+      html += '<span class="agentation-popup__timestamp">' + escapeHtml(opts.timestamp) + '</span>';
+    }
+    html += '</div>';
+
+    if (hasStyles) {
+      html += '<div class="agentation-popup__styles-wrapper">';
+      html += '<div class="agentation-popup__styles-inner">';
+      html += '<div class="agentation-popup__styles-block">';
+      for (const key in opts.computedStyles) {
+        if (opts.computedStyles.hasOwnProperty(key)) {
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+          html += '<div class="agentation-popup__style-line">';
+          html += '<span class="agentation-popup__style-property">' + cssKey + '</span>';
+          html += ': <span class="agentation-popup__style-value">' + escapeHtml(opts.computedStyles[key]) + '</span>;';
+          html += '</div>';
+        }
+      }
+      html += '</div></div></div>';
+    }
+
+    if (opts.selectedText) {
+      html += '<div class="agentation-popup__quote">';
+      html += '&ldquo;' + escapeHtml(opts.selectedText.slice(0, 80));
+      if (opts.selectedText.length > 80) html += '...';
+      html += '&rdquo;</div>';
+    }
+
+    html += '<textarea class="agentation-popup__textarea" placeholder="' + escapeHtml(opts.placeholder) + '" rows="2">' + escapeHtml(this.text) + '</textarea>';
+
+    html += '<div class="agentation-popup__actions">';
+    html += '<button class="agentation-popup__cancel" type="button">Cancel</button>';
+    html += '<button class="agentation-popup__submit" type="button" style="background-color: ' + opts.accentColor + '">' + opts.submitLabel + '</button>';
+    html += '</div>';
+
+    el.innerHTML = html;
+    document.body.appendChild(el);
+    this.el = el;
+    this.textareaEl = el.querySelector('.agentation-popup__textarea');
+    this.updateSubmitState();
+  }
+
+  bindEvents() {
+    this.textareaEl.addEventListener('input', (e) => {
+      this.text = e.target.value;
+      this.updateSubmitState();
+    });
+
+    this.textareaEl.addEventListener('focus', () => {
+      this.isFocused = true;
+      this.textareaEl.style.borderColor = this.options.accentColor;
+    });
+
+    this.textareaEl.addEventListener('blur', () => {
+      this.isFocused = false;
+      this.textareaEl.style.borderColor = '';
+    });
+
+    this.textareaEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.handleSubmit();
+      }
+      if (e.key === 'Escape') {
+        this.handleCancel();
+      }
+    });
+
+    const cancelBtn = this.el.querySelector('.agentation-popup__cancel');
+    cancelBtn.addEventListener('click', () => this.handleCancel());
+
+    const submitBtn = this.el.querySelector('.agentation-popup__submit');
+    submitBtn.addEventListener('click', () => this.handleSubmit());
+
+    const toggleBtn = this.el.querySelector('.agentation-popup__header-toggle');
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', () => {
+        this.isStylesExpanded = !this.isStylesExpanded;
+        const wrapper = this.el.querySelector('.agentation-popup__styles-wrapper');
+        const chevron = this.el.querySelector('.agentation-popup__chevron');
+        if (wrapper) {
+          wrapper.classList.toggle('agentation-popup__styles-wrapper--expanded', this.isStylesExpanded);
+        }
+        if (chevron) {
+          chevron.classList.toggle('agentation-popup__chevron--expanded', this.isStylesExpanded);
+        }
+        if (!this.isStylesExpanded) {
+          setTimeout(() => this.textareaEl.focus(), 0);
+        }
+      });
+    }
+
+    this.el.addEventListener('click', (e) => e.stopPropagation());
+  }
+
+  updateSubmitState() {
+    const submitBtn = this.el.querySelector('.agentation-popup__submit');
+    if (submitBtn) {
+      submitBtn.style.opacity = this.text.trim() ? '1' : '0.4';
+      submitBtn.disabled = !this.text.trim();
+    }
+  }
+
+  animateIn() {
+    requestAnimationFrame(() => {
+      this.el.classList.add('agentation-popup--enter');
+      this.animState = 'enter';
+    });
+
+    setTimeout(() => {
+      this.el.classList.remove('agentation-popup--enter');
+      this.el.classList.add('agentation-popup--entered');
+      this.animState = 'entered';
+    }, 200);
+
+    setTimeout(() => {
+      this.textareaEl.focus();
+      this.textareaEl.selectionStart = this.textareaEl.selectionEnd = this.textareaEl.value.length;
+    }, 50);
+  }
+
+  shake() {
+    this.el.classList.add('agentation-popup--shake');
+    setTimeout(() => {
+      this.el.classList.remove('agentation-popup--shake');
+      this.textareaEl.focus();
+    }, 250);
+  }
+
+  handleCancel() {
+    this.el.classList.remove('agentation-popup--entered');
+    this.el.classList.add('agentation-popup--exit');
+    setTimeout(() => {
+      this.destroy();
+      this.options.onCancel();
+    }, 150);
+  }
+
+  handleSubmit() {
+    if (!this.text.trim()) return;
+    this.options.onSubmit(this.text.trim());
+    this.destroy();
+  }
+
+  setPosition(x, y) {
+    this.el.style.left = x + 'px';
+    this.el.style.top = y + 'px';
+  }
+
+  destroy() {
+    if (this.el && this.el.parentNode) {
+      this.el.parentNode.removeChild(this.el);
+    }
+  }
+}
+
+// =============================================================================
+// AgentationToolbar Class
+// =============================================================================
+
+class AgentationToolbar {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      onAnnotationAdd: null,
+      onAnnotationDelete: null,
+      onAnnotationUpdate: null,
+      onAnnotationsClear: null,
+      onCopy: null,
+      copyToClipboard: true,
+      ...options
+    };
+
+    this.pathname = window.location.pathname;
+
+    this.store = new AgentationStore({
+      isActive: false,
+      annotations: [],
+      showMarkers: true,
+      hoverInfo: null,
+      pendingAnnotation: null,
+      copied: false,
+      cleared: false,
+      hoveredMarkerId: null,
+      editingAnnotation: null,
+      showSettings: false,
+      showSettingsVisible: false,
+      settings: { ...DEFAULT_SETTINGS },
+      isDarkMode: true,
+      isFrozen: false,
+      isDragging: false,
+      scrollY: 0
+    });
+
+    // DOM references
+    this.toolbarEl = null;
+    this.overlayEl = null;
+    this.markersLayerEl = null;
+    this.settingsPanelEl = null;
+    this.hoverHighlightEl = null;
+    this.dragSelectionEl = null;
+    this.popup = null;
+    this.editPopup = null;
+
+    // Animation state
+    this.hasPlayedEntrance = false;
+    this.frozenAnimations = [];
+
+    // Drag selection state (using instance vars for performance)
+    this.mouseDownPos = null;
+    this.dragStart = null;
+    this.DRAG_THRESHOLD = 8;
+    this.justFinishedDrag = false;
+    this.highlightsContainerEl = null;
+    this.ELEMENT_UPDATE_THROTTLE = 50;
+    this.lastElementUpdate = 0;
+
+    this.init();
+  }
+
+  init() {
+    this.loadState();
+    this.render();
+    this.bindEvents();
+    this.store.subscribe(this.onStateChange.bind(this));
+
+    // Trigger entrance animation
+    if (!this.hasPlayedEntrance) {
+      this.hasPlayedEntrance = true;
+      setTimeout(() => {
+        if (this.toolbarEl) {
+          const container = this.toolbarEl.querySelector('.agentation-toolbar__container');
+          if (container) {
+            container.classList.add('agentation-toolbar__container--entrance');
+            setTimeout(() => {
+              container.classList.remove('agentation-toolbar__container--entrance');
+            }, 750);
+          }
+        }
+      }, 0);
+    }
+  }
+
+  loadState() {
+    const annotations = loadAnnotations(this.pathname);
+    const settings = loadSettings();
+    const isDarkMode = loadTheme();
+
+    this.store.setState({
+      annotations,
+      settings,
+      isDarkMode,
+      scrollY: window.scrollY
+    });
+  }
+
+  render() {
+    // Create toolbar
+    this.toolbarEl = document.createElement('div');
+    this.toolbarEl.className = 'agentation-toolbar';
+    this.toolbarEl.setAttribute('data-agentation', 'toolbar');
+    this.updateToolbar();
+    document.body.appendChild(this.toolbarEl);
+
+    // Create overlay (for click capture and hover highlight)
+    this.overlayEl = document.createElement('div');
+    this.overlayEl.className = 'agentation-overlay';
+    this.overlayEl.style.display = 'none';
+    this.overlayEl.setAttribute('data-agentation', 'overlay');
+    document.body.appendChild(this.overlayEl);
+
+    // Create hover highlight element
+    this.hoverHighlightEl = document.createElement('div');
+    this.hoverHighlightEl.className = 'agentation-hover-highlight';
+    this.hoverHighlightEl.style.display = 'none';
+    document.body.appendChild(this.hoverHighlightEl);
+
+    // Create markers layer
+    this.markersLayerEl = document.createElement('div');
+    this.markersLayerEl.className = 'agentation-markers-layer';
+    this.markersLayerEl.setAttribute('data-agentation', 'markers');
+    document.body.appendChild(this.markersLayerEl);
+
+    // Create drag selection element
+    this.dragSelectionEl = document.createElement('div');
+    this.dragSelectionEl.className = 'agentation-drag-selection';
+    this.dragSelectionEl.style.display = 'none';
+    this.dragSelectionEl.setAttribute('data-agentation', 'drag-selection');
+    document.body.appendChild(this.dragSelectionEl);
+
+    // Create highlights container for multi-select element highlights
+    this.highlightsContainerEl = document.createElement('div');
+    this.highlightsContainerEl.className = 'agentation-highlights-container';
+    this.highlightsContainerEl.setAttribute('data-agentation', 'highlights');
+    document.body.appendChild(this.highlightsContainerEl);
+  }
+
+  updateToolbar() {
+    const state = this.store.getState();
+    const isExpanded = state.isActive;
+    const isDark = state.isDarkMode;
+    const annotationCount = state.annotations.length;
+    const color = state.settings.annotationColor;
+
+    // Build container classes - collapsed when not active, expanded when active
+    const containerClasses = [
+      'agentation-toolbar__container',
+      isExpanded ? 'agentation-toolbar__container--expanded' : 'agentation-toolbar__container--collapsed',
+      !isDark ? 'agentation-toolbar__container--light' : ''
+    ].filter(Boolean).join(' ');
+
+    let html = `<div class="${containerClasses}">`;
+
+    // Main button (collapsed state shows icon + badge)
+    html += `<div class="agentation-toolbar__toggle ${isExpanded ? 'agentation-toolbar__toggle--hidden' : ''}" data-action="activate" style="color: ${color}">`;
+    html += Icons.listSparkle(24);
+    if (annotationCount > 0) {
+      html += `<span class="agentation-toolbar__badge" style="background-color: ${color}">${annotationCount}</span>`;
+    }
+    html += '</div>';
+
+    // Expanded controls
+    html += `<div class="agentation-toolbar__controls ${isExpanded ? '' : 'agentation-toolbar__controls--hidden'}">`;
+
+    // Pause/Play button
+    html += `<button class="agentation-toolbar__button ${isDark ? '' : 'agentation-toolbar__button--light'}" data-action="freeze" title="${state.isFrozen ? 'Resume animations' : 'Pause animations'}">`;
+    html += Icons.pausePlay(24, state.isFrozen);
+    html += '</button>';
+
+    // Toggle markers visibility
+    html += `<button class="agentation-toolbar__button ${isDark ? '' : 'agentation-toolbar__button--light'}" data-action="toggle-markers" title="${state.showMarkers ? 'Hide markers' : 'Show markers'}" ${annotationCount === 0 ? 'disabled' : ''}>`;
+    html += Icons.eye(24, state.showMarkers);
+    html += '</button>';
+
+    // Copy button
+    html += `<button class="agentation-toolbar__button ${isDark ? '' : 'agentation-toolbar__button--light'}" data-action="copy" title="Copy feedback" ${annotationCount === 0 ? 'disabled' : ''}>`;
+    html += state.copied ? Icons.checkCircle(24) : Icons.copy(24);
+    html += '</button>';
+
+    // Clear button
+    html += `<button class="agentation-toolbar__button agentation-toolbar__button--danger ${isDark ? '' : 'agentation-toolbar__button--light'}" data-action="clear" title="Clear all" ${annotationCount === 0 ? 'disabled' : ''}>`;
+    html += state.cleared ? Icons.check(16) : Icons.trash(24);
+    html += '</button>';
+
+    // Settings button
+    html += `<button class="agentation-toolbar__button ${isDark ? '' : 'agentation-toolbar__button--light'} ${state.showSettings ? 'agentation-toolbar__button--active' : ''}" data-action="settings" title="Settings">`;
+    html += Icons.gear(24);
+    html += '</button>';
+
+    html += '<div class="agentation-toolbar__divider"></div>';
+
+    // Close/Exit button
+    html += `<button class="agentation-toolbar__button ${isDark ? '' : 'agentation-toolbar__button--light'}" data-action="deactivate" title="Exit feedback mode">`;
+    html += Icons.close(24);
+    html += '</button>';
+
+    html += '</div>'; // controls
+
+    // Settings Panel
+    if (state.showSettingsVisible) {
+      html += this.renderSettingsPanel();
+    }
+
+    html += '</div>'; // container
+
+    this.toolbarEl.innerHTML = html;
+  }
+
+  renderSettingsPanel() {
+    const state = this.store.getState();
+    const isDark = state.isDarkMode;
+    const settings = state.settings;
+    const color = settings.annotationColor;
+
+    let html = `<div class="agentation-settings-panel ${isDark ? '' : 'agentation-settings-panel--light'} ${state.showSettings ? 'agentation-settings-panel--enter' : 'agentation-settings-panel--exit'}">`;
+
+    // Header
+    html += '<div class="agentation-settings-panel__header">';
+    html += `<span class="agentation-settings-panel__brand"><span class="agentation-settings-panel__slash" style="color: ${color}">/</span>agentation</span>`;
+    html += `<span class="agentation-settings-panel__version">v${VERSION}</span>`;
+    html += `<button class="agentation-settings-panel__theme-toggle" data-action="theme" title="${isDark ? 'Switch to light mode' : 'Switch to dark mode'}">`;
+    html += isDark ? Icons.sun(14) : Icons.moon(14);
+    html += '</button>';
+    html += '</div>';
+
+    // Output Detail section
+    html += '<div class="agentation-settings-panel__section">';
+    html += '<div class="agentation-settings-panel__row">';
+    html += `<div class="agentation-settings-panel__label ${isDark ? '' : 'agentation-settings-panel__label--light'}">Output Detail</div>`;
+    html += `<button class="agentation-settings-panel__cycle-btn ${isDark ? '' : 'agentation-settings-panel__cycle-btn--light'}" data-action="cycle-detail">`;
+    html += `<span class="agentation-settings-panel__cycle-text">${OUTPUT_DETAIL_OPTIONS.find(o => o.value === settings.outputDetail)?.label || 'Standard'}</span>`;
+    html += '<span class="agentation-settings-panel__cycle-dots">';
+    OUTPUT_DETAIL_OPTIONS.forEach((opt) => {
+      html += `<span class="agentation-settings-panel__dot ${settings.outputDetail === opt.value ? 'agentation-settings-panel__dot--active' : ''}"></span>`;
+    });
+    html += '</span>';
+    html += '</button>';
+    html += '</div>';
+    html += '</div>';
+
+    // Marker Colour section
+    html += '<div class="agentation-settings-panel__section">';
+    html += `<div class="agentation-settings-panel__label agentation-settings-panel__label--marker ${isDark ? '' : 'agentation-settings-panel__label--light'}">Marker Colour</div>`;
+    html += '<div class="agentation-settings-panel__colors">';
+    COLOR_OPTIONS.forEach((c) => {
+      const isSelected = settings.annotationColor === c.value;
+      html += `<div class="agentation-settings-panel__color-ring ${isSelected ? 'agentation-settings-panel__color-ring--selected' : ''}" style="border-color: ${isSelected ? c.value : 'transparent'}" data-action="set-color" data-color="${c.value}" title="${c.label}">`;
+      html += `<div class="agentation-settings-panel__color-dot" style="background-color: ${c.value}"></div>`;
+      html += '</div>';
+    });
+    html += '</div>';
+    html += '</div>';
+
+    // Toggle switches section
+    html += '<div class="agentation-settings-panel__section">';
+
+    // Clear after output toggle
+    html += '<label class="agentation-settings-panel__toggle-row">';
+    html += `<input type="checkbox" class="agentation-settings-panel__checkbox" data-setting="autoClearAfterCopy" ${settings.autoClearAfterCopy ? 'checked' : ''}>`;
+    html += `<span class="agentation-settings-panel__custom-checkbox ${settings.autoClearAfterCopy ? 'agentation-settings-panel__custom-checkbox--checked' : ''}">`;
+    if (settings.autoClearAfterCopy) {
+      html += Icons.checkSmall(14);
+    }
+    html += '</span>';
+    html += `<span class="agentation-settings-panel__toggle-label ${isDark ? '' : 'agentation-settings-panel__toggle-label--light'}">Clear after output</span>`;
+    html += '</label>';
+
+    // Block interactions toggle
+    html += '<label class="agentation-settings-panel__toggle-row">';
+    html += `<input type="checkbox" class="agentation-settings-panel__checkbox" data-setting="blockInteractions" ${settings.blockInteractions ? 'checked' : ''}>`;
+    html += `<span class="agentation-settings-panel__custom-checkbox ${settings.blockInteractions ? 'agentation-settings-panel__custom-checkbox--checked' : ''}">`;
+    if (settings.blockInteractions) {
+      html += Icons.checkSmall(14);
+    }
+    html += '</span>';
+    html += `<span class="agentation-settings-panel__toggle-label ${isDark ? '' : 'agentation-settings-panel__toggle-label--light'}">Block page interactions</span>`;
+    html += '</label>';
+
+    html += '</div>';
+
+    html += '</div>'; // settings panel
+
+    return html;
+  }
+
+  updateSettingsPanel() {
+    // Update settings panel in place without rebuilding entire toolbar
+    const state = this.store.getState();
+    const settings = state.settings;
+    const isDark = state.isDarkMode;
+    const color = settings.annotationColor;
+
+    // Update output detail text and dots
+    const cycleBtn = this.toolbarEl.querySelector('[data-action="cycle-detail"]');
+    if (cycleBtn) {
+      const textEl = cycleBtn.querySelector('.agentation-settings-panel__cycle-text');
+      if (textEl) {
+        textEl.textContent = OUTPUT_DETAIL_OPTIONS.find(o => o.value === settings.outputDetail)?.label || 'Standard';
+      }
+      const dots = cycleBtn.querySelectorAll('.agentation-settings-panel__dot');
+      dots.forEach((dot, i) => {
+        dot.classList.toggle('agentation-settings-panel__dot--active', OUTPUT_DETAIL_OPTIONS[i].value === settings.outputDetail);
+      });
+    }
+
+    // Update color selection
+    const colorRings = this.toolbarEl.querySelectorAll('[data-action="set-color"]');
+    colorRings.forEach(ring => {
+      const isSelected = ring.dataset.color === settings.annotationColor;
+      ring.classList.toggle('agentation-settings-panel__color-ring--selected', isSelected);
+      ring.style.borderColor = isSelected ? ring.dataset.color : 'transparent';
+    });
+
+    // Update checkboxes
+    const checkboxes = this.toolbarEl.querySelectorAll('[data-setting]');
+    checkboxes.forEach(checkbox => {
+      const setting = checkbox.dataset.setting;
+      const isChecked = settings[setting];
+      checkbox.checked = isChecked;
+      const customCheckbox = checkbox.nextElementSibling;
+      if (customCheckbox) {
+        customCheckbox.classList.toggle('agentation-settings-panel__custom-checkbox--checked', isChecked);
+        customCheckbox.innerHTML = isChecked ? Icons.checkSmall(14) : '';
+      }
+    });
+
+    // Update brand slash color
+    const slash = this.toolbarEl.querySelector('.agentation-settings-panel__slash');
+    if (slash) {
+      slash.style.color = color;
+    }
+  }
+
+  bindEvents() {
+    // Toolbar clicks (delegated)
+    this.toolbarEl.addEventListener('click', (e) => {
+      const actionEl = e.target.closest('[data-action]');
+      if (!actionEl) return;
+
+      e.stopPropagation();
+      const action = actionEl.dataset.action;
+
+      switch (action) {
+        case 'activate':
+          this.activate();
+          break;
+        case 'deactivate':
+          this.deactivate();
+          break;
+        case 'freeze':
+          this.toggleFreeze();
+          break;
+        case 'toggle-markers':
+          this.toggleMarkers();
+          break;
+        case 'copy':
+          this.copyToClipboard();
+          break;
+        case 'clear':
+          this.clearAnnotations();
+          break;
+        case 'settings':
+          this.toggleSettings();
+          break;
+        case 'theme':
+          this.toggleTheme();
+          break;
+        case 'cycle-detail':
+          this.cycleDetailLevel();
+          break;
+        case 'set-color':
+          this.setColor(actionEl.dataset.color);
+          break;
+      }
+    });
+
+    // Settings checkbox changes
+    this.toolbarEl.addEventListener('change', (e) => {
+      const checkbox = e.target.closest('[data-setting]');
+      if (checkbox) {
+        const setting = checkbox.dataset.setting;
+        const state = this.store.getState();
+        const newSettings = { ...state.settings, [setting]: checkbox.checked };
+        this.store.setState({ settings: newSettings });
+        saveSettings(newSettings);
+      }
+    });
+
+    // Document-level mouse events for element selection and drag-select
+    document.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+    document.addEventListener('mouseup', (e) => this.handleMouseUp(e));
+
+    // Click handler for single element selection (capture phase to intercept before element handlers)
+    document.addEventListener('click', (e) => this.handleClick(e), true);
+
+    // Global escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        const state = this.store.getState();
+        if (state.pendingAnnotation) {
+          this.store.setState({ pendingAnnotation: null });
+          if (this.popup) {
+            this.popup.destroy();
+            this.popup = null;
+          }
+        } else if (state.isActive) {
+          this.deactivate();
+        }
+      }
+    });
+
+    // Click outside to close settings
+    document.addEventListener('click', (e) => {
+      const state = this.store.getState();
+      if (state.showSettings) {
+        const settingsPanel = this.toolbarEl.querySelector('.agentation-settings-panel');
+        const settingsBtn = this.toolbarEl.querySelector('[data-action="settings"]');
+        if (settingsPanel && !settingsPanel.contains(e.target) && !settingsBtn?.contains(e.target)) {
+          this.closeSettings();
+        }
+      }
+    });
+
+    // Scroll tracking
+    window.addEventListener('scroll', () => {
+      this.store.setState({ scrollY: window.scrollY });
+      this.updateMarkerPositions();
+    });
+
+    window.addEventListener('resize', () => {
+      this.updateMarkerPositions();
+    });
+  }
+
+  onStateChange(state, prevState) {
+    // Only do full toolbar rebuild when necessary (not for settings-only changes)
+    const needsFullRebuild = !prevState ||
+      prevState.isActive !== state.isActive ||
+      prevState.isDarkMode !== state.isDarkMode ||
+      prevState.annotations.length !== state.annotations.length ||
+      prevState.showMarkers !== state.showMarkers ||
+      prevState.copied !== state.copied ||
+      prevState.cleared !== state.cleared ||
+      prevState.isFrozen !== state.isFrozen ||
+      prevState.showSettings !== state.showSettings ||
+      prevState.showSettingsVisible !== state.showSettingsVisible;
+
+    if (needsFullRebuild) {
+      this.updateToolbar();
+    } else if (state.showSettingsVisible) {
+      // For settings-only changes, just update the settings panel in place
+      this.updateSettingsPanel();
+    }
+
+    this.renderMarkers();
+
+    // Hide hover highlight when not active or when there's a pending annotation
+    if (!state.isActive || state.pendingAnnotation) {
+      this.hideHoverHighlight();
+    }
+
+    // Hide drag selection when not dragging
+    if (!state.isDragging && this.dragSelectionEl) {
+      this.dragSelectionEl.style.display = 'none';
+    }
+  }
+
+  activate() {
+    this.store.setState({ isActive: true });
+  }
+
+  deactivate() {
+    this.store.setState({ isActive: false, showSettings: false, showSettingsVisible: false });
+  }
+
+  toggleFreeze() {
+    const state = this.store.getState();
+    const newFrozen = !state.isFrozen;
+
+    if (newFrozen) {
+      // Pause all animations
+      document.querySelectorAll('*').forEach(el => {
+        const style = window.getComputedStyle(el);
+        if (style.animationName !== 'none' || style.transitionDuration !== '0s') {
+          el.style.animationPlayState = 'paused';
+          this.frozenAnimations.push(el);
+        }
+      });
+    } else {
+      // Resume all animations
+      this.frozenAnimations.forEach(el => {
+        el.style.animationPlayState = '';
+      });
+      this.frozenAnimations = [];
+    }
+
+    this.store.setState({ isFrozen: newFrozen });
+  }
+
+  toggleMarkers() {
+    const state = this.store.getState();
+    this.store.setState({ showMarkers: !state.showMarkers });
+  }
+
+  toggleSettings() {
+    const state = this.store.getState();
+    if (state.showSettings) {
+      this.closeSettings();
+    } else {
+      this.store.setState({ showSettings: true, showSettingsVisible: true });
+    }
+  }
+
+  closeSettings() {
+    this.store.setState({ showSettings: false });
+    // Delay hiding for exit animation
+    setTimeout(() => {
+      this.store.setState({ showSettingsVisible: false });
+    }, 200);
+  }
+
+  toggleTheme() {
+    const state = this.store.getState();
+    const newTheme = !state.isDarkMode;
+    this.store.setState({ isDarkMode: newTheme });
+    saveTheme(newTheme);
+  }
+
+  cycleDetailLevel() {
+    const state = this.store.getState();
+    const currentIndex = OUTPUT_DETAIL_OPTIONS.findIndex(o => o.value === state.settings.outputDetail);
+    const nextIndex = (currentIndex + 1) % OUTPUT_DETAIL_OPTIONS.length;
+    const newSettings = { ...state.settings, outputDetail: OUTPUT_DETAIL_OPTIONS[nextIndex].value };
+    this.store.setState({ settings: newSettings });
+    saveSettings(newSettings);
+  }
+
+  setColor(color) {
+    const state = this.store.getState();
+    const newSettings = { ...state.settings, annotationColor: color };
+    this.store.setState({ settings: newSettings });
+    saveSettings(newSettings);
+  }
+
+  // Click handler for single element selection (uses capture phase)
+  handleClick(e) {
+    const state = this.store.getState();
+    if (!state.isActive) return;
+
+    // Skip if we just finished a drag
+    if (this.justFinishedDrag) {
+      this.justFinishedDrag = false;
+      return;
+    }
+
+    const target = e.target;
+
+    // Don't handle clicks on agentation elements
+    if (target.closest('[data-agentation]')) return;
+
+    const isInteractive = target.closest('button, a, input, select, textarea, [role="button"], [onclick]');
+
+    // Block interactions on interactive elements when enabled
+    if (state.settings.blockInteractions && isInteractive) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    // If there's a pending annotation, shake the popup
+    if (state.pendingAnnotation) {
+      if (isInteractive && !state.settings.blockInteractions) {
+        return;
+      }
+      e.preventDefault();
+      if (this.popup) {
+        this.popup.shake();
+      }
+      return;
+    }
+
+    // If editing, also shake
+    if (state.editingAnnotation) {
+      if (isInteractive && !state.settings.blockInteractions) {
+        return;
+      }
+      e.preventDefault();
+      if (this.editPopup) {
+        this.editPopup.shake();
+      }
+      return;
+    }
+
+    e.preventDefault();
+
+    // Get the element under the click
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    if (!elementUnder) return;
+
+    this.createAnnotation(elementUnder, e.clientX, e.clientY);
+  }
+
+  handleMouseDown(e) {
+    const state = this.store.getState();
+    if (!state.isActive || state.pendingAnnotation) return;
+
+    // Don't start on agentation elements
+    if (e.target.closest('[data-agentation]')) return;
+
+    // Don't start drag on text elements - allow native text selection
+    // This matches the original React implementation
+    const TEXT_TAGS = new Set([
+      'P', 'SPAN', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'TD', 'TH',
+      'LABEL', 'BLOCKQUOTE', 'FIGCAPTION', 'CAPTION', 'LEGEND', 'DT', 'DD',
+      'PRE', 'CODE', 'EM', 'STRONG', 'B', 'I', 'U', 'S', 'A', 'TIME',
+      'ADDRESS', 'CITE', 'Q', 'ABBR', 'DFN', 'MARK', 'SMALL', 'SUB', 'SUP',
+      'INPUT', 'TEXTAREA', 'SELECT'
+    ]);
+
+    if (TEXT_TAGS.has(e.target.tagName) || e.target.isContentEditable) {
+      return;
+    }
+
+    this.mouseDownPos = { x: e.clientX, y: e.clientY };
+    this.dragStart = null;
+  }
+
+  handleMouseMove(e) {
+    const state = this.store.getState();
+    if (!state.isActive || state.pendingAnnotation) return;
+
+    // If not in a potential drag, just do hover highlighting
+    if (!this.mouseDownPos) {
+      this.updateHoverHighlight(e);
+      return;
+    }
+
+    // Check if we've exceeded drag threshold
+    const dx = e.clientX - this.mouseDownPos.x;
+    const dy = e.clientY - this.mouseDownPos.y;
+    const distance = dx * dx + dy * dy;
+    const thresholdSq = this.DRAG_THRESHOLD * this.DRAG_THRESHOLD;
+
+    if (!state.isDragging && distance >= thresholdSq) {
+      // Start dragging
+      this.dragStart = { ...this.mouseDownPos };
+      this.store.setState({ isDragging: true });
+      this.hideHoverHighlight();
+
+      // Clear any existing text selection and prevent new selection during drag
+      window.getSelection()?.removeAllRanges();
+      document.body.style.userSelect = 'none';
+      document.body.style.webkitUserSelect = 'none';
+    }
+
+    if ((state.isDragging || distance >= thresholdSq) && this.dragStart) {
+      // Update drag selection rectangle
+      const left = Math.min(this.dragStart.x, e.clientX);
+      const top = Math.min(this.dragStart.y, e.clientY);
+      const width = Math.abs(e.clientX - this.dragStart.x);
+      const height = Math.abs(e.clientY - this.dragStart.y);
+
+      this.dragSelectionEl.style.display = 'block';
+      this.dragSelectionEl.style.transform = `translate(${left}px, ${top}px)`;
+      this.dragSelectionEl.style.width = `${width}px`;
+      this.dragSelectionEl.style.height = `${height}px`;
+
+      // Throttle element detection and highlighting
+      const now = Date.now();
+      if (now - this.lastElementUpdate < this.ELEMENT_UPDATE_THROTTLE) {
+        return;
+      }
+      this.lastElementUpdate = now;
+
+      // Find and highlight elements during drag
+      const right = left + width;
+      const bottom = top + height;
+      this.updateDragHighlights(left, top, right, bottom);
+    }
+  }
+
+  updateDragHighlights(left, top, right, bottom) {
+    // Find elements within the selection rectangle
+    const matchingRects = [];
+    const MEANINGFUL_TAGS = new Set([
+      'BUTTON', 'A', 'INPUT', 'IMG', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+      'LI', 'LABEL', 'TD', 'TH', 'SECTION', 'ARTICLE', 'ASIDE', 'NAV'
+    ]);
+
+    // Sample points for element detection (corners, edges, center)
+    const midX = (left + right) / 2;
+    const midY = (top + bottom) / 2;
+    const points = [
+      [left, top], [right, top], [left, bottom], [right, bottom],
+      [midX, midY], [midX, top], [midX, bottom], [left, midY], [right, midY]
+    ];
+
+    const candidateElements = new Set();
+
+    // Get elements at sample points
+    for (const [x, y] of points) {
+      const elements = document.elementsFromPoint(x, y);
+      for (const el of elements) {
+        if (el instanceof HTMLElement) candidateElements.add(el);
+      }
+    }
+
+    // Also check nearby meaningful elements
+    const nearbyElements = document.querySelectorAll(
+      'button, a, input, img, p, h1, h2, h3, h4, h5, h6, li, label, td, th, div, span, section, article, aside, nav'
+    );
+    for (const el of nearbyElements) {
+      if (!(el instanceof HTMLElement)) continue;
+      const rect = el.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const centerInside = centerX >= left && centerX <= right && centerY >= top && centerY <= bottom;
+
+      const overlapX = Math.min(rect.right, right) - Math.max(rect.left, left);
+      const overlapY = Math.min(rect.bottom, bottom) - Math.max(rect.top, top);
+      const overlapArea = overlapX > 0 && overlapY > 0 ? overlapX * overlapY : 0;
+      const elementArea = rect.width * rect.height;
+      const overlapRatio = elementArea > 0 ? overlapArea / elementArea : 0;
+
+      if (centerInside || overlapRatio > 0.5) {
+        candidateElements.add(el);
+      }
+    }
+
+    // Filter to meaningful elements
+    for (const el of candidateElements) {
+      if (el.closest('[data-agentation]')) continue;
+
+      const rect = el.getBoundingClientRect();
+      if (rect.width > window.innerWidth * 0.8 && rect.height > window.innerHeight * 0.5) continue;
+      if (rect.width < 10 || rect.height < 10) continue;
+
+      // Check intersection with selection
+      if (rect.left < right && rect.right > left && rect.top < bottom && rect.bottom > top) {
+        const tagName = el.tagName;
+        let shouldInclude = MEANINGFUL_TAGS.has(tagName);
+
+        // For divs and spans, only include if they have meaningful content
+        if (!shouldInclude && (tagName === 'DIV' || tagName === 'SPAN')) {
+          const hasText = el.textContent && el.textContent.trim().length > 0;
+          const isInteractive = el.onclick !== null ||
+            el.getAttribute('role') === 'button' ||
+            el.getAttribute('role') === 'link';
+
+          if ((hasText || isInteractive) && !el.querySelector('p, h1, h2, h3, h4, h5, h6, button, a')) {
+            shouldInclude = true;
+          }
+        }
+
+        if (shouldInclude) {
+          // Check if any existing match contains this element (filter children)
+          let dominated = false;
+          for (const existingRect of matchingRects) {
+            if (existingRect.left <= rect.left && existingRect.right >= rect.right &&
+                existingRect.top <= rect.top && existingRect.bottom >= rect.bottom) {
+              dominated = true;
+              break;
+            }
+          }
+          if (!dominated) {
+            matchingRects.push(rect);
+          }
+        }
+      }
+    }
+
+    // Update highlights container with matched elements
+    const container = this.highlightsContainerEl;
+    while (container.children.length > matchingRects.length) {
+      container.removeChild(container.lastChild);
+    }
+    matchingRects.forEach((rect, i) => {
+      let div = container.children[i];
+      if (!div) {
+        div = document.createElement('div');
+        div.className = 'agentation-selected-element-highlight';
+        container.appendChild(div);
+      }
+      div.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+      div.style.width = `${rect.width}px`;
+      div.style.height = `${rect.height}px`;
+    });
+  }
+
+  handleMouseUp(e) {
+    const state = this.store.getState();
+    if (!state.isActive) return;
+
+    const wasDragging = state.isDragging;
+    const dragStart = this.dragStart;
+
+    if (wasDragging && dragStart) {
+      // Set flag to prevent click handler from firing
+      this.justFinishedDrag = true;
+
+      // Finish drag selection - find all elements in the selection rectangle
+      const left = Math.min(dragStart.x, e.clientX);
+      const top = Math.min(dragStart.y, e.clientY);
+      const right = Math.max(dragStart.x, e.clientX);
+      const bottom = Math.max(dragStart.y, e.clientY);
+
+      // Only process if drag area is meaningful size
+      if ((right - left) > 20 && (bottom - top) > 20) {
+        const selectedElements = this.getElementsInRect(left, top, right, bottom);
+        if (selectedElements.length > 0) {
+          this.createMultiSelectAnnotation(selectedElements, left, top, right, bottom);
+        } else {
+          // No elements, but allow annotation on empty area
+          this.createAreaAnnotation(left, top, right, bottom, e.clientX, e.clientY);
+        }
+      }
+
+      this.dragSelectionEl.style.display = 'none';
+      this.store.setState({ isDragging: false });
+
+      // Clear highlights container
+      this.highlightsContainerEl.innerHTML = '';
+
+      // Restore text selection ability
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
+    } else if (wasDragging) {
+      // Was dragging but no dragStart - just set the flag
+      this.justFinishedDrag = true;
+    }
+
+    // Note: Single clicks are now handled by handleClick, not here
+    this.mouseDownPos = null;
+    this.dragStart = null;
+  }
+
+  createAreaAnnotation(left, top, right, bottom, clientX, clientY) {
+    const x = (clientX / window.innerWidth) * 100;
+    const y = clientY + window.scrollY;
+    const width = right - left;
+    const height = bottom - top;
+
+    const pendingAnnotation = {
+      x,
+      y,
+      clientY,
+      element: 'Area selection',
+      elementPath: `region at (${Math.round(left)}, ${Math.round(top)})`,
+      boundingBox: {
+        x: left,
+        y: top + window.scrollY,
+        width,
+        height
+      },
+      isMultiSelect: true
+    };
+
+    this.store.setState({ pendingAnnotation, hoverInfo: null });
+    this.showPopup(pendingAnnotation);
+  }
+
+  updateHoverHighlight(e) {
+    const state = this.store.getState();
+    if (state.pendingAnnotation || state.isDragging) return;
+
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+
+    if (!target || target.closest('[data-agentation]') || target === document.body || target === document.documentElement) {
+      this.hideHoverHighlight();
+      return;
+    }
+
+    const rect = target.getBoundingClientRect();
+    const color = state.settings.annotationColor;
+
+    this.hoverHighlightEl.style.display = 'block';
+    this.hoverHighlightEl.style.pointerEvents = 'none';
+    this.hoverHighlightEl.style.left = rect.left + 'px';
+    this.hoverHighlightEl.style.top = rect.top + 'px';
+    this.hoverHighlightEl.style.width = rect.width + 'px';
+    this.hoverHighlightEl.style.height = rect.height + 'px';
+    this.hoverHighlightEl.style.borderColor = hexToRgba(color, 0.5);
+    this.hoverHighlightEl.style.backgroundColor = hexToRgba(color, 0.04);
+
+    if (state.hoverInfo?.element !== target) {
+      this.store.setState({ hoverInfo: { element: target, rect } });
+    }
+  }
+
+  hideHoverHighlight() {
+    this.hoverHighlightEl.style.display = 'none';
+    // Only update state if hoverInfo is not already null (prevents infinite loop)
+    if (this.store.getState().hoverInfo !== null) {
+      this.store.setState({ hoverInfo: null });
+    }
+  }
+
+  getElementsInRect(left, top, right, bottom) {
+    const elements = [];
+    const allElements = document.querySelectorAll('*');
+
+    for (const el of allElements) {
+      // Skip agentation elements and non-visible elements
+      if (el.closest('[data-agentation]')) continue;
+      if (el === document.body || el === document.documentElement) continue;
+
+      const rect = el.getBoundingClientRect();
+
+      // Skip elements with no size
+      if (rect.width === 0 || rect.height === 0) continue;
+
+      // Check if element intersects with selection rectangle
+      const intersects = !(rect.right < left || rect.left > right || rect.bottom < top || rect.top > bottom);
+
+      if (intersects) {
+        // Only add leaf elements or meaningful containers
+        const isLeaf = el.children.length === 0;
+        const hasText = el.textContent?.trim().length > 0;
+        const isInteractive = ['button', 'a', 'input', 'select', 'textarea'].includes(el.tagName.toLowerCase());
+
+        if (isLeaf || isInteractive || (hasText && rect.width < 500 && rect.height < 200)) {
+          elements.push(el);
+        }
+      }
+    }
+
+    // Dedupe - remove elements that are children of other selected elements
+    return elements.filter(el => !elements.some(other => other !== el && other.contains(el)));
+  }
+
+  createMultiSelectAnnotation(elements, left, top, right, bottom) {
+    const state = this.store.getState();
+    const centerX = (left + right) / 2;
+    const centerY = (top + bottom) / 2;
+
+    // Build description of selected elements
+    const elementNames = elements.slice(0, 5).map(el => identifyElement(el).name);
+    const elementDescription = elements.length > 5
+      ? `${elementNames.join(', ')} + ${elements.length - 5} more`
+      : elementNames.join(', ');
+
+    const pending = {
+      id: generateId(),
+      element: `${elements.length} elements: ${elementDescription}`,
+      elementPath: elements[0] ? getElementPath(elements[0]) : '',
+      x: (centerX / window.innerWidth) * 100,
+      y: centerY + window.scrollY,
+      timestamp: Date.now(),
+      comment: '',
+      selectedText: '',
+      boundingBox: { x: left, y: top, width: right - left, height: bottom - top },
+      cssClasses: '',
+      nearbyText: '',
+      fullPath: elements[0] ? getFullElementPath(elements[0]) : '',
+      computedStyles: null,
+      accessibility: '',
+      nearbyElements: '',
+      isMultiSelect: true,
+      selectedElements: elements.length
+    };
+
+    this.store.setState({ pendingAnnotation: pending });
+
+    let popupY = centerY + 20;
+    if (popupY + 200 > window.innerHeight) {
+      popupY = centerY - 220;
+    }
+    if (popupY < 10) popupY = 10;
+
+    let popupX = centerX;
+    const popupHalfWidth = 140;
+    if (popupX - popupHalfWidth < 10) {
+      popupX = popupHalfWidth + 10;
+    } else if (popupX + popupHalfWidth > window.innerWidth - 10) {
+      popupX = window.innerWidth - popupHalfWidth - 10;
+    }
+
+    this.popup = new AnnotationPopup({
+      element: pending.element,
+      selectedText: '',
+      accentColor: GREEN,
+      lightMode: !state.isDarkMode,
+      computedStyles: null,
+      onSubmit: (comment) => {
+        this.addAnnotation(comment);
+        this.popup = null;
+      },
+      onCancel: () => {
+        this.store.setState({ pendingAnnotation: null });
+        this.popup = null;
+      }
+    });
+
+    this.popup.setPosition(popupX, popupY);
+  }
+
+  createAnnotation(target, clientX, clientY) {
+    const state = this.store.getState();
+    const rect = target.getBoundingClientRect();
+    const { name, path } = identifyElement(target);
+    const selectedText = getSelectedText();
+
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    const pending = {
+      id: generateId(),
+      element: name,
+      elementPath: path,
+      x: (clientX / window.innerWidth) * 100,
+      y: clientY + window.scrollY,
+      timestamp: Date.now(),
+      comment: '',
+      selectedText: selectedText,
+      boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      cssClasses: getElementClasses(target),
+      nearbyText: getNearbyText(target),
+      fullPath: getFullElementPath(target),
+      computedStyles: state.settings.outputDetail === 'forensic' ? getForensicComputedStyles(target) : getDetailedComputedStyles(target),
+      accessibility: getAccessibilityInfo(target),
+      nearbyElements: getNearbyElements(target)
+    };
+
+    this.store.setState({ pendingAnnotation: pending });
+
+    // Calculate popup position - ensure it stays within viewport
+    let popupX = centerX;
+    let popupY = centerY + 20;
+
+    // Keep X within bounds (popup is 280px wide, centered)
+    const popupHalfWidth = 140;
+    if (popupX - popupHalfWidth < 10) {
+      popupX = popupHalfWidth + 10;
+    } else if (popupX + popupHalfWidth > window.innerWidth - 10) {
+      popupX = window.innerWidth - popupHalfWidth - 10;
+    }
+
+    // Keep Y within bounds
+    if (popupY + 200 > window.innerHeight) {
+      popupY = centerY - 220;
+    }
+    if (popupY < 10) {
+      popupY = 10;
+    }
+
+    this.popup = new AnnotationPopup({
+      element: pending.element,
+      selectedText: selectedText,
+      accentColor: state.settings.annotationColor,
+      lightMode: !state.isDarkMode,
+      computedStyles: pending.computedStyles,
+      onSubmit: (comment) => {
+        this.addAnnotation(comment);
+        this.popup = null;
+      },
+      onCancel: () => {
+        this.store.setState({ pendingAnnotation: null });
+        this.popup = null;
+      }
+    });
+
+    this.popup.setPosition(popupX, popupY);
+  }
+
+  addAnnotation(comment) {
+    const state = this.store.getState();
+    const pending = state.pendingAnnotation;
+    if (!pending) return;
+
+    const annotation = { ...pending, comment };
+    const annotations = [...state.annotations, annotation];
+
+    this.store.setState({
+      annotations,
+      pendingAnnotation: null
+    });
+
+    saveAnnotations(this.pathname, annotations);
+
+    if (this.options.onAnnotationAdd) {
+      this.options.onAnnotationAdd(annotation);
+    }
+  }
+
+  renderMarkers() {
+    const state = this.store.getState();
+    if (!state.showMarkers || !state.isActive) {
+      this.markersLayerEl.innerHTML = '';
+      return;
+    }
+
+    const color = state.settings.annotationColor;
+    let html = '';
+
+    state.annotations.forEach((annotation, index) => {
+      const left = annotation.x;
+      const top = annotation.y - state.scrollY;
+
+      html += `<div class="agentation-marker" data-id="${annotation.id}" style="left: ${left}%; top: ${top}px; background-color: ${color}">`;
+      html += `<span class="agentation-marker__number">${index + 1}</span>`;
+      html += '</div>';
+    });
+
+    this.markersLayerEl.innerHTML = html;
+
+    // Bind marker events
+    this.markersLayerEl.querySelectorAll('.agentation-marker').forEach(marker => {
+      marker.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const id = marker.dataset.id;
+        if (e.shiftKey) {
+          this.deleteAnnotation(id);
+        } else {
+          this.editAnnotation(id);
+        }
+      });
+
+      marker.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        const id = marker.dataset.id;
+        this.editAnnotation(id);
+      });
+    });
+  }
+
+  updateMarkerPositions() {
+    const state = this.store.getState();
+    const markers = this.markersLayerEl.querySelectorAll('.agentation-marker');
+
+    markers.forEach(marker => {
+      const id = marker.dataset.id;
+      const annotation = state.annotations.find(a => a.id === id);
+      if (annotation) {
+        marker.style.top = (annotation.y - state.scrollY) + 'px';
+      }
+    });
+  }
+
+  editAnnotation(id) {
+    const state = this.store.getState();
+    const annotation = state.annotations.find(a => a.id === id);
+    if (!annotation) return;
+
+    const markerEl = this.markersLayerEl.querySelector(`[data-id="${id}"]`);
+    if (!markerEl) return;
+
+    const rect = markerEl.getBoundingClientRect();
+
+    this.editPopup = new AnnotationPopup({
+      element: annotation.element,
+      initialValue: annotation.comment,
+      submitLabel: 'Save',
+      accentColor: state.settings.annotationColor,
+      lightMode: !state.isDarkMode,
+      onSubmit: (comment) => {
+        const annotations = state.annotations.map(a =>
+          a.id === id ? { ...a, comment } : a
+        );
+        this.store.setState({ annotations });
+        saveAnnotations(this.pathname, annotations);
+        this.editPopup = null;
+
+        if (this.options.onAnnotationUpdate) {
+          this.options.onAnnotationUpdate({ ...annotation, comment });
+        }
+      },
+      onCancel: () => {
+        this.editPopup = null;
+      }
+    });
+
+    this.editPopup.setPosition(rect.left, rect.bottom + 10);
+  }
+
+  deleteAnnotation(id) {
+    const state = this.store.getState();
+    const deleted = state.annotations.find(a => a.id === id);
+    const annotations = state.annotations.filter(a => a.id !== id);
+    this.store.setState({ annotations });
+    saveAnnotations(this.pathname, annotations);
+
+    if (this.options.onAnnotationDelete && deleted) {
+      this.options.onAnnotationDelete(deleted);
+    }
+  }
+
+  copyToClipboard() {
+    const state = this.store.getState();
+    const output = generateOutput(state.annotations, this.pathname, state.settings.outputDetail);
+
+    if (this.options.copyToClipboard && navigator.clipboard) {
+      navigator.clipboard.writeText(output).then(() => {
+        this.store.setState({ copied: true });
+        setTimeout(() => this.store.setState({ copied: false }), 2000);
+
+        // Auto-clear if setting enabled
+        if (state.settings.autoClearAfterCopy) {
+          setTimeout(() => this.clearAnnotations(), 500);
+        }
+      });
+    }
+
+    if (this.options.onCopy) {
+      this.options.onCopy(output);
+    }
+  }
+
+  clearAnnotations() {
+    const state = this.store.getState();
+    if (state.annotations.length === 0) return;
+
+    const cleared = [...state.annotations];
+    this.store.setState({ annotations: [], cleared: true });
+    saveAnnotations(this.pathname, []);
+
+    setTimeout(() => this.store.setState({ cleared: false }), 2000);
+
+    if (this.options.onAnnotationsClear) {
+      this.options.onAnnotationsClear(cleared);
+    }
+  }
+
+  destroy() {
+    if (this.toolbarEl) this.toolbarEl.remove();
+    if (this.overlayEl) this.overlayEl.remove();
+    if (this.markersLayerEl) this.markersLayerEl.remove();
+    if (this.hoverHighlightEl) this.hoverHighlightEl.remove();
+    if (this.dragSelectionEl) this.dragSelectionEl.remove();
+    if (this.popup) this.popup.destroy();
+    if (this.editPopup) this.editPopup.destroy();
+
+    // Restore any frozen animations
+    this.frozenAnimations.forEach(el => {
+      el.style.animationPlayState = '';
+    });
+  }
+}
+
+// =============================================================================
+// Auto-initialization
+// =============================================================================
+
+function init() {
+  const root = document.getElementById('agentation-root');
+  if (root) {
+    let options = {};
+    try {
+      options = JSON.parse(root.dataset.options || '{}');
+    } catch (e) {}
+
+    window.agentation = new AgentationToolbar(root, options);
+  }
+}
+
+// Auto-init on DOMContentLoaded or immediately if DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export {
+  AgentationToolbar,
+  AgentationStore,
+  AnnotationPopup,
+  loadAnnotations,
+  saveAnnotations,
+  getStorageKey,
+  identifyElement,
+  getElementPath,
+  getNearbyText,
+  getElementClasses,
+  getDetailedComputedStyles,
+  getForensicComputedStyles,
+  getAccessibilityInfo,
+  getFullElementPath,
+  getNearbyElements,
+  isElementFixed,
+  hexToRgba,
+  generateId,
+  generateOutput,
+  DEFAULT_SETTINGS,
+  OUTPUT_DETAIL_OPTIONS,
+  COLOR_OPTIONS,
+  Icons
+};