@getdevteam/analytics-web 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -3,6 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +20,684 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/feedback/capture.ts
+async function captureViewport(exclude, pixelRatio) {
+  return (0, import_html_to_image.toCanvas)(document.documentElement, {
+    filter: (node) => node !== exclude,
+    pixelRatio,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    style: {
+      transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`
+    }
+  });
+}
+var import_html_to_image;
+var init_capture = __esm({
+  "src/feedback/capture.ts"() {
+    "use strict";
+    import_html_to_image = require("html-to-image");
+  }
+});
+
+// src/feedback/exportImage.ts
+function drawStrokes(ctx, strokes) {
+  for (const stroke of strokes) {
+    const [first, ...rest] = stroke.points;
+    if (!first) continue;
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(first.x, first.y);
+    if (rest.length === 0) ctx.lineTo(first.x, first.y);
+    for (const point of rest) ctx.lineTo(point.x, point.y);
+    ctx.stroke();
+  }
+}
+async function exportAnnotatedImage(source, strokes, options) {
+  try {
+    const composed = compose(source, strokes);
+    if (!composed) return null;
+    const png = await encode(composed, "image/png");
+    if (png && png.size <= options.maxBytes) {
+      return { base64: await blobToBase64(png), contentType: "image/png" };
+    }
+    let canvas = composed;
+    let jpeg = await encode(canvas, "image/jpeg", JPEG_QUALITY);
+    while (jpeg && jpeg.size > options.maxBytes && Math.min(canvas.width, canvas.height) * DOWNSCALE_FACTOR >= MIN_EXPORT_DIMENSION) {
+      const smaller = downscale(canvas, DOWNSCALE_FACTOR);
+      if (!smaller) break;
+      canvas = smaller;
+      jpeg = await encode(canvas, "image/jpeg", JPEG_QUALITY);
+    }
+    if (jpeg && jpeg.size <= options.maxBytes) {
+      return { base64: await blobToBase64(jpeg), contentType: "image/jpeg" };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function compose(source, strokes) {
+  const canvas = document.createElement("canvas");
+  canvas.width = source.width;
+  canvas.height = source.height;
+  const ctx = get2dContext(canvas);
+  if (!ctx || canvas.width === 0 || canvas.height === 0) return null;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(source, 0, 0);
+  drawStrokes(ctx, strokes);
+  return canvas;
+}
+function downscale(source, factor) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(source.width * factor));
+  canvas.height = Math.max(1, Math.round(source.height * factor));
+  const ctx = get2dContext(canvas);
+  if (!ctx) return null;
+  ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function get2dContext(canvas) {
+  try {
+    return canvas.getContext("2d");
+  } catch {
+    return null;
+  }
+}
+function encode(canvas, type, quality) {
+  return new Promise((resolve) => {
+    try {
+      canvas.toBlob((blob) => resolve(blob), type, quality);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+async function blobToBase64(blob) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let binary = "";
+  const chunkSize = 32768;
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+  }
+  return btoa(binary);
+}
+var JPEG_QUALITY, DOWNSCALE_FACTOR, MIN_EXPORT_DIMENSION;
+var init_exportImage = __esm({
+  "src/feedback/exportImage.ts"() {
+    "use strict";
+    JPEG_QUALITY = 0.85;
+    DOWNSCALE_FACTOR = 0.7;
+    MIN_EXPORT_DIMENSION = 200;
+  }
+});
+
+// src/feedback/strokes.ts
+function createStrokeStore() {
+  const strokes = [];
+  let active;
+  return {
+    begin(color, width, point) {
+      if (active) return;
+      active = { points: [point], color, width };
+      strokes.push(active);
+    },
+    extend(point) {
+      active?.points.push(point);
+    },
+    end() {
+      active = void 0;
+    },
+    undo() {
+      if (active) return;
+      strokes.pop();
+    },
+    clear() {
+      if (active) return;
+      strokes.length = 0;
+    },
+    list: () => strokes,
+    isDrawing: () => active !== void 0
+  };
+}
+function mapToImagePoint(clientX, clientY, rect, imageWidth, imageHeight) {
+  const scaleX = rect.width > 0 && imageWidth > 0 ? imageWidth / rect.width : 1;
+  const scaleY = rect.height > 0 && imageHeight > 0 ? imageHeight / rect.height : 1;
+  return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY };
+}
+var init_strokes = __esm({
+  "src/feedback/strokes.ts"() {
+    "use strict";
+  }
+});
+
+// src/feedback/index.ts
+var feedback_exports = {};
+__export(feedback_exports, {
+  createStrokeStore: () => createStrokeStore,
+  exportAnnotatedImage: () => exportAnnotatedImage,
+  mapToImagePoint: () => mapToImagePoint,
+  mountFeedback: () => mountFeedback
+});
+function mountFeedback(config, deps = defaultDeps) {
+  const options = config.options;
+  const colors = options.colors && options.colors.length > 0 ? options.colors : DEFAULT_COLORS;
+  const accent = options.accentColor ?? DEFAULT_ACCENT;
+  const pixelRatio = options.pixelRatio ?? Math.min(typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1, 2);
+  let destroyed = false;
+  let overlayOpen = false;
+  let overlaySession = 0;
+  let capturing = false;
+  let sending = false;
+  let draftFeedbackId = (0, import_analytics_core2.uuidV7)();
+  let sourceCanvas;
+  let activeColor = colors[0] ?? DEFAULT_COLORS[0];
+  let penWidth = PEN_WIDTH;
+  let previousBodyOverflow;
+  let closeTimer;
+  let drawContext;
+  const strokes = createStrokeStore();
+  const report = (error2) => {
+    try {
+      config.onError(error2);
+    } catch {
+    }
+  };
+  const safely = (fn) => {
+    try {
+      fn();
+    } catch (error2) {
+      report(error2);
+    }
+  };
+  const host = document.createElement("div");
+  host.setAttribute("data-devteam-feedback", "");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = buildStyles(options, accent);
+  const container = element("div", "container");
+  const fab = element("button", "fab");
+  fab.type = "button";
+  fab.textContent = options.buttonLabel ?? "Feedback";
+  const overlay = element("div", "overlay");
+  overlay.hidden = true;
+  const backdrop = element("div", "backdrop");
+  const panel = element("div", "panel");
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  const header = element("div", "header");
+  const title = element("div", "title");
+  title.textContent = options.title ?? "Send feedback";
+  const closeButton = element("button", "close");
+  closeButton.type = "button";
+  closeButton.setAttribute("aria-label", "Close");
+  closeButton.textContent = "\xD7";
+  header.append(title, closeButton);
+  const preview = element("div", "preview");
+  const drawCanvas = document.createElement("canvas");
+  drawCanvas.className = "draw";
+  preview.appendChild(drawCanvas);
+  const tools = element("div", "tools");
+  const swatches = colors.map((color) => {
+    const swatch = element("button", "swatch");
+    swatch.type = "button";
+    swatch.style.background = color;
+    swatch.setAttribute("aria-label", `Pen color ${color}`);
+    swatch.addEventListener("click", () => safely(() => selectColor(color)));
+    tools.appendChild(swatch);
+    return { color, swatch };
+  });
+  const undoButton = element("button", "tool undo");
+  undoButton.type = "button";
+  undoButton.textContent = "Undo";
+  const clearButton = element("button", "tool clear");
+  clearButton.type = "button";
+  clearButton.textContent = "Clear";
+  tools.append(undoButton, clearButton);
+  const comment = document.createElement("textarea");
+  comment.className = "comment";
+  comment.placeholder = options.commentPlaceholder ?? "What went wrong, or what could be better?";
+  comment.maxLength = MAX_TEXT_LENGTH;
+  const error = element("div", "error");
+  error.hidden = true;
+  const success = element("div", "success");
+  success.hidden = true;
+  success.textContent = options.successMessage ?? "Thanks for the feedback!";
+  const actions = element("div", "actions");
+  const cancelButton = element("button", "cancel");
+  cancelButton.type = "button";
+  cancelButton.textContent = "Cancel";
+  const submitButton = element("button", "submit");
+  submitButton.type = "button";
+  submitButton.textContent = options.submitLabel ?? "Send";
+  actions.append(cancelButton, submitButton);
+  panel.append(header, preview, tools, comment, error, success, actions);
+  overlay.append(backdrop, panel);
+  container.append(fab, overlay);
+  shadow.append(style, container);
+  if (document.body) {
+    document.body.appendChild(host);
+  } else {
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        if (!destroyed) document.body?.appendChild(host);
+      },
+      { once: true }
+    );
+  }
+  function selectColor(color) {
+    activeColor = color;
+    for (const entry of swatches) {
+      entry.swatch.classList.toggle("active", entry.color === color);
+    }
+  }
+  selectColor(activeColor);
+  function context2d() {
+    if (drawContext === void 0) {
+      try {
+        drawContext = drawCanvas.getContext("2d");
+      } catch {
+        drawContext = null;
+      }
+    }
+    return drawContext;
+  }
+  function repaint() {
+    const ctx = context2d();
+    if (!ctx) return;
+    ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
+    drawStrokes(ctx, strokes.list());
+  }
+  function pointFromEvent(event) {
+    const { clientX, clientY } = event;
+    if (typeof clientX !== "number" || typeof clientY !== "number") return void 0;
+    const rect = drawCanvas.getBoundingClientRect();
+    return mapToImagePoint(clientX, clientY, rect, drawCanvas.width, drawCanvas.height);
+  }
+  function withPointerCapture(event, action) {
+    const pointerId = event.pointerId;
+    if (typeof pointerId !== "number") return;
+    const method = action === "set" ? drawCanvas.setPointerCapture : drawCanvas.releasePointerCapture;
+    if (typeof method !== "function") return;
+    try {
+      method.call(drawCanvas, pointerId);
+    } catch {
+    }
+  }
+  const onPointerDown = (event) => safely(() => {
+    if (!sourceCanvas || sending) return;
+    const point = pointFromEvent(event);
+    if (!point) return;
+    if (typeof event.preventDefault === "function") event.preventDefault();
+    withPointerCapture(event, "set");
+    strokes.begin(activeColor, penWidth, point);
+    repaint();
+  });
+  const onPointerMove = (event) => safely(() => {
+    if (!strokes.isDrawing()) return;
+    const point = pointFromEvent(event);
+    if (!point) return;
+    strokes.extend(point);
+    repaint();
+  });
+  const onPointerEnd = (event) => safely(() => {
+    withPointerCapture(event, "release");
+    strokes.end();
+  });
+  drawCanvas.addEventListener("pointerdown", onPointerDown);
+  drawCanvas.addEventListener("pointermove", onPointerMove);
+  drawCanvas.addEventListener("pointerup", onPointerEnd);
+  drawCanvas.addEventListener("pointercancel", onPointerEnd);
+  drawCanvas.addEventListener("pointerleave", onPointerEnd);
+  shadow.addEventListener("pointerup", onPointerEnd);
+  undoButton.addEventListener(
+    "click",
+    () => safely(() => {
+      strokes.undo();
+      repaint();
+    })
+  );
+  clearButton.addEventListener(
+    "click",
+    () => safely(() => {
+      strokes.clear();
+      repaint();
+    })
+  );
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") safely(close);
+  };
+  function lockScroll() {
+    if (previousBodyOverflow !== void 0) return;
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  function unlockScroll() {
+    if (previousBodyOverflow === void 0) return;
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = void 0;
+  }
+  function setError(message) {
+    error.hidden = message === void 0;
+    error.textContent = message ?? "";
+  }
+  function setFormVisible(visible) {
+    const hasPreview = sourceCanvas !== void 0;
+    preview.hidden = !visible || !hasPreview;
+    tools.hidden = !visible || !hasPreview;
+    comment.hidden = !visible;
+    actions.hidden = !visible;
+  }
+  function showOverlay(canvas) {
+    overlaySession += 1;
+    draftFeedbackId = (0, import_analytics_core2.uuidV7)();
+    sourceCanvas = canvas;
+    strokes.end();
+    strokes.clear();
+    comment.value = "";
+    setError(void 0);
+    success.hidden = true;
+    submitButton.disabled = false;
+    if (canvas) {
+      canvas.classList.add("shot");
+      preview.insertBefore(canvas, drawCanvas);
+      drawCanvas.width = canvas.width;
+      drawCanvas.height = canvas.height;
+      penWidth = PEN_WIDTH * (pixelRatio > 0 ? pixelRatio : 1);
+      repaint();
+    }
+    selectColor(colors[0] ?? DEFAULT_COLORS[0]);
+    setFormVisible(true);
+    overlay.hidden = false;
+    overlayOpen = true;
+    lockScroll();
+    document.addEventListener("keydown", onKeyDown);
+  }
+  function close() {
+    if (!overlayOpen) return;
+    overlaySession += 1;
+    overlayOpen = false;
+    overlay.hidden = true;
+    document.removeEventListener("keydown", onKeyDown);
+    unlockScroll();
+    if (closeTimer !== void 0) {
+      clearTimeout(closeTimer);
+      closeTimer = void 0;
+    }
+    sending = false;
+    if (sourceCanvas) {
+      sourceCanvas.remove();
+      sourceCanvas = void 0;
+    }
+    strokes.end();
+    strokes.clear();
+  }
+  function open() {
+    if (destroyed || overlayOpen || capturing) return;
+    capturing = true;
+    void Promise.resolve().then(() => deps.capture(host, pixelRatio)).then(
+      (canvas) => {
+        capturing = false;
+        if (destroyed) return;
+        showOverlay(canvas);
+      },
+      (captureError) => {
+        capturing = false;
+        if (destroyed) return;
+        report(captureError);
+        showOverlay(void 0);
+      }
+    );
+  }
+  function buildBody(text, screenshot) {
+    const body = {
+      feedback_id: draftFeedbackId,
+      text: text.slice(0, MAX_TEXT_LENGTH)
+    };
+    if (screenshot) {
+      body.screenshot = screenshot.base64;
+      body.screenshot_content_type = screenshot.contentType;
+    }
+    const distinctId = config.getDistinctId();
+    if (distinctId) body.distinct_id = distinctId;
+    const sessionId = config.getSessionId();
+    if (sessionId) body.session_id = sessionId;
+    if (typeof location !== "undefined" && location.href) {
+      body.page_url = location.href.slice(0, MAX_PAGE_URL_LENGTH);
+    }
+    body.context = config.getContext();
+    return JSON.stringify(body);
+  }
+  async function submit() {
+    if (sending || !overlayOpen) return;
+    const text = comment.value.trim();
+    if (text.length === 0) {
+      setError("Please add a short comment before sending.");
+      return;
+    }
+    const session = overlaySession;
+    const sameSession = () => !destroyed && overlayOpen && overlaySession === session;
+    sending = true;
+    submitButton.disabled = true;
+    setError(void 0);
+    try {
+      let screenshot = null;
+      if (sourceCanvas) {
+        screenshot = await deps.exportAnnotated(sourceCanvas, strokes.list(), {
+          maxBytes: MAX_SCREENSHOT_BYTES
+        });
+      }
+      if (!config.fetch) throw new Error("fetch is not available in this environment");
+      const response = await config.fetch(config.url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-DevTeam-Key": config.key },
+        body: buildBody(text, screenshot)
+      });
+      if (!sameSession()) return;
+      if (response.ok) {
+        setFormVisible(false);
+        success.hidden = false;
+        closeTimer = setTimeout(() => safely(close), SUCCESS_CLOSE_DELAY_MS);
+      } else {
+        setError("Could not send feedback. Please try again.");
+      }
+    } catch (submitError) {
+      report(submitError);
+      if (sameSession()) setError("Could not send feedback. Please try again.");
+    } finally {
+      if (overlaySession === session) {
+        sending = false;
+        submitButton.disabled = false;
+      }
+    }
+  }
+  fab.addEventListener("click", () => safely(open));
+  closeButton.addEventListener("click", () => safely(close));
+  cancelButton.addEventListener("click", () => safely(close));
+  backdrop.addEventListener("click", () => safely(close));
+  submitButton.addEventListener("click", () => safely(() => void submit()));
+  return {
+    open: () => safely(open),
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      safely(() => {
+        close();
+        document.removeEventListener("keydown", onKeyDown);
+        host.remove();
+      });
+    }
+  };
+}
+function element(tag, className) {
+  const node = document.createElement(tag);
+  node.className = className;
+  return node;
+}
+function buildStyles(options, accent) {
+  const zIndex = options.zIndex ?? DEFAULT_Z_INDEX;
+  const side = options.position === "bottom-left" ? "left" : "right";
+  return `
+:host { all: initial; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.container {
+  position: fixed;
+  inset: 0;
+  z-index: ${zIndex};
+  pointer-events: none;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2933;
+}
+.fab {
+  position: absolute;
+  bottom: 20px;
+  ${side}: 20px;
+  pointer-events: auto;
+  border: none;
+  border-radius: 999px;
+  padding: 10px 18px;
+  background: ${accent};
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+.overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+}
+.panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(560px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  overflow: auto;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+}
+.header { display: flex; align-items: center; justify-content: space-between; }
+.title { font-size: 16px; font-weight: 600; }
+.close {
+  border: none;
+  background: none;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #52606d;
+  padding: 4px 8px;
+}
+.preview {
+  position: relative;
+  border: 1px solid #d3dce6;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f7fa;
+}
+.preview .shot { display: block; width: 100%; height: auto; }
+.preview .draw {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  touch-action: none;
+}
+.tools { display: flex; align-items: center; gap: 8px; }
+.swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+.swatch.active { border-color: #1f2933; }
+.tool {
+  border: 1px solid #d3dce6;
+  background: #fff;
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.comment {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  border: 1px solid #d3dce6;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font: inherit;
+}
+.error { color: #b91c1c; font-size: 13px; }
+.success { color: #15803d; font-size: 14px; font-weight: 600; }
+.actions { display: flex; justify-content: flex-end; gap: 8px; }
+.cancel {
+  border: 1px solid #d3dce6;
+  background: #fff;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.submit {
+  border: none;
+  background: ${accent};
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.submit:disabled { opacity: 0.6; cursor: default; }
+`;
+}
+var import_analytics_core2, DEFAULT_COLORS, DEFAULT_ACCENT, DEFAULT_Z_INDEX, PEN_WIDTH, MAX_SCREENSHOT_BYTES, MAX_TEXT_LENGTH, MAX_PAGE_URL_LENGTH, SUCCESS_CLOSE_DELAY_MS, defaultDeps;
+var init_feedback = __esm({
+  "src/feedback/index.ts"() {
+    "use strict";
+    import_analytics_core2 = require("@getdevteam/analytics-core");
+    init_capture();
+    init_exportImage();
+    init_strokes();
+    init_strokes();
+    init_exportImage();
+    DEFAULT_COLORS = ["#f44336", "#4caf50", "#2196f3", "#ffeb3b"];
+    DEFAULT_ACCENT = "#5b9cf5";
+    DEFAULT_Z_INDEX = 2147483e3;
+    PEN_WIDTH = 5;
+    MAX_SCREENSHOT_BYTES = 5 * 1024 * 1024;
+    MAX_TEXT_LENGTH = 1e4;
+    MAX_PAGE_URL_LENGTH = 2048;
+    SUCCESS_CLOSE_DELAY_MS = 1600;
+    defaultDeps = {
+      capture: captureViewport,
+      exportAnnotated: exportAnnotatedImage
+    };
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -32,7 +713,7 @@ __export(index_exports, {
   osFromUserAgent: () => osFromUserAgent
 });
 module.exports = __toCommonJS(index_exports);
-var import_analytics_core2 = require("@getdevteam/analytics-core");
+var import_analytics_core3 = require("@getdevteam/analytics-core");
 
 // src/context.ts
 function browserFromUserAgent(ua) {
@@ -161,30 +842,58 @@ function createBrowserStorage(resolve = resolveLocalStorage) {
 
 // src/index.ts
 var WEB_SDK_NAME = "@getdevteam/analytics-web";
-var WEB_SDK_VERSION = "0.1.0";
+var WEB_SDK_VERSION = "0.3.0";
+var KEEPALIVE_MAX_BODY_BYTES = 64 * 1024;
+var textEncoder = typeof TextEncoder !== "undefined" ? new TextEncoder() : void 0;
+function byteLength(value) {
+  return textEncoder ? textEncoder.encode(value).length : (0, import_analytics_core3.utf8ByteLength)(value);
+}
 function createAnalytics(config) {
   let finalFlush = false;
   const baseFetch = config.fetch ?? defaultBrowserFetch();
-  const client = (0, import_analytics_core2.createClient)({
+  const reportError = (error) => {
+    try {
+      config.onError?.(error);
+    } catch {
+    }
+  };
+  const client = (0, import_analytics_core3.createClient)({
     ...config,
     storage: config.storage ?? createBrowserStorage(),
     fetch: (url, init) => {
-      if (finalFlush) return sendOnHide(url, init, config.key, baseFetch);
+      if (finalFlush) return sendOnHide(url, init, baseFetch);
       if (baseFetch) return baseFetch(url, init);
       return Promise.reject(new Error("fetch is not available in this environment"));
     }
   });
-  client.setContext({
+  const webContext = {
     sdk_name: WEB_SDK_NAME,
     sdk_version: WEB_SDK_VERSION,
     ...collectWebContext(),
     ...config.context
-  });
+  };
+  client.setContext(webContext);
+  let currentContext = webContext;
+  const setContext = (partial) => {
+    client.setContext(partial);
+    try {
+      const next = { ...currentContext };
+      for (const [key, value] of Object.entries(partial)) {
+        if (value === void 0) {
+          delete next[key];
+        } else {
+          next[key] = value;
+        }
+      }
+      currentContext = next;
+    } catch {
+    }
+  };
   const teardowns = [];
   if (typeof window !== "undefined") {
     const flushOnHide = () => {
       finalFlush = true;
-      void client.flush().finally(() => {
+      void client.flush({ keepaliveConstrained: true }).finally(() => {
         finalFlush = false;
       });
     };
@@ -219,9 +928,40 @@ function createAnalytics(config) {
       teardowns.push(installPageviewTracking(client));
     }
   }
+  let feedback;
+  let feedbackDisposed = false;
+  if (config.allowUserFeedback === true && typeof window !== "undefined" && typeof document !== "undefined" && typeof config.host === "string") {
+    const feedbackUrl = `${config.host.replace(/\/+$/, "")}/v1/ingest/feedback`;
+    void Promise.resolve().then(() => (init_feedback(), feedback_exports)).then((module2) => {
+      if (feedbackDisposed) return;
+      feedback = module2.mountFeedback({
+        url: feedbackUrl,
+        key: config.key,
+        fetch: baseFetch,
+        getDistinctId: () => client.getDistinctId(),
+        getSessionId: () => client.getSessionId(),
+        getContext: () => currentContext,
+        options: config.feedback ?? {},
+        onError: reportError
+      });
+      teardowns.push(() => {
+        feedback?.destroy();
+        feedback = void 0;
+      });
+    }).catch(reportError);
+  }
   return {
     ...client,
+    setContext,
+    showFeedback: () => {
+      try {
+        feedback?.open();
+      } catch (error) {
+        reportError(error);
+      }
+    },
     shutdown: async () => {
+      feedbackDisposed = true;
       for (const teardown of teardowns.splice(0)) {
         teardown();
       }
@@ -233,18 +973,13 @@ function defaultBrowserFetch() {
   if (typeof fetch !== "function") return void 0;
   return (url, init) => fetch(url, init);
 }
-function sendOnHide(url, init, key, baseFetch) {
+function sendOnHide(url, init, baseFetch) {
   if (baseFetch) {
+    if (byteLength(init.body) > KEEPALIVE_MAX_BODY_BYTES) {
+      return baseFetch(url, init);
+    }
     return baseFetch(url, { ...init, keepalive: true });
   }
-  if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
-    const beaconUrl = `${url}${url.includes("?") ? "&" : "?"}key=${encodeURIComponent(key)}`;
-    const delivered = navigator.sendBeacon(
-      beaconUrl,
-      new Blob([init.body], { type: "application/json" })
-    );
-    return Promise.resolve({ ok: delivered, status: delivered ? 202 : 503 });
-  }
   return Promise.reject(new Error("no transport available for final flush"));
 }
 // Annotate the CommonJS export names for ESM import in node: