@robosystems/core 0.4.0 → 0.5.1

package/components/index.d.ts

@@ -6,5 +6,5 @@ export { GraphSelectorCore, type GraphSelectorProps } from './GraphSelectorCore'
 export { PageLayout } from './PageLayout';
 export { ActiveSubscriptions, BrowseRepositories, type ActiveSubscriptionsProps, type BrowseRepositoriesProps, } from './repositories';
 export { RepositoryGuard, useIsRepository } from './RepositoryGuard';
-export { SearchContent } from './search';
-export type { SearchConfig, SearchFilterConfig } from './search';
+export { SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, } from './search';
+export type { SearchBarProps, SearchConfig, SearchFilterConfig, SearchHitCardProps, SearchPaginationProps, SearchResultsMetaProps, } from './search';

package/components/index.js

@@ -6,4 +6,4 @@ export { GraphSelectorCore } from './GraphSelectorCore';
 export { PageLayout } from './PageLayout';
 export { ActiveSubscriptions, BrowseRepositories, } from './repositories';
 export { RepositoryGuard, useIsRepository } from './RepositoryGuard';
-export { SearchContent } from './search';
+export { SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, } from './search';

package/components/search/SearchBar.d.ts

@@ -0,0 +1,21 @@
+export interface SearchBarProps {
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Invoked by both the Enter key and the search button. */
+    onSearch: () => void;
+    loading?: boolean;
+    placeholder?: string;
+    /** Button label — Recall surfaces pass 'Recall'. */
+    buttonLabel?: string;
+    buttonColor?: string;
+    /** When provided, a gray X clear button renders after the search button. */
+    onClear?: () => void;
+    /** Controls clear-button visibility (e.g. only after a search ran). */
+    showClear?: boolean;
+}
+/**
+ * The standard search input row: query field + submit button + optional
+ * clear button. Shared by the document Search page and the memory Recall
+ * panel so the two surfaces stay visually aligned.
+ */
+export declare function SearchBar({ query, onQueryChange, onSearch, loading, placeholder, buttonLabel, buttonColor, onClear, showClear, }: SearchBarProps): import("react").JSX.Element;

package/components/search/SearchBar.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Spinner, TextInput } from 'flowbite-react';
+import { HiSearch, HiX } from 'react-icons/hi';
+/**
+ * The standard search input row: query field + submit button + optional
+ * clear button. Shared by the document Search page and the memory Recall
+ * panel so the two surfaces stay visually aligned.
+ */
+export function SearchBar({ query, onQueryChange, onSearch, loading = false, placeholder, buttonLabel = 'Search', buttonColor = 'purple', onClear, showClear, }) {
+    const clearVisible = onClear ? (showClear !== null && showClear !== void 0 ? showClear : true) : false;
+    return (_jsxs("div", { className: "flex gap-2", children: [_jsx(TextInput, { className: "flex-1", icon: HiSearch, value: query, onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter')
+                        onSearch();
+                }, placeholder: placeholder }), _jsx(Button, { color: buttonColor, onClick: onSearch, disabled: loading || !query.trim(), children: loading ? _jsx(Spinner, { size: "sm", className: "text-white" }) : buttonLabel }), clearVisible && (_jsx(Button, { color: "gray", onClick: onClear, "aria-label": "Clear search", children: _jsx(HiX, { className: "h-4 w-4" }) }))] }));
+}

package/components/search/SearchContent.js

@@ -1,14 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SDK from '@robosystems/client';
-import { Alert, Badge, Button, Card, Select, Spinner, TextInput, ToggleSwitch, } from 'flowbite-react';
+import { Alert, Card, Select, Spinner, TextInput, ToggleSwitch, } from 'flowbite-react';
 import { useCallback, useEffect, useState } from 'react';
 import { HiChevronDown, HiChevronUp, HiSearch } from 'react-icons/hi';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 import { useIsRepository } from '../../components/RepositoryGuard';
 import { useGraphContext } from '../../contexts';
+import { MarkdownProse } from '../../ui-components/MarkdownProse';
 import { PageLayout } from '../PageLayout';
