@probat/react 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -1,6 +1,39 @@
 "use client";
 "use client";
-import React4, { createContext, useMemo, useEffect, useContext, useCallback, useState } from 'react';
+import React3, { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
+
+var ProbatContext = createContext(null);
+var DEFAULT_HOST = "https://gushi.onrender.com";
+function ProbatProvider({
+  userId,
+  host = DEFAULT_HOST,
+  bootstrap,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      host: host.replace(/\/$/, ""),
+      userId,
+      bootstrap: bootstrap ?? {}
+    }),
+    [userId, host, bootstrap]
+  );
+  return /* @__PURE__ */ React3.createElement(ProbatContext.Provider, { value }, children);
+}
+function useProbatContext() {
+  const ctx = useContext(ProbatContext);
+  if (!ctx) {
+    throw new Error(
+      "useProbatContext must be used within <ProbatProviderClient>. Wrap your app with <ProbatProviderClient userId={...}>."
+    );
+  }
+  return ctx;
+}
+
+// src/components/ProbatProviderClient.tsx
+function ProbatProviderClient(props) {
+  return React3.createElement(ProbatProvider, props);
+}
 
 // src/utils/environment.ts
 function detectEnvironment() {
@@ -14,1424 +47,442 @@ function detectEnvironment() {
   return "prod";
 }
 
-// src/utils/heatmapTracker.ts
-function getStoredExperimentInfo() {
-  if (typeof window === "undefined") return {};
-  try {
-    const proposalId = window.localStorage.getItem("probat_active_proposal_id") || void 0;
-    const variantLabel = window.localStorage.getItem("probat_active_variant_label") || void 0;
-    return { proposalId, variantLabel };
-  } catch {
-    return {};
+// src/utils/eventContext.ts
+var DISTINCT_ID_KEY = "probat:distinct_id";
+var SESSION_ID_KEY = "probat:session_id";
+var cachedDistinctId = null;
+var cachedSessionId = null;
+function generateId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  const bytes = new Uint8Array(16);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
   }
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
 }
-var HeatmapTracker = class {
-  constructor(config) {
-    this.clicks = [];
-    this.movements = [];
-    this.batchTimer = null;
-    this.cursorBatchTimer = null;
-    this.lastCursorTime = 0;
-    this.isInitialized = false;
-    this.handleMouseMove = (event) => {
-      if (!this.config.enabled || !this.config.trackCursor) return;
-      if (typeof window === "undefined") return;
-      const stored = getStoredExperimentInfo();
-      const activeProposalId = this.config.proposalId || stored.proposalId;
-      const activeVariantLabel = stored.proposalId === activeProposalId ? stored.variantLabel || this.config.variantLabel : this.config.variantLabel || stored.variantLabel;
-      const now2 = Date.now();
-      const cursorThrottle = this.config.cursorThrottle ?? 100;
-      if (now2 - this.lastCursorTime < cursorThrottle) {
-        return;
-      }
-      this.lastCursorTime = now2;
-      console.log("[PROBAT Heatmap] Cursor movement captured:", {
-        x: event.pageX,
-        y: event.pageY,
-        movementsInBatch: this.movements.length + 1
-      });
-      const pageUrl = window.location.href;
-      const siteUrl = window.location.origin;
-      const x = event.pageX;
-      const y = event.pageY;
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const movementEvent = {
-        page_url: pageUrl,
-        site_url: siteUrl,
-        x_coordinate: x,
-        y_coordinate: y,
-        viewport_width: viewportWidth,
-        viewport_height: viewportHeight,
-        session_id: this.sessionId,
-        proposal_id: activeProposalId,
-        variant_label: activeVariantLabel
-      };
-      this.movements.push(movementEvent);
-      const cursorBatchSize = this.config.cursorBatchSize ?? 50;
-      if (this.movements.length >= cursorBatchSize) {
-        this.sendCursorBatch();
-      } else {
-        this.scheduleCursorBatchSend();
-      }
-    };
-    this.handleClick = (event) => {
-      if (!this.config.enabled) return;
-      if (typeof window === "undefined") return;
-      const stored = getStoredExperimentInfo();
-      const activeProposalId = this.config.proposalId || stored.proposalId;
-      const activeVariantLabel = stored.proposalId === activeProposalId ? stored.variantLabel || this.config.variantLabel : this.config.variantLabel || stored.variantLabel;
-      const target = event.target;
-      if (!target) return;
-      if (this.shouldExcludeElement(target)) {
-        return;
-      }
-      const pageUrl = window.location.href;
-      const siteUrl = window.location.origin;
-      const x = event.pageX;
-      const y = event.pageY;
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const elementInfo = this.extractElementInfo(target);
-      const clickEvent = {
-        page_url: pageUrl,
-        site_url: siteUrl,
-        x_coordinate: x,
-        y_coordinate: y,
-        viewport_width: viewportWidth,
-        viewport_height: viewportHeight,
-        element_tag: elementInfo.tag,
-        element_class: elementInfo.class,
-        element_id: elementInfo.id,
-        session_id: this.sessionId,
-        proposal_id: activeProposalId,
-        variant_label: activeVariantLabel
-      };
-      this.clicks.push(clickEvent);
-      const batchSize = this.config.batchSize ?? 10;
-      if (this.clicks.length >= batchSize) {
-        this.sendBatch();
-      } else {
-        this.scheduleBatchSend();
-      }
-    };
-    this.sessionId = this.getOrCreateSessionId();
-    const stored = getStoredExperimentInfo();
-    this.config = {
-      apiBaseUrl: config.apiBaseUrl,
-      batchSize: config.batchSize || 10,
-      batchInterval: config.batchInterval || 5e3,
-      enabled: config.enabled !== false,
-      excludeSelectors: config.excludeSelectors || [
-        "[data-heatmap-exclude]",
-        'input[type="password"]',
-        'input[type="email"]',
-        "textarea"
-      ],
-      trackCursor: config.trackCursor !== false,
-      // Enable cursor tracking by default
-      cursorThrottle: config.cursorThrottle || 100,
-      // Capture cursor position every 100ms
-      cursorBatchSize: config.cursorBatchSize || 50,
-      // Send every 50 movements
-      proposalId: config.proposalId || stored.proposalId,
-      variantLabel: config.variantLabel || stored.variantLabel
-    };
-  }
-  getOrCreateSessionId() {
-    if (typeof window === "undefined") return "";
-    const storageKey = "probat_heatmap_session_id";
-    let sessionId = localStorage.getItem(storageKey);
-    if (!sessionId) {
-      sessionId = `heatmap_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
-      localStorage.setItem(storageKey, sessionId);
-    }
-    return sessionId;
-  }
-  shouldExcludeElement(element) {
-    if (!this.config.excludeSelectors) return false;
-    for (const selector of this.config.excludeSelectors) {
-      if (element.matches(selector) || element.closest(selector)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  extractElementInfo(element) {
-    return {
-      tag: element.tagName || null,
-      class: element.className && typeof element.className === "string" ? element.className : null,
-      id: element.id || null
-    };
-  }
-  scheduleCursorBatchSend() {
-    if (this.cursorBatchTimer) {
-      clearTimeout(this.cursorBatchTimer);
-    }
-    this.cursorBatchTimer = setTimeout(() => {
-      if (this.movements.length > 0) {
-        this.sendCursorBatch();
-      }
-    }, this.config.batchInterval ?? 5e3);
-  }
-  async sendCursorBatch() {
-    if (this.movements.length === 0) return;
-    const siteUrl = this.movements[0]?.site_url || window.location.origin;
-    const batch = {
-      movements: this.movements,
-      site_url: siteUrl,
-      proposal_id: this.config.proposalId,
-      variant_label: this.config.variantLabel
-    };
-    this.movements = [];
-    if (this.cursorBatchTimer) {
-      clearTimeout(this.cursorBatchTimer);
-      this.cursorBatchTimer = null;
-    }
-    try {
-      console.log("[PROBAT Heatmap] Sending cursor movements batch:", {
-        count: batch.movements.length,
-        site_url: batch.site_url
-      });
-      const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/cursor-movements`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(batch)
-        // Don't wait for response - fire and forget for performance
-      });
-      if (!response.ok) {
-        console.warn("[PROBAT Heatmap] Failed to send cursor movements:", response.status);
-      } else {
-        console.log("[PROBAT Heatmap] Successfully sent cursor movements batch");
-      }
-    } catch (error) {
-      console.warn("[PROBAT Heatmap] Error sending cursor movements:", error);
-    }
-  }
-  scheduleBatchSend() {
-    if (this.batchTimer) {
-      clearTimeout(this.batchTimer);
-    }
-    this.batchTimer = setTimeout(() => {
-      if (this.clicks.length > 0) {
-        this.sendBatch();
-      }
-    }, this.config.batchInterval ?? 5e3);
-  }
-  async sendBatch() {
-    if (this.clicks.length === 0) return;
-    if (this.batchTimer) {
-      clearTimeout(this.batchTimer);
-      this.batchTimer = null;
-    }
-    const siteUrl = this.clicks[0]?.site_url || window.location.origin;
-    const batch = {
-      clicks: [...this.clicks],
-      site_url: siteUrl
-    };
-    this.clicks = [];
-    try {
-      const response = await fetch(`${this.config.apiBaseUrl}/api/heatmap/clicks`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(batch)
-      });
-      if (!response.ok) {
-        console.warn("[PROBAT Heatmap] Failed to send clicks:", response.status);
-      }
-    } catch (error) {
-      console.warn("[PROBAT Heatmap] Error sending clicks:", error);
-    }
-  }
-  init() {
-    if (this.isInitialized) {
-      console.warn("[PROBAT Heatmap] Tracker already initialized");
-      return;
-    }
-    if (typeof window === "undefined") {
-      return;
-    }
-    const params = new URLSearchParams(window.location.search);
-    if (params.get("heatmap") === "true") {
-      console.log("[PROBAT Heatmap] Heatmap visualization mode detected");
-      const pageUrl = params.get("page_url");
-      if (pageUrl) {
-        this.config.enabled = false;
-        this.isInitialized = true;
-        this.enableVisualization(pageUrl);
-        return;
-      }
-    }
-    document.addEventListener("click", this.handleClick, true);
-    if (this.config.trackCursor) {
-      document.addEventListener("mousemove", this.handleMouseMove, { passive: true });
-      console.log("[PROBAT Heatmap] Cursor tracking enabled");
-    } else {
-      console.log("[PROBAT Heatmap] Cursor tracking disabled");
-    }
-    this.isInitialized = true;
-    console.log("[PROBAT Heatmap] Tracker initialized");
-    window.addEventListener("beforeunload", () => {
-      if (this.clicks.length > 0) {
-        const siteUrl = this.clicks[0]?.site_url || window.location.origin;
-        const batch = {
-          clicks: this.clicks,
-          site_url: siteUrl
-        };
-        const blob = new Blob([JSON.stringify(batch)], {
-          type: "application/json"
-        });
-        navigator.sendBeacon(
-          `${this.config.apiBaseUrl}/api/heatmap/clicks`,
-          blob
-        );
-      }
-      if (this.movements.length > 0) {
-        const siteUrl = this.movements[0]?.site_url || window.location.origin;
-        const batch = {
-          movements: this.movements,
-          site_url: siteUrl
-        };
-        const blob = new Blob([JSON.stringify(batch)], {
-          type: "application/json"
-        });
-        navigator.sendBeacon(
-          `${this.config.apiBaseUrl}/api/heatmap/cursor-movements`,
-          blob
-        );
-      }
-    });
-  }
-  stop() {
-    if (!this.isInitialized) return;
-    if (this.clicks.length > 0) {
-      this.sendBatch();
-    }
-    if (this.movements.length > 0) {
-      this.sendCursorBatch();
-    }
-    document.removeEventListener("click", this.handleClick, true);
-    if (this.config.trackCursor) {
-      document.removeEventListener("mousemove", this.handleMouseMove);
-    }
-    if (this.batchTimer) {
-      clearTimeout(this.batchTimer);
-      this.batchTimer = null;
-    }
-    if (this.cursorBatchTimer) {
-      clearTimeout(this.cursorBatchTimer);
-      this.cursorBatchTimer = null;
-    }
-    this.isInitialized = false;
-  }
-  /**
-   * Enable visualization mode
-   */
-  /**
-   * Enable visualization mode
-   */
-  async enableVisualization(pageUrl) {
-    console.log("[PROBAT Heatmap] Enabling visualization mode for:", pageUrl);
-    this.stop();
-    this.config.enabled = false;
-    try {
-      const url = new URL(`${this.config.apiBaseUrl}/api/heatmap/aggregate`);
-      url.searchParams.append("site_url", window.location.origin);
-      url.searchParams.append("page_url", pageUrl);
-      url.searchParams.append("days", "30");
-      const params = new URLSearchParams(window.location.search);
-      const proposalId = params.get("proposal_id");
-      const variantLabel = params.get("variant_label");
-      if (proposalId) url.searchParams.append("proposal_id", proposalId);
-      if (variantLabel) url.searchParams.append("variant_label", variantLabel);
-      const response = await fetch(url.toString());
-      if (!response.ok) throw new Error("Failed to fetch heatmap data");
-      const data = await response.json();
-      if (data && data.points) {
-        console.log(`[PROBAT Heatmap] Found ${data.points.length} points. Rendering...`);
-        this.renderHeatmapOverlay(data);
-      }
-    } catch (error) {
-      console.error("[PROBAT Heatmap] Visualization error:", error);
+function getDistinctId() {
+  if (cachedDistinctId) return cachedDistinctId;
+  if (typeof window === "undefined") return "server";
+  try {
+    const stored = localStorage.getItem(DISTINCT_ID_KEY);
+    if (stored) {
+      cachedDistinctId = stored;
+      return stored;
     }
+  } catch {
   }
-  /**
-   * Render heatmap overlay on valid points
-   */
-  renderHeatmapOverlay(data) {
-    const points = data.points;
-    const trackedWidth = data.viewport_width || 0;
-    const existing = document.getElementById("probat-heatmap-overlay");
-    if (existing) existing.remove();
-    const canvas = document.createElement("canvas");
-    canvas.id = "probat-heatmap-overlay";
-    canvas.style.position = "absolute";
-    canvas.style.top = "0";
-    canvas.style.left = "0";
-    canvas.style.zIndex = "999999";
-    canvas.style.pointerEvents = "none";
-    canvas.style.display = "block";
-    canvas.style.margin = "0";
-    canvas.style.padding = "0";
-    document.documentElement.appendChild(canvas);
-    const resize = () => {
-      const dpr = window.devicePixelRatio || 1;
-      const width = document.documentElement.scrollWidth;
-      const height = document.documentElement.scrollHeight;
-      const currentWidth = window.innerWidth;
-      let offsetX = 0;
-      if (trackedWidth > 0 && trackedWidth !== currentWidth) {
-        offsetX = (currentWidth - trackedWidth) / 2;
-        console.log(`[PROBAT Heatmap] Horizontal adjustment: offset=${offsetX}px (Tracked: ${trackedWidth}px, Current: ${currentWidth}px)`);
-      }
-      canvas.style.width = width + "px";
-      canvas.style.height = height + "px";
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        this.renderPoints(ctx, points, offsetX);
-      }
-    };
-    window.addEventListener("resize", resize);
-    setTimeout(resize, 300);
-    setTimeout(resize, 1e3);
-    setTimeout(resize, 3e3);
-  }
-  /**
-   * Draw points on canvas
-   */
-  renderPoints(ctx, points, offsetX) {
-    points.forEach((point) => {
-      const x = point.x + offsetX;
-      const y = point.y;
-      const intensity = point.intensity;
-      const radius = 20 + intensity * 12;
-      const color = this.getHeatmapColor(intensity);
-      const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
-      gradient.addColorStop(0, this.rgbToRgba(color, 0.8));
-      gradient.addColorStop(1, this.rgbToRgba(color, 0));
-      ctx.beginPath();
-      ctx.arc(x, y, radius, 0, 2 * Math.PI);
-      ctx.fillStyle = gradient;
-      ctx.fill();
-    });
-  }
-  /**
-   * Get heatmap color based on intensity
-   */
-  getHeatmapColor(intensity) {
-    const clamped = Math.max(0, Math.min(1, intensity));
-    if (clamped < 0.25) {
-      const t = clamped / 0.25;
-      const r = Math.floor(0 + t * 0);
-      const g = Math.floor(0 + t * 255);
-      const b = Math.floor(255 + t * (255 - 255));
-      return `rgb(${r}, ${g}, ${b})`;
-    } else if (clamped < 0.5) {
-      const t = (clamped - 0.25) / 0.25;
-      const r = Math.floor(0 + t * 0);
-      const g = 255;
-      const b = Math.floor(255 + t * (0 - 255));
-      return `rgb(${r}, ${g}, ${b})`;
-    } else if (clamped < 0.75) {
-      const t = (clamped - 0.5) / 0.25;
-      const r = Math.floor(0 + t * 255);
-      const g = 255;
-      const b = 0;
-      return `rgb(${r}, ${g}, ${b})`;
-    } else {
-      const t = (clamped - 0.75) / 0.25;
-      const r = 255;
-      const g = Math.floor(255 + t * (0 - 255));
-      const b = 0;
-      return `rgb(${r}, ${g}, ${b})`;
-    }
+  const id = `anon_${generateId()}`;
+  cachedDistinctId = id;
+  try {
+    localStorage.setItem(DISTINCT_ID_KEY, id);
+  } catch {
   }
-  /**
-   * Convert RGB to RGBA
-   */
-  rgbToRgba(rgb, opacity) {
-    const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-    if (match) {
-      return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacity})`;
+  return id;
+}
+function getSessionId() {
+  if (cachedSessionId) return cachedSessionId;
+  if (typeof window === "undefined") return "server";
+  try {
+    const stored = sessionStorage.getItem(SESSION_ID_KEY);
+    if (stored) {
+      cachedSessionId = stored;
+      return stored;
     }
-    return rgb;
+  } catch {
   }
-};
-var trackerInstance = null;
-function initHeatmapTracking(config) {
-  if (trackerInstance) {
-    trackerInstance.stop();
+  const id = `sess_${generateId()}`;
+  cachedSessionId = id;
+  try {
+    sessionStorage.setItem(SESSION_ID_KEY, id);
+  } catch {
   }
-  trackerInstance = new HeatmapTracker(config);
-  trackerInstance.init();
-  return trackerInstance;
+  return id;
 }
-function getHeatmapTracker() {
-  return trackerInstance;
+function getPageKey() {
+  if (typeof window === "undefined") return "";
+  return window.location.pathname + window.location.search;
 }
-function stopHeatmapTracking() {
-  if (trackerInstance) {
-    trackerInstance.stop();
-    trackerInstance = null;
-  }
+function getPageUrl() {
+  if (typeof window === "undefined") return "";
+  return window.location.href;
 }
-
-// src/context/ProbatContext.tsx
-var ProbatContext = createContext(null);
-function ProbatProvider({
-  apiBaseUrl,
-  clientKey,
-  environment: explicitEnvironment,
-  repoFullName: explicitRepoFullName,
-  proposalId,
-  variantLabel,
-  children
-}) {
-  const storedProposalId = typeof window !== "undefined" ? window.localStorage.getItem("probat_active_proposal_id") || void 0 : void 0;
-  const storedVariantLabel = typeof window !== "undefined" ? window.localStorage.getItem("probat_active_variant_label") || void 0 : void 0;
-  const contextValue = useMemo(() => {
-    const resolvedApiBaseUrl = apiBaseUrl || typeof import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_API || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_API || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
-    const environment = explicitEnvironment || detectEnvironment();
-    const resolvedRepoFullName = explicitRepoFullName || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_REPO || typeof import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_REPO || typeof window !== "undefined" && window.__PROBAT_REPO || void 0;
-    const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
-    const isHeatmapMode = params?.get("heatmap") === "true";
-    let urlProposalId;
-    let urlVariantLabel;
-    if (isHeatmapMode && params) {
-      urlProposalId = params.get("proposal_id") || void 0;
-      urlVariantLabel = params.get("variant_label") || void 0;
-      console.log("[PROBAT] Heatmap mode: Overriding variant from URL", { urlProposalId, urlVariantLabel });
-    }
-    const finalProposalId = urlProposalId || proposalId || (!isHeatmapMode ? storedProposalId : void 0);
-    const finalVariantLabel = urlVariantLabel || variantLabel || (!isHeatmapMode ? storedVariantLabel : void 0);
-    return {
-      apiBaseUrl: resolvedApiBaseUrl,
-      environment,
-      clientKey,
-      repoFullName: resolvedRepoFullName,
-      proposalId: finalProposalId,
-      variantLabel: finalVariantLabel
-    };
-  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName, proposalId, variantLabel, storedProposalId, storedVariantLabel]);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      initHeatmapTracking({
-        apiBaseUrl: contextValue.apiBaseUrl,
-        batchSize: 10,
-        batchInterval: 5e3,
-        enabled: true,
-        excludeSelectors: [
-          "[data-heatmap-exclude]",
-          'input[type="password"]',
-          'input[type="email"]',
-          "textarea"
-        ],
-        // Explicitly enable cursor tracking with sensible defaults
-        trackCursor: true,
-        cursorThrottle: 100,
-        // capture every 100ms
-        cursorBatchSize: 50,
-        // send every 50 movements (or after batchInterval)
-        proposalId: contextValue.proposalId,
-        variantLabel: contextValue.variantLabel
-      });
-    }
-    return () => {
-      stopHeatmapTracking();
-    };
-  }, [contextValue.apiBaseUrl, contextValue.proposalId, contextValue.variantLabel]);
-  return /* @__PURE__ */ React4.createElement(ProbatContext.Provider, { value: contextValue }, children);
-}
-function useProbatContext() {
-  const context = useContext(ProbatContext);
-  if (!context) {
-    throw new Error(
-      "useProbatContext must be used within a ProbatProvider. Please wrap your app with <ProbatProvider>."
-    );
-  }
-  return context;
+function getReferrer() {
+  if (typeof document === "undefined") return "";
+  return document.referrer;
 }
-function ProbatProviderClient(props) {
-  return React4.createElement(ProbatProvider, props);
+function buildEventContext() {
+  return {
+    distinct_id: getDistinctId(),
+    session_id: getSessionId(),
+    $page_url: getPageUrl(),
+    $pathname: typeof window !== "undefined" ? window.location.pathname : "",
+    $referrer: getReferrer()
+  };
 }
-var pendingFetches = /* @__PURE__ */ new Map();
-async function fetchDecision(baseUrl, proposalId) {
-  const existingFetch = pendingFetches.get(proposalId);
-  if (existingFetch) {
-    return existingFetch;
-  }
-  const fetchPromise = (async () => {
+
+// src/utils/api.ts
+var pendingDecisions = /* @__PURE__ */ new Map();
+async function fetchDecision(host, experimentId, distinctId) {
+  const existing = pendingDecisions.get(experimentId);
+  if (existing) return existing;
+  const promise = (async () => {
     try {
-      const url = `${baseUrl.replace(/\/$/, "")}/retrieve_react_experiment/${encodeURIComponent(proposalId)}`;
+      const url = `${host.replace(/\/$/, "")}/experiment/decide`;
       const res = await fetch(url, {
         method: "POST",
-        headers: { Accept: "application/json" },
-        credentials: "include"
-        // Include cookies for user identification
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          experiment_id: experimentId,
+          distinct_id: distinctId
+        })
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
-      const experiment_id = (data.experiment_id || `exp_${proposalId}`).toString();
-      const label = data.label && data.label.trim() ? data.label : "control";
-      if (typeof window !== "undefined") {
-        try {
-          window.localStorage.setItem("probat_active_proposal_id", proposalId);
-          window.localStorage.setItem("probat_active_variant_label", label);
-        } catch (e) {
-          console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
-        }
-      }
-      return { experiment_id, label };
+      return data.variant_key || "control";
     } finally {
-      pendingFetches.delete(proposalId);
+      pendingDecisions.delete(experimentId);
     }
   })();
-  pendingFetches.set(proposalId, fetchPromise);
-  return fetchPromise;
+  pendingDecisions.set(experimentId, promise);
+  return promise;
 }
-async function sendMetric(baseUrl, proposalId, metricName, variantLabel = "control", experimentId, dimensions = {}) {
-  const url = `${baseUrl.replace(/\/$/, "")}/send_metrics/${encodeURIComponent(proposalId)}`;
-  const body = {
-    experiment_id: experimentId ?? null,
-    variant_label: variantLabel,
-    metric_name: metricName,
-    metric_value: 1,
-    metric_unit: "count",
-    source: "react",
-    environment: detectEnvironment(),
-    // Include environment (dev or prod)
-    dimensions,
-    captured_at: (/* @__PURE__ */ new Date()).toISOString()
+function sendMetric(host, event, properties) {
+  if (typeof window === "undefined") return;
+  const ctx = buildEventContext();
+  const payload = {
+    event,
+    properties: {
+      ...ctx,
+      environment: detectEnvironment(),
+      source: "react-sdk",
+      captured_at: (/* @__PURE__ */ new Date()).toISOString(),
+      ...properties
+    }
   };
   try {
-    await fetch(url, {
+    const url = `${host.replace(/\/$/, "")}/experiment/metrics`;
+    fetch(url, {
       method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
+      headers: { "Content-Type": "application/json" },
       credentials: "include",
-      // CRITICAL: Include cookies to distinguish different users
-      body: JSON.stringify(body)
+      body: JSON.stringify(payload)
+    }).catch(() => {
     });
   } catch {
   }
 }
-function extractClickMeta(event) {
-  if (!event || !event.target) return void 0;
-  const rawTarget = event.target;
-  if (!rawTarget) return void 0;
-  const actionable = rawTarget.closest(
-    "[data-probat-conversion='true'], button, a, [role='button']"
-  );
-  if (!actionable) return void 0;
+function extractClickMeta(target) {
+  if (!target || !(target instanceof HTMLElement)) return null;
+  const primary = target.closest('[data-probat-click="primary"]');
+  if (primary) return buildMeta(primary, true);
+  const interactive = target.closest('button, a, [role="button"]');
+  if (interactive) return buildMeta(interactive, false);
+  return null;
+}
+function buildMeta(el, isPrimary) {
   const meta = {
-    target_tag: actionable.tagName
+    click_target_tag: el.tagName,
+    click_is_primary: isPrimary
   };
-  if (actionable.id) meta.target_id = actionable.id;
-  const attr = actionable.getAttribute("data-probat-conversion");
-  if (attr) meta.conversion_attr = attr;
-  const text = actionable.textContent?.trim();
-  if (text) meta.target_text = text.slice(0, 120);
+  if (el.id) meta.click_target_id = el.id;
+  const text = el.textContent?.trim();
+  if (text) meta.click_target_text = text.slice(0, 120);
   return meta;
 }
-var componentConfigCache = /* @__PURE__ */ new Map();
-async function fetchComponentExperimentConfig(baseUrl, repoFullName, componentPath) {
-  const cacheKey = `${repoFullName}:${componentPath}`;
-  const existingFetch = componentConfigCache.get(cacheKey);
-  if (existingFetch) {
-    return existingFetch;
-  }
-  const fetchPromise = (async () => {
-    try {
-      const url = new URL(`${baseUrl.replace(/\/$/, "")}/get_component_experiment_config`);
-      url.searchParams.set("repo_full_name", repoFullName);
-      url.searchParams.set("component_path", componentPath);
-      const res = await fetch(url.toString(), {
-        method: "GET",
-        headers: { Accept: "application/json" },
-        credentials: "include"
-      });
-      if (res.status === 404) {
-        return null;
-      }
-      if (!res.ok) {
-        throw new Error(`HTTP ${res.status}`);
-      }
-      const data = await res.json();
-      if (typeof window !== "undefined" && data?.proposal_id) {
-        try {
-          window.localStorage.setItem("probat_active_proposal_id", data.proposal_id);
-        } catch (e) {
-          console.warn("[PROBAT] Failed to set proposal_id in localStorage:", e);
-        }
-      }
-      return data;
-    } catch (e) {
-      console.warn(`[PROBAT] Failed to fetch component config: ${e}`);
-      return null;
-    } finally {
-      componentConfigCache.delete(cacheKey);
-    }
-  })();
-  componentConfigCache.set(cacheKey, fetchPromise);
-  return fetchPromise;
+
+// src/utils/dedupeStorage.ts
+var PREFIX = "probat:seen:";
+var memorySet = /* @__PURE__ */ new Set();
+function makeDedupeKey(experimentId, variantKey, instanceId, pageKey) {
+  return `${PREFIX}${experimentId}:${variantKey}:${instanceId}:${pageKey}`;
 }
-var variantComponentCache = /* @__PURE__ */ new Map();
-var moduleCache = /* @__PURE__ */ new Map();
-if (typeof window !== "undefined") {
-  window.__probatReact = React4;
-  window.React = window.React || React4;
+function hasSeen(key) {
+  if (memorySet.has(key)) return true;
+  if (typeof window === "undefined") return false;
+  try {
+    return sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
 }
-function resolveRelativePath(relativePath, basePath) {
-  const baseDir = basePath.substring(0, basePath.lastIndexOf("/"));
-  const parts = baseDir.split("/").filter(Boolean);
-  const relativeParts = relativePath.split("/").filter(Boolean);
-  for (const part of relativeParts) {
-    if (part === "..") {
-      parts.pop();
-    } else if (part !== ".") {
-      parts.push(part);
-    }
+function markSeen(key) {
+  memorySet.add(key);
+  if (typeof window === "undefined") return;
+  try {
+    sessionStorage.setItem(key, "1");
+  } catch {
   }
-  return "/" + parts.join("/");
 }
-async function loadRelativeModule(absolutePath, baseFilePath, repoFullName, baseRef) {
-  const cacheKey = `${baseFilePath}:${absolutePath}`;
-  if (moduleCache.has(cacheKey)) {
-    return moduleCache.get(cacheKey);
+var INSTANCE_PREFIX = "probat:instance:";
+function shortId() {
+  const bytes = new Uint8Array(4);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < 4; i++) bytes[i] = Math.floor(Math.random() * 256);
   }
-  const extensions = [".jsx", ".tsx", ".js", ".ts"];
-  let moduleCode = null;
-  let modulePath = null;
-  for (const ext of extensions) {
-    const testPath = absolutePath + (absolutePath.includes(".") ? "" : ext);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+function resolveStableId(storageKey) {
+  if (typeof window !== "undefined") {
     try {
-      const localRes = await fetch(testPath, {
-        method: "GET",
-        headers: { Accept: "text/plain" }
-      });
-      if (localRes.ok) {
-        moduleCode = await localRes.text();
-        modulePath = testPath;
-        break;
-      }
+      const stored = sessionStorage.getItem(storageKey);
+      if (stored) return stored;
     } catch {
     }
-    if (!moduleCode && repoFullName) {
-      try {
-        const githubPath = testPath.startsWith("/") ? testPath.substring(1) : testPath;
-        const githubUrl = `https://raw.githubusercontent.com/${repoFullName}/${baseRef || "main"}/${githubPath}`;
-        const res = await fetch(githubUrl, { method: "GET", headers: { Accept: "text/plain" } });
-        if (res.ok) {
-          moduleCode = await res.text();
-          modulePath = testPath;
-          break;
-        }
-      } catch {
-      }
-    }
-  }
-  if (!moduleCode || !modulePath) {
-    throw new Error(`Could not resolve module: ${absolutePath} from ${baseFilePath}`);
   }
-  let Babel;
-  if (typeof window !== "undefined" && window.Babel) {
-    Babel = window.Babel;
-  } else {
+  const id = `inst_${shortId()}`;
+  if (typeof window !== "undefined") {
     try {
-      const babelModule = await import('@babel/standalone');
-      Babel = babelModule.default || babelModule;
+      sessionStorage.setItem(storageKey, id);
     } catch {
-      throw new Error("Babel not available for compiling relative import");
     }
   }
-  let processedCode = moduleCode;
-  processedCode = processedCode.replace(/^import\s+['"].*\.css['"];?\s*$/gm, "");
-  processedCode = processedCode.replace(/^import\s+React\s+from\s+['"]react['"];?\s*$/m, "const React = window.React || globalThis.React;");
-  processedCode = processedCode.replace(/import\.meta\.env\.[\w$]+/g, "undefined");
-  processedCode = processedCode.replace(/\bimport\.meta\b/g, "({})");
-  const isTSX = modulePath.endsWith(".tsx");
-  const compiled = Babel.transform(processedCode, {
-    presets: [
-      ["react", { runtime: "classic" }],
-      ["typescript", { allExtensions: true, isTSX }]
-    ],
-    plugins: [["transform-modules-commonjs", { allowTopLevelThis: true }]],
-    sourceType: "module",
-    filename: modulePath
-  }).code;
-  const moduleCodeWrapper = `
-        var require = function(name) {
-            if (name === "react" || name === "react/jsx-runtime") {
-                return window.React || globalThis.React;
-            }
-            if (name.startsWith("/@vite") || name.includes("@vite/client")) {
-                return {};
-            }
-            throw new Error("Unsupported module in relative import: " + name);
-        };
-        var module = { exports: {} };
-        var exports = module.exports;
-        ${compiled}
-        return module.exports;
-    `;
-  const moduleExports = new Function(moduleCodeWrapper)();
-  moduleCache.set(cacheKey, moduleExports);
-  return moduleExports;
+  return id;
 }
-async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath, repoFullName, baseRef) {
-  if (!filePath) {
-    return null;
-  }
-  const cacheKey = `${proposalId}:${experimentId}`;
-  const existingLoad = variantComponentCache.get(cacheKey);
-  if (existingLoad) {
-    return existingLoad;
+var slotCounters = /* @__PURE__ */ new Map();
+var resetScheduled = false;
+function claimSlot(groupKey) {
+  const idx = slotCounters.get(groupKey) ?? 0;
+  slotCounters.set(groupKey, idx + 1);
+  if (!resetScheduled) {
+    resetScheduled = true;
+    Promise.resolve().then(() => {
+      slotCounters.clear();
+      resetScheduled = false;
+    });
   }
-  const loadPromise = (async () => {
-    try {
-      let code = "";
-      let rawCode = "";
-      let rawCodeFetched = false;
-      const isBrowser = typeof window !== "undefined";
-      const isNextJS = isBrowser && (window.__NEXT_DATA__ !== void 0 || window.__NEXT_LOADED_PAGES__ !== void 0 || typeof globalThis.__NEXT_DATA__ !== "undefined");
-      if (isBrowser && !isNextJS) {
-        try {
-          const variantUrl = `/probat/${filePath}`;
-          const dynamicImportFunc = new Function("url", "return import(url)");
-          const mod = await dynamicImportFunc(variantUrl);
-          const VariantComponent2 = mod?.default || mod;
-          if (VariantComponent2 && typeof VariantComponent2 === "function") {
-            console.log(`[PROBAT] \u2705 Loaded variant via dynamic import (CSR): ${variantUrl}`);
-            return VariantComponent2;
-          }
-        } catch (dynamicImportError) {
-          console.debug(`[PROBAT] Dynamic import failed, using fetch+babel:`, dynamicImportError);
-        }
-      }
-      const localUrl = `/probat/${filePath}`;
-      try {
-        const localRes = await fetch(localUrl, {
-          method: "GET",
-          headers: { Accept: "text/plain" }
-        });
-        if (localRes.ok) {
-          rawCode = await localRes.text();
-          rawCodeFetched = true;
-          console.log(`[PROBAT] \u2705 Loaded variant from local (user's repo): ${localUrl}`);
-        }
-      } catch {
-        console.debug(`[PROBAT] Local file not available (${localUrl}), trying GitHub...`);
-      }
-      if (!rawCodeFetched && repoFullName) {
-        const githubPath = `probat/${filePath}`;
-        const gitRef = baseRef || "main";
-        const githubUrl = `https://raw.githubusercontent.com/${repoFullName}/${gitRef}/${githubPath}`;
-        const res = await fetch(githubUrl, { method: "GET", headers: { Accept: "text/plain" } });
-        if (res.ok) {
-          rawCode = await res.text();
-          rawCodeFetched = true;
-          console.log(`[PROBAT] \u26A0\uFE0F Loaded variant from GitHub (fallback): ${githubUrl}`);
-        } else {
-          console.warn(`[PROBAT] \u26A0\uFE0F GitHub fetch failed (${res.status}), falling back to server compilation`);
-        }
-      }
-      if (rawCodeFetched && rawCode) {
-        let Babel;
-        if (typeof window !== "undefined" && window.Babel) {
-          Babel = window.Babel;
-        } else {
-          try {
-            const babelModule = await import('@babel/standalone');
-            Babel = babelModule.default || babelModule;
-          } catch (importError) {
-            try {
-              await new Promise((resolve, reject) => {
-                if (typeof document === "undefined") {
-                  reject(new Error("Document not available"));
-                  return;
-                }
-                if (window.Babel) {
-                  Babel = window.Babel;
-                  resolve();
-                  return;
-                }
-                const script = document.createElement("script");
-                script.src = "https://unpkg.com/@babel/standalone/babel.min.js";
-                script.async = true;
-                script.onload = () => {
-                  Babel = window.Babel;
-                  if (!Babel) reject(new Error("Babel not found after script load"));
-                  else resolve();
-                };
-                script.onerror = () => reject(new Error("Failed to load Babel from CDN"));
-                document.head.appendChild(script);
-              });
-            } catch (babelError) {
-              console.error("[PROBAT] Failed to load Babel, falling back to server compilation", babelError);
-              rawCodeFetched = false;
-            }
-          }
-        }
-        if (rawCodeFetched && rawCode && Babel) {
-          const isTSX = filePath.endsWith(".tsx");
-          rawCode = rawCode.replace(/^import\s+['"].*\.css['"];?\s*$/gm, "");
-          rawCode = rawCode.replace(/^import\s+.*from\s+['"].*\.css['"];?\s*$/gm, "");
-          rawCode = rawCode.replace(
-            /^import\s+React(?:\s*,\s*\{[^}]*\})?\s+from\s+['"]react['"];?\s*$/m,
-            "const React = window.React || globalThis.React;"
-          );
-          rawCode = rawCode.replace(
-            /^import\s+\*\s+as\s+React\s+from\s+['"]react['"];?\s*$/m,
-            "const React = window.React || globalThis.React;"
-          );
-          rawCode = rawCode.replace(
-            /^import\s+\{([^}]+)\}\s+from\s+['"]react['"];?\s*$/m,
-            (match, imports) => `const {${imports}} = window.React || globalThis.React;`
-          );
-          rawCode = rawCode.replace(/import\.meta\.env\.[\w$]+/g, "undefined");
-          rawCode = rawCode.replace(/\bimport\.meta\b/g, "({})");
-          rawCode = rawCode.replace(/^import\s+.*\/@vite\/client.*$/gm, "");
-          rawCode = rawCode.replace(/import\.meta\.hot(?:\.[\w$]+)*/g, "undefined");
-          const relativeImportMap = /* @__PURE__ */ new Map();
-          rawCode = rawCode.replace(
-            /^import\s+(\w+)\s+from\s+['"](\.\.?\/[^'"]+)['"];?\s*$/gm,
-            (match, importName, relativePath) => {
-              const baseDir = filePath.substring(0, filePath.lastIndexOf("/"));
-              const resolvedPath = resolveRelativePath(relativePath, baseDir);
-              const absolutePath = resolvedPath.startsWith("/") ? resolvedPath : "/" + resolvedPath;
-              relativeImportMap.set(importName, absolutePath);
-              return `import ${importName} from "${absolutePath}";`;
-            }
-          );
-          const compiled = Babel.transform(rawCode, {
-            presets: [
-              ["react", { runtime: "classic" }],
-              ["typescript", { allExtensions: true, isTSX }]
-            ],
-            plugins: [["transform-modules-commonjs", { allowTopLevelThis: true }]],
-            sourceType: "module",
-            filename: filePath
-          }).code;
-          const relativeModules = {};
-          if (relativeImportMap.size > 0) {
-            for (const [importName, absolutePath] of relativeImportMap.entries()) {
-              try {
-                const moduleExports = await loadRelativeModule(absolutePath, filePath, repoFullName, baseRef);
-                relativeModules[absolutePath] = moduleExports.default || moduleExports;
-              } catch (err) {
-                console.warn(`[PROBAT] Failed to load relative import ${absolutePath}:`, err);
-                relativeModules[absolutePath] = null;
-              }
-            }
-          }
-          const relativeModulesJson = JSON.stringify(relativeModules);
-          code = `
-                        var __probatVariant = (function() {
-                            var relativeModules = ${relativeModulesJson};
-                            var require = function(name) {
-                                if (name === "react" || name === "react/jsx-runtime") {
-                                    return window.React || globalThis.React;
-                                }
-                                if (name.startsWith("/@vite") || name.includes("@vite/client") || name.includes(".vite/deps")) {
-                                    return {};
-                                }
-                                if (name === "react/jsx-runtime.js") {
-                                    return window.React || globalThis.React;
-                                }
-                                // Handle relative imports (now converted to absolute paths)
-                                if (name.startsWith("/") && relativeModules.hasOwnProperty(name)) {
-                                    var mod = relativeModules[name];
-                                    if (mod === null) {
-                                        throw new Error("Failed to load module: " + name);
-                                    }
-                                    return mod;
-                                }
-                                throw new Error("Unsupported module: " + name);
-                            };
-                            var module = { exports: {} };
-                            var exports = module.exports;
-                            ${compiled}
-                            return module.exports.default || module.exports;
-                        })();
-                    `;
-        } else {
-          rawCodeFetched = false;
-          code = "";
-        }
-      }
-      if (!rawCodeFetched || code === "") {
-        const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
-        const serverRes = await fetch(variantUrl, {
-          method: "GET",
-          headers: { Accept: "text/javascript" },
-          credentials: "include"
-        });
-        if (!serverRes.ok) {
-          throw new Error(`HTTP ${serverRes.status}`);
-        }
-        code = await serverRes.text();
-      }
-      if (typeof window !== "undefined") {
-        window.React = window.React || React4;
-      }
-      const evalFunc = new Function(`
-                var __probatVariant;
-                ${code}
-                return __probatVariant;
-            `);
-      const result = evalFunc();
-      const VariantComponent = result?.default || result;
-      if (typeof VariantComponent === "function") {
-        return VariantComponent;
-      }
-      console.warn("[PROBAT] Variant component is not a function", result);
-      return null;
-    } catch (e) {
-      console.warn(`[PROBAT] Failed to load variant component: ${e}`);
-      return null;
-    } finally {
-      variantComponentCache.delete(cacheKey);
-    }
-  })();
-  variantComponentCache.set(cacheKey, loadPromise);
-  return loadPromise;
+  return idx;
 }
-
-// src/hooks/useProbatMetrics.ts
-function useProbatMetrics() {
-  const { apiBaseUrl } = useProbatContext();
-  const trackClick = useCallback(
-    (event, options) => {
-      const meta = extractClickMeta(event ?? void 0);
-      if (!options?.force && event && !meta) {
-        return false;
-      }
-      const proposalId = options?.proposalId;
-      const variantLabel = options?.variantLabel || "control";
-      if (!proposalId) {
-        console.warn(
-          "[Probat] trackClick called without proposalId. Provide it in options or use useExperiment hook."
-        );
-        return false;
-      }
-      void sendMetric(
-        apiBaseUrl,
-        proposalId,
-        "click",
-        variantLabel,
-        void 0,
-        { ...meta, ...options?.dimensions }
-      );
-      return true;
-    },
-    [apiBaseUrl]
-  );
-  const trackMetric = useCallback(
-    (metricName, proposalId, variantLabel = "control", dimensions = {}) => {
-      void sendMetric(
-        apiBaseUrl,
-        proposalId,
-        metricName,
-        variantLabel,
-        void 0,
-        dimensions
-      );
-    },
-    [apiBaseUrl]
-  );
-  const trackImpression = useCallback(
-    (proposalId, variantLabel = "control", experimentId) => {
-      void sendMetric(
-        apiBaseUrl,
-        proposalId,
-        "visit",
-        variantLabel,
-        experimentId
-      );
-    },
-    [apiBaseUrl]
-  );
-  return {
-    trackClick,
-    trackMetric,
-    trackImpression
-  };
+function useStableInstanceIdV18(experimentId) {
+  const reactId = React3.useId();
+  const ref = useRef("");
+  if (!ref.current) {
+    const key = `${INSTANCE_PREFIX}${experimentId}:${getPageKey()}:${reactId}`;
+    ref.current = resolveStableId(key);
+  }
+  return ref.current;
 }
-
-// src/utils/storage.ts
-var TTL_MS = 6 * 60 * 60 * 1e3;
-function safeGet(k) {
-  try {
-    const raw = localStorage.getItem(k);
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
+function useStableInstanceIdFallback(experimentId) {
+  const slotRef = useRef(-1);
+  const ref = useRef("");
+  if (slotRef.current === -1) {
+    slotRef.current = claimSlot(`${experimentId}:${getPageKey()}`);
   }
-}
-function safeSet(k, v) {
-  try {
-    localStorage.setItem(k, JSON.stringify(v));
-  } catch {
+  if (!ref.current) {
+    const key = `${INSTANCE_PREFIX}${experimentId}:${getPageKey()}:${slotRef.current}`;
+    ref.current = resolveStableId(key);
   }
+  return ref.current;
 }
-function now() {
-  return Date.now();
-}
-function fresh(ts) {
-  return now() - ts <= TTL_MS;
-}
-var KEY = (proposalId) => `probat_choice_v3:${proposalId}`;
-var VISIT_KEY = (proposalId, label) => `probat_visit_v1:${proposalId}:${label}`;
-function readChoice(proposalId) {
-  const c = safeGet(KEY(proposalId));
-  return c && fresh(c.ts) ? c : null;
-}
-function writeChoice(proposalId, experiment_id, label) {
-  safeSet(KEY(proposalId), { experiment_id, label, ts: now() });
-}
-var visitMemo = /* @__PURE__ */ new Set();
-function hasTrackedVisit(proposalId, label) {
-  const key = VISIT_KEY(proposalId, label);
-  if (visitMemo.has(key)) return true;
+var useStableInstanceId = typeof React3.useId === "function" ? useStableInstanceIdV18 : useStableInstanceIdFallback;
+
+// src/components/Experiment.tsx
+var ASSIGNMENT_PREFIX = "probat:assignment:";
+function readAssignment(id) {
+  if (typeof window === "undefined") return null;
   try {
-    const raw = localStorage.getItem(key);
-    if (!raw) return false;
-    const ts = Number(raw);
-    if (!Number.isFinite(ts) || ts <= 0) return false;
-    if (now() - ts > TTL_MS) {
-      localStorage.removeItem(key);
-      return false;
-    }
-    visitMemo.add(key);
-    return true;
+    const raw = localStorage.getItem(ASSIGNMENT_PREFIX + id);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return parsed.variantKey ?? null;
   } catch {
-    return false;
+    return null;
   }
 }
-function markTrackedVisit(proposalId, label) {
-  const key = VISIT_KEY(proposalId, label);
-  visitMemo.add(key);
+function writeAssignment(id, variantKey) {
+  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(key, now().toString());
+    const entry = { variantKey, ts: Date.now() };
+    localStorage.setItem(ASSIGNMENT_PREFIX + id, JSON.stringify(entry));
   } catch {
   }
 }
-
-// src/hooks/useExperiment.ts
-function useExperiment(proposalId, options) {
-  const context = useProbatContext();
-  const { apiBaseUrl } = context;
-  const [choice, setChoice] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const autoTrackImpression = options?.autoTrackImpression !== false;
+function Experiment({
+  id,
+  control,
+  variants,
+  track,
+  componentInstanceId,
+  fallback = "control",
+  debug = false
+}) {
+  const { host, bootstrap } = useProbatContext();
+  const autoInstanceId = useStableInstanceId(id);
+  const instanceId = componentInstanceId ?? autoInstanceId;
+  const trackImpression = track?.impression !== false;
+  const trackClick = track?.primaryClick !== false;
+  const impressionEvent = track?.impressionEventName ?? "$experiment_exposure";
+  const clickEvent = track?.clickEventName ?? "$experiment_click";
+  const [variantKey, setVariantKey] = useState(() => {
+    if (bootstrap[id]) return bootstrap[id];
+    const cached = readAssignment(id);
+    if (cached) return cached;
+    return "control";
+  });
+  const [resolved, setResolved] = useState(() => {
+    return !!(bootstrap[id] || readAssignment(id));
+  });
   useEffect(() => {
-    let alive = true;
-    const isHeatmapMode = typeof window !== "undefined" && new URLSearchParams(window.location.search).get("heatmap") === "true";
-    if (context.proposalId === proposalId && context.variantLabel) {
-      console.log(`[PROBAT] Forced variant from context: ${context.variantLabel}`);
-      setChoice({
-        experiment_id: `forced_${proposalId}`,
-        label: context.variantLabel
-      });
-      setIsLoading(false);
+    if (bootstrap[id] || readAssignment(id)) {
+      const key = bootstrap[id] ?? readAssignment(id) ?? "control";
+      setVariantKey(key);
+      setResolved(true);
       return;
     }
-    const cached = isHeatmapMode ? null : readChoice(proposalId);
-    if (cached) {
-      setChoice({ experiment_id: cached.experiment_id, label: cached.label });
-      setIsLoading(false);
-    } else {
-      setIsLoading(true);
-      (async () => {
-        try {
-          const { experiment_id, label } = await fetchDecision(
-            apiBaseUrl,
-            proposalId
-          );
-          if (!alive) return;
-          if (!isHeatmapMode) {
-            writeChoice(proposalId, experiment_id, label);
-          }
-          setChoice({ experiment_id, label });
-          setError(null);
-        } catch (e) {
-          if (!alive) return;
-          const err = e instanceof Error ? e : new Error(String(e));
-          setError(err);
-          setChoice({
-            experiment_id: `exp_${proposalId}`,
-            label: "control"
-          });
-        } finally {
-          if (alive) {
-            setIsLoading(false);
+    let cancelled = false;
+    (async () => {
+      try {
+        const distinctId = getDistinctId();
+        const key = await fetchDecision(host, id, distinctId);
+        if (cancelled) return;
+        if (key !== "control" && !(key in variants)) {
+          if (debug) {
+            console.warn(
+              `[probat] Unknown variant "${key}" for experiment "${id}", falling back to control`
+            );
           }
+          setVariantKey("control");
+        } else {
+          setVariantKey(key);
+          writeAssignment(id, key);
         }
-      })();
-    }
+      } catch (err) {
+        if (cancelled) return;
+        if (debug) {
+          console.error(`[probat] fetchDecision failed for "${id}":`, err);
+        }
+        if (fallback === "suspend") throw err;
+        setVariantKey("control");
+      } finally {
+        if (!cancelled) setResolved(true);
+      }
+    })();
     return () => {
-      alive = false;
+      cancelled = true;
     };
-  }, [proposalId, apiBaseUrl, context.proposalId, context.variantLabel]);
+  }, [id, host]);
   useEffect(() => {
-    if (!autoTrackImpression || !choice) return;
-    const exp = choice.experiment_id;
-    const lbl = choice.label ?? "control";
-    if (!lbl) return;
-    if (hasTrackedVisit(proposalId, lbl)) return;
-    markTrackedVisit(proposalId, lbl);
-    void sendMetric(apiBaseUrl, proposalId, "visit", lbl, exp);
-  }, [proposalId, choice?.experiment_id, choice?.label, apiBaseUrl, autoTrackImpression]);
-  const trackClick = useCallback(
-    (event) => {
-      choice?.experiment_id;
-      const lbl = choice?.label ?? "control";
-      const meta = event ? (() => {
-        const rawTarget = event.target;
-        if (!rawTarget) return void 0;
-        const actionable = rawTarget.closest(
-          "[data-probat-conversion='true'], button, a, [role='button']"
-        );
-        if (!actionable) return void 0;
-        const meta2 = {
-          target_tag: actionable.tagName
-        };
-        if (actionable.id) meta2.target_id = actionable.id;
-        const attr = actionable.getAttribute("data-probat-conversion");
-        if (attr) meta2.conversion_attr = attr;
-        const text = actionable.textContent?.trim();
-        if (text) meta2.target_text = text.slice(0, 120);
-        return meta2;
-      })() : void 0;
-      void sendMetric(apiBaseUrl, proposalId, "click", lbl, void 0, meta);
-    },
-    [proposalId, choice?.experiment_id, choice?.label, apiBaseUrl]
+    if (debug && resolved) {
+      console.log(`[probat] Experiment "${id}" \u2192 variant "${variantKey}"`, {
+        instanceId,
+        pageKey: getPageKey()
+      });
+    }
+  }, [debug, id, variantKey, resolved, instanceId]);
+  const eventProps = useMemo(
+    () => ({
+      experiment_id: id,
+      variant_key: variantKey,
+      component_instance_id: instanceId
+    }),
+    [id, variantKey, instanceId]
   );
-  return {
-    variantLabel: choice?.label ?? "control",
-    experimentId: choice?.experiment_id ?? null,
-    isLoading,
-    error,
-    trackClick
-  };
-}
-function withExperiment(Control, options) {
-  if (!Control) {
-    console.error("[PROBAT] withExperiment: Control component is required");
-    return ((props) => null);
-  }
-  if (!options || typeof options !== "object") {
-    console.error("[PROBAT] withExperiment: options is required");
-    return Control;
-  }
-  const useNewAPI = !!options.componentPath;
-  const useOldAPI = !!(options.proposalId && options.registry);
-  if (!useNewAPI && !useOldAPI) {
-    console.warn("[PROBAT] withExperiment: Invalid config, returning Control");
-    return Control;
-  }
-  const ControlComponent = Control;
-  function Wrapped(props) {
-    const context = useProbatContext();
-    const apiBaseUrl = context?.apiBaseUrl || "https://gushi.onrender.com";
-    const contextRepoFullName = context?.repoFullName;
-    const [config, setConfig] = useState(null);
-    const [configLoading, setConfigLoading] = useState(useNewAPI);
-    const [choice, setChoice] = useState(null);
-    const repoFullName = options.repoFullName || contextRepoFullName;
-    const proposalId = useNewAPI ? config?.proposalId : options.proposalId;
-    useEffect(() => {
-      if (!useNewAPI) return;
-      if (!repoFullName) {
-        console.warn("[PROBAT] componentPath provided but repoFullName not found");
-        setConfigLoading(false);
-        return;
-      }
-      let alive = true;
-      setConfigLoading(true);
-      (async () => {
-        try {
-          const componentConfig = await fetchComponentExperimentConfig(
-            apiBaseUrl,
-            repoFullName,
-            options.componentPath
-          );
-          if (!alive) return;
-          if (!componentConfig) {
-            setConfig(null);
-            setConfigLoading(false);
-            return;
-          }
-          const variantComponents = {
-            control: ControlComponent
-          };
-          for (const [label2, variantInfo] of Object.entries(componentConfig.variants)) {
-            if (label2 === "control") continue;
-            if (variantInfo?.file_path) {
-              try {
-                const VariantComp = await loadVariantComponent(
-                  apiBaseUrl,
-                  componentConfig.proposal_id,
-                  variantInfo.experiment_id,
-                  variantInfo.file_path,
-                  componentConfig.repo_full_name,
-                  componentConfig.base_ref
-                );
-                if (VariantComp && typeof VariantComp === "function" && alive) {
-                  variantComponents[label2] = VariantComp;
-                }
-              } catch (e) {
-                console.warn(`[PROBAT] Failed to load variant ${label2}:`, e);
-              }
-            }
-          }
-          if (alive) {
-            setConfig({
-              proposalId: componentConfig.proposal_id,
-              variants: variantComponents
-            });
-            setConfigLoading(false);
-          }
-        } catch (e) {
-          console.warn("[PROBAT] Failed to load component config:", e);
-          if (alive) {
-            setConfig(null);
-            setConfigLoading(false);
-          }
-        }
-      })();
-      return () => {
-        alive = false;
-      };
-    }, [useNewAPI, options.componentPath, repoFullName, apiBaseUrl]);
-    useEffect(() => {
-      if (!proposalId) return;
-      if (useNewAPI && configLoading) return;
-      let alive = true;
-      const isHeatmapMode = typeof window !== "undefined" && new URLSearchParams(window.location.search).get("heatmap") === "true";
-      if (context.proposalId === proposalId && context.variantLabel) {
-        console.log(`[PROBAT HOC] Forced variant from context: ${context.variantLabel}`);
-        setChoice({
-          experiment_id: `forced_${proposalId}`,
-          label: context.variantLabel
-        });
-        return;
+  const containerRef = useRef(null);
+  const impressionSent = useRef(false);
+  useEffect(() => {
+    if (!trackImpression || !resolved) return;
+    impressionSent.current = false;
+    const pageKey = getPageKey();
+    const dedupeKey = makeDedupeKey(id, variantKey, instanceId, pageKey);
+    if (hasSeen(dedupeKey)) {
+      impressionSent.current = true;
+      return;
+    }
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof IntersectionObserver === "undefined") {
+      if (!impressionSent.current) {
+        impressionSent.current = true;
+        markSeen(dedupeKey);
+        sendMetric(host, impressionEvent, eventProps);
+        if (debug) console.log(`[probat] Impression sent (no IO) for "${id}"`);
       }
-      const cached = isHeatmapMode ? null : readChoice(proposalId);
-      if (cached) {
-        const choiceData = {
-          experiment_id: cached.experiment_id,
-          label: cached.label
-        };
-        setChoice(choiceData);
-        if (typeof window !== "undefined" && !isHeatmapMode) {
-          try {
-            window.localStorage.setItem("probat_active_proposal_id", proposalId);
-            window.localStorage.setItem("probat_active_variant_label", cached.label);
-          } catch (e) {
-            console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
-          }
+      return;
+    }
+    let timer = null;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry || impressionSent.current) return;
+        if (entry.isIntersecting) {
+          timer = setTimeout(() => {
+            if (impressionSent.current) return;
+            impressionSent.current = true;
+            markSeen(dedupeKey);
+            sendMetric(host, impressionEvent, eventProps);
+            if (debug) console.log(`[probat] Impression sent for "${id}"`);
+            observer.disconnect();
+          }, 250);
+        } else if (timer) {
+          clearTimeout(timer);
+          timer = null;
         }
-      } else {
-        (async () => {
-          try {
-            const { experiment_id, label: label2 } = await fetchDecision(apiBaseUrl, proposalId);
-            if (!alive) return;
-            if (!isHeatmapMode) {
-              writeChoice(proposalId, experiment_id, label2);
-              if (typeof window !== "undefined") {
-                try {
-                  window.localStorage.setItem("probat_active_proposal_id", proposalId);
-                  window.localStorage.setItem("probat_active_variant_label", label2);
-                } catch (e) {
-                  console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
-                }
-              }
-            }
-            const choiceData = { experiment_id, label: label2 };
-            setChoice(choiceData);
-          } catch (e) {
-            if (!alive) return;
-            const choiceData = {
-              experiment_id: `exp_${proposalId}`,
-              label: "control"
-            };
-            setChoice(choiceData);
-            if (typeof window !== "undefined" && !isHeatmapMode) {
-              try {
-                window.localStorage.setItem("probat_active_proposal_id", proposalId);
-                window.localStorage.setItem("probat_active_variant_label", "control");
-              } catch (err) {
-                console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", err);
-              }
-            }
-          }
-        })();
-      }
-      return () => {
-        alive = false;
-      };
-    }, [proposalId, apiBaseUrl, useNewAPI, configLoading, context.proposalId, context.variantLabel]);
-    useEffect(() => {
-      if (!proposalId) return;
-      const lbl = choice?.label ?? "control";
-      if (!lbl || hasTrackedVisit(proposalId, lbl)) return;
-      markTrackedVisit(proposalId, lbl);
-      void sendMetric(apiBaseUrl, proposalId, "visit", lbl, choice?.experiment_id);
-    }, [proposalId, choice?.experiment_id, choice?.label, apiBaseUrl]);
-    const trackClick = useCallback(
-      (event, opts) => {
-        if (!proposalId) return false;
-        const lbl = choice?.label ?? "control";
-        const meta = extractClickMeta(event ?? void 0);
-        if (!opts?.force && event && !meta) return false;
-        void sendMetric(apiBaseUrl, proposalId, "click", lbl, void 0, meta);
-        return true;
       },
-      [proposalId, choice?.experiment_id, choice?.label, apiBaseUrl]
+      { threshold: 0.5 }
     );
-    if (useNewAPI && (configLoading || !config || !proposalId)) {
-      return React4.createElement(ControlComponent, props);
-    }
-    if (!proposalId) {
-      return React4.createElement(ControlComponent, props);
-    }
-    const registry = { control: ControlComponent };
-    if (useNewAPI && config?.variants) {
-      for (const [key, value] of Object.entries(config.variants)) {
-        if (key !== "control" && value && typeof value === "function") {
-          registry[key] = value;
-        }
-      }
-    } else if (!useNewAPI && options.registry) {
-      for (const [key, value] of Object.entries(options.registry)) {
-        if (key !== "control" && value && typeof value === "function") {
-          registry[key] = value;
-        }
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      if (timer) clearTimeout(timer);
+    };
+  }, [
+    trackImpression,
+    resolved,
+    id,
+    variantKey,
+    instanceId,
+    host,
+    impressionEvent,
+    eventProps,
+    debug
+  ]);
+  const handleClick = useCallback(
+    (e) => {
+      if (!trackClick) return;
+      const meta = extractClickMeta(e.target);
+      if (!meta) return;
+      sendMetric(host, clickEvent, {
+        ...eventProps,
+        ...meta
+      });
+      if (debug) {
+        console.log(`[probat] Click tracked for "${id}"`, meta);
       }
-    }
-    const label = choice?.label ?? "control";
-    const Variant = registry[label] || registry.control || ControlComponent;
-    return /* @__PURE__ */ React4.createElement("div", { onClick: (event) => trackClick(event), "data-probat-proposal": proposalId }, React4.createElement(Variant, {
-      key: `${proposalId}:${label}`,
-      ...props,
-      probat: { trackClick: () => trackClick(null, { force: true }) }
-    }));
-  }
-  Wrapped.displayName = `withExperiment(${Control.displayName || Control.name || "Component"})`;
-  return Wrapped;
+    },
+    [trackClick, host, clickEvent, eventProps, id, debug]
+  );
+  const content = variantKey === "control" || !(variantKey in variants) ? control : variants[variantKey];
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ref: containerRef,
+      onClick: handleClick,
+      "data-probat-experiment": id,
+      "data-probat-variant": variantKey,
+      style: { display: "contents" }
+    },
+    content
+  );
+}
+function useProbatMetrics() {
+  const { host } = useProbatContext();
+  const capture = useCallback(
+    (event, properties = {}) => {
+      sendMetric(host, event, properties);
+    },
+    [host]
+  );
+  return { capture };
 }
 
-export { ProbatProvider, ProbatProviderClient, detectEnvironment, extractClickMeta, fetchDecision, getHeatmapTracker, hasTrackedVisit, initHeatmapTracking, markTrackedVisit, readChoice, sendMetric, stopHeatmapTracking, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
+export { Experiment, ProbatProviderClient, fetchDecision, sendMetric, useProbatMetrics };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map