@merittdev/horus-lens 0.1.0 → 0.2.0

package/dist/browser.cjs

@@ -28892,15 +28892,86 @@ var TargetElementSchema = external_exports.object({
   boundingRect: external_exports.object({ x: external_exports.number(), y: external_exports.number(), width: external_exports.number(), height: external_exports.number() }).optional(),
   reactComponents: external_exports.array(external_exports.string()).optional()
 });
-var AnnotationSchema = external_exports.object({
-  kind: external_exports.enum(["rect", "ellipse", "arrow"]),
-  x: external_exports.number(),
-  y: external_exports.number(),
-  width: external_exports.number(),
-  height: external_exports.number(),
-  /** Page coordinates relative to the viewport at capture time. */
-  viewport: external_exports.object({ width: external_exports.number(), height: external_exports.number() })
-});
+var annotationCommon = {
+  id: external_exports.string().optional(),
+  /** Any CSS color string. */
+  color: external_exports.string().optional(),
+  strokeWidth: external_exports.number().optional()
+};
+var AnnotationPointSchema = external_exports.object({ x: external_exports.number(), y: external_exports.number() });
+var AnnotationSchema = external_exports.discriminatedUnion("kind", [
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("rect"),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    width: external_exports.number(),
+    height: external_exports.number(),
+    /**
+     * OPTIONAL, kept for back-compat with 0.1.x clients that emit
+     * viewport-anchored rects. New clients emit document-pixel rects with no
+     * viewport.
+     */
+    viewport: external_exports.object({ width: external_exports.number(), height: external_exports.number() }).optional()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("ellipse"),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    width: external_exports.number(),
+    height: external_exports.number()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("blur"),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    width: external_exports.number(),
+    height: external_exports.number()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("arrow"),
+    x1: external_exports.number(),
+    y1: external_exports.number(),
+    x2: external_exports.number(),
+    y2: external_exports.number()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("line"),
+    x1: external_exports.number(),
+    y1: external_exports.number(),
+    x2: external_exports.number(),
+    y2: external_exports.number()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("pencil"),
+    points: external_exports.array(AnnotationPointSchema).min(2)
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("highlighter"),
+    points: external_exports.array(AnnotationPointSchema).min(2)
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("text"),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    text: external_exports.string(),
+    fontSize: external_exports.number().optional()
+  }),
+  external_exports.object({
+    ...annotationCommon,
+    kind: external_exports.literal("step"),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    n: external_exports.number()
+  })
+]);
 var AssetKindSchema = external_exports.enum(["replay", "console", "network", "dom", "screenshot", "attachment"]);
 var AssetRefSchema = external_exports.object({
   kind: AssetKindSchema,
@@ -29353,6 +29424,11 @@ var ReplayRecorder = class {
         emit: (event, isCheckout) => this.onEmit(event, isCheckout),
         checkoutEveryNms: this.windowMs,
         recordCanvas: false,
+        // Inline same-origin + CORS images as data URIs at snapshot time so the
+        // dashboard replay paints on a different origin (tainted cross-origin
+        // images fall back to their URL, which is fine for public CDNs).
+        inlineImages: true,
+        collectFonts: true,
         // Keep the Lens overlay itself out of every recording.
         blockSelector: `#${LENS_OVERLAY_HOST_ID}`
       });
@@ -29459,7 +29535,20 @@ var ReplayRecorder = class {
     console.warn("[lens] rrweb recording unavailable; replay disabled", err);
   }
 };
