@merittdev/horus-lens 0.4.0 → 0.5.0

package/dist/react.cjs

@@ -29083,7 +29083,7 @@ var ApiErrorSchema = external_exports.object({
 
 // ../core/dist/index.js
 var SDK_NAME = "@merittdev/horus-lens";
-var SDK_VERSION = true ? "0.4.0" : "0.0.0-dev";
+var SDK_VERSION = true ? "0.5.0" : "0.0.0-dev";
 var DEFAULT_ENDPOINT = "https://api.horus.sh";
 var DEFAULT_REPLAY_WINDOW_MS = 15e3;
 var DEFAULT_MAX_CONSOLE_ENTRIES = 200;
@@ -29144,11 +29144,15 @@ function startAutoCapture(client, options = {}) {
     const last = lastSeen.get(signature);
     if (last !== void 0 && now - last < AUTO_CAPTURE_COOLDOWN_MS) return;
     if (sessionCount >= AUTO_CAPTURE_SESSION_CAP) return;
+    const previousSeen = lastSeen.get(signature);
     lastSeen.set(signature, now);
     sessionCount += 1;
     submitting = true;
     options.onCapture?.(signature);
     void Promise.resolve().then(() => client.submitReport({ trigger: "error", include: { screenshot: false } })).catch(() => {
+      if (previousSeen === void 0) lastSeen.delete(signature);
+      else lastSeen.set(signature, previousSeen);
+      sessionCount -= 1;
     }).finally(() => {
       submitting = false;
     });
@@ -29203,6 +29207,14 @@ var RingBuffer = class {
     return this.items.length;
   }
 };
+var HttpError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "HttpError";
+  }
+  status;
+};
 var Transport = class {
   constructor(config2) {
     this.config = config2;
@@ -29210,18 +29222,23 @@ var Transport = class {
   config;
   async initiate(assets) {
     const body = { accessId: this.config.accessId, assets };
-    return this.postJson(`${this.config.endpoint}/v1/reports/initiate`, body);
+    return this.postJson(
+      `${this.config.endpoint}/v1/reports/initiate`,
+      body,
+      { retries: 0 }
+    );
   }
   /** Record a late-uploaded asset (background screenshot) on a finalized report. */
   async attachAsset(reportId, asset) {
     const body = { accessId: this.config.accessId, ...asset };
     await this.postJson(`${this.config.endpoint}/v1/reports/${encodeURIComponent(reportId)}/assets`, body);
   }
-  async uploadAsset(upload, blob2) {
+  async uploadAsset(upload, blob2, signal) {
     const response = await fetch(upload.url, {
       method: upload.method,
       headers: upload.headers,
-      body: blob2
+      body: blob2,
+      signal
     });
     if (!response.ok) {
       throw new Error(`Asset upload failed (${upload.kind}): ${response.status}`);
@@ -29229,12 +29246,20 @@ var Transport = class {
   }
   async finalize(reportId, metadata, uploadedAssets) {
     const body = { accessId: this.config.accessId, metadata, uploadedAssets };
-    return this.postJson(
-      `${this.config.endpoint}/v1/reports/${reportId}/finalize`,
-      body
-    );
+    try {
+      return await this.postJson(
+        `${this.config.endpoint}/v1/reports/${reportId}/finalize`,
+        body
+      );
+    } catch (err) {
+      if (err instanceof HttpError && err.status === 409) {
+        return { reportId, status: "submitted" };
+      }
+      throw err;
+    }
   }
-  async postJson(url2, body, retries = 1) {
+  async postJson(url2, body, opts = {}) {
+    const retries = opts.retries ?? 1;
     let lastError;
     for (let attempt = 0; attempt <= retries; attempt++) {
       try {
@@ -29245,7 +29270,10 @@ var Transport = class {
         });
         if (!response.ok) {
           const text = await response.text().catch(() => "");
-          throw new Error(`Request to ${url2} failed: ${response.status} ${text}`.trim());
+          throw new HttpError(
+            response.status,
+            `Request to ${url2} failed: ${response.status} ${text}`.trim()
+          );
         }
         return await response.json();
       } catch (err) {
@@ -29686,8 +29714,14 @@ async function captureScreenshot(excludeHost, crop, composite) {
         return null;
       }
     }
-    if (crop) {
-      const cropped = await cropBlob(blob2, crop, scale);
+    const effectiveCrop = crop ?? (composite ? void 0 : {
+      x: window.scrollX,
+      y: window.scrollY,
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    if (effectiveCrop) {
+      const cropped = await cropBlob(blob2, effectiveCrop, scale);
       return cropped ?? blob2;
     }
     return blob2;
@@ -30121,12 +30155,22 @@ var LensClient = class {
       input2.screenshotCrop,
       input2.annotationComposite
     ) : Promise.resolve(null);
+    const consumingManualRecording = wantReplay && (this.replay?.hasManualRecording() ?? false) && !(this.replay?.isManualRecording() ?? false);
     const replayEvents = wantReplay ? this.replay?.snapshot() ?? [] : [];
     const errorEntries = this.errorBuffer.drain();
-    const consoleTail = this.consoleBuffer.tail(CONSOLE_TAIL_SIZE);
-    const networkTail = this.networkBuffer.tail(NETWORK_TAIL_SIZE);
     const consoleEntries = this.consoleBuffer.drain();
     const networkEntries = this.networkBuffer.drain();
+    this.errorBuffer.clear();
+    this.consoleBuffer.clear();
+    this.networkBuffer.clear();
+    const consoleTail = consoleEntries.slice(-CONSOLE_TAIL_SIZE);
+    const isNetFailure = (e) => e.ok !== true || Boolean(e.error);
+    const recentFailures = networkEntries.filter(isNetFailure).slice(-NETWORK_TAIL_SIZE);
+    const keep = /* @__PURE__ */ new Set([
+      ...recentFailures,
+      ...networkEntries.slice(-NETWORK_TAIL_SIZE)
+    ]);
+    const networkTail = networkEntries.filter((e) => keep.has(e)).slice(-NETWORK_TAIL_SIZE);
     let metadata = {
       annotations: input2.annotations ?? [],
       env: collectEnv(),
@@ -30180,13 +30224,14 @@ var LensClient = class {
       }
       if (!asset.blob) continue;
       try {
-        await this.transport.uploadAsset(upload, asset.blob);
+        await this.uploadAssetWithTimeout(upload, asset.blob);
         uploadedAssets.push({ kind: upload.kind, key: upload.key, byteSize: asset.blob.size });
       } catch (err) {
         this.warn(`asset upload failed (${upload.kind})`, err);
       }
     }
     const finalized = await this.transport.finalize(initiated.reportId, metadata, uploadedAssets);
+    if (consumingManualRecording) this.replay?.discardManualRecording();
     if (screenshotUpload) {
       const upload = screenshotUpload;
       void screenshotPromise.then(async (blob2) => {
@@ -30204,6 +30249,21 @@ var LensClient = class {
     }
     return { reportId: finalized.reportId };
   }
+  /**
+   * Upload a foreground asset with a bounded timeout. Without this a stuck S3
+   * PUT (dropped connection, half-open socket) would hang `submitReport`
+   * forever; the timeout aborts the individual PUT so it fails as one asset
+   * (caught by the caller) instead of wedging the whole submit.
+   */
+  async uploadAssetWithTimeout(upload, blob2) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), SCREENSHOT_TIMEOUT_MS);
+    try {
+      await this.transport.uploadAsset(upload, blob2, controller.signal);
+    } finally {
+      clearTimeout(timer);
+    }
+  }
   warn(message, err) {
     if (!this.debug) return;
     if (err !== void 0) console.warn(`[lens] ${message}`, err);
@@ -30332,6 +30392,113 @@ function el(tag, props = {}, children = []) {
 function clear(node2) {
   while (node2.firstChild) node2.removeChild(node2.firstChild);
 }
+var MARGIN = 6;
+var DRAG_THRESHOLD = 3;
+var savedPositions = /* @__PURE__ */ new Map();
+function isInteractiveTarget(target) {
+  return target instanceof Element && target.closest(
+    'button, a, input, textarea, select, [role="switch"], [role="button"], [contenteditable="true"]'
+  ) !== null;
+}
+function clampToViewport(element, left, top) {
+  const rect = element.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const maxLeft = Math.max(MARGIN, vw - rect.width - MARGIN);
+  const maxTop = Math.max(MARGIN, vh - rect.height - MARGIN);
+  return {
+    left: Math.min(Math.max(left, MARGIN), maxLeft),
+    top: Math.min(Math.max(top, MARGIN), maxTop)
+  };
+}
+function makeDraggable(element, opts) {
+  const { handle, key } = opts;
+  const ignore = opts.ignore ?? isInteractiveTarget;
+  let startX = 0;
+  let startY = 0;
+  let originLeft = 0;
+  let originTop = 0;
+  let dragging = false;
+  let armed = false;
+  let pointerId = null;
+  const apply = (left, top) => {
+    const p = clampToViewport(element, left, top);
+    element.style.left = `${p.left}px`;
+    element.style.top = `${p.top}px`;
+    element.style.right = "auto";
+    element.style.bottom = "auto";
+    element.style.transform = "none";
+    savedPositions.set(key, p);
+    opts.onMove?.();
+  };
+  const onPointerDown = (e) => {
+    if (e.button !== 0 && e.pointerType === "mouse") return;
+    if (ignore(e.target)) return;
+    armed = true;
+    dragging = false;
+    pointerId = e.pointerId;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = element.getBoundingClientRect();
+    originLeft = rect.left;
+    originTop = rect.top;
+    window.addEventListener("pointermove", onPointerMove, true);
+    window.addEventListener("pointerup", onPointerUp, true);
+    window.addEventListener("pointercancel", onPointerUp, true);
+  };
+  const onPointerMove = (e) => {
+    if (!armed || e.pointerId !== pointerId) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    if (!dragging) {
+      if (Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD) return;
+      dragging = true;
+      element.classList.add("is-dragging");
+    }
+    e.preventDefault();
+    apply(originLeft + dx, originTop + dy);
+  };
+  const onPointerUp = (e) => {
+    if (e.pointerId !== pointerId) return;
+    armed = false;
+    if (dragging) {
+      dragging = false;
+      element.classList.remove("is-dragging");
+    }
+    pointerId = null;
+    window.removeEventListener("pointermove", onPointerMove, true);
+    window.removeEventListener("pointerup", onPointerUp, true);
+    window.removeEventListener("pointercancel", onPointerUp, true);
+  };
+  const onResize = () => {
+    const p = savedPositions.get(key);
+    if (p) apply(p.left, p.top);
+  };
+  handle.classList.add("lens-drag-handle");
+  handle.addEventListener("pointerdown", onPointerDown);
+  window.addEventListener("resize", onResize);
+  const stored = savedPositions.get(key);
+  if (stored) requestAnimationFrame(() => apply(stored.left, stored.top));
+  return {
+    reclamp: onResize,
+    reset() {
+      savedPositions.delete(key);
+      element.style.left = "";
+      element.style.top = "";
+      element.style.right = "";
+      element.style.bottom = "";
+      element.style.transform = "";
+      element.classList.remove("is-dragging");
+    },
+    destroy() {
+      handle.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("pointerup", onPointerUp, true);
+      window.removeEventListener("pointercancel", onPointerUp, true);
+      window.removeEventListener("resize", onResize);
+    }
+  };
+}
 var THIN_MIN_DIST = 3;
 var MAX_POINTS = 2e3;
 var HIGHLIGHTER_WIDTH = 14;
@@ -30482,6 +30649,8 @@ var iconTrash = svg(
   '<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'
 );
 var iconAnnotate = iconPencil;
+var iconGrip = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg>`;
+var iconReport = svg('<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/>');
 var SVG_NS = "http://www.w3.org/2000/svg";
 var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
 var MIN_DRAG = 6;
@@ -30510,6 +30679,7 @@ var AnnotationEditor = class {
   svg = null;
   bg = null;
   toolbar = null;
+  toolbarDrag = null;
   textInputEl = null;
   textAnchor = null;
   textColor = COLORS[0];
@@ -30555,6 +30725,7 @@ var AnnotationEditor = class {
     this.markNodes = [];
     this.annotations = [];
     this.stepCounter = 0;
+    this.sessionBase = Math.min(this.sessionBase, this.annotations.length);
     if (!this.active) this.teardownLayer();
     this.syncActionButtons();
   }
@@ -30569,6 +30740,7 @@ var AnnotationEditor = class {
     this.sizeLayer();
     this.updateTransform();
     svg2.style.pointerEvents = "auto";
+    if (this.bg) this.bg.style.pointerEvents = "all";
     svg2.style.touchAction = "none";
     svg2.style.cursor = "crosshair";
     svg2.addEventListener("pointerdown", this.onPointerDown);
@@ -30589,6 +30761,7 @@ var AnnotationEditor = class {
     if (svg2) {
       svg2.removeEventListener("pointerdown", this.onPointerDown);
       svg2.style.pointerEvents = "none";
+      if (this.bg) this.bg.style.pointerEvents = "none";
       svg2.style.touchAction = "";
       svg2.style.cursor = "";
     }
@@ -30598,15 +30771,8 @@ var AnnotationEditor = class {
     this.onExit = null;
     cb?.();
   }
-  /** Cancel — discard marks drawn during this session, then exit. */
-  cancel() {
-    this.cancelTextInput();
-    const removed = this.markNodes.splice(this.sessionBase);
-    for (const node2 of removed) node2.remove();
-    this.annotations.splice(this.sessionBase);
-    this.exit();
-  }
   undo() {
+    if (this.markNodes.length <= this.sessionBase) return;
     const node2 = this.markNodes.pop();
     if (!node2) return;
     node2.remove();
@@ -30822,39 +30988,45 @@ var AnnotationEditor = class {
       on: { click: () => this.clear() }
     });
     const editGroup = el("div", { class: "lens-tool-group" }, [this.undoBtn, this.clearBtn]);
-    const doneGroup = el("div", { class: "lens-tool-group" }, [
-      el("button", {
-        class: "lens-pick-chip__btn",
-        text: "Cancel",
-        attrs: { type: "button" },
-        on: { click: () => this.cancel() }
-      }),
-      el("button", {
-        class: "lens-pick-chip__btn lens-pick-chip__btn--primary",
-        text: "Done",
-        attrs: { type: "button" },
-        on: { click: () => this.exit() }
-      })
+    const closeBtn = el("button", {
+      class: "lens-tool-close",
+      ariaLabel: "Done",
+      title: "Done",
+      html: iconClose,
+      attrs: { type: "button" },
+      on: { click: () => this.exit() }
+    });
+    const grip = el("span", {
+      class: "lens-tool-grip",
+      html: iconGrip,
+      title: "Drag to move toolbar",
+      ariaLabel: "Drag to move toolbar"
+    });
+    const track = el("div", { class: "lens-tool-track" }, [
+      toolGroup,
+      el("span", { class: "lens-tool-sep" }),
+      colorGroup,
+      el("span", { class: "lens-tool-sep" }),
+      widthGroup,
+      el("span", { class: "lens-tool-sep" }),
+      editGroup
     ]);
     this.toolbar = el(
       "div",
       { class: "lens-annotate-toolbar", attrs: { role: "toolbar", "aria-label": "Annotation tools" } },
-      [
-        toolGroup,
-        el("span", { class: "lens-tool-sep" }),
-        colorGroup,
-        el("span", { class: "lens-tool-sep" }),
-        widthGroup,
-        el("span", { class: "lens-tool-sep" }),
-        editGroup,
-        el("span", { class: "lens-tool-sep" }),
-        doneGroup
-      ]
+      [grip, track, closeBtn]
     );
     this.host.append(this.toolbar);
+    this.toolbarDrag = makeDraggable(this.toolbar, {
+      handle: grip,
+      key: "lens-annotate-toolbar",
+      ignore: isInteractiveTarget
+    });
     this.syncActionButtons();
   }
   removeToolbar() {
+    this.toolbarDrag?.destroy();
+    this.toolbarDrag = null;
     this.toolbar?.remove();
     this.toolbar = null;
     this.toolBtns.clear();
@@ -30891,7 +31063,7 @@ var AnnotationEditor = class {
   }
   syncActionButtons() {
     const empty = this.markNodes.length === 0;
-    if (this.undoBtn) this.undoBtn.disabled = empty;
+    if (this.undoBtn) this.undoBtn.disabled = this.markNodes.length <= this.sessionBase;
     if (this.clearBtn) this.clearBtn.disabled = empty;
   }
   // --------------------------------------------------------------------------
@@ -30905,6 +31077,7 @@ var AnnotationEditor = class {
   }
   onPointerDown = (e) => {
     if (!this.active) return;
+    if (this.drag) return;
     if (e.button !== void 0 && e.button !== 0) return;
     e.preventDefault();
     const p = this.toDoc(e);
@@ -30954,6 +31127,7 @@ var AnnotationEditor = class {
     this.drag = drag;
     window.addEventListener("pointermove", this.onPointerMove, true);
     window.addEventListener("pointerup", this.onPointerUp, true);
+    window.addEventListener("pointercancel", this.onPointerCancel, true);
   };
   onPointerMove = (e) => {
     const d = this.drag;
@@ -31063,9 +31237,18 @@ var AnnotationEditor = class {
     d.node.removeAttribute("data-lens-draft");
     this.commitMark(annotation, d.node);
   };
+  /** Pointer capture was cancelled (OS gesture, page hidden, etc.): drop the
+   * in-progress draft node and detach listeners so nothing leaks. */
+  onPointerCancel = () => {
+    const d = this.drag;
+    this.detachDragListeners();
+    this.drag = null;
+    d?.node.remove();
+  };
   detachDragListeners() {
     window.removeEventListener("pointermove", this.onPointerMove, true);
     window.removeEventListener("pointerup", this.onPointerUp, true);
+    window.removeEventListener("pointercancel", this.onPointerCancel, true);
   }
   commitMark(annotation, node2) {
     this.annotations.push(annotation);
@@ -31259,29 +31442,31 @@ var AnnotationEditor = class {
     return `lens-${++this.idSeq}`;
   }
 };
-var INCLUDE_ITEMS = [
-  { key: "replay", label: "Replay" },
-  { key: "console", label: "Console" },
-  { key: "network", label: "Network" },
-  { key: "errors", label: "Errors" },
-  { key: "screenshot", label: "Screenshot" }
-];
 var Panel = class {
   constructor(cb) {
     this.cb = cb;
     this.body = el("div", { class: "lens-panel__body" });
-    this.root = el("div", { class: "lens-panel", attrs: { role: "dialog", "aria-label": "Report an issue" } }, [
-      el("div", { class: "lens-panel__head" }, [
-        el("div", { class: "lens-panel__title", text: "Report an issue" }),
-        el("button", {
-          class: "lens-panel__x",
-          ariaLabel: "Close",
-          html: iconClose,
-          on: { click: () => this.cb.onClose() }
-        })
-      ]),
-      this.body
+    const head = el("div", { class: "lens-panel__head" }, [
+      el("span", {
+        class: "lens-panel__grip",
+        html: iconGrip,
+        title: "Drag to move",
+        ariaLabel: "Drag to move panel"
+      }),
+      el("div", { class: "lens-panel__title", text: "Report an issue" }),
+      el("button", {
+        class: "lens-panel__x",
+        ariaLabel: "Close",
+        html: iconClose,
+        on: { click: () => this.cb.onClose() }
+      })
     ]);
+    this.root = el(
+      "div",
+      { class: "lens-panel", attrs: { role: "dialog", "aria-label": "Report an issue" } },
+      [head, this.body]
+    );
+    this.drag = makeDraggable(this.root, { handle: head, key: "lens-panel" });
     this.renderForm();
   }
   cb;
@@ -31289,6 +31474,7 @@ var Panel = class {
   body;
   textarea;
   submitBtn;
+  drag = null;
   autoCloseTimer = null;
   submitting = false;
   /** Selected capture toggles; every flag starts ON. Persists across refresh. */
@@ -31308,6 +31494,8 @@ var Panel = class {
   }
   destroy() {
     if (this.autoCloseTimer) clearTimeout(this.autoCloseTimer);
+    this.drag?.destroy();
+    this.drag = null;
     this.root.remove();
   }
   renderForm() {
@@ -31322,7 +31510,6 @@ var Panel = class {
     this.body.append(
       this.textarea,
       this.buildContext(),
-      this.buildIncludes(),
       this.buildChips(),
       this.buildActions()
     );
@@ -31342,39 +31529,6 @@ var Panel = class {
     });
     return el("div", { class: "lens-context", title: s.url }, nodes);
   }
-  /** Real toggles ("switch"): which captured data to attach. All ON by default. */
-  buildIncludes() {
-    const s = this.cb.getStats();
-    const counts = {
-      console: s.console,
-      network: s.network,
-      errors: s.errors
-    };
-    const toggles = INCLUDE_ITEMS.map((item) => this.buildToggle(item.key, item.label, counts[item.key]));
-    return el("div", { class: "lens-includes" }, [
-      el("span", { class: "lens-includes__label", text: "Include:" }),
-      ...toggles
-    ]);
-  }
-  buildToggle(key, label, count) {
-    const on2 = this.include[key];
-    const btn = el("button", {
-      class: `lens-tgl${on2 ? " is-on" : ""}`,
-      attrs: { type: "button", role: "switch", "aria-checked": String(on2) },
-      html: `<span class="lens-tgl__check" aria-hidden="true">${iconCheck}</span>`
-    });
-    btn.append(el("span", { class: "lens-tgl__label", text: label }));
-    if (typeof count === "number" && count > 0) {
-      btn.append(el("span", { class: "lens-tgl__count", text: String(count) }));
-    }
-    btn.addEventListener("click", () => {
-      const next = !this.include[key];
-      this.include[key] = next;
-      btn.classList.toggle("is-on", next);
-      btn.setAttribute("aria-checked", String(next));
-    });
-    return btn;
-  }
   /** Removable context chips: annotations, retained recording, picked element. */
   buildChips() {
     const row = el("div", { class: "lens-chips" });
@@ -31679,14 +31833,28 @@ var OVERLAY_CSS = (
   `
 :host {
   all: initial;
-  --lens-accent: #6366f1;
-  --lens-accent-strong: #4f46e5;
+  /* Black & white, mirroring the Horus Cloud dashboard: the accent is near-black
+     in light and near-white in dark; the always-dark pill/toolbar use explicit
+     light highlights (defined at their rules). Annotation swatch colors and
+     status red/green are content, not brand, and keep their hues. */
+  --lens-accent: #18181b;
+  --lens-accent-strong: #000000;
+  --lens-on-accent: #ffffff;
+  --lens-focus: rgba(0, 0, 0, 0.16);
   --lens-radius: 8px;
   --lens-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --lens-z: 2147483000;
   font-family: var(--lens-font);
   line-height: 1.4;
 }
+@media (prefers-color-scheme: dark) {
+  :host {
+    --lens-accent: #fafafa;
+    --lens-accent-strong: #ffffff;
+    --lens-on-accent: #18181b;
+    --lens-focus: rgba(255, 255, 255, 0.22);
+  }
+}
 
 *, *::before, *::after { box-sizing: border-box; }
 
@@ -31706,7 +31874,7 @@ var OVERLAY_CSS = (
   left: 50%;
   transform: translateX(-50%);
   max-width: calc(100vw - 16px);
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: center;
   display: inline-flex;
   align-items: center;
@@ -31730,7 +31898,7 @@ var OVERLAY_CSS = (
   height: 26px;
   margin-left: 4px;
   border-radius: 999px;
-  color: #a5b4fc;
+  color: #f4f4f5;
 }
 .lens-btn {
   display: inline-flex;
@@ -31749,11 +31917,14 @@ var OVERLAY_CSS = (
   transition: background 150ms ease, color 150ms ease;
 }
 .lens-btn:hover { background: rgba(255, 255, 255, 0.1); }
-.lens-btn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
-.lens-btn--primary { background: var(--lens-accent); color: #fff; }
-.lens-btn--primary:hover { background: var(--lens-accent-strong); }
+.lens-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }
+.lens-btn--primary { background: #fff; color: #18181b; }
+.lens-btn--primary:hover { background: #e4e4e7; }
+.lens-btn--report svg { flex: none; }
+.lens-btn__label { white-space: nowrap; }
 .lens-btn--icon { width: 30px; padding: 0; justify-content: center; }
-.lens-btn--icon.is-active { background: var(--lens-accent); color: #fff; }
+/* Always-dark pill: an active control reads as a light (white) highlight. */
+.lens-btn--icon.is-active { background: #fff; color: #18181b; }
 .lens-pill__sep {
   width: 1px;
   height: 18px;
@@ -31767,7 +31938,10 @@ var OVERLAY_CSS = (
   z-index: calc(var(--lens-z) - 2);
   pointer-events: none;
   border: 2px solid var(--lens-accent);
-  background: rgba(99, 102, 241, 0.14);
+  /* A light outer ring so the (black-in-light / white-in-dark) border stays
+     visible over any page background. */
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.15);
+  background: rgba(127, 127, 127, 0.14);
   border-radius: 3px;
   transition: all 60ms linear;
   display: none;
@@ -31779,7 +31953,7 @@ var OVERLAY_CSS = (
   padding: 1px 6px;
   border-radius: 4px;
   background: var(--lens-accent);
-  color: #fff;
+  color: var(--lens-on-accent);
   font: 500 11px/1.5 var(--lens-font);
   white-space: nowrap;
 }
@@ -31858,7 +32032,7 @@ var OVERLAY_CSS = (
   padding: 14px 16px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
 }
-.lens-panel__title { font-size: 14px; font-weight: 600; }
+.lens-panel__title { font-size: 14px; font-weight: 600; margin-right: auto; }
 .lens-panel__x {
   display: inline-flex;
   align-items: center;
@@ -31896,7 +32070,7 @@ var OVERLAY_CSS = (
 .lens-textarea:focus {
   outline: none;
   border-color: var(--lens-accent);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
+  box-shadow: 0 0 0 3px var(--lens-focus);
 }
 /* ---- Context row: static, non-interactive page facts (muted, dot-joined) ---- */
 .lens-context {
@@ -31911,49 +32085,6 @@ var OVERLAY_CSS = (
 .lens-context__item { white-space: nowrap; }
 .lens-context__dot { opacity: 0.55; }
 
-/* ---- Include row: real toggles (role=switch) for which data to attach ---- */
-.lens-includes {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-}
-.lens-includes__label {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: #71717a;
-  margin-right: 2px;
-}
-.lens-tgl {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid rgba(0, 0, 0, 0.14);
-  background: #fafafa;
-  color: #a1a1aa;
-  font-family: var(--lens-font);
-  font-size: 11.5px;
-  font-weight: 600;
-  white-space: nowrap;
-  cursor: pointer;
-  opacity: 0.75;
-  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
-}
-.lens-tgl:hover { opacity: 1; }
-.lens-tgl:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
-.lens-tgl__check { display: none; align-items: center; }
-.lens-tgl__check svg { width: 13px; height: 13px; }
-.lens-tgl__count { font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }
-.lens-tgl.is-on {
-  opacity: 1;
-  color: var(--lens-accent-strong);
-  border-color: rgba(99, 102, 241, 0.5);
-  background: #eef2ff;
-}
-.lens-tgl.is-on .lens-tgl__check { display: inline-flex; }
-
 .lens-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .lens-chip {
   display: inline-flex;
@@ -31974,9 +32105,9 @@ var OVERLAY_CSS = (
 .lens-chip--ok { color: #15803d; background: #f0fdf4; border-color: rgba(21, 128, 61, 0.18); }
 .lens-chip--target {
   max-width: 100%;
-  background: #eef2ff;
-  border-color: rgba(99, 102, 241, 0.25);
-  color: var(--lens-accent-strong);
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.16);
+  color: #18181b;
 }
 .lens-chip__code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -32024,7 +32155,7 @@ var OVERLAY_CSS = (
 .lens-abtn svg { flex: none; }
 .lens-abtn--ghost { background: transparent; border-color: rgba(0, 0, 0, 0.14); color: #3f3f46; }
 .lens-abtn--ghost:hover { background: rgba(0, 0, 0, 0.04); }
-.lens-abtn--primary { background: var(--lens-accent); color: #fff; }
+.lens-abtn--primary { background: var(--lens-accent); color: var(--lens-on-accent); }
 .lens-abtn--primary:hover { background: var(--lens-accent-strong); }
 .lens-abtn:disabled { opacity: 0.55; cursor: default; }
 .lens-abtn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
@@ -32078,12 +32209,9 @@ var OVERLAY_CSS = (
   .lens-panel__x:hover { background: rgba(255, 255, 255, 0.08); }
   .lens-textarea { background: #26262a; border-color: rgba(255, 255, 255, 0.14); color: #f4f4f5; }
   .lens-context { color: #a1a1aa; }
-  .lens-includes__label { color: #a1a1aa; }
-  .lens-tgl { background: #26262a; border-color: rgba(255, 255, 255, 0.12); color: #a1a1aa; }
-  .lens-tgl.is-on { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.55); color: #c7d2fe; }
   .lens-chip { background: #26262a; border-color: rgba(255, 255, 255, 0.08); color: #d4d4d8; }
   .lens-chip--ok { color: #4ade80; background: rgba(34, 197, 94, 0.12); border-color: rgba(74, 222, 128, 0.22); }
-  .lens-chip--target { background: rgba(99, 102, 241, 0.16); color: #c7d2fe; }
+  .lens-chip--target { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #f4f4f5; }
   .lens-abtn--ghost { border-color: rgba(255, 255, 255, 0.16); color: #d4d4d8; }
   .lens-abtn--ghost:hover { background: rgba(255, 255, 255, 0.06); }
   .lens-state__msg { color: #a1a1aa; }
@@ -32117,7 +32245,9 @@ var OVERLAY_CSS = (
 .lens-annotate-chips { z-index: var(--lens-z); }
 
 /* ---------------- Annotation toolbar ---------------- */
-/* Same floating top-center anchor as the chips row; wraps on narrow screens. */
+/* Floating top-center anchor. A fixed drag grip sits left of a tools "track":
+   the track wraps on desktop and becomes a single horizontal-scroll row on
+   narrow screens, so the bar stays one slim height instead of a bulky block. */
 .lens-annotate-toolbar {
   position: fixed;
   top: calc(16px + env(safe-area-inset-top));
@@ -32125,11 +32255,10 @@ var OVERLAY_CSS = (
   transform: translateX(-50%);
   z-index: var(--lens-z);
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
   gap: 6px;
-  max-width: calc(100vw - 24px);
+  max-width: calc(100vw - 16px);
   padding: 6px 8px;
   border-radius: 14px;
   background: rgba(20, 20, 23, 0.92);
@@ -32139,12 +32268,50 @@ var OVERLAY_CSS = (
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   color: #f4f4f5;
 }
+/* Tools lay out as ONE horizontal row that scrolls if it can't fit, so the bar
+   is always a single slim height \u2014 never a wrapping (or, worse, min-content
+   collapsed vertical) block. The grip sits outside this track. */
+.lens-tool-track {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+.lens-tool-track::-webkit-scrollbar { display: none; }
 .lens-tool-group {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  flex: none;
+}
+/* Single close (=Done, keeps marks) pinned at the right, always reachable
+   while the tools scroll. Reads as a light control on the dark bar. */
+.lens-tool-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #f4f4f5;
+  cursor: pointer;
+  transition: background 150ms ease;
 }
+.lens-tool-close:hover { background: rgba(255, 255, 255, 0.26); }
+.lens-tool-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }
+.lens-tool-close svg { width: 18px; height: 18px; }
 .lens-tool-sep {
   width: 1px;
   align-self: stretch;
@@ -32152,6 +32319,51 @@ var OVERLAY_CSS = (
   background: rgba(255, 255, 255, 0.16);
   margin: 0 2px;
 }
+
+/* ---------------- Draggable surfaces ---------------- */
+/* Every drag handle: no page pan/scroll gesture starts here, and the cursor
+   signals grabbability. Applied to the pill, panel header, toolbar grip, chips. */
+.lens-drag-handle { touch-action: none; cursor: grab; }
+.lens-drag-handle:active { cursor: grabbing; }
+.is-dragging, .is-dragging * { cursor: grabbing !important; }
+.is-dragging { user-select: none; }
+/* While dragging, drop the entry animation/transition so it tracks 1:1. */
+.lens-pill.is-dragging, .lens-panel.is-dragging,
+.lens-annotate-toolbar.is-dragging, .lens-rec-chip.is-dragging {
+  animation: none;
+  transition: none;
+}
+
+/* Toolbar drag grip \u2014 the only grab region, kept out of the scroll track. */
+.lens-tool-grip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 22px;
+  height: 30px;
+  margin-right: 2px;
+  border-radius: 6px;
+  color: #a1a1aa;
+}
+.lens-tool-grip:hover { color: #f4f4f5; background: rgba(255, 255, 255, 0.08); }
+.lens-tool-grip svg { width: 16px; height: 16px; }
+
+/* Pill grip (the eye dot) + panel header grip. */
+.lens-pill__grip { cursor: grab; }
+.lens-panel__grip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  margin-right: 6px;
+  color: #a1a1aa;
+}
+.lens-panel__grip svg { width: 16px; height: 16px; }
+.lens-panel__head { cursor: grab; }
+.lens-panel__head:active { cursor: grabbing; }
 .lens-tool-btn {
   display: inline-flex;
   align-items: center;
@@ -32167,11 +32379,11 @@ var OVERLAY_CSS = (
   transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
 }
 .lens-tool-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
-.lens-tool-btn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
+.lens-tool-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }
 .lens-tool-btn.is-active {
-  background: var(--lens-accent);
-  border-color: var(--lens-accent);
-  color: #fff;
+  background: #fff;
+  border-color: #fff;
+  color: #18181b;
 }
 .lens-tool-btn:disabled { opacity: 0.4; cursor: default; }
 .lens-tool-btn:disabled:hover { background: transparent; color: #d4d4d8; }
@@ -32211,17 +32423,18 @@ var OVERLAY_CSS = (
   transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
 }
 .lens-width-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
-.lens-width-btn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
+.lens-width-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }
 .lens-width-btn.is-active {
-  background: var(--lens-accent);
-  border-color: var(--lens-accent);
-  color: #fff;
+  background: #fff;
+  border-color: #fff;
+  color: #18181b;
 }
 
 /* Coarse pointers: bump the tool targets toward 40px. */
 @media (pointer: coarse) {
   .lens-tool-btn, .lens-width-btn { width: 38px; height: 38px; }
   .lens-swatch { width: 30px; height: 30px; }
+  .lens-tool-grip { width: 30px; height: 38px; }
 }
 
 /* Stacking inside the shadow layer: the panel, pill and floating chips always
@@ -32246,8 +32459,8 @@ var OVERLAY_CSS = (
   transition: background 150ms ease;
 }
 .lens-pick-chip__btn:hover { background: rgba(255, 255, 255, 0.2); }
-.lens-pick-chip__btn--primary { background: var(--lens-accent); }
-.lens-pick-chip__btn--primary:hover { background: var(--lens-accent-strong); }
+.lens-pick-chip__btn--primary { background: #fff; color: #18181b; }
+.lens-pick-chip__btn--primary:hover { background: #e4e4e7; }
 
 /* ---------------- Recording chip ---------------- */
 .lens-rec-chip {
@@ -32302,21 +32515,29 @@ var OVERLAY_CSS = (
 .lens-rec-chip__stop:hover { background: #dc2626; }
 .lens-chip--rec { gap: 6px; }
 
+/* Very narrow screens: collapse the pill's "Report issue" label to its icon so
+   the pill stays a single slim row (never wraps into a 2-row blob). */
+@media (max-width: 400px) {
+  .lens-btn__label { display: none; }
+  .lens-btn--report { width: 44px; padding: 0; justify-content: center; }
+}
+
 /* ---------------- Coarse pointers (touch): \u226544px targets ---------------- */
 @media (pointer: coarse) {
   .lens-btn { height: 44px; padding: 0 16px; }
   .lens-btn--icon { width: 44px; }
+  .lens-tool-close { width: 44px; height: 38px; }
   .lens-pill__dot { width: 40px; height: 40px; }
   .lens-abtn { height: 44px; }
-  .lens-tgl { min-height: 40px; padding: 4px 14px; }
   .lens-panel__x { width: 44px; height: 44px; }
   .lens-chip__x { min-width: 32px; min-height: 32px; align-items: center; justify-content: center; }
   .lens-pick-chip__btn, .lens-rec-chip__stop { height: 40px; padding: 0 18px; }
 }
 
-/* ---------------- Bottom sheet under 640px ---------------- */
+/* ---------------- Narrow screens (\u2264640px) ---------------- */
 @media (max-width: 640px) {
-  .lens-panel {
+  /* Report panel as a bottom sheet (unless the user has dragged it loose). */
+  .lens-panel:not(.is-dragging) {
     left: 0;
     right: 0;
     bottom: 0;
@@ -32333,6 +32554,14 @@ var OVERLAY_CSS = (
     to { opacity: 1; transform: none; }
   }
   .lens-textarea { font-size: 16px; }
+
+  /* On narrow screens the single-row tool track usually overflows: fade its
+     trailing edge so it reads as "more tools this way" (the grip sits outside
+     the track and stays fully opaque). */
+  .lens-tool-track {
+    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent 100%);
+    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent 100%);
+  }
 }
 `
 );
@@ -32350,8 +32579,14 @@ var Overlay = class {
     this.shadow.append(this.layer);
     this.picker = new ElementPicker(this.layer, this.host);
     this.annotator = new AnnotationEditor(this.layer);
-    this.layer.append(this.buildPill());
+    const pill = this.buildPill();
+    this.layer.append(pill);
     document.documentElement.append(this.host);
+    this.pillDrag = makeDraggable(pill, {
+      handle: pill,
+      key: "lens-pill",
+      ignore: isInteractiveTarget
+    });
     window.addEventListener("keydown", this.onGlobalKey, true);
   }
   deps;
@@ -32364,7 +32599,9 @@ var Overlay = class {
   panel = null;
   target = null;
   destroyed = false;
+  pillDrag = null;
   recordingChip = null;
+  recordingDrag = null;
   recordingTimerEl = null;
   recordingInterval = null;
   recordingStartTs = 0;
@@ -32379,10 +32616,16 @@ var Overlay = class {
       on: { click: () => this.togglePicker() }
     });
     return el("div", { class: "lens-pill", attrs: { role: "toolbar", "aria-label": "Lens" } }, [
-      el("span", { class: "lens-pill__dot", html: iconEye }),
+      el("span", {
+        class: "lens-pill__dot lens-pill__grip",
+        html: iconEye,
+        title: "Drag to move",
+        ariaLabel: "Drag to move Lens"
+      }),
       el("button", {
-        class: "lens-btn",
-        text: "Report issue",
+        class: "lens-btn lens-btn--report",
+        html: iconReport + '<span class="lens-btn__label">Report issue</span>',
+        ariaLabel: "Report issue",
         on: { click: () => this.open() }
       }),
       this.pickBtn,
@@ -32436,6 +32679,7 @@ var Overlay = class {
       this.stopPicker();
       return;
     }
+    if (this.annotator.isActive) this.annotator.exit();
     this.close();
     this.pickBtn.classList.add("is-active");
     this.picker.start(
@@ -32497,6 +32741,11 @@ var Overlay = class {
       })
     ]);
     this.layer.append(this.recordingChip);
+    this.recordingDrag = makeDraggable(this.recordingChip, {
+      handle: this.recordingChip,
+      key: "lens-rec-chip",
+      ignore: isInteractiveTarget
+    });
     this.recordingInterval = setInterval(() => this.tickRecording(), 250);
   }
   tickRecording() {
@@ -32509,6 +32758,10 @@ var Overlay = class {
       clearInterval(this.recordingInterval);
       this.recordingInterval = null;
     }
+    if (this.recordingDrag) {
+      this.recordingDrag.destroy();
+      this.recordingDrag = null;
+    }
     if (this.recordingChip) {
       this.recordingChip.remove();
       this.recordingChip = null;
@@ -32549,6 +32802,8 @@ var Overlay = class {
     if (this.destroyed) return;
     this.destroyed = true;
     window.removeEventListener("keydown", this.onGlobalKey, true);
+    this.pillDrag?.destroy();
+    this.pillDrag = null;
     this.stopPicker();
     if (this.deps.client.isRecording()) this.deps.client.stopRecording();
     this.hideRecordingChip();