@seekora-ai/ui-sdk-react 0.1.1 → 0.2.4

package/dist/src/index.esm.js

@@ -1,4 +1,6 @@
-import React, { createContext, useContext, useMemo, useState, useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { createContext, useContext, useMemo, useState, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer } from 'react';
+import { createPortal } from 'react-dom';
+import { SeekoraClient } from '@seekora-ai/search-sdk';
 
 /**
  * Field Mapping Utilities
@@ -565,6 +567,688 @@ class SearchStateManager {
     }
 }
 
+/**
+ * Seekora Device Fingerprinting Module
+ *
+ * A lightweight, dependency-free device fingerprinting solution that collects
+ * various browser and device signals to generate a unique visitor identifier.
+ */
+// ============================================================================
+// MurmurHash3 Implementation (32-bit)
+// ============================================================================
+function murmurHash3(str, seed = 0) {
+    const remainder = str.length & 3; // str.length % 4
+    const bytes = str.length - remainder;
+    let h1 = seed;
+    const c1 = 0xcc9e2d51;
+    const c2 = 0x1b873593;
+    let i = 0;
+    let k1;
+    while (i < bytes) {
+        k1 =
+            (str.charCodeAt(i) & 0xff) |
+                ((str.charCodeAt(++i) & 0xff) << 8) |
+                ((str.charCodeAt(++i) & 0xff) << 16) |
+                ((str.charCodeAt(++i) & 0xff) << 24);
+        ++i;
+        k1 = Math.imul(k1, c1);
+        k1 = (k1 << 15) | (k1 >>> 17);
+        k1 = Math.imul(k1, c2);
+        h1 ^= k1;
+        h1 = (h1 << 13) | (h1 >>> 19);
+        h1 = Math.imul(h1, 5) + 0xe6546b64;
+    }
+    k1 = 0;
+    switch (remainder) {
+        case 3:
+            k1 ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+        // fallthrough
+        case 2:
+            k1 ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+        // fallthrough
+        case 1:
+            k1 ^= str.charCodeAt(i) & 0xff;
+            k1 = Math.imul(k1, c1);
+            k1 = (k1 << 15) | (k1 >>> 17);
+            k1 = Math.imul(k1, c2);
+            h1 ^= k1;
+    }
+    h1 ^= str.length;
+    h1 ^= h1 >>> 16;
+    h1 = Math.imul(h1, 0x85ebca6b);
+    h1 ^= h1 >>> 13;
+    h1 = Math.imul(h1, 0xc2b2ae35);
+    h1 ^= h1 >>> 16;
+    return h1 >>> 0;
+}
+function murmurHash3Hex(str, seed = 0) {
+    return murmurHash3(str, seed).toString(16).padStart(8, '0');
+}
+// ============================================================================
+// Default Configuration
+// ============================================================================
+const DEFAULT_CONFIG = {
+    enableCanvas: true,
+    enableWebGL: true,
+    enableAudio: true,
+    enableFonts: true,
+    enableHardware: true,
+    timeout: 5000,
+};
+// ============================================================================
+// Font List for Detection
+// ============================================================================
+const FONTS_TO_CHECK = [
+    // Windows fonts
+    'Arial', 'Arial Black', 'Calibri', 'Cambria', 'Comic Sans MS',
+    'Consolas', 'Courier New', 'Georgia', 'Impact', 'Lucida Console',
+    'Lucida Sans Unicode', 'Microsoft Sans Serif', 'Palatino Linotype',
+    'Segoe UI', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana',
+    // macOS fonts
+    'American Typewriter', 'Andale Mono', 'Apple Chancery', 'Apple Color Emoji',
+    'Apple SD Gothic Neo', 'Arial Hebrew', 'Avenir', 'Baskerville',
+    'Big Caslon', 'Brush Script MT', 'Chalkboard', 'Cochin', 'Copperplate',
+    'Didot', 'Futura', 'Geneva', 'Gill Sans', 'Helvetica', 'Helvetica Neue',
+    'Herculanum', 'Hoefler Text', 'Lucida Grande', 'Marker Felt', 'Menlo',
+    'Monaco', 'Noteworthy', 'Optima', 'Papyrus', 'Phosphate', 'Rockwell',
+    'San Francisco', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand',
+    'Zapfino',
+    // Linux fonts
+    'Cantarell', 'DejaVu Sans', 'DejaVu Sans Mono', 'DejaVu Serif',
+    'Droid Sans', 'Droid Sans Mono', 'Droid Serif', 'FreeMono', 'FreeSans',
+    'FreeSerif', 'Liberation Mono', 'Liberation Sans', 'Liberation Serif',
+    'Noto Sans', 'Noto Serif', 'Open Sans', 'Roboto', 'Ubuntu', 'Ubuntu Mono',
+    // Common web fonts
+    'Lato', 'Montserrat', 'Oswald', 'Raleway', 'Source Sans Pro',
+    'PT Sans', 'Merriweather', 'Nunito', 'Playfair Display', 'Poppins',
+];
+// ============================================================================
+// Fingerprint Class
+// ============================================================================
+class Fingerprint {
+    constructor(config) {
+        this.cachedResult = null;
+        this.config = { ...DEFAULT_CONFIG, ...config };
+    }
+    /**
+     * Get the complete fingerprint result
+     */
+    async get() {
+        if (this.cachedResult) {
+            return this.cachedResult;
+        }
+        const components = await this.collectComponents();
+        const confidence = this.calculateConfidence(components);
+        const visitorId = this.generateVisitorId(components);
+        this.cachedResult = {
+            visitorId,
+            confidence,
+            components,
+        };
+        return this.cachedResult;
+    }
+    /**
+     * Clear the cached result to force re-fingerprinting
+     */
+    clearCache() {
+        this.cachedResult = null;
+    }
+    /**
+     * Collect all fingerprint components
+     */
+    async collectComponents() {
+        const [canvas, webgl, audio, adBlockerDetected, incognitoDetected,] = await Promise.all([
+            this.config.enableCanvas ? this.getCanvasFingerprint() : { hash: '' },
+            this.config.enableWebGL ? this.getWebGLFingerprint() : { renderer: '', vendor: '', hash: '' },
+            this.config.enableAudio ? this.getAudioFingerprint() : { hash: '' },
+            this.detectAdBlocker(),
+            this.detectIncognito(),
+        ]);
+        const fonts = this.config.enableFonts ? this.detectFonts() : [];
+        const hardware = this.config.enableHardware ? this.getHardwareInfo() : {
+            concurrency: 0,
+            deviceMemory: 0,
+            maxTouchPoints: 0,
+            platform: '',
+        };
+        const screen = this.getScreenInfo();
+        const browser = this.getBrowserInfo();
+        return {
+            canvas,
+            webgl,
+            audio,
+            fonts,
+            hardware,
+            screen,
+            browser,
+            adBlockerDetected,
+            incognitoDetected,
+        };
+    }
+    /**
+     * Canvas fingerprinting - draws various shapes and text, then hashes the result
+     */
+    async getCanvasFingerprint() {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = 256;
+            canvas.height = 128;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return { hash: '' };
+            }
+            // Draw background
+            ctx.fillStyle = '#f8f8f8';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw gradient
+            const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+            gradient.addColorStop(0, '#ff6b6b');
+            gradient.addColorStop(0.5, '#4ecdc4');
+            gradient.addColorStop(1, '#45b7d1');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(10, 10, 100, 50);
+            // Draw text with different fonts
+            ctx.font = '18px Arial';
+            ctx.fillStyle = '#333';
+            ctx.textBaseline = 'alphabetic';
+            ctx.fillText('Seekora Fingerprint 🔐', 20, 90);
+            // Draw more text with different styling
+            ctx.font = 'bold 14px Georgia';
+            ctx.fillStyle = 'rgba(102, 204, 153, 0.7)';
+            ctx.fillText('Test String @#$%', 130, 40);
+            // Draw shapes
+            ctx.beginPath();
+            ctx.arc(200, 70, 30, 0, Math.PI * 2);
+            ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
+            ctx.fill();
+            ctx.strokeStyle = '#333';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            // Draw bezier curve
+            ctx.beginPath();
+            ctx.moveTo(10, 120);
+            ctx.bezierCurveTo(50, 80, 100, 120, 140, 100);
+            ctx.strokeStyle = '#9b59b6';
+            ctx.lineWidth = 3;
+            ctx.stroke();
+            // Draw rotated rectangle
+            ctx.save();
+            ctx.translate(180, 100);
+            ctx.rotate(0.5);
+            ctx.fillStyle = 'rgba(52, 152, 219, 0.6)';
+            ctx.fillRect(-20, -10, 40, 20);
+            ctx.restore();
+            const data = canvas.toDataURL('image/png');
+            const hash = murmurHash3Hex(data);
+            return { hash, data };
+        }
+        catch {
+            return { hash: '' };
+        }
+    }
+    /**
+     * WebGL fingerprinting - extracts GPU info and renders test triangles
+     */
+    async getWebGLFingerprint() {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = 256;
+            canvas.height = 256;
+            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            if (!gl) {
+                return { renderer: '', vendor: '', hash: '' };
+            }
+            // Get debug info extension for renderer/vendor
+            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            const renderer = debugInfo
+                ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || ''
+                : '';
+            const vendor = debugInfo
+                ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || ''
+                : '';
+            // Collect WebGL parameters
+            const params = [];
+            // Basic parameters
+            const paramIds = [
+                gl.ALIASED_LINE_WIDTH_RANGE,
+                gl.ALIASED_POINT_SIZE_RANGE,
+                gl.ALPHA_BITS,
+                gl.BLUE_BITS,
+                gl.DEPTH_BITS,
+                gl.GREEN_BITS,
+                gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS,
+                gl.MAX_CUBE_MAP_TEXTURE_SIZE,
+                gl.MAX_FRAGMENT_UNIFORM_VECTORS,
+                gl.MAX_RENDERBUFFER_SIZE,
+                gl.MAX_TEXTURE_IMAGE_UNITS,
+                gl.MAX_TEXTURE_SIZE,
+                gl.MAX_VARYING_VECTORS,
+                gl.MAX_VERTEX_ATTRIBS,
+                gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
+                gl.MAX_VERTEX_UNIFORM_VECTORS,
+                gl.MAX_VIEWPORT_DIMS,
+                gl.RED_BITS,
+                gl.RENDERER,
+                gl.SHADING_LANGUAGE_VERSION,
+                gl.STENCIL_BITS,
+                gl.VENDOR,
+                gl.VERSION,
+            ];
+            for (const paramId of paramIds) {
+                try {
+                    const value = gl.getParameter(paramId);
+                    if (value !== null && value !== undefined) {
+                        if (value instanceof Float32Array || value instanceof Int32Array) {
+                            params.push(Array.from(value).join(','));
+                        }
+                        else {
+                            params.push(String(value));
+                        }
+                    }
+                }
+                catch {
+                    // Parameter not available
+                }
+            }
+            // Get supported extensions
+            const extensions = gl.getSupportedExtensions() || [];
+            params.push(extensions.sort().join(','));
+            // Render a test triangle and get pixel data
+            try {
+                const vertexShaderSource = `
+          attribute vec2 position;
+          void main() {
+            gl_Position = vec4(position, 0.0, 1.0);
+          }
+        `;
+                const fragmentShaderSource = `
+          precision mediump float;
+          void main() {
+            gl_FragColor = vec4(0.812, 0.373, 0.784, 1.0);
+          }
+        `;
+                const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+                gl.shaderSource(vertexShader, vertexShaderSource);
+                gl.compileShader(vertexShader);
+                const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+                gl.shaderSource(fragmentShader, fragmentShaderSource);
+                gl.compileShader(fragmentShader);
+                const program = gl.createProgram();
+                gl.attachShader(program, vertexShader);
+                gl.attachShader(program, fragmentShader);
+                gl.linkProgram(program);
+                gl.useProgram(program);
+                const vertices = new Float32Array([
+                    0.0, 0.5,
+                    -0.5, -0.5,
+                    0.5, -0.5,
+                ]);
+                const buffer = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+                gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+                const positionLocation = gl.getAttribLocation(program, 'position');
+                gl.enableVertexAttribArray(positionLocation);
+                gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+                gl.clearColor(0.1, 0.1, 0.1, 1.0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+                gl.drawArrays(gl.TRIANGLES, 0, 3);
+                const pixels = new Uint8Array(256 * 256 * 4);
+                gl.readPixels(0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+                // Sample some pixels for the hash
+                const sampleIndices = [0, 1000, 5000, 10000, 25000, 50000, 100000, 200000];
+                for (const idx of sampleIndices) {
+                    if (idx < pixels.length) {
+                        params.push(String(pixels[idx]));
+                    }
+                }
+            }
+            catch {
+                // Shader compilation/rendering failed
+            }
+            const dataString = `${renderer}|${vendor}|${params.join('|')}`;
+            const hash = murmurHash3Hex(dataString);
+            return { renderer, vendor, hash };
+        }
+        catch {
+            return { renderer: '', vendor: '', hash: '' };
+        }
+    }
+    /**
+     * Audio fingerprinting using AudioContext oscillator
+     */
+    async getAudioFingerprint() {
+        try {
+            const AudioContext = window.AudioContext || window.webkitAudioContext;
+            if (!AudioContext) {
+                return { hash: '' };
+            }
+            const context = new AudioContext();
+            // Create oscillator
+            const oscillator = context.createOscillator();
+            oscillator.type = 'triangle';
+            oscillator.frequency.setValueAtTime(10000, context.currentTime);
+            // Create compressor
+            const compressor = context.createDynamicsCompressor();
+            compressor.threshold.setValueAtTime(-50, context.currentTime);
+            compressor.knee.setValueAtTime(40, context.currentTime);
+            compressor.ratio.setValueAtTime(12, context.currentTime);
+            compressor.attack.setValueAtTime(0, context.currentTime);
+            compressor.release.setValueAtTime(0.25, context.currentTime);
+            // Create analyser
+            const analyser = context.createAnalyser();
+            analyser.fftSize = 2048;
+            // Connect nodes
+            oscillator.connect(compressor);
+            compressor.connect(analyser);
+            analyser.connect(context.destination);
+            // Start and get data
+            oscillator.start(0);
+            return new Promise((resolve) => {
+                const timeout = setTimeout(() => {
+                    try {
+                        oscillator.stop();
+                        context.close();
+                    }
+                    catch {
+                        // Ignore cleanup errors
+                    }
+                    resolve({ hash: '' });
+                }, this.config.timeout);
+                // Give it a moment to process
+                setTimeout(() => {
+                    try {
+                        const dataArray = new Float32Array(analyser.frequencyBinCount);
+                        analyser.getFloatFrequencyData(dataArray);
+                        // Calculate a fingerprint value from the audio data
+                        let sum = 0;
+                        let count = 0;
+                        for (let i = 0; i < dataArray.length; i++) {
+                            if (isFinite(dataArray[i]) && dataArray[i] !== 0) {
+                                sum += Math.abs(dataArray[i]);
+                                count++;
+                            }
+                        }
+                        const value = count > 0 ? sum / count : 0;
+                        const dataString = Array.from(dataArray.slice(0, 100))
+                            .filter(v => isFinite(v))
+                            .map(v => v.toFixed(4))
+                            .join(',');
+                        clearTimeout(timeout);
+                        oscillator.stop();
+                        context.close();
+                        const hash = murmurHash3Hex(dataString + String(value));
+                        resolve({ hash, value });
+                    }
+                    catch {
+                        clearTimeout(timeout);
+                        try {
+                            oscillator.stop();
+                            context.close();
+                        }
+                        catch {
+                            // Ignore cleanup errors
+                        }
+                        resolve({ hash: '' });
+                    }
+                }, 200);
+            });
+        }
+        catch {
+            return { hash: '' };
+        }
+    }
+    /**
+     * Font detection by measuring text rendering differences
+     */
+    detectFonts() {
+        const detectedFonts = [];
+        try {
+            const baseFonts = ['monospace', 'sans-serif', 'serif'];
+            const testString = 'mmmmmmmmmmlli';
+            const testSize = '72px';
+            const canvas = document.createElement('canvas');
+            canvas.width = 500;
+            canvas.height = 100;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return detectedFonts;
+            }
+            // Get base widths
+            const baseWidths = {};
+            for (const baseFont of baseFonts) {
+                ctx.font = `${testSize} ${baseFont}`;
+                baseWidths[baseFont] = ctx.measureText(testString).width;
+            }
+            // Check each font
+            for (const font of FONTS_TO_CHECK) {
+                let detected = false;
+                for (const baseFont of baseFonts) {
+                    ctx.font = `${testSize} "${font}", ${baseFont}`;
+                    const width = ctx.measureText(testString).width;
+                    if (width !== baseWidths[baseFont]) {
+                        detected = true;
+                        break;
+                    }
+                }
+                if (detected) {
+                    detectedFonts.push(font);
+                }
+            }
+        }
+        catch {
+            // Font detection failed
+        }
+        return detectedFonts;
+    }
+    /**
+     * Get hardware information
+     */
+    getHardwareInfo() {
+        const nav = navigator;
+        return {
+            concurrency: nav.hardwareConcurrency || 0,
+            deviceMemory: nav.deviceMemory || 0,
+            maxTouchPoints: nav.maxTouchPoints || 0,
+            platform: nav.platform || '',
+        };
+    }
+    /**
+     * Get screen information
+     */
+    getScreenInfo() {
+        return {
+            width: screen.width || 0,
+            height: screen.height || 0,
+            colorDepth: screen.colorDepth || 0,
+            pixelRatio: window.devicePixelRatio || 1,
+        };
+    }
+    /**
+     * Get browser information
+     */
+    getBrowserInfo() {
+        const nav = navigator;
+        return {
+            language: nav.language || '',
+            languages: Array.from(nav.languages || []),
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || '',
+            timezoneOffset: new Date().getTimezoneOffset(),
+            cookieEnabled: nav.cookieEnabled ?? false,
+            doNotTrack: nav.doNotTrack === '1' || nav.doNotTrack === 'yes',
+        };
+    }
+    /**
+     * Detect if an ad blocker is installed
+     */
+    async detectAdBlocker() {
+        try {
+            // Create a bait element
+            const bait = document.createElement('div');
+            bait.className = 'adsbox ad-banner ad_banner textAd text_ad text-ad';
+            bait.style.cssText = 'position: absolute; left: -9999px; width: 1px; height: 1px;';
+            bait.innerHTML = '&nbsp;';
+            document.body.appendChild(bait);
+            // Wait a bit for ad blockers to act
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const isBlocked = bait.offsetParent === null ||
+                bait.offsetHeight === 0 ||
+                bait.offsetWidth === 0 ||
+                getComputedStyle(bait).display === 'none' ||
+                getComputedStyle(bait).visibility === 'hidden';
+            document.body.removeChild(bait);
+            // Also try to fetch a known ad-related resource
+            try {
+                const response = await fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', {
+                    method: 'HEAD',
+                    mode: 'no-cors',
+                });
+                // If we get here without error, no ad blocker (though no-cors doesn't give us much info)
+                return isBlocked;
+            }
+            catch {
+                return true; // Blocked
+            }
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Detect if browser is in incognito/private mode
+     */
+    async detectIncognito() {
+        // Chrome/Chromium detection
+        if ('storage' in navigator && 'estimate' in navigator.storage) {
+            try {
+                const estimate = await navigator.storage.estimate();
+                // In incognito, quota is typically limited to ~120MB
+                if (estimate.quota && estimate.quota < 130 * 1024 * 1024) {
+                    return true;
+                }
+            }
+            catch {
+                // Storage API not available
+            }
+        }
+        // Firefox detection using IndexedDB
+        try {
+            const db = indexedDB.open('test-private-mode');
+            return new Promise((resolve) => {
+                db.onerror = () => resolve(true);
+                db.onsuccess = () => {
+                    db.result.close();
+                    indexedDB.deleteDatabase('test-private-mode');
+                    resolve(false);
+                };
+                // Timeout fallback
+                setTimeout(() => resolve(false), 500);
+            });
+        }
+        catch {
+            // IndexedDB not available - might be incognito
+            return true;
+        }
+    }
+    /**
+     * Generate a hash from any data
+     */
+    generateHash(data) {
+        return murmurHash3Hex(data);
+    }
+    /**
+     * Generate the final visitor ID from all components
+     */
+    generateVisitorId(components) {
+        const data = JSON.stringify({
+            canvas: components.canvas.hash,
+            webgl: components.webgl.hash,
+            audio: components.audio.hash,
+            fonts: components.fonts.sort().join(','),
+            hardware: components.hardware,
+            screen: components.screen,
+            browser: {
+                ...components.browser,
+                languages: components.browser.languages.sort().join(','),
+            },
+        });
+        // Generate a 32-character hex string (similar to UUID format)
+        const hash1 = murmurHash3Hex(data, 0);
+        const hash2 = murmurHash3Hex(data, 1);
+        const hash3 = murmurHash3Hex(data, 2);
+        const hash4 = murmurHash3Hex(data, 3);
+        return `${hash1}${hash2}${hash3}${hash4}`;
+    }
+    /**
+     * Calculate confidence score based on available components
+     */
+    calculateConfidence(components) {
+        let score = 0;
+        let maxScore = 0;
+        // Canvas (high entropy)
+        maxScore += 0.2;
+        if (components.canvas.hash) {
+            score += 0.2;
+        }
+        // WebGL (high entropy)
+        maxScore += 0.2;
+        if (components.webgl.hash && components.webgl.renderer) {
+            score += 0.2;
+        }
+        else if (components.webgl.hash) {
+            score += 0.1;
+        }
+        // Audio (medium entropy)
+        maxScore += 0.15;
+        if (components.audio.hash) {
+            score += 0.15;
+        }
+        // Fonts (high entropy)
+        maxScore += 0.15;
+        if (components.fonts.length > 10) {
+            score += 0.15;
+        }
+        else if (components.fonts.length > 5) {
+            score += 0.1;
+        }
+        else if (components.fonts.length > 0) {
+            score += 0.05;
+        }
+        // Hardware (medium entropy)
+        maxScore += 0.1;
+        if (components.hardware.concurrency > 0 && components.hardware.platform) {
+            score += 0.1;
+        }
+        else if (components.hardware.platform) {
+            score += 0.05;
+        }
+        // Screen (low entropy but stable)
+        maxScore += 0.1;
+        if (components.screen.width > 0 && components.screen.height > 0) {
+            score += 0.1;
+        }
+        // Browser (low entropy but stable)
+        maxScore += 0.1;
+        if (components.browser.timezone && components.browser.language) {
+            score += 0.1;
+        }
+        else if (components.browser.language) {
+            score += 0.05;
+        }
+        // Normalize and return
+        return Math.min(1, score / maxScore);
+    }
+}
+// ============================================================================
+// Convenience Function
+// ============================================================================
+/**
+ * Quick fingerprint getter - creates a Fingerprint instance and returns the result
+ */
+async function getFingerprint(config) {
+    const fingerprint = new Fingerprint(config);
+    return fingerprint.get();
+}
+
 /**
  * Default Theme
  */
@@ -1133,38 +1817,21 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
                     const state = { currentPage, itemsPerPage: stateItemsPerPage };
                     // Calculate absolute position (1-based) accounting for pagination
                     const absolutePosition = (state.currentPage - 1) * state.itemsPerPage + index + 1;
-                    // Build search context from current state and response
-                    const searchContext = results?.context || (results ? {
-                        query: '', // Will be filled from state if needed
-                        page: state.currentPage,
-                    } : undefined);
-                    console.log('🔵 SearchResults: Tracking analytics event', {
-                        resultId: result.id,
-                        resultIndex: index,
-                        absolutePosition,
-                        currentPage: state.currentPage,
-                        itemsPerPage: state.itemsPerPage,
-                        hasContext: !!searchContext,
-                    });
-                    await client.trackEvent?.({
-                        event_name: 'product_click',
-                        clicked_item_id: result.id,
-                        metadata: {
-                            result: result,
-                            position: absolutePosition,
-                        },
-                    }, searchContext);
-                    console.log('🟢 SearchResults: Analytics event tracked successfully', {
-                        resultId: result.id,
-                        position: absolutePosition,
-                    });
+                    const searchContext = results?.context;
+                    if (client.trackClick) {
+                        await client.trackClick(result.id, absolutePosition, searchContext);
+                    }
+                    else {
+                        await client.trackEvent?.({
+                            event_name: 'product_click',
+                            clicked_item_id: result.id,
+                            metadata: { result, position: absolutePosition },
+                        }, searchContext);
+                    }
                 }
                 catch (err) {
                     const error = err instanceof Error ? err : new Error(String(err));
-                    console.error('SearchResults: Error tracking analytics event', {
-                        resultId: result.id,
-                        error: error.message,
-                    });
+                    log.error('SearchResults: Error tracking click', { resultId: result.id, error: error.message });
                 }
             }
             // Call user-provided callback