-async function captureScreenshot(excludeHost) {
+var SVG_RASTERIZE_TIMEOUT_MS = 3e3;
+function computeCropRect(crop, scale, rasterWidth, rasterHeight) {
+  let sx = Math.round(crop.x * scale);
+  let sy = Math.round(crop.y * scale);
+  let sw = Math.round(crop.width * scale);
+  let sh = Math.round(crop.height * scale);
+  sx = Math.max(0, Math.min(sx, rasterWidth));
+  sy = Math.max(0, Math.min(sy, rasterHeight));
+  sw = Math.min(sw, rasterWidth - sx);
+  sh = Math.min(sh, rasterHeight - sy);
+  if (sw <= 0 || sh <= 0) return null;
+  return { sx, sy, sw, sh };
+}
+async function captureScreenshot(excludeHost, crop, composite) {
   if (typeof document === "undefined" || typeof window === "undefined") return null;
   try {
     const viewportPixels = window.innerWidth * window.innerHeight || 1;
@@ -29469,6 +29558,15 @@ async function captureScreenshot(excludeHost) {
       scale,
       type: "image/jpeg",
       quality: 0.82,
+      // JPEG has no alpha — transparent page regions (and any capture box
+      // extending past short content) would otherwise encode as BLACK.
+      backgroundColor: "#ffffff",
+      // When compositing annotations, force the capture box to the editor's
+      // document measurement (scrollHeight-based). modern-screenshot otherwise
+      // sizes from documentElement's bounding box, which on pages SHORTER than
+      // the viewport is the content height only — marks drawn in the lower
+      // viewport band would fall off the raster and the crop would clamp short.
+      ...composite ? { width: composite.docWidth, height: composite.docHeight } : {},
       // Exclude the overlay from the capture CLONE — never hide the live node.
       filter: (node2) => node2 !== excludeHost,
       // Per-resource fetch budget: a single slow cross-origin image must not
@@ -29493,12 +29591,171 @@ async function captureScreenshot(excludeHost) {
       );
       return null;
     }
+    if (composite) {
+      const baked = await compositeScreenshot(blob2, composite, scale, crop);
+      if (baked) return baked;
+      if (composite.blurRegions.length > 0) {
+        console.warn(
+          "[lens] screenshot compositing failed with active redactions; dropping screenshot to avoid leaking un-blurred content"
+        );
+        return null;
+      }
+    }
+    if (crop) {
+      const cropped = await cropBlob(blob2, crop, scale);
+      return cropped ?? blob2;
+    }
     return blob2;
   } catch (err) {
     console.warn("[lens] screenshot capture failed:", err);
     return null;
   }
 }
+async function compositeScreenshot(blob2, composite, scale, crop) {
+  try {
+    if (typeof createImageBitmap !== "function" || typeof document === "undefined") return null;
+    const bitmap = await createImageBitmap(blob2);
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close?.();
+      return null;
+    }
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(bitmap, 0, 0);
+    bitmap.close?.();
+    applyBlurRegions(ctx, canvas, composite.blurRegions, scale);
+    await drawSvgOverlay(ctx, composite, scale);
+    if (crop) {
+      const rect = computeCropRect(crop, scale, canvas.width, canvas.height);
+      if (rect) {
+        const out = document.createElement("canvas");
+        out.width = rect.sw;
+        out.height = rect.sh;
+        const octx = out.getContext("2d");
+        if (octx) {
+          octx.drawImage(canvas, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+          return await canvasToJpegBlob(out);
+        }
+      }
+    }
+    return await canvasToJpegBlob(canvas);
+  } catch (err) {
+    console.warn("[lens] screenshot compositing failed:", err);
+    return null;
+  }
+}
+function applyBlurRegions(ctx, canvas, regions, scale) {
+  if (regions.length === 0) return;
+  const filterSupported = typeof ctx.filter === "string";
+  const blurPx = Math.max(8, 12 * scale);
+  const pad = Math.ceil(blurPx);
+  for (const region of regions) {
+    const x = Math.max(0, Math.min(Math.round(region.x * scale), canvas.width));
+    const y = Math.max(0, Math.min(Math.round(region.y * scale), canvas.height));
+    const w = Math.min(Math.round(region.width * scale), canvas.width - x);
+    const h = Math.min(Math.round(region.height * scale), canvas.height - y);
+    if (w <= 0 || h <= 0) continue;
+    if (!filterSupported) {
+      ctx.fillStyle = "rgba(127,127,127,1)";
+      ctx.fillRect(x, y, w, h);
+      continue;
+    }
+    const px = Math.max(0, x - pad);
+    const py = Math.max(0, y - pad);
+    const pw = Math.min(canvas.width, x + w + pad) - px;
+    const ph = Math.min(canvas.height, y + h + pad) - py;
+    if (pw <= 0 || ph <= 0) continue;
+    const temp = document.createElement("canvas");
+    temp.width = pw;
+    temp.height = ph;
+    const tctx = temp.getContext("2d");
+    if (!tctx) {
+      ctx.fillStyle = "rgba(127,127,127,1)";
+      ctx.fillRect(x, y, w, h);
+      continue;
+    }
+    tctx.filter = `blur(${blurPx}px)`;
+    tctx.drawImage(canvas, px, py, pw, ph, 0, 0, pw, ph);
+    tctx.filter = "none";
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, w, h);
+    ctx.clip();
+    ctx.drawImage(temp, px, py);
+    ctx.restore();
+  }
+}
+async function drawSvgOverlay(ctx, composite, scale) {
+  const { svgMarkup, docWidth, docHeight } = composite;
+  if (!svgMarkup) return;
+  const img = await loadSvgImage(svgMarkup);
+  if (!img) return;
+  try {
+    ctx.drawImage(img, 0, 0, docWidth * scale, docHeight * scale);
+  } catch (err) {
+    console.warn("[lens] annotation overlay draw failed:", err);
+  }
+}
+function loadSvgImage(svg2) {
+  return new Promise((resolve) => {
+    if (typeof Image !== "function") {
+      resolve(null);
+      return;
+    }
+    let settled = false;
+    const finish = (result2) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      resolve(result2);
+    };
+    const timer = setTimeout(() => {
+      console.warn("[lens] annotation overlay rasterization timed out");
+      finish(null);
+    }, SVG_RASTERIZE_TIMEOUT_MS);
+    const img = new Image();
+    img.onload = () => finish(img);
+    img.onerror = () => {
+      console.warn("[lens] annotation overlay failed to rasterize");
+      finish(null);
+    };
+    img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2);
+  });
+}
+function canvasToJpegBlob(canvas) {
+  return new Promise((resolve) => {
+    canvas.toBlob((out) => resolve(out), "image/jpeg", 0.82);
+  });
+}
+async function cropBlob(blob2, crop, scale) {
+  try {
+    if (typeof createImageBitmap !== "function" || typeof document === "undefined") return null;
+    const bitmap = await createImageBitmap(blob2);
+    const rect = computeCropRect(crop, scale, bitmap.width, bitmap.height);
+    if (!rect) {
+      bitmap.close?.();
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = rect.sw;
+    canvas.height = rect.sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close?.();
+      return null;
+    }
+    ctx.drawImage(bitmap, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+    bitmap.close?.();
+    return await canvasToJpegBlob(canvas);
+  } catch (err) {
+    console.warn("[lens] screenshot crop failed:", err);
+    return null;
+  }
+}
 function parseBrowser(ua) {
   if (!ua) return void 0;
   const checks = [
@@ -29763,7 +30020,11 @@ var LensClient = class {
     const wantErrors = include.errors !== false;
     const wantScreenshot = include.screenshot !== false;
     const wantDom = include.dom !== false;
-    const screenshotPromise = this.screenshotEnabled && wantScreenshot ? captureScreenshot(input2.excludeFromScreenshot) : Promise.resolve(null);
+    const screenshotPromise = this.screenshotEnabled && wantScreenshot ? captureScreenshot(
+      input2.excludeFromScreenshot,
+      input2.screenshotCrop,
+      input2.annotationComposite
+    ) : Promise.resolve(null);
     const replayEvents = wantReplay ? this.replay?.snapshot() ?? [] : [];
     const errorEntries = this.errorBuffer.drain();
     const consoleTail = this.consoleBuffer.tail(CONSOLE_TAIL_SIZE);
@@ -29974,170 +30235,933 @@ function el(tag, props = {}, children = []) {
 function clear(node2) {
   while (node2.firstChild) node2.removeChild(node2.firstChild);
 }
-var Annotator = class {
+var THIN_MIN_DIST = 3;
+var MAX_POINTS = 2e3;
+var HIGHLIGHTER_WIDTH = 14;
+var STEP_RADIUS = 12;
+function distance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function shouldKeepPoint(last, candidate, minDist = THIN_MIN_DIST) {
+  return distance(last, candidate) >= minDist;
+}
+function perpendicularDistance(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const len2 = dx * dx + dy * dy;
+  if (len2 === 0) return distance(p, a);
+  let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2;
+  t = Math.max(0, Math.min(1, t));
+  return distance(p, { x: a.x + t * dx, y: a.y + t * dy });
+}
+function simplifyPoints(points, tolerance = 1) {
+  if (points.length <= 2 || tolerance <= 0) return points.map((p) => ({ ...p }));
+  const first = points[0];
+  const last = points[points.length - 1];
+  let maxDist = 0;
+  let index2 = 0;
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = perpendicularDistance(points[i], first, last);
+    if (d > maxDist) {
+      maxDist = d;
+      index2 = i;
+    }
+  }
+  if (maxDist > tolerance) {
+    const left = simplifyPoints(points.slice(0, index2 + 1), tolerance);
+    const right = simplifyPoints(points.slice(index2), tolerance);
+    return left.slice(0, -1).concat(right);
+  }
+  return [{ ...first }, { ...last }];
+}
+function arrowheadPolygon(x1, y1, x2, y2, size = 14) {
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  const spread = Math.PI / 7;
+  return [
+    { x: x2, y: y2 },
+    { x: x2 - size * Math.cos(angle - spread), y: y2 - size * Math.sin(angle - spread) },
+    { x: x2 - size * Math.cos(angle + spread), y: y2 - size * Math.sin(angle + spread) }
+  ];
+}
+function boundsOfAnnotation(a) {
+  switch (a.kind) {
+    case "rect":
+    case "ellipse":
+    case "blur": {
+      const x = Math.min(a.x, a.x + a.width);
+      const y = Math.min(a.y, a.y + a.height);
+      return { x, y, width: Math.abs(a.width), height: Math.abs(a.height) };
+    }
+    case "arrow":
+    case "line": {
+      const x = Math.min(a.x1, a.x2);
+      const y = Math.min(a.y1, a.y2);
+      return { x, y, width: Math.abs(a.x2 - a.x1), height: Math.abs(a.y2 - a.y1) };
+    }
+    case "pencil":
+    case "highlighter": {
+      if (a.points.length === 0) return null;
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const p of a.points) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+      }
+      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    case "text": {
+      const fontSize = a.fontSize ?? 16;
+      const width = Math.max(1, a.text.length * fontSize * 0.6);
+      return { x: a.x, y: a.y, width, height: fontSize * 1.2 };
+    }
+    case "step": {
+      return {
+        x: a.x - STEP_RADIUS,
+        y: a.y - STEP_RADIUS,
+        width: STEP_RADIUS * 2,
+        height: STEP_RADIUS * 2
+      };
+    }
+  }
+}
+function unionBounds(list) {
+  if (list.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const b of list) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function padAndClampBounds(b, padding, maxWidth, maxHeight) {
+  const x = Math.max(0, b.x - padding);
+  const y = Math.max(0, b.y - padding);
+  const right = Math.min(maxWidth, b.x + b.width + padding);
+  const bottom = Math.min(maxHeight, b.y + b.height + padding);
+  return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) };
+}
+var svg = (inner) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+var iconEye = svg(
+  '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>'
+);
+var iconCrosshair = svg(
+  '<circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>'
+);
+var iconClose = svg('<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>');
+var iconMark = svg(
+  '<rect x="3" y="3" width="18" height="18" rx="2" stroke-dasharray="4 3"/>'
+);
+var iconCopy = svg(
+  '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'
+);
+var iconCheck = svg('<polyline points="20 6 9 17 4 12"/>');
+var iconSend = svg('<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>');
+var iconRecord = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="6" fill="#ef4444"/></svg>`;
+var iconStop = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`;
+var iconRectTool = svg('<rect x="4" y="6" width="16" height="12" rx="1"/>');
+var iconEllipseTool = svg('<ellipse cx="12" cy="12" rx="8" ry="6"/>');
+var iconArrowTool = svg('<line x1="5" y1="19" x2="18" y2="6"/><polyline points="18 12 18 6 12 6"/>');
+var iconLineTool = svg('<line x1="5" y1="19" x2="19" y2="5"/>');
+var iconPencil = svg('<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>');
+var iconHighlighter = svg(
+  '<path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a1 1 0 0 1-1.4 0l-5.6-5.6a1 1 0 0 1 0-1.4L14 4"/>'
+);
+var iconText = svg(
+  '<polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/>'
+);
+var iconStepTool = svg('<circle cx="12" cy="12" r="9"/><path d="M11.2 9 13 8v8"/>');
+var iconBlur = svg('<path d="M12 3s6 6.4 6 10a6 6 0 0 1-12 0c0-3.6 6-10 6-10Z"/>');
+var iconUndo = svg('<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/>');
+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 SVG_NS = "http://www.w3.org/2000/svg";
+var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+var MIN_DRAG = 6;
+var TOOLS = [
+  { tool: "rect", icon: iconRectTool, label: "Rectangle" },
+  { tool: "ellipse", icon: iconEllipseTool, label: "Ellipse" },
+  { tool: "arrow", icon: iconArrowTool, label: "Arrow" },
+  { tool: "line", icon: iconLineTool, label: "Line" },
+  { tool: "pencil", icon: iconPencil, label: "Pencil" },
+  { tool: "highlighter", icon: iconHighlighter, label: "Highlighter" },
+  { tool: "text", icon: iconText, label: "Text" },
+  { tool: "step", icon: iconStepTool, label: "Step number" },
+  { tool: "blur", icon: iconBlur, label: "Blur / redact" }
+];
+var COLORS = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#8b5cf6", "#111827"];
+var WIDTHS = [
+  { label: "S", value: 2 },
+  { label: "M", value: 3.5 },
+  { label: "L", value: 6 }
+];
+var AnnotationEditor = class {
   constructor(host2) {
     this.host = host2;
   }
   host;
-  layer = null;
-  chips = null;
-  draft = null;
-  startX = 0;
-  startY = 0;
-  active = false;
-  dragging = false;
+  svg = null;
+  bg = null;
+  toolbar = null;
+  textInputEl = null;
+  textAnchor = null;
+  textColor = COLORS[0];
   annotations = [];
-  renderedRects = [];
+  markNodes = [];
+  drag = null;
+  active = false;
   sessionBase = 0;
+  stepCounter = 0;
+  idSeq = 0;
   onExit = null;
+  tool = "rect";
+  color = COLORS[0];
+  width = 3.5;
+  docW = 0;
+  docH = 0;
+  resizeObserver = null;
+  toolBtns = /* @__PURE__ */ new Map();
+  colorBtns = /* @__PURE__ */ new Map();
+  widthBtns = /* @__PURE__ */ new Map();
+  undoBtn = null;
+  clearBtn = null;
   get isActive() {
     return this.active;
   }
   get count() {
     return this.annotations.length;
   }
+  /** Deep-copied document-coord annotations per the schema contract. */
   list() {
-    return this.annotations.map((a) => ({ ...a, viewport: { ...a.viewport } }));
+    return this.annotations.map((a) => {
+      const copy2 = { ...a };
+      if ("points" in copy2 && Array.isArray(copy2.points)) {
+        copy2.points = copy2.points.map((p) => ({ ...p }));
+      }
+      if (copy2.kind === "rect" && copy2.viewport) copy2.viewport = { ...copy2.viewport };
+      return copy2;
+    });
   }
+  /** Remove every mark. Tears the layer down when not actively drawing. */
   clear() {
+    for (const node2 of this.markNodes) node2.remove();
+    this.markNodes = [];
     this.annotations = [];
-    for (const rect of this.renderedRects) rect.remove();
-    this.renderedRects = [];
+    this.stepCounter = 0;
+    if (!this.active) this.teardownLayer();
+    this.syncActionButtons();
   }
   start(onExit) {
     if (this.active) return;
+    this.ensureLayer();
+    const svg2 = this.svg;
     this.active = true;
     this.onExit = onExit;
     this.sessionBase = this.annotations.length;
-    this.layer = el("div", { class: "lens-annotate" });
-    this.layer.addEventListener("pointerdown", this.onDown);
-    this.chips = el("div", { class: "lens-annotate-chips" }, [
-      el("span", { class: "lens-annotate-chips__label", text: "Drag to mark an area" }),
+    this.stepCounter = 0;
+    this.sizeLayer();
+    this.updateTransform();
+    svg2.style.pointerEvents = "auto";
+    svg2.style.touchAction = "none";
+    svg2.style.cursor = "crosshair";
+    svg2.addEventListener("pointerdown", this.onPointerDown);
+    this.buildToolbar();
+    window.addEventListener("keydown", this.onKey, true);
+  }
+  /** Done — keep this session's marks, exit draw mode. */
+  exit() {
+    if (!this.active) return;
+    this.active = false;
+    this.commitTextInput();
+    if (this.drag) {
+      this.drag.node.remove();
+      this.detachDragListeners();
+      this.drag = null;
+    }
+    const svg2 = this.svg;
+    if (svg2) {
+      svg2.removeEventListener("pointerdown", this.onPointerDown);
+      svg2.style.pointerEvents = "none";
+      svg2.style.touchAction = "";
+      svg2.style.cursor = "";
+    }
+    window.removeEventListener("keydown", this.onKey, true);
+    this.removeToolbar();
+    const cb = this.onExit;
+    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() {
+    const node2 = this.markNodes.pop();
+    if (!node2) return;
+    node2.remove();
+    this.annotations.pop();
+    this.syncActionButtons();
+  }
+  // --------------------------------------------------------------------------
+  // Composite / crop
+  // --------------------------------------------------------------------------
+  /**
+   * Complete standalone SVG of every NON-blur mark, plus blur regions returned
+   * separately. `null` when there are no marks.
+   */
+  getComposite() {
+    if (this.annotations.length === 0 || !this.svg) return null;
+    this.sizeLayer();
+    const docWidth = this.docW;
+    const docHeight = this.docH;
+    const clone2 = this.svg.cloneNode(true);
+    clone2.removeAttribute("style");
+    clone2.removeAttribute("class");
+    clone2.querySelectorAll("[data-lens-chrome],[data-lens-draft],[data-lens-blur]").forEach((n2) => n2.remove());
+    clone2.querySelector("defs")?.remove();
+    clone2.setAttribute("xmlns", SVG_NS);
+    clone2.setAttribute("viewBox", `0 0 ${docWidth} ${docHeight}`);
+    clone2.setAttribute("width", String(docWidth));
+    clone2.setAttribute("height", String(docHeight));
+    const svgMarkup = new XMLSerializer().serializeToString(clone2);
+    const blurRegions = this.annotations.filter((a) => a.kind === "blur").map((a) => ({ x: a.x, y: a.y, width: a.width, height: a.height }));
+    return { svgMarkup, docWidth, docHeight, blurRegions };
+  }
+  /** Union bbox of all marks + 24px padding, clamped to the document. */
+  getCropBounds() {
+    if (this.annotations.length === 0) return void 0;
+    const boxes = [];
+    for (let i = 0; i < this.annotations.length; i++) {
+      const a = this.annotations[i];
+      const b = a.kind === "text" ? this.textBounds(i) : boundsOfAnnotation(a);
+      if (b) boxes.push(b);
+    }
+    const u = unionBounds(boxes);
+    if (!u) return void 0;
+    this.sizeLayer();
+    return padAndClampBounds(u, 24, this.docW, this.docH);
+  }
+  /** Prefer a live getBBox() for text; fall back to the geometric estimate. */
+  textBounds(index2) {
+    const node2 = this.markNodes[index2];
+    const annotation = this.annotations[index2];
+    if (node2 && typeof node2.getBBox === "function") {
+      try {
+        const box = node2.getBBox();
+        if (box.width > 0 && box.height > 0) {
+          return { x: box.x, y: box.y, width: box.width, height: box.height };
+        }
+      } catch {
+      }
+    }
+    return boundsOfAnnotation(annotation);
+  }
+  // --------------------------------------------------------------------------
+  // Layer lifecycle
+  // --------------------------------------------------------------------------
+  ensureLayer() {
+    if (this.svg) return;
+    const svg2 = document.createElementNS(SVG_NS, "svg");
+    svg2.setAttribute("class", "lens-annotate-svg");
+    svg2.setAttribute("xmlns", SVG_NS);
+    const defs = document.createElementNS(SVG_NS, "defs");
+    defs.setAttribute("data-lens-chrome", "1");
+    const pattern = document.createElementNS(SVG_NS, "pattern");
+    pattern.setAttribute("id", "lens-blur-hatch");
+    pattern.setAttribute("width", "8");
+    pattern.setAttribute("height", "8");
+    pattern.setAttribute("patternUnits", "userSpaceOnUse");
+    pattern.setAttribute("patternTransform", "rotate(45)");
+    const patternBase = document.createElementNS(SVG_NS, "rect");
+    patternBase.setAttribute("width", "8");
+    patternBase.setAttribute("height", "8");
+    patternBase.setAttribute("fill", "rgba(17,24,39,0.12)");
+    const patternLine = document.createElementNS(SVG_NS, "line");
+    patternLine.setAttribute("x1", "0");
+    patternLine.setAttribute("y1", "0");
+    patternLine.setAttribute("x2", "0");
+    patternLine.setAttribute("y2", "8");
+    patternLine.setAttribute("stroke", "rgba(17,24,39,0.55)");
+    patternLine.setAttribute("stroke-width", "4");
+    pattern.append(patternBase, patternLine);
+    defs.append(pattern);
+    svg2.append(defs);
+    const bg = document.createElementNS(SVG_NS, "rect");
+    bg.setAttribute("data-lens-chrome", "1");
+    bg.setAttribute("x", "0");
+    bg.setAttribute("y", "0");
+    bg.setAttribute("fill", "transparent");
+    bg.style.pointerEvents = "all";
+    svg2.append(bg);
+    this.svg = svg2;
+    this.bg = bg;
+    this.host.append(svg2);
+    window.addEventListener("scroll", this.onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", this.onResize);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.onResize);
+      this.resizeObserver.observe(document.documentElement);
+    }
+    this.sizeLayer();
+    this.updateTransform();
+  }
+  teardownLayer() {
+    window.removeEventListener("scroll", this.onScroll, true);
+    window.removeEventListener("resize", this.onResize);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.svg?.remove();
+    this.svg = null;
+    this.bg = null;
+  }
+  docSize() {
+    const d = document.documentElement;
+    const b = document.body;
+    const width = Math.max(d.scrollWidth, b?.scrollWidth ?? 0, d.clientWidth);
+    const height = Math.max(d.scrollHeight, b?.scrollHeight ?? 0, d.clientHeight);
+    return { width, height };
+  }
+  sizeLayer() {
+    if (!this.svg) return;
+    const { width, height } = this.docSize();
+    this.docW = width;
+    this.docH = height;
+    this.svg.setAttribute("width", String(width));
+    this.svg.setAttribute("height", String(height));
+    this.svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    this.svg.style.width = `${width}px`;
+    this.svg.style.height = `${height}px`;
+    if (this.bg) {
+      this.bg.setAttribute("width", String(width));
+      this.bg.setAttribute("height", String(height));
+    }
+  }
+  updateTransform() {
+    if (!this.svg) return;
+    const scrollX = window.scrollX || window.pageXOffset || 0;
+    const scrollY = window.scrollY || window.pageYOffset || 0;
+    this.svg.style.left = `${-scrollX}px`;
+    this.svg.style.top = `${-scrollY}px`;
+  }
+  onScroll = () => this.updateTransform();
+  onResize = () => {
+    this.sizeLayer();
+    this.updateTransform();
+  };
+  // --------------------------------------------------------------------------
+  // Toolbar
+  // --------------------------------------------------------------------------
+  buildToolbar() {
+    this.toolBtns.clear();
+    this.colorBtns.clear();
+    this.widthBtns.clear();
+    const toolGroup = el("div", { class: "lens-tool-group" });
+    for (const { tool, icon, label } of TOOLS) {
+      const btn = el("button", {
+        class: "lens-tool-btn",
+        ariaLabel: label,
+        title: label,
+        html: icon,
+        attrs: { type: "button", "aria-pressed": String(tool === this.tool) },
+        on: { click: () => this.selectTool(tool) }
+      });
+      this.toolBtns.set(tool, btn);
+      toolGroup.append(btn);
+    }
+    const colorGroup = el("div", { class: "lens-tool-group lens-swatches" });
+    for (const c of COLORS) {
+      const btn = el("button", {
+        class: "lens-swatch",
+        ariaLabel: `Color ${c}`,
+        title: c,
+        attrs: { type: "button", "aria-pressed": String(c === this.color) },
+        style: { background: c },
+        on: { click: () => this.selectColor(c) }
+      });
+      this.colorBtns.set(c, btn);
+      colorGroup.append(btn);
+    }
+    const widthGroup = el("div", { class: "lens-tool-group" });
+    for (const { label, value } of WIDTHS) {
+      const btn = el("button", {
+        class: "lens-width-btn",
+        text: label,
+        ariaLabel: `Stroke width ${label}`,
+        title: `Stroke ${label} (${value}px)`,
+        attrs: { type: "button", "aria-pressed": String(value === this.width) },
+        on: { click: () => this.selectWidth(value) }
+      });
+      this.widthBtns.set(value, btn);
+      widthGroup.append(btn);
+    }
+    this.undoBtn = el("button", {
+      class: "lens-tool-btn",
+      ariaLabel: "Undo",
+      title: "Undo",
+      html: iconUndo,
+      attrs: { type: "button" },
+      on: { click: () => this.undo() }
+    });
+    this.clearBtn = el("button", {
+      class: "lens-tool-btn",
+      ariaLabel: "Clear all",
+      title: "Clear all",
+      html: iconTrash,
+      attrs: { type: "button" },
+      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() }
       })
     ]);
-    this.host.append(this.layer, this.chips);
-    window.addEventListener("keydown", this.onKey, true);
-  }
-  /** Discard rectangles drawn during this session, then exit. */
-  cancel() {
-    const removed = this.renderedRects.splice(this.sessionBase);
-    for (const rect of removed) rect.remove();
-    this.annotations.splice(this.sessionBase);
-    this.exit();
+    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
+      ]
+    );
+    this.host.append(this.toolbar);
+    this.syncActionButtons();
+  }
+  removeToolbar() {
+    this.toolbar?.remove();
+    this.toolbar = null;
+    this.toolBtns.clear();
+    this.colorBtns.clear();
+    this.widthBtns.clear();
+    this.undoBtn = null;
+    this.clearBtn = null;
+  }
+  selectTool(tool) {
+    this.commitTextInput();
+    this.tool = tool;
+    for (const [t, btn] of this.toolBtns) {
+      const on2 = t === tool;
+      btn.classList.toggle("is-active", on2);
+      btn.setAttribute("aria-pressed", String(on2));
+    }
+    if (this.svg) this.svg.style.cursor = tool === "text" ? "text" : "crosshair";
+  }
+  selectColor(color) {
+    this.color = color;
+    for (const [c, btn] of this.colorBtns) {
+      const on2 = c === color;
+      btn.classList.toggle("is-active", on2);
+      btn.setAttribute("aria-pressed", String(on2));
+    }
+  }
+  selectWidth(value) {
+    this.width = value;
+    for (const [v, btn] of this.widthBtns) {
+      const on2 = v === value;
+      btn.classList.toggle("is-active", on2);
+      btn.setAttribute("aria-pressed", String(on2));
+    }
+  }
+  syncActionButtons() {
+    const empty = this.markNodes.length === 0;
+    if (this.undoBtn) this.undoBtn.disabled = empty;
+    if (this.clearBtn) this.clearBtn.disabled = empty;
+  }
+  // --------------------------------------------------------------------------
+  // Pointer / drawing
+  // --------------------------------------------------------------------------
+  toDoc(e) {
+    return {
+      x: e.clientX + (window.scrollX || window.pageXOffset || 0),
+      y: e.clientY + (window.scrollY || window.pageYOffset || 0)
+    };
   }
-  exit() {
+  onPointerDown = (e) => {
     if (!this.active) return;
-    this.active = false;
-    this.dragging = false;
-    window.removeEventListener("keydown", this.onKey, true);
-    window.removeEventListener("pointermove", this.onMove, true);
-    window.removeEventListener("pointerup", this.onUp, true);
-    if (this.draft) {
-      this.draft.remove();
-      this.draft = null;
+    if (e.button !== void 0 && e.button !== 0) return;
+    e.preventDefault();
+    const p = this.toDoc(e);
+    const tool = this.tool;
+    if (tool === "text") {
+      this.openTextInput(e.clientX, e.clientY, p);
+      return;
     }
-    if (this.layer) {
-      this.layer.removeEventListener("pointerdown", this.onDown);
-      this.layer.remove();
-      this.layer = null;
+    if (tool === "step") {
+      this.placeStep(p);
+      return;
     }
-    if (this.chips) {
-      this.chips.remove();
-      this.chips = null;
+    const color = this.color;
+    const width = this.width;
+    let drag;
+    if (tool === "pencil" || tool === "highlighter") {
+      const poly = this.svgEl("polyline", {
+        "data-lens-draft": "1",
+        fill: "none",
+        stroke: color,
+        "stroke-width": tool === "highlighter" ? HIGHLIGHTER_WIDTH : width,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        ...tool === "highlighter" ? { "stroke-opacity": "0.35" } : {},
+        points: `${p.x},${p.y}`
+      });
+      this.svg.append(poly);
+      drag = { tool, color, width, start: p, node: poly, points: [p], last: p };
+    } else if (tool === "arrow") {
+      const g = this.svgEl("g", { "data-lens-draft": "1" });
+      const line = this.svgEl("line", {
+        stroke: color,
+        "stroke-width": width,
+        "stroke-linecap": "round"
+      });
+      const head = this.svgEl("polygon", { fill: color });
+      g.append(line, head);
+      this.svg.append(g);
+      drag = { tool, color, width, start: p, node: g, line, head };
+      this.updateArrow(drag, p);
+    } else {
+      const node2 = this.createShapeNode(tool, color, width);
+      this.svg.append(node2);
+      drag = { tool, color, width, start: p, node: node2 };
+      this.updateShape(drag, p);
+    }
+    this.drag = drag;
+    window.addEventListener("pointermove", this.onPointerMove, true);
+    window.addEventListener("pointerup", this.onPointerUp, true);
+  };
+  onPointerMove = (e) => {
+    const d = this.drag;
+    if (!d) return;
+    const p = this.toDoc(e);
+    if (d.tool === "pencil" || d.tool === "highlighter") {
+      const pts = d.points;
+      if (d.last && shouldKeepPoint(d.last, p) && pts.length < MAX_POINTS) {
+        pts.push(p);
+        d.last = p;
+        d.node.setAttribute("points", this.pointsAttr(pts));
+      }
+    } else if (d.tool === "arrow") {
+      this.updateArrow(d, p);
+    } else {
+      this.updateShape(d, p);
+    }
+  };
+  onPointerUp = (e) => {
+    const d = this.drag;
+    this.detachDragListeners();
+    this.drag = null;
+    if (!d) return;
+    const p = this.toDoc(e);
+    let annotation = null;
+    if (d.tool === "pencil" || d.tool === "highlighter") {
+      let pts = d.points;
+      if (pts.length >= 2) pts = simplifyPoints(pts, 1);
+      if (pts.length < 2) {
+        d.node.remove();
+        return;
+      }
+      d.node.setAttribute("points", this.pointsAttr(pts));
+      annotation = d.tool === "pencil" ? { kind: "pencil", points: pts, color: d.color, strokeWidth: d.width, id: this.nextId() } : {
+        kind: "highlighter",
+        points: pts,
+        color: d.color,
+        strokeWidth: HIGHLIGHTER_WIDTH,
+        id: this.nextId()
+      };
+    } else if (d.tool === "arrow" || d.tool === "line") {
+      if (distance(d.start, p) < MIN_DRAG) {
+        d.node.remove();
+        return;
+      }
+      if (d.tool === "arrow") {
+        this.updateArrow(d, p);
+        annotation = {
+          kind: "arrow",
+          x1: d.start.x,
+          y1: d.start.y,
+          x2: p.x,
+          y2: p.y,
+          color: d.color,
+          strokeWidth: d.width,
+          id: this.nextId()
+        };
+      } else {
+        this.updateShape(d, p);
+        annotation = {
+          kind: "line",
+          x1: d.start.x,
+          y1: d.start.y,
+          x2: p.x,
+          y2: p.y,
+          color: d.color,
+          strokeWidth: d.width,
+          id: this.nextId()
+        };
+      }
+    } else {
+      const x = Math.min(d.start.x, p.x);
+      const y = Math.min(d.start.y, p.y);
+      const width = Math.abs(p.x - d.start.x);
+      const height = Math.abs(p.y - d.start.y);
+      if (width < MIN_DRAG || height < MIN_DRAG) {
+        d.node.remove();
+        return;
+      }
+      this.updateShape(d, p);
+      if (d.tool === "rect") {
+        annotation = {
+          kind: "rect",
+          x,
+          y,
+          width,
+          height,
+          color: d.color,
+          strokeWidth: d.width,
+          id: this.nextId()
+        };
+      } else if (d.tool === "ellipse") {
+        annotation = {
+          kind: "ellipse",
+          x,
+          y,
+          width,
+          height,
+          color: d.color,
+          strokeWidth: d.width,
+          id: this.nextId()
+        };
+      } else {
+        annotation = { kind: "blur", x, y, width, height, id: this.nextId() };
+      }
     }
-    const exit = this.onExit;
-    this.onExit = null;
-    exit?.();
-  }
-  onDown = (e) => {
-    e.preventDefault();
-    this.dragging = true;
-    this.startX = e.clientX;
-    this.startY = e.clientY;
-    this.draft = el("div", { class: "lens-rect" });
-    this.host.append(this.draft);
-    this.position(this.draft, e.clientX, e.clientY);
-    window.addEventListener("pointermove", this.onMove, true);
-    window.addEventListener("pointerup", this.onUp, true);
+    d.node.removeAttribute("data-lens-draft");
+    this.commitMark(annotation, d.node);
   };
-  onMove = (e) => {
-    if (this.dragging && this.draft) this.position(this.draft, e.clientX, e.clientY);
-  };
-  onUp = (e) => {
-    window.removeEventListener("pointermove", this.onMove, true);
-    window.removeEventListener("pointerup", this.onUp, true);
-    this.dragging = false;
-    const x = Math.min(this.startX, e.clientX);
-    const y = Math.min(this.startY, e.clientY);
-    const width = Math.abs(e.clientX - this.startX);
-    const height = Math.abs(e.clientY - this.startY);
-    if (this.draft) {
-      this.draft.remove();
-      this.draft = null;
-    }
-    if (width < 6 || height < 6) return;
-    const rect = el("div", { class: "lens-rect" });
-    Object.assign(rect.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-      width: `${width}px`,
-      height: `${height}px`
+  detachDragListeners() {
+    window.removeEventListener("pointermove", this.onPointerMove, true);
+    window.removeEventListener("pointerup", this.onPointerUp, true);
+  }
+  commitMark(annotation, node2) {
+    this.annotations.push(annotation);
+    this.markNodes.push(node2);
+    this.syncActionButtons();
+  }
+  createShapeNode(tool, color, width) {
+    if (tool === "ellipse") {
+      return this.svgEl("ellipse", {
+        "data-lens-draft": "1",
+        fill: "none",
+        stroke: color,
+        "stroke-width": width
+      });
+    }
+    if (tool === "line") {
+      return this.svgEl("line", {
+        "data-lens-draft": "1",
+        stroke: color,
+        "stroke-width": width,
+        "stroke-linecap": "round"
+      });
+    }
+    if (tool === "blur") {
+      return this.svgEl("rect", {
+        "data-lens-draft": "1",
+        "data-lens-blur": "1",
+        fill: "url(#lens-blur-hatch)",
+        stroke: "#111827",
+        "stroke-width": 1,
+        "stroke-dasharray": "4 3"
+      });
+    }
+    return this.svgEl("rect", {
+      "data-lens-draft": "1",
+      fill: "none",
+      stroke: color,
+      "stroke-width": width,
+      rx: 2
     });
-    this.host.append(rect);
-    this.renderedRects.push(rect);
-    this.annotations.push({
-      kind: "rect",
-      x,
-      y,
-      width,
-      height,
-      viewport: { width: window.innerWidth, height: window.innerHeight }
+  }
+  updateShape(d, cur) {
+    const x = Math.min(d.start.x, cur.x);
+    const y = Math.min(d.start.y, cur.y);
+    const w = Math.abs(cur.x - d.start.x);
+    const h = Math.abs(cur.y - d.start.y);
+    const node2 = d.node;
+    if (d.tool === "ellipse") {
+      node2.setAttribute("cx", String(x + w / 2));
+      node2.setAttribute("cy", String(y + h / 2));
+      node2.setAttribute("rx", String(w / 2));
+      node2.setAttribute("ry", String(h / 2));
+    } else if (d.tool === "line") {
+      node2.setAttribute("x1", String(d.start.x));
+      node2.setAttribute("y1", String(d.start.y));
+      node2.setAttribute("x2", String(cur.x));
+      node2.setAttribute("y2", String(cur.y));
+    } else {
+      node2.setAttribute("x", String(x));
+      node2.setAttribute("y", String(y));
+      node2.setAttribute("width", String(w));
+      node2.setAttribute("height", String(h));
+    }
+  }
+  updateArrow(d, cur) {
+    if (!d.line || !d.head) return;
+    d.line.setAttribute("x1", String(d.start.x));
+    d.line.setAttribute("y1", String(d.start.y));
+    d.line.setAttribute("x2", String(cur.x));
+    d.line.setAttribute("y2", String(cur.y));
+    const size = Math.max(12, d.width * 3);
+    const poly = arrowheadPolygon(d.start.x, d.start.y, cur.x, cur.y, size);
+    d.head.setAttribute("points", this.pointsAttr(poly));
+  }
+  // --------------------------------------------------------------------------
+  // Text tool
+  // --------------------------------------------------------------------------
+  openTextInput(clientX, clientY, docPoint) {
+    this.commitTextInput();
+    const input2 = el("input", {
+      class: "lens-text-input",
+      attrs: { type: "text", "aria-label": "Annotation text" },
+      style: { left: `${clientX}px`, top: `${clientY}px`, color: this.color }
     });
-  };
-  position(node2, curX, curY) {
-    const x = Math.min(this.startX, curX);
-    const y = Math.min(this.startY, curY);
-    Object.assign(node2.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-      width: `${Math.abs(curX - this.startX)}px`,
-      height: `${Math.abs(curY - this.startY)}px`
+    input2.addEventListener("blur", () => this.commitTextInput());
+    this.host.append(input2);
+    this.textInputEl = input2;
+    this.textAnchor = docPoint;
+    this.textColor = this.color;
+    input2.focus();
+  }
+  commitTextInput() {
+    const input2 = this.textInputEl;
+    const anchor = this.textAnchor;
+    if (!input2 || !anchor) return;
+    const value = input2.value.trim();
+    this.textInputEl = null;
+    this.textAnchor = null;
+    input2.remove();
+    if (!value) return;
+    const node2 = this.svgEl("text", {
+      x: anchor.x,
+      y: anchor.y,
+      fill: this.textColor,
+      "font-size": 16,
+      "font-family": FONT,
+      "dominant-baseline": "hanging"
     });
+    node2.textContent = value;
+    this.svg.append(node2);
+    this.commitMark(
+      {
+        kind: "text",
+        x: anchor.x,
+        y: anchor.y,
+        text: value,
+        fontSize: 16,
+        color: this.textColor,
+        id: this.nextId()
+      },
+      node2
+    );
   }
+  cancelTextInput() {
+    if (!this.textInputEl) return;
+    this.textInputEl.remove();
+    this.textInputEl = null;
+    this.textAnchor = null;
+  }
+  // --------------------------------------------------------------------------
+  // Step tool
+  // --------------------------------------------------------------------------
+  placeStep(p) {
+    const n2 = ++this.stepCounter;
+    const g = this.svgEl("g", {});
+    const circle = this.svgEl("circle", {
+      cx: p.x,
+      cy: p.y,
+      r: STEP_RADIUS,
+      fill: this.color
+    });
+    const text = this.svgEl("text", {
+      x: p.x,
+      y: p.y,
+      fill: "#ffffff",
+      "font-size": 13,
+      "font-weight": 700,
+      "font-family": FONT,
+      "text-anchor": "middle",
+      "dominant-baseline": "central"
+    });
+    text.textContent = String(n2);
+    g.append(circle, text);
+    this.svg.append(g);
+    this.commitMark({ kind: "step", x: p.x, y: p.y, n: n2, color: this.color, id: this.nextId() }, g);
+  }
+  // --------------------------------------------------------------------------
+  // Keyboard
+  // --------------------------------------------------------------------------
   onKey = (e) => {
-    if (e.key !== "Escape") return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.exit();
+    if (this.textInputEl) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancelTextInput();
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.commitTextInput();
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      this.exit();
+    }
   };
+  // --------------------------------------------------------------------------
+  // Small helpers
+  // --------------------------------------------------------------------------
+  svgEl(tag, attrs) {
+    const node2 = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) node2.setAttribute(k, String(v));
+    return node2;
+  }
+  pointsAttr(points) {
+    return points.map((p) => `${p.x},${p.y}`).join(" ");
+  }
+  nextId() {
+    return `lens-${++this.idSeq}`;
+  }
 };
-var svg = (inner) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
-var iconEye = svg(
-  '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>'
-);
-var iconCrosshair = svg(
-  '<circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>'
-);
-var iconClose = svg('<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>');
-var iconMark = svg(
-  '<rect x="3" y="3" width="18" height="18" rx="2" stroke-dasharray="4 3"/>'
-);
-var iconCopy = svg(
-  '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'
-);
-var iconCheck = svg('<polyline points="20 6 9 17 4 12"/>');
-var iconSend = svg('<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>');
-var iconRecord = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="6" fill="#ef4444"/></svg>`;
-var iconStop = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`;
 var INCLUDE_ITEMS = [
   { key: "replay", label: "Replay" },
   { key: "console", label: "Console" },
@@ -30294,7 +31318,7 @@ var Panel = class {
   buildActions() {
     const mark = el("button", {
       class: "lens-abtn lens-abtn--ghost lens-abtn--compact",
-      html: iconMark + "<span>Mark area</span>",
+      html: iconAnnotate + "<span>Annotate</span>",
       on: { click: () => this.cb.onMarkArea() }
     });
     const record3 = el("button", {
@@ -30678,21 +31702,33 @@ var OVERLAY_CSS = (
   pointer-events: none;
 }
 
-/* ---------------- Annotation layer ---------------- */
-.lens-annotate {
-  position: fixed;
-  inset: 0;
+/* ---------------- Annotation SVG layer ---------------- */
+/* One full-DOCUMENT SVG anchored to page content (translated by -scroll so
+   marks survive scrolling). pointer-events flip to auto only while drawing. */
+.lens-annotate-svg {
+  position: absolute;
+  left: 0;
+  top: 0;
   z-index: calc(var(--lens-z) - 1);
-  cursor: crosshair;
-  background: rgba(15, 15, 20, 0.04);
-  touch-action: none;
+  pointer-events: none;
+  overflow: visible;
 }
-.lens-rect {
+
+/* Floating text-entry input for the Text tool (viewport-positioned). */
+.lens-text-input {
   position: fixed;
-  border: 2px solid var(--lens-accent);
-  background: rgba(99, 102, 241, 0.1);
-  border-radius: 3px;
-  pointer-events: none;
+  z-index: var(--lens-z);
+  min-width: 120px;
+  padding: 2px 6px;
+  border: 1px solid var(--lens-accent);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #111827;
+  font-family: var(--lens-font);
+  font-size: 15px;
+  line-height: 1.3;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  outline: none;
 }
 
 /* ---------------- Panel ---------------- */
@@ -30983,6 +32019,114 @@ 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. */
+.lens-annotate-toolbar {
+  position: fixed;
+  top: calc(16px + env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--lens-z);
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 8px;
+  border-radius: 14px;
+  background: rgba(20, 20, 23, 0.92);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+  color: #f4f4f5;
+}
+.lens-tool-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.lens-tool-sep {
+  width: 1px;
+  align-self: stretch;
+  min-height: 22px;
+  background: rgba(255, 255, 255, 0.16);
+  margin: 0 2px;
+}
+.lens-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #d4d4d8;
+  cursor: pointer;
+  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.is-active {
+  background: var(--lens-accent);
+  border-color: var(--lens-accent);
+  color: #fff;
+}
+.lens-tool-btn:disabled { opacity: 0.4; cursor: default; }
+.lens-tool-btn:disabled:hover { background: transparent; color: #d4d4d8; }
+
+.lens-swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease;
+}
+.lens-swatch:hover { transform: scale(1.1); }
+.lens-swatch:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
+.lens-swatch.is-active {
+  border-color: #fff;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+
+.lens-width-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 26px;
+  height: 30px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #d4d4d8;
+  font-family: var(--lens-font);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  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.is-active {
+  background: var(--lens-accent);
+  border-color: var(--lens-accent);
+  color: #fff;
+}
+
+/* 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; }
+}
+
 /* Stacking inside the shadow layer: the panel, pill and floating chips always
    sit above the annotation layer/rects and picker highlight, so marked areas
    never paint over interactive UI. */
@@ -31108,7 +32252,7 @@ var Overlay = class {
     this.layer = el("div", { class: "lens-layer" });
     this.shadow.append(this.layer);
     this.picker = new ElementPicker(this.layer, this.host);
-    this.annotator = new Annotator(this.layer);
+    this.annotator = new AnnotationEditor(this.layer);
     this.layer.append(this.buildPill());
     document.documentElement.append(this.host);
     window.addEventListener("keydown", this.onGlobalKey, true);
@@ -31276,11 +32420,15 @@ var Overlay = class {
   }
   async submit(comment2, include) {
     const annotations = this.annotator.list();
+    const composite = this.annotator.getComposite() ?? void 0;
+    const screenshotCrop = this.annotator.getCropBounds();
     const result2 = await this.deps.client.submitReport({
       comment: comment2 || void 0,
       annotations,
       target: this.target ?? void 0,
       excludeFromScreenshot: this.host,
+      screenshotCrop,
+      annotationComposite: composite,
       include
     });
     this.target = null;