+import { SearchBar } from './SearchBar';
+import { SearchHitCard } from './SearchHitCard';
+import { SearchPagination } from './SearchPagination';
+import { SearchResultsMeta } from './SearchResultsMeta';
 const PAGE_SIZE = 20;
 export function SearchContent({ config }) {
     var _a, _b, _c;
@@ -110,11 +113,6 @@ export function SearchContent({ config }) {
             setLoading(false);
         }
     }, [graphId, query, sourceType, entity, formType, fiscalYear, semantic]);
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            handleSearch(0);
-        }
-    };
     const handleExpand = async (docId) => {
         if (expandedDocId === docId) {
             setExpandedDocId(null);
@@ -149,20 +147,5 @@ export function SearchContent({ config }) {
     if (!graphId) {
         return (_jsx(PageLayout, { children: _jsxs("div", { className: "py-12 text-center", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 mx-auto mb-4 w-fit rounded-lg bg-gradient-to-br p-3", children: _jsx(HiSearch, { className: "h-8 w-8 text-white" }) }), _jsx("h2", { className: "font-heading text-lg font-semibold text-gray-700 dark:text-gray-300", children: config.title }), _jsx("p", { className: "mt-2 text-gray-500 dark:text-gray-400", children: "Select a graph to search documents." })] }) }));
     }
-    return (_jsxs(PageLayout, { children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 rounded-lg bg-gradient-to-br p-3", children: _jsx(HiSearch, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-gray-900 dark:text-white", children: config.title }), _jsxs("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: [config.description, docCount !== null && docCount > 0 && (_jsxs("span", { className: "ml-2 text-gray-400 dark:text-gray-500", children: ["(", docCount, " document", docCount !== 1 ? 's' : '', " indexed)"] }))] })] })] }), _jsx(Card, { children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(TextInput, { className: "flex-1", placeholder: config.placeholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, icon: HiSearch }), _jsx(Button, { color: "purple", onClick: () => handleSearch(0), disabled: loading || !query.trim(), children: loading ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Search') })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [hasFilters && (_jsxs("button", { type: "button", onClick: () => setShowFilters(!showFilters), className: "flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: ["Filters", showFilters ? (_jsx(HiChevronUp, { className: "h-4 w-4" })) : (_jsx(HiChevronDown, { className: "h-4 w-4" }))] })), filters.semantic && (_jsx(ToggleSwitch, { checked: semantic, onChange: setSemantic, label: "Semantic search" }))] }), showFilters && hasFilters && (_jsxs("div", { className: "grid grid-cols-1 gap-3 border-t border-gray-200 pt-4 sm:grid-cols-2 lg:grid-cols-4 dark:border-gray-700", children: [filters.sourceType && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-source-type", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Source Type" }), _jsxs(Select, { id: "search-source-type", value: sourceType, onChange: (e) => setSourceType(e.target.value), children: [_jsx("option", { value: "", children: "All types" }), _jsx("option", { value: "uploaded_doc", children: "Uploaded Documents" }), _jsx("option", { value: "memory", children: "AI Memories" }), _jsx("option", { value: "narrative_section", children: "Narrative Sections" }), _jsx("option", { value: "xbrl_textblock", children: "XBRL Text Blocks" }), _jsx("option", { value: "ixbrl_disclosure", children: "iXBRL Disclosures" })] })] })), filters.entity && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-entity", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Entity / Ticker" }), _jsx(TextInput, { id: "search-entity", placeholder: "e.g. NVDA", value: entity, onChange: (e) => setEntity(e.target.value) })] })), filters.formType && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-form-type", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Form Type" }), _jsxs(Select, { id: "search-form-type", value: formType, onChange: (e) => setFormType(e.target.value), children: [_jsx("option", { value: "", children: "All forms" }), _jsx("option", { value: "10-K", children: "10-K (Annual)" }), _jsx("option", { value: "10-Q", children: "10-Q (Quarterly)" }), _jsx("option", { value: "8-K", children: "8-K (Current)" }), _jsx("option", { value: "20-F", children: "20-F (Foreign Annual)" })] })] })), filters.fiscalYear && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-fiscal-year", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Fiscal Year" }), _jsx(TextInput, { id: "search-fiscal-year", type: "number", placeholder: "e.g. 2024", min: 1900, max: 2100, value: fiscalYear, onChange: (e) => setFiscalYear(e.target.value) })] }))] }))] }) }), error && (_jsx(Alert, { color: "failure", children: _jsx("span", { children: error }) })), results.length > 0 && (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Showing ", offset + 1, "\u2013", Math.min(offset + PAGE_SIZE, total), " of", ' ', total, " results for \"", searchedQuery, "\""] }) }), results.map((hit) => {
-                        var _a;
-                        return (_jsxs(Card, { children: [_jsx("button", { type: "button", className: "w-full cursor-pointer text-left", onClick: () => handleExpand(hit.document_id), "aria-expanded": expandedDocId === hit.document_id, children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: hit.document_title || hit.section_label || 'Untitled' }), hit.section_label && hit.document_title && (_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["/ ", hit.section_label] }))] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsx(Badge, { color: "info", size: "xs", children: hit.score.toFixed(2) }), _jsx(Badge, { color: "gray", size: "xs", children: hit.source_type }), hit.entity_ticker && (_jsx(Badge, { color: "purple", size: "xs", children: hit.entity_ticker })), hit.form_type && (_jsx(Badge, { color: "warning", size: "xs", children: hit.form_type })), hit.fiscal_year && (_jsxs(Badge, { color: "gray", size: "xs", children: ["FY", hit.fiscal_year] })), (_a = hit.tags) === null || _a === void 0 ? void 0 : _a.map((tag) => (_jsx(Badge, { color: "purple", size: "xs", children: tag }, tag)))] }), hit.snippet && (_jsx("p", { className: "mt-3 line-clamp-2 text-sm text-gray-500 dark:text-gray-400", children: hit.snippet }))] }), _jsx("div", { className: "ml-3 shrink-0 pt-1", children: expandedDocId === hit.document_id ? (_jsx(HiChevronUp, { className: "h-5 w-5 text-gray-400" })) : (_jsx(HiChevronDown, { className: "h-5 w-5 text-gray-400" })) })] }) }), expandedDocId === hit.document_id && (_jsx("div", { className: "border-t border-gray-200 pt-4 dark:border-gray-700", children: sectionLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Spinner, { size: "sm" }), "Loading full content..."] })) : sectionContent ? (_jsxs("div", { children: [_jsx("div", { className: "prose prose-sm prose-gray max-h-96 max-w-none overflow-auto rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-800", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
-                                                        h1: ({ children }) => (_jsx("h1", { className: "text-gray-900 dark:text-white", children: children })),
-                                                        h2: ({ children }) => (_jsx("h2", { className: "text-gray-900 dark:text-white", children: children })),
-                                                        h3: ({ children }) => (_jsx("h3", { className: "text-gray-900 dark:text-white", children: children })),
-                                                        h4: ({ children }) => (_jsx("h4", { className: "text-gray-900 dark:text-white", children: children })),
-                                                        p: ({ children }) => (_jsx("p", { className: "text-gray-700 dark:text-gray-200", children: children })),
-                                                        li: ({ children }) => (_jsx("li", { className: "text-gray-700 dark:text-gray-200", children: children })),
-                                                        strong: ({ children }) => (_jsx("strong", { className: "text-gray-900 dark:text-white", children: children })),
-                                                        table: ({ children }) => (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { className: "min-w-full border-collapse text-sm", children: children }) })),
-                                                        thead: ({ children }) => (_jsx("thead", { className: "border-b-2 border-gray-300 dark:border-gray-600", children: children })),
-                                                        th: ({ children }) => (_jsx("th", { className: "px-3 py-2 text-left font-semibold text-gray-900 dark:text-white", children: children })),
-                                                        td: ({ children }) => (_jsx("td", { className: "border-t border-gray-200 px-3 py-2 text-gray-700 dark:border-gray-700 dark:text-gray-200", children: children })),
-                                                    }, children: sectionContent.content }) }), sectionContent.content_length && (_jsxs("p", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500", children: [sectionContent.content_length.toLocaleString(), ' ', "characters"] }))] })) : (_jsx("p", { className: "text-sm text-gray-500", children: "Could not load section content." })) }))] }, hit.document_id));
-                    }), total > PAGE_SIZE && (_jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx(Button, { color: "gray", size: "sm", disabled: offset === 0 || loading, onClick: () => handleSearch(Math.max(0, offset - PAGE_SIZE)), children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Page ", Math.floor(offset / PAGE_SIZE) + 1, " of", ' ', Math.ceil(total / PAGE_SIZE)] }), _jsx(Button, { color: "gray", size: "sm", disabled: offset + PAGE_SIZE >= total || loading, onClick: () => handleSearch(offset + PAGE_SIZE), children: "Next" })] }))] })), !loading && searchedQuery && results.length === 0 && (_jsxs("div", { className: "py-8 text-center", children: [_jsxs("p", { className: "text-gray-500 dark:text-gray-400", children: ["No results found for \"", searchedQuery, "\"."] }), _jsx("p", { className: "mt-1 text-sm text-gray-400 dark:text-gray-500", children: "Try a different query or adjust your filters." })] }))] }));
+    return (_jsxs(PageLayout, { children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 rounded-lg bg-gradient-to-br p-3", children: _jsx(HiSearch, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-gray-900 dark:text-white", children: config.title }), _jsxs("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: [config.description, docCount !== null && docCount > 0 && (_jsxs("span", { className: "ml-2 text-gray-400 dark:text-gray-500", children: ["(", docCount, " document", docCount !== 1 ? 's' : '', " indexed)"] }))] })] })] }), _jsx(Card, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(SearchBar, { query: query, onQueryChange: setQuery, onSearch: () => handleSearch(0), loading: loading, placeholder: config.placeholder }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [hasFilters && (_jsxs("button", { type: "button", onClick: () => setShowFilters(!showFilters), className: "flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: ["Filters", showFilters ? (_jsx(HiChevronUp, { className: "h-4 w-4" })) : (_jsx(HiChevronDown, { className: "h-4 w-4" }))] })), filters.semantic && (_jsx(ToggleSwitch, { checked: semantic, onChange: setSemantic, label: "Semantic search" }))] }), showFilters && hasFilters && (_jsxs("div", { className: "grid grid-cols-1 gap-3 border-t border-gray-200 pt-4 sm:grid-cols-2 lg:grid-cols-4 dark:border-gray-700", children: [filters.sourceType && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-source-type", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Source Type" }), _jsxs(Select, { id: "search-source-type", value: sourceType, onChange: (e) => setSourceType(e.target.value), children: [_jsx("option", { value: "", children: "All types" }), _jsx("option", { value: "uploaded_doc", children: "Uploaded Documents" }), _jsx("option", { value: "memory", children: "AI Memories" }), _jsx("option", { value: "narrative_section", children: "Narrative Sections" }), _jsx("option", { value: "xbrl_textblock", children: "XBRL Text Blocks" }), _jsx("option", { value: "ixbrl_disclosure", children: "iXBRL Disclosures" })] })] })), filters.entity && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-entity", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Entity / Ticker" }), _jsx(TextInput, { id: "search-entity", placeholder: "e.g. NVDA", value: entity, onChange: (e) => setEntity(e.target.value) })] })), filters.formType && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-form-type", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Form Type" }), _jsxs(Select, { id: "search-form-type", value: formType, onChange: (e) => setFormType(e.target.value), children: [_jsx("option", { value: "", children: "All forms" }), _jsx("option", { value: "10-K", children: "10-K (Annual)" }), _jsx("option", { value: "10-Q", children: "10-Q (Quarterly)" }), _jsx("option", { value: "8-K", children: "8-K (Current)" }), _jsx("option", { value: "20-F", children: "20-F (Foreign Annual)" })] })] })), filters.fiscalYear && (_jsxs("div", { children: [_jsx("label", { htmlFor: "search-fiscal-year", className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Fiscal Year" }), _jsx(TextInput, { id: "search-fiscal-year", type: "number", placeholder: "e.g. 2024", min: 1900, max: 2100, value: fiscalYear, onChange: (e) => setFiscalYear(e.target.value) })] }))] }))] }) }), error && (_jsx(Alert, { color: "failure", children: _jsx("span", { children: error }) })), results.length > 0 && (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx(SearchResultsMeta, { total: total, count: results.length, offset: offset, query: searchedQuery }) }), results.map((hit) => (_jsx(SearchHitCard, { hit: hit, expanded: expandedDocId === hit.document_id, onClick: () => handleExpand(hit.document_id), children: sectionLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Spinner, { size: "sm" }), "Loading full content..."] })) : sectionContent ? (_jsxs("div", { children: [_jsx("div", { className: "max-h-96 overflow-auto rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-800", children: _jsx(MarkdownProse, { size: "sm", children: sectionContent.content }) }), sectionContent.content_length && (_jsxs("p", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500", children: [sectionContent.content_length.toLocaleString(), ' ', "characters"] }))] })) : (_jsx("p", { className: "text-sm text-gray-500", children: "Could not load section content." })) }, hit.document_id))), _jsx(SearchPagination, { total: total, offset: offset, pageSize: PAGE_SIZE, loading: loading, onPageChange: handleSearch })] })), !loading && searchedQuery && results.length === 0 && (_jsxs("div", { className: "py-8 text-center", children: [_jsxs("p", { className: "text-gray-500 dark:text-gray-400", children: ["No results found for \"", searchedQuery, "\"."] }), _jsx("p", { className: "mt-1 text-sm text-gray-400 dark:text-gray-500", children: "Try a different query or adjust your filters." })] }))] }));
 }

