web-remarq 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -748,12 +748,14 @@ var CSS = `
   position: fixed;
   background: rgba(249, 115, 22, 0.2);
   pointer-events: none;
+  z-index: 1;
 }
 
 .remarq-spacing-padding {
   position: fixed;
   background: rgba(34, 197, 94, 0.2);
   pointer-events: none;
+  z-index: 2;
 }
 
 .remarq-spacing-content {
@@ -761,6 +763,7 @@ var CSS = `
   background: rgba(59, 130, 246, 0.15);
   border: 1px dashed rgba(59, 130, 246, 0.5);
   pointer-events: none;
+  z-index: 3;
 }
 
 .remarq-spacing-gap {
@@ -780,13 +783,14 @@ var CSS = `
   pointer-events: none;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1;
-  text-shadow: 0 0 3px var(--remarq-bg), 0 0 3px var(--remarq-bg);
+  padding: 1px 3px;
+  border-radius: 2px;
 }
 
-.remarq-spacing-label-margin { color: #f97316; }
-.remarq-spacing-label-padding { color: #22c55e; }
-.remarq-spacing-label-content { color: #3b82f6; font-size: 10px; }
-.remarq-spacing-label-gap { color: #a855f7; font-size: 10px; }
+.remarq-spacing-label-margin { color: #fff; background: rgba(249, 115, 22, 0.85); }
+.remarq-spacing-label-padding { color: #fff; background: rgba(34, 197, 94, 0.85); }
+.remarq-spacing-label-content { color: #fff; background: rgba(59, 130, 246, 0.85); font-size: 10px; }
+.remarq-spacing-label-gap { color: #fff; background: rgba(168, 85, 247, 0.85); font-size: 10px; }
 
 .remarq-toolbar-btn:disabled { opacity: 0.3; cursor: default; }
 .remarq-toolbar-btn:disabled:hover { background: transparent; }
@@ -859,6 +863,16 @@ var ThemeManager = class {
 };
 
 // src/ui/toolbar.ts
+var TOOLTIPS = {
+  inspect: "Inspect element",
+  spacing: "Spacing overlay (S)",
+  copy: "Copy as Markdown",
+  export: "Export",
+  import: "Import JSON",
+  clear: "Clear all",
+  theme: "Toggle theme",
+  minimize: "Minimize"
+};
 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>',
   spacing: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 2h12M2 14h12M2 2v12M14 2v12"/><path d="M5 5h6v6H5z" stroke-dasharray="2 1"/></svg>',
@@ -938,9 +952,11 @@ var Toolbar = class {
     this.toolbarEl.remove();
   }
   createButton(action, icon, handler) {
+    var _a;
     const btn = document.createElement("button");
     btn.className = "remarq-toolbar-btn";
     btn.setAttribute("data-remarq-action", action);
+    btn.title = (_a = TOOLTIPS[action]) != null ? _a : "";
     btn.innerHTML = icon;
     btn.addEventListener("click", handler);
     return btn;
@@ -1078,6 +1094,10 @@ var SpacingOverlay = class {
     this.labels = [];
     this.gapEls = [];
     this.lastTarget = null;
+    this.scrollHandler = () => {
+      this.lastTarget = null;
+    };
+    window.addEventListener("scroll", this.scrollHandler, true);
     this.containerEl = document.createElement("div");
     this.containerEl.className = "remarq-spacing";
     this.containerEl.style.display = "none";
@@ -1147,6 +1167,7 @@ var SpacingOverlay = class {
     this.clearGaps();
   }
   destroy() {
+    window.removeEventListener("scroll", this.scrollHandler, true);
     this.clearLabels();
     this.clearGaps();
     this.containerEl.remove();