@@ -1224,38 +1891,21 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
                     const state = { currentPage, itemsPerPage: stateItemsPerPage };
                     // Calculate absolute position (1-based) accounting for pagination
                     const absolutePosition = (state.currentPage - 1) * state.itemsPerPage + index + 1;
-                    // Build search context from current state and response
-                    const searchContext = results?.context || (results ? {
-                        query: '', // Will be filled from state if needed
-                        page: state.currentPage,
-                    } : undefined);
-                    console.log('🔵 SearchResults: Tracking analytics event', {
-                        resultId: result.id,
-                        resultIndex: index,
-                        absolutePosition,
-                        currentPage: state.currentPage,
-                        itemsPerPage: state.itemsPerPage,
-                        hasContext: !!searchContext,
-                    });
-                    await client.trackEvent?.({
-                        event_name: 'product_click',
-                        clicked_item_id: result.id,
-                        metadata: {
-                            result: result,
-                            position: absolutePosition,
-                        },
-                    }, searchContext);
-                    console.log('🟢 SearchResults: Analytics event tracked successfully', {
-                        resultId: result.id,
-                        position: absolutePosition,
-                    });
+                    const searchContext = results?.context;
+                    if (client.trackClick) {
+                        await client.trackClick(result.id, absolutePosition, searchContext);
+                    }
+                    else {
+                        await client.trackEvent?.({
+                            event_name: 'product_click',
+                            clicked_item_id: result.id,
+                            metadata: { result, position: absolutePosition },
+                        }, searchContext);
+                    }
                 }
                 catch (err) {
                     const error = err instanceof Error ? err : new Error(String(err));
-                    console.error('SearchResults: Error tracking analytics event', {
-                        resultId: result.id,
-                        error: error.message,
-                    });
+                    log.error('SearchResults: Error tracking click', { resultId: result.id, error: error.message });
                 }
             }
             // Call user-provided callback
