@seekora-ai/docsearch-react 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,661 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback, useReducer, useState } from 'react';
+
+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)
+        return null;
+    return (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 }) }));
+}
+
+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 }) {
+    // Determine if this is a full hit or a suggestion
+    const isFullHit = 'objectID' in hit;
+    // Get hierarchy breadcrumb
+    const hierarchy = hit.hierarchy || {};
+    const suggestion = hit;
+    // For admin pages, use category and parentTitle; for docs, use hierarchy
+    const breadcrumb = suggestion.parentTitle
+        ? `${suggestion.category || ''} › ${suggestion.parentTitle}`.replace(/^› /, '')
+        : suggestion.category
+            ? suggestion.category
+            : [hierarchy.lvl0, hierarchy.lvl1, hierarchy.lvl2]
+                .filter(Boolean)
+                .join(' › ');
+    // Get title
+    const title = hit.title || hierarchy.lvl1 || hierarchy.lvl0 || 'Untitled';
+    // 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 || '#';
+    return (jsxs("a", { href: url, className: `seekora-docsearch-hit ${isSelected ? 'seekora-docsearch-hit--selected' : ''}`, onClick: (e) => {
+            e.preventDefault();
+            onClick();
+        }, onMouseEnter: onMouseEnter, role: "option", "aria-selected": isSelected, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, children: [jsx("div", { className: "seekora-docsearch-hit-icon", children: jsx(HitIcon, { type: getHitType(hit) }) }), jsxs("div", { className: "seekora-docsearch-hit-content", children: [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" }) })) })] }));
+}
+function getHitType(hit) {
+    if ('section_level' in hit) {
+        const level = hit.section_level;
+        if (level === 0)
+            return 'page';
+        if (level <= 2)
+            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" }) }));
+    }
+}
+
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, query, isLoading, error, translations = {}, 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);
+                            return (jsx("li", { children: jsx(Hit, { hit: hit, isSelected: globalIndex === selectedIndex, onClick: () => onSelect(hit), onMouseEnter: () => onHover(globalIndex), openInNewTab: group.openInNewTab }) }, getHitKey(hit, hitIndex)));
+                        }) })] }, group.sourceId + '-' + groupIndex))) }) }));
+}
+function groupHitsByCategory(hits) {
+    const groups = new Map();
+    for (const hit of hits) {
+        const category = hit.hierarchy?.lvl0 || '';
+        if (!groups.has(category)) {
+            groups.set(category, []);
+        }
+        groups.get(category).push(hit);
+    }
+    return Array.from(groups.entries()).map(([category, hits]) => ({
+        category: category || null,
+        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(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+        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 () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        ...state,
+        sources: searchSources,
+        setQuery,
+        search,
+        fetchSuggestions,
+        selectNext,
+        selectPrev,
+        setSelectedIndex,
+        reset,
+        getSelectedItem,
+    };
+}
+
+function DocSearch({ apiEndpoint, apiKey, sources, indexName, 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 { query, suggestions, groupedSuggestions, results, isLoading, error, selectedIndex, mode, sources: searchSources, setQuery, selectNext, selectPrev, setSelectedIndex, reset, getSelectedItem, } = useDocSearch({
+        apiEndpoint,
+        apiKey,
+        sources,
+        maxResults,
+        debounceMs,
+    });
+    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 };
+//# sourceMappingURL=index.esm.js.map