@probat/react 0.2.1 → 0.3.0

package/src/utils/api.ts

@@ -1,614 +1,133 @@
-import React from "react";
 import { detectEnvironment } from "./environment";
+import { buildEventContext } from "./eventContext";
 
-export type RetrieveResponse = {
-    proposal_id: string;
-    experiment_id: string | null;
-    label: string | null;
-};
+// ── Types ──────────────────────────────────────────────────────────────────
 
-export type ComponentVariantInfo = {
-    experiment_id: string;
-    label: string;
-    file_path: string | null;
-};
+export interface DecisionResponse {
+    variant_key: string;
+}
+
+export interface MetricPayload {
+    event: string;
+    properties: Record<string, unknown>;
+}
 
-export type ComponentExperimentConfig = {
-    proposal_id: string;
-    repo_full_name: string;
-    base_ref?: string;  // Git branch/ref (default: "main")
-    variants: Record<string, ComponentVariantInfo>;
-};
+// ── Assignment fetching ────────────────────────────────────────────────────
 
-// Shared promise cache to prevent multiple simultaneous API calls for the same proposal
-const pendingFetches = new Map<
-    string,
-    Promise<{ experiment_id: string; label: string }>
->();
+const pendingDecisions = new Map<string, Promise<string>>();
 
+/**
+ * Fetch the variant assignment for an experiment.
+ * Returns the variant key string (e.g. "control", "ai_v1").
+ * Deduplicates concurrent calls for the same experiment.
+ */
 export async function fetchDecision(
-    baseUrl: string,
-    proposalId: string
-): Promise<{ experiment_id: string; label: string }> {
-    // Check if there's already a pending fetch for this proposal
-    const existingFetch = pendingFetches.get(proposalId);
-    if (existingFetch) {
-        return existingFetch;
-    }
+    host: string,
+    experimentId: string,
+    distinctId: string
+): Promise<string> {
+    const existing = pendingDecisions.get(experimentId);
+    if (existing) return existing;
 
-    // Create new fetch promise
-    const fetchPromise = (async () => {
+    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()) as RetrieveResponse;
-
-            const experiment_id = (data.experiment_id || `exp_${proposalId}`).toString();
-            const label = data.label && data.label.trim() ? data.label : "control";
-
-            // Auto-set localStorage for heatmap tracking
-            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 };
+            const data = (await res.json()) as DecisionResponse;
+            return data.variant_key || "control";
         } finally {
-            // Remove from pending cache after completion
-            pendingFetches.delete(proposalId);
+            pendingDecisions.delete(experimentId);
         }
     })();
 
-    // Store the promise so other components can wait for the same call
-    pendingFetches.set(proposalId, fetchPromise);
-    return fetchPromise;
+    pendingDecisions.set(experimentId, promise);
+    return promise;
 }
 
-export async function sendMetric(
-    baseUrl: string,
-    proposalId: string,
-    metricName: "visit" | "click" | string,
-    variantLabel: string = "control",
-    experimentId?: string,
-    dimensions: Record<string, any> = {}
-) {
-    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: new Date().toISOString(),
+// ── Metric sending ─────────────────────────────────────────────────────────
+
+/**
+ * Fire-and-forget metric send. Never throws.
+ */
+export function sendMetric(
+    host: string,
+    event: string,
+    properties: Record<string, unknown>
+): void {
+    if (typeof window === "undefined") return;
+
+    const ctx = buildEventContext();
+    const payload: MetricPayload = {
+        event,
+        properties: {
+            ...ctx,
+            environment: detectEnvironment(),
+            source: "react-sdk",
+            captured_at: 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",
-            },
-            credentials: "include", // CRITICAL: Include cookies to distinguish different users
-            body: JSON.stringify(body),
-        });
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify(payload),
+        }).catch(() => {});
     } catch {
-        // Silently fail - metrics should not break the app
-    }
-}
-
-export function extractClickMeta(
-    event?: { target?: EventTarget | null } | null
-): Record<string, any> | undefined {
-    if (!event || !event.target) return undefined;
-    const rawTarget = event.target as HTMLElement | null;
-    if (!rawTarget) return undefined;
-    const actionable = rawTarget.closest(
-        "[data-probat-conversion='true'], button, a, [role='button']"
-    );
-    if (!actionable) return undefined;
-    const meta: Record<string, any> = {
-        target_tag: actionable.tagName,
-    };
-    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);
-    return meta;
-}
-
-// Cache for component config fetches
-const componentConfigCache = new Map<
-    string,
-    Promise<ComponentExperimentConfig | null>
->();
-
-export async function fetchComponentExperimentConfig(
-    baseUrl: string,
-    repoFullName: string,
-    componentPath: string
-): Promise<ComponentExperimentConfig | null> {
-    const cacheKey = `${repoFullName}:${componentPath}`;
-
-    // Check cache
-    const existingFetch = componentConfigCache.get(cacheKey);
-    if (existingFetch) {
-        return existingFetch;
+        // silently drop
     }
-
-    // Create new fetch promise
-    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) {
-                // No experiments for this component - return null
-                return null;
-            }
-
-            if (!res.ok) {
-                throw new Error(`HTTP ${res.status}`);
-            }
-
-            const data = (await res.json()) as ComponentExperimentConfig;
-
-            // Auto-set localStorage for heatmap tracking when component config is loaded
-            // This will be updated when a specific variant is selected via fetchDecision
-            if (typeof window !== 'undefined' && data?.proposal_id) {
-                try {
-                    window.localStorage.setItem('probat_active_proposal_id', data.proposal_id);
-                    // Variant label will be set when fetchDecision is called
-                } 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 {
-            // Remove from cache after completion
-            componentConfigCache.delete(cacheKey);
-        }
-    })();
-
-    // Store the promise
-    componentConfigCache.set(cacheKey, fetchPromise);
-    return fetchPromise;
-}
-
-// Cache for variant component loads
-const variantComponentCache = new Map<string, Promise<React.ComponentType<any> | null>>();
-const moduleCache = new Map<string, any>(); // Cache for loaded modules (relative imports)
-
-// Make React available globally for variant components
-if (typeof window !== "undefined") {
-    (window as any).__probatReact = React;
-    (window as any).React = (window as any).React || React;
 }
 
-/**
- * Resolve relative import path to absolute path
- */
-function resolveRelativePath(relativePath: string, basePath: string): string {
-    // Remove file extension if present
-    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);
-        }
-    }
+// ── Click metadata extraction ──────────────────────────────────────────────
 
-    return '/' + parts.join('/');
+export interface ClickMeta {
+    click_target_tag: string;
+    click_target_text?: string;
+    click_target_id?: string;
+    click_is_primary: boolean;
 }
 
 /**
- * Fetch and compile a module from absolute path
+ * Given a click event inside an experiment boundary, extract metadata.
+ * Prioritizes elements with data-probat-click="primary",
+ * then falls back to button/a/role=button.
  */
-async function loadRelativeModule(
-    absolutePath: string,
-    baseFilePath: string,
-    repoFullName?: string,
-    baseRef?: string
-): Promise<any> {
-    const cacheKey = `${baseFilePath}:${absolutePath}`;
-    if (moduleCache.has(cacheKey)) {
-        return moduleCache.get(cacheKey);
-    }
-
-    // Try to determine file extension
-    const extensions = ['.jsx', '.tsx', '.js', '.ts'];
-    let moduleCode: string | null = null;
-    let modulePath: string | null = null;
-
-    // Try each extension
-    for (const ext of extensions) {
-        const testPath = absolutePath + (absolutePath.includes('.') ? '' : ext);
-
-        // Try local first
-        try {
-            const localRes = await fetch(testPath, {
-                method: "GET",
-                headers: { Accept: "text/plain" },
-            });
-            if (localRes.ok) {
-                moduleCode = await localRes.text();
-                modulePath = testPath;
-                break;
-            }
-        } catch {
-            // Continue to next extension or GitHub
-        }
+export function extractClickMeta(target: EventTarget | null): ClickMeta | null {
+    if (!target || !(target instanceof HTMLElement)) return null;
 
-        // Try GitHub if local failed
-        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 {
-                // Continue
-            }
-        }
-    }
+    // Priority 1: explicit primary marker
+    const primary = target.closest('[data-probat-click="primary"]');
+    if (primary) return buildMeta(primary as HTMLElement, true);
 
-    if (!moduleCode || !modulePath) {
-        throw new Error(`Could not resolve module: ${absolutePath} from ${baseFilePath}`);
-    }
+    // Priority 2: interactive elements
+    const interactive = target.closest('button, a, [role="button"]');
+    if (interactive) return buildMeta(interactive as HTMLElement, false);
 
-    // Compile the module
-    let Babel: any;
-    if (typeof window !== "undefined" && (window as any).Babel) {
-        Babel = (window as any).Babel;
-    } else {
-        try {
-            // @ts-ignore
-            const babelModule = await import("@babel/standalone");
-            Babel = babelModule.default || babelModule;
-        } catch {
-            throw new Error("Babel not available for compiling relative import");
-        }
-    }
-
-    // Preprocess module code
-    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;
-
-    // Execute compiled module
-    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 null;
 }
 
