spaps-issue-reporting-react 0.4.2 → 0.6.0

package/dist/screenshot-capture.js

@@ -0,0 +1,315 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/screenshot-capture.ts
+var screenshot_capture_exports = {};
+__export(screenshot_capture_exports, {
+  ATTACHMENT_MAX_BYTES: () => ATTACHMENT_MAX_BYTES,
+  SCREENSHOT_CAPTURE_REDACTION_TEXT: () => SCREENSHOT_CAPTURE_REDACTION_TEXT,
+  captureScreenshot: () => captureScreenshot,
+  maskScreenshotCaptureDocument: () => maskScreenshotCaptureDocument,
+  resetHtml2CanvasCache: () => resetHtml2CanvasCache
+});
+module.exports = __toCommonJS(screenshot_capture_exports);
+var DEFAULT_EXCLUDE_SELECTORS = [
+  "[data-spaps-screenshot-exclude]",
+  "[data-spaps-private]"
+];
+var DEFAULT_MASK_SELECTORS = [
+  "input",
+  "option",
+  "select",
+  "textarea",
+  '[contenteditable="true"]'
+];
+var SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
+var ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
+var MIME_TO_EXTENSION = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp"
+};
+var html2canvasPromise = null;
+function loadHtml2Canvas() {
+  if (!html2canvasPromise) {
+    html2canvasPromise = import("html2canvas");
+  }
+  return html2canvasPromise;
+}
+function resolveFilename(config, context) {
+  const imageType = config.imageType ?? "image/png";
+  const ext = MIME_TO_EXTENSION[imageType] ?? "png";
+  if (typeof config.filename === "function") {
+    return config.filename(context);
+  }
+  if (typeof config.filename === "string") {
+    return config.filename;
+  }
+  return `screenshot-${context.target.componentKey}-${Date.now()}.${ext}`;
+}
+function resolveRootElement(config) {
+  if (typeof config.rootElement === "function") {
+    return config.rootElement();
+  }
+  if (typeof HTMLElement !== "undefined" && config.rootElement instanceof HTMLElement) {
+    return config.rootElement;
+  }
+  return document.documentElement;
+}
+function buildIgnoreSelectors(config) {
+  const selectors = [...DEFAULT_EXCLUDE_SELECTORS];
+  if (config.excludeSelectors) {
+    selectors.push(...config.excludeSelectors.map((selector) => selector.trim()));
+  }
+  return selectors.filter(Boolean);
+}
+function safelyMatchesSelector(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function buildIgnoreElementPredicate(config) {
+  const selectors = buildIgnoreSelectors(config);
+  return (element) => selectors.some((selector) => safelyMatchesSelector(element, selector));
+}
+function canvasToBlobAsync(canvas, mimeType, quality) {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, mimeType, quality);
+  });
+}
+async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
+  const initial = await canvasToBlobAsync(canvas, imageType, quality);
+  if (initial && initial.size <= maxBytes) {
+    return { blob: initial, scaled: false };
+  }
+  const fallbackTypes = imageType === "image/png" ? ["image/webp", "image/jpeg"] : [imageType, "image/webp", "image/jpeg"];
+  let currentCanvas = canvas;
+  let scaled = false;
+  for (const scale of [0.85, 0.7, 0.55, 0.4]) {
+    currentCanvas = scaleCanvas(currentCanvas, scale);
+    scaled = true;
+    for (const format of fallbackTypes) {
+      for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
+        const attempt = await canvasToBlobAsync(
+          currentCanvas,
+          format,
+          candidateQuality
+        );
+        if (attempt && attempt.size <= maxBytes) {
+          return { blob: attempt, scaled };
+        }
+      }
+    }
+  }
+  throw new Error(
+    `Screenshot exceeds ${Math.round(maxBytes / 1024 / 1024)} MiB after compression`
+  );
+}
+async function captureScreenshot(config, context) {
+  if (!config.enabled) {
+    throw new Error("Screenshot capture is not enabled");
+  }
+  if (!canUseBrowserCapture()) {
+    throw new Error("Browser screenshot capture is unavailable");
+  }
+  const { default: html2canvas } = await loadHtml2Canvas();
+  const rootElement = resolveRootElement(config);
+  if (!rootElement) {
+    throw new Error("Screenshot root element not found");
+  }
+  const ignoreElements = buildIgnoreElementPredicate(config);
+  const imageType = config.imageType ?? "image/png";
+  const maxBytes = Math.min(config.maxBytes ?? ATTACHMENT_MAX_BYTES, ATTACHMENT_MAX_BYTES);
+  const viewport = readViewport();
+  const rect = resolveCaptureRect(config, viewport);
+  const pixelRatio = Math.min(
+    Math.max(config.pixelRatio ?? window.devicePixelRatio ?? 1, 1),
+    2
+  );
+  const ignoreSelectors = buildIgnoreSelectors(config);
+  const canvas = await html2canvas(rootElement, {
+    useCORS: true,
+    allowTaint: false,
+    backgroundColor: null,
+    logging: false,
+    ignoreElements,
+    onclone: (clonedDocument) => {
+      maskScreenshotCaptureDocument(
+        clonedDocument,
+        ignoreSelectors,
+        config.maskSelectors
+      );
+    },
+    removeContainer: true,
+    scale: pixelRatio,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+    width: rect.width,
+    height: rect.height,
+    windowWidth: viewport.width,
+    windowHeight: viewport.height,
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY
+  });
+  const output = await canvasToSizedBlob(
+    canvas,
+    imageType,
+    config.quality,
+    maxBytes
+  );
+  const filename = resolveFilename(config, context);
+  return {
+    blob: new Blob([output.blob], { type: output.blob.type || imageType }),
+    filename: replaceFilenameExtension(
+      filename,
+      MIME_TO_EXTENSION[output.blob.type || imageType] ?? MIME_TO_EXTENSION[imageType]
+    ),
+    mimeType: output.blob.type || imageType,
+    byteSize: output.blob.size,
+    rect,
+    scaled: output.scaled
+  };
+}
+function resetHtml2CanvasCache() {
+  html2canvasPromise = null;
+}
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+  clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
+  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
+}
+function canUseBrowserCapture() {
+  return typeof window !== "undefined" && typeof document !== "undefined" && typeof Blob !== "undefined" && typeof document.createElement === "function";
+}
+function readViewport() {
+  return {
+    width: Math.max(
+      1,
+      Math.round(window.innerWidth || document.documentElement.clientWidth || 1)
+    ),
+    height: Math.max(
+      1,
+      Math.round(window.innerHeight || document.documentElement.clientHeight || 1)
+    )
+  };
+}
+function resolveCaptureRect(config, viewport) {
+  const configuredRect = typeof config.rect === "function" ? config.rect() : config.rect;
+  const source = configuredRect && configuredRect.width > 0 && configuredRect.height > 0 ? configuredRect : { top: 0, left: 0, width: viewport.width, height: viewport.height };
+  const left = clamp(Math.round(source.left), 0, viewport.width - 1);
+  const top = clamp(Math.round(source.top), 0, viewport.height - 1);
+  const right = clamp(
+    Math.round(source.left + source.width),
+    left + 1,
+    viewport.width
+  );
+  const bottom = clamp(
+    Math.round(source.top + source.height),
+    top + 1,
+    viewport.height
+  );
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function maskCaptureElement(element) {
+  if (element instanceof HTMLInputElement) {
+    element.value = "";
+    element.setAttribute("value", "");
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLTextAreaElement) {
+    element.value = "";
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLSelectElement) {
+    element.querySelectorAll("option").forEach((option) => {
+      option.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    });
+  } else {
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+  }
+  if (element instanceof HTMLElement) {
+    element.setAttribute("aria-label", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+    element.style.color = "#1d1914";
+    element.style.backgroundColor = "#d8d0c1";
+  }
+}
+function redactSensitiveTextNodes(root) {
+  if (!root) {
+    return;
+  }
+  const ownerDocument = root.ownerDocument ?? document;
+  const walker = ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
+  while (node) {
+    if (node.textContent) {
+      node.textContent = redactSensitiveText(node.textContent);
+    }
+    node = walker.nextNode();
+  }
+}
+function redactSensitiveText(value) {
+  return value.replace(
+    /\b((?:access|refresh|id)_token)=([^&#\s]+)/gi,
+    (_, key, token) => `${key}=${redactValue(token)}`
+  ).replace(/\bBearer\s+[A-Za-z0-9._~+/=-]+/gi, "Bearer [redacted]").replace(/\b[ps]k_(?:live|test)_[A-Za-z0-9_=-]+/g, SCREENSHOT_CAPTURE_REDACTION_TEXT).replace(/\b(?:token|secret|password|signature)[_-]?[A-Za-z0-9._~+/=-]{8,}/gi, SCREENSHOT_CAPTURE_REDACTION_TEXT);
+}
+function redactValue(value) {
+  return value ? SCREENSHOT_CAPTURE_REDACTION_TEXT : value;
+}
+function scaleCanvas(source, ratio) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(source.width * ratio));
+  canvas.height = Math.max(1, Math.round(source.height * ratio));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D context is unavailable");
+  }
+  context.drawImage(source, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function replaceFilenameExtension(filename, extension) {
+  return filename.replace(/\.(png|jpe?g|webp)$/i, `.${extension}`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ATTACHMENT_MAX_BYTES,
+  SCREENSHOT_CAPTURE_REDACTION_TEXT,
+  captureScreenshot,
+  maskScreenshotCaptureDocument,
+  resetHtml2CanvasCache
+});

package/dist/screenshot-capture.mjs

@@ -0,0 +1,276 @@
+// src/screenshot-capture.ts
+var DEFAULT_EXCLUDE_SELECTORS = [
+  "[data-spaps-screenshot-exclude]",
+  "[data-spaps-private]"
+];
+var DEFAULT_MASK_SELECTORS = [
+  "input",
+  "option",
+  "select",
+  "textarea",
+  '[contenteditable="true"]'
+];
+var SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
+var ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
+var MIME_TO_EXTENSION = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp"
+};
+var html2canvasPromise = null;
+function loadHtml2Canvas() {
+  if (!html2canvasPromise) {
+    html2canvasPromise = import("html2canvas");
+  }
+  return html2canvasPromise;
+}
+function resolveFilename(config, context) {
+  const imageType = config.imageType ?? "image/png";
+  const ext = MIME_TO_EXTENSION[imageType] ?? "png";
+  if (typeof config.filename === "function") {
+    return config.filename(context);
+  }
+  if (typeof config.filename === "string") {
+    return config.filename;
+  }
+  return `screenshot-${context.target.componentKey}-${Date.now()}.${ext}`;
+}
+function resolveRootElement(config) {
+  if (typeof config.rootElement === "function") {
+    return config.rootElement();
+  }
+  if (typeof HTMLElement !== "undefined" && config.rootElement instanceof HTMLElement) {
+    return config.rootElement;
+  }
+  return document.documentElement;
+}
+function buildIgnoreSelectors(config) {
+  const selectors = [...DEFAULT_EXCLUDE_SELECTORS];
+  if (config.excludeSelectors) {
+    selectors.push(...config.excludeSelectors.map((selector) => selector.trim()));
+  }
+  return selectors.filter(Boolean);
+}
+function safelyMatchesSelector(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function buildIgnoreElementPredicate(config) {
+  const selectors = buildIgnoreSelectors(config);
+  return (element) => selectors.some((selector) => safelyMatchesSelector(element, selector));
+}
+function canvasToBlobAsync(canvas, mimeType, quality) {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, mimeType, quality);
+  });
+}
+async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
+  const initial = await canvasToBlobAsync(canvas, imageType, quality);
+  if (initial && initial.size <= maxBytes) {
+    return { blob: initial, scaled: false };
+  }
+  const fallbackTypes = imageType === "image/png" ? ["image/webp", "image/jpeg"] : [imageType, "image/webp", "image/jpeg"];
+  let currentCanvas = canvas;
+  let scaled = false;
+  for (const scale of [0.85, 0.7, 0.55, 0.4]) {
+    currentCanvas = scaleCanvas(currentCanvas, scale);
+    scaled = true;
+    for (const format of fallbackTypes) {
+      for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
+        const attempt = await canvasToBlobAsync(
+          currentCanvas,
+          format,
+          candidateQuality
+        );
+        if (attempt && attempt.size <= maxBytes) {
+          return { blob: attempt, scaled };
+        }
+      }
+    }
+  }
+  throw new Error(
+    `Screenshot exceeds ${Math.round(maxBytes / 1024 / 1024)} MiB after compression`
+  );
+}
+async function captureScreenshot(config, context) {
+  if (!config.enabled) {
+    throw new Error("Screenshot capture is not enabled");
+  }
+  if (!canUseBrowserCapture()) {
+    throw new Error("Browser screenshot capture is unavailable");
+  }
+  const { default: html2canvas } = await loadHtml2Canvas();
+  const rootElement = resolveRootElement(config);
+  if (!rootElement) {
+    throw new Error("Screenshot root element not found");
+  }
+  const ignoreElements = buildIgnoreElementPredicate(config);
+  const imageType = config.imageType ?? "image/png";
+  const maxBytes = Math.min(config.maxBytes ?? ATTACHMENT_MAX_BYTES, ATTACHMENT_MAX_BYTES);
+  const viewport = readViewport();
+  const rect = resolveCaptureRect(config, viewport);
+  const pixelRatio = Math.min(
+    Math.max(config.pixelRatio ?? window.devicePixelRatio ?? 1, 1),
+    2
+  );
+  const ignoreSelectors = buildIgnoreSelectors(config);
+  const canvas = await html2canvas(rootElement, {
+    useCORS: true,
+    allowTaint: false,
+    backgroundColor: null,
+    logging: false,
+    ignoreElements,
+    onclone: (clonedDocument) => {
+      maskScreenshotCaptureDocument(
+        clonedDocument,
+        ignoreSelectors,
+        config.maskSelectors
+      );
+    },
+    removeContainer: true,
+    scale: pixelRatio,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+    width: rect.width,
+    height: rect.height,
+    windowWidth: viewport.width,
+    windowHeight: viewport.height,
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY
+  });
+  const output = await canvasToSizedBlob(
+    canvas,
+    imageType,
+    config.quality,
+    maxBytes
+  );
+  const filename = resolveFilename(config, context);
+  return {
+    blob: new Blob([output.blob], { type: output.blob.type || imageType }),
+    filename: replaceFilenameExtension(
+      filename,
+      MIME_TO_EXTENSION[output.blob.type || imageType] ?? MIME_TO_EXTENSION[imageType]
+    ),
+    mimeType: output.blob.type || imageType,
+    byteSize: output.blob.size,
+    rect,
+    scaled: output.scaled
+  };
+}
+function resetHtml2CanvasCache() {
+  html2canvasPromise = null;
+}
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+  clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
+  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
+}
+function canUseBrowserCapture() {
+  return typeof window !== "undefined" && typeof document !== "undefined" && typeof Blob !== "undefined" && typeof document.createElement === "function";
+}
+function readViewport() {
+  return {
+    width: Math.max(
+      1,
+      Math.round(window.innerWidth || document.documentElement.clientWidth || 1)
+    ),
+    height: Math.max(
+      1,
+      Math.round(window.innerHeight || document.documentElement.clientHeight || 1)
+    )
+  };
+}
+function resolveCaptureRect(config, viewport) {
+  const configuredRect = typeof config.rect === "function" ? config.rect() : config.rect;
+  const source = configuredRect && configuredRect.width > 0 && configuredRect.height > 0 ? configuredRect : { top: 0, left: 0, width: viewport.width, height: viewport.height };
+  const left = clamp(Math.round(source.left), 0, viewport.width - 1);
+  const top = clamp(Math.round(source.top), 0, viewport.height - 1);
+  const right = clamp(
+    Math.round(source.left + source.width),
+    left + 1,
+    viewport.width
+  );
+  const bottom = clamp(
+    Math.round(source.top + source.height),
+    top + 1,
+    viewport.height
+  );
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function maskCaptureElement(element) {
+  if (element instanceof HTMLInputElement) {
+    element.value = "";
+    element.setAttribute("value", "");
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLTextAreaElement) {
+    element.value = "";
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLSelectElement) {
+    element.querySelectorAll("option").forEach((option) => {
+      option.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    });
+  } else {
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+  }
+  if (element instanceof HTMLElement) {
+    element.setAttribute("aria-label", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+    element.style.color = "#1d1914";
+    element.style.backgroundColor = "#d8d0c1";
+  }
+}
+function redactSensitiveTextNodes(root) {
+  if (!root) {
+    return;
+  }
+  const ownerDocument = root.ownerDocument ?? document;
+  const walker = ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
+  while (node) {
+    if (node.textContent) {
+      node.textContent = redactSensitiveText(node.textContent);
+    }
+    node = walker.nextNode();
+  }
+}
+function redactSensitiveText(value) {
+  return value.replace(
+    /\b((?:access|refresh|id)_token)=([^&#\s]+)/gi,
+    (_, key, token) => `${key}=${redactValue(token)}`
+  ).replace(/\bBearer\s+[A-Za-z0-9._~+/=-]+/gi, "Bearer [redacted]").replace(/\b[ps]k_(?:live|test)_[A-Za-z0-9_=-]+/g, SCREENSHOT_CAPTURE_REDACTION_TEXT).replace(/\b(?:token|secret|password|signature)[_-]?[A-Za-z0-9._~+/=-]{8,}/gi, SCREENSHOT_CAPTURE_REDACTION_TEXT);
+}
+function redactValue(value) {
+  return value ? SCREENSHOT_CAPTURE_REDACTION_TEXT : value;
+}
+function scaleCanvas(source, ratio) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(source.width * ratio));
+  canvas.height = Math.max(1, Math.round(source.height * ratio));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D context is unavailable");
+  }
+  context.drawImage(source, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function replaceFilenameExtension(filename, extension) {
+  return filename.replace(/\.(png|jpe?g|webp)$/i, `.${extension}`);
+}
+export {
+  ATTACHMENT_MAX_BYTES,
+  SCREENSHOT_CAPTURE_REDACTION_TEXT,
+  captureScreenshot,
+  maskScreenshotCaptureDocument,
+  resetHtml2CanvasCache
+};