web-remarq 0.4.1 → 0.4.3

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

@@ -145,7 +145,7 @@ var WebRemarq = (() => {
         const raw = localStorage.getItem(STORAGE_KEY);
         if (raw) {
           const parsed = JSON.parse(raw);
-          const _a = parsed, { version, annotations } = _a, rest = __objRest(_a, ["version", "annotations"]);
+          const _a3 = parsed, { version, annotations } = _a3, rest = __objRest(_a3, ["version", "annotations"]);
           this.annotations = annotations != null ? annotations : [];
           this.extraFields = rest;
           this.migrateViewportBuckets();
@@ -227,13 +227,13 @@ var WebRemarq = (() => {
     };
   }
   function detectExternalSource(el) {
-    var _a;
-    const source = (_a = el.dataset.source) != null ? _a : el.getAttribute("data-locator");
+    var _a3;
+    const source = (_a3 = el.dataset.source) != null ? _a3 : el.getAttribute("data-locator");
     if (!source) return { source: null, component: null };
     return { source, component: null };
   }
   function detectReactFiber(el) {
-    var _a, _b, _c, _d;
+    var _a3, _b, _c, _d;
     const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
     if (!key) return { source: null, component: null };
     let current = el[key];
@@ -241,7 +241,7 @@ var WebRemarq = (() => {
     while (current && depth < 15) {
       const debugSource = current._debugSource;
       if (debugSource == null ? void 0 : debugSource.fileName) {
-        const source = `${debugSource.fileName}:${(_a = debugSource.lineNumber) != null ? _a : 0}:${(_b = debugSource.columnNumber) != null ? _b : 0}`;
+        const source = `${debugSource.fileName}:${(_a3 = debugSource.lineNumber) != null ? _a3 : 0}:${(_b = debugSource.columnNumber) != null ? _b : 0}`;
         const fiberType = current.type;
         const component = typeof fiberType === "object" && fiberType ? (_d = (_c = fiberType.displayName) != null ? _c : fiberType.name) != null ? _d : null : null;
         return { source, component };
@@ -262,8 +262,8 @@ var WebRemarq = (() => {
   // src/core/fingerprint.ts
   var TEXT_MAX_LENGTH = 50;
   function createFingerprint(el, options2) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const dataAttr = (_a = options2 == null ? void 0 : options2.dataAttribute) != null ? _a : "data-annotate";
+    var _a3, _b, _c, _d, _e, _f, _g;
+    const dataAttr = (_a3 = options2 == null ? void 0 : options2.dataAttribute) != null ? _a3 : "data-annotate";
     return __spreadValues({
       dataAnnotate: (_b = el.getAttribute(dataAttr)) != null ? _b : null,
       dataTestId: (_e = (_d = (_c = el.getAttribute("data-testid")) != null ? _c : el.getAttribute("data-test")) != null ? _d : el.getAttribute("data-cy")) != null ? _e : null,
@@ -308,11 +308,11 @@ var WebRemarq = (() => {
     return id;
   }
   function getTextContent(el) {
-    var _a, _b, _c;
+    var _a3, _b, _c;
     let text = "";
     for (const node of Array.from(el.childNodes)) {
       if (node.nodeType === Node.TEXT_NODE) {
-        text += (_a = node.textContent) != null ? _a : "";
+        text += (_a3 = node.textContent) != null ? _a3 : "";
       }
     }
     text = text.trim();
@@ -397,13 +397,13 @@ var WebRemarq = (() => {
     return union === 0 ? 0 : intersection / union;
   }
   function scoreCandidate(el, fp, dataAttr) {
-    var _a, _b;
+    var _a3, _b;
     let score = 0;
     const elAnnotate = el.getAttribute(dataAttr);
     if (fp.dataAnnotate && elAnnotate === fp.dataAnnotate) {
       score += 100;
     }
-    const elText = (_b = (_a = el.textContent) == null ? void 0 : _a.trim().slice(0, 50)) != null ? _b : null;
+    const elText = (_b = (_a3 = el.textContent) == null ? void 0 : _a3.trim().slice(0, 50)) != null ? _b : null;
     const textSim = textSimilarity(fp.textContent, elText);
     if (textSim > 0.7) {
       score += textSim * 35;
@@ -455,8 +455,8 @@ var WebRemarq = (() => {
     return parts.join(" > ");
   }
   function matchElement(fp, options2) {
-    var _a;
-    const dataAttr = (_a = options2 == null ? void 0 : options2.dataAttribute) != null ? _a : "data-annotate";
+    var _a3;
+    const dataAttr = (_a3 = options2 == null ? void 0 : options2.dataAttribute) != null ? _a3 : "data-annotate";
     if (fp.dataAnnotate) {
       const el = document.querySelector(`[${dataAttr}="${fp.dataAnnotate}"]`);
       if (el) return el;
@@ -495,10 +495,10 @@ var WebRemarq = (() => {
     return { file, line, column: isNaN(column) ? 0 : column };
   }
   function resolveSource(fp) {
-    var _a, _b;
+    var _a3, _b;
     if (fp.sourceLocation) {
       const parsed = parseSourceLocation(fp.sourceLocation);
-      if (parsed) return __spreadProps(__spreadValues({}, parsed), { component: (_a = fp.componentName) != null ? _a : null });
+      if (parsed) return __spreadProps(__spreadValues({}, parsed), { component: (_a3 = fp.componentName) != null ? _a3 : null });
     }
     if (fp.detectedSource) {
       const parsed = parseSourceLocation(fp.detectedSource);
@@ -510,7 +510,7 @@ var WebRemarq = (() => {
   var CSS_MODULE_GLOB = "*.module.{css,scss,less}";
   var COMPONENT_GLOB = "*.{tsx,jsx,vue,ts,js}";
   function buildSearchHints(fp) {
-    var _a, _b;
+    var _a3, _b;
     const grepQueries = [];
     if (fp.dataAnnotate) {
       grepQueries.push({ query: `data-annotate="${fp.dataAnnotate}"`, glob: TEMPLATE_GLOB, confidence: "high" });
@@ -530,7 +530,7 @@ var WebRemarq = (() => {
     if (fp.role) {
       grepQueries.push({ query: `role="${fp.role}"`, glob: TEMPLATE_GLOB, confidence: "medium" });
     }
-    if ((_a = fp.cssModules) == null ? void 0 : _a.length) {
+    if ((_a3 = fp.cssModules) == null ? void 0 : _a3.length) {
       for (const mod of fp.cssModules) {
         grepQueries.push({ query: `.${mod.localName}`, glob: CSS_MODULE_GLOB, confidence: "medium" });
         grepQueries.push({ query: `styles.${mod.localName}`, glob: COMPONENT_GLOB, confidence: "medium" });
@@ -597,8 +597,6 @@ var WebRemarq = (() => {
 
 .remarq-toolbar {
   position: fixed;
-  bottom: 16px;
-  right: 16px;
   z-index: 2147483647;
   display: flex;
   gap: 4px;
@@ -612,6 +610,11 @@ var WebRemarq = (() => {
   color: var(--remarq-text);
 }
 
+.remarq-toolbar.remarq-pos-bottom-right { bottom: 16px; right: 16px; }
+.remarq-toolbar.remarq-pos-bottom-left { bottom: 16px; left: 16px; flex-direction: row-reverse; }
+.remarq-toolbar.remarq-pos-top-right { top: 16px; right: 16px; }
+.remarq-toolbar.remarq-pos-top-left { top: 16px; left: 16px; flex-direction: row-reverse; }
+
 .remarq-toolbar.remarq-minimized { padding: 4px; }
 
 .remarq-toolbar-btn {
@@ -765,8 +768,6 @@ var WebRemarq = (() => {
 
 .remarq-detached-panel {
   position: fixed;
-  bottom: 60px;
-  right: 16px;
   z-index: 2147483646;
   width: 280px;
   max-height: 300px;
@@ -780,6 +781,11 @@ var WebRemarq = (() => {
   color: var(--remarq-text);
 }
 
+.remarq-detached-panel.remarq-pos-bottom-right { bottom: 60px; right: 16px; }
+.remarq-detached-panel.remarq-pos-bottom-left { bottom: 60px; left: 16px; }
+.remarq-detached-panel.remarq-pos-top-right { top: 60px; right: 16px; }
+.remarq-detached-panel.remarq-pos-top-left { top: 60px; left: 16px; }
+
 .remarq-detached-header {
   padding: 8px 12px;
   border-bottom: 1px solid var(--remarq-border);
@@ -834,6 +840,20 @@ var WebRemarq = (() => {
   overflow: hidden;
 }
 
+.remarq-pos-top-right .remarq-export-menu,
+.remarq-pos-top-left .remarq-export-menu {
+  bottom: auto;
+  top: 100%;
+  margin-bottom: 0;
+  margin-top: 4px;
+}
+
+.remarq-pos-bottom-left .remarq-export-menu,
+.remarq-pos-top-left .remarq-export-menu {
+  right: auto;
+  left: 0;
+}
+
 .remarq-export-menu button {
   display: block;
   width: 100%;
@@ -937,6 +957,70 @@ var WebRemarq = (() => {
 .remarq-toolbar-btn:disabled { opacity: 0.3; cursor: default; }
 .remarq-toolbar-btn:disabled:hover { background: transparent; }
 
+.remarq-shortcuts-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remarq-shortcuts-modal {
+  background: var(--remarq-bg);
+  border: 1px solid var(--remarq-border);
+  border-radius: 12px;
+  box-shadow: var(--remarq-shadow);
+  padding: 20px 24px;
+  min-width: 300px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--remarq-text);
+}
+
+.remarq-shortcuts-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--remarq-border);
+}
+
+.remarq-shortcuts-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.remarq-shortcuts-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 2px 8px;
+  background: var(--remarq-bg-secondary);
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.remarq-shortcuts-context {
+  font-size: 10px;
+  color: var(--remarq-text-secondary);
+  background: var(--remarq-bg-secondary);
+  border-radius: 3px;
+  padding: 1px 6px;
+  margin-left: auto;
+}
+
 .remarq-popup-hint {
   font-size: 11px;
   color: var(--remarq-text-secondary);
@@ -972,9 +1056,9 @@ var WebRemarq = (() => {
   var THEME_KEY = "remarq:theme";
   var ThemeManager = class {
     constructor(parent, initialTheme) {
-      var _a;
+      var _a3;
       const persisted = this.loadTheme();
-      this.theme = (_a = initialTheme != null ? initialTheme : persisted) != null ? _a : "light";
+      this.theme = (_a3 = initialTheme != null ? initialTheme : persisted) != null ? _a3 : "light";
       this.container = document.createElement("div");
       this.container.setAttribute("data-remarq-theme", this.theme);
       parent.appendChild(this.container);
@@ -1011,14 +1095,18 @@ var WebRemarq = (() => {
   };
 
   // src/ui/toolbar.ts
+  var _a;
+  var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test((_a = navigator.platform) != null ? _a : "");
+  var modKey = isMac ? "\u2325" : "Alt";
   var TOOLTIPS = {
-    inspect: "Inspect element",
+    inspect: `Inspect element (${modKey}+I)`,
     spacing: "Spacing overlay (S)",
-    copy: "Copy as Markdown",
+    copy: "Copy as Markdown (C)",
     export: "Export",
     import: "Import JSON",
     clear: "Clear all",
     theme: "Toggle theme",
+    help: "Keyboard shortcuts (?)",
     minimize: "Minimize"
   };
   var ICONS = {
@@ -1029,17 +1117,19 @@ var WebRemarq = (() => {
     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="M3 4h10M6 4V3h4v1M5 4v9h6V4"/></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>',
+    help: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M6 6.5a2 2 0 0 1 3.5 1.5c0 1-1.5 1-1.5 2"/><circle cx="8" cy="12" r="0.5" fill="currentColor" stroke="none"/></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) {
+    constructor(container, callbacks, position = "bottom-right") {
       this.container = container;
       this.callbacks = callbacks;
+      this.position = position;
       this.exportMenu = null;
       this.minimized = false;
       this.buttons = [];
       this.toolbarEl = document.createElement("div");
-      this.toolbarEl.className = "remarq-toolbar";
+      this.toolbarEl.className = `remarq-toolbar remarq-pos-${position}`;
       this.inspectBtn = this.createButton("inspect", ICONS.inspect, () => callbacks.onInspect());
       this.badgeEl = document.createElement("span");
       this.badgeEl.className = "remarq-badge";
@@ -1060,8 +1150,9 @@ var WebRemarq = (() => {
       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 helpBtn = this.createButton("help", ICONS.help, () => callbacks.onHelp());
       const minimizeBtn = this.createButton("minimize", ICONS.minimize, () => this.toggleMinimize());
-      this.buttons = [this.inspectBtn, this.spacingBtn, copyBtn, exportBtn, importBtn, clearBtn, themeBtn];
+      this.buttons = [this.inspectBtn, this.spacingBtn, copyBtn, exportBtn, importBtn, clearBtn, themeBtn, helpBtn];
       this.toolbarEl.appendChild(this.inspectBtn);
       this.toolbarEl.appendChild(this.spacingBtn);
       this.toolbarEl.appendChild(copyBtn);
@@ -1069,6 +1160,7 @@ var WebRemarq = (() => {
       this.toolbarEl.appendChild(importBtn);
       this.toolbarEl.appendChild(clearBtn);
       this.toolbarEl.appendChild(themeBtn);
+      this.toolbarEl.appendChild(helpBtn);
       this.toolbarEl.appendChild(minimizeBtn);
       this.toolbarEl.appendChild(this.fileInput);
       container.appendChild(this.toolbarEl);
@@ -1100,11 +1192,11 @@ var WebRemarq = (() => {
       this.toolbarEl.remove();
     }
     createButton(action, icon, handler) {
-      var _a;
+      var _a3;
       const btn = document.createElement("button");
       btn.className = "remarq-toolbar-btn";
       btn.setAttribute("data-remarq-action", action);
-      btn.title = (_a = TOOLTIPS[action]) != null ? _a : "";
+      btn.title = (_a3 = TOOLTIPS[action]) != null ? _a3 : "";
       btn.innerHTML = icon;
       btn.addEventListener("click", handler);
       return btn;
@@ -1226,11 +1318,11 @@ var WebRemarq = (() => {
     return parts.join(" ");
   }
   function getDirectText(el) {
-    var _a, _b, _c;
+    var _a3, _b, _c;
     let text = "";
     for (const node of Array.from(el.childNodes)) {
       if (node.nodeType === Node.TEXT_NODE) {
-        text += (_a = node.textContent) != null ? _a : "";
+        text += (_a3 = node.textContent) != null ? _a3 : "";
       }
     }
     text = text.trim();
@@ -1589,6 +1681,12 @@ var WebRemarq = (() => {
         });
         actions.appendChild(resolveBtn);
       }
+      const copyBtn = document.createElement("button");
+      copyBtn.textContent = "Copy";
+      copyBtn.addEventListener("click", () => {
+        callbacks.onCopy();
+      });
+      actions.appendChild(copyBtn);
       const deleteBtn = document.createElement("button");
       deleteBtn.textContent = "Delete";
       deleteBtn.addEventListener("click", () => {
@@ -1742,17 +1840,19 @@ var WebRemarq = (() => {
       markerEl.textContent = String(this.counter);
       markerEl.title = annotation.comment;
       markerEl.addEventListener("click", () => {
-        var _a;
-        (_a = this.onClick) == null ? void 0 : _a.call(this, annotation.id);
+        var _a3;
+        (_a3 = this.onClick) == null ? void 0 : _a3.call(this, annotation.id);
       });
       this.container.appendChild(markerEl);
       this.markers.set(annotation.id, { annotation, target, markerEl });
+      this.applyOutline(target, annotation.status);
       this.updatePosition(annotation.id);
     }
     removeMarker(id) {
       const entry = this.markers.get(id);
       if (entry) {
         entry.markerEl.remove();
+        this.removeOutline(entry.target);
         this.markers.delete(id);
       }
     }
@@ -1766,6 +1866,7 @@ var WebRemarq = (() => {
     clear() {
       for (const entry of this.markers.values()) {
         entry.markerEl.remove();
+        this.removeOutline(entry.target);
       }
       this.markers.clear();
       this.counter = 0;
@@ -1777,6 +1878,15 @@ var WebRemarq = (() => {
       }
       this.clear();
     }
+    applyOutline(target, status) {
+      const color = status === "pending" ? "#f97316" : "rgba(34, 197, 94, 0.5)";
+      target.style.outline = `2px solid ${color}`;
+      target.style.outlineOffset = "2px";
+    }
+    removeOutline(target) {
+      target.style.outline = "";
+      target.style.outlineOffset = "";
+    }
     updatePosition(id) {
       const entry = this.markers.get(id);
       if (!entry) return;
@@ -1828,16 +1938,17 @@ var WebRemarq = (() => {
 
   // src/ui/detached-panel.ts
   var DetachedPanel = class {
-    constructor(container, onDelete) {
+    constructor(container, onDelete, position = "bottom-right") {
       this.container = container;
       this.onDelete = onDelete;
+      this.position = position;
       this.panelEl = null;
     }
     update(otherBreakpoint, detached) {
       this.remove();
       if (otherBreakpoint.length === 0 && detached.length === 0) return;
       const panel = document.createElement("div");
-      panel.className = "remarq-detached-panel";
+      panel.className = `remarq-detached-panel remarq-pos-${this.position}`;
       if (otherBreakpoint.length > 0) {
         this.renderSection(panel, `Other viewport (${otherBreakpoint.length})`, otherBreakpoint, "other");
       }
@@ -1885,8 +1996,8 @@ var WebRemarq = (() => {
           deleteBtn.className = "remarq-detached-delete";
           deleteBtn.textContent = "\xD7";
           deleteBtn.addEventListener("click", () => {
-            var _a;
-            (_a = this.onDelete) == null ? void 0 : _a.call(this, ann.id);
+            var _a3;
+            (_a3 = this.onDelete) == null ? void 0 : _a3.call(this, ann.id);
           });
           item.appendChild(deleteBtn);
         }
@@ -1901,6 +2012,76 @@ var WebRemarq = (() => {
     }
   };
 
+  // src/ui/shortcuts-modal.ts
+  var _a2;
+  var isMac2 = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test((_a2 = navigator.platform) != null ? _a2 : "");
+  var modKey2 = isMac2 ? "\u2325" : "Alt";
+  var SHORTCUTS = [
+    { key: `${modKey2}+I`, description: "Toggle inspect mode" },
+    { key: "S", description: "Toggle spacing overlay", context: "inspect" },
+    { key: "C", description: "Copy all annotations to clipboard", context: "inspect" },
+    { key: "Esc", description: "Exit inspect mode / close popup" },
+    { key: "?", description: "Show this help" },
+    { key: "Enter", description: "Submit annotation", context: "popup" },
+    { key: "Shift+Enter", description: "New line", context: "popup" }
+  ];
+  var modalEl = null;
+  var keyHandler = null;
+  function showShortcutsModal(container) {
+    if (modalEl) {
+      hideShortcutsModal();
+      return;
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "remarq-shortcuts-backdrop";
+    const modal = document.createElement("div");
+    modal.className = "remarq-shortcuts-modal";
+    const title = document.createElement("div");
+    title.className = "remarq-shortcuts-title";
+    title.textContent = "Keyboard Shortcuts";
+    modal.appendChild(title);
+    for (const s of SHORTCUTS) {
+      const row = document.createElement("div");
+      row.className = "remarq-shortcuts-row";
+      const key = document.createElement("kbd");
+      key.className = "remarq-shortcuts-key";
+      key.textContent = s.key;
+      const desc = document.createElement("span");
+      desc.textContent = s.description;
+      row.appendChild(key);
+      row.appendChild(desc);
+      if ("context" in s && s.context) {
+        const badge = document.createElement("span");
+        badge.className = "remarq-shortcuts-context";
+        badge.textContent = s.context;
+        row.appendChild(badge);
+      }
+      modal.appendChild(row);
+    }
+    backdrop.appendChild(modal);
+    container.appendChild(backdrop);
+    modalEl = backdrop;
+    backdrop.addEventListener("click", (e) => {
+      if (e.target === backdrop) hideShortcutsModal();
+    });
+    keyHandler = (e) => {
+      if (e.key === "Escape" || e.key === "?") {
+        hideShortcutsModal();
+      }
+    };
+    document.addEventListener("keydown", keyHandler);
+  }
+  function hideShortcutsModal() {
+    if (modalEl) {
+      modalEl.remove();
+      modalEl = null;
+    }
+    if (keyHandler) {
+      document.removeEventListener("keydown", keyHandler);
+      keyHandler = null;
+    }
+  }
+
   // src/spa.ts
   var RouteObserver = class {
     constructor() {
@@ -1968,10 +2149,10 @@ var WebRemarq = (() => {
   var savedCursor = "";
   var elementCache = /* @__PURE__ */ new Map();
   function describeTarget(el) {
-    var _a, _b, _c, _d;
+    var _a3, _b, _c, _d;
     const parts = [];
     if (el.id) parts.push(`#${el.id}`);
-    const dataAnnotate = el.getAttribute((_a = options.dataAttribute) != null ? _a : "data-annotate");
+    const dataAnnotate = el.getAttribute((_a3 = options.dataAttribute) != null ? _a3 : "data-annotate");
     const dataTestId = el.getAttribute("data-testid") || el.getAttribute("data-test") || el.getAttribute("data-cy");
     if (dataAnnotate) parts.push(`[${dataAnnotate}]`);
     else if (dataTestId) parts.push(`[${dataTestId}]`);
@@ -2106,8 +2287,9 @@ var WebRemarq = (() => {
     overlay.updateTooltipPosition(e.clientX, e.clientY);
   }
   function handleInspectKeydown(e) {
-    var _a, _b;
-    const tag = (_a = e.target) == null ? void 0 : _a.tagName;
+    var _a3, _b;
+    if (options.shortcuts === false) return;
+    const tag = (_a3 = e.target) == null ? void 0 : _a3.tagName;
     if (tag === "INPUT" || tag === "TEXTAREA" || ((_b = e.target) == null ? void 0 : _b.isContentEditable)) return;
     if (e.key === "Escape" && inspecting) {
       setInspecting(false);
@@ -2119,13 +2301,20 @@ var WebRemarq = (() => {
       toolbar.setSpacingActive(spacingMode);
       if (!spacingMode) spacingOverlay.hide();
     }
-    if (e.key === "i") {
+    if (e.key === "i" && e.altKey) {
+      e.preventDefault();
       setInspecting(!inspecting);
       if (!inspecting) {
         overlay.hide();
         spacingOverlay.hide();
       }
     }
+    if (e.key === "c" && inspecting) {
+      copyToClipboard();
+    }
+    if (e.key === "?") {
+      showShortcutsModal(themeManager.container);
+    }
   }
   function setInspecting(value) {
     if (value && !inspecting) {
@@ -2146,7 +2335,7 @@ var WebRemarq = (() => {
     }
   }
   function handleMarkerClick(annotationId) {
-    var _a;
+    var _a3;
     const ann = storage.getAll().find((a) => a.id === annotationId);
     if (!ann) return;
     const el = resolveElement(ann);
@@ -2155,7 +2344,7 @@ var WebRemarq = (() => {
     popup.showDetail(
       {
         tag: ann.fingerprint.tagName,
-        text: (_a = ann.fingerprint.textContent) != null ? _a : "",
+        text: (_a3 = ann.fingerprint.textContent) != null ? _a3 : "",
         comment: ann.comment,
         status: ann.status
       },
@@ -2179,6 +2368,21 @@ var WebRemarq = (() => {
         onEdit: (newComment) => {
           storage.update(ann.id, { comment: newComment });
           refreshMarkers();
+        },
+        onCopy: () => {
+          const fp = ann.fingerprint;
+          const lines = [
+            `[${ann.status}] "${ann.comment}"`,
+            `Element: <${fp.tagName}>${fp.textContent ? ` "${fp.textContent}"` : ""}`,
+            `Route: ${ann.route}`,
+            `Viewport: ${ann.viewportBucket}px`
+          ];
+          if (fp.sourceLocation) lines.push(`Source: ${fp.sourceLocation}`);
+          navigator.clipboard.writeText(lines.join("\n")).then(() => {
+            showToast(themeManager.container, "Annotation copied");
+          }).catch(() => {
+            console.warn("[web-remarq] Clipboard write failed");
+          });
         }
       }
     );
@@ -2189,7 +2393,7 @@ var WebRemarq = (() => {
     if (!anns.length) return "";
     const lines = [`## Annotations \u2014 ${route} (${anns.length})`, ""];
     anns.forEach((ann, i) => {
-      var _a, _b;
+      var _a3, _b;
       const fp = ann.fingerprint;
       lines.push(`### ${i + 1}. [${ann.status}] "${ann.comment}"`);
       let elDesc = `Element: <${fp.tagName}>`;
@@ -2220,7 +2424,7 @@ var WebRemarq = (() => {
       if (fp.textContent) {
         lines.push(`- \`"${fp.textContent}"\` \u2014 text content in templates`);
       }
-      if ((_a = fp.cssModules) == null ? void 0 : _a.length) {
+      if ((_a3 = fp.cssModules) == null ? void 0 : _a3.length) {
         for (const mod of fp.cssModules) {
           lines.push(`- \`.${mod.localName}\` \u2014 in CSS Module file (likely \`${mod.moduleHint}.module.*\`)`);
           lines.push(`- \`styles.${mod.localName}\` \u2014 in component JS/TS`);
@@ -2299,6 +2503,7 @@ var WebRemarq = (() => {
   }
   var WebRemarq = {
     init(opts) {
+      var _a3;
       if (initialized) return;
       options = opts != null ? opts : {};
       try {
@@ -2309,11 +2514,12 @@ var WebRemarq = (() => {
         spacingOverlay = new SpacingOverlay(themeManager.container);
         popup = new Popup(themeManager.container);
         markers = new MarkerManager(themeManager.container, handleMarkerClick);
+        const position = (_a3 = options.position) != null ? _a3 : "bottom-right";
         detachedPanel = new DetachedPanel(themeManager.container, (id) => {
           elementCache.delete(id);
           storage.remove(id);
           refreshMarkers();
-        });
+        }, position);
         toolbar = new Toolbar(themeManager.container, {
           onInspect: () => setInspecting(!inspecting),
           onSpacingToggle: () => {
@@ -2326,8 +2532,8 @@ var WebRemarq = (() => {
           onExportMd: exportMarkdown,
           onExportJson: exportJSON,
           onImport: () => {
-            var _a;
-            const file = (_a = toolbar.getFileInput().files) == null ? void 0 : _a[0];
+            var _a4;
+            const file = (_a4 = toolbar.getFileInput().files) == null ? void 0 : _a4[0];
             if (file) {
               WebRemarq.import(file);
             }
@@ -2338,8 +2544,9 @@ var WebRemarq = (() => {
             refreshMarkers();
             showToast(themeManager.container, "All annotations cleared");
           },
-          onThemeToggle: () => themeManager.toggle()
-        });
+          onThemeToggle: () => themeManager.toggle(),
+          onHelp: () => showShortcutsModal(themeManager.container)
+        }, position);
         if (storage.isMemoryOnly) {
           toolbar.setMemoryWarning(true);
         }
@@ -2369,6 +2576,7 @@ var WebRemarq = (() => {
           document.body.style.cursor = savedCursor;
         }
         hideToast();
+        hideShortcutsModal();
         destroyViewportListener();
         unsubRoute == null ? void 0 : unsubRoute();
         routeObserver == null ? void 0 : routeObserver.destroy();