@@ -2613,7 +3263,7 @@ const InfiniteHits = ({ renderHit, renderEmpty, renderLoading, renderShowMore, s
  *
  * Renders highlighted search result text with matching terms emphasized
  */
-const Highlight = ({ hit, attribute, className, style, theme: customTheme, tagName: Tag = 'span', renderHighlighted, renderNonHighlighted, query, }) => {
+const Highlight$1 = ({ hit, attribute, className, style, theme: customTheme, tagName: Tag = 'span', renderHighlighted, renderNonHighlighted, query, }) => {
     const { theme } = useSearchContext();
     const highlightTheme = customTheme || {};
     // Get highlighted value from hit
@@ -5587,7 +6237,7 @@ const EVENTS = {
 // Hook Implementation
 // ============================================================================
 function useSuggestionsAnalytics(options) {
-    const { client, enabled = true, analyticsTags = [], impressionDebounce = 500, trackImpressions = true, trackClicks = true, } = options;
+    const { client, enabled = true, analyticsTags = [], impressionDebounce = 500, trackImpressions = true, trackClicks = true, context: contextOption, } = options;
     // Refs for debouncing and tracking
     const impressionTimerRef = useRef(null);
     const lastImpressionRef = useRef(null);
@@ -5600,10 +6250,11 @@ function useSuggestionsAnalytics(options) {
             }
         };
     }, []);
-    // Helper to send event
-    const sendEvent = useCallback(async (eventName, metadata) => {
+    // Helper to send event (optional context links event to search for v3 analytics)
+    const sendEvent = useCallback(async (eventName, metadata, context) => {
         if (!enabled || !client)
             return;
+        const searchContext = context ?? contextOption;
         try {
             await client.trackEvent?.({
                 event_name: eventName,
@@ -5613,13 +6264,13 @@ function useSuggestionsAnalytics(options) {
                     timestamp: Date.now(),
                     source: 'suggestions_dropdown',
                 },
-            });
+            }, searchContext);
             log.verbose(`Analytics: ${eventName}`, metadata);
         }
         catch (error) {
             log.warn(`Failed to track ${eventName}`, { error });
         }
-    }, [client, enabled, analyticsTags]);
+    }, [client, enabled, analyticsTags, contextOption]);
     // Track suggestion click
     const trackSuggestionClick = useCallback((data) => {
         if (!trackClicks)
@@ -5647,11 +6298,12 @@ function useSuggestionsAnalytics(options) {
             tab_id: data.tabId,
             original_query: data.query,
         });
-        // Also track as a general product click for analytics
-        if (client) {
-            Promise.resolve(client.trackClick?.(data.product.id || data.product.objectID || '', data.position + 1)).catch(() => { });
+        // Also track as a general product click for analytics (with context when available)
+        const searchContext = contextOption;
+        if (client?.trackClick) {
+            Promise.resolve(client.trackClick(data.product.id || data.product.objectID || '', data.position + 1, searchContext)).catch(() => { });
         }
-    }, [client, sendEvent, trackClicks]);
+    }, [client, contextOption, sendEvent, trackClicks]);
     // Track category click
     const trackCategoryClick = useCallback((category, query) => {
         if (!trackClicks)
@@ -10561,6 +11213,881 @@ const SuggestionDropdownVariants = {
     minimal: MinimalDropdown,
 };
 
+function Modal({ isOpen, onClose, children }) {
+    const overlayRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (isOpen)
+            document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, onClose]);
+    useEffect(() => {
+        if (isOpen) {
+            const originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = originalOverflow; };
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        const focusableElements = container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const handleTabKey = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement?.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        };
+        container.addEventListener('keydown', handleTabKey);
+        return () => container.removeEventListener('keydown', handleTabKey);
+    }, [isOpen]);
+    if (!isOpen || typeof document === 'undefined')
+        return null;
+    const modalContent = (React.createElement("div", { ref: overlayRef, className: "seekora-docsearch-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Search documentation" },
+        React.createElement("div", { ref: containerRef, className: "seekora-docsearch-container" }, children)));
+    return createPortal(modalContent, document.body);
+}
+
+function SearchBox({ value, onChange, onKeyDown, placeholder = 'Search documentation...', isLoading = false, onClear, }) {
+    const inputRef = useRef(null);
+    useEffect(() => { if (inputRef.current)
+        inputRef.current.focus(); }, []);
+    const handleChange = (event) => onChange(event.target.value);
+    const handleClear = () => { onChange(''); onClear?.(); inputRef.current?.focus(); };
+    return (React.createElement("div", { className: "seekora-docsearch-searchbox" },
+        React.createElement("label", { className: "seekora-docsearch-searchbox-icon", htmlFor: "seekora-docsearch-input" }, isLoading ? (React.createElement("span", { className: "seekora-docsearch-spinner", "aria-hidden": "true" },
+            React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
+                React.createElement("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40", strokeDashoffset: "10" },
+                    React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "0.8s", repeatCount: "indefinite" }))))) : (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+            React.createElement("path", { d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", fill: "currentColor" })))),
+        React.createElement("input", { ref: inputRef, id: "seekora-docsearch-input", className: "seekora-docsearch-input", type: "text", value: value, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholder, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-autocomplete": "list", "aria-controls": "seekora-docsearch-results" }),
+        value && (React.createElement("button", { type: "button", className: "seekora-docsearch-clear", onClick: handleClear, "aria-label": "Clear search" },
+            React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+                React.createElement("path", { d: "M4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22z", fill: "currentColor" }))))));
+}
+
+function sanitizeHtml(html) {
+    const escaped = html
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    return escaped
+        .replace(/&lt;mark&gt;/g, '<mark>')
+        .replace(/&lt;\/mark&gt;/g, '</mark>')
+        .replace(/&lt;ais-highlight&gt;/g, '<mark>')
+        .replace(/&lt;\/ais-highlight&gt;/g, '</mark>')
+        .replace(/&lt;em&gt;/g, '<mark>')
+        .replace(/&lt;\/em&gt;/g, '</mark>');
+}
+function Highlight({ value, highlightedValue }) {
+    if (!highlightedValue)
+        return React.createElement("span", null, value);
+    return (React.createElement("span", { className: "seekora-docsearch-highlight", dangerouslySetInnerHTML: { __html: sanitizeHtml(highlightedValue) } }));
+}
+function truncateAroundMatch(content, maxLength = 150) {
+    const markIndex = content.indexOf('<mark>');
+    if (markIndex === -1 || content.length <= maxLength) {
+        if (content.length <= maxLength)
+            return content;
+        return content.slice(0, maxLength) + '...';
+    }
+    const halfLength = Math.floor(maxLength / 2);
+    let start = Math.max(0, markIndex - halfLength);
+    let end = Math.min(content.length, markIndex + halfLength);
+    if (start > 0) {
+        const spaceIndex = content.indexOf(' ', start);
+        if (spaceIndex !== -1 && spaceIndex < markIndex)
+            start = spaceIndex + 1;
+    }
+    if (end < content.length) {
+        const spaceIndex = content.lastIndexOf(' ', end);
+        if (spaceIndex !== -1 && spaceIndex > markIndex)
+            end = spaceIndex;
+    }
+    let result = content.slice(start, end);
+    if (start > 0)
+        result = '...' + result;
+    if (end < content.length)
+        result = result + '...';
+    return result;
+}
+
+function Hit({ hit, isSelected, onClick, onMouseEnter, openInNewTab, isChild, isLastChild, hierarchyType }) {
+    const isFullHit = 'objectID' in hit;
+    const suggestion = hit;
+    const hitType = hierarchyType || suggestion.type;
+    const breadcrumb = suggestion.parentTitle
+        ? `${suggestion.category || ''} › ${suggestion.parentTitle}`.replace(/^› /, '')
+        : suggestion.category || '';
+    const title = getTitleForType(hit, hitType);
+    let highlightedTitle = title;
+    let highlightedContent = hit.content || suggestion.description || '';
+    if (isFullHit) {
+        const fullHit = hit;
+        if (fullHit._highlightResult) {
+            highlightedTitle = fullHit._highlightResult.title?.value || title;
+            highlightedContent = fullHit._highlightResult.content?.value || hit.content || '';
+        }
+    }
+    else {
+        if (suggestion.highlight) {
+            highlightedTitle = suggestion.highlight.title || title;
+            highlightedContent = suggestion.highlight.content || hit.content || suggestion.description || '';
+        }
+    }
+    const displayContent = highlightedContent ? truncateAroundMatch(highlightedContent, 120) : '';
+    const url = hit.url || suggestion.route || '#';
+    const classNames = ['seekora-docsearch-hit'];
+    if (isSelected)
+        classNames.push('seekora-docsearch-hit--selected');
+    if (isChild)
+        classNames.push('seekora-docsearch-hit--child');
+    if (isLastChild)
+        classNames.push('seekora-docsearch-hit--last-child');
+    return (React.createElement("a", { href: url, className: classNames.join(' '), onClick: (e) => { e.preventDefault(); onClick(); }, onMouseEnter: onMouseEnter, role: "option", "aria-selected": isSelected, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined },
+        isChild && (React.createElement("div", { className: "seekora-docsearch-hit-tree" },
+            React.createElement(TreeConnector, { isLast: isLastChild }))),
+        React.createElement("div", { className: "seekora-docsearch-hit-icon" },
+            React.createElement(HitIcon, { type: getHitTypeFromLevel(hitType) })),
+        React.createElement("div", { className: "seekora-docsearch-hit-content" },
+            !isChild && breadcrumb && React.createElement("span", { className: "seekora-docsearch-hit-breadcrumb" }, breadcrumb),
+            React.createElement("span", { className: "seekora-docsearch-hit-title" },
+                React.createElement(Highlight, { value: title, highlightedValue: highlightedTitle })),
+            displayContent && (React.createElement("span", { className: "seekora-docsearch-hit-description" },
+                React.createElement(Highlight, { value: hit.content || '', highlightedValue: displayContent })))),
+        React.createElement("div", { className: "seekora-docsearch-hit-action" }, openInNewTab ? (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+            React.createElement("path", { d: "M6 3H3v10h10v-3M9 3h4v4M14 2L7 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+            React.createElement("path", { d: "M6.75 3.25L11.5 8L6.75 12.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+}
+function getTitleForType(hit, type) {
+    const hierarchy = hit.hierarchy || {};
+    if (!type)
+        return hit.title || hierarchy.lvl1 || hierarchy.lvl0 || 'Untitled';
+    const match = type.match(/^lvl(\d+)$/);
+    if (match) {
+        const level = parseInt(match[1], 10);
+        const levelKey = `lvl${level}`;
+        const levelTitle = hierarchy[levelKey];
+        if (levelTitle)
+            return levelTitle;
+    }
+    return hit.title || hierarchy.lvl1 || hierarchy.lvl0 || 'Untitled';
+}
+function getHitTypeFromLevel(type) {
+    if (!type)
+        return 'page';
+    const match = type.match(/^lvl(\d+)$/);
+    if (match) {
+        const level = parseInt(match[1], 10);
+        if (level === 1)
+            return 'page';
+        if (level <= 3)
+            return 'section';
+        return 'content';
+    }
+    return 'page';
+}
+function HitIcon({ type }) {
+    switch (type) {
+        case 'page':
+            return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
+                React.createElement("path", { d: "M4.5 3.5h11a1 1 0 011 1v11a1 1 0 01-1 1h-11a1 1 0 01-1-1v-11a1 1 0 011-1z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+                React.createElement("path", { d: "M7 7h6M7 10h6M7 13h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })));
+        case 'section':
+            return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
+                React.createElement("path", { d: "M4 5.5h12M4 10h12M4 14.5h8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })));
+        case 'content':
+            return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
+                React.createElement("path", { d: "M4 6h12M4 10h8M4 14h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })));
+    }
+}
+function TreeConnector({ isLast }) {
+    return (React.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", "aria-hidden": "true", className: "seekora-docsearch-hit-tree-icon" }, isLast ? (React.createElement("path", { d: "M8 0V10H14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) : (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M8 0V20", stroke: "currentColor", strokeWidth: "1.5" }),
+        React.createElement("path", { d: "M8 10H14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })))));
+}
+
+function getTypeLevel(type) {
+    if (!type)
+        return 1;
+    const match = type.match(/^lvl(\d+)$/);
+    return match ? parseInt(match[1], 10) : 1;
+}
+function isChildType(type) {
+    return getTypeLevel(type) >= 2;
+}
+function groupHitsByHierarchy(hits) {
+    const groups = new Map();
+    for (const hit of hits) {
+        const lvl0 = hit.hierarchy?.lvl0 || '';
+        if (!groups.has(lvl0))
+            groups.set(lvl0, []);
+        groups.get(lvl0).push(hit);
+    }
+    const result = [];
+    for (const [lvl0Key, groupHits] of groups.entries()) {
+        const sortedHits = [...groupHits].sort((a, b) => {
+            const aType = a.type;
+            const bType = b.type;
+            return getTypeLevel(aType) - getTypeLevel(bType);
+        });
+        const markedHits = sortedHits.map((hit, index) => {
+            const suggestion = hit;
+            const isChild = isChildType(suggestion.type);
+            const nextHit = sortedHits[index + 1];
+            const isLastChild = isChild && (!nextHit || !isChildType(nextHit.type));
+            return { ...hit, isChild, isLastChild };
+        });
+        result.push({ category: lvl0Key || null, hits: markedHits });
+    }
+    return result;
+}
+function getGlobalIndexMulti(groups, groupIndex, hitIndex) {
+    let index = 0;
+    for (let i = 0; i < groupIndex; i++)
+        index += groups[i].hits.length;
+    return index + hitIndex;
+}
+function getHitKey(hit, index) {
+    if ('objectID' in hit)
+        return hit.objectID;
+    return `suggestion-${hit.url}-${index}`;
+}
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, query, isLoading, error, translations = {}, sources: _sources = [], }) {
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (listRef.current && hits.length > 0) {
+            const selectedItem = listRef.current.children[selectedIndex];
+            if (selectedItem)
+                selectedItem.scrollIntoView({ block: 'nearest' });
+        }
+    }, [selectedIndex, hits.length]);
+    if (!query) {
+        return (React.createElement("div", { className: "seekora-docsearch-empty" },
+            React.createElement("p", { className: "seekora-docsearch-empty-text" }, translations.searchPlaceholder || 'Type to start searching...')));
+    }
+    if (isLoading && hits.length === 0) {
+        return (React.createElement("div", { className: "seekora-docsearch-loading" },
+            React.createElement("div", { className: "seekora-docsearch-loading-spinner" },
+                React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" },
+                    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "50", strokeDashoffset: "15" },
+                        React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" })))),
+            React.createElement("p", { className: "seekora-docsearch-loading-text" }, translations.loadingText || 'Searching...')));
+    }
+    if (error) {
+        return (React.createElement("div", { className: "seekora-docsearch-error" },
+            React.createElement("p", { className: "seekora-docsearch-error-text" }, translations.errorText || error)));
+    }
+    if (hits.length === 0 && query) {
+        return (React.createElement("div", { className: "seekora-docsearch-no-results" },
+            React.createElement("p", { className: "seekora-docsearch-no-results-text" }, translations.noResultsText || `No results found for "${query}"`)));
+    }
+    const displayGroups = groupedHits && groupedHits.length > 0
+        ? groupedHits.map(g => ({ category: g.source.name, sourceId: g.source.id, openInNewTab: g.source.openInNewTab, hits: g.items }))
+        : groupHitsByHierarchy(hits).map(g => ({ category: g.category, sourceId: 'default', openInNewTab: false, hits: g.hits }));
+    return (React.createElement("div", { className: "seekora-docsearch-results" },
+        React.createElement("ul", { ref: listRef, id: "seekora-docsearch-results", className: "seekora-docsearch-results-list", role: "listbox" }, displayGroups.map((group, groupIndex) => (React.createElement("li", { key: group.sourceId + '-' + groupIndex, className: "seekora-docsearch-results-group" },
+            group.category && React.createElement("div", { className: "seekora-docsearch-results-group-header" }, group.category),
+            React.createElement("ul", { className: "seekora-docsearch-results-group-items" }, group.hits.map((hit, hitIndex) => {
+                const globalIndex = getGlobalIndexMulti(displayGroups, groupIndex, hitIndex);
+                const extHit = hit;
+                return (React.createElement("li", { key: getHitKey(hit, hitIndex) },
+                    React.createElement(Hit, { hit: hit, isSelected: globalIndex === selectedIndex, onClick: () => onSelect(hit), onMouseEnter: () => onHover(globalIndex), openInNewTab: group.openInNewTab, isChild: extHit.isChild, isLastChild: extHit.isLastChild, hierarchyType: hit.type })));
+            }))))))));
+}
+
+function Footer({ translations = {} }) {
+    return (React.createElement("footer", { className: "seekora-docsearch-footer" },
+        React.createElement("div", { className: "seekora-docsearch-footer-commands" },
+            React.createElement("ul", { className: "seekora-docsearch-footer-commands-list" },
+                React.createElement("li", null,
+                    React.createElement("span", { className: "seekora-docsearch-footer-command" },
+                        React.createElement("kbd", { className: "seekora-docsearch-key" }, "\u21B5"),
+                        React.createElement("span", null, "to select"))),
+                React.createElement("li", null,
+                    React.createElement("span", { className: "seekora-docsearch-footer-command" },
+                        React.createElement("kbd", { className: "seekora-docsearch-key" }, "\u2191"),
+                        React.createElement("kbd", { className: "seekora-docsearch-key" }, "\u2193"),
+                        React.createElement("span", null, "to navigate"))),
+                React.createElement("li", null,
+                    React.createElement("span", { className: "seekora-docsearch-footer-command" },
+                        React.createElement("kbd", { className: "seekora-docsearch-key" }, "esc"),
+                        React.createElement("span", null, translations.closeText || 'to close'))))),
+        React.createElement("div", { className: "seekora-docsearch-footer-logo" },
+            React.createElement("span", { className: "seekora-docsearch-footer-logo-text" }, translations.searchByText || 'Search by'),
+            React.createElement("a", { href: "https://seekora.ai", target: "_blank", rel: "noopener noreferrer", className: "seekora-docsearch-footer-logo-link" },
+                React.createElement("span", { className: "seekora-docsearch-logo", style: { fontFamily: 'system-ui', fontSize: 14, fontWeight: 600 } }, "Seekora")))));
+}
+
+function useKeyboard(options) {
+    const { isOpen, onOpen, onClose, onSelectNext, onSelectPrev, onEnter, disableShortcut = false, shortcutKey = 'k', } = options;
+    const handleGlobalKeyDown = useCallback((event) => {
+        if (!disableShortcut && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcutKey) {
+            event.preventDefault();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                onOpen();
+            }
+            return;
+        }
+        if (!disableShortcut && event.key === '/' && !isOpen) {
+            const target = event.target;
+            const isInput = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable;
+            if (!isInput) {
+                event.preventDefault();
+                onOpen();
+            }
+        }
+    }, [isOpen, onOpen, onClose, disableShortcut, shortcutKey]);
+    const handleModalKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                onClose();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                onSelectNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                onSelectPrev();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                onEnter();
+                break;
+            case 'Tab':
+                if (event.shiftKey) {
+                    onSelectPrev();
+                }
+                else {
+                    onSelectNext();
+                }
+                event.preventDefault();
+                break;
+        }
+    }, [onClose, onSelectNext, onSelectPrev, onEnter]);
+    useEffect(() => {
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleGlobalKeyDown);
+        };
+    }, [handleGlobalKeyDown]);
+    return {
+        handleModalKeyDown,
+    };
+}
+function getShortcutText(key = 'K') {
+    if (typeof navigator === 'undefined') {
+        return `⌘${key}`;
+    }
+    const isMac = navigator.platform.toLowerCase().includes('mac');
+    return isMac ? `⌘${key}` : `Ctrl+${key}`;
+}
+
+function DocSearchButton({ onClick, placeholder = 'Search documentation...' }) {
+    const shortcutText = getShortcutText('K');
+    return (React.createElement("button", { type: "button", className: "seekora-docsearch-button", onClick: onClick, "aria-label": "Search documentation" },
+        React.createElement("span", { className: "seekora-docsearch-button-icon" },
+            React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+                React.createElement("path", { d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", fill: "currentColor" }))),
+        React.createElement("span", { className: "seekora-docsearch-button-placeholder" }, placeholder),
+        React.createElement("span", { className: "seekora-docsearch-button-keys" },
+            React.createElement("kbd", { className: "seekora-docsearch-button-key" }, shortcutText))));
+}
+
+const initialState = {
+    query: '',
+    results: [],
+    suggestions: [],
+    groupedSuggestions: [],
+    isLoading: false,
+    error: null,
+    selectedIndex: 0,
+    mode: 'suggestions',
+};
+function reducer(state, action) {
+    switch (action.type) {
+        case 'SET_QUERY':
+            return { ...state, query: action.payload, selectedIndex: 0 };
+        case 'SET_RESULTS':
+            return { ...state, results: action.payload, mode: 'results' };
+        case 'SET_SUGGESTIONS':
+            return { ...state, suggestions: action.payload, mode: 'suggestions' };
+        case 'SET_GROUPED_SUGGESTIONS': {
+            const flatSuggestions = action.payload.flatMap(group => group.items.map(item => ({ ...item, _source: group.source.id })));
+            return { ...state, groupedSuggestions: action.payload, suggestions: flatSuggestions, mode: 'suggestions' };
+        }
+        case 'SET_LOADING':
+            return { ...state, isLoading: action.payload };
+        case 'SET_ERROR':
+            return { ...state, error: action.payload };
+        case 'SET_SELECTED_INDEX':
+            return { ...state, selectedIndex: action.payload };
+        case 'SELECT_NEXT': {
+            const items = state.mode === 'results' ? state.results : state.suggestions;
+            const maxIndex = items.length - 1;
+            return { ...state, selectedIndex: state.selectedIndex >= maxIndex ? 0 : state.selectedIndex + 1 };
+        }
+        case 'SELECT_PREV': {
+            const items = state.mode === 'results' ? state.results : state.suggestions;
+            const maxIndex = items.length - 1;
+            return { ...state, selectedIndex: state.selectedIndex <= 0 ? maxIndex : state.selectedIndex - 1 };
+        }
+        case 'SET_MODE':
+            return { ...state, mode: action.payload, selectedIndex: 0 };
+        case 'RESET':
+            return initialState;
+        default:
+            return state;
+    }
+}
+function useDocSearch(options) {
+    const { apiEndpoint, apiKey, sources, maxResults = 10, debounceMs = 200 } = options;
+    const searchSources = sources || (apiEndpoint ? [{
+            id: 'default',
+            name: 'Results',
+            endpoint: apiEndpoint,
+            apiKey,
+            maxResults,
+        }] : []);
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const abortControllersRef = useRef(new Map());
+    const debounceTimerRef = useRef(null);
+    const defaultTransform = (data, sourceId) => {
+        const items = data.data?.suggestions || data.data?.results || data.suggestions || data.results || data.hits || [];
+        return items.map((item) => ({
+            url: item.url || item.route || '',
+            title: item.title?.replace?.(/<\/?mark>/g, '') || item.title || '',
+            content: item.content?.replace?.(/<\/?mark>/g, '')?.substring?.(0, 100) || item.description || '',
+            description: item.description || item.content?.substring?.(0, 100) || '',
+            category: item.category || item.hierarchy?.lvl0 || '',
+            hierarchy: item.hierarchy,
+            route: item.route,
+            parentTitle: item.parent_title || item.parentTitle,
+            _source: sourceId,
+        }));
+    };
+    const transformPublicSearchResults = useCallback((data, sourceId) => {
+        const results = data?.data?.results || [];
+        return results.map((item) => {
+            const doc = item.document || item;
+            return {
+                url: doc.url || doc.route || '',
+                title: (doc.title || doc.name || '').replace?.(/<\/?mark>/g, '') || '',
+                content: (doc.content || doc.description || '').replace?.(/<\/?mark>/g, '')?.substring?.(0, 100) || '',
+                description: doc.description || doc.content?.substring?.(0, 100) || '',
+                category: doc.category || doc.hierarchy?.lvl0 || '',
+                hierarchy: doc.hierarchy,
+                route: doc.route,
+                parentTitle: doc.parent_title || doc.parentTitle,
+                _source: sourceId,
+            };
+        });
+    }, []);
+    const fetchFromSource = useCallback(async (source, query, signal) => {
+        const minLength = source.minQueryLength ?? 1;
+        if (query.length < minLength)
+            return [];
+        try {
+            if (source.storeId) {
+                const baseUrl = source.endpoint.replace(/\/$/, '');
+                const searchUrl = `${baseUrl}/api/v1/search`;
+                const headers = {
+                    'Content-Type': 'application/json',
+                    'x-storeid': source.storeId,
+                    ...(source.storeSecret && { 'x-storesecret': source.storeSecret }),
+                };
+                const response = await fetch(searchUrl, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify({ q: query.trim() || '*', per_page: source.maxResults || 8 }),
+                    signal,
+                });
+                if (!response.ok)
+                    return [];
+                const data = await response.json();
+                if (source.transformResults) {
+                    return source.transformResults(data).map((item) => ({ ...item, _source: source.id }));
+                }
+                return transformPublicSearchResults(data, source.id);
+            }
+            const url = new URL(source.endpoint);
+            url.searchParams.set('query', query);
+            url.searchParams.set('limit', String(source.maxResults || 8));
+            const headers = { 'Content-Type': 'application/json' };
+            if (source.apiKey)
+                headers['X-Docs-API-Key'] = source.apiKey;
+            const response = await fetch(url.toString(), { method: 'GET', headers, signal });
+            if (!response.ok)
+                return [];
+            const data = await response.json();
+            if (source.transformResults) {
+                return source.transformResults(data).map((item) => ({ ...item, _source: source.id }));
+            }
+            return defaultTransform(data, source.id);
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'AbortError')
+                throw error;
+            return [];
+        }
+    }, [transformPublicSearchResults]);
+    const fetchSuggestions = useCallback(async (query) => {
+        if (!query.trim()) {
+            dispatch({ type: 'SET_GROUPED_SUGGESTIONS', payload: [] });
+            return;
+        }
+        abortControllersRef.current.forEach(c => c.abort());
+        abortControllersRef.current.clear();
+        dispatch({ type: 'SET_LOADING', payload: true });
+        dispatch({ type: 'SET_ERROR', payload: null });
+        try {
+            const results = await Promise.all(searchSources.map(async (source) => {
+                const controller = new AbortController();
+                abortControllersRef.current.set(source.id, controller);
+                const items = await fetchFromSource(source, query, controller.signal);
+                return { source, items };
+            }));
+            const groupedResults = results.filter(r => r.items.length > 0);
+            dispatch({ type: 'SET_GROUPED_SUGGESTIONS', payload: groupedResults });
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'AbortError')
+                return;
+            dispatch({ type: 'SET_ERROR', payload: error instanceof Error ? error.message : 'Search failed' });
+        }
+        finally {
+            dispatch({ type: 'SET_LOADING', payload: false });
+        }
+    }, [searchSources, fetchFromSource]);
+    const search = useCallback((q) => fetchSuggestions(q), [fetchSuggestions]);
+    const setQuery = useCallback((query) => {
+        dispatch({ type: 'SET_QUERY', payload: query });
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => fetchSuggestions(query), debounceMs);
+    }, [fetchSuggestions, debounceMs]);
+    const selectNext = useCallback(() => dispatch({ type: 'SELECT_NEXT' }), []);
+    const selectPrev = useCallback(() => dispatch({ type: 'SELECT_PREV' }), []);
+    const setSelectedIndex = useCallback((index) => dispatch({ type: 'SET_SELECTED_INDEX', payload: index }), []);
+    const reset = useCallback(() => {
+        abortControllersRef.current.forEach(c => c.abort());
+        abortControllersRef.current.clear();
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        dispatch({ type: 'RESET' });
+    }, []);
+    const getSelectedItem = useCallback(() => {
+        const items = state.mode === 'results' ? state.results : state.suggestions;
+        return items[state.selectedIndex] || null;
+    }, [state.mode, state.results, state.suggestions, state.selectedIndex]);
+    useEffect(() => {
+        return () => {
+            abortControllersRef.current.forEach(c => c.abort());
+            abortControllersRef.current.clear();
+            if (debounceTimerRef.current)
+                clearTimeout(debounceTimerRef.current);
+        };
+    }, []);
+    return {
+        ...state,
+        sources: searchSources,
+        setQuery,
+        search,
+        fetchSuggestions,
+        selectNext,
+        selectPrev,
+        setSelectedIndex,
+        reset,
+        getSelectedItem,
+    };
+}
+
+function transformResults(results) {
+    return results.map((result) => {
+        const url = result.url || result.route || result.link || '';
+        const title = result.title || result.name || '';
+        const content = result.content || result.description || result.snippet || '';
+        const description = result.description || result.content?.substring?.(0, 150) || '';
+        const hierarchy = {};
+        if (result.hierarchy) {
+            hierarchy.lvl0 = result.hierarchy.lvl0;
+            hierarchy.lvl1 = result.hierarchy.lvl1;
+            hierarchy.lvl2 = result.hierarchy.lvl2;
+        }
+        else {
+            if (result.category)
+                hierarchy.lvl0 = result.category;
+            if (result.parent_title || result.parentTitle)
+                hierarchy.lvl1 = result.parent_title || result.parentTitle;
+        }
+        return {
+            url,
+            title: title?.replace?.(/<\/?mark>/g, '') || title,
+            content: content?.replace?.(/<\/?mark>/g, '')?.substring?.(0, 200) || content,
+            description: description?.replace?.(/<\/?mark>/g, '') || description,
+            category: result.category || hierarchy.lvl0 || '',
+            hierarchy,
+            route: result.route,
+            parentTitle: result.parent_title || result.parentTitle,
+            type: result.type || '',
+            anchor: result.anchor || '',
+            _source: 'seekora',
+        };
+    });
+}
+function useSeekoraSearch$1(options) {
+    const { storeId, storeSecret, apiEndpoint, maxResults = 20, debounceMs = 200, analyticsTags = ['docsearch'], groupField, groupSize, } = options;
+    const [query, setQueryState] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const clientRef = useRef(null);
+    const lastSearchContextRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    useEffect(() => {
+        if (!storeId)
+            return;
+        const config = {
+            storeId,
+            readSecret: storeSecret,
+            logLevel: 'warn',
+            enableContextCollection: true,
+        };
+        if (apiEndpoint) {
+            if (['local', 'stage', 'production'].includes(apiEndpoint)) {
+                config.environment = apiEndpoint;
+            }
+            else {
+                config.baseUrl = apiEndpoint;
+            }
+        }
+        try {
+            clientRef.current = new SeekoraClient(config);
+        }
+        catch (err) {
+            console.error('Failed to initialize SeekoraClient:', err);
+            setError('Failed to initialize search client');
+        }
+        return () => {
+            clientRef.current = null;
+        };
+    }, [storeId, storeSecret, apiEndpoint]);
+    const performSearch = useCallback(async (searchQuery) => {
+        if (!clientRef.current) {
+            setError('Search client not initialized');
+            return;
+        }
+        if (!searchQuery.trim()) {
+            setSuggestions([]);
+            return;
+        }
+        if (abortControllerRef.current)
+            abortControllerRef.current.abort();
+        abortControllerRef.current = new AbortController();
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await clientRef.current.search(searchQuery, {
+                per_page: maxResults,
+                analytics_tags: analyticsTags,
+                return_fields: [
+                    'hierarchy.lvl0', 'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3',
+                    'hierarchy.lvl4', 'hierarchy.lvl5', 'hierarchy.lvl6',
+                    'content', 'type', 'url', 'title', 'anchor'
+                ],
+                snippet_fields: [
+                    'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3',
+                    'hierarchy.lvl4', 'hierarchy.lvl5', 'hierarchy.lvl6', 'content'
+                ],
+                snippet_prefix: '<mark>',
+                snippet_suffix: '</mark>',
+                include_snippets: true,
+                group_field: groupField,
+                group_size: groupSize,
+            });
+            if (abortControllerRef.current?.signal.aborted)
+                return;
+            if (response?.context)
+                lastSearchContextRef.current = response.context;
+            setSuggestions(transformResults(response.results || []));
+            setSelectedIndex(0);
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === 'AbortError')
+                return;
+            console.error('Search failed:', err);
+            setError(err instanceof Error ? err.message : 'Search failed');
+            setSuggestions([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [maxResults, analyticsTags, groupField, groupSize]);
+    const setQuery = useCallback((newQuery) => {
+        setQueryState(newQuery);
+        setSelectedIndex(0);
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => performSearch(newQuery), debounceMs);
+    }, [performSearch, debounceMs]);
+    const selectNext = useCallback(() => {
+        setSelectedIndex((prev) => (prev >= suggestions.length - 1 ? 0 : prev + 1));
+    }, [suggestions.length]);
+    const selectPrev = useCallback(() => {
+        setSelectedIndex((prev) => (prev <= 0 ? suggestions.length - 1 : prev - 1));
+    }, [suggestions.length]);
+    const reset = useCallback(() => {
+        if (abortControllerRef.current)
+            abortControllerRef.current.abort();
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        setQueryState('');
+        setSuggestions([]);
+        setIsLoading(false);
+        setError(null);
+        setSelectedIndex(0);
+    }, []);
+    const getSelectedItem = useCallback(() => {
+        return suggestions[selectedIndex] || null;
+    }, [suggestions, selectedIndex]);
+    const trackDocClick = useCallback((hit, position) => {
+        const client = clientRef.current;
+        if (!client?.trackEvent)
+            return;
+        const context = lastSearchContextRef.current ?? undefined;
+        const itemId = hit.url || hit.id || hit.title || String(position);
+        client.trackEvent({
+            event_name: 'doc_click',
+            clicked_item_id: itemId,
+            metadata: { position, result: hit, source: 'docsearch' },
+        }, context);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (abortControllerRef.current)
+                abortControllerRef.current.abort();
+            if (debounceTimerRef.current)
+                clearTimeout(debounceTimerRef.current);
+        };
+    }, []);
+    return {
+        query,
+        suggestions,
+        isLoading,
+        error,
+        selectedIndex,
+        setQuery,
+        selectNext,
+        selectPrev,
+        setSelectedIndex,
+        reset,
+        getSelectedItem,
+        trackDocClick,
+    };
+}
+
+function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder = 'Search documentation...', maxResults = 10, debounceMs = 200, onSelect, onClose, translations = {}, renderButton = true, buttonComponent: ButtonComponent = DocSearchButton, initialOpen = false, disableShortcut = false, shortcutKey = 'k', }) {
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const useSeekoraSDK = !!storeId;
+    const seekoraSearch = useSeekoraSearch$1({
+        storeId: storeId || '',
+        storeSecret,
+        apiEndpoint: seekoraApiEndpoint,
+        maxResults,
+        debounceMs,
+        analyticsTags: ['docsearch'],
+    });
+    const legacySearch = useDocSearch({
+        apiEndpoint,
+        apiKey,
+        sources,
+        maxResults,
+        debounceMs,
+    });
+    const { query, suggestions, isLoading, error, selectedIndex, setQuery, selectNext, selectPrev, setSelectedIndex, reset, getSelectedItem, } = useSeekoraSDK ? seekoraSearch : legacySearch;
+    const groupedSuggestions = useSeekoraSDK ? undefined : legacySearch.groupedSuggestions;
+    const results = useSeekoraSDK ? suggestions : legacySearch.results;
+    const mode = useSeekoraSDK ? 'suggestions' : legacySearch.mode;
+    const searchSources = useSeekoraSDK
+        ? [{ id: 'seekora', name: 'Results', endpoint: '' }]
+        : legacySearch.sources;
+    const handleOpen = useCallback(() => setIsOpen(true), []);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        reset();
+        onClose?.();
+    }, [reset, onClose]);
+    const handleSelect = useCallback((hit) => {
+        if (useSeekoraSDK && seekoraSearch.trackDocClick) {
+            seekoraSearch.trackDocClick(hit, selectedIndex + 1);
+        }
+        if (onSelect) {
+            onSelect(hit);
+        }
+        else {
+            window.location.href = hit.url;
+        }
+        handleClose();
+    }, [onSelect, handleClose, useSeekoraSDK, seekoraSearch, selectedIndex]);
+    const handleEnter = useCallback(() => {
+        const selectedItem = getSelectedItem();
+        if (selectedItem)
+            handleSelect(selectedItem);
+    }, [getSelectedItem, handleSelect]);
+    const { handleModalKeyDown } = useKeyboard({
+        isOpen,
+        onOpen: handleOpen,
+        onClose: handleClose,
+        onSelectNext: selectNext,
+        onSelectPrev: selectPrev,
+        onEnter: handleEnter,
+        disableShortcut,
+        shortcutKey,
+    });
+    const handleKeyDown = useCallback((event) => handleModalKeyDown(event), [handleModalKeyDown]);
+    const displayHits = mode === 'results' ? results : suggestions;
+    return (React.createElement(React.Fragment, null,
+        renderButton && (React.createElement(ButtonComponent, { onClick: handleOpen, placeholder: translations.buttonText || placeholder })),
+        React.createElement(Modal, { isOpen: isOpen, onClose: handleClose },
+            React.createElement("div", { className: "seekora-docsearch-modal", onKeyDown: handleKeyDown },
+                React.createElement("header", { className: "seekora-docsearch-header" },
+                    React.createElement(SearchBox, { value: query, onChange: setQuery, onKeyDown: handleKeyDown, placeholder: placeholder, isLoading: isLoading, onClear: reset }),
+                    React.createElement("button", { type: "button", className: "seekora-docsearch-close", onClick: handleClose, "aria-label": "Close search" },
+                        React.createElement("span", { className: "seekora-docsearch-close-text" }, "esc"))),
+                React.createElement("div", { className: "seekora-docsearch-body" },
+                    React.createElement(Results, { hits: displayHits, groupedHits: groupedSuggestions, selectedIndex: selectedIndex, onSelect: handleSelect, onHover: setSelectedIndex, query: query, isLoading: isLoading, error: error, translations: translations, sources: searchSources })),
+                React.createElement(Footer, { translations: translations })))));
+}
+
 /**
  * useSeekoraSearch Hook
  *
@@ -10626,7 +12153,9 @@ const useSeekoraSearch = ({ client, autoTrack = true, }) => {
 /**
  * useAnalytics Hook
  *
- * Hook for tracking analytics events with the Seekora SDK
+ * Hook for tracking analytics events with the Seekora SDK.
+ * Supports Analytics V3 payload fields (event_ts, anonymous_id, orgcode, xstoreid);
+ * the SDK sends both legacy and v3 fields for backend compatibility.
  */
 const useAnalytics = ({ client, enabled = true, }) => {
     const trackEvent = useCallback(async (eventType, payload, context) => {
@@ -10646,14 +12175,17 @@ const useAnalytics = ({ client, enabled = true, }) => {
     const trackClick = useCallback(async (resultId, result, context, position) => {
         if (!enabled)
             return;
-        await trackEvent('product_click', {
-            clicked_item_id: resultId,
-            metadata: {
-                result: result,
-                ...(position !== undefined && { position }),
-            },
-        }, context);
-    }, [trackEvent, enabled]);
+        const pos = position ?? 0;
+        if (client.trackClick) {
+            await client.trackClick(resultId, pos, context);
+        }
+        else {
+            await trackEvent('product_click', {
+                clicked_item_id: resultId,
+                metadata: { result, ...(position !== undefined && { position: pos }) },
+            }, context);
+        }
+    }, [client, trackEvent, enabled]);
     const trackConversion = useCallback(async (resultId, result, value, currency, context) => {
         if (!enabled)
             return;
@@ -11675,5 +13207,5 @@ function updateSuggestionsStyles(theme) {
     injectSuggestionsStyles(theme, true);
 }
 
-export { AmazonDropdown, Breadcrumb, ClearRefinements, CurrentRefinements, Facets, FederatedDropdown, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight, HitsPerPage, InfiniteHits, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchLayout, SearchProvider, SearchResults, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionSearchBar, TrendingItems, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBrand, extractCategory, extractProduct, extractSuggestion, formatParsedFilters, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getRecentSearches, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, minimalTheme, minimalThemeVariables, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useInjectResponsiveStyles, useNaturalLanguageFilters, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics };
+export { AmazonDropdown, Breadcrumb, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, Facets, FederatedDropdown, Fingerprint, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight$1 as Highlight, HitsPerPage, InfiniteHits, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchLayout, SearchProvider, SearchResults, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionSearchBar, TrendingItems, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBrand, extractCategory, extractProduct, extractSuggestion, formatParsedFilters, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getFingerprint, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, minimalTheme, minimalThemeVariables, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics };
 //# sourceMappingURL=index.esm.js.map