@seekora-ai/docsearch-react 0.1.1

package/dist/index.esm.js

@@ -0,0 +1,1030 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback, useReducer, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { SeekoraClient } from '@seekora-ai/search-sdk';
+
+/**
+ * Modal component that renders via React Portal to document.body.
+ * This ensures the search overlay renders independently of its integration context,
+ * avoiding clipping/positioning issues from parent overflow, transform, or stacking contexts.
+ */
+function Modal({ isOpen, onClose, children }) {
+    const overlayRef = useRef(null);
+    const containerRef = useRef(null);
+    // Handle click outside to close
+    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]);
+    // Lock body scroll when open
+    useEffect(() => {
+        if (isOpen) {
+            const originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
+        }
+    }, [isOpen]);
+    // Focus trap
+    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 = (jsx("div", { ref: overlayRef, className: "seekora-docsearch-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Search documentation", children: jsx("div", { ref: containerRef, className: "seekora-docsearch-container", children: children }) }));
+    // Portal to document.body so the modal renders above all site content,
+    // independent of parent overflow, transform, or stacking context.
+    return createPortal(modalContent, document.body);
+}
+
+function SearchBox({ value, onChange, onKeyDown, placeholder = 'Search documentation...', isLoading = false, onClear, }) {
+    const inputRef = useRef(null);
+    // Focus input when mounted
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const handleChange = (event) => {
+        onChange(event.target.value);
+    };
+    const handleClear = () => {
+        onChange('');
+        onClear?.();
+        inputRef.current?.focus();
+    };
+    return (jsxs("div", { className: "seekora-docsearch-searchbox", children: [jsx("label", { className: "seekora-docsearch-searchbox-icon", htmlFor: "seekora-docsearch-input", children: isLoading ? (jsx("span", { className: "seekora-docsearch-spinner", "aria-hidden": "true", children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40", strokeDashoffset: "10", children: jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "0.8s", repeatCount: "indefinite" }) }) }) })) : (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsx("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" }) })) }), jsx("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 && (jsx("button", { type: "button", className: "seekora-docsearch-clear", onClick: handleClear, "aria-label": "Clear search", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsx("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" }) }) }))] }));
+}
+
+/**
+ * Renders text with highlighted matches.
+ * Expects highlightedValue to contain <mark> tags around matches.
+ */
+function Highlight({ value, highlightedValue }) {
+    // If no highlighted value, render plain text
+    if (!highlightedValue) {
+        return jsx("span", { children: value });
+    }
+    // Parse the highlighted value and render with mark tags
+    // The API returns text with <mark> tags for highlighting
+    return (jsx("span", { className: "seekora-docsearch-highlight", dangerouslySetInnerHTML: { __html: sanitizeHtml(highlightedValue) } }));
+}
+/**
+ * Sanitize HTML to only allow <mark> tags for highlighting.
+ * This prevents XSS attacks while allowing highlighting.
+ */
+function sanitizeHtml(html) {
+    // First, escape all HTML
+    const escaped = html
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    // Then, restore only <mark> and </mark> tags
+    return escaped
+        .replace(/&lt;mark&gt;/g, '<mark>')
+        .replace(/&lt;\/mark&gt;/g, '</mark>')
+        // Also handle ais-highlight format (Algolia-style)
+        .replace(/&lt;ais-highlight&gt;/g, '<mark>')
+        .replace(/&lt;\/ais-highlight&gt;/g, '</mark>')
+        // Handle em tags too
+        .replace(/&lt;em&gt;/g, '<mark>')
+        .replace(/&lt;\/em&gt;/g, '</mark>');
+}
+/**
+ * Truncate content and highlight the matched portion.
+ */
+function truncateAroundMatch(content, maxLength = 150) {
+    // If content contains a mark tag, try to center around it
+    const markIndex = content.indexOf('<mark>');
+    if (markIndex === -1 || content.length <= maxLength) {
+        // No highlight or short enough, just truncate from start
+        if (content.length <= maxLength) {
+            return content;
+        }
+        return content.slice(0, maxLength) + '...';
+    }
+    // Center around the first match
+    const halfLength = Math.floor(maxLength / 2);
+    let start = Math.max(0, markIndex - halfLength);
+    let end = Math.min(content.length, markIndex + halfLength);
+    // Adjust to not cut in the middle of a word
+    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 }) {
+    // Determine if this is a full hit or a suggestion
+    const isFullHit = 'objectID' in hit;
+    // Get suggestion for type checking
+    const suggestion = hit;
+    // Get the type from prop or from the suggestion itself
+    const hitType = hierarchyType || suggestion.type;
+    // For admin pages, use category and parentTitle; for docs, breadcrumb is not needed
+    // since we group by lvl0 which already shows the path
+    const breadcrumb = suggestion.parentTitle
+        ? `${suggestion.category || ''} › ${suggestion.parentTitle}`.replace(/^› /, '')
+        : suggestion.category
+            ? suggestion.category
+            : ''; // Don't show breadcrumb for docs - the group header already shows lvl0
+    // Get title based on the type field
+    // - type=lvl1: use lvl1 as title (page-level)
+    // - type=lvl2: use lvl2 as title (section)
+    // - type=lvl3: use lvl3 as title, etc.
+    const title = getTitleForType(hit, hitType);
+    // Get highlighted values
+    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 || '';
+        }
+    }
+    // Truncate content around match
+    const displayContent = highlightedContent
+        ? truncateAroundMatch(highlightedContent, 120)
+        : '';
+    // Determine URL - use route for admin pages if url not set
+    const url = hit.url || suggestion.route || '#';
+    // Build class names
+    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 (jsxs("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, children: [isChild && (jsx("div", { className: "seekora-docsearch-hit-tree", children: jsx(TreeConnector, { isLast: isLastChild }) })), jsx("div", { className: "seekora-docsearch-hit-icon", children: jsx(HitIcon, { type: getHitTypeFromLevel(hitType) }) }), jsxs("div", { className: "seekora-docsearch-hit-content", children: [!isChild && breadcrumb && (jsx("span", { className: "seekora-docsearch-hit-breadcrumb", children: breadcrumb })), jsx("span", { className: "seekora-docsearch-hit-title", children: jsx(Highlight, { value: title, highlightedValue: highlightedTitle }) }), displayContent && (jsx("span", { className: "seekora-docsearch-hit-description", children: jsx(Highlight, { value: hit.content || '', highlightedValue: displayContent }) }))] }), jsx("div", { className: "seekora-docsearch-hit-action", children: openInNewTab ? (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M6 3H3v10h10v-3M9 3h4v4M14 2L7 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M6.75 3.25L11.5 8L6.75 12.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }));
+}
+/**
+ * Get the title based on the type field from API.
+ * - type=lvl1: use lvl1 as title (page-level result)
+ * - type=lvl2: use lvl2 as title (section)
+ * - type=lvl3: use lvl3 as title, etc.
+ */
+function getTitleForType(hit, type) {
+    const hierarchy = hit.hierarchy || {};
+    if (!type) {
+        // Fallback to existing logic if no type
+        return hit.title || hierarchy.lvl1 || hierarchy.lvl0 || 'Untitled';
+    }
+    // Extract level number from type (e.g., "lvl2" -> 2)
+    const match = type.match(/^lvl(\d+)$/);
+    if (match) {
+        const level = parseInt(match[1], 10);
+        // Try to get the title from the matching hierarchy level
+        const levelKey = `lvl${level}`;
+        const levelTitle = hierarchy[levelKey];
+        if (levelTitle) {
+            return levelTitle;
+        }
+    }
+    // Fallback
+    return hit.title || hierarchy.lvl1 || hierarchy.lvl0 || 'Untitled';
+}
+/**
+ * Get the icon type based on the hierarchy type from API.
+ * - type=lvl1: page icon (page-level result)
+ * - type=lvl2, lvl3, etc.: section icon (child sections)
+ */
+function getHitTypeFromLevel(type) {
+    if (!type) {
+        return 'page';
+    }
+    // Extract level number from type (e.g., "lvl2" -> 2)
+    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 (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [jsx("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" }), jsx("path", { d: "M7 7h6M7 10h6M7 13h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+        case 'section':
+            return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4 5.5h12M4 10h12M4 14.5h8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+        case 'content':
+            return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4 6h12M4 10h8M4 14h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+    }
+}
+// Tree connector for hierarchical display
+function TreeConnector({ isLast }) {
+    return (jsx("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", "aria-hidden": "true", className: "seekora-docsearch-hit-tree-icon", children: isLast ? (
+        // └─ Last child connector
+        jsx("path", { d: "M8 0V10H14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) : (
+        // ├─ Middle child connector
+        jsxs(Fragment, { children: [jsx("path", { d: "M8 0V20", stroke: "currentColor", strokeWidth: "1.5" }), jsx("path", { d: "M8 10H14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] })) }));
+}
+
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, query, isLoading, error, translations = {}, sources: _sources = [], }) {
+    const listRef = useRef(null);
+    // Scroll selected item into view
+    useEffect(() => {
+        if (listRef.current && hits.length > 0) {
+            const selectedItem = listRef.current.children[selectedIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [selectedIndex, hits.length]);
+    // Empty state - no query
+    if (!query) {
+        return (jsx("div", { className: "seekora-docsearch-empty", children: jsx("p", { className: "seekora-docsearch-empty-text", children: translations.searchPlaceholder || 'Type to start searching...' }) }));
+    }
+    // Loading state
+    if (isLoading && hits.length === 0) {
+        return (jsxs("div", { className: "seekora-docsearch-loading", children: [jsx("div", { className: "seekora-docsearch-loading-spinner", children: jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "50", strokeDashoffset: "15", children: jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) }) }) }), jsx("p", { className: "seekora-docsearch-loading-text", children: translations.loadingText || 'Searching...' })] }));
+    }
+    // Error state
+    if (error) {
+        return (jsx("div", { className: "seekora-docsearch-error", children: jsx("p", { className: "seekora-docsearch-error-text", children: translations.errorText || error }) }));
+    }
+    // No results
+    if (hits.length === 0 && query) {
+        return (jsx("div", { className: "seekora-docsearch-no-results", children: jsx("p", { className: "seekora-docsearch-no-results-text", children: translations.noResultsText || `No results found for "${query}"` }) }));
+    }
+    // Use multi-source grouped hits if available, otherwise group by category
+    const displayGroups = groupedHits && groupedHits.length > 0
+        ? groupedHits.map(g => ({
+            category: g.source.name,
+            sourceId: g.source.id,
+            openInNewTab: g.source.openInNewTab,
+            hits: g.items,
+        }))
+        : groupHitsByCategory(hits).map(g => ({
+            category: g.category,
+            sourceId: 'default',
+            openInNewTab: false,
+            hits: g.hits,
+        }));
+    return (jsx("div", { className: "seekora-docsearch-results", children: jsx("ul", { ref: listRef, id: "seekora-docsearch-results", className: "seekora-docsearch-results-list", role: "listbox", children: displayGroups.map((group, groupIndex) => (jsxs("li", { className: "seekora-docsearch-results-group", children: [group.category && (jsx("div", { className: "seekora-docsearch-results-group-header", children: group.category })), jsx("ul", { className: "seekora-docsearch-results-group-items", children: group.hits.map((hit, hitIndex) => {
+                            const globalIndex = getGlobalIndexMulti(displayGroups, groupIndex, hitIndex);
+                            const extHit = hit;
+                            // Use computed isChild/isLastChild values (derived from type field)
+                            const isChild = extHit.isChild === true;
+                            const isLastChild = extHit.isLastChild === true;
+                            // Pass the type field to Hit for icon determination
+                            const hitType = extHit.type;
+                            return (jsx("li", { children: jsx(Hit, { hit: hit, isSelected: globalIndex === selectedIndex, onClick: () => onSelect(hit), onMouseEnter: () => onHover(globalIndex), openInNewTab: group.openInNewTab, isChild: isChild, isLastChild: isLastChild, hierarchyType: hitType }) }, getHitKey(hit, hitIndex)));
+                        }) })] }, group.sourceId + '-' + groupIndex))) }) }));
+}
+/**
+ * Helper to get the hierarchy level number from a type string (e.g., "lvl1" -> 1, "lvl2" -> 2)
+ * Returns 1 as default for parent-level items
+ */
+function getTypeLevel(type) {
+    if (!type)
+        return 1;
+    const match = type.match(/^lvl(\d+)$/);
+    return match ? parseInt(match[1], 10) : 1;
+}
+/**
+ * Check if a hit is a child (type is lvl2, lvl3, etc.)
+ * type="lvl1" = parent (page-level result)
+ * type="lvl2", "lvl3", etc. = children (sections)
+ */
+function isChildType(type) {
+    const level = getTypeLevel(type);
+    return level >= 2;
+}
+/**
+ * Groups hits by hierarchy.lvl0 and marks parent/child relationships based on type field.
+ * - Groups are keyed by lvl0 (which contains the full path like "Guides > SDK > Search")
+ * - type="lvl1" = parent (page-level result)
+ * - type="lvl2", "lvl3", etc. = children (sections)
+ */
+function groupHitsByHierarchy(hits) {
+    const groups = new Map();
+    for (const hit of hits) {
+        // Group by lvl0 - this is the source of truth for grouping
+        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()) {
+        // Sort hits within each group: parents (lvl1) first, then children by type level
+        const sortedHits = [...groupHits].sort((a, b) => {
+            const aType = a.type;
+            const bType = b.type;
+            const aLevel = getTypeLevel(aType);
+            const bLevel = getTypeLevel(bType);
+            // Sort by level: lvl1 first, then lvl2, lvl3, etc.
+            return aLevel - bLevel;
+        });
+        // Mark isChild and isLastChild based on type field
+        const markedHits = sortedHits.map((hit, index) => {
+            const suggestion = hit;
+            const hitType = suggestion.type;
+            const isChild = isChildType(hitType);
+            // Determine if this is the last child in the group
+            // Check if this is a child and the next item is either not a child or doesn't exist
+            let isLastChild = false;
+            if (isChild) {
+                const nextHit = sortedHits[index + 1];
+                if (!nextHit || !isChildType(nextHit.type)) {
+                    isLastChild = true;
+                }
+            }
+            return {
+                ...hit,
+                isChild,
+                isLastChild,
+            };
+        });
+        result.push({
+            category: lvl0Key || null,
+            hits: markedHits,
+        });
+    }
+    return result;
+}
+// Legacy function for backward compatibility
+function groupHitsByCategory(hits) {
+    return groupHitsByHierarchy(hits);
+}
+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 Footer({ translations = {} }) {
+    return (jsxs("footer", { className: "seekora-docsearch-footer", children: [jsx("div", { className: "seekora-docsearch-footer-commands", children: jsxs("ul", { className: "seekora-docsearch-footer-commands-list", children: [jsx("li", { children: jsxs("span", { className: "seekora-docsearch-footer-command", children: [jsx("kbd", { className: "seekora-docsearch-key", children: "\u21B5" }), jsx("span", { children: "to select" })] }) }), jsx("li", { children: jsxs("span", { className: "seekora-docsearch-footer-command", children: [jsx("kbd", { className: "seekora-docsearch-key", children: "\u2191" }), jsx("kbd", { className: "seekora-docsearch-key", children: "\u2193" }), jsx("span", { children: "to navigate" })] }) }), jsx("li", { children: jsxs("span", { className: "seekora-docsearch-footer-command", children: [jsx("kbd", { className: "seekora-docsearch-key", children: "esc" }), jsx("span", { children: translations.closeText || 'to close' })] }) })] }) }), jsxs("div", { className: "seekora-docsearch-footer-logo", children: [jsx("span", { className: "seekora-docsearch-footer-logo-text", children: translations.searchByText || 'Search by' }), jsx("a", { href: "https://seekora.ai", target: "_blank", rel: "noopener noreferrer", className: "seekora-docsearch-footer-logo-link", children: jsx(SekoraLogo, {}) })] })] }));
+}
+function SekoraLogo() {
+    return (jsx("svg", { width: "77", height: "19", viewBox: "0 0 77 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Seekora", className: "seekora-docsearch-logo", children: jsx("text", { x: "0", y: "15", fontFamily: "system-ui, -apple-system, sans-serif", fontSize: "14", fontWeight: "600", fill: "currentColor", children: "Seekora" }) }));
+}
+
+function useKeyboard(options) {
+    const { isOpen, onOpen, onClose, onSelectNext, onSelectPrev, onEnter, disableShortcut = false, shortcutKey = 'k', } = options;
+    const handleGlobalKeyDown = useCallback((event) => {
+        // Open modal with Cmd/Ctrl + K
+        if (!disableShortcut && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcutKey) {
+            event.preventDefault();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                onOpen();
+            }
+            return;
+        }
+        // Forward slash to open (when not in an input)
+        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':
+                // Allow Tab but prevent default to keep focus in modal
+                if (event.shiftKey) {
+                    onSelectPrev();
+                }
+                else {
+                    onSelectNext();
+                }
+                event.preventDefault();
+                break;
+        }
+    }, [onClose, onSelectNext, onSelectPrev, onEnter]);
+    // Global keyboard listener
+    useEffect(() => {
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleGlobalKeyDown);
+        };
+    }, [handleGlobalKeyDown]);
+    return {
+        handleModalKeyDown,
+    };
+}
+/**
+ * Get the keyboard shortcut display text based on platform
+ */
+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 (jsxs("button", { type: "button", className: "seekora-docsearch-button", onClick: onClick, "aria-label": "Search documentation", children: [jsx("span", { className: "seekora-docsearch-button-icon", children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsx("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" }) }) }), jsx("span", { className: "seekora-docsearch-button-placeholder", children: placeholder }), jsx("span", { className: "seekora-docsearch-button-keys", children: jsx("kbd", { className: "seekora-docsearch-button-key", children: 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':
+            // Flatten grouped suggestions for navigation while keeping groups for display
+            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;
+    // Build sources array from either explicit sources or legacy single endpoint
+    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);
+    // Default transform function for API responses
+    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 fetchFromSource = useCallback(async (source, query, signal) => {
+        const minLength = source.minQueryLength ?? 1;
+        if (query.length < minLength) {
+            return [];
+        }
+        try {
+            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) {
+                console.warn(`Search source ${source.id} failed: ${response.statusText}`);
+                return [];
+            }
+            const data = await response.json();
+            // Use custom transform or default
+            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; // Re-throw abort errors
+            }
+            console.warn(`Search source ${source.id} error:`, error);
+            return [];
+        }
+    }, []);
+    const fetchSuggestions = useCallback(async (query) => {
+        if (!query.trim()) {
+            dispatch({ type: 'SET_GROUPED_SUGGESTIONS', payload: [] });
+            return;
+        }
+        // Cancel all previous requests
+        abortControllersRef.current.forEach(controller => controller.abort());
+        abortControllersRef.current.clear();
+        dispatch({ type: 'SET_LOADING', payload: true });
+        dispatch({ type: 'SET_ERROR', payload: null });
+        try {
+            // Fetch from all sources in parallel
+            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 };
+            }));
+            // Filter out empty results and dispatch grouped
+            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; // Request was cancelled
+            }
+            dispatch({
+                type: 'SET_ERROR',
+                payload: error instanceof Error ? error.message : 'Search failed',
+            });
+        }
+        finally {
+            dispatch({ type: 'SET_LOADING', payload: false });
+        }
+    }, [searchSources, fetchFromSource]);
+    const search = useCallback(async (query) => {
+        // For now, search behaves same as fetchSuggestions
+        await fetchSuggestions(query);
+    }, [fetchSuggestions]);
+    const setQuery = useCallback((query) => {
+        dispatch({ type: 'SET_QUERY', payload: query });
+        // Clear existing debounce timer
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // Debounce the search
+        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(controller => controller.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]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            abortControllersRef.current.forEach(controller => controller.abort());
+            abortControllersRef.current.clear();
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        ...state,
+        sources: searchSources,
+        setQuery,
+        search,
+        fetchSuggestions,
+        selectNext,
+        selectPrev,
+        setSelectedIndex,
+        reset,
+        getSelectedItem,
+    };
+}
+
+/**
+ * Transform Seekora SDK search results to DocSearch format
+ */
+function transformResults(results) {
+    return results.map((result) => {
+        // Handle different field name conventions
+        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) || '';
+        // Build hierarchy from available fields
+        const hierarchy = {};
+        if (result.hierarchy) {
+            hierarchy.lvl0 = result.hierarchy.lvl0;
+            hierarchy.lvl1 = result.hierarchy.lvl1;
+            hierarchy.lvl2 = result.hierarchy.lvl2;
+        }
+        else {
+            // Try to extract hierarchy from category or breadcrumb fields
+            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',
+        };
+    });
+}
+/**
+ * Hook for searching using the Seekora SDK
+ *
+ * This hook provides a seamless integration with the Seekora Search SDK,
+ * handling client initialization, debouncing, and result transformation.
+ */
+function useSeekoraSearch(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 debounceTimerRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    // Initialize the Seekora client
+    useEffect(() => {
+        if (!storeId) {
+            return;
+        }
+        const config = {
+            storeId,
+            readSecret: storeSecret,
+            logLevel: 'warn', // Keep logging quiet in the widget
+        };
+        // Handle endpoint configuration
+        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]);
+    // Search function
+    const performSearch = useCallback(async (searchQuery) => {
+        if (!clientRef.current) {
+            setError('Search client not initialized');
+            return;
+        }
+        if (!searchQuery.trim()) {
+            setSuggestions([]);
+            return;
+        }
+        // Cancel any pending request
+        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,
+                // Doc search specific parameters (Algolia-style)
+                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,
+                // Grouping for hierarchy display
+                group_field: groupField,
+                group_size: groupSize,
+            });
+            // Check if this request was aborted
+            if (abortControllerRef.current?.signal.aborted) {
+                return;
+            }
+            const transformedResults = transformResults(response.results || []);
+            setSuggestions(transformedResults);
+            setSelectedIndex(0);
+        }
+        catch (err) {
+            // Ignore abort errors
+            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]);
+    // Set query with debouncing
+    const setQuery = useCallback((newQuery) => {
+        setQueryState(newQuery);
+        setSelectedIndex(0);
+        // Clear existing debounce timer
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // Debounce the search
+        debounceTimerRef.current = setTimeout(() => {
+            performSearch(newQuery);
+        }, debounceMs);
+    }, [performSearch, debounceMs]);
+    // Navigation functions
+    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]);
+    // Reset function
+    const reset = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        setQueryState('');
+        setSuggestions([]);
+        setIsLoading(false);
+        setError(null);
+        setSelectedIndex(0);
+    }, []);
+    // Get selected item
+    const getSelectedItem = useCallback(() => {
+        return suggestions[selectedIndex] || null;
+    }, [suggestions, selectedIndex]);
+    // Cleanup on unmount
+    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,
+    };
+}
+
+function DocSearch({ 
+// New Seekora SDK props
+storeId, storeSecret, seekoraApiEndpoint, 
+// Legacy props (deprecated when using storeId)
+apiEndpoint, apiKey, sources, 
+// indexName is accepted but not used (kept for backward compatibility)
+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);
+    // Determine if we should use the Seekora SDK
+    const useSeekoraSDK = !!storeId;
+    // Seekora SDK-based search (when storeId is provided)
+    const seekoraSearch = useSeekoraSearch({
+        storeId: storeId || '',
+        storeSecret,
+        apiEndpoint: seekoraApiEndpoint,
+        maxResults,
+        debounceMs,
+        analyticsTags: ['docsearch'],
+    });
+    // Legacy fetch-based search (when using apiEndpoint/sources)
+    const legacySearch = useDocSearch({
+        apiEndpoint,
+        apiKey,
+        sources,
+        maxResults,
+        debounceMs,
+    });
+    // Select the appropriate search implementation
+    const { query, suggestions, isLoading, error, selectedIndex, setQuery, selectNext, selectPrev, setSelectedIndex, reset, getSelectedItem, } = useSeekoraSDK ? seekoraSearch : legacySearch;
+    // For legacy mode, get additional fields
+    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 (onSelect) {
+            onSelect(hit);
+        }
+        else {
+            // Default behavior: navigate to URL
+            window.location.href = hit.url;
+        }
+        handleClose();
+    }, [onSelect, handleClose]);
+    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]);
+    // Get the items to display (suggestions or full results)
+    const displayHits = mode === 'results' ? results : suggestions;
+    return (jsxs(Fragment, { children: [renderButton && (jsx(ButtonComponent, { onClick: handleOpen, placeholder: translations.buttonText || placeholder })), jsx(Modal, { isOpen: isOpen, onClose: handleClose, children: jsxs("div", { className: "seekora-docsearch-modal", onKeyDown: handleKeyDown, children: [jsxs("header", { className: "seekora-docsearch-header", children: [jsx(SearchBox, { value: query, onChange: setQuery, onKeyDown: handleKeyDown, placeholder: placeholder, isLoading: isLoading, onClear: reset }), jsx("button", { type: "button", className: "seekora-docsearch-close", onClick: handleClose, "aria-label": "Close search", children: jsx("span", { className: "seekora-docsearch-close-text", children: "esc" }) })] }), jsx("div", { className: "seekora-docsearch-body", children: jsx(Results, { hits: displayHits, groupedHits: groupedSuggestions, selectedIndex: selectedIndex, onSelect: handleSelect, onHover: setSelectedIndex, query: query, isLoading: isLoading, error: error, translations: translations, sources: searchSources }) }), jsx(Footer, { translations: translations })] }) })] }));
+}
+
+export { DocSearch, DocSearchButton, Footer, Highlight, Hit, Modal, Results, SearchBox, getShortcutText, truncateAroundMatch, useDocSearch, useKeyboard, useSeekoraSearch };
+//# sourceMappingURL=index.esm.js.map