@merittdev/horus-lens 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -14633,15 +14633,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,
@@ -29381,6 +29452,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}`
       });
@@ -29487,7 +29563,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;
@@ -29497,6 +29586,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
@@ -29521,12 +29619,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(svg) {
+  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(svg);
+  });
+}
+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 = [
@@ -29791,7 +30048,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);