web-remarq 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -145,7 +145,7 @@ var AnnotationStorage = class {
       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 @@ function detectRemarqPlugin(el) {
   };
 }
 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 @@ function detectReactFiber(el) {
   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 @@ function detectSource(el) {
 // 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 @@ function getStableId(el) {
   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 @@ function jaccardSimilarity(a, b) {
   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 @@ function buildDomPath2(el) {
   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 @@ function parseSourceLocation(raw) {
   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 TEMPLATE_GLOB = "*.{tsx,jsx,vue,svelte,html}";
 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 @@ function buildSearchHints(fp) {
   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 CSS = `
 
 .remarq-toolbar {
   position: fixed;
-  bottom: 16px;
-  right: 16px;
   z-index: 2147483647;
   display: flex;
   gap: 4px;
@@ -612,6 +610,11 @@ var CSS = `
   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 CSS = `
 
 .remarq-detached-panel {
   position: fixed;
-  bottom: 60px;
-  right: 16px;
   z-index: 2147483646;
   width: 280px;
   max-height: 300px;
@@ -780,6 +781,11 @@ var CSS = `
   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 CSS = `
   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 CSS = `
 .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 @@ function removeStyles() {
 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 ThemeManager = class {
 };
 
 // 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 ICONS = {
   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 Toolbar = class {
     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 Toolbar = class {
     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 Toolbar = class {
     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 @@ function describeElement(el) {
   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 Popup = class {
       });
       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 MarkerManager = class {
     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 MarkerManager = class {
   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 MarkerManager = class {
     }
     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 @@ function hideToast() {
 
 // 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 DetachedPanel = class {
         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 DetachedPanel = class {
   }
 };
 
+// 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 refreshScheduled = false;
 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 @@ function handleInspectHover(e) {
   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 @@ function handleInspectKeydown(e) {
     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 @@ function setInspecting(value) {
   }
 }
 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 @@ function handleMarkerClick(annotationId) {
   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 @@ function handleMarkerClick(annotationId) {
       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 @@ function generateMarkdown() {
   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 @@ function generateMarkdown() {
     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 @@ function setupMutationObserver() {
 }
 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();