package/components/search/SearchHitCard.d.ts

@@ -0,0 +1,25 @@
+import type { SearchHit } from '@robosystems/client';
+import type { ReactNode } from 'react';
+export interface SearchHitCardProps {
+    hit: SearchHit;
+    /** Card activation — Search toggles expansion; Recall opens the memory. */
+    onClick?: () => void;
+    /**
+     * Expansion state. Leave undefined for surfaces without an expand
+     * affordance (no chevron is rendered).
+     */
+    expanded?: boolean;
+    /** Title row (document/section). Recall hits are title-less. */
+    showTitle?: boolean;
+    showSourceType?: boolean;
+    tagBadgeColor?: string;
+    /** Expanded region, rendered under a top border when `expanded` is true. */
+    children?: ReactNode;
+}
+/**
+ * The standard scored-search-result card: title row, badge row (score,
+ * source type, entity, form, fiscal year, tags), snippet, and an optional
+ * expandable region. Shared by the document Search page and the memory
+ * Recall panel.
+ */
+export declare function SearchHitCard({ hit, onClick, expanded, showTitle, showSourceType, tagBadgeColor, children, }: SearchHitCardProps): import("react").JSX.Element;

package/components/search/SearchHitCard.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card } from 'flowbite-react';
+import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
+/**
+ * The standard scored-search-result card: title row, badge row (score,
+ * source type, entity, form, fiscal year, tags), snippet, and an optional
+ * expandable region. Shared by the document Search page and the memory
+ * Recall panel.
+ */
+export function SearchHitCard({ hit, onClick, expanded, showTitle = true, showSourceType = true, tagBadgeColor = 'purple', children, }) {
+    var _a;
+    const expandable = expanded !== undefined;
+    return (_jsxs(Card, { children: [_jsx("button", { type: "button", className: "w-full cursor-pointer text-left", onClick: onClick, "aria-expanded": expandable ? expanded : undefined, children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [showTitle && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: hit.document_title || hit.section_label || 'Untitled' }), hit.section_label && hit.document_title && (_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["/ ", hit.section_label] }))] })), _jsxs("div", { className: `flex flex-wrap items-center gap-2 ${showTitle ? 'mt-2' : ''}`, children: [_jsx(Badge, { color: "info", size: "xs", children: hit.score.toFixed(2) }), showSourceType && (_jsx(Badge, { color: "gray", size: "xs", children: hit.source_type })), hit.entity_ticker && (_jsx(Badge, { color: "purple", size: "xs", children: hit.entity_ticker })), hit.form_type && (_jsx(Badge, { color: "warning", size: "xs", children: hit.form_type })), hit.fiscal_year && (_jsxs(Badge, { color: "gray", size: "xs", children: ["FY", hit.fiscal_year] })), (_a = hit.tags) === null || _a === void 0 ? void 0 : _a.map((tag) => (_jsx(Badge, { color: tagBadgeColor, size: "xs", children: tag }, tag)))] }), hit.snippet && (_jsx("p", { className: "mt-3 line-clamp-2 text-sm text-gray-500 dark:text-gray-400", children: hit.snippet }))] }), expandable && (_jsx("div", { className: "ml-3 shrink-0 pt-1", children: expanded ? (_jsx(HiChevronUp, { className: "h-5 w-5 text-gray-400" })) : (_jsx(HiChevronDown, { className: "h-5 w-5 text-gray-400" })) }))] }) }), expanded && children && (_jsx("div", { className: "border-t border-gray-200 pt-4 dark:border-gray-700", children: children }))] }));
+}

package/components/search/SearchPagination.d.ts

@@ -0,0 +1,13 @@
+export interface SearchPaginationProps {
+    total: number;
+    offset: number;
+    pageSize: number;
+    loading?: boolean;
+    /** Receives the new offset — the caller re-runs its search. */
+    onPageChange: (newOffset: number) => void;
+}
+/**
+ * Previous / "Page X of Y" / Next pagination for offset-based search
+ * results. Renders nothing when everything fits on one page.
+ */
+export declare function SearchPagination({ total, offset, pageSize, loading, onPageChange, }: SearchPaginationProps): import("react").JSX.Element;

package/components/search/SearchPagination.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from 'flowbite-react';
+/**
+ * Previous / "Page X of Y" / Next pagination for offset-based search
+ * results. Renders nothing when everything fits on one page.
+ */
+export function SearchPagination({ total, offset, pageSize, loading = false, onPageChange, }) {
+    if (total <= pageSize)
+        return null;
+    return (_jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx(Button, { color: "gray", size: "sm", disabled: offset === 0 || loading, onClick: () => onPageChange(Math.max(0, offset - pageSize)), children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Page ", Math.floor(offset / pageSize) + 1, " of", ' ', Math.ceil(total / pageSize)] }), _jsx(Button, { color: "gray", size: "sm", disabled: offset + pageSize >= total || loading, onClick: () => onPageChange(offset + pageSize), children: "Next" })] }));
+}

package/components/search/SearchResultsMeta.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface SearchResultsMetaProps {
+    total: number;
+    /** Hits rendered on the current page. */
+    count: number;
+    offset?: number;
+    query: string;
+    /** Overrides the default copy (Recall supplies its own phrasing). */
+    children?: ReactNode;
+}
+/**
+ * The results-summary line above a search hit list. Default copy is the
+ * Search page's "Showing X–Y of N results for "q""; pass children for
+ * surface-specific phrasing.
+ */
+export declare function SearchResultsMeta({ total, count, offset, query, children, }: SearchResultsMetaProps): import("react").JSX.Element;

package/components/search/SearchResultsMeta.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The results-summary line above a search hit list. Default copy is the
+ * Search page's "Showing X–Y of N results for "q""; pass children for
+ * surface-specific phrasing.
+ */
+export function SearchResultsMeta({ total, count, offset = 0, query, children, }) {
+    return (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: ["Showing ", offset + 1, "\u2013", Math.min(offset + count, total), " of", ' ', total, " results for \"", query, "\""] })) }));
+}

package/components/search/index.d.ts

@@ -1,2 +1,6 @@
+export { SearchBar, type SearchBarProps } from './SearchBar';
 export { SearchContent } from './SearchContent';
+export { SearchHitCard, type SearchHitCardProps } from './SearchHitCard';
+export { SearchPagination, type SearchPaginationProps, } from './SearchPagination';
+export { SearchResultsMeta, type SearchResultsMetaProps, } from './SearchResultsMeta';
 export type { SearchConfig, SearchFilterConfig } from './types';

package/components/search/index.js

@@ -1 +1,5 @@
+export { SearchBar } from './SearchBar';
 export { SearchContent } from './SearchContent';
+export { SearchHitCard } from './SearchHitCard';
+export { SearchPagination, } from './SearchPagination';
+export { SearchResultsMeta, } from './SearchResultsMeta';

package/index.d.ts

@@ -12,9 +12,10 @@ export type { Entities, Entity, User } from './types';
 export { customTheme } from './theme';
 export { buildGraphAwareConsoleConfig, ConsoleContent, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
 export type { ConsoleBranding, ConsoleCommandContext, ConsoleConfig, ConsoleExtraCommand, ConsoleHeaderConfig, ConsoleMcpConfig, ConsoleWelcomeConfig, GraphExampleKind, GraphExampleSet, SampleQuery, } from './components/console';
-export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchContent, useIsRepository, type ActiveSubscriptionsProps, type BrowseRepositoriesProps, type EntityGroup, type EntityLike, type EntityRecord, type EntitySelectorProps, type GraphSelectorProps, type GraphWithEntities, type SearchConfig, type SearchFilterConfig, type SelectableEntity, } from './components';
+export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, useIsRepository, type ActiveSubscriptionsProps, type BrowseRepositoriesProps, type EntityGroup, type EntityLike, type EntityRecord, type EntitySelectorProps, type GraphSelectorProps, type GraphWithEntities, type SearchBarProps, type SearchConfig, type SearchFilterConfig, type SearchHitCardProps, type SearchPaginationProps, type SearchResultsMetaProps, type SelectableEntity, } from './components';
 export { composeFilters, excludeRepositories, excludeSubgraphs, GraphFilters, hasSchemaExtension, onlyRepositories, onlyUserGraphs, } from './components/graph-filters';
-export { ApiKeyDisplay, ApiKeysCard, ApiKeyTable, BrandSpinner, categorizeError, ChatHeader, ChatInputArea, ChatMessage, ConfirmModal, CoreNavbar, CoreSidebar, CreateApiKeyModal, DeepResearchToggle, EmptyState, ErrorType, GeneralInformationCard, generateMessageId, getErrorMessage, LandingFooter, LoadingState, PageContainer, PageHeader, PasswordInformationCard, PasswordRequirements, SecureApiKeyField, SettingsCard, SettingsContainer, SettingsFormField, SettingsPageHeader, Spinner, StatCard, StatusAlert, SupportModal, ThemeToggle, } from './ui-components';
+export { ApiKeyDisplay, ApiKeysCard, ApiKeyTable, BrandSpinner, categorizeError, CategoryInput, ChatHeader, ChatInputArea, ChatMessage, ConfirmModal, CoreNavbar, CoreSidebar, CreateApiKeyModal, DeepResearchToggle, EmptyState, ErrorType, GeneralInformationCard, generateMessageId, getErrorMessage, LandingFooter, LoadingState, MarkdownProse, PageContainer, PageHeader, PasswordInformationCard, PasswordRequirements, SecureApiKeyField, SettingsCard, SettingsContainer, SettingsFormField, SettingsPageHeader, Spinner, StatCard, StatusAlert, SupportModal, TagInput, ThemeToggle, } from './ui-components';
+export type { CategoryInputProps, MarkdownProseProps, TagInputProps, } from './ui-components';
 export type { AgentType, FooterLink, LandingFooterProps, Message, PageHeaderProps, SidebarItemData, SupportMetadata, } from './ui-components';
 export * from './library';
 export * as SDK from '@robosystems/client';

package/index.js

@@ -31,13 +31,13 @@ export { customTheme } from './theme';
 // Export components
 // Export console components
 export { buildGraphAwareConsoleConfig, ConsoleContent, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
-export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchContent, useIsRepository, } from './components';
+export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, useIsRepository, } from './components';
 // Export graph filters
 export { composeFilters, excludeRepositories, excludeSubgraphs, GraphFilters, hasSchemaExtension, onlyRepositories, onlyUserGraphs, } from './components/graph-filters';
 // Export app-components
-export { ApiKeyDisplay, ApiKeysCard, ApiKeyTable, BrandSpinner, categorizeError, ChatHeader, ChatInputArea, 
+export { ApiKeyDisplay, ApiKeysCard, ApiKeyTable, BrandSpinner, categorizeError, CategoryInput, ChatHeader, ChatInputArea, 
 // Chat components
-ChatMessage, ConfirmModal, CoreNavbar, CoreSidebar, CreateApiKeyModal, DeepResearchToggle, EmptyState, ErrorType, GeneralInformationCard, generateMessageId, getErrorMessage, LandingFooter, LoadingState, PageContainer, PageHeader, PasswordInformationCard, PasswordRequirements, SecureApiKeyField, SettingsCard, SettingsContainer, SettingsFormField, SettingsPageHeader, Spinner, StatCard, StatusAlert, SupportModal, ThemeToggle, } from './ui-components';
+ChatMessage, ConfirmModal, CoreNavbar, CoreSidebar, CreateApiKeyModal, DeepResearchToggle, EmptyState, ErrorType, GeneralInformationCard, generateMessageId, getErrorMessage, LandingFooter, LoadingState, MarkdownProse, PageContainer, PageHeader, PasswordInformationCard, PasswordRequirements, SecureApiKeyField, SettingsCard, SettingsContainer, SettingsFormField, SettingsPageHeader, Spinner, StatCard, StatusAlert, SupportModal, TagInput, ThemeToggle, } from './ui-components';
 // Export library components, types, and helpers
 export * from './library';
 // Export SDK with namespace to avoid conflicts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/research/CoverageBrowser.d.ts

@@ -0,0 +1,19 @@
+import type { CoverageItem } from './types';
+export interface CoverageBrowserProps {
+    items: CoverageItem[];
+    /** Base path for card links, forwarded to the grid (defaults to /research). */
+    hrefBase?: string;
+    /** Override the search box placeholder. */
+    placeholder?: string;
+}
+/**
+ * The research listing with a live client-side filter above it. A drop-in
+ * replacement for {@link CoverageGrid}: the full grid renders on first paint
+ * (so the server-rendered SEO page keeps every card in its HTML), and typing
+ * narrows it in the browser. Matches ticker, company, title, and tags —
+ * someone who types "Green Thumb" finds GTBIF without knowing the symbol.
+ *
+ * Filtering the whole in-memory catalog is fine at this scale; when the
+ * catalog outgrows a single fetch this is where server-backed search slots in.
+ */
+export declare function CoverageBrowser({ items, hrefBase, placeholder, }: CoverageBrowserProps): import("react").JSX.Element;

package/research/CoverageBrowser.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextInput } from 'flowbite-react';
+import { useMemo, useState } from 'react';
+import { HiSearch } from 'react-icons/hi';
+import { CoverageGrid } from './CoverageGrid';
+/**
+ * The research listing with a live client-side filter above it. A drop-in
+ * replacement for {@link CoverageGrid}: the full grid renders on first paint
+ * (so the server-rendered SEO page keeps every card in its HTML), and typing
+ * narrows it in the browser. Matches ticker, company, title, and tags —
+ * someone who types "Green Thumb" finds GTBIF without knowing the symbol.
+ *
+ * Filtering the whole in-memory catalog is fine at this scale; when the
+ * catalog outgrows a single fetch this is where server-backed search slots in.
+ */
+export function CoverageBrowser({ items, hrefBase, placeholder = 'Search by ticker, company, or title…', }) {
+    const [query, setQuery] = useState('');
+    const filtered = useMemo(() => {
+        const term = query.trim().toLowerCase();
+        if (!term)
+            return items;
+        return items.filter((item) => item.ticker.toLowerCase().includes(term) ||
+            item.company.toLowerCase().includes(term) ||
+            item.title.toLowerCase().includes(term) ||
+            item.tags.some((tag) => tag.toLowerCase().includes(term)));
+    }, [items, query]);
+    // Empty catalog: let the grid render its own "no coverage yet" state, no
+    // point showing a search box over nothing.
+    if (!items.length) {
+        return _jsx(CoverageGrid, { items: items, hrefBase: hrefBase });
+    }
+    const term = query.trim();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(TextInput, { icon: HiSearch, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: placeholder, "aria-label": "Search research" }), term && filtered.length === 0 ? (_jsxs("p", { className: "py-12 text-center text-gray-500 dark:text-gray-400", children: ["No results for \u201C", term, "\u201D."] })) : (_jsx(CoverageGrid, { items: filtered, hrefBase: hrefBase }))] }));
+}

package/research/index.d.ts

@@ -1,4 +1,5 @@
 export { CATALOG_URL, fetchBrief, fetchCatalog, getAllCoverage, getCoverage, getCoverageTickers, youtubeId, } from './catalog';
+export { CoverageBrowser, type CoverageBrowserProps } from './CoverageBrowser';
 export { CoverageCard } from './CoverageCard';
 export { CoverageGrid } from './CoverageGrid';
 export { CoverageHistory } from './CoverageHistory';

package/research/index.js

@@ -2,6 +2,7 @@
 // roboinvestor-app (logged-in). Data layer reads the S3 catalog produced by
 // robosystems-content-machine; components render the coverage + continuing-coverage thread.
 export { CATALOG_URL, fetchBrief, fetchCatalog, getAllCoverage, getCoverage, getCoverageTickers, youtubeId, } from './catalog';
+export { CoverageBrowser } from './CoverageBrowser';
 export { CoverageCard } from './CoverageCard';
 export { CoverageGrid } from './CoverageGrid';
 export { CoverageHistory } from './CoverageHistory';

package/ui-components/MarkdownProse.d.ts

@@ -0,0 +1,17 @@
+export interface MarkdownProseProps {
+    /** Markdown source. */
+    children: string;
+    /** Typography scale. */
+    size?: 'sm' | 'base';
+    /** Merged over the prose classes — scroll containers, padding, etc. */
+    className?: string;
+}
+/**
+ * The shared GitHub-flavored-markdown prose renderer (documents, memories,
+ * search results). Theme-aware via `dark:prose-dark` — the consuming apps
+ * define the `typography.dark` variant in their Tailwind configs; do NOT
+ * switch to `dark:prose-invert`, which doesn't resolve under their
+ * Tailwind v4 + typography-plugin setup (see research/ResearchArticle.tsx).
+ * Works in server and client components alike.
+ */
+export declare function MarkdownProse({ children, size, className, }: MarkdownProseProps): import("react").JSX.Element;

package/ui-components/MarkdownProse.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { twMerge } from 'tailwind-merge';
+/**
+ * The shared GitHub-flavored-markdown prose renderer (documents, memories,
+ * search results). Theme-aware via `dark:prose-dark` — the consuming apps
+ * define the `typography.dark` variant in their Tailwind configs; do NOT
+ * switch to `dark:prose-invert`, which doesn't resolve under their
+ * Tailwind v4 + typography-plugin setup (see research/ResearchArticle.tsx).
+ * Works in server and client components alike.
+ */
+export function MarkdownProse({ children, size = 'base', className, }) {
+    return (_jsx("div", { className: twMerge('prose dark:prose-dark max-w-none', size === 'sm' ? 'prose-sm' : 'prose-base', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
+                table: ({ children: tableChildren }) => (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { children: tableChildren }) })),
+            }, children: children }) }));
+}

package/ui-components/forms/CategoryInput.d.ts

@@ -0,0 +1,24 @@
+export interface CategoryInputProps {
+    /** Controlled value — always freeform; suggestions are conveniences. */
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Suggestion pool (presets and/or observed values). All are shown on
+     * focus; typing filters them case-insensitively.
+     */
+    suggestions?: string[];
+    placeholder?: string;
+    id?: string;
+    sizing?: 'sm' | 'md';
+    disabled?: boolean;
+    /** Width control, e.g. 'w-40'. */
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * Freeform combobox for single-value categorization (document folder,
+ * memory type). Suggestions open on focus and filter as the user types;
+ * ArrowUp/ArrowDown + Enter or click selects one, Escape closes, and any
+ * typed value is accepted as-is.
+ */
+export declare function CategoryInput({ value, onChange, suggestions, placeholder, id, sizing, disabled, className, 'aria-label': ariaLabel, }: CategoryInputProps): import("react").JSX.Element;

package/ui-components/forms/CategoryInput.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextInput } from 'flowbite-react';
+import { useState } from 'react';
+const MAX_VISIBLE_SUGGESTIONS = 8;
+/**
+ * Freeform combobox for single-value categorization (document folder,
+ * memory type). Suggestions open on focus and filter as the user types;
+ * ArrowUp/ArrowDown + Enter or click selects one, Escape closes, and any
+ * typed value is accepted as-is.
+ */
+export function CategoryInput({ value, onChange, suggestions, placeholder, id, sizing = 'sm', disabled = false, className, 'aria-label': ariaLabel, }) {
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const query = value.trim().toLowerCase();
+    const visibleSuggestions = (suggestions !== null && suggestions !== void 0 ? suggestions : [])
+        .filter((s) => !query || s.toLowerCase().includes(query))
+        .slice(0, MAX_VISIBLE_SUGGESTIONS);
+    const showSuggestions = open && !disabled && visibleSuggestions.length > 0;
+    const select = (suggestion) => {
+        onChange(suggestion);
+        setOpen(false);
+        setActiveIndex(-1);
+    };
+    const handleKeyDown = (e) => {
+        if (!showSuggestions) {
+            if (e.key === 'Enter')
+                e.preventDefault();
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIndex((i) => (i + 1) % visibleSuggestions.length);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIndex((i) => (i <= 0 ? visibleSuggestions.length - 1 : i - 1));
+        }
+        else if (e.key === 'Enter') {
+            // Never submits a surrounding form; with no active item it just closes.
+            e.preventDefault();
+            if (activeIndex >= 0 && activeIndex < visibleSuggestions.length) {
+                select(visibleSuggestions[activeIndex]);
+            }
+            else {
+                setOpen(false);
+            }
+        }
+        else if (e.key === 'Escape') {
+            setOpen(false);
+            setActiveIndex(-1);
+        }
+    };
+    return (_jsxs("div", { className: `relative ${className !== null && className !== void 0 ? className : ''}`, children: [_jsx(TextInput, { id: id, sizing: sizing, value: value, disabled: disabled, placeholder: placeholder, onChange: (e) => {
+                    onChange(e.target.value);
+                    setOpen(true);
+                    setActiveIndex(-1);
+                }, onFocus: () => setOpen(true), onBlur: () => {
+                    setOpen(false);
+                    setActiveIndex(-1);
+                }, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": showSuggestions, "aria-label": ariaLabel, autoComplete: "off" }), showSuggestions && (_jsx("ul", { role: "listbox", "aria-label": "Suggestions", className: "absolute z-10 mt-1 min-w-full rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800", children: visibleSuggestions.map((suggestion, index) => (_jsx("li", { role: "option", "aria-selected": index === activeIndex, children: _jsx("button", { type: "button", className: `w-full px-3 py-1.5 text-left text-sm ${index === activeIndex
+                            ? 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-white'
+                            : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700'}`, 
+                        // onMouseDown so selection wins over the input's blur.
+                        onMouseDown: (e) => {
+                            e.preventDefault();
+                            select(suggestion);
+                        }, children: suggestion }) }, suggestion))) }))] }));
+}

package/ui-components/forms/TagInput.d.ts

@@ -0,0 +1,25 @@
+export interface TagInputProps {
+    /** Controlled tag list. */
+    tags: string[];
+    onChange: (tags: string[]) => void;
+    /**
+     * Suggestion pool (e.g. tags observed elsewhere in the list). Filtered
+     * case-insensitively against the draft input, minus already-added tags.
+     */
+    suggestions?: string[];
+    /** flowbite Badge color for the tag chips. */
+    badgeColor?: string;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    /** Class for the inline draft input — callers control its width. */
+    inputClassName?: string;
+    'aria-label'?: string;
+}
+/**
+ * Chips-style tag editor. Enter or comma commits the draft (trimmed,
+ * lowercased, deduped); Backspace on an empty draft removes the last tag.
+ * Pasted comma-separated text is split into individual tags. An optional
+ * suggestion listbox opens while the input is focused.
+ */
+export declare function TagInput({ tags, onChange, suggestions, badgeColor, placeholder, id, disabled, inputClassName, 'aria-label': ariaLabel, }: TagInputProps): import("react").JSX.Element;

package/ui-components/forms/TagInput.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, TextInput } from 'flowbite-react';
+import { useState } from 'react';
+import { HiX } from 'react-icons/hi';
+const MAX_VISIBLE_SUGGESTIONS = 8;
+/**
+ * Chips-style tag editor. Enter or comma commits the draft (trimmed,
+ * lowercased, deduped); Backspace on an empty draft removes the last tag.
+ * Pasted comma-separated text is split into individual tags. An optional
+ * suggestion listbox opens while the input is focused.
+ */
+export function TagInput({ tags, onChange, suggestions, badgeColor = 'purple', placeholder = 'Add tag, press Enter', id, disabled = false, inputClassName = 'w-44', 'aria-label': ariaLabel, }) {
+    const [draft, setDraft] = useState('');
+    const [focused, setFocused] = useState(false);
+    const normalize = (value) => value.trim().toLowerCase();
+    const commitValues = (values) => {
+        const next = [...tags];
+        for (const value of values) {
+            const normalized = normalize(value);
+            if (normalized && !next.includes(normalized)) {
+                next.push(normalized);
+            }
+        }
+        if (next.length !== tags.length) {
+            onChange(next);
+        }
+    };
+    const handleDraftChange = (value) => {
+        var _a;
+        // Pasted "a, b, c" — commit every complete segment, keep the tail as draft.
+        if (value.includes(',')) {
+            const segments = value.split(',');
+            const tail = (_a = segments.pop()) !== null && _a !== void 0 ? _a : '';
+            commitValues(segments);
+            setDraft(tail);
+        }
+        else {
+            setDraft(value);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            commitValues([draft]);
+            setDraft('');
+        }
+        else if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
+            onChange(tags.slice(0, -1));
+        }
+        else if (e.key === 'Escape') {
+            setFocused(false);
+        }
+    };
+    const draftNormalized = normalize(draft);
+    const visibleSuggestions = (suggestions !== null && suggestions !== void 0 ? suggestions : [])
+        .filter((s) => !tags.includes(normalize(s)) &&
+        (!draftNormalized || s.toLowerCase().includes(draftNormalized)))
+        .slice(0, MAX_VISIBLE_SUGGESTIONS);
+    const showSuggestions = focused && !disabled && visibleSuggestions.length > 0;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [tags.map((tag) => (_jsx(Badge, { color: badgeColor, size: "sm", children: _jsxs("span", { className: "flex items-center gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": `Remove tag ${tag}`, disabled: disabled, onClick: () => onChange(tags.filter((t) => t !== tag)), children: _jsx(HiX, { className: "h-3 w-3" }) })] }) }, tag))), _jsxs("div", { className: "relative", children: [_jsx(TextInput, { id: id, sizing: "sm", value: draft, disabled: disabled, onChange: (e) => handleDraftChange(e.target.value), onKeyDown: handleKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), placeholder: placeholder, className: inputClassName, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Add tag', role: "combobox", "aria-expanded": showSuggestions, autoComplete: "off" }), showSuggestions && (_jsx("ul", { role: "listbox", "aria-label": "Tag suggestions", className: "absolute z-10 mt-1 min-w-full rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800", children: visibleSuggestions.map((suggestion) => (_jsx("li", { role: "option", "aria-selected": false, children: _jsx("button", { type: "button", className: "w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700", 
+                                // onMouseDown so selection wins over the input's blur.
+                                onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    commitValues([suggestion]);
+                                    setDraft('');
+                                }, children: suggestion }) }, suggestion))) }))] })] }));
+}

package/ui-components/forms/index.d.ts

@@ -1,4 +1,6 @@
+export { CategoryInput, type CategoryInputProps } from './CategoryInput';
 export { PasswordRequirements } from './PasswordRequirements';
 export { SettingsCard } from './SettingsCard';
 export { SettingsFormField } from './SettingsFormField';
 export { StatusAlert } from './StatusAlert';
+export { TagInput, type TagInputProps } from './TagInput';

package/ui-components/forms/index.js

@@ -1,4 +1,6 @@
+export { CategoryInput } from './CategoryInput';
 export { PasswordRequirements } from './PasswordRequirements';
 export { SettingsCard } from './SettingsCard';
 export { SettingsFormField } from './SettingsFormField';
 export { StatusAlert } from './StatusAlert';
+export { TagInput } from './TagInput';

package/ui-components/index.d.ts

@@ -6,6 +6,7 @@ export { ConfirmModal } from './ConfirmModal';
 export { EmptyState } from './EmptyState';
 export { LoadingState } from './LoadingState';
 export { AnimatedLogo, LogoBadge } from './Logo';
+export { MarkdownProse, type MarkdownProseProps } from './MarkdownProse';
 export { BrandSpinner, Spinner } from './Spinner';
 export { StatCard } from './StatCard';
 export * from './chat';

package/ui-components/index.js

@@ -8,6 +8,7 @@ export { ConfirmModal } from './ConfirmModal';
 export { EmptyState } from './EmptyState';
 export { LoadingState } from './LoadingState';
 export { AnimatedLogo, LogoBadge } from './Logo';
+export { MarkdownProse } from './MarkdownProse';
 export { BrandSpinner, Spinner } from './Spinner';
 export { StatCard } from './StatCard';
 // Chat Components