web-remarq 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -936,6 +936,12 @@ var CSS = `
 
 .remarq-toolbar-btn:disabled { opacity: 0.3; cursor: default; }
 .remarq-toolbar-btn:disabled:hover { background: transparent; }
+
+.remarq-popup-hint {
+  font-size: 11px;
+  color: var(--remarq-text-secondary);
+  margin-top: 4px;
+}
 `;
 function injectStyles() {
   if (document.querySelector(`style[${STYLES_ID}]`)) return;
@@ -1166,15 +1172,13 @@ var Overlay = class {
       this.overlayEl.style.height = `${rect.height}px`;
       this.tooltipEl.textContent = describeElement(target);
       this.tooltipEl.style.display = "block";
-      this.tooltipEl.style.top = `${rect.top - 28}px`;
-      this.tooltipEl.style.left = `${rect.left}px`;
+      this.positionTooltip(rect.left, rect.top - 28);
     } catch (e) {
       this.hide();
     }
   }
   updateTooltipPosition(x, y) {
-    this.tooltipEl.style.left = `${x + 12}px`;
-    this.tooltipEl.style.top = `${y - 28}px`;
+    this.positionTooltip(x + 12, y - 28);
   }
   hideHighlight() {
     this.overlayEl.style.display = "none";
@@ -1187,6 +1191,16 @@ var Overlay = class {
     this.overlayEl.remove();
     this.tooltipEl.remove();
   }
+  positionTooltip(left, top) {
+    this.tooltipEl.style.left = "0px";
+    this.tooltipEl.style.top = "0px";
+    const tooltipWidth = this.tooltipEl.offsetWidth;
+    const tooltipHeight = this.tooltipEl.offsetHeight;
+    const maxLeft = window.innerWidth - tooltipWidth - 8;
+    const maxTop = window.innerHeight - tooltipHeight - 8;
+    this.tooltipEl.style.left = `${Math.max(8, Math.min(left, maxLeft))}px`;
+    this.tooltipEl.style.top = `${Math.max(8, Math.min(top, maxTop))}px`;
+  }
 };
 function describeElement(el) {
   const tag = el.tagName.toLowerCase();
@@ -1466,6 +1480,7 @@ var Popup = class {
     this.container = container;
     this.popupEl = null;
     this.keyHandler = null;
+    this.outsideClickHandler = null;
   }
   show(info, position, onSubmit, onCancel) {
     this.hide();
@@ -1478,7 +1493,11 @@ var Popup = class {
     body.className = "remarq-popup-body";
     const textarea = document.createElement("textarea");
     textarea.placeholder = "Add your comment...";
+    const hint = document.createElement("div");
+    hint.className = "remarq-popup-hint";
+    hint.textContent = "Enter to submit \xB7 Shift+Enter for new line";
     body.appendChild(textarea);
+    body.appendChild(hint);
     const actions = document.createElement("div");
     actions.className = "remarq-popup-actions";
     const cancelBtn = document.createElement("button");
@@ -1508,18 +1527,37 @@ var Popup = class {
       textarea.focus();
     });
     this.keyHandler = (e) => {
-      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "Escape") {
+        this.hide();
+        onCancel();
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey && e.target === textarea) {
+        e.preventDefault();
         const comment = textarea.value.trim();
         if (!comment) return;
         this.hide();
         onSubmit(comment);
+        return;
       }
-      if (e.key === "Escape") {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        const comment = textarea.value.trim();
+        if (!comment) return;
         this.hide();
-        onCancel();
+        onSubmit(comment);
       }
     };
     document.addEventListener("keydown", this.keyHandler);
+    setTimeout(() => {
+      this.outsideClickHandler = (e) => {
+        const target = e.target;
+        if (target && !target.closest(".remarq-popup")) {
+          this.hide();
+          onCancel();
+        }
+      };
+      document.addEventListener("mousedown", this.outsideClickHandler);
+    }, 0);
   }
   showDetail(info, position, callbacks) {
     this.hide();
@@ -1530,7 +1568,15 @@ var Popup = class {
     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 makeCommentEl = () => {
+      const el = document.createElement("div");
+      el.textContent = info.comment;
+      el.style.cursor = "pointer";
+      el.title = "Click to edit";
+      el.addEventListener("click", () => this.enterEditMode(el, info, callbacks));
+      return el;
+    };
+    body.appendChild(makeCommentEl());
     const actions = document.createElement("div");
     actions.className = "remarq-popup-actions";
     if (info.status === "pending") {
@@ -1572,6 +1618,16 @@ var Popup = class {
       }
     };
     document.addEventListener("keydown", this.keyHandler);
+    setTimeout(() => {
+      this.outsideClickHandler = (e) => {
+        const target = e.target;
+        if (target && !target.closest(".remarq-popup")) {
+          this.hide();
+          callbacks.onClose();
+        }
+      };
+      document.addEventListener("mousedown", this.outsideClickHandler);
+    }, 0);
   }
   hide() {
     if (this.popupEl) {
@@ -1582,10 +1638,68 @@ var Popup = class {
       document.removeEventListener("keydown", this.keyHandler);
       this.keyHandler = null;
     }
+    if (this.outsideClickHandler) {
+      document.removeEventListener("mousedown", this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
   }
   destroy() {
     this.hide();
   }
+  enterEditMode(commentEl, info, callbacks) {
+    const textarea = document.createElement("textarea");
+    textarea.value = info.comment;
+    textarea.className = "remarq-popup-edit-textarea";
+    textarea.style.width = "100%";
+    textarea.style.minHeight = "60px";
+    textarea.style.padding = "8px";
+    textarea.style.border = "1px solid var(--remarq-border)";
+    textarea.style.borderRadius = "4px";
+    textarea.style.background = "var(--remarq-bg-secondary)";
+    textarea.style.color = "var(--remarq-text)";
+    textarea.style.fontFamily = "inherit";
+    textarea.style.fontSize = "13px";
+    textarea.style.resize = "vertical";
+    textarea.style.boxSizing = "border-box";
+    commentEl.replaceWith(textarea);
+    textarea.focus();
+    textarea.selectionStart = textarea.value.length;
+    const saveEdit = () => {
+      const newComment = textarea.value.trim();
+      if (newComment && newComment !== info.comment) {
+        info.comment = newComment;
+        callbacks.onEdit(newComment);
+      }
+      const restored = document.createElement("div");
+      restored.textContent = info.comment;
+      restored.style.cursor = "pointer";
+      restored.title = "Click to edit";
+      restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
+      textarea.replaceWith(restored);
+    };
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        saveEdit();
+      }
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        const restored = document.createElement("div");
+        restored.textContent = info.comment;
+        restored.style.cursor = "pointer";
+        restored.title = "Click to edit";
+        restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
+        textarea.replaceWith(restored);
+      }
+    });
+    textarea.addEventListener("blur", () => {
+      setTimeout(() => {
+        if (textarea.isConnected) {
+          saveEdit();
+        }
+      }, 50);
+    });
+  }
   adjustPosition(popup2, position) {
     const popupHeight = popup2.offsetHeight;
     const viewportBottom = window.scrollY + window.innerHeight;
@@ -1684,14 +1798,40 @@ var MarkerManager = class {
   }
 };
 
