@checkflow/sdk 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -0,0 +1,411 @@
+import {
+  captureScreenshot,
+  clearScreenshot,
+  loadHtml2Canvas
+} from "./chunk-CQ56DMFR.mjs";
+import {
+  startHighlighting
+} from "./chunk-CD33QAA6.mjs";
+
+// src/collector.ts
+function collectContext() {
+  const ua = navigator.userAgent;
+  return {
+    url: window.location.href,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      device: window.innerWidth < 768 ? "mobile" : window.innerWidth < 1024 ? "tablet" : "desktop"
+    },
+    user_agent: ua,
+    browser: detectBrowser(ua),
+    os: detectOS(ua),
+    locale: navigator.language,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+  };
+}
+function collectPerformance() {
+  try {
+    const entries = performance.getEntriesByType("paint");
+    const metrics = {};
+    entries.forEach((e) => {
+      if (e.name === "first-contentful-paint") metrics.fcp = Math.round(e.startTime);
+    });
+    const nav = performance.getEntriesByType("navigation")[0];
+    if (nav) {
+      metrics.dom_load = Math.round(nav.domContentLoadedEventEnd - nav.startTime);
+      metrics.load = Math.round(nav.loadEventEnd - nav.startTime);
+    }
+    return Object.keys(metrics).length > 0 ? metrics : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function detectBrowser(ua) {
+  if (ua.includes("Firefox/")) return "Firefox";
+  if (ua.includes("Edg/")) return "Edge";
+  if (ua.includes("Chrome/")) return "Chrome";
+  if (ua.includes("Safari/")) return "Safari";
+  return "Unknown";
+}
+function detectOS(ua) {
+  if (ua.includes("Windows")) return "Windows";
+  if (ua.includes("Mac OS")) return "macOS";
+  if (ua.includes("Linux")) return "Linux";
+  if (ua.includes("Android")) return "Android";
+  if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  return "Unknown";
+}
+
+// src/console-interceptor.ts
+var MAX_LOGS = 50;
+var logs = [];
+var errorsCapture = [];
+var installed = false;
+function installInterceptors() {
+  if (installed) return;
+  installed = true;
+  const origConsole = {
+    log: console.log,
+    warn: console.warn,
+    error: console.error
+  };
+  ["log", "warn", "error"].forEach((level) => {
+    console[level] = (...args) => {
+      logs.push({
+        level,
+        message: args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" "),
+        timestamp: Date.now()
+      });
+      if (logs.length > MAX_LOGS) logs.shift();
+      origConsole[level](...args);
+    };
+  });
+  window.addEventListener("error", (event) => {
+    errorsCapture.push({
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      timestamp: Date.now()
+    });
+    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
+  });
+  window.addEventListener("unhandledrejection", (event) => {
+    errorsCapture.push({
+      message: String(event.reason),
+      type: "unhandledrejection",
+      timestamp: Date.now()
+    });
+    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
+  });
+}
+function getConsoleLogs() {
+  return [...logs];
+}
+function getJavascriptErrors() {
+  return [...errorsCapture];
+}
+function clearLogs() {
+  logs = [];
+  errorsCapture = [];
+}
+
+// src/widget.ts
+var DEFAULT_CONFIG = {
+  position: "bottom-right",
+  color: "#1e3a5f",
+  text: "Report Bug",
+  showOnInit: true
+};
+var container = null;
+var onSubmitCallback = null;
+var screenshotDataUrl = null;
+var annotationsData = [];
+function mountWidget(config2 = {}, onSubmit, opts) {
+  if (container) return;
+  onSubmitCallback = onSubmit;
+  const cfg = { ...DEFAULT_CONFIG, ...config2 };
+  container = document.createElement("div");
+  container.id = "checkflow-widget";
+  container.innerHTML = getWidgetHTML(cfg);
+  document.body.appendChild(container);
+  const btn = container.querySelector("#cf-trigger");
+  const form = container.querySelector("#cf-form");
+  const closeBtn = container.querySelector("#cf-close");
+  const submitBtn = container.querySelector("#cf-submit");
+  const screenshotBtn = container.querySelector("#cf-screenshot");
+  const highlightBtn = container.querySelector("#cf-highlight");
+  const screenshotPreview = container.querySelector("#cf-screenshot-preview");
+  btn?.addEventListener("click", () => {
+    form.style.display = form.style.display === "none" ? "flex" : "none";
+    screenshotDataUrl = null;
+    annotationsData = [];
+    if (screenshotPreview) screenshotPreview.style.display = "none";
+  });
+  closeBtn?.addEventListener("click", () => {
+    form.style.display = "none";
+  });
+  screenshotBtn?.addEventListener("click", async () => {
+    if (!opts?.onScreenshot) return;
+    screenshotBtn.textContent = "Capturing...";
+    form.style.display = "none";
+    try {
+      const data = await opts.onScreenshot();
+      if (data) {
+        screenshotDataUrl = data;
+        if (screenshotPreview) {
+          screenshotPreview.querySelector("img").src = data;
+          screenshotPreview.style.display = "block";
+        }
+      }
+    } catch {
+    }
+    form.style.display = "flex";
+    screenshotBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg> Screenshot';
+  });
+  highlightBtn?.addEventListener("click", async () => {
+    if (!opts?.onHighlight) return;
+    form.style.display = "none";
+    try {
+      const annotations = await opts.onHighlight();
+      if (annotations && annotations.length > 0) {
+        annotationsData = annotations;
+        highlightBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg> ${annotations.length} highlighted`;
+      }
+    } catch {
+    }
+    form.style.display = "flex";
+  });
+  submitBtn?.addEventListener("click", () => {
+    const title = container.querySelector("#cf-title")?.value;
+    const desc = container.querySelector("#cf-desc")?.value;
+    const type = container.querySelector("#cf-type")?.value;
+    const priority = container.querySelector("#cf-priority")?.value;
+    if (!title?.trim()) return;
+    onSubmitCallback?.({ title, description: desc, type, priority, screenshot: screenshotDataUrl || void 0, annotations: annotationsData.length > 0 ? annotationsData : void 0 });
+    container.querySelector("#cf-title").value = "";
+    container.querySelector("#cf-desc").value = "";
+    screenshotDataUrl = null;
+    annotationsData = [];
+    if (screenshotPreview) screenshotPreview.style.display = "none";
+    form.style.display = "none";
+    showToast("Feedback sent!");
+  });
+}
+function unmountWidget() {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+}
+function showToast(msg) {
+  const toast = document.createElement("div");
+  toast.textContent = msg;
+  toast.style.cssText = "position:fixed;bottom:80px;right:20px;background:#10b981;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;z-index:100001;font-family:system-ui;box-shadow:0 2px 8px rgba(0,0,0,.15);";
+  document.body.appendChild(toast);
+  setTimeout(() => toast.remove(), 3e3);
+}
+function getPositionCSS(pos) {
+  switch (pos) {
+    case "bottom-left":
+      return "bottom:20px;left:20px;";
+    case "top-right":
+      return "top:20px;right:20px;";
+    case "top-left":
+      return "top:20px;left:20px;";
+    default:
+      return "bottom:20px;right:20px;";
+  }
+}
+function getFormPositionCSS(pos) {
+  switch (pos) {
+    case "bottom-left":
+      return "bottom:70px;left:20px;";
+    case "top-right":
+      return "top:70px;right:20px;";
+    case "top-left":
+      return "top:70px;left:20px;";
+    default:
+      return "bottom:70px;right:20px;";
+  }
+}
+function getWidgetHTML(cfg) {
+  const posBtn = getPositionCSS(cfg.position);
+  const posForm = getFormPositionCSS(cfg.position);
+  return `
+<style>
+  #cf-trigger{position:fixed;${posBtn}z-index:100000;background:${cfg.color};color:#fff;border:none;border-radius:50px;padding:10px 18px;font-size:13px;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:6px;transition:transform .15s}
+  #cf-trigger:hover{transform:scale(1.05)}
+  #cf-trigger svg{width:16px;height:16px}
+  #cf-form{position:fixed;${posForm}z-index:100000;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);width:360px;padding:16px;font-family:system-ui,-apple-system,sans-serif;display:none;flex-direction:column;gap:10px}
+  #cf-form h3{margin:0;font-size:15px;font-weight:600;color:#111}
+  #cf-form input,#cf-form textarea,#cf-form select{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box;outline:none;transition:border .15s}
+  #cf-form input:focus,#cf-form textarea:focus,#cf-form select:focus{border-color:${cfg.color}}
+  #cf-form textarea{resize:vertical;min-height:60px}
+  .cf-row{display:flex;gap:8px}
+  .cf-row select{flex:1}
+  .cf-tools{display:flex;gap:6px}
+  .cf-tool-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;color:#475569;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
+  .cf-tool-btn:hover{background:#f1f5f9;border-color:#cbd5e1}
+  .cf-tool-btn svg{width:14px;height:14px}
+  #cf-submit{background:${cfg.color};color:#fff;border:none;border-radius:8px;padding:9px;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s}
+  #cf-submit:hover{opacity:.9}
+  #cf-close{position:absolute;top:10px;right:12px;background:none;border:none;cursor:pointer;font-size:18px;color:#94a3b8;line-height:1}
+  #cf-screenshot-preview{display:none;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;max-height:120px}
+  #cf-screenshot-preview img{width:100%;height:auto;display:block}
+</style>
+<button id="cf-trigger">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+  ${cfg.text}
+</button>
+<div id="cf-form">
+  <button id="cf-close">&times;</button>
+  <h3>Report Feedback</h3>
+  <input id="cf-title" type="text" placeholder="Title *" />
+  <textarea id="cf-desc" placeholder="Description (optional)"></textarea>
+  <div class="cf-row">
+    <select id="cf-type">
+      <option value="BUG">Bug</option>
+      <option value="FEATURE">Feature</option>
+      <option value="IMPROVEMENT">Improvement</option>
+      <option value="QUESTION">Question</option>
+    </select>
+    <select id="cf-priority">
+      <option value="LOW">Low</option>
+      <option value="MEDIUM" selected>Medium</option>
+      <option value="HIGH">High</option>
+      <option value="CRITICAL">Critical</option>
+    </select>
+  </div>
+  <div class="cf-tools">
+    <button type="button" class="cf-tool-btn" id="cf-screenshot">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
+      Screenshot
+    </button>
+    <button type="button" class="cf-tool-btn" id="cf-highlight">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+      Highlight
+    </button>
+  </div>
+  <div id="cf-screenshot-preview"><img src="" alt="screenshot" /></div>
+  <button id="cf-submit">Send Feedback</button>
+</div>`;
+}
+
+// src/index.ts
+var SDK_VERSION = "1.1.0";
+var DEFAULT_ENDPOINT = "https://api.checkflow.space/api/v1";
+var config = null;
+function init(cfg) {
+  config = {
+    enabled: true,
+    endpoint: DEFAULT_ENDPOINT,
+    environment: "production",
+    ...cfg
+  };
+  if (!config.enabled) return;
+  installInterceptors();
+  if (typeof window !== "undefined") {
+    loadHtml2Canvas().catch(() => {
+    });
+  }
+  if (typeof window !== "undefined" && config.widget?.showOnInit !== false) {
+    mountWidget(
+      config.widget,
+      (data) => {
+        sendFeedback({
+          title: data.title,
+          description: data.description,
+          type: data.type,
+          priority: data.priority,
+          screenshot_data: data.screenshot,
+          annotations: data.annotations
+        });
+      },
+      {
+        onScreenshot: () => captureScreenshot(),
+        onHighlight: () => startHighlighting()
+      }
+    );
+  }
+}
+async function sendFeedback(data) {
+  if (!config) {
+    return { success: false, error: { message: "SDK not initialized. Call init() first.", code: "NOT_INITIALIZED" } };
+  }
+  const context = typeof window !== "undefined" ? collectContext() : {};
+  const perf = typeof window !== "undefined" ? collectPerformance() : void 0;
+  const consoleLogs = getConsoleLogs();
+  const jsErrors = getJavascriptErrors();
+  const payload = {
+    ...data,
+    ...context,
+    environment: config.environment,
+    performance_metrics: perf,
+    console_logs: consoleLogs.length > 0 ? consoleLogs : void 0,
+    javascript_errors: jsErrors.length > 0 ? jsErrors : void 0,
+    sdk_version: SDK_VERSION
+  };
+  if (data.screenshot_data) {
+    payload.screenshot_data = data.screenshot_data;
+  }
+  if (data.annotations && data.annotations.length > 0) {
+    payload.annotations = data.annotations;
+  }
+  try {
+    const res = await fetch(`${config.endpoint}/sdk/feedback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": config.apiKey
+      },
+      body: JSON.stringify(payload)
+    });
+    const json = await res.json();
+    if (!res.ok) {
+      return { success: false, error: json.error || { message: "Request failed", code: "REQUEST_FAILED" } };
+    }
+    return { success: true, data: json.data };
+  } catch (err) {
+    return { success: false, error: { message: err.message, code: "NETWORK_ERROR" } };
+  }
+}
+function showWidget() {
+  if (!config) return;
+  mountWidget(
+    config.widget,
+    (data) => {
+      sendFeedback({
+        title: data.title,
+        description: data.description,
+        type: data.type,
+        priority: data.priority,
+        screenshot_data: data.screenshot,
+        annotations: data.annotations
+      });
+    },
+    {
+      onScreenshot: () => captureScreenshot(),
+      onHighlight: () => startHighlighting()
+    }
+  );
+}
+function hideWidget() {
+  unmountWidget();
+}
+function destroy() {
+  unmountWidget();
+  clearLogs();
+  clearScreenshot();
+  config = null;
+}
+export {
+  captureScreenshot,
+  destroy,
+  hideWidget,
+  init,
+  sendFeedback,
+  showWidget,
+  startHighlighting
+};

package/dist/react.d.mts

@@ -0,0 +1,28 @@
+import { a as FeedbackResponse, H as HighlightAnnotation, C as CheckflowConfig } from './highlighter-D_wZWHlS.mjs';
+
+/**
+ * Initialize Checkflow in a React/Next.js app.
+ * Call this in your root layout or _app file.
+ */
+declare function useCheckflowInit(config: CheckflowConfig): void;
+/**
+ * Hook to send feedback programmatically from React components.
+ */
+declare function useCheckflowFeedback(): {
+    send: (data: {
+        title: string;
+        description?: string;
+        type?: string;
+        priority?: string;
+    }) => Promise<FeedbackResponse>;
+    screenshot: () => Promise<string | null>;
+    highlight: () => Promise<HighlightAnnotation[]>;
+    show: () => Promise<void>;
+    hide: () => Promise<void>;
+};
+/**
+ * Cleanup function for React useEffect.
+ */
+declare function destroyCheckflow(): void;
+
+export { destroyCheckflow, useCheckflowFeedback, useCheckflowInit };

package/dist/react.d.ts

@@ -0,0 +1,28 @@
+import { a as FeedbackResponse, H as HighlightAnnotation, C as CheckflowConfig } from './highlighter-D_wZWHlS.js';
+
+/**
+ * Initialize Checkflow in a React/Next.js app.
+ * Call this in your root layout or _app file.
+ */
+declare function useCheckflowInit(config: CheckflowConfig): void;
+/**
+ * Hook to send feedback programmatically from React components.
+ */
+declare function useCheckflowFeedback(): {
+    send: (data: {
+        title: string;
+        description?: string;
+        type?: string;
+        priority?: string;
+    }) => Promise<FeedbackResponse>;
+    screenshot: () => Promise<string | null>;
+    highlight: () => Promise<HighlightAnnotation[]>;
+    show: () => Promise<void>;
+    hide: () => Promise<void>;
+};
+/**
+ * Cleanup function for React useEffect.
+ */
+declare function destroyCheckflow(): void;
+
+export { destroyCheckflow, useCheckflowFeedback, useCheckflowInit };