feedbackkit-web 1.0.37

package/dist/feedbackkit.js

@@ -0,0 +1,2075 @@
+async function captureViewport(options = {}) {
+  const pixelRatio = Math.min(window.devicePixelRatio || 1, options.maxPixelRatio ?? 2);
+  if (options.mode === "display") {
+    try {
+      const display = await captureDisplay(pixelRatio);
+      if (display) return display;
+    } catch {
+    }
+  }
+  return captureDom(pixelRatio, options.exclude);
+}
+const PIN_ATTR = "data-feedbackkit-pin";
+async function captureDom(pixelRatio, exclude) {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const pins = pinFixedAndSticky(exclude);
+  const root = document.documentElement;
+  const bodyBackground = getComputedStyle(document.body).backgroundColor;
+  const rootBackground = getComputedStyle(root).backgroundColor;
+  const background = isTransparent(rootBackground) ? isTransparent(bodyBackground) ? "#ffffff" : bodyBackground : rootBackground;
+  try {
+    const { domToCanvas } = await import("modern-screenshot");
+    const canvas = await domToCanvas(root, {
+      width,
+      height,
+      scale: pixelRatio,
+      backgroundColor: background,
+      filter: exclude ? (node) => !exclude(node) : null,
+      features: { restoreScrollPosition: true },
+      timeout: 8e3,
+      onCloneEachNode: (cloned) => {
+        if (!(cloned instanceof HTMLElement)) return;
+        if (cloned.tagName === "BODY" && !cloned.style.transform) cloned.style.transform = "translate(0px, 0px)";
+        const id = cloned.getAttribute(PIN_ATTR);
+        if (id === null) return;
+        cloned.removeAttribute(PIN_ATTR);
+        const pin = pins.info.get(id);
+        if (!pin) return;
+        const s = cloned.style;
+        if (pin.kind === "sticky") {
+          s.setProperty("position", "relative", "important");
+          s.setProperty("inset", "auto", "important");
+          s.setProperty("top", `${pin.top}px`, "important");
+          s.setProperty("left", `${pin.left}px`, "important");
+        } else {
+          s.setProperty("position", "fixed", "important");
+          s.setProperty("inset", "auto", "important");
+          s.setProperty("top", `${pin.top}px`, "important");
+          s.setProperty("left", `${pin.left}px`, "important");
+          s.setProperty("width", `${pin.width}px`, "important");
+          s.setProperty("height", `${pin.height}px`, "important");
+          s.setProperty("margin", "0", "important");
+          s.setProperty("box-sizing", "border-box", "important");
+          s.setProperty("transform", "none", "important");
+          s.setProperty("translate", "none", "important");
+        }
+      }
+    });
+    return { canvas, width, height, pixelRatio };
+  } finally {
+    pins.cleanup();
+  }
+}
+function pinFixedAndSticky(exclude) {
+  const info = /* @__PURE__ */ new Map();
+  const tagged = [];
+  const body = document.body;
+  if (!body) return { info, cleanup: () => {
+  } };
+  const walker = document.createTreeWalker(body, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => exclude?.(node) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+  });
+  let counter = 0;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const el2 = node;
+    const style = getComputedStyle(el2);
+    if (style.position !== "fixed" && style.position !== "sticky") continue;
+    if (style.display === "none") continue;
+    const rect = el2.getBoundingClientRect();
+    const id = String(counter++);
+    if (style.position === "sticky") {
+      const previous = el2.style.getPropertyValue("position");
+      const previousPriority = el2.style.getPropertyPriority("position");
+      el2.style.setProperty("position", "static", "important");
+      const natural = el2.getBoundingClientRect();
+      el2.style.setProperty("position", previous, previousPriority);
+      if (!previous) el2.style.removeProperty("position");
+      const dy = rect.top - natural.top;
+      const dx = rect.left - natural.left;
+      if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;
+      info.set(id, { kind: "sticky", top: dy, left: dx, width: rect.width, height: rect.height });
+    } else {
+      const block = containingBlockInClone(el2);
+      const blockRect = block.getBoundingClientRect();
+      info.set(id, {
+        kind: "fixed",
+        top: rect.top - (blockRect.top + block.clientTop),
+        left: rect.left - (blockRect.left + block.clientLeft),
+        width: rect.width,
+        height: rect.height
+      });
+    }
+    el2.setAttribute(PIN_ATTR, id);
+    tagged.push(el2);
+  }
+  return {
+    info,
+    cleanup: () => {
+      for (const el2 of tagged) el2.removeAttribute(PIN_ATTR);
+    }
+  };
+}
+function containingBlockInClone(el2) {
+  for (let node = el2.parentElement; node && node !== document.body; node = node.parentElement) {
+    const s = getComputedStyle(node);
+    if (s.transform !== "none" || s.filter !== "none" || s.perspective !== "none" || s.backdropFilter !== void 0 && s.backdropFilter !== "none" || /paint|layout|strict|content/.test(s.contain) || /transform|filter|perspective/.test(s.willChange)) {
+      return node;
+    }
+    const parent = node.parentElement;
+    if (parent && (parent.scrollTop !== 0 || parent.scrollLeft !== 0)) return node;
+  }
+  return document.body;
+}
+function isTransparent(color) {
+  return !color || color === "transparent" || /rgba\(\s*0,\s*0,\s*0,\s*0\s*\)/.test(color);
+}
+async function captureDisplay(pixelRatio) {
+  if (!navigator.mediaDevices?.getDisplayMedia) return null;
+  const options = {
+    video: { displaySurface: "browser" },
+    audio: false,
+    preferCurrentTab: true,
+    selfBrowserSurface: "include"
+  };
+  const stream = await navigator.mediaDevices.getDisplayMedia(options);
+  try {
+    const video = document.createElement("video");
+    video.muted = true;
+    video.playsInline = true;
+    video.srcObject = stream;
+    await video.play();
+    await new Promise((r) => setTimeout(r, 250));
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(width * pixelRatio);
+    canvas.height = Math.round(height * pixelRatio);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return { canvas, width, height, pixelRatio };
+  } finally {
+    for (const track of stream.getTracks()) track.stop();
+  }
+}
+function canvasToPngBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("Failed to encode screenshot")), "image/png");
+  });
+}
+function parseUserAgent(ua) {
+  let osName = "Unknown";
+  let osVersion = "";
+  let m;
+  if (m = ua.match(/(?:iPhone|iPad|iPod).*?OS (\d+[_.\d]*)/)) {
+    osName = /iPad/.test(ua) ? "iPadOS" : "iOS";
+    osVersion = m[1].replace(/_/g, ".");
+  } else if (m = ua.match(/Android (\d+(?:\.\d+)*)/)) {
+    osName = "Android";
+    osVersion = m[1];
+  } else if (m = ua.match(/Windows NT (\d+\.\d+)/)) {
+    osName = "Windows";
+    osVersion = { "10.0": "10", "6.3": "8.1", "6.2": "8", "6.1": "7" }[m[1]] ?? m[1];
+  } else if (m = ua.match(/Mac OS X (\d+[_.\d]*)/)) {
+    osName = "macOS";
+    osVersion = m[1].replace(/_/g, ".");
+  } else if (/CrOS/.test(ua)) {
+    osName = "ChromeOS";
+  } else if (/Linux/.test(ua)) {
+    osName = "Linux";
+  }
+  let browserName = "Unknown";
+  let browserVersion = "";
+  const browsers = [
+    ["Edge", /Edg(?:e|A|iOS)?\/([\d.]+)/],
+    ["Opera", /(?:OPR|Opera)\/([\d.]+)/],
+    ["Samsung Internet", /SamsungBrowser\/([\d.]+)/],
+    ["Firefox", /(?:Firefox|FxiOS)\/([\d.]+)/],
+    ["Chrome", /(?:Chrome|CriOS)\/([\d.]+)/],
+    ["Safari", /Version\/([\d.]+).*Safari/]
+  ];
+  for (const [name, re] of browsers) {
+    const match = ua.match(re);
+    if (match) {
+      browserName = name;
+      browserVersion = match[1];
+      break;
+    }
+  }
+  return { osName, osVersion, browserName, browserVersion };
+}
+const SENSITIVE_PARAM = /token|secret|password|passwd|pwd|auth|session|key|code|signature|sig|jwt|otp|email/i;
+function redactUrl(href) {
+  try {
+    const url = new URL(href);
+    for (const name of [...url.searchParams.keys()]) {
+      if (SENSITIVE_PARAM.test(name)) url.searchParams.set(name, "[redacted]");
+    }
+    if (url.hash && SENSITIVE_PARAM.test(url.hash)) url.hash = "#[redacted]";
+    return url.toString();
+  } catch {
+    return href;
+  }
+}
+async function clientHints() {
+  const uaData = navigator.userAgentData;
+  if (!uaData?.getHighEntropyValues) return null;
+  try {
+    return await Promise.race([
+      uaData.getHighEntropyValues(["platform", "platformVersion", "fullVersionList"]),
+      new Promise((resolve) => setTimeout(() => resolve(null), 300))
+    ]);
+  } catch {
+    return null;
+  }
+}
+function osFromHints(hints, fallback) {
+  const platform = hints.platform;
+  const version = hints.platformVersion ?? "";
+  if (!platform) return fallback;
+  if (platform === "macOS") return { osName: "macOS", osVersion: trimVersion(version) };
+  if (platform === "Windows") {
+    const major = parseInt(version, 10);
+    return { osName: "Windows", osVersion: major >= 13 ? "11" : major > 0 ? "10" : fallback.osVersion };
+  }
+  if (platform === "Android") return { osName: "Android", osVersion: trimVersion(version) || fallback.osVersion };
+  if (platform === "Chrome OS" || platform === "ChromeOS") return { osName: "ChromeOS", osVersion: trimVersion(version) };
+  return { osName: platform, osVersion: trimVersion(version) || fallback.osVersion };
+}
+function trimVersion(v) {
+  return v.replace(/(\.0)+$/, "");
+}
+function browserFromHints(hints) {
+  const list = hints.fullVersionList ?? [];
+  const known = ["Microsoft Edge", "Opera", "Google Chrome", "Chromium"];
+  for (const brand of known) {
+    const hit = list.find((b) => b.brand === brand);
+    if (hit) {
+      const name = brand === "Microsoft Edge" ? "Edge" : brand === "Google Chrome" ? "Chrome" : brand;
+      return { name, version: hit.version };
+    }
+  }
+  return null;
+}
+async function collectEnvironment(inputs = {}) {
+  const ua = navigator.userAgent;
+  const parsed = parseUserAgent(ua);
+  const hints = await clientHints();
+  const os = hints ? osFromHints(hints, parsed) : parsed;
+  const browser = hints && browserFromHints(hints) || { name: parsed.browserName, version: parsed.browserVersion };
+  const major = browser.version.split(".")[0];
+  return {
+    osName: os.osName,
+    osVersion: os.osVersion,
+    deviceModel: major ? `${browser.name} ${major}` : browser.name,
+    appVersion: inputs.appVersion ?? "",
+    appBuild: inputs.appBuild ?? "",
+    bundleIdentifier: location.host,
+    screenName: inputs.screenName || location.pathname || null,
+    locale: navigator.language || "en",
+    screenWidthPoints: window.innerWidth,
+    screenHeightPoints: window.innerHeight,
+    screenScale: window.devicePixelRatio || 1,
+    platform: "web",
+    pageUrl: redactUrl(location.href),
+    userAgent: ua,
+    browserName: browser.name,
+    browserVersion: browser.version
+  };
+}
+const MAX_MESSAGE_LENGTH = 1e3;
+function redactMessage(message) {
+  return message.replace(/\b(Bearer|Basic)\s+[A-Za-z0-9._~+/=-]+/gi, "$1 [redacted]").replace(/\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}/g, "[redacted-jwt]").replace(/https?:\/\/[^\s"'<>)]+/g, (url) => redactUrl(url)).replace(/("?(?:password|passwd|secret|token|api[_-]?key|access[_-]?token|refresh[_-]?token)"?\s*[:=]\s*)("[^"]*"|'[^']*'|[^\s,}&]+)/gi, "$1[redacted]");
+}
+function stringifyArg(arg) {
+  if (typeof arg === "string") return arg;
+  if (arg instanceof Error) return arg.stack || `${arg.name}: ${arg.message}`;
+  if (arg === void 0) return "undefined";
+  if (typeof arg === "function") return `[function ${arg.name || "anonymous"}]`;
+  if (typeof Element !== "undefined" && arg instanceof Element) return `<${arg.tagName.toLowerCase()}>`;
+  try {
+    const seen = /* @__PURE__ */ new WeakSet();
+    return JSON.stringify(arg, (_k, v) => {
+      if (typeof v === "object" && v !== null) {
+        if (seen.has(v)) return "[circular]";
+        seen.add(v);
+      }
+      return typeof v === "bigint" ? v.toString() : v;
+    });
+  } catch {
+    return String(arg);
+  }
+}
+class LogBuffer {
+  constructor(maxEntries = 50) {
+    this.maxEntries = maxEntries;
+    this.entries = [];
+  }
+  push(level, message) {
+    let text = redactMessage(message);
+    if (text.length > MAX_MESSAGE_LENGTH) text = `${text.slice(0, MAX_MESSAGE_LENGTH)}… [truncated]`;
+    this.entries.push({ level, message: text, timestamp: (/* @__PURE__ */ new Date()).toISOString() });
+    if (this.entries.length > this.maxEntries) this.entries.splice(0, this.entries.length - this.maxEntries);
+  }
+  snapshot() {
+    return this.entries.slice();
+  }
+  clear() {
+    this.entries = [];
+  }
+}
+function installLogCapture(options = {}) {
+  const buffer = new LogBuffer(options.maxEntries ?? 50);
+  const restores = [];
+  const methods = options.includeVerbose ? ["log", "info", "warn", "error", "debug"] : ["warn", "error"];
+  for (const method of methods) {
+    const original = console[method];
+    console[method] = function(...args) {
+      try {
+        buffer.push(method, args.map(stringifyArg).join(" "));
+      } catch {
+      }
+      return original.apply(this, args);
+    };
+    restores.push(() => {
+      console[method] = original;
+    });
+  }
+  const onError = (event) => {
+    const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
+    buffer.push("error", `Uncaught ${event.error ? stringifyArg(event.error) : event.message}${where}`);
+  };
+  const onRejection = (event) => {
+    buffer.push("error", `Unhandled promise rejection: ${stringifyArg(event.reason)}`);
+  };
+  window.addEventListener("error", onError);
+  window.addEventListener("unhandledrejection", onRejection);
+  restores.push(() => {
+    window.removeEventListener("error", onError);
+    window.removeEventListener("unhandledrejection", onRejection);
+  });
+  if (options.network !== false) {
+    restores.push(patchFetch(buffer), patchXHR(buffer));
+  }
+  return {
+    buffer,
+    uninstall: () => {
+      for (const restore of restores.reverse()) restore();
+    }
+  };
+}
+let ignoredUrlPrefix = null;
+function setIgnoredUrlPrefix(prefix) {
+  ignoredUrlPrefix = prefix;
+}
+function isIgnored(url) {
+  return !!ignoredUrlPrefix && url.startsWith(ignoredUrlPrefix);
+}
+function patchFetch(buffer) {
+  if (typeof window.fetch !== "function") return () => {
+  };
+  const original = window.fetch;
+  window.fetch = async function(input, init) {
+    const method = (init?.method || (input instanceof Request ? input.method : "GET")).toUpperCase();
+    const url = input instanceof Request ? input.url : String(input);
+    try {
+      const response = await original.call(window, input, init);
+      if (response.status >= 400 && !isIgnored(url)) {
+        buffer.push("network", `${method} ${url} → ${response.status} ${response.statusText}`.trim());
+      }
+      return response;
+    } catch (error) {
+      if (!isIgnored(url) && !(error instanceof DOMException && error.name === "AbortError")) {
+        buffer.push("network", `${method} ${url} → failed: ${stringifyArg(error)}`);
+      }
+      throw error;
+    }
+  };
+  return () => {
+    window.fetch = original;
+  };
+}
+function patchXHR(buffer) {
+  if (typeof XMLHttpRequest === "undefined") return () => {
+  };
+  const proto = XMLHttpRequest.prototype;
+  const originalOpen = proto.open;
+  const originalSend = proto.send;
+  const meta = /* @__PURE__ */ new WeakMap();
+  proto.open = function(method, url, ...rest) {
+    meta.set(this, { method: String(method).toUpperCase(), url: String(url) });
+    return originalOpen.call(this, method, url, ...rest);
+  };
+  proto.send = function(body) {
+    this.addEventListener("loadend", () => {
+      const info = meta.get(this);
+      if (!info || isIgnored(info.url)) return;
+      if (this.status === 0) buffer.push("network", `${info.method} ${info.url} → failed (network error)`);
+      else if (this.status >= 400) buffer.push("network", `${info.method} ${info.url} → ${this.status} ${this.statusText}`.trim());
+    });
+    return originalSend.call(this, body);
+  };
+  return () => {
+    proto.open = originalOpen;
+    proto.send = originalSend;
+  };
+}
+const DEFAULT_ENDPOINT = "https://gpucoladcyvijefdjudf.supabase.co/functions/v1/ingest-feedback";
+class FeedbackSubmissionError extends Error {
+  constructor(message, kind, status) {
+    super(message);
+    this.kind = kind;
+    this.status = status;
+    this.name = "FeedbackSubmissionError";
+  }
+}
+async function blobToBase64(blob) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let binary = "";
+  const chunk = 32768;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return btoa(binary);
+}
+async function encodePayload(report, projectKey) {
+  const payload = {
+    project_key: projectKey,
+    id: report.id,
+    created_at: report.createdAt.toISOString(),
+    text: report.text,
+    annotations: report.annotations,
+    environment: report.environment
+  };
+  if (report.screenshotRaw && report.screenshotAnnotated) {
+    const [raw, annotated] = await Promise.all([
+      blobToBase64(report.screenshotRaw),
+      blobToBase64(report.screenshotAnnotated)
+    ]);
+    payload.screenshot_raw_png_base64 = raw;
+    payload.screenshot_annotated_png_base64 = annotated;
+  }
+  if (report.attachment) {
+    payload.attachment_filename = report.attachment.filename;
+    payload.attachment_mime_type = report.attachment.mimeType;
+    payload.attachment_data_base64 = await blobToBase64(report.attachment.data);
+  }
+  if (report.products.length > 0) {
+    payload.product_keys = report.products.map((p) => p.key);
+    payload.products = report.products.map((p) => ({
+      key: p.key,
+      name: p.name,
+      description: p.description ?? "",
+      is_default: p.isDefault ?? false
+    }));
+  }
+  if (report.logs.length > 0) payload.logs = report.logs;
+  return payload;
+}
+async function submitReport(report, configuration2) {
+  if (!configuration2.projectKey) {
+    throw new FeedbackSubmissionError("FeedbackKit is not configured with a project key.", "not_configured");
+  }
+  const body = JSON.stringify(await encodePayload(report, configuration2.projectKey));
+  let response;
+  try {
+    response = await fetch(configuration2.endpoint ?? DEFAULT_ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body
+    });
+  } catch (error) {
+    throw new FeedbackSubmissionError(
+      `Network error: ${error instanceof Error ? error.message : String(error)}`,
+      "network"
+    );
+  }
+  if (!response.ok) {
+    let code = "";
+    try {
+      const json = await response.json();
+      code = json.error ?? "";
+    } catch {
+    }
+    const detail = code ? ` (${code})` : "";
+    const message = code === "origin_not_allowed" ? `This site (${location.origin}) isn't in the project's allowed origins.` : response.status === 401 || response.status === 403 ? `Server rejected the project key or origin (HTTP ${response.status})${detail}.` : response.status === 429 ? "Too many reports right now — please try again in a minute." : `Server returned HTTP ${response.status}${detail}.`;
+    throw new FeedbackSubmissionError(message, "server", response.status);
+  }
+}
+async function fetchProducts(configuration2) {
+  const url = new URL(configuration2.endpoint ?? DEFAULT_ENDPOINT);
+  url.searchParams.set("project_key", configuration2.projectKey);
+  const response = await fetch(url.toString());
+  if (!response.ok) throw new FeedbackSubmissionError(`HTTP ${response.status}`, "server", response.status);
+  const json = await response.json();
+  return (json.products ?? []).map((p) => ({
+    key: p.key,
+    name: p.name,
+    description: p.description ?? "",
+    isDefault: p.is_default ?? false
+  }));
+}
+const STROKE_WIDTH = 4;
+const HIT_TEST_TOLERANCE = 16;
+const HEAD_LENGTH = 18;
+const HEAD_ANGLE = Math.PI / 7;
+const BASE_FONT_SIZE = 16;
+const TEXT_PADDING = 8;
+const LINE_HEIGHT_RATIO = 1.19;
+const FALLBACK_COLOR = "#FF0000";
+function textFont(scale = 1) {
+  return `bold ${BASE_FONT_SIZE * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif`;
+}
+function readPoint(p) {
+  if (Array.isArray(p)) return { x: Number(p[0]) || 0, y: Number(p[1]) || 0 };
+  if (p && typeof p === "object") {
+    const o = p;
+    return { x: Number(o.x) || 0, y: Number(o.y) || 0 };
+  }
+  return { x: 0, y: 0 };
+}
+function denormalize(annotation, size) {
+  return (annotation.points ?? []).map((p) => {
+    const { x, y } = readPoint(p);
+    return { x: x * size.width, y: y * size.height };
+  });
+}
+function normalizeColor(hex) {
+  if (!hex) return FALLBACK_COLOR;
+  const cleaned = hex.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{6}$/.test(cleaned) || /^[0-9a-fA-F]{8}$/.test(cleaned)) return `#${cleaned}`;
+  return FALLBACK_COLOR;
+}
+function drawAnnotations(ctx, annotations, size) {
+  for (const annotation of annotations) drawAnnotation(ctx, annotation, size);
+}
+function drawAnnotation(ctx, annotation, size) {
+  const color = normalizeColor(annotation.colorHex);
+  const points = denormalize(annotation, size);
+  const scale = annotation.scale ?? 1;
+  const rotation = annotation.rotation ?? 0;
+  switch (annotation.kind) {
+    case "freehand":
+      drawFreehand(ctx, points, color);
+      break;
+    case "rectangle":
+      if (points.length === 2) drawRectangle(ctx, points[0], points[1], color, scale, rotation);
+      break;
+    case "arrow":
+      if (points.length === 2) drawArrow(ctx, points[0], points[1], color, scale, rotation);
+      break;
+    case "text":
+      if (points.length >= 1 && annotation.label) drawText(ctx, annotation.label, points[0], color, scale);
+      break;
+  }
+}
+function drawFreehand(ctx, points, color) {
+  if (points.length === 0) return;
+  ctx.save();
+  ctx.lineWidth = STROKE_WIDTH;
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  if (points.length === 1) ctx.lineTo(points[0].x + 0.01, points[0].y);
+  for (const p of points.slice(1)) ctx.lineTo(p.x, p.y);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawRectangle(ctx, start, end, color, scale, rotation) {
+  const center = midpoint(start, end);
+  const corners = rectangleCorners(
+    center,
+    Math.abs(end.x - start.x) / 2 * scale,
+    Math.abs(end.y - start.y) / 2 * scale,
+    rotation
+  );
+  ctx.save();
+  ctx.lineWidth = STROKE_WIDTH;
+  ctx.lineJoin = "miter";
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(corners[0].x, corners[0].y);
+  for (const c of corners.slice(1)) ctx.lineTo(c.x, c.y);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.restore();
+}
+function drawArrow(ctx, rawStart, rawEnd, color, scale, rotation) {
+  const { start, end, left, right } = arrowGeometry(rawStart, rawEnd, scale, rotation);
+  ctx.save();
+  ctx.lineWidth = STROKE_WIDTH;
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(start.x, start.y);
+  ctx.lineTo(end.x, end.y);
+  ctx.lineTo(left.x, left.y);
+  ctx.moveTo(end.x, end.y);
+  ctx.lineTo(right.x, right.y);
+  ctx.stroke();
+  ctx.restore();
+}
+function arrowGeometry(rawStart, rawEnd, scale = 1, rotation = 0) {
+  const center = midpoint(rawStart, rawEnd);
+  const start = rotate(scaled(rawStart, scale, center), rotation, center);
+  const end = rotate(scaled(rawEnd, scale, center), rotation, center);
+  const angle = Math.atan2(end.y - start.y, end.x - start.x);
+  const left = {
+    x: end.x - HEAD_LENGTH * Math.cos(angle - HEAD_ANGLE),
+    y: end.y - HEAD_LENGTH * Math.sin(angle - HEAD_ANGLE)
+  };
+  const right = {
+    x: end.x - HEAD_LENGTH * Math.cos(angle + HEAD_ANGLE),
+    y: end.y - HEAD_LENGTH * Math.sin(angle + HEAD_ANGLE)
+  };
+  return { start, end, left, right };
+}
+function drawText(ctx, text, point, color, scale) {
+  const rect = textBubbleRect(ctx, text, point, scale);
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  roundedRectPath(ctx, rect.x, rect.y, rect.width, rect.height, 8);
+  ctx.fill();
+  ctx.font = textFont(scale);
+  ctx.fillStyle = "#FFFFFF";
+  ctx.textBaseline = "top";
+  ctx.fillText(text, rect.x + TEXT_PADDING, rect.y + TEXT_PADDING + BASE_FONT_SIZE * scale * (LINE_HEIGHT_RATIO - 1) / 2);
+  ctx.restore();
+}
+function roundedRectPath(ctx, x, y, w, h, r) {
+  const radius = Math.min(r, w / 2, h / 2);
+  ctx.moveTo(x + radius, y);
+  ctx.arcTo(x + w, y, x + w, y + h, radius);
+  ctx.arcTo(x + w, y + h, x, y + h, radius);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
+  ctx.closePath();
+}
+function textBubbleRect(measurer, text, point, scale = 1) {
+  const previous = measurer.font;
+  measurer.font = textFont(scale);
+  const width = measurer.measureText(text).width;
+  measurer.font = previous;
+  const height = BASE_FONT_SIZE * scale * LINE_HEIGHT_RATIO;
+  const padding = TEXT_PADDING * scale;
+  return { x: point.x, y: point.y, width: width + padding * 2, height: height + padding * 2 };
+}
+function rectangleCorners(center, halfWidth, halfHeight, rotation) {
+  return [
+    { x: center.x - halfWidth, y: center.y - halfHeight },
+    { x: center.x + halfWidth, y: center.y - halfHeight },
+    { x: center.x + halfWidth, y: center.y + halfHeight },
+    { x: center.x - halfWidth, y: center.y + halfHeight }
+  ].map((p) => rotate(p, rotation, center));
+}
+function hitTest(annotation, point, size, measurer) {
+  const points = denormalize(annotation, size);
+  const scale = annotation.scale ?? 1;
+  switch (annotation.kind) {
+    case "rectangle": {
+      if (points.length !== 2) return false;
+      const center = midpoint(points[0], points[1]);
+      const hw = Math.abs(points[1].x - points[0].x) / 2 * scale + HIT_TEST_TOLERANCE;
+      const hh = Math.abs(points[1].y - points[0].y) / 2 * scale + HIT_TEST_TOLERANCE;
+      return Math.abs(point.x - center.x) <= hw && Math.abs(point.y - center.y) <= hh;
+    }
+    case "arrow": {
+      if (points.length !== 2) return false;
+      const center = midpoint(points[0], points[1]);
+      return distanceToSegment(point, scaled(points[0], scale, center), scaled(points[1], scale, center)) <= HIT_TEST_TOLERANCE;
+    }
+    case "text": {
+      if (points.length < 1 || !annotation.label) return false;
+      const rect = textBubbleRect(measurer, annotation.label, points[0], scale);
+      const t = HIT_TEST_TOLERANCE / 2;
+      return point.x >= rect.x - t && point.x <= rect.x + rect.width + t && point.y >= rect.y - t && point.y <= rect.y + rect.height + t;
+    }
+    case "freehand":
+      return false;
+  }
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function rotate(p, angle, center) {
+  const dx = p.x - center.x;
+  const dy = p.y - center.y;
+  return {
+    x: center.x + dx * Math.cos(angle) - dy * Math.sin(angle),
+    y: center.y + dx * Math.sin(angle) + dy * Math.cos(angle)
+  };
+}
+function scaled(p, scale, center) {
+  return { x: center.x + (p.x - center.x) * scale, y: center.y + (p.y - center.y) * scale };
+}
+function distanceToSegment(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+const COLORS = ["#FF3B30", "#FFCC00", "#34C759", "#007AFF", "#000000"];
+const MIN_SCALE = 0.3;
+const MAX_SCALE = 5;
+class AnnotationEditor {
+  constructor(shot) {
+    this.shot = shot;
+    this.annotations = [];
+    this.tool = "pen";
+    this.color = COLORS[0];
+    this.onChange = () => {
+    };
+    this.history = [];
+    this.draft = null;
+    this.draftStart = null;
+    this.pointers = /* @__PURE__ */ new Map();
+    this.drag = null;
+    this.gesture = null;
+    this.selected = null;
+    this.textInput = null;
+    this.displayScale = 1;
+    this.element = document.createElement("div");
+    this.element.className = "fk-canvas-box";
+    this.base = document.createElement("canvas");
+    this.ink = document.createElement("canvas");
+    this.ink.className = "fk-ink";
+    this.ink.setAttribute("role", "img");
+    this.ink.setAttribute("aria-label", "Screenshot — draw on it to highlight the problem");
+    this.element.append(this.base, this.ink);
+    const ctx = this.ink.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D is unavailable");
+    this.inkCtx = ctx;
+    this.ink.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+    this.ink.addEventListener("pointermove", (e) => this.onPointerMove(e));
+    this.ink.addEventListener("pointerup", (e) => this.onPointerUp(e));
+    this.ink.addEventListener("pointercancel", (e) => this.onPointerUp(e));
+    this.ink.addEventListener("wheel", (e) => this.onWheel(e), { passive: false });
+  }
+  /** Fits the screenshot inside `maxWidth × maxHeight` (CSS px) keeping its aspect ratio. */
+  layout(maxWidth, maxHeight) {
+    const scale = Math.max(0.05, Math.min(maxWidth / this.shot.width, maxHeight / this.shot.height, 1));
+    this.displayScale = scale;
+    const w = Math.round(this.shot.width * scale);
+    const h = Math.round(this.shot.height * scale);
+    const dpr = window.devicePixelRatio || 1;
+    for (const canvas of [this.base, this.ink]) {
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+      canvas.width = Math.round(w * dpr);
+      canvas.height = Math.round(h * dpr);
+    }
+    const baseCtx = this.base.getContext("2d");
+    if (baseCtx) {
+      baseCtx.imageSmoothingQuality = "high";
+      baseCtx.drawImage(this.shot.canvas, 0, 0, this.base.width, this.base.height);
+    }
+    this.cancelTextInput();
+    this.render();
+  }
+  setTool(tool) {
+    this.commitTextInput();
+    this.tool = tool;
+    this.selected = null;
+    this.ink.style.cursor = tool === "move" ? "grab" : tool === "text" ? "text" : "crosshair";
+    this.render();
+  }
+  undo() {
+    this.commitTextInput();
+    const previous = this.history.pop();
+    if (!previous) return;
+    this.annotations = previous;
+    this.selected = null;
+    this.changed();
+  }
+  clear() {
+    if (this.annotations.length === 0) return;
+    this.snapshot();
+    this.annotations = [];
+    this.selected = null;
+    this.changed();
+  }
+  get canUndo() {
+    return this.history.length > 0;
+  }
+  /** Deletes the annotation last moved/selected with the move tool. */
+  deleteSelected() {
+    if (this.selected === null || !this.annotations[this.selected]) return false;
+    this.snapshot();
+    this.annotations.splice(this.selected, 1);
+    this.selected = null;
+    this.changed();
+    return true;
+  }
+  /** The screenshot at full capture resolution with every annotation burned in. */
+  flatten() {
+    this.commitTextInput();
+    const out = document.createElement("canvas");
+    out.width = this.shot.canvas.width;
+    out.height = this.shot.canvas.height;
+    const ctx = out.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D is unavailable");
+    ctx.drawImage(this.shot.canvas, 0, 0);
+    ctx.scale(out.width / this.shot.width, out.height / this.shot.height);
+    drawAnnotations(ctx, this.annotations, { width: this.shot.width, height: this.shot.height });
+    return out;
+  }
+  commitTextInput() {
+    const input = this.textInput;
+    if (!input) return;
+    this.textInput = null;
+    const label = input.value.trim();
+    const origin = JSON.parse(input.dataset.origin ?? "[0,0]");
+    input.remove();
+    if (!label) return;
+    this.snapshot();
+    this.annotations.push({ kind: "text", points: [origin], colorHex: this.color, label, scale: 1, rotation: 0 });
+    this.changed();
+  }
+  cancelTextInput() {
+    this.textInput?.remove();
+    this.textInput = null;
+  }
+  // ---------------------------------------------------------------- drawing
+  render() {
+    const ctx = this.inkCtx;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, this.ink.width, this.ink.height);
+    const k = this.ink.width / this.shot.width;
+    ctx.setTransform(k, 0, 0, k, 0, 0);
+    const size = { width: this.shot.width, height: this.shot.height };
+    drawAnnotations(ctx, this.annotations, size);
+    if (this.draft) drawAnnotation(ctx, this.draft, size);
+  }
+  changed() {
+    this.render();
+    this.onChange();
+  }
+  snapshot() {
+    this.history.push(this.annotations.map((a) => ({ ...a, points: a.points.map((p) => [p[0], p[1]]) })));
+    if (this.history.length > 100) this.history.shift();
+  }
+  // ---------------------------------------------------------------- input
+  /** Pointer position in capture coordinates (viewport CSS px of the original page). */
+  toCapture(e) {
+    const rect = this.ink.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(this.shot.width, (e.clientX - rect.left) / this.displayScale)),
+      y: Math.max(0, Math.min(this.shot.height, (e.clientY - rect.top) / this.displayScale))
+    };
+  }
+  normalize(p) {
+    return [round4(p.x / this.shot.width), round4(p.y / this.shot.height)];
+  }
+  hitIndex(p) {
+    const size = { width: this.shot.width, height: this.shot.height };
+    for (let i = this.annotations.length - 1; i >= 0; i--) {
+      if (hitTest(this.annotations[i], p, size, this.inkCtx)) return i;
+    }
+    return null;
+  }
+  onPointerDown(e) {
+    if (e.button !== 0 && e.pointerType === "mouse") return;
+    e.preventDefault();
+    const p = this.toCapture(e);
+    this.ink.setPointerCapture(e.pointerId);
+    this.pointers.set(e.pointerId, p);
+    if (this.tool === "move") {
+      if (this.pointers.size === 2 && this.selected !== null) {
+        this.drag = null;
+        this.startGesture();
+        return;
+      }
+      const index = this.hitIndex(p);
+      this.selected = index;
+      if (index !== null) {
+        this.snapshot();
+        this.drag = { index, last: p, moved: false };
+        this.ink.style.cursor = "grabbing";
+      }
+      return;
+    }
+    if (this.pointers.size > 1) return;
+    if (this.tool === "text") {
+      this.commitTextInput();
+      this.openTextInput(p);
+      return;
+    }
+    this.draftStart = p;
+    const n = this.normalize(p);
+    this.draft = {
+      kind: this.tool === "pen" ? "freehand" : this.tool,
+      points: this.tool === "pen" ? [n] : [n, n],
+      colorHex: this.color,
+      scale: 1,
+      rotation: 0
+    };
+    this.render();
+  }
+  onPointerMove(e) {
+    if (!this.pointers.has(e.pointerId)) {
+      if (this.tool === "move" && e.pointerType === "mouse") {
+        this.ink.style.cursor = this.hitIndex(this.toCapture(e)) !== null ? "grab" : "default";
+      }
+      return;
+    }
+    const p = this.toCapture(e);
+    this.pointers.set(e.pointerId, p);
+    if (this.gesture) {
+      this.updateGesture();
+      return;
+    }
+    if (this.drag) {
+      const dx = (p.x - this.drag.last.x) / this.shot.width;
+      const dy = (p.y - this.drag.last.y) / this.shot.height;
+      this.drag.last = p;
+      this.drag.moved = true;
+      const a = this.annotations[this.drag.index];
+      a.points = a.points.map(([x, y]) => [round4(x + dx), round4(y + dy)]);
+      this.render();
+      return;
+    }
+    if (!this.draft || !this.draftStart) return;
+    const n = this.normalize(p);
+    if (this.draft.kind === "freehand") {
+      const last = this.draft.points[this.draft.points.length - 1];
+      if (Math.hypot((n[0] - last[0]) * this.shot.width, (n[1] - last[1]) * this.shot.height) >= 1.5) {
+        this.draft.points.push(n);
+      }
+    } else {
+      this.draft.points = [this.draft.points[0], n];
+    }
+    this.render();
+  }
+  onPointerUp(e) {
+    if (!this.pointers.has(e.pointerId)) return;
+    this.pointers.delete(e.pointerId);
+    if (this.ink.hasPointerCapture(e.pointerId)) this.ink.releasePointerCapture(e.pointerId);
+    if (this.gesture) {
+      if (this.pointers.size < 2) {
+        this.gesture = null;
+        this.onChange();
+      }
+      return;
+    }
+    if (this.drag) {
+      if (!this.drag.moved) this.history.pop();
+      this.drag = null;
+      this.ink.style.cursor = "grab";
+      this.onChange();
+      return;
+    }
+    const draft = this.draft;
+    this.draft = null;
+    const start = this.draftStart;
+    this.draftStart = null;
+    if (!draft || !start) return;
+    if (draft.kind !== "freehand") {
+      const [a, b] = draft.points;
+      const tiny = Math.hypot((b[0] - a[0]) * this.shot.width, (b[1] - a[1]) * this.shot.height) < 6;
+      if (tiny) {
+        this.render();
+        return;
+      }
+    }
+    this.snapshot();
+    this.annotations.push(draft);
+    this.changed();
+  }
+  /** Mouse/trackpad stand-in for pinch/twist: wheel scales, Shift/Alt+wheel rotates. */
+  onWheel(e) {
+    if (this.tool !== "move") return;
+    const p = this.toCapture(e);
+    const index = this.hitIndex(p) ?? this.selected;
+    if (index === null || !this.annotations[index]) return;
+    e.preventDefault();
+    const a = this.annotations[index];
+    if (a.kind === "freehand") return;
+    this.selected = index;
+    if (e.shiftKey || e.altKey) {
+      if (a.kind === "text") return;
+      const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+      a.rotation = round4(a.rotation + delta * 4e-3);
+    } else {
+      a.scale = round4(clamp(a.scale * Math.exp(-e.deltaY * (e.ctrlKey ? 0.01 : 15e-4)), MIN_SCALE, MAX_SCALE));
+    }
+    this.render();
+    this.onChange();
+  }
+  startGesture() {
+    if (this.selected === null) return;
+    const [a, b] = [...this.pointers.values()];
+    const annotation = this.annotations[this.selected];
+    this.snapshot();
+    this.gesture = {
+      index: this.selected,
+      startDistance: Math.max(1, Math.hypot(b.x - a.x, b.y - a.y)),
+      startAngle: Math.atan2(b.y - a.y, b.x - a.x),
+      startScale: annotation.scale,
+      startRotation: annotation.rotation
+    };
+  }
+  updateGesture() {
+    const g = this.gesture;
+    if (!g || this.pointers.size < 2) return;
+    const [a, b] = [...this.pointers.values()];
+    const annotation = this.annotations[g.index];
+    if (!annotation || annotation.kind === "freehand") return;
+    const distance = Math.hypot(b.x - a.x, b.y - a.y);
+    annotation.scale = round4(clamp(g.startScale * (distance / g.startDistance), MIN_SCALE, MAX_SCALE));
+    if (annotation.kind !== "text") {
+      annotation.rotation = round4(g.startRotation + (Math.atan2(b.y - a.y, b.x - a.x) - g.startAngle));
+    }
+    this.render();
+  }
+  openTextInput(p) {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "fk-text-input";
+    input.placeholder = "Add a note…";
+    input.setAttribute("aria-label", "Annotation text");
+    input.dataset.origin = JSON.stringify(this.normalize(p));
+    input.style.left = `${Math.min(p.x * this.displayScale, this.shot.width * this.displayScale - 130)}px`;
+    input.style.top = `${Math.min(p.y * this.displayScale, this.shot.height * this.displayScale - 36)}px`;
+    input.style.borderColor = this.color;
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") this.commitTextInput();
+      else if (e.key === "Escape") this.cancelTextInput();
+    });
+    input.addEventListener("blur", () => this.commitTextInput());
+    this.element.append(input);
+    this.textInput = input;
+    requestAnimationFrame(() => input.focus());
+  }
+}
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function round4(v) {
+  return Math.round(v * 1e4) / 1e4;
+}
+const svg = (body) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+const icons = {
+  feedback: svg(
+    '<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/><path d="M8.5 10.5h7M8.5 14h4.5"/>'
+  ),
+  pen: svg('<path d="M4 20l4-1L19 8a2.1 2.1 0 0 0-3-3L5 16l-1 4Z"/><path d="M14.5 6.5l3 3"/>'),
+  rectangle: svg('<rect x="4" y="6" width="16" height="12" rx="1.5"/>'),
+  arrow: svg('<path d="M6 18L18 6"/><path d="M9 6h9v9"/>'),
+  text: svg('<path d="M5 6V5h14v1"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
+  move: svg(
+    '<path d="M12 3v18M3 12h18"/><path d="M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3"/>'
+  ),
+  undo: svg('<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>'),
+  trash: svg('<path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 13h10l1-13"/><path d="M9 7V4h6v3"/>'),
+  close: svg('<path d="M6 6l12 12M18 6L6 18"/>'),
+  paperclip: svg(
+    '<path d="M21 11.5l-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9"/>'
+  ),
+  send: svg('<path d="M4 12l16-8-6 16-3-7-7-1Z"/>'),
+  check: svg('<path d="M5 12.5l4.5 4.5L19 7.5"/>')
+};
+const styles = (
+  /* css */
+  `
+:host {
+  all: initial;
+  --fk-primary: #007aff;
+  --fk-secondary: #6b7280;
+  --fk-bg: #ffffff;
+  --fk-surface: #f5f5f7;
+  --fk-border: rgba(0, 0, 0, 0.1);
+  --fk-text: #111114;
+  --fk-muted: #6b6b73;
+  --fk-danger: #d92d20;
+  --fk-backdrop: rgba(10, 10, 14, 0.55);
+  --fk-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--fk-text);
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-color-scheme="light"])) {
+    --fk-bg: #1c1c1f;
+    --fk-surface: #26262a;
+    --fk-border: rgba(255, 255, 255, 0.12);
+    --fk-text: #f2f2f5;
+    --fk-muted: #a0a0a8;
+    --fk-backdrop: rgba(0, 0, 0, 0.65);
+  }
+}
+:host([data-color-scheme="dark"]) {
+  --fk-bg: #1c1c1f;
+  --fk-surface: #26262a;
+  --fk-border: rgba(255, 255, 255, 0.12);
+  --fk-text: #f2f2f5;
+  --fk-muted: #a0a0a8;
+  --fk-backdrop: rgba(0, 0, 0, 0.65);
+}
+*, *::before, *::after { box-sizing: border-box; }
+button { font: inherit; color: inherit; cursor: pointer; }
+button:disabled { cursor: not-allowed; opacity: 0.45; }
+:focus-visible { outline: 2px solid var(--fk-primary); outline-offset: 2px; }
+
+/* ---------- floating trigger ---------- */
+.fk-trigger {
+  position: fixed;
+  z-index: 2147483000;
+  bottom: 20px;
+  right: 20px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px 0 14px;
+  border: 0;
+  border-radius: 22px;
+  background: var(--fk-primary);
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+.fk-trigger[data-position="bottom-left"] { right: auto; left: 20px; }
+.fk-trigger:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26); }
+.fk-trigger[data-compact="true"] { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 24px; }
+.fk-trigger[data-compact="true"] .fk-trigger-label { display: none; }
+.fk-trigger[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
+
+/* ---------- overlay ---------- */
+.fk-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--fk-backdrop);
+  animation: fk-fade 0.16s ease-out;
+}
+@keyframes fk-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fk-rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
+.fk-dialog {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  width: min(1180px, 100%);
+  height: min(780px, 100%);
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--fk-bg);
+  box-shadow: var(--fk-shadow);
+  animation: fk-rise 0.2s ease-out;
+}
+.fk-stage {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--fk-surface);
+  border-right: 1px solid var(--fk-border);
+}
+.fk-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--fk-border);
+}
+.fk-toolbar-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--fk-border); }
+.fk-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fk-muted);
+}
+.fk-tool:hover:not(:disabled) { background: var(--fk-border); color: var(--fk-text); }
+.fk-tool[aria-pressed="true"] { background: var(--fk-primary); color: #fff; }
+.fk-swatch {
+  width: 22px;
+  height: 22px;
+  margin: 0 2px;
+  padding: 0;
+  border-radius: 11px;
+  border: 2px solid var(--fk-bg);
+  box-shadow: 0 0 0 1px var(--fk-border);
+}
+.fk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fk-text); }
+.fk-hint { margin-left: auto; font-size: 12px; color: var(--fk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fk-canvas-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow: hidden;
+}
+.fk-canvas-box { position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); border-radius: 6px; overflow: hidden; }
+.fk-canvas-box canvas { display: block; }
+.fk-canvas-box .fk-ink { position: absolute; inset: 0; touch-action: none; }
+.fk-stage[data-screenshot="off"] .fk-canvas-box { opacity: 0.25; filter: grayscale(1); }
+.fk-stage[data-screenshot="off"] .fk-toolbar button { pointer-events: none; opacity: 0.35; }
+.fk-off-note {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: var(--fk-muted);
+  pointer-events: none;
+}
+.fk-stage[data-screenshot="off"] .fk-off-note { display: flex; }
+.fk-text-input {
+  position: absolute;
+  z-index: 2;
+  min-width: 120px;
+  padding: 6px 8px;
+  border: 2px solid var(--fk-primary);
+  border-radius: 8px;
+  background: var(--fk-bg);
+  color: var(--fk-text);
+  font: bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  outline: none;
+}
+
+/* ---------- composer ---------- */
+.fk-composer { display: flex; flex-direction: column; min-height: 0; padding: 18px; gap: 14px; overflow-y: auto; }
+.fk-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.fk-title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
+.fk-close { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: 15px; background: var(--fk-surface); color: var(--fk-muted); }
+.fk-close:hover { color: var(--fk-text); }
+.fk-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--fk-muted); text-transform: uppercase; letter-spacing: 0.04em; }
+.fk-textarea {
+  width: 100%;
+  min-height: 140px;
+  resize: vertical;
+  padding: 10px 12px;
+  border: 1px solid var(--fk-border);
+  border-radius: 10px;
+  background: var(--fk-bg);
+  color: var(--fk-text);
+  font: inherit;
+  line-height: 1.45;
+}
+.fk-textarea:focus { outline: none; border-color: var(--fk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fk-primary) 22%, transparent); }
+.fk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.fk-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid var(--fk-border);
+  border-radius: 14px;
+  background: var(--fk-bg);
+  font-size: 13px;
+}
+.fk-chip[aria-pressed="true"] { border-color: var(--fk-primary); background: color-mix(in srgb, var(--fk-primary) 12%, transparent); color: var(--fk-primary); font-weight: 600; }
+.fk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.fk-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
+.fk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.fk-switch-track { position: relative; width: 36px; height: 22px; border-radius: 11px; background: var(--fk-border); transition: background 0.15s; }
+.fk-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
+.fk-switch input:checked + .fk-switch-track { background: var(--fk-primary); }
+.fk-switch input:checked + .fk-switch-track::after { transform: translateX(14px); }
+.fk-switch input:focus-visible + .fk-switch-track { outline: 2px solid var(--fk-primary); outline-offset: 2px; }
+.fk-attach {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px dashed var(--fk-secondary);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fk-secondary);
+  font-size: 13px;
+}
+.fk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 8px; background: var(--fk-surface); font-size: 12px; }
+.fk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fk-file button { display: inline-flex; border: 0; background: transparent; color: var(--fk-muted); padding: 2px; }
+.fk-meta { font-size: 12px; color: var(--fk-muted); }
+.fk-meta details summary { cursor: pointer; }
+.fk-meta pre { max-height: 140px; overflow: auto; margin: 6px 0 0; padding: 8px; border-radius: 8px; background: var(--fk-surface); font-size: 11px; white-space: pre-wrap; word-break: break-word; }
+.fk-spacer { flex: 1; }
+.fk-actions { display: flex; gap: 8px; }
+.fk-btn {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 40px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+.fk-btn-secondary { border: 1px solid var(--fk-border); background: transparent; color: var(--fk-secondary); }
+.fk-btn-primary { border: 0; background: var(--fk-primary); color: #fff; }
+.fk-btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
+.fk-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--fk-danger) 12%, transparent); color: var(--fk-danger); font-size: 13px; }
+.fk-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: fk-spin 0.7s linear infinite; }
+@keyframes fk-spin { to { transform: rotate(360deg); } }
+.fk-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; text-align: center; }
+.fk-done-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 24px; background: var(--fk-primary); color: #fff; }
+.fk-done-icon svg { width: 26px; height: 26px; }
+.fk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* ---------- narrow screens: stack stage over composer ---------- */
+@media (max-width: 760px) {
+  .fk-overlay { padding: 0; }
+  .fk-dialog { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; border-radius: 0; }
+  .fk-stage { border-right: 0; border-bottom: 1px solid var(--fk-border); }
+  .fk-hint { display: none; }
+  .fk-canvas-wrap { padding: 10px; }
+  .fk-composer { max-height: 55vh; padding: 14px; gap: 10px; }
+  .fk-textarea { min-height: 84px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fk-overlay, .fk-dialog { animation: none; }
+}
+`
+);
+const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
+const TOOLS = [
+  { tool: "pen", label: "Draw", icon: icons.pen },
+  { tool: "rectangle", label: "Rectangle", icon: icons.rectangle },
+  { tool: "arrow", label: "Arrow", icon: icons.arrow },
+  { tool: "text", label: "Text", icon: icons.text },
+  { tool: "move", label: "Move / resize", icon: icons.move }
+];
+const HINTS = {
+  pen: "Draw on the screenshot to highlight the problem",
+  rectangle: "Drag to box an area",
+  arrow: "Drag to point at something",
+  text: "Click to add a note",
+  move: "Drag to move · scroll to resize · Shift+scroll to rotate · Delete to remove"
+};
+class Widget {
+  constructor(deps) {
+    this.deps = deps;
+    this.host = null;
+    this.shadow = null;
+    this.trigger = null;
+    this.pending = null;
+    this.isOwnNode = (node) => node === this.host;
+  }
+  get isOpen() {
+    return this.pending !== null;
+  }
+  showTrigger(options, onClick) {
+    const shadow = this.mount();
+    this.trigger?.remove();
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "fk-trigger";
+    button.dataset.position = options.position ?? "bottom-right";
+    button.dataset.compact = String(!!options.compact);
+    const label = options.label ?? "Feedback";
+    button.setAttribute("aria-label", label);
+    button.innerHTML = `${icons.feedback}<span class="fk-trigger-label"></span>`;
+    button.querySelector(".fk-trigger-label").textContent = label;
+    button.addEventListener("click", onClick);
+    shadow.append(button);
+    this.trigger = button;
+    this.applyTheme();
+  }
+  hideTrigger() {
+    this.trigger?.remove();
+    this.trigger = null;
+  }
+  destroy() {
+    this.hideTrigger();
+    this.host?.remove();
+    this.host = null;
+    this.shadow = null;
+  }
+  open(options) {
+    if (this.pending) return this.pending;
+    this.pending = this.run(options).finally(() => {
+      this.pending = null;
+    });
+    return this.pending;
+  }
+  mount() {
+    if (this.shadow && this.host?.isConnected) return this.shadow;
+    const host = document.createElement("div");
+    host.setAttribute("data-feedbackkit-root", "");
+    host.style.cssText = "position:static!important;display:contents!important;";
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = styles;
+    shadow.append(style);
+    document.body.append(host);
+    this.host = host;
+    this.shadow = shadow;
+    this.applyTheme();
+    return shadow;
+  }
+  applyTheme() {
+    const theme = this.deps.theme();
+    const host = this.host;
+    if (!host) return;
+    const primary = validHex(theme?.primaryColorHex);
+    const secondary = validHex(theme?.secondaryColorHex);
+    if (primary) host.style.setProperty("--fk-primary", primary);
+    else host.style.removeProperty("--fk-primary");
+    if (secondary) host.style.setProperty("--fk-secondary", secondary);
+    else host.style.removeProperty("--fk-secondary");
+  }
+  async run(options) {
+    const shadow = this.mount();
+    this.applyTheme();
+    this.trigger?.setAttribute("aria-busy", "true");
+    const captureOptions = this.deps.captureOptions();
+    const [shot, environment] = await Promise.all([
+      captureViewport({ ...captureOptions, exclude: this.isOwnNode }).catch((error) => {
+        console.warn("[FeedbackKit] Screenshot capture failed; continuing without one.", error);
+        return null;
+      }),
+      collectEnvironment({
+        screenName: this.deps.currentScreen(),
+        appVersion: this.deps.configuration()?.appVersion,
+        appBuild: this.deps.configuration()?.appBuild
+      })
+    ]);
+    const logs = this.deps.logs();
+    this.trigger?.removeAttribute("aria-busy");
+    return new Promise((resolve) => {
+      const dialog = new Dialog(shadow, shot, environment, logs, this.deps, options, (result) => {
+        resolve(result);
+      });
+      dialog.show();
+    });
+  }
+}
+class Dialog {
+  constructor(shadow, shot, environment, logs, deps, options, done) {
+    this.shadow = shadow;
+    this.shot = shot;
+    this.environment = environment;
+    this.logs = logs;
+    this.deps = deps;
+    this.options = options;
+    this.done = done;
+    this.editor = null;
+    this.includeLogs = true;
+    this.attachment = null;
+    this.selectedProducts = /* @__PURE__ */ new Set();
+    this.products = [];
+    this.sending = false;
+    this.finished = false;
+    this.resizeObserver = null;
+    this.previousFocus = null;
+    this.previousOverflow = "";
+    this.toolButtons = /* @__PURE__ */ new Map();
+    this.swatches = [];
+    this.onKeyDown = (e) => this.handleKey(e);
+    this.includeScreenshot = shot !== null;
+  }
+  show() {
+    this.previousFocus = document.activeElement;
+    this.previousOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    const overlay = el("div", "fk-overlay");
+    const dialog = el("div", "fk-dialog");
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-labelledby", "fk-title");
+    dialog.append(this.buildStage(), this.buildComposer());
+    overlay.append(dialog);
+    overlay.addEventListener("mousedown", (e) => {
+      if (e.target === overlay) this.cancel();
+    });
+    this.overlay = overlay;
+    this.shadow.append(overlay);
+    document.addEventListener("keydown", this.onKeyDown, true);
+    this.layoutEditor();
+    requestAnimationFrame(() => this.textarea.focus());
+    void this.loadProducts();
+  }
+  // ---------------------------------------------------------------- stage
+  buildStage() {
+    const stage = el("div", "fk-stage");
+    this.stage = stage;
+    stage.dataset.screenshot = this.includeScreenshot ? "on" : "off";
+    const toolbar = el("div", "fk-toolbar");
+    toolbar.setAttribute("role", "toolbar");
+    toolbar.setAttribute("aria-label", "Annotation tools");
+    for (const { tool, label, icon } of TOOLS) {
+      const b = iconButton("fk-tool", icon, label);
+      b.setAttribute("aria-pressed", String(tool === "pen"));
+      b.addEventListener("click", () => this.selectTool(tool));
+      this.toolButtons.set(tool, b);
+      toolbar.append(b);
+    }
+    toolbar.append(el("span", "fk-toolbar-sep"));
+    COLORS.forEach((color, i) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "fk-swatch";
+      b.style.background = color;
+      b.setAttribute("aria-label", `Color ${["red", "yellow", "green", "blue", "black"][i]}`);
+      b.setAttribute("aria-pressed", String(i === 0));
+      b.addEventListener("click", () => {
+        if (this.editor) this.editor.color = color;
+        this.swatches.forEach((s) => s.setAttribute("aria-pressed", String(s === b)));
+      });
+      this.swatches.push(b);
+      toolbar.append(b);
+    });
+    toolbar.append(el("span", "fk-toolbar-sep"));
+    this.undoButton = iconButton("fk-tool", icons.undo, "Undo");
+    this.undoButton.addEventListener("click", () => this.editor?.undo());
+    this.clearButton = iconButton("fk-tool", icons.trash, "Clear all annotations");
+    this.clearButton.addEventListener("click", () => this.editor?.clear());
+    toolbar.append(this.undoButton, this.clearButton);
+    this.hint = el("span", "fk-hint");
+    this.hint.textContent = HINTS.pen;
+    toolbar.append(this.hint);
+    const wrap = el("div", "fk-canvas-wrap");
+    if (this.shot) {
+      const editor = new AnnotationEditor(this.shot);
+      editor.onChange = () => this.refreshState();
+      editor.setTool("pen");
+      this.editor = editor;
+      wrap.append(editor.element);
+      this.resizeObserver = new ResizeObserver(() => this.layoutEditor());
+      this.resizeObserver.observe(wrap);
+    }
+    const note = el("div", "fk-off-note");
+    note.textContent = this.shot ? "Screenshot won't be included" : "Screenshot unavailable on this page";
+    wrap.append(note);
+    stage.append(toolbar, wrap);
+    return stage;
+  }
+  layoutEditor() {
+    if (!this.editor) return;
+    const wrap = this.editor.element.parentElement;
+    if (!wrap) return;
+    const styles2 = getComputedStyle(wrap);
+    const padX = parseFloat(styles2.paddingLeft) + parseFloat(styles2.paddingRight);
+    const padY = parseFloat(styles2.paddingTop) + parseFloat(styles2.paddingBottom);
+    this.editor.layout(Math.max(40, wrap.clientWidth - padX), Math.max(40, wrap.clientHeight - padY));
+  }
+  selectTool(tool) {
+    this.editor?.setTool(tool);
+    this.toolButtons.forEach((b, t) => b.setAttribute("aria-pressed", String(t === tool)));
+    this.hint.textContent = HINTS[tool];
+  }
+  // ---------------------------------------------------------------- composer
+  buildComposer() {
+    const composer = el("div", "fk-composer");
+    const header = el("div", "fk-header");
+    const title = el("h2", "fk-title");
+    title.id = "fk-title";
+    title.textContent = "Send feedback";
+    const close = iconButton("fk-close", icons.close, "Close");
+    close.addEventListener("click", () => this.cancel());
+    header.append(title, close);
+    const textLabel = el("label", "fk-label");
+    textLabel.textContent = "What's the problem?";
+    textLabel.setAttribute("for", "fk-text");
+    this.textarea = document.createElement("textarea");
+    this.textarea.id = "fk-text";
+    this.textarea.className = "fk-textarea";
+    this.textarea.placeholder = "Describe what happened and what you expected instead…";
+    this.textarea.addEventListener("input", () => this.refreshState());
+    const textGroup = el("div");
+    textGroup.append(textLabel, this.textarea);
+    const productsGroup = el("div");
+    productsGroup.dataset.role = "products";
+    productsGroup.hidden = true;
+    const optionsRow = el("div", "fk-row");
+    const toggle = switchControl("Screenshot", this.includeScreenshot, (on) => {
+      this.includeScreenshot = on;
+      this.stage.dataset.screenshot = on ? "on" : "off";
+      this.refreshState();
+    });
+    if (!this.shot) toggle.querySelector("input").disabled = true;
+    const attachGroup = el("div");
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.hidden = true;
+    const attachButton = document.createElement("button");
+    attachButton.type = "button";
+    attachButton.className = "fk-attach";
+    attachButton.innerHTML = `${icons.paperclip}<span>Attach file</span>`;
+    attachButton.addEventListener("click", () => fileInput.click());
+    fileInput.addEventListener("change", () => {
+      const file = fileInput.files?.[0];
+      fileInput.value = "";
+      if (!file) return;
+      if (file.size > MAX_ATTACHMENT_BYTES) {
+        this.showError(`"${file.name}" is larger than 10 MB.`);
+        return;
+      }
+      this.attachment = { filename: file.name, mimeType: file.type || "application/octet-stream", data: file };
+      renderAttachment();
+    });
+    const renderAttachment = () => {
+      attachGroup.replaceChildren(fileInput);
+      if (this.attachment) {
+        const chip = el("span", "fk-file");
+        const name = el("span");
+        name.textContent = this.attachment.filename;
+        const remove = iconButton("", icons.close, `Remove ${this.attachment.filename}`);
+        remove.addEventListener("click", () => {
+          this.attachment = null;
+          renderAttachment();
+        });
+        chip.append(name, remove);
+        attachGroup.append(chip);
+      } else {
+        attachGroup.append(attachButton);
+      }
+    };
+    renderAttachment();
+    optionsRow.append(attachGroup, toggle);
+    const meta = this.buildDiagnostics();
+    this.errorBox = el("p", "fk-error");
+    this.errorBox.setAttribute("role", "alert");
+    this.errorBox.hidden = true;
+    const actions = el("div", "fk-actions");
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "fk-btn fk-btn-secondary";
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => this.cancel());
+    this.sendButton = document.createElement("button");
+    this.sendButton.type = "button";
+    this.sendButton.className = "fk-btn fk-btn-primary";
+    this.sendButton.innerHTML = `${icons.send}<span>Send</span>`;
+    this.sendButton.title = "Send (⌘/Ctrl + Enter)";
+    this.sendButton.addEventListener("click", () => void this.send());
+    actions.append(cancel, this.sendButton);
+    composer.append(header, textGroup, productsGroup, optionsRow);
+    if (meta) composer.append(meta);
+    composer.append(el("div", "fk-spacer"), this.errorBox, actions);
+    this.refreshState();
+    return composer;
+  }
+  /** Shows the user exactly what page context will be sent, with an opt-out for logs. */
+  buildDiagnostics() {
+    const box = el("div", "fk-meta");
+    const env = this.environment;
+    const summary = `${env.deviceModel} · ${env.osName} ${env.osVersion}`.trim();
+    const details = document.createElement("details");
+    const s = document.createElement("summary");
+    s.textContent = `Included: page URL, ${summary}${this.logs.length ? `, ${this.logs.length} log entr${this.logs.length === 1 ? "y" : "ies"}` : ""}`;
+    const pre = document.createElement("pre");
+    const lines = [`URL: ${env.pageUrl ?? ""}`, `Viewport: ${env.screenWidthPoints}×${env.screenHeightPoints} @${env.screenScale}x`];
+    if (this.logs.length) {
+      lines.push("", ...this.logs.map((l) => `[${l.level}] ${l.message}`));
+    }
+    pre.textContent = lines.join("\n");
+    details.append(s, pre);
+    box.append(details);
+    if (this.logs.length) {
+      const logsToggle = switchControl("Include console & network logs", true, (on) => {
+        this.includeLogs = on;
+      });
+      logsToggle.style.marginTop = "8px";
+      box.append(logsToggle);
+    }
+    return box;
+  }
+  async loadProducts() {
+    let products2 = [];
+    try {
+      products2 = await this.deps.products();
+    } catch {
+      return;
+    }
+    if (this.finished || products2.length === 0) return;
+    this.products = products2;
+    const preferred = this.deps.defaultProductKey();
+    const initial = preferred && products2.find((p) => p.key === preferred) || products2.find((p) => p.isDefault) || null;
+    if (initial) this.selectedProducts.add(initial.key);
+    const group = this.overlay.querySelector('[data-role="products"]');
+    if (!group) return;
+    const label = el("span", "fk-label");
+    label.textContent = "Affected product";
+    const chips = el("div", "fk-chips");
+    chips.setAttribute("role", "group");
+    chips.setAttribute("aria-label", "Affected products");
+    for (const product of products2) {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "fk-chip";
+      chip.textContent = product.name || product.key;
+      if (product.description) chip.title = product.description;
+      chip.setAttribute("aria-pressed", String(this.selectedProducts.has(product.key)));
+      chip.addEventListener("click", () => {
+        if (this.selectedProducts.has(product.key)) this.selectedProducts.delete(product.key);
+        else this.selectedProducts.add(product.key);
+        chip.setAttribute("aria-pressed", String(this.selectedProducts.has(product.key)));
+      });
+      chips.append(chip);
+    }
+    group.replaceChildren(label, chips);
+    group.hidden = false;
+  }
+  refreshState() {
+    const hasText = this.textarea?.value.trim().length > 0;
+    const hasMarks = this.includeScreenshot && (this.editor?.annotations.length ?? 0) > 0;
+    if (this.sendButton) this.sendButton.disabled = this.sending || !hasText && !hasMarks;
+    if (this.undoButton) this.undoButton.disabled = !this.editor?.canUndo;
+    if (this.clearButton) this.clearButton.disabled = !(this.editor && this.editor.annotations.length > 0);
+  }
+  // ---------------------------------------------------------------- keyboard
+  handleKey(e) {
+    if (this.finished) return;
+    const mod = e.metaKey || e.ctrlKey;
+    const active = this.shadow.activeElement;
+    const typing = active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement;
+    if (active instanceof HTMLInputElement && active.classList.contains("fk-text-input")) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      this.cancel();
+    } else if (mod && e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      void this.send();
+    } else if (mod && !e.shiftKey && e.key.toLowerCase() === "z" && !typing) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.editor?.undo();
+    } else if ((e.key === "Backspace" || e.key === "Delete") && !typing) {
+      if (this.editor?.deleteSelected()) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    } else if (e.key === "Tab") {
+      this.trapFocus(e);
+    }
+  }
+  trapFocus(e) {
+    const focusable = [
+      ...this.overlay.querySelectorAll("button:not(:disabled), textarea, input:not([type=file]):not(:disabled), summary")
+    ].filter((n) => n.offsetParent !== null || n.tagName === "INPUT");
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = this.shadow.activeElement;
+    if (e.shiftKey && (active === first || !active)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  // ---------------------------------------------------------------- results
+  showError(message) {
+    this.errorBox.hidden = !message;
+    this.errorBox.textContent = message ?? "";
+  }
+  async buildReport() {
+    let screenshotRaw = null;
+    let screenshotAnnotated = null;
+    let annotations = [];
+    if (this.includeScreenshot && this.shot && this.editor) {
+      const flattened = this.editor.flatten();
+      [screenshotRaw, screenshotAnnotated] = await Promise.all([
+        canvasToPngBlob(this.shot.canvas),
+        canvasToPngBlob(flattened)
+      ]);
+      annotations = this.editor.annotations.map((a) => ({ ...a }));
+    }
+    return {
+      id: uuid(),
+      createdAt: /* @__PURE__ */ new Date(),
+      text: this.textarea.value.trim(),
+      screenshotRaw,
+      screenshotAnnotated,
+      annotations,
+      environment: this.environment,
+      attachment: this.attachment,
+      products: this.products.filter((p) => this.selectedProducts.has(p.key)),
+      logs: this.includeLogs ? this.logs : []
+    };
+  }
+  async send() {
+    if (this.sending || this.sendButton.disabled) return;
+    this.sending = true;
+    this.showError(null);
+    this.refreshState();
+    this.sendButton.innerHTML = `<span class="fk-spinner" aria-hidden="true"></span><span>Sending…</span>`;
+    try {
+      const report = await this.buildReport();
+      if (this.options.submit) {
+        const configuration2 = this.deps.configuration();
+        if (!configuration2) throw new Error("FeedbackKit.configure() hasn't been called.");
+        await submitReport(report, configuration2);
+      }
+      await this.options.onReport?.(report);
+      this.showThanks();
+      setTimeout(() => this.finish(report), this.options.submit ? 1300 : 0);
+    } catch (error) {
+      this.sending = false;
+      this.sendButton.innerHTML = `${icons.send}<span>Retry</span>`;
+      this.showError(error instanceof Error ? error.message : "Something went wrong sending your feedback.");
+      this.refreshState();
+      this.options.onError?.(error);
+    }
+  }
+  showThanks() {
+    if (!this.options.submit) return;
+    const composer = this.overlay.querySelector(".fk-composer");
+    if (!composer) return;
+    const done = el("div", "fk-done");
+    done.setAttribute("role", "status");
+    const icon = el("span", "fk-done-icon");
+    icon.innerHTML = icons.check;
+    const title = el("h2", "fk-title");
+    title.textContent = "Thanks for the feedback!";
+    const sub = el("p", "fk-meta");
+    sub.textContent = "It's on its way to the team.";
+    done.append(icon, title, sub);
+    composer.replaceChildren(done);
+  }
+  cancel() {
+    if (this.sending) return;
+    this.finish(null);
+  }
+  finish(result) {
+    if (this.finished) return;
+    this.finished = true;
+    this.resizeObserver?.disconnect();
+    document.removeEventListener("keydown", this.onKeyDown, true);
+    this.overlay.remove();
+    document.documentElement.style.overflow = this.previousOverflow;
+    if (this.previousFocus instanceof HTMLElement) this.previousFocus.focus({ preventScroll: true });
+    this.done(result);
+  }
+}
+function el(tag, className) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  return node;
+}
+function iconButton(className, icon, label) {
+  const b = document.createElement("button");
+  b.type = "button";
+  if (className) b.className = className;
+  b.innerHTML = icon;
+  b.setAttribute("aria-label", label);
+  b.title = label;
+  return b;
+}
+function switchControl(label, checked, onChange) {
+  const wrap = el("label", "fk-switch");
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.checked = checked;
+  input.setAttribute("role", "switch");
+  input.addEventListener("change", () => onChange(input.checked));
+  const track = el("span", "fk-switch-track");
+  const text = el("span");
+  text.textContent = label;
+  wrap.append(input, track, text);
+  return wrap;
+}
+function validHex(hex) {
+  if (!hex) return null;
+  const cleaned = hex.trim().replace(/^#/, "");
+  return /^[0-9a-fA-F]{6}$/.test(cleaned) ? `#${cleaned}` : null;
+}
+function uuid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+let configuration = null;
+let products = [];
+let productsPromise = null;
+let logCapture = null;
+let shortcutHandler = null;
+const widget = new Widget({
+  configuration: () => configuration,
+  theme: () => FeedbackKit.theme,
+  products: () => resolveProducts(),
+  defaultProductKey: () => configuration?.defaultProductKey,
+  logs: () => logCapture?.buffer.snapshot() ?? [],
+  captureOptions: () => FeedbackKit.captureOptions,
+  currentScreen: () => FeedbackKit.currentScreen
+});
+function resolveProducts() {
+  if (products.length > 0 || !configuration) return Promise.resolve(products);
+  if (!productsPromise) {
+    const config = configuration;
+    productsPromise = fetchProducts(config).then((fetched) => {
+      if (configuration === config) products = fetched;
+      return fetched;
+    }).catch(() => {
+      productsPromise = null;
+      return [];
+    });
+  }
+  return productsPromise;
+}
+function whenBodyReady(fn) {
+  if (document.body) fn();
+  else document.addEventListener("DOMContentLoaded", fn, { once: true });
+}
+const FeedbackKit = {
+  /**
+   * The current screen/page name included in reports. Falls back to
+   * `location.pathname` when unset. Set it from your router for nicer names.
+   */
+  currentScreen: null,
+  /** Brand colors for the trigger button and dialog. */
+  theme: null,
+  /** Screenshot capture settings. See `CaptureOptions`. */
+  captureOptions: {},
+  /** The hosted dashboard's ingestion endpoint, used when `configure` gets no `endpoint`. */
+  DEFAULT_ENDPOINT,
+  /**
+   * Configures delivery to the FeedbackKit dashboard (or your own deployment
+   * of it). Pass `null` to go back to local-only delivery via `present`.
+   * Also starts console/network log capture unless `captureLogs: false`.
+   */
+  configure(config) {
+    configuration = config ? { ...config, endpoint: config.endpoint ?? DEFAULT_ENDPOINT } : null;
+    products = config?.products ?? [];
+    productsPromise = null;
+    setIgnoredUrlPrefix(configuration?.endpoint ?? null);
+    if (configuration && products.length === 0) void resolveProducts();
+    if (config && config.captureLogs !== false && !logCapture) {
+      FeedbackKit.enableLogCapture(typeof config.captureLogs === "object" ? config.captureLogs : {});
+    }
+  },
+  get isConfigured() {
+    return configuration !== null;
+  },
+  get configuration() {
+    return configuration;
+  },
+  /** Products for the composer's chips — static from `configure`, else fetched from the backend. */
+  fetchProducts() {
+    return resolveProducts();
+  },
+  /**
+   * Opens the feedback dialog and resolves with the finished report — or
+   * `null` if the user cancels. Nothing is sent anywhere; delivery is yours.
+   */
+  present(options = {}) {
+    return widget.open({ submit: false, onReport: options.onReport });
+  },
+  /**
+   * Opens the dialog and, on Send, delivers the report to the configured
+   * endpoint (showing progress, errors with retry, and a thank-you state).
+   * Resolves with the submitted report, or `null` if cancelled.
+   */
+  presentAndSubmit(options = {}) {
+    if (!configuration) {
+      return Promise.reject(new Error("FeedbackKit.configure({ projectKey }) must be called before presentAndSubmit()."));
+    }
+    return widget.open({ submit: true, onReport: options.onSubmitted, onError: options.onError });
+  },
+  /** Sends an already-built report (e.g. one from `present`) to the configured endpoint. */
+  submit(report) {
+    if (!configuration) {
+      return Promise.reject(new Error("FeedbackKit.configure({ projectKey }) must be called before submit()."));
+    }
+    return submitReport(report, configuration);
+  },
+  get isPresenting() {
+    return widget.isOpen;
+  },
+  /**
+   * A floating "Feedback" button. Clicking it runs `presentAndSubmit` when
+   * configured, otherwise `present` and logs the report to the console.
+   */
+  showFloatingTriggerButton(options = {}) {
+    whenBodyReady(
+      () => widget.showTrigger(options, () => {
+        if (configuration) void FeedbackKit.presentAndSubmit();
+        else void FeedbackKit.present({ onReport: (r) => console.info("[FeedbackKit] report", r) });
+      })
+    );
+  },
+  hideFloatingTriggerButton() {
+    widget.hideTrigger();
+  },
+  /**
+   * The web's stand-in for the native SDKs' shake-to-report: a keyboard
+   * shortcut, ⌘⇧F on macOS / Ctrl+Shift+F elsewhere by default.
+   */
+  enableKeyboardShortcut(options = {}) {
+    FeedbackKit.disableKeyboardShortcut();
+    const key = (options.key ?? "F").toLowerCase();
+    shortcutHandler = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || !e.shiftKey || e.altKey || e.key.toLowerCase() !== key) return;
+      e.preventDefault();
+      if (configuration) void FeedbackKit.presentAndSubmit();
+      else void FeedbackKit.present({ onReport: (r) => console.info("[FeedbackKit] report", r) });
+    };
+    window.addEventListener("keydown", shortcutHandler);
+  },
+  disableKeyboardShortcut() {
+    if (shortcutHandler) window.removeEventListener("keydown", shortcutHandler);
+    shortcutHandler = null;
+  },
+  /**
+   * Starts recording recent console warnings/errors, uncaught exceptions,
+   * and failed network requests, attached to each report (users can opt out
+   * per report). Call as early as possible so errors before the first
+   * report are caught. `false` turns it off.
+   */
+  enableLogCapture(options = {}) {
+    logCapture?.uninstall();
+    logCapture = options === false ? null : installLogCapture(options);
+  },
+  /** Captures the current viewport as a PNG, without opening any UI. */
+  async captureScreenshot(options = {}) {
+    const shot = await captureViewport({ ...FeedbackKit.captureOptions, ...options, exclude: widget.isOwnNode });
+    return canvasToPngBlob(shot.canvas);
+  },
+  /** Removes every trace of the SDK from the page (trigger, dialog host, listeners, log hooks). */
+  destroy() {
+    FeedbackKit.disableKeyboardShortcut();
+    logCapture?.uninstall();
+    logCapture = null;
+    widget.destroy();
+  }
+};
+export {
+  DEFAULT_ENDPOINT,
+  FeedbackKit,
+  FeedbackSubmissionError,
+  STROKE_WIDTH,
+  FeedbackKit as default,
+  drawAnnotation,
+  drawAnnotations,
+  encodePayload,
+  hitTest,
+  parseUserAgent,
+  readPoint,
+  redactUrl,
+  textBubbleRect
+};
+//# sourceMappingURL=feedbackkit.js.map