+// src/ui/toast.ts
+var currentToast = null;
+var currentTimer = null;
+function showToast(container, message, duration = 3e3) {
+  hideToast();
+  const toast = document.createElement("div");
+  toast.className = "remarq-toast";
+  toast.textContent = message;
+  container.appendChild(toast);
+  currentToast = toast;
+  currentTimer = setTimeout(() => {
+    if (currentToast) {
+      currentToast.classList.add("remarq-toast-fade");
+      setTimeout(() => hideToast(), 300);
+    }
+  }, duration);
+}
+function hideToast() {
+  if (currentTimer) {
+    clearTimeout(currentTimer);
+    currentTimer = null;
+  }
+  if (currentToast) {
+    currentToast.remove();
+    currentToast = null;
+  }
+}
+
 // src/ui/detached-panel.ts
 var DetachedPanel = class {
   constructor(container, onDelete) {
     this.container = container;
     this.onDelete = onDelete;
     this.panelEl = null;
-    this.toastEl = null;
-    this.toastTimer = null;
   }
   update(otherBreakpoint, detached) {
     this.remove();
@@ -1709,7 +1849,7 @@ var DetachedPanel = class {
   }
   destroy() {
     this.remove();
-    this.hideToast();
+    hideToast();
   }
   renderSection(panel, title, annotations, type) {
     const header = document.createElement("div");
@@ -1738,7 +1878,7 @@ var DetachedPanel = class {
       if (type === "other") {
         item.style.cursor = "pointer";
         item.addEventListener("click", () => {
-          this.showToast(`Annotation created at ${ann.viewportBucket}px width. Resize viewport to view.`);
+          showToast(this.container, `Annotation created at ${ann.viewportBucket}px width. Resize viewport to view.`);
         });
       } else {
         const deleteBtn = document.createElement("button");
@@ -1753,30 +1893,6 @@ var DetachedPanel = class {
       panel.appendChild(item);
     }
   }
-  showToast(message) {
-    this.hideToast();
-    const toast = document.createElement("div");
-    toast.className = "remarq-toast";
-    toast.textContent = message;
-    this.container.appendChild(toast);
-    this.toastEl = toast;
-    this.toastTimer = setTimeout(() => {
-      if (this.toastEl) {
-        this.toastEl.classList.add("remarq-toast-fade");
-        setTimeout(() => this.hideToast(), 300);
-      }
-    }, 3e3);
-  }
-  hideToast() {
-    if (this.toastTimer) {
-      clearTimeout(this.toastTimer);
-      this.toastTimer = null;
-    }
-    if (this.toastEl) {
-      this.toastEl.remove();
-      this.toastEl = null;
-    }
-  }
   remove() {
     if (this.panelEl) {
       this.panelEl.remove();
@@ -1849,6 +1965,7 @@ var spacingOverlay;
 var mutationObserver = null;
 var unsubRoute = null;
 var refreshScheduled = false;
+var savedCursor = "";
 var elementCache = /* @__PURE__ */ new Map();
 function describeTarget(el) {
   var _a, _b, _c, _d;
@@ -1969,6 +2086,7 @@ function handleInspectClick(e) {
       cacheElement(ann.id, target);
       storage.add(ann);
       refreshMarkers();
+      showToast(themeManager.container, "Annotation added");
     },
     () => {
     }
@@ -2001,8 +2119,22 @@ function handleInspectKeydown(e) {
     toolbar.setSpacingActive(spacingMode);
     if (!spacingMode) spacingOverlay.hide();
   }
+  if (e.key === "i") {
+    setInspecting(!inspecting);
+    if (!inspecting) {
+      overlay.hide();
+      spacingOverlay.hide();
+    }
+  }
 }
 function setInspecting(value) {
+  if (value && !inspecting) {
+    savedCursor = document.body.style.cursor;
+    document.body.style.cursor = "crosshair";
+  }
+  if (!value && inspecting) {
+    document.body.style.cursor = savedCursor;
+  }
   inspecting = value;
   toolbar.setInspectActive(value);
   toolbar.setSpacingEnabled(value);
@@ -2043,6 +2175,10 @@ function handleMarkerClick(annotationId) {
         refreshMarkers();
       },
       onClose: () => {
+      },
+      onEdit: (newComment) => {
+        storage.update(ann.id, { comment: newComment });
+        refreshMarkers();
       }
     }
   );
@@ -2061,6 +2197,13 @@ function generateMarkdown() {
     lines.push(elDesc);
     lines.push(`Viewport: ${ann.viewportBucket}px`);
     lines.push("");
+    if (fp.sourceLocation) {
+      lines.push(`Source: \`${fp.sourceLocation}\`${fp.componentName ? ` (${fp.componentName})` : ""}`);
+      lines.push("");
+    } else if (fp.detectedSource) {
+      lines.push(`Source (detected): \`${fp.detectedSource}\`${fp.detectedComponent ? ` (${fp.detectedComponent})` : ""}`);
+      lines.push("");
+    }
     lines.push("Search hints:");
     if (fp.dataAnnotate) {
       lines.push(`- \`data-annotate="${fp.dataAnnotate}"\` \u2014 in template files`);
@@ -2107,16 +2250,20 @@ function exportMarkdown() {
   const md = generateMarkdown();
   if (!md) return;
   downloadFile(md, `remarq-annotations-${Date.now()}.md`, "text/markdown");
+  showToast(themeManager.container, "Exported as Markdown");
 }
 function exportJSON() {
   const data = storage.exportJSON();
   const json = JSON.stringify(data, null, 2);
   downloadFile(json, `remarq-annotations-${Date.now()}.json`, "application/json");
+  showToast(themeManager.container, "Exported as JSON");
 }
 function copyToClipboard() {
   const md = generateMarkdown();
   if (!md) return;
-  navigator.clipboard.writeText(md).catch(() => {
+  navigator.clipboard.writeText(md).then(() => {
+    showToast(themeManager.container, "Copied to clipboard");
+  }).catch(() => {
     console.warn("[web-remarq] Clipboard write failed");
   });
 }
@@ -2189,6 +2336,7 @@ var WebRemarq = {
           elementCache.clear();
           storage.clearAll();
           refreshMarkers();
+          showToast(themeManager.container, "All annotations cleared");
         },
         onThemeToggle: () => themeManager.toggle()
       });
@@ -2217,6 +2365,10 @@ var WebRemarq = {
       document.removeEventListener("keydown", handleInspectKeydown);
       mutationObserver == null ? void 0 : mutationObserver.disconnect();
       mutationObserver = null;
+      if (inspecting) {
+        document.body.style.cursor = savedCursor;
+      }
+      hideToast();
       destroyViewportListener();
       unsubRoute == null ? void 0 : unsubRoute();
       routeObserver == null ? void 0 : routeObserver.destroy();