-export async function loadVariantComponent(
-    baseUrl: string,
-    proposalId: string,
-    experimentId: string,
-    filePath: string | null,
-    repoFullName?: string,
-    baseRef?: string
-): Promise<React.ComponentType<any> | null> {
-    if (!filePath) {
-        return null;
-    }
-
-    const cacheKey = `${proposalId}:${experimentId}`;
-
-    // Check cache
-    const existingLoad = variantComponentCache.get(cacheKey);
-    if (existingLoad) {
-        return existingLoad;
-    }
-
-    // Create new load promise
-    const loadPromise = (async () => {
-        try {
-            // ============================================
-            // Hybrid approach: Dynamic import for CSR (Vite), fetch+babel for SSR (Next.js)
-            // ============================================
-            let code: string = "";
-            let rawCode: string = "";
-            let rawCodeFetched = false;
-
-            // Try dynamic import first (works great for Vite/CSR, resolves relative imports automatically)
-            // Skip for Next.js - Turbopack statically analyzes import() calls and fails
-            const isBrowser = typeof window !== "undefined";
-            const isNextJS = isBrowser && (
-                (window as any).__NEXT_DATA__ !== undefined ||
-                (window as any).__NEXT_LOADED_PAGES__ !== undefined ||
-                typeof (globalThis as any).__NEXT_DATA__ !== "undefined"
-            );
-
-            // Only use dynamic import for non-Next.js environments (Vite, etc.)
-            if (isBrowser && !isNextJS) {
-                try {
-                    const variantUrl = `/probat/${filePath}`;
-                    // Use Function constructor to prevent Next.js/Turbopack from statically analyzing
-                    // This makes the import completely dynamic and invisible to static analysis
-                    const dynamicImportFunc = new Function('url', 'return import(url)');
-                    const mod = await dynamicImportFunc(variantUrl);
-                    const VariantComponent = (mod as any)?.default || mod;
-                    if (VariantComponent && typeof VariantComponent === "function") {
-                        console.log(`[PROBAT] ✅ Loaded variant via dynamic import (CSR): ${variantUrl}`);
-                        return VariantComponent as React.ComponentType<any>;
-                    }
-                } catch (dynamicImportError) {
-                    // Dynamic import failed, fall through to fetch+babel
-                    console.debug(`[PROBAT] Dynamic import failed, using fetch+babel:`, dynamicImportError);
-                }
-            }
-
-            // Fallback: fetch + babel compilation (works for Next.js SSR and when dynamic import fails)
-            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] ✅ 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] ⚠️ Loaded variant from GitHub (fallback): ${githubUrl}`);
-                } else {
-                    console.warn(`[PROBAT] ⚠️ GitHub fetch failed (${res.status}), falling back to server compilation`);
-                }
-            }
-
-            if (rawCodeFetched && rawCode) {
-                let Babel: any;
-                if (typeof window !== "undefined" && (window as any).Babel) {
-                    Babel = (window as any).Babel;
-                } else {
-                    try {
-                        // @ts-ignore
-                        const babelModule = await import("@babel/standalone");
-                        Babel = babelModule.default || babelModule;
-                    } catch (importError) {
-                        try {
-                            await new Promise<void>((resolve, reject) => {
-                                if (typeof document === "undefined") {
-                                    reject(new Error("Document not available"));
-                                    return;
-                                }
-                                if ((window as any).Babel) {
-                                    Babel = (window as any).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 as any).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");
-
-                    // Preprocess relative imports: convert to absolute paths that can be fetched
-                    // This allows the require shim to fetch them later
-                    const relativeImportMap = new Map<string, string>();
-                    rawCode = rawCode.replace(
-                        /^import\s+(\w+)\s+from\s+['"](\.\.?\/[^'"]+)['"];?\s*$/gm,
-                        (match, importName, relativePath) => {
-                            // Resolve relative path to absolute
-                            const baseDir = filePath.substring(0, filePath.lastIndexOf('/'));
-                            const resolvedPath = resolveRelativePath(relativePath, baseDir);
-                            // Try to find the file with extension
-                            const absolutePath = resolvedPath.startsWith('/') ? resolvedPath : '/' + resolvedPath;
-                            relativeImportMap.set(importName, absolutePath);
-                            // Replace with absolute path import - Babel will compile this to require()
-                            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;
-
-                    // Pre-load relative imports if any
-                    const relativeModules: Record<string, any> = {};
-                    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;
-                            }
-                        }
-                    }
-
-                    // Build require shim that can resolve relative imports
-                    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 as any).React = (window as any).React || React;
-            }
-
-            const evalFunc = new Function(`
-                var __probatVariant;
-                ${code}
-                return __probatVariant;
-            `);
-
-            const result = evalFunc();
-            const VariantComponent = result?.default || result;
-            if (typeof VariantComponent === "function") {
-                return VariantComponent as React.ComponentType<any>;
-            }
-
-            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 {
-            // Remove from cache after completion
-            variantComponentCache.delete(cacheKey);
-        }
-    })();
-
-    // Store the promise
-    variantComponentCache.set(cacheKey, loadPromise);
-    return loadPromise;
+function buildMeta(el: HTMLElement, isPrimary: boolean): ClickMeta {
+    const meta: ClickMeta = {
+        click_target_tag: el.tagName,
+        click_is_primary: isPrimary,
+    };
+    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;
 }
-