web-remarq 0.1.0

package/dist/web-remarq.global.global.js

@@ -0,0 +1,1397 @@
+"use strict";
+var WebRemarq = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    WebRemarq: () => WebRemarq
+  });
+
+  // src/core/storage.ts
+  var STORAGE_KEY = "remarq:annotations";
+  var AnnotationStorage = class {
+    constructor() {
+      this.annotations = [];
+      this.extraFields = {};
+      this.isMemoryOnly = false;
+      this.load();
+    }
+    getAll() {
+      return [...this.annotations];
+    }
+    getByRoute(route) {
+      return this.annotations.filter((a) => a.route === route);
+    }
+    add(annotation) {
+      this.annotations.push(annotation);
+      this.save();
+    }
+    remove(id) {
+      this.annotations = this.annotations.filter((a) => a.id !== id);
+      this.save();
+    }
+    update(id, changes) {
+      const idx = this.annotations.findIndex((a) => a.id === id);
+      if (idx !== -1) {
+        this.annotations[idx] = { ...this.annotations[idx], ...changes };
+        this.save();
+      }
+    }
+    clearAll() {
+      this.annotations = [];
+      this.save();
+    }
+    exportJSON() {
+      return {
+        version: 1,
+        annotations: [...this.annotations]
+      };
+    }
+    importJSON(data) {
+      this.annotations = [...data.annotations];
+      this.save();
+    }
+    load() {
+      try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw) {
+          const parsed = JSON.parse(raw);
+          const { version, annotations, ...rest } = parsed;
+          this.annotations = annotations ?? [];
+          this.extraFields = rest;
+        }
+      } catch {
+        this.isMemoryOnly = true;
+      }
+    }
+    save() {
+      if (this.isMemoryOnly) return;
+      try {
+        const data = {
+          version: 1,
+          ...this.extraFields,
+          annotations: this.annotations
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      } catch {
+        this.isMemoryOnly = true;
+      }
+    }
+  };
+
+  // src/core/hash-detect.ts
+  var CSS_MODULES_RE = /^(.+)__([a-zA-Z0-9]{3,})$/;
+  var STYLED_COMPONENTS_RE = /^sc-/;
+  var EMOTION_RE = /^css-[a-zA-Z0-9]+$/;
+  var PURE_HASH_RE = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{8,}$/;
+  function isHashedClass(className) {
+    if (STYLED_COMPONENTS_RE.test(className)) return true;
+    if (EMOTION_RE.test(className)) return true;
+    if (CSS_MODULES_RE.test(className)) return true;
+    if (PURE_HASH_RE.test(className)) return true;
+    return false;
+  }
+  function stripHash(className) {
+    const match = className.match(CSS_MODULES_RE);
+    if (match) {
+      const prefix = className.slice(0, className.lastIndexOf("__"));
+      return prefix;
+    }
+    return className;
+  }
+  function filterClasses(classes, classFilter) {
+    const result = [];
+    for (const cls of classes) {
+      if (STYLED_COMPONENTS_RE.test(cls)) continue;
+      if (EMOTION_RE.test(cls)) continue;
+      if (PURE_HASH_RE.test(cls)) continue;
+      let stable = stripHash(cls);
+      if (classFilter && !classFilter(stable)) continue;
+      result.push(stable);
+    }
+    return result;
+  }
+
+  // src/core/fingerprint.ts
+  var TEXT_MAX_LENGTH = 50;
+  function createFingerprint(el, options2) {
+    const dataAttr = options2?.dataAttribute ?? "data-annotate";
+    return {
+      dataAnnotate: el.getAttribute(dataAttr) ?? null,
+      dataTestId: el.getAttribute("data-testid") ?? el.getAttribute("data-test") ?? el.getAttribute("data-cy") ?? null,
+      id: getStableId(el),
+      tagName: el.tagName.toLowerCase(),
+      textContent: getTextContent(el),
+      role: el.getAttribute("role") ?? null,
+      ariaLabel: el.getAttribute("aria-label") ?? null,
+      stableClasses: filterClasses(
+        Array.from(el.classList),
+        options2?.classFilter
+      ),
+      domPath: buildDomPath(el),
+      siblingIndex: getSiblingIndex(el),
+      parentAnchor: findParentAnchor(el, dataAttr)
+    };
+  }
+  function getStableId(el) {
+    const id = el.id;
+    if (!id) return null;
+    if (isHashedClass(id)) return null;
+    return id;
+  }
+  function getTextContent(el) {
+    const text = el.textContent?.trim() ?? null;
+    if (!text) return null;
+    return text.length > TEXT_MAX_LENGTH ? text.slice(0, TEXT_MAX_LENGTH) : text;
+  }
+  function buildDomPath(el) {
+    const parts = [];
+    let current = el;
+    while (current && current !== document.body && parts.length < 5) {
+      parts.unshift(current.tagName.toLowerCase());
+      current = current.parentElement;
+    }
+    return parts.join(" > ");
+  }
+  function getSiblingIndex(el) {
+    const parent = el.parentElement;
+    if (!parent) return 0;
+    const children = Array.from(parent.children);
+    return children.indexOf(el);
+  }
+  function findParentAnchor(el, dataAttr) {
+    let current = el.parentElement;
+    while (current && current !== document.body) {
+      const value = current.getAttribute(dataAttr);
+      if (value) return value;
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  // src/core/matcher.ts
+  var MATCH_THRESHOLD = 50;
+  function levenshteinSimilarity(a, b) {
+    if (a === b) return 1;
+    if (!a.length || !b.length) return 0;
+    const matrix = [];
+    for (let i = 0; i <= a.length; i++) {
+      matrix[i] = [i];
+    }
+    for (let j = 0; j <= b.length; j++) {
+      matrix[0][j] = j;
+    }
+    for (let i = 1; i <= a.length; i++) {
+      for (let j = 1; j <= b.length; j++) {
+        const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+        matrix[i][j] = Math.min(
+          matrix[i - 1][j] + 1,
+          matrix[i][j - 1] + 1,
+          matrix[i - 1][j - 1] + cost
+        );
+      }
+    }
+    const distance = matrix[a.length][b.length];
+    return 1 - distance / Math.max(a.length, b.length);
+  }
+  function textSimilarity(a, b) {
+    if (!a || !b) return 0;
+    const na = a.trim().toLowerCase();
+    const nb = b.trim().toLowerCase();
+    if (na === nb) return 1;
+    if (na.includes(nb) || nb.includes(na)) return 1;
+    return levenshteinSimilarity(na, nb);
+  }
+  function jaccardSimilarity(a, b) {
+    if (!a.length && !b.length) return 0;
+    const setA = new Set(a);
+    const setB = new Set(b);
+    let intersection = 0;
+    for (const item of setA) {
+      if (setB.has(item)) intersection++;
+    }
+    const union = (/* @__PURE__ */ new Set([...a, ...b])).size;
+    return union === 0 ? 0 : intersection / union;
+  }
+  function scoreCandidate(el, fp, dataAttr) {
+    let score = 0;
+    const elAnnotate = el.getAttribute(dataAttr);
+    if (fp.dataAnnotate && elAnnotate === fp.dataAnnotate) {
+      score += 100;
+    }
+    const elText = el.textContent?.trim().slice(0, 50) ?? null;
+    const textSim = textSimilarity(fp.textContent, elText);
+    if (textSim > 0.7) {
+      score += textSim * 35;
+    }
+    if (fp.role && el.getAttribute("role") === fp.role && fp.ariaLabel && el.getAttribute("aria-label") === fp.ariaLabel) {
+      score += 30;
+    }
+    if (fp.parentAnchor) {
+      let parent2 = el.parentElement;
+      while (parent2 && parent2 !== document.body) {
+        if (parent2.getAttribute(dataAttr) === fp.parentAnchor) {
+          score += 15;
+          break;
+        }
+        parent2 = parent2.parentElement;
+      }
+    }
+    if (fp.stableClasses.length > 0) {
+      const elClasses = Array.from(el.classList);
+      const jaccard = jaccardSimilarity(fp.stableClasses, elClasses);
+      score += jaccard * 15;
+    }
+    if (fp.domPath) {
+      const elPath = buildDomPath2(el);
+      const pathSim = levenshteinSimilarity(fp.domPath, elPath);
+      score += pathSim * 15;
+    }
+    const parent = el.parentElement;
+    if (parent) {
+      const idx = Array.from(parent.children).indexOf(el);
+      if (idx === fp.siblingIndex) {
+        score += 5;
+      }
+    }
+    return score;
+  }
+  function buildDomPath2(el) {
+    const parts = [];
+    let current = el;
+    while (current && current !== document.body && parts.length < 5) {
+      parts.unshift(current.tagName.toLowerCase());
+      current = current.parentElement;
+    }
+    return parts.join(" > ");
+  }
+  function matchElement(fp, options2) {
+    const dataAttr = options2?.dataAttribute ?? "data-annotate";
+    if (fp.dataAnnotate) {
+      const el = document.querySelector(`[${dataAttr}="${fp.dataAnnotate}"]`);
+      if (el) return el;
+    }
+    if (fp.dataTestId) {
+      const el = document.querySelector(
+        `[data-testid="${fp.dataTestId}"], [data-test="${fp.dataTestId}"], [data-cy="${fp.dataTestId}"]`
+      );
+      if (el) return el;
+    }
+    if (fp.id) {
+      const el = document.getElementById(fp.id);
+      if (el) return el;
+    }
+    const candidates = document.querySelectorAll(fp.tagName);
+    let bestEl = null;
+    let bestScore = 0;
+    for (const candidate of candidates) {
+      const score = scoreCandidate(candidate, fp, dataAttr);
+      if (score > bestScore) {
+        bestScore = score;
+        bestEl = candidate;
+      }
+    }
+    return bestScore >= MATCH_THRESHOLD ? bestEl : null;
+  }
+
+  // src/ui/styles.ts
+  var STYLES_ID = "data-remarq-styles";
+  var CSS = `
+[data-remarq-theme="light"] {
+  --remarq-bg: #ffffff;
+  --remarq-bg-secondary: #f5f5f5;
+  --remarq-text: #1a1a1a;
+  --remarq-text-secondary: #666666;
+  --remarq-border: #e2e8f0;
+  --remarq-accent: #3b82f6;
+  --remarq-pending: #f97316;
+  --remarq-resolved: #22c55e;
+  --remarq-overlay: rgba(59, 130, 246, 0.15);
+  --remarq-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+[data-remarq-theme="dark"] {
+  --remarq-bg: #1e1e1e;
+  --remarq-bg-secondary: #2a2a2a;
+  --remarq-text: #e5e5e5;
+  --remarq-text-secondary: #999999;
+  --remarq-border: #333333;
+  --remarq-accent: #60a5fa;
+  --remarq-pending: #fb923c;
+  --remarq-resolved: #4ade80;
+  --remarq-overlay: rgba(96, 165, 250, 0.15);
+  --remarq-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+.remarq-toolbar {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 2147483647;
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 8px;
+  box-shadow: var(--remarq-shadow);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--remarq-text);
+}
+
+.remarq-toolbar.remarq-minimized { padding: 4px; }
+
+.remarq-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--remarq-text);
+  cursor: pointer;
+  position: relative;
+}
+
+.remarq-toolbar-btn:hover { background: var(--remarq-bg-secondary); }
+.remarq-toolbar-btn.remarq-active { background: var(--remarq-accent); color: #ffffff; }
+
+.remarq-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--remarq-pending);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remarq-overlay {
+  position: fixed;
+  pointer-events: none;
+  background: var(--remarq-overlay);
+  border: 2px solid var(--remarq-accent);
+  border-radius: 2px;
+  z-index: 2147483646;
+  transition: all 0.05s ease-out;
+}
+
+.remarq-tooltip {
+  position: fixed;
+  z-index: 2147483647;
+  padding: 4px 8px;
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: var(--remarq-text);
+  box-shadow: var(--remarq-shadow);
+  pointer-events: none;
+  white-space: nowrap;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.remarq-marker {
+  position: absolute;
+  z-index: 2147483645;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  color: #ffffff;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  transition: transform 0.1s ease;
+}
+
+.remarq-marker:hover { transform: scale(1.2); }
+.remarq-marker[data-status="pending"] { background: var(--remarq-pending); }
+.remarq-marker[data-status="resolved"] { background: var(--remarq-resolved); opacity: 0.7; }
+
+.remarq-popup {
+  position: fixed;
+  z-index: 2147483647;
+  width: 300px;
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 8px;
+  box-shadow: var(--remarq-shadow);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--remarq-text);
+}
+
+.remarq-popup-header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--remarq-border);
+  font-size: 12px;
+  color: var(--remarq-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remarq-popup-body { padding: 12px; }
+
+.remarq-popup textarea {
+  width: 100%;
+  min-height: 60px;
+  padding: 8px;
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  background: var(--remarq-bg-secondary);
+  color: var(--remarq-text);
+  font-family: inherit;
+  font-size: 13px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.remarq-popup textarea:focus { outline: none; border-color: var(--remarq-accent); }
+
+.remarq-popup-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--remarq-border);
+}
+
+.remarq-popup-actions button {
+  padding: 4px 12px;
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  background: var(--remarq-bg);
+  color: var(--remarq-text);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.remarq-popup-actions button.remarq-primary {
+  background: var(--remarq-accent);
+  border-color: var(--remarq-accent);
+  color: #ffffff;
+}
+
+.remarq-detached-panel {
+  position: fixed;
+  bottom: 60px;
+  right: 16px;
+  z-index: 2147483646;
+  width: 280px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 8px;
+  box-shadow: var(--remarq-shadow);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--remarq-text);
+}
+
+.remarq-detached-header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--remarq-border);
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--remarq-text-secondary);
+}
+
+.remarq-detached-item {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--remarq-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.remarq-detached-item:last-child { border-bottom: none; }
+.remarq-detached-info { flex: 1; min-width: 0; }
+.remarq-detached-comment { margin-bottom: 4px; }
+
+.remarq-detached-element {
+  font-size: 11px;
+  color: var(--remarq-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remarq-detached-delete {
+  border: none;
+  background: none;
+  color: var(--remarq-text-secondary);
+  cursor: pointer;
+  padding: 2px;
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.remarq-detached-delete:hover { color: #ef4444; }
+
+.remarq-export-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 6px;
+  box-shadow: var(--remarq-shadow);
+  overflow: hidden;
+}
+
+.remarq-export-menu button {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--remarq-text);
+  cursor: pointer;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.remarq-export-menu button:hover { background: var(--remarq-bg-secondary); }
+`;
+  function injectStyles() {
+    if (document.querySelector(`style[${STYLES_ID}]`)) return;
+    try {
+      const style = document.createElement("style");
+      style.setAttribute(STYLES_ID, "");
+      style.textContent = CSS;
+      document.head.appendChild(style);
+    } catch {
+      try {
+        const blob = new Blob([CSS], { type: "text/css" });
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = URL.createObjectURL(blob);
+        link.setAttribute(STYLES_ID, "");
+        document.head.appendChild(link);
+      } catch {
+        console.warn("[web-remarq] Could not inject styles");
+      }
+    }
+  }
+  function removeStyles() {
+    const el = document.querySelector(`[${STYLES_ID}]`);
+    el?.remove();
+  }
+
+  // src/ui/theme.ts
+  var THEME_KEY = "remarq:theme";
+  var ThemeManager = class {
+    constructor(parent, initialTheme) {
+      const persisted = this.loadTheme();
+      this.theme = initialTheme ?? persisted ?? "light";
+      this.container = document.createElement("div");
+      this.container.setAttribute("data-remarq-theme", this.theme);
+      parent.appendChild(this.container);
+      this.persist();
+    }
+    getTheme() {
+      return this.theme;
+    }
+    setTheme(theme) {
+      this.theme = theme;
+      this.container.setAttribute("data-remarq-theme", theme);
+      this.persist();
+    }
+    toggle() {
+      this.setTheme(this.theme === "light" ? "dark" : "light");
+    }
+    destroy() {
+      this.container.remove();
+    }
+    persist() {
+      try {
+        localStorage.setItem(THEME_KEY, this.theme);
+      } catch {
+      }
+    }
+    loadTheme() {
+      try {
+        const value = localStorage.getItem(THEME_KEY);
+        if (value === "light" || value === "dark") return value;
+      } catch {
+      }
+      return null;
+    }
+  };
+
+  // src/ui/toolbar.ts
+  var ICONS = {
+    inspect: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4"/><line x1="10" y1="10" x2="14" y2="14"/></svg>',
+    export: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v8M4 6l4-4 4 4M2 12h12"/></svg>',
+    import: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 10V2M4 6l4 4 4-4M2 12h12"/></svg>',
+    clear: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>',
+    theme: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2"/></svg>',
+    minimize: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 8h8"/></svg>'
+  };
+  var Toolbar = class {
+    constructor(container, callbacks) {
+      this.container = container;
+      this.callbacks = callbacks;
+      this.exportMenu = null;
+      this.minimized = false;
+      this.buttons = [];
+      this.toolbarEl = document.createElement("div");
+      this.toolbarEl.className = "remarq-toolbar";
+      this.inspectBtn = this.createButton("inspect", ICONS.inspect, () => callbacks.onInspect());
+      this.badgeEl = document.createElement("span");
+      this.badgeEl.className = "remarq-badge";
+      this.badgeEl.style.display = "none";
+      this.inspectBtn.appendChild(this.badgeEl);
+      const exportBtn = this.createButton("export", ICONS.export, (e) => this.toggleExportMenu(e));
+      this.fileInput = document.createElement("input");
+      this.fileInput.type = "file";
+      this.fileInput.accept = ".json";
+      this.fileInput.style.display = "none";
+      this.fileInput.addEventListener("change", () => {
+        callbacks.onImport();
+        this.fileInput.value = "";
+      });
+      const importBtn = this.createButton("import", ICONS.import, () => this.fileInput.click());
+      const clearBtn = this.createButton("clear", ICONS.clear, () => callbacks.onClear());
+      const themeBtn = this.createButton("theme", ICONS.theme, () => callbacks.onThemeToggle());
+      const minimizeBtn = this.createButton("minimize", ICONS.minimize, () => this.toggleMinimize());
+      this.buttons = [this.inspectBtn, exportBtn, importBtn, clearBtn, themeBtn];
+      this.toolbarEl.appendChild(this.inspectBtn);
+      this.toolbarEl.appendChild(exportBtn);
+      this.toolbarEl.appendChild(importBtn);
+      this.toolbarEl.appendChild(clearBtn);
+      this.toolbarEl.appendChild(themeBtn);
+      this.toolbarEl.appendChild(minimizeBtn);
+      this.toolbarEl.appendChild(this.fileInput);
+      container.appendChild(this.toolbarEl);
+    }
+    setInspectActive(active) {
+      this.inspectBtn.classList.toggle("remarq-active", active);
+    }
+    setBadgeCount(count) {
+      this.badgeEl.textContent = String(count);
+      this.badgeEl.style.display = count > 0 ? "flex" : "none";
+    }
+    getFileInput() {
+      return this.fileInput;
+    }
+    setMemoryWarning(show) {
+      this.toolbarEl.title = show ? "localStorage unavailable \u2014 annotations stored in memory only" : "";
+    }
+    destroy() {
+      this.closeExportMenu();
+      this.toolbarEl.remove();
+    }
+    createButton(action, icon, handler) {
+      const btn = document.createElement("button");
+      btn.className = "remarq-toolbar-btn";
+      btn.setAttribute("data-remarq-action", action);
+      btn.innerHTML = icon;
+      btn.addEventListener("click", handler);
+      return btn;
+    }
+    toggleMinimize() {
+      this.minimized = !this.minimized;
+      this.toolbarEl.classList.toggle("remarq-minimized", this.minimized);
+      for (const btn of this.buttons) {
+        btn.style.display = this.minimized ? "none" : "";
+      }
+    }
+    toggleExportMenu(e) {
+      if (this.exportMenu) {
+        this.closeExportMenu();
+        return;
+      }
+      this.exportMenu = document.createElement("div");
+      this.exportMenu.className = "remarq-export-menu";
+      const mdBtn = document.createElement("button");
+      mdBtn.textContent = "Markdown (clipboard)";
+      mdBtn.addEventListener("click", () => {
+        this.callbacks.onExportMd();
+        this.closeExportMenu();
+      });
+      const jsonBtn = document.createElement("button");
+      jsonBtn.textContent = "JSON (file)";
+      jsonBtn.addEventListener("click", () => {
+        this.callbacks.onExportJson();
+        this.closeExportMenu();
+      });
+      this.exportMenu.appendChild(mdBtn);
+      this.exportMenu.appendChild(jsonBtn);
+      const exportBtn = e.currentTarget;
+      exportBtn.style.position = "relative";
+      exportBtn.appendChild(this.exportMenu);
+    }
+    closeExportMenu() {
+      if (this.exportMenu) {
+        this.exportMenu.remove();
+        this.exportMenu = null;
+      }
+    }
+  };
+
+  // src/ui/overlay.ts
+  var Overlay = class {
+    constructor(container) {
+      this.container = container;
+      this.overlayEl = document.createElement("div");
+      this.overlayEl.className = "remarq-overlay";
+      this.overlayEl.style.display = "none";
+      this.tooltipEl = document.createElement("div");
+      this.tooltipEl.className = "remarq-tooltip";
+      this.tooltipEl.style.display = "none";
+      container.appendChild(this.overlayEl);
+      container.appendChild(this.tooltipEl);
+    }
+    show(target) {
+      try {
+        const rect = target.getBoundingClientRect();
+        this.overlayEl.style.display = "block";
+        this.overlayEl.style.top = `${rect.top}px`;
+        this.overlayEl.style.left = `${rect.left}px`;
+        this.overlayEl.style.width = `${rect.width}px`;
+        this.overlayEl.style.height = `${rect.height}px`;
+        const tag = target.tagName.toLowerCase();
+        const text = target.textContent?.trim().slice(0, 30) || "";
+        const dataAnnotate = target.getAttribute("data-annotate");
+        let label = `<${tag}>`;
+        if (text) label += ` "${text}"`;
+        if (dataAnnotate) label += ` [${dataAnnotate}]`;
+        this.tooltipEl.textContent = label;
+        this.tooltipEl.style.display = "block";
+        this.tooltipEl.style.top = `${rect.top - 28}px`;
+        this.tooltipEl.style.left = `${rect.left}px`;
+      } catch {
+        this.hide();
+      }
+    }
+    updateTooltipPosition(x, y) {
+      this.tooltipEl.style.left = `${x + 12}px`;
+      this.tooltipEl.style.top = `${y - 28}px`;
+    }
+    hide() {
+      this.overlayEl.style.display = "none";
+      this.tooltipEl.style.display = "none";
+    }
+    destroy() {
+      this.overlayEl.remove();
+      this.tooltipEl.remove();
+    }
+  };
+
+  // src/ui/popup.ts
+  var Popup = class {
+    constructor(container) {
+      this.container = container;
+      this.popupEl = null;
+      this.keyHandler = null;
+    }
+    show(info, position, onSubmit, onCancel) {
+      this.hide();
+      const popup2 = document.createElement("div");
+      popup2.className = "remarq-popup";
+      popup2.style.top = `${position.top}px`;
+      popup2.style.left = `${position.left}px`;
+      const header = document.createElement("div");
+      header.className = "remarq-popup-header";
+      header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""}`;
+      const body = document.createElement("div");
+      body.className = "remarq-popup-body";
+      const textarea = document.createElement("textarea");
+      textarea.placeholder = "Add your comment...";
+      body.appendChild(textarea);
+      const actions = document.createElement("div");
+      actions.className = "remarq-popup-actions";
+      const cancelBtn = document.createElement("button");
+      cancelBtn.textContent = "Cancel";
+      cancelBtn.addEventListener("click", () => {
+        this.hide();
+        onCancel();
+      });
+      const addBtn = document.createElement("button");
+      addBtn.className = "remarq-primary";
+      addBtn.textContent = "Add";
+      addBtn.addEventListener("click", () => {
+        const comment = textarea.value.trim();
+        if (!comment) return;
+        this.hide();
+        onSubmit(comment);
+      });
+      actions.appendChild(cancelBtn);
+      actions.appendChild(addBtn);
+      popup2.appendChild(header);
+      popup2.appendChild(body);
+      popup2.appendChild(actions);
+      this.container.appendChild(popup2);
+      this.popupEl = popup2;
+      this.keyHandler = (e) => {
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          const comment = textarea.value.trim();
+          if (!comment) return;
+          this.hide();
+          onSubmit(comment);
+        }
+        if (e.key === "Escape") {
+          this.hide();
+          onCancel();
+        }
+      };
+      document.addEventListener("keydown", this.keyHandler);
+      requestAnimationFrame(() => textarea.focus());
+    }
+    showDetail(info, position, callbacks) {
+      this.hide();
+      const popup2 = document.createElement("div");
+      popup2.className = "remarq-popup";
+      popup2.style.top = `${position.top}px`;
+      popup2.style.left = `${position.left}px`;
+      const header = document.createElement("div");
+      header.className = "remarq-popup-header";
+      header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""} [${info.status}]`;
+      const body = document.createElement("div");
+      body.className = "remarq-popup-body";
+      body.textContent = info.comment;
+      const actions = document.createElement("div");
+      actions.className = "remarq-popup-actions";
+      if (info.status === "pending") {
+        const resolveBtn = document.createElement("button");
+        resolveBtn.className = "remarq-primary";
+        resolveBtn.textContent = "Resolve";
+        resolveBtn.addEventListener("click", () => {
+          this.hide();
+          callbacks.onResolve();
+        });
+        actions.appendChild(resolveBtn);
+      }
+      const deleteBtn = document.createElement("button");
+      deleteBtn.textContent = "Delete";
+      deleteBtn.addEventListener("click", () => {
+        this.hide();
+        callbacks.onDelete();
+      });
+      actions.appendChild(deleteBtn);
+      const closeBtn = document.createElement("button");
+      closeBtn.textContent = "Close";
+      closeBtn.addEventListener("click", () => {
+        this.hide();
+        callbacks.onClose();
+      });
+      actions.appendChild(closeBtn);
+      popup2.appendChild(header);
+      popup2.appendChild(body);
+      popup2.appendChild(actions);
+      this.container.appendChild(popup2);
+      this.popupEl = popup2;
+      this.keyHandler = (e) => {
+        if (e.key === "Escape") {
+          this.hide();
+          callbacks.onClose();
+        }
+      };
+      document.addEventListener("keydown", this.keyHandler);
+    }
+    hide() {
+      if (this.popupEl) {
+        this.popupEl.remove();
+        this.popupEl = null;
+      }
+      if (this.keyHandler) {
+        document.removeEventListener("keydown", this.keyHandler);
+        this.keyHandler = null;
+      }
+    }
+    destroy() {
+      this.hide();
+    }
+  };
+
+  // src/ui/markers.ts
+  var MarkerManager = class {
+    constructor(container, onClick) {
+      this.container = container;
+      this.onClick = onClick;
+      this.markers = /* @__PURE__ */ new Map();
+      this.rafId = null;
+      this.counter = 0;
+      this.startPositionLoop();
+    }
+    addMarker(annotation, target) {
+      this.counter++;
+      const markerEl = document.createElement("div");
+      markerEl.className = "remarq-marker";
+      markerEl.setAttribute("data-status", annotation.status);
+      markerEl.setAttribute("data-annotation-id", annotation.id);
+      markerEl.textContent = String(this.counter);
+      markerEl.title = annotation.comment;
+      markerEl.addEventListener("click", () => {
+        this.onClick?.(annotation.id);
+      });
+      this.container.appendChild(markerEl);
+      this.markers.set(annotation.id, { annotation, target, markerEl });
+      this.updatePosition(annotation.id);
+    }
+    removeMarker(id) {
+      const entry = this.markers.get(id);
+      if (entry) {
+        entry.markerEl.remove();
+        this.markers.delete(id);
+      }
+    }
+    updateStatus(id, status) {
+      const entry = this.markers.get(id);
+      if (entry) {
+        entry.annotation.status = status;
+        entry.markerEl.setAttribute("data-status", status);
+      }
+    }
+    clear() {
+      for (const entry of this.markers.values()) {
+        entry.markerEl.remove();
+      }
+      this.markers.clear();
+      this.counter = 0;
+    }
+    destroy() {
+      if (this.rafId !== null) {
+        cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+      }
+      this.clear();
+    }
+    updatePosition(id) {
+      const entry = this.markers.get(id);
+      if (!entry) return;
+      try {
+        const rect = entry.target.getBoundingClientRect();
+        entry.markerEl.style.top = `${window.scrollY + rect.top - 12}px`;
+        entry.markerEl.style.left = `${window.scrollX + rect.right - 12}px`;
+      } catch {
+      }
+    }
+    startPositionLoop() {
+      const update = () => {
+        for (const id of this.markers.keys()) {
+          this.updatePosition(id);
+        }
+        this.rafId = requestAnimationFrame(update);
+      };
+      this.rafId = requestAnimationFrame(update);
+    }
+  };
+
+  // src/ui/detached-panel.ts
+  var DetachedPanel = class {
+    constructor(container, onDelete) {
+      this.container = container;
+      this.onDelete = onDelete;
+      this.panelEl = null;
+    }
+    update(annotations) {
+      this.remove();
+      if (annotations.length === 0) return;
+      const panel = document.createElement("div");
+      panel.className = "remarq-detached-panel";
+      const header = document.createElement("div");
+      header.className = "remarq-detached-header";
+      header.textContent = `Detached (${annotations.length})`;
+      panel.appendChild(header);
+      for (const ann of annotations) {
+        const item = document.createElement("div");
+        item.className = "remarq-detached-item";
+        const info = document.createElement("div");
+        info.className = "remarq-detached-info";
+        const comment = document.createElement("div");
+        comment.className = "remarq-detached-comment";
+        comment.textContent = ann.comment;
+        const elDesc = document.createElement("div");
+        elDesc.className = "remarq-detached-element";
+        const fp = ann.fingerprint;
+        let desc = `<${fp.tagName}>`;
+        if (fp.textContent) desc += ` "${fp.textContent}"`;
+        if (fp.dataAnnotate) desc += ` [${fp.dataAnnotate}]`;
+        elDesc.textContent = desc;
+        info.appendChild(comment);
+        info.appendChild(elDesc);
+        const deleteBtn = document.createElement("button");
+        deleteBtn.className = "remarq-detached-delete";
+        deleteBtn.textContent = "\xD7";
+        deleteBtn.addEventListener("click", () => {
+          this.onDelete?.(ann.id);
+        });
+        item.appendChild(info);
+        item.appendChild(deleteBtn);
+        panel.appendChild(item);
+      }
+      this.container.appendChild(panel);
+      this.panelEl = panel;
+    }
+    destroy() {
+      this.remove();
+    }
+    remove() {
+      if (this.panelEl) {
+        this.panelEl.remove();
+        this.panelEl = null;
+      }
+    }
+  };
+
+  // src/spa.ts
+  var RouteObserver = class {
+    constructor() {
+      this.listeners = /* @__PURE__ */ new Set();
+      this.originalPushState = history.pushState.bind(history);
+      this.originalReplaceState = history.replaceState.bind(history);
+      this.boundOnPopState = () => this.notify();
+      this.boundOnHashChange = () => this.notify();
+      this.patchHistory();
+      window.addEventListener("popstate", this.boundOnPopState);
+      window.addEventListener("hashchange", this.boundOnHashChange);
+    }
+    currentRoute() {
+      return location.pathname + location.hash;
+    }
+    onChange(listener) {
+      this.listeners.add(listener);
+      return () => {
+        this.listeners.delete(listener);
+      };
+    }
+    destroy() {
+      window.removeEventListener("popstate", this.boundOnPopState);
+      window.removeEventListener("hashchange", this.boundOnHashChange);
+      history.pushState = this.originalPushState;
+      history.replaceState = this.originalReplaceState;
+      this.listeners.clear();
+    }
+    notify() {
+      const route = this.currentRoute();
+      for (const listener of this.listeners) {
+        listener(route);
+      }
+    }
+    patchHistory() {
+      const self = this;
+      history.pushState = function(...args) {
+        self.originalPushState.apply(this, args);
+        self.notify();
+      };
+      history.replaceState = function(...args) {
+        self.originalReplaceState.apply(this, args);
+        self.notify();
+      };
+    }
+  };
+
+  // src/web-remarq.ts
+  var initialized = false;
+  var options = {};
+  var storage;
+  var themeManager;
+  var toolbar;
+  var overlay;
+  var popup;
+  var markers;
+  var detachedPanel;
+  var routeObserver;
+  var inspecting = false;
+  var mutationObserver = null;
+  var unsubRoute = null;
+  function currentRoute() {
+    return location.pathname + location.hash;
+  }
+  function generateId() {
+    return `ann-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  function refreshMarkers() {
+    markers.clear();
+    const detached = [];
+    const route = currentRoute();
+    const anns = storage.getByRoute(route);
+    for (const ann of anns) {
+      const el = matchElement(ann.fingerprint, { dataAttribute: options.dataAttribute });
+      if (el) {
+        markers.addMarker(ann, el);
+      } else {
+        detached.push(ann);
+      }
+    }
+    detachedPanel.update(detached);
+    const pendingCount = anns.filter((a) => a.status === "pending").length;
+    toolbar.setBadgeCount(pendingCount);
+  }
+  function handleInspectClick(e) {
+    if (!inspecting) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const target = e.target;
+    if (!target || target.closest("[data-remarq-theme]")) return;
+    overlay.hide();
+    setInspecting(false);
+    const rect = target.getBoundingClientRect();
+    popup.show(
+      {
+        tag: target.tagName.toLowerCase(),
+        text: target.textContent?.trim().slice(0, 30) ?? ""
+      },
+      {
+        top: rect.bottom + 8,
+        left: rect.left
+      },
+      (comment) => {
+        const fp = createFingerprint(target, {
+          classFilter: options.classFilter,
+          dataAttribute: options.dataAttribute
+        });
+        const ann = {
+          id: generateId(),
+          comment,
+          fingerprint: fp,
+          route: currentRoute(),
+          timestamp: Date.now(),
+          status: "pending"
+        };
+        storage.add(ann);
+        refreshMarkers();
+      },
+      () => {
+      }
+    );
+  }
+  function handleInspectHover(e) {
+    if (!inspecting) return;
+    const target = e.target;
+    if (!target || target.closest("[data-remarq-theme]")) return;
+    overlay.show(target);
+    overlay.updateTooltipPosition(e.clientX, e.clientY);
+  }
+  function handleInspectKeydown(e) {
+    if (e.key === "Escape" && inspecting) {
+      setInspecting(false);
+      overlay.hide();
+    }
+  }
+  function setInspecting(value) {
+    inspecting = value;
+    toolbar.setInspectActive(value);
+    if (!value) overlay.hide();
+  }
+  function handleMarkerClick(annotationId) {
+    const ann = storage.getAll().find((a) => a.id === annotationId);
+    if (!ann) return;
+    const el = matchElement(ann.fingerprint, { dataAttribute: options.dataAttribute });
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    popup.showDetail(
+      {
+        tag: ann.fingerprint.tagName,
+        text: ann.fingerprint.textContent ?? "",
+        comment: ann.comment,
+        status: ann.status
+      },
+      { top: rect.bottom + 8, left: rect.left },
+      {
+        onResolve: () => {
+          storage.update(ann.id, { status: "resolved" });
+          refreshMarkers();
+        },
+        onDelete: () => {
+          storage.remove(ann.id);
+          refreshMarkers();
+        },
+        onClose: () => {
+        }
+      }
+    );
+  }
+  function exportMarkdown() {
+    const route = currentRoute();
+    const anns = storage.getByRoute(route);
+    if (!anns.length) return;
+    const lines = [`## Annotations \u2014 ${route} (${anns.length})`, ""];
+    anns.forEach((ann, i) => {
+      const fp = ann.fingerprint;
+      let desc = `<${fp.tagName}>`;
+      if (fp.textContent) desc += ` "${fp.textContent}"`;
+      if (fp.parentAnchor) desc += ` (${fp.parentAnchor})`;
+      if (fp.dataAnnotate) desc += fp.parentAnchor ? ` > ${fp.dataAnnotate}` : ` (${fp.dataAnnotate})`;
+      lines.push(`${i + 1}. [${ann.status}] ${desc}: "${ann.comment}"`);
+    });
+    const text = lines.join("\n");
+    try {
+      navigator.clipboard.writeText(text);
+    } catch {
+      console.warn("[web-remarq] Clipboard write failed");
+    }
+  }
+  function exportJSON() {
+    const data = storage.exportJSON();
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `remarq-annotations-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  function setupMutationObserver() {
+    mutationObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.target instanceof HTMLElement && m.target.closest("[data-remarq-theme]")) return;
+      }
+      refreshMarkers();
+    });
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["id", "class", "data-annotate", "data-testid", "data-test", "data-cy"]
+    });
+  }
+  var WebRemarq = {
+    init(opts) {
+      if (initialized) return;
+      options = opts ?? {};
+      try {
+        injectStyles();
+        storage = new AnnotationStorage();
+        themeManager = new ThemeManager(document.body, options.theme);
+        overlay = new Overlay(themeManager.container);
+        popup = new Popup(themeManager.container);
+        markers = new MarkerManager(themeManager.container, handleMarkerClick);
+        detachedPanel = new DetachedPanel(themeManager.container, (id) => {
+          storage.remove(id);
+          refreshMarkers();
+        });
+        toolbar = new Toolbar(themeManager.container, {
+          onInspect: () => setInspecting(!inspecting),
+          onExportMd: exportMarkdown,
+          onExportJson: exportJSON,
+          onImport: () => {
+            const file = toolbar.getFileInput().files?.[0];
+            if (file) {
+              WebRemarq.import(file);
+            }
+          },
+          onClear: () => {
+            storage.clearAll();
+            refreshMarkers();
+          },
+          onThemeToggle: () => themeManager.toggle()
+        });
+        if (storage.isMemoryOnly) {
+          toolbar.setMemoryWarning(true);
+        }
+        routeObserver = new RouteObserver();
+        unsubRoute = routeObserver.onChange(() => refreshMarkers());
+        document.addEventListener("click", handleInspectClick, true);
+        document.addEventListener("mousemove", handleInspectHover);
+        document.addEventListener("keydown", handleInspectKeydown);
+        setupMutationObserver();
+        refreshMarkers();
+        initialized = true;
+      } catch (err) {
+        console.error("[web-remarq] Init failed:", err);
+      }
+    },
+    destroy() {
+      if (!initialized) return;
+      try {
+        document.removeEventListener("click", handleInspectClick, true);
+        document.removeEventListener("mousemove", handleInspectHover);
+        document.removeEventListener("keydown", handleInspectKeydown);
+        mutationObserver?.disconnect();
+        mutationObserver = null;
+        unsubRoute?.();
+        routeObserver?.destroy();
+        markers?.destroy();
+        detachedPanel?.destroy();
+        popup?.destroy();
+        overlay?.destroy();
+        toolbar?.destroy();
+        themeManager?.destroy();
+        removeStyles();
+        inspecting = false;
+        initialized = false;
+      } catch (err) {
+        console.error("[web-remarq] Destroy failed:", err);
+      }
+    },
+    setTheme(theme) {
+      themeManager?.setTheme(theme);
+    },
+    export(format) {
+      if (format === "md") exportMarkdown();
+      else exportJSON();
+    },
+    async import(file) {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      storage.importJSON(data);
+      refreshMarkers();
+      const allAnns = storage.getAll();
+      let matched = 0;
+      let detached = 0;
+      for (const ann of allAnns) {
+        if (matchElement(ann.fingerprint, { dataAttribute: options.dataAttribute })) {
+          matched++;
+        } else {
+          detached++;
+        }
+      }
+      return { total: allAnns.length, matched, detached };
+    },
+    getAnnotations(route) {
+      if (!storage) return [];
+      return route ? storage.getByRoute(route) : storage.getAll();
+    },
+    clearAll() {
+      storage?.clearAll();
+      if (initialized) refreshMarkers();
+    }
+  };
+  return __toCommonJS(src_exports);
+})();
+//# sourceMappingURL=web-remarq.global.global.js.map