markui-cli 0.1.0

package/src/overlay/overlay.js

@@ -0,0 +1,884 @@
+(function() {
+  'use strict';
+
+  // ── State ──────────────────────────────────────────────────────────
+  var annotateMode = false;
+  var annotations = []; // { selector, tagName, instruction, rect? }
+  var hoveredEl = null;
+  var panelOpen = false;
+  var toolbarCollapsed = false;
+
+  var SKIP_TAGS = ['HTML', 'HEAD', 'BODY', 'SCRIPT', 'STYLE', 'LINK', 'META', 'NOSCRIPT'];
+  var toolbarJustExpanded = false;
+
+  // Detect base URL for API calls — handles cross-origin (inject mode)
+  var MARKUI_BASE = '';
+  (function() {
+    var scripts = document.querySelectorAll('script[src*="/__markui__/overlay.js"]');
+    if (scripts.length > 0) {
+      var src = scripts[scripts.length - 1].src;
+      var idx = src.indexOf('/__markui__/');
+      if (idx !== -1) {
+        var origin = src.substring(0, idx);
+        // Only set base if it's a different origin
+        if (origin && origin !== location.origin) {
+          MARKUI_BASE = origin;
+        }
+      }
+    }
+  })();
+
+  // ── Squircle (iOS continuous corners) ────────────────────────────
+
+  function squirclePath(w, h, r) {
+    r = Math.min(r, w / 2, h / 2);
+    var p = Math.min(r * 1.28, w / 2, h / 2);
+    var c = p * 0.8;
+    function n(v) { return Math.round(v * 100) / 100; }
+    return 'path("' +
+      'M ' + n(p) + ' 0' +
+      ' L ' + n(w - p) + ' 0' +
+      ' C ' + n(w - p + c) + ' 0 ' + n(w) + ' ' + n(p - c) + ' ' + n(w) + ' ' + n(p) +
+      ' L ' + n(w) + ' ' + n(h - p) +
+      ' C ' + n(w) + ' ' + n(h - p + c) + ' ' + n(w - p + c) + ' ' + n(h) + ' ' + n(w - p) + ' ' + n(h) +
+      ' L ' + n(p) + ' ' + n(h) +
+      ' C ' + n(p - c) + ' ' + n(h) + ' 0 ' + n(h - p + c) + ' 0 ' + n(h - p) +
+      ' L 0 ' + n(p) +
+      ' C 0 ' + n(p - c) + ' ' + n(p - c) + ' 0 ' + n(p) + ' 0' +
+      ' Z")';
+  }
+
+  function applySquircle(el, r) {
+    if (!el) return;
+    var rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    el.style.clipPath = squirclePath(rect.width, rect.height, r);
+  }
+
+  function applyToolbarSquircles() {
+    applySquircle(document.getElementById('markui-toggle'), 8);
+    applySquircle(document.getElementById('markui-count'), 8);
+    applySquircle(document.getElementById('markui-trash-all'), 8);
+    applySquircle(document.getElementById('markui-copy'), 8);
+    applySquircle(document.getElementById('markui-collapse'), 8);
+    // Mini button has fixed 40x40 dimensions, may be hidden
+    // Mini button uses border-radius only (no clip-path) to preserve shadow
+  }
+
+  function applyPopupSquircles() {
+    setTimeout(function() {
+      applySquircle(document.getElementById('markui-popup-attach'), 8);
+      applySquircle(document.getElementById('markui-popup-delete'), 8);
+    }, 10);
+  }
+
+  // ── Helpers ────────────────────────────────────────────────────────
+
+  function isMarkuiEl(el) {
+    if (!el) return false;
+    if (el.className && typeof el.className === 'string' && el.className.indexOf('markui-') !== -1) return true;
+    if (el.id && el.id.indexOf('markui-') !== -1) return true;
+    var p = el.parentElement;
+    while (p) {
+      if (p.id && p.id.indexOf('markui-') !== -1) return true;
+      if (p.className && typeof p.className === 'string' && p.className.indexOf('markui-') !== -1) return true;
+      p = p.parentElement;
+    }
+    return false;
+  }
+
+  function shouldSkip(el) {
+    if (!el || !el.tagName) return true;
+    if (SKIP_TAGS.indexOf(el.tagName) !== -1) return true;
+    return isMarkuiEl(el);
+  }
+
+  // ── Selector Detection ────────────────────────────────────────────
+
+  function getBestSelector(el) {
+    if (!el || !el.tagName) return '';
+    var tag = el.tagName.toLowerCase();
+
+    // 1. ID
+    if (el.id && !el.id.startsWith('markui-')) {
+      if (document.querySelectorAll('#' + CSS.escape(el.id)).length === 1) {
+        return '#' + el.id;
+      }
+    }
+
+    // 2. Single unique class
+    if (el.classList) {
+      for (var i = 0; i < el.classList.length; i++) {
+        var cls = el.classList[i];
+        if (cls.startsWith('markui-')) continue;
+        try {
+          if (document.querySelectorAll('.' + CSS.escape(cls)).length === 1) {
+            return '.' + cls;
+          }
+        } catch(e) {}
+      }
+    }
+
+    // 3. Tag + most specific class
+    if (el.classList && el.classList.length > 0) {
+      var best = null;
+      var bestCount = Infinity;
+      for (var i = 0; i < el.classList.length; i++) {
+        var cls = el.classList[i];
+        if (cls.startsWith('markui-')) continue;
+        try {
+          var count = document.querySelectorAll(tag + '.' + CSS.escape(cls)).length;
+          if (count < bestCount) {
+            bestCount = count;
+            best = cls;
+          }
+        } catch(e) {}
+      }
+      if (best && bestCount <= 3) {
+        return tag + '.' + best;
+      }
+    }
+
+    // 4. Ancestry path (max 3 levels)
+    var parts = [];
+    var current = el;
+    for (var depth = 0; depth < 3 && current && current !== document.body; depth++) {
+      var t = current.tagName.toLowerCase();
+      if (current.id && !current.id.startsWith('markui-')) {
+        parts.unshift('#' + current.id);
+        break;
+      }
+      var parent = current.parentElement;
+      if (parent) {
+        var siblings = Array.from(parent.children).filter(function(c) {
+          return c.tagName === current.tagName;
+        });
+        if (siblings.length > 1) {
+          var idx = siblings.indexOf(current) + 1;
+          t += ':nth-child(' + (Array.from(parent.children).indexOf(current) + 1) + ')';
+        }
+      }
+      // Add first non-markui class if available
+      if (current.classList) {
+        for (var i = 0; i < current.classList.length; i++) {
+          if (!current.classList[i].startsWith('markui-')) {
+            t += '.' + current.classList[i];
+            break;
+          }
+        }
+      }
+      parts.unshift(t);
+      current = parent;
+    }
+    return parts.join(' > ');
+  }
+
+  // ── Sync annotations with server ──────────────────────────────────
+
+  function saveAnnotations() {
+    fetch(MARKUI_BASE + '/__markui__/annotations', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        page: location.pathname,
+        annotations: annotations
+      })
+    }).catch(function() {});
+    renderBadges();
+    updateCount();
+  }
+
+  function loadAnnotations() {
+    fetch(MARKUI_BASE + '/__markui__/annotations')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        var page = location.pathname;
+        if (data[page]) {
+          annotations = data[page];
+          renderBadges();
+          updateCount();
+          if (panelOpen) renderPanel();
+        }
+      })
+      .catch(function() {});
+  }
+
+  // ── UI Elements ────────────────────────────────────────────────────
+
+  // Toolbar icons (20×20 display for 36px buttons)
+  var ICON_SELECT = '<svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.33317 2.50008C8.33317 2.27907 8.24537 2.06711 8.08909 1.91083C7.93281 1.75455 7.72085 1.66675 7.49984 1.66675C7.27882 1.66675 7.06686 1.75455 6.91058 1.91083C6.7543 2.06711 6.6665 2.27907 6.6665 2.50008V4.16675C6.6665 4.38776 6.7543 4.59972 6.91058 4.756C7.06686 4.91228 7.27882 5.00008 7.49984 5.00008C7.72085 5.00008 7.93281 4.91228 8.08909 4.756C8.24537 4.59972 8.33317 4.38776 8.33317 4.16675V2.50008ZM4.55317 3.37508C4.4763 3.29549 4.38434 3.232 4.28267 3.18833C4.181 3.14466 4.07165 3.12167 3.96101 3.12071C3.85036 3.11974 3.74062 3.14083 3.63821 3.18273C3.5358 3.22463 3.44275 3.28651 3.36451 3.36475C3.28626 3.443 3.22439 3.53604 3.18249 3.63845C3.14059 3.74087 3.1195 3.8506 3.12046 3.96125C3.12142 4.0719 3.14441 4.18125 3.18809 4.28292C3.23176 4.38459 3.29525 4.47654 3.37484 4.55342L4.55317 5.73342C4.63065 5.8109 4.72263 5.87236 4.82387 5.91429C4.9251 5.95622 5.0336 5.9778 5.14317 5.9778C5.25274 5.9778 5.36124 5.95622 5.46248 5.91429C5.56371 5.87236 5.65569 5.8109 5.73317 5.73342C5.81065 5.65594 5.87211 5.56395 5.91404 5.46272C5.95597 5.36149 5.97756 5.25299 5.97756 5.14342C5.97756 5.03384 5.95597 4.92534 5.91404 4.82411C5.87211 4.72288 5.81065 4.6309 5.73317 4.55342L4.55317 3.37508ZM8.159 6.84175C7.344 6.57008 6.56984 7.34425 6.84067 8.15842L9.78484 16.9901C10.0823 17.8834 11.3182 17.9551 11.7173 17.1017L13.4298 13.4301L17.1015 11.7176C17.9548 11.3192 17.8832 10.0826 16.9898 9.78508L8.159 6.84175ZM11.6248 3.37508C11.7811 3.53135 11.8688 3.74328 11.8688 3.96425C11.8688 4.18522 11.7811 4.39714 11.6248 4.55342L10.4465 5.73342C10.3691 5.81084 10.2772 5.87226 10.176 5.91416C10.0748 5.95606 9.96642 5.97763 9.85692 5.97763C9.74743 5.97763 9.639 5.95606 9.53784 5.91416C9.43668 5.87226 9.34476 5.81084 9.26734 5.73342C9.18991 5.65599 9.1285 5.56407 9.08659 5.46291C9.04469 5.36175 9.02312 5.25333 9.02312 5.14383C9.02312 5.03434 9.04469 4.92591 9.08659 4.82475C9.1285 4.72359 9.18991 4.63167 9.26734 4.55425L10.4465 3.37592C10.6028 3.21969 10.8147 3.13193 11.0357 3.13193C11.2566 3.13193 11.4686 3.21886 11.6248 3.37508ZM1.6665 7.50008C1.6665 7.27907 1.7543 7.06711 1.91058 6.91083C2.06686 6.75455 2.27882 6.66675 2.49984 6.66675H4.1665C4.38752 6.66675 4.59948 6.75455 4.75576 6.91083C4.91204 7.06711 4.99984 7.27907 4.99984 7.50008C4.99984 7.7211 4.91204 7.93306 4.75576 8.08934C4.59948 8.24562 4.38752 8.33342 4.1665 8.33342H2.49984C2.27882 8.33342 2.06686 8.24562 1.91058 8.08934C1.7543 7.93306 1.6665 7.7211 1.6665 7.50008ZM5.73234 10.4467C5.80976 10.3693 5.87118 10.2774 5.91308 10.1762C5.95498 10.0751 5.97655 9.96666 5.97655 9.85717C5.97655 9.74767 5.95498 9.63925 5.91308 9.53809C5.87118 9.43692 5.80976 9.34501 5.73234 9.26758C5.65491 9.19016 5.563 9.12874 5.46183 9.08684C5.36067 9.04494 5.25225 9.02337 5.14275 9.02337C5.03326 9.02337 4.92483 9.04494 4.82367 9.08684C4.72251 9.12874 4.6306 9.19016 4.55317 9.26758L3.37484 10.4467C3.29525 10.5236 3.23176 10.6156 3.18809 10.7172C3.14441 10.8189 3.12142 10.9283 3.12046 11.0389C3.1195 11.1496 3.14059 11.2593 3.18249 11.3617C3.22439 11.4641 3.28626 11.5572 3.36451 11.6354C3.44275 11.7137 3.5358 11.7755 3.63821 11.8174C3.74062 11.8593 3.85036 11.8804 3.96101 11.8795C4.07165 11.8785 4.181 11.8555 4.28267 11.8118C4.38434 11.7682 4.4763 11.7047 4.55317 11.6251L5.73234 10.4467Z" fill="currentColor"/></svg>';
+  var ICON_TRASH_TOOLBAR = '<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.83319 4.11125C1.83319 3.80459 2.06319 3.55525 2.34719 3.55525H4.12385C4.47652 3.54525 4.78785 3.30325 4.90785 2.94459L4.92785 2.88125L5.00452 2.63325C5.05119 2.48125 5.09185 2.34859 5.14919 2.22992C5.37452 1.76192 5.79185 1.43725 6.27385 1.35392C6.39652 1.33325 6.52519 1.33325 6.67385 1.33325H8.99252C9.14119 1.33325 9.27052 1.33325 9.39252 1.35392C9.87452 1.43725 10.2925 1.76192 10.5172 2.22992C10.5745 2.34859 10.6152 2.48125 10.6619 2.63325L10.7385 2.88125L10.7585 2.94459C10.8785 3.30325 11.2519 3.54592 11.6052 3.55525H13.3185C13.6032 3.55525 13.8332 3.80392 13.8332 4.11125C13.8332 4.41859 13.6032 4.66659 13.3192 4.66659H2.34652C2.06252 4.66659 1.83319 4.41792 1.83319 4.11125ZM7.73785 14.6666H8.26252C10.0672 14.6666 10.9692 14.6666 11.5565 14.0913C12.1432 13.5153 12.2032 12.5713 12.3232 10.6839L12.4965 7.96325C12.5619 6.93859 12.5945 6.42659 12.2999 6.10192C12.0052 5.77725 11.5085 5.77725 10.5139 5.77725H5.48652C4.49252 5.77725 3.99519 5.77725 3.70052 6.10192C3.40585 6.42659 3.43919 6.93859 3.50385 7.96325L3.67719 10.6833C3.79719 12.5719 3.85719 13.5153 4.44385 14.0913C5.03052 14.6673 5.93319 14.6666 7.73785 14.6666Z" fill="currentColor"/></svg>';
+  var ICON_COPY = '<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.16 1.33325H7.564C6.388 1.33325 5.456 1.33325 4.72733 1.43192C3.97667 1.53325 3.36933 1.74659 2.89067 2.22725C2.41133 2.70792 2.19867 3.31792 2.098 4.07125C2 4.80325 2 5.73859 2 6.91925V10.8113C2 11.8166 2.61333 12.6779 3.48467 13.0393C3.44 12.4326 3.44 11.5826 3.44 10.8746V7.53459C3.44 6.68059 3.44 5.94392 3.51867 5.35459C3.60333 4.72259 3.794 4.11725 4.28333 3.62592C4.77267 3.13459 5.376 2.94325 6.00533 2.85792C6.592 2.77925 7.32533 2.77925 8.17667 2.77925H10.2233C11.074 2.77925 11.806 2.77925 12.3933 2.85792C12.2174 2.40878 11.9102 2.02308 11.5118 1.75111C11.1135 1.47914 10.6424 1.33352 10.16 1.33325Z" fill="currentColor"/><path d="M4.3999 7.59801C4.3999 5.78068 4.3999 4.87201 4.96257 4.30734C5.52457 3.74268 6.42924 3.74268 8.2399 3.74268H10.1599C11.9699 3.74268 12.8752 3.74268 13.4379 4.30734C14.0006 4.87201 13.9999 5.78068 13.9999 7.59801V10.8113C13.9999 12.6287 13.9999 13.5373 13.4379 14.102C12.8752 14.6667 11.9699 14.6667 10.1599 14.6667H8.2399C6.4299 14.6667 5.52457 14.6667 4.96257 14.102C4.3999 13.5373 4.3999 12.6287 4.3999 10.8113V7.59801Z" fill="currentColor"/></svg>';
+  var ICON_X_TOOLBAR = '<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.2 3.80668C11.94 3.54668 11.52 3.54668 11.26 3.80668L7.99998 7.06001L4.73998 3.80001C4.47998 3.54001 4.05998 3.54001 3.79998 3.80001C3.53998 4.06001 3.53998 4.48001 3.79998 4.74001L7.05998 8.00001L3.79998 11.26C3.53998 11.52 3.53998 11.94 3.79998 12.2C4.05998 12.46 4.47998 12.46 4.73998 12.2L7.99998 8.94001L11.26 12.2C11.52 12.46 11.94 12.46 12.2 12.2C12.46 11.94 12.46 11.52 12.2 11.26L8.93998 8.00001L12.2 4.74001C12.4533 4.48668 12.4533 4.06001 12.2 3.80668Z" fill="currentColor"/></svg>';
+  var ICON_MARKUI_MINI = ICON_SELECT;
+
+  // Toolbar
+  var toolbar = document.createElement('div');
+  toolbar.id = 'markui-toolbar';
+  toolbar.className = 'markui-toolbar';
+  toolbar.innerHTML =
+    '<button class="markui-pill-btn markui-annotate-btn" id="markui-toggle" title="Annotate">' + ICON_SELECT + '</button>' +
+    '<button class="markui-pill-btn markui-badge-wrap" id="markui-count" title="Annotations"><span class="markui-count-badge">0</span></button>' +
+    '<button class="markui-pill-btn markui-trash-btn" id="markui-trash-all" title="Clear all annotations">' + ICON_TRASH_TOOLBAR + '</button>' +
+    '<button class="markui-pill-btn markui-copy-btn" id="markui-copy" title="Copy for agent">' + ICON_COPY + '</button>' +
+    '<div class="markui-pill-sep"></div>' +
+    '<button class="markui-pill-btn markui-close-btn" id="markui-collapse" title="Close">' + ICON_X_TOOLBAR + '</button>';
+
+  // Collapsed mini button
+  var miniBtn = document.createElement('button');
+  miniBtn.id = 'markui-mini';
+  miniBtn.className = 'markui-mini';
+  miniBtn.innerHTML = ICON_MARKUI_MINI;
+  miniBtn.title = 'Open MarkUI';
+
+  // Highlight overlay
+  var highlight = document.createElement('div');
+  highlight.id = 'markui-highlight';
+  highlight.className = 'markui-highlight';
+
+  // Tooltip
+  var tooltip = document.createElement('div');
+  tooltip.id = 'markui-tooltip';
+  tooltip.className = 'markui-tooltip';
+
+  // Popup
+  var popup = document.createElement('div');
+  popup.id = 'markui-popup';
+  popup.className = 'markui-popup';
+
+  // Panel
+  var panel = document.createElement('div');
+  panel.id = 'markui-panel';
+  panel.className = 'markui-panel';
+
+  // Toast
+  var toast = document.createElement('div');
+  toast.id = 'markui-toast';
+  toast.className = 'markui-toast';
+
+  // Badge container
+  var badgeContainer = document.createElement('div');
+  badgeContainer.id = 'markui-badges';
+  badgeContainer.className = 'markui-badges';
+
+  // Hidden file input for attachments
+  var fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.id = 'markui-file-input';
+  fileInput.accept = 'image/*';
+  fileInput.style.display = 'none';
+
+  // Toolbar tooltip (real DOM, avoids clip-path clipping)
+  var toolbarTip = document.createElement('div');
+  toolbarTip.className = 'markui-toolbar-tooltip';
+  var toolbarTipCaret = document.createElement('div');
+  toolbarTipCaret.className = 'markui-toolbar-tooltip-caret';
+
+  var tipSourceBtn = null;
+
+  function showToolbarTip(btn) {
+    var text = btn.getAttribute('title');
+    if (!text) {
+      // Title may have been moved to data-tip already
+      text = btn.getAttribute('data-tip');
+    }
+    if (!text) return;
+    // Suppress native tooltip by moving title to data-tip
+    if (btn.hasAttribute('title')) {
+      btn.setAttribute('data-tip', text);
+      btn.removeAttribute('title');
+    }
+    tipSourceBtn = btn;
+    toolbarTip.textContent = text;
+    toolbarTip.style.clipPath = '';
+    toolbarTip.classList.add('markui-toolbar-tooltip-visible');
+    var rect = btn.getBoundingClientRect();
+    var centerX = rect.left + rect.width / 2;
+    toolbarTip.style.left = centerX + 'px';
+    toolbarTip.style.top = (rect.top - 6 - 8) + 'px'; // 6px caret + 8px gap
+    toolbarTip.style.transform = 'translate(-50%, -100%)';
+    // Apply squircle to tooltip body
+    var tipRect = toolbarTip.getBoundingClientRect();
+    if (tipRect.width > 0 && tipRect.height > 0) {
+      toolbarTip.style.clipPath = squirclePath(tipRect.width, tipRect.height, 8);
+    }
+    // Position caret below tooltip
+    toolbarTipCaret.style.left = (centerX - 6) + 'px';
+    toolbarTipCaret.style.top = (tipRect.bottom) + 'px';
+    toolbarTipCaret.classList.add('markui-toolbar-tooltip-caret-visible');
+  }
+
+  function hideToolbarTip() {
+    toolbarTip.classList.remove('markui-toolbar-tooltip-visible');
+    toolbarTipCaret.classList.remove('markui-toolbar-tooltip-caret-visible');
+    // Restore title attribute
+    if (tipSourceBtn) {
+      var text = tipSourceBtn.getAttribute('data-tip');
+      if (text) {
+        tipSourceBtn.setAttribute('title', text);
+        tipSourceBtn.removeAttribute('data-tip');
+      }
+      tipSourceBtn = null;
+    }
+  }
+
+  // ── Mount ──────────────────────────────────────────────────────────
+
+  function mount() {
+    document.body.appendChild(toolbar);
+    document.body.appendChild(miniBtn);
+    document.body.appendChild(highlight);
+    document.body.appendChild(tooltip);
+    document.body.appendChild(popup);
+    document.body.appendChild(panel);
+    document.body.appendChild(toast);
+    document.body.appendChild(badgeContainer);
+    document.body.appendChild(fileInput);
+    document.body.appendChild(toolbarTip);
+    document.body.appendChild(toolbarTipCaret);
+    loadAnnotations();
+
+    // Apply squircle corners after elements are in DOM
+    setTimeout(applyToolbarSquircles, 0);
+
+    // Toolbar tooltip hover handlers
+    toolbar.addEventListener('mouseover', function(e) {
+      var btn = e.target.closest('[title], [data-tip]');
+      if (!btn || !toolbar.contains(btn)) { hideToolbarTip(); return; }
+      showToolbarTip(btn);
+    });
+    toolbar.addEventListener('mouseleave', function() {
+      hideToolbarTip();
+    });
+
+    // File input change handler for attachments
+    fileInput.addEventListener('change', function(e) {
+      var file = e.target.files && e.target.files[0];
+      if (!file) return;
+      var reader = new FileReader();
+      reader.onload = function(ev) {
+        currentAttachment = { dataUrl: ev.target.result, name: file.name };
+        var preview = document.getElementById('markui-popup-preview');
+        var img = document.getElementById('markui-popup-preview-img');
+        var nameEl = document.getElementById('markui-popup-preview-name');
+        if (preview && img) {
+          img.src = ev.target.result;
+          if (nameEl) nameEl.textContent = file.name;
+          preview.style.display = 'flex';
+        }
+      };
+      reader.readAsDataURL(file);
+      fileInput.value = ''; // reset so same file can be re-selected
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', mount);
+  } else {
+    mount();
+  }
+
+  // ── Toolbar Actions ────────────────────────────────────────────────
+
+  function updateCount() {
+    var wrap = document.getElementById('markui-count');
+    var badge = wrap ? wrap.querySelector('.markui-count-badge') : null;
+    if (badge) {
+      badge.textContent = annotations.length;
+    }
+    if (wrap) {
+      wrap.style.display = annotations.length > 0 ? 'inline-flex' : 'none';
+    }
+  }
+
+  document.addEventListener('click', function(e) {
+    var target = e.target;
+
+    // Toggle annotate mode
+    if (target.id === 'markui-toggle' || target.closest('#markui-toggle')) {
+      annotateMode = !annotateMode;
+      var toggleBtn = document.getElementById('markui-toggle');
+      toggleBtn.classList.toggle('markui-active', annotateMode);
+      if (!annotateMode) hideHighlight();
+      return;
+    }
+
+    // Count badge → open annotations panel
+    if (target.id === 'markui-count' || target.closest('#markui-count')) {
+      panelOpen = !panelOpen;
+      panel.classList.toggle('markui-panel-open', panelOpen);
+      if (panelOpen) renderPanel();
+      return;
+    }
+
+    // Copy for Claude
+    if (target.id === 'markui-copy' || target.closest('#markui-copy')) {
+      copyForClaude();
+      return;
+    }
+
+    // Toolbar trash — clear all annotations
+    if (target.id === 'markui-trash-all' || target.closest('#markui-trash-all')) {
+      if (annotations.length > 0) {
+        annotations = [];
+        saveAnnotations();
+        if (panelOpen) renderPanel();
+      }
+      return;
+    }
+
+    // Collapse toolbar — animate from annotate button
+    if (target.id === 'markui-collapse' || target.closest('#markui-collapse')) {
+      toolbarCollapsed = true;
+      var toggleEl = document.getElementById('markui-toggle');
+      if (annotateMode) {
+        annotateMode = false;
+        if (toggleEl) toggleEl.classList.remove('markui-active');
+        hideHighlight();
+      }
+      toolbar.classList.add('markui-toolbar-hidden');
+      // Small delay so the pill starts shrinking before mini appears
+      setTimeout(function() {
+        miniBtn.classList.add('markui-mini-visible');
+      }, 80);
+      return;
+    }
+
+    // Expand toolbar from mini button
+    if (target.id === 'markui-mini' || target.closest('#markui-mini')) {
+      toolbarCollapsed = false;
+      miniBtn.classList.remove('markui-mini-visible');
+      // Small delay so mini shrinks before pill expands
+      setTimeout(function() {
+        toolbar.classList.remove('markui-toolbar-hidden');
+        // Activate annotate mode on expand
+        annotateMode = true;
+        var toggleBtn = document.getElementById('markui-toggle');
+        if (toggleBtn) toggleBtn.classList.add('markui-active');
+      }, 80);
+      return;
+    }
+
+    // Toggle element styles in popup
+    if (target.classList.contains('markui-popup-selector') || target.closest('.markui-popup-selector')) {
+      var stylesDiv = document.getElementById('markui-popup-styles');
+      if (stylesDiv) {
+        stylesDiv.remove();
+      } else {
+        try {
+          var el = document.querySelector(currentPopupSelector);
+          if (el) {
+            var cs = window.getComputedStyle(el);
+            var props = [
+              'display', 'position', 'width', 'height',
+              'padding', 'margin',
+              'font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing', 'color',
+              'background-color',
+              'border', 'border-radius',
+              'opacity', 'box-shadow', 'overflow'
+            ];
+            var html = '<div id="markui-popup-styles" class="markui-popup-styles">';
+            for (var i = 0; i < props.length; i++) {
+              var val = cs.getPropertyValue(props[i]);
+              if (val && val !== 'none' && val !== 'normal' && val !== '' && val !== '0px') {
+                html += '<div class="markui-popup-style-row">' +
+                  '<span class="markui-popup-style-prop">' + props[i] + '</span>' +
+                  '<span class="markui-popup-style-val">' + escapeHtml(val) + '</span>' +
+                '</div>';
+              }
+            }
+            html += '</div>';
+            var header = popup.querySelector('.markui-popup-header');
+            if (header) header.insertAdjacentHTML('afterend', html);
+          }
+        } catch(e) {}
+      }
+      return;
+    }
+
+    // Popup save (submit arrow button)
+    if (target.id === 'markui-popup-save' || target.closest('#markui-popup-save')) {
+      savePopup();
+      return;
+    }
+
+    // Popup cancel
+    if (target.id === 'markui-popup-cancel' || target.closest('#markui-popup-cancel')) {
+      hidePopup();
+      return;
+    }
+
+    // Popup delete
+    if (target.id === 'markui-popup-delete' || target.closest('#markui-popup-delete')) {
+      deleteFromPopup();
+      return;
+    }
+
+    // Popup attach — trigger file picker
+    if (target.id === 'markui-popup-attach' || target.closest('#markui-popup-attach')) {
+      document.getElementById('markui-file-input').click();
+      return;
+    }
+
+    // Remove attachment preview
+    if (target.id === 'markui-popup-preview-remove' || target.closest('#markui-popup-preview-remove')) {
+      currentAttachment = null;
+      var preview = document.getElementById('markui-popup-preview');
+      if (preview) preview.style.display = 'none';
+      return;
+    }
+
+    // Panel close button
+    if (target.id === 'markui-panel-close' || target.closest('#markui-panel-close')) {
+      panelOpen = false;
+      panel.classList.remove('markui-panel-open');
+      return;
+    }
+
+    // Copy all from panel
+    if (target.id === 'markui-copy-all' || target.closest('#markui-copy-all')) {
+      copyForClaude();
+      return;
+    }
+
+    // Clear all annotations
+    if (target.id === 'markui-clear-all' || target.closest('#markui-clear-all')) {
+      annotations = [];
+      saveAnnotations();
+      renderPanel();
+      return;
+    }
+
+    // Panel edit buttons
+    var editBtn = target.classList.contains('markui-panel-edit') ? target : target.closest('.markui-panel-edit');
+    if (editBtn) {
+      var idx = parseInt(editBtn.getAttribute('data-index'), 10);
+      var a = annotations[idx];
+      if (a) {
+        try {
+          var el = document.querySelector(a.selector);
+          if (el) {
+            showPopup(el);
+          }
+        } catch(e) {}
+      }
+      return;
+    }
+
+    // Panel delete buttons
+    var deleteBtn = target.classList.contains('markui-panel-delete') ? target : target.closest('.markui-panel-delete');
+    if (deleteBtn) {
+      var idx = parseInt(deleteBtn.getAttribute('data-index'), 10);
+      annotations.splice(idx, 1);
+      saveAnnotations();
+      renderPanel();
+      return;
+    }
+
+    // Annotation mode click
+    if (annotateMode && !isMarkuiEl(target) && !shouldSkip(target)) {
+      e.preventDefault();
+      e.stopPropagation();
+      showPopup(target, e.clientX, e.clientY);
+      return;
+    }
+  }, true);
+
+  // ── Hover Highlight ────────────────────────────────────────────────
+
+  document.addEventListener('mousemove', function(e) {
+    if (!annotateMode) return;
+    var el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || shouldSkip(el) || isMarkuiEl(el)) {
+      hideHighlight();
+      return;
+    }
+    if (el === hoveredEl) return;
+    hoveredEl = el;
+    showHighlight(el);
+  });
+
+  function showHighlight(el) {
+    var rect = el.getBoundingClientRect();
+    highlight.style.display = 'block';
+    highlight.style.top = (rect.top + window.scrollY) + 'px';
+    highlight.style.left = (rect.left + window.scrollX) + 'px';
+    highlight.style.width = rect.width + 'px';
+    highlight.style.height = rect.height + 'px';
+
+    var sel = getBestSelector(el);
+    var tag = el.tagName.toLowerCase();
+    tooltip.textContent = '<' + tag + '> — ' + sel;
+    tooltip.style.display = 'block';
+    tooltip.style.top = (rect.top + window.scrollY - 30) + 'px';
+    tooltip.style.left = (rect.left + window.scrollX) + 'px';
+  }
+
+  function hideHighlight() {
+    highlight.style.display = 'none';
+    tooltip.style.display = 'none';
+    hoveredEl = null;
+  }
+
+  // ── Annotation Popup ──────────────────────────────────────────────
+
+  var currentPopupSelector = '';
+  var currentPopupTag = '';
+  var editingIndex = -1;
+  var currentAttachment = null; // { dataUrl, name }
+
+  function showPopup(el, clickX, clickY) {
+    var rect = el.getBoundingClientRect();
+    var sel = getBestSelector(el);
+    var tag = el.tagName.toLowerCase();
+
+    currentPopupSelector = sel;
+    currentPopupTag = tag;
+
+    // Check if already annotated
+    editingIndex = -1;
+    for (var i = 0; i < annotations.length; i++) {
+      if (annotations[i].selector === sel) {
+        editingIndex = i;
+        break;
+      }
+    }
+
+    var existing = editingIndex >= 0 ? annotations[editingIndex].instruction : '';
+    // Restore attachment if editing
+    currentAttachment = (editingIndex >= 0 && annotations[editingIndex].attachment)
+      ? annotations[editingIndex].attachment
+      : null;
+
+    var ICON_SUBMIT = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 14V4M9 4L4.5 8.5M9 4L13.5 8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    var ICON_PLUS = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3.75V14.25M3.75 9H14.25" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
+    var ICON_TRASH_POPUP = '<svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6668 4.00094H2.3335M12.5555 5.6676L12.2488 10.2676C12.1308 12.037 12.0722 12.9216 11.4955 13.461C10.9188 14.0003 10.0315 14.001 8.25816 14.001H7.74216C5.96882 14.001 5.0815 14.001 4.50482 13.461C3.92816 12.9216 3.86882 12.037 3.7515 10.2676L3.44482 5.6676M6.1135 2.6676C6.25122 2.27725 6.50665 1.93922 6.84456 1.70013C7.18247 1.46103 7.58622 1.33264 8.00016 1.33264C8.4141 1.33264 8.81785 1.46103 9.15576 1.70013C9.49367 1.93922 9.7491 2.27725 9.88682 2.6676" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>';
+
+    popup.innerHTML =
+      '<div class="markui-popup-header">' +
+        '<span class="markui-popup-selector">&lt;' + tag + '&gt; - ' + sel + '</span>' +
+      '</div>' +
+      '<textarea id="markui-popup-textarea" class="markui-popup-textarea" placeholder="Describe your change" rows="2">' +
+        escapeHtml(existing) +
+      '</textarea>' +
+      '<div id="markui-popup-preview" class="markui-popup-preview" style="display:' + (currentAttachment ? 'flex' : 'none') + '">' +
+        '<img id="markui-popup-preview-img" class="markui-popup-preview-img"' +
+          (currentAttachment ? ' src="' + currentAttachment.dataUrl + '"' : '') + ' />' +
+        '<div class="markui-popup-preview-info">' +
+          '<span id="markui-popup-preview-name" class="markui-popup-preview-name">' + (currentAttachment ? escapeHtml(currentAttachment.name) : '') + '</span>' +
+          '<button id="markui-popup-preview-remove" class="markui-popup-preview-remove">&times;</button>' +
+        '</div>' +
+      '</div>' +
+      '<div class="markui-popup-actions">' +
+        '<button id="markui-popup-attach" class="markui-popup-plus" title="Attach">' + ICON_PLUS + '</button>' +
+        (editingIndex >= 0
+          ? '<button id="markui-popup-delete" class="markui-popup-delete-btn" title="Delete">' + ICON_TRASH_POPUP + '</button>'
+          : '') +
+        '<button id="markui-popup-cancel" class="markui-popup-cancel">Cancel</button>' +
+        '<button id="markui-popup-save" class="markui-popup-submit">' + ICON_SUBMIT + '</button>' +
+      '</div>';
+
+    // Position at click point, or fallback to element position
+    var popupTop, popupLeft;
+    if (clickX !== undefined && clickY !== undefined) {
+      popupTop = clickY + window.scrollY + 12;
+      popupLeft = clickX + window.scrollX;
+    } else {
+      popupTop = rect.bottom + window.scrollY + 8;
+      popupLeft = rect.left + window.scrollX;
+    }
+    // Keep in viewport horizontally
+    if (popupLeft + 300 > window.innerWidth) popupLeft = window.innerWidth - 320;
+    if (popupLeft < 10) popupLeft = 10;
+
+    popup.style.left = popupLeft + 'px';
+    popup.style.display = 'block';
+
+    // If popup would overflow below viewport, open above the click point
+    var popupHeight = popup.offsetHeight;
+    if (clickY !== undefined && clickY + 12 + popupHeight > window.innerHeight) {
+      popupTop = (clickY + window.scrollY) - popupHeight - 12;
+    }
+    if (popupTop < window.scrollY + 10) popupTop = window.scrollY + 10;
+
+    popup.style.top = popupTop + 'px';
+
+    // Apply squircle corners to popup buttons
+    applyPopupSquircles();
+
+    setTimeout(function() {
+      var ta = document.getElementById('markui-popup-textarea');
+      if (ta) ta.focus();
+    }, 50);
+  }
+
+  function hidePopup() {
+    popup.style.display = 'none';
+    editingIndex = -1;
+    currentAttachment = null;
+  }
+
+  function savePopup() {
+    var ta = document.getElementById('markui-popup-textarea');
+    var instruction = ta ? ta.value.trim() : '';
+    if (!instruction) {
+      hidePopup();
+      return;
+    }
+
+    if (editingIndex >= 0) {
+      annotations[editingIndex].instruction = instruction;
+      annotations[editingIndex].attachment = currentAttachment || null;
+    } else {
+      annotations.push({
+        selector: currentPopupSelector,
+        tagName: currentPopupTag,
+        instruction: instruction,
+        attachment: currentAttachment || null
+      });
+    }
+
+    saveAnnotations();
+    hidePopup();
+    if (panelOpen) renderPanel();
+  }
+
+  function deleteFromPopup() {
+    if (editingIndex >= 0) {
+      annotations.splice(editingIndex, 1);
+      saveAnnotations();
+      if (panelOpen) renderPanel();
+    }
+    hidePopup();
+  }
+
+  // ── Annotations Panel ─────────────────────────────────────────────
+
+  var ICON_PAPERCLIP = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 7.1L7.85 12.75a3.18 3.18 0 0 1-4.5-4.5L9 2.6a2.12 2.12 0 0 1 3 3L6.35 11.25a1.06 1.06 0 0 1-1.5-1.5L10.5 4.1"/></svg>';
+
+  var ICON_CLOSE = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
+  var ICON_COPY_PANEL = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7.33325C4 5.44792 4 4.50459 4.586 3.91925C5.17133 3.33325 6.11467 3.33325 8 3.33325H10C11.8853 3.33325 12.8287 3.33325 13.414 3.91925C14 4.50459 14 5.44792 14 7.33325V10.6666C14 12.5519 14 13.4953 13.414 14.0806C12.8287 14.6666 11.8853 14.6666 10 14.6666H8C6.11467 14.6666 5.17133 14.6666 4.586 14.0806C4 13.4953 4 12.5519 4 10.6666V7.33325Z" stroke="currentColor" stroke-width="1.2"/><path d="M4 12.6666C3.46957 12.6666 2.96086 12.4559 2.58579 12.0808C2.21071 11.7057 2 11.197 2 10.6666V6.66658C2 4.15259 2 2.89525 2.78133 2.11459C3.56267 1.33392 4.81933 1.33325 7.33333 1.33325H10C10.5304 1.33325 11.0391 1.54397 11.4142 1.91904C11.7893 2.29411 12 2.80282 12 3.33325" stroke="currentColor" stroke-width="1.2"/></svg>';
+  var ICON_TRASH = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4h12"/><path d="M5 4V2.5A.5.5 0 0 1 5.5 2h5a.5.5 0 0 1 .5.5V4"/><path d="M6.5 7v5"/><path d="M9.5 7v5"/><path d="M3 4l1 10a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1l1-10"/></svg>';
+  var ICON_EDIT = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11.5 1.5l3 3L5 14H2v-3z"/></svg>';
+  var ICON_DELETE = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4h12"/><path d="M5 4V2.5A.5.5 0 0 1 5.5 2h5a.5.5 0 0 1 .5.5V4"/><path d="M6.5 7v5"/><path d="M9.5 7v5"/><path d="M3 4l1 10a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1l1-10"/></svg>';
+
+  function renderPanel() {
+    var html =
+      '<div class="markui-panel-header">' +
+        '<span>Annotations (' + annotations.length + ')</span>' +
+        '<div class="markui-panel-header-actions">' +
+          (annotations.length > 0
+            ? '<button class="markui-panel-icon-btn markui-panel-copy" id="markui-copy-all" title="Copy all">' + ICON_COPY_PANEL + '</button>' +
+              '<button class="markui-panel-icon-btn" id="markui-clear-all" title="Clear all">' + ICON_TRASH + '</button>'
+            : '') +
+          '<button class="markui-panel-icon-btn" id="markui-panel-close" title="Close">' + ICON_CLOSE + '</button>' +
+        '</div>' +
+      '</div>' +
+      '<div class="markui-panel-list">';
+
+    if (annotations.length === 0) {
+      html += '<div class="markui-panel-empty">No annotations yet. Click "Annotate" to start.</div>';
+    }
+
+    for (var i = 0; i < annotations.length; i++) {
+      var a = annotations[i];
+      html +=
+        '<div class="markui-panel-item">' +
+          '<span class="markui-panel-num">' + (i + 1) + '</span>' +
+          '<div class="markui-panel-info">' +
+            '<div class="markui-panel-selector">&lt;' + escapeHtml(a.tagName) + '&gt; — ' + escapeHtml(a.selector) + '</div>' +
+            '<div class="markui-panel-instruction">' + escapeHtml(a.instruction) + '</div>' +
+            (a.attachment
+              ? '<div class="markui-panel-attachment">' + ICON_PAPERCLIP + ' ' + escapeHtml(a.attachment.name) + '</div>'
+              : '') +
+          '</div>' +
+          '<div class="markui-panel-item-actions">' +
+            '<button class="markui-panel-icon-btn markui-panel-edit" data-index="' + i + '" title="Edit">' + ICON_EDIT + '</button>' +
+            '<button class="markui-panel-icon-btn markui-panel-delete" data-index="' + i + '" title="Delete">' + ICON_DELETE + '</button>' +
+          '</div>' +
+        '</div>';
+    }
+
+    html += '</div>';
+    panel.innerHTML = html;
+  }
+
+  // ── Numbered Badges ────────────────────────────────────────────────
+
+  function renderBadges() {
+    badgeContainer.innerHTML = '';
+    for (var i = 0; i < annotations.length; i++) {
+      var a = annotations[i];
+      try {
+        var el = document.querySelector(a.selector);
+        if (!el) continue;
+        var rect = el.getBoundingClientRect();
+        var badge = document.createElement('div');
+        badge.className = 'markui-badge-num';
+        badge.textContent = i + 1;
+        badge.style.top = (rect.top + window.scrollY) + 'px';
+        badge.style.left = (rect.left + window.scrollX) + 'px';
+        badgeContainer.appendChild(badge);
+      } catch(e) {}
+    }
+  }
+
+  // Reposition badges on scroll/resize
+  window.addEventListener('scroll', renderBadges);
+  window.addEventListener('resize', renderBadges);
+
+  // ── Copy for Claude ────────────────────────────────────────────────
+
+  function copyForClaude() {
+    if (annotations.length === 0) {
+      showToast('No annotations to copy');
+      return;
+    }
+
+    var text = 'Please make the following UI changes:\n';
+    for (var i = 0; i < annotations.length; i++) {
+      var a = annotations[i];
+      text += '\n' + (i + 1) + '. Element: <' + a.tagName + '> \u2014 ' + a.selector +
+              '\n   Selector: ' + a.selector +
+              '\n   Change: ' + a.instruction;
+      if (a.attachment) {
+        text += '\n   Attachment: ' + a.attachment.name + ' (screenshot attached \u2014 see image)';
+      }
+      text += '\n';
+    }
+
+    navigator.clipboard.writeText(text).then(function() {
+      showToast('Copied!');
+    }).catch(function() {
+      // Fallback
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      showToast('Copied!');
+    });
+  }
+
+  // ── Toast ──────────────────────────────────────────────────────────
+
+  function showToast(msg) {
+    toast.textContent = msg;
+    toast.classList.add('markui-toast-show');
+    setTimeout(function() {
+      toast.classList.remove('markui-toast-show');
+    }, 2000);
+  }
+
+  // ── Utilities ──────────────────────────────────────────────────────
+
+  function escapeHtml(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+})();