@merittdev/horus-lens 0.3.0 → 0.5.0

package/dist/{chunk-PNY6BL4C.js → chunk-M3QMIY4Y.js}

@@ -1,7 +1,7 @@
 import {
   LENS_OVERLAY_HOST_ID,
   LensClient
-} from "./chunk-LIYEDZV7.js";
+} from "./chunk-2G5FEWPU.js";
 
 // ../browser/dist/index.js
 var DEFAULT_PARAM_NAME = "lens";
@@ -124,6 +124,113 @@ function el(tag, props = {}, children = []) {
 function clear(node) {
   while (node.firstChild) node.removeChild(node.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;
@@ -274,6 +381,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;
@@ -302,6 +411,7 @@ var AnnotationEditor = class {
   svg = null;
   bg = null;
   toolbar = null;
+  toolbarDrag = null;
   textInputEl = null;
   textAnchor = null;
   textColor = COLORS[0];
@@ -347,6 +457,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();
   }
@@ -361,6 +472,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);
@@ -381,6 +493,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 = "";
     }
@@ -390,15 +503,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 node of removed) node.remove();
-    this.annotations.splice(this.sessionBase);
-    this.exit();
-  }
   undo() {
+    if (this.markNodes.length <= this.sessionBase) return;
     const node = this.markNodes.pop();
     if (!node) return;
     node.remove();
@@ -614,39 +720,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();
@@ -683,7 +795,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;
   }
   // --------------------------------------------------------------------------
@@ -697,6 +809,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);
@@ -746,6 +859,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;
@@ -855,9 +969,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, node) {
     this.annotations.push(annotation);
@@ -1051,29 +1174,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;
@@ -1081,6 +1206,7 @@ var Panel = class {
   body;
   textarea;
   submitBtn;
+  drag = null;
   autoCloseTimer = null;
   submitting = false;
   /** Selected capture toggles; every flag starts ON. Persists across refresh. */
@@ -1100,6 +1226,8 @@ var Panel = class {
   }
   destroy() {
     if (this.autoCloseTimer) clearTimeout(this.autoCloseTimer);
+    this.drag?.destroy();
+    this.drag = null;
     this.root.remove();
   }
   renderForm() {
@@ -1114,7 +1242,6 @@ var Panel = class {
     this.body.append(
       this.textarea,
       this.buildContext(),
-      this.buildIncludes(),
       this.buildChips(),
       this.buildActions()
     );
@@ -1134,39 +1261,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 on = this.include[key];
-    const btn = el("button", {
-      class: `lens-tgl${on ? " is-on" : ""}`,
-      attrs: { type: "button", role: "switch", "aria-checked": String(on) },
-      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" });
@@ -1471,14 +1565,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; }
 
@@ -1498,7 +1606,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;
@@ -1522,7 +1630,7 @@ var OVERLAY_CSS = (
   height: 26px;
   margin-left: 4px;
   border-radius: 999px;
-  color: #a5b4fc;
+  color: #f4f4f5;
 }
 .lens-btn {
   display: inline-flex;
@@ -1541,11 +1649,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;
@@ -1559,7 +1670,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;
@@ -1571,7 +1685,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;
 }
@@ -1650,7 +1764,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;
@@ -1688,7 +1802,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 {
@@ -1703,49 +1817,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;
@@ -1766,9 +1837,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;
@@ -1816,7 +1887,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; }
@@ -1870,12 +1941,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; }
@@ -1909,7 +1977,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));
@@ -1917,11 +1987,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);
@@ -1931,12 +2000,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;
@@ -1944,6 +2051,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;
@@ -1959,11 +2111,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; }
@@ -2003,17 +2155,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
@@ -2038,8 +2191,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 {
@@ -2094,21 +2247,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;
@@ -2125,6 +2286,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%);
+  }
 }
 `
 );
@@ -2142,8 +2311,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;
@@ -2156,7 +2331,9 @@ var Overlay = class {
   panel = null;
   target = null;
   destroyed = false;
+  pillDrag = null;
   recordingChip = null;
+  recordingDrag = null;
   recordingTimerEl = null;
   recordingInterval = null;
   recordingStartTs = 0;
@@ -2171,10 +2348,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,
@@ -2228,6 +2411,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(
@@ -2289,6 +2473,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() {
@@ -2301,6 +2490,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;
@@ -2341,6 +2534,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();
@@ -2529,4 +2724,4 @@ export {
   boot,
   autoBoot
 };
-//# sourceMappingURL=chunk-PNY6BL4C.js.map
+//# sourceMappingURL=chunk-M3QMIY4Y.js.map