import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
import type { ResourceListScope } from "../search";
/** Layout mode for {@link ResourceListView}. */
export type ResourceListLayout = "list" | "grid";
/** Props for {@link ResourceListView}. */
export interface ResourceListViewProps {
    /** Resource entries to display. */
    readonly items: readonly SearchResult[];
    /** Whether data is currently being fetched. */
    readonly isLoading: boolean;
    /** Error from the data hook. Shown as an alert when present and not loading. */
    readonly error?: Error | null;
    /** Total number of results across all pages. Shown in the pagination bar when provided. */
    readonly totalCount?: number;
    /** Total number of pages available. Enables pagination controls when greater than 1. */
    readonly totalPages?: number;
    /** Current page number (1-indexed). */
    readonly currentPage?: number;
    /**
     * Called with the debounced search query (300ms delay) when the user types.
     * Providing this prop enables the search input in the toolbar.
     *
     * The component manages the raw input value internally and only calls
     * this handler with the debounced value, so the parent does not need
     * to implement debouncing.
     */
    readonly onSearchChange?: (query: string) => void;
    /** Placeholder text for the search input. @default "Search\u2026" */
    readonly searchPlaceholder?: string;
    /** Initial value for the search input, read only on mount (e.g. from URL params). */
    readonly initialSearch?: string;
    /**
     * The currently active resource scope.
     * Providing both `scope` and `onScopeChange` enables the ScopeToggle
     * in the toolbar.
     */
    readonly scope?: ResourceListScope;
    /** Called when the user toggles the scope. Also resets the page to 1 via `onPageChange`. */
    readonly onScopeChange?: (scope: ResourceListScope) => void;
    /**
     * Called when the user navigates to a different page.
     * Pagination controls appear when this is provided and `totalPages > 1`.
     * Also called with `1` automatically when the search query or scope changes.
     */
    readonly onPageChange?: (page: number) => void;
    /**
     * Visual layout for items.
     *
     * - `"list"` (default) — vertical single-column rows
     * - `"grid"` — responsive multi-column card grid
     *   (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`)
     *
     * When `layout` is `"grid"` and no `renderItem` is provided, the built-in
     * {@link DefaultResourceCard} is used instead of {@link DefaultResourceRow}.
     *
     * @default "list"
     */
    readonly layout?: ResourceListLayout;
    /**
     * Custom renderer for list items. Receives the `SearchResult` and its
     * index. Falls back to a built-in row showing name, org, description,
     * visibility badge, and tags.
     */
    readonly renderItem?: (item: SearchResult, index: number) => React.ReactNode;
    /**
     * Renders an action element (e.g. a button) for each item.
     *
     * In grid mode the action is placed in the card's top-right corner.
     * In list mode it is appended after the row content.
     *
     * The consumer is responsible for calling `e.stopPropagation()` if
     * the action should not also trigger `onItemClick`.
     */
    readonly renderItemAction?: (item: SearchResult) => React.ReactNode;
    /**
     * Called when a list item is clicked or activated via keyboard (Enter/Space).
     * Providing this makes items interactive with hover/focus styles and
     * keyboard navigation (Arrow Up/Down).
     */
    readonly onItemClick?: (item: SearchResult) => void;
    /** Icon element rendered in the empty state. */
    readonly emptyIcon?: React.ReactNode;
    /** Title for the empty state. @default "No resources found" */
    readonly emptyTitle?: string;
    /** Description for the empty state. @default "Try adjusting your search or scope." */
    readonly emptyDescription?: string;
    /** Called when the user clicks "Retry" after an error. */
    readonly onRetry?: () => void;
    /** Additional CSS classes for the root container. */
    readonly className?: string;
    /** Accessible label for the list region. @default "Resource list" */
    readonly "aria-label"?: string;
}
/**
 * Paginated, searchable view for browsing Stigmer resources.
 *
 * Supports two layout modes:
 *
 * - **`"list"`** (default) — vertical single-column rows, same as
 *   before. Each row shows a kind icon, name, org, description, and tags.
 * - **`"grid"`** — responsive multi-column card grid
 *   (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`). Each card shows a
 *   large icon container, name, org, description, and an optional
 *   action slot in the top-right corner.
 *
 * Both modes share the same toolbar (search, scope toggle), pagination,
 * loading/error/empty states, and keyboard navigation (grid mode adds
 * ArrowLeft/Right and column-aware Up/Down).
 *
 * The component is controlled — the parent owns data and filter state.
 * Search debouncing (300ms) is managed internally so the parent only
 * receives debounced query values via {@link ResourceListViewProps.onSearchChange}.
 *
 * Only `items` and `isLoading` are required. Search, scope toggle,
 * pagination, layout mode, and custom row rendering activate
 * progressively when their corresponding props are provided.
 *
 * When the debounced search query or scope changes, the component
 * automatically resets the page to 1 via `onPageChange` to prevent
 * stale pagination after filter changes.
 *
 * @example
 * ```tsx
 * // Minimal — plain list with loading indicator
 * <ResourceListView items={agents} isLoading={isLoading} />
 * ```
 *
 * @example
 * ```tsx
 * // Grid layout with action button
 * <ResourceListView
 *   layout="grid"
 *   items={mcpServers}
 *   isLoading={isLoading}
 *   onItemClick={(item) => navigate(item.slug)}
 *   renderItemAction={(item) => (
 *     <button onClick={(e) => { e.stopPropagation(); connect(item); }}>
 *       <PlusIcon />
 *     </button>
 *   )}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Full — search, scope toggle, pagination, and click handling
 * const [scope, setScope] = useState<ResourceListScope>("org");
 * const [query, setQuery] = useState("");
 * const [page, setPage] = useState(1);
 * const { agents, totalCount, totalPages, isLoading, error, refetch } =
 *   useAgentList(org, { query, scope, page });
 *
 * <ResourceListView
 *   items={agents}
 *   isLoading={isLoading}
 *   error={error}
 *   totalCount={totalCount}
 *   totalPages={totalPages}
 *   currentPage={page}
 *   onSearchChange={setQuery}
 *   searchPlaceholder="Search agents\u2026"
 *   scope={scope}
 *   onScopeChange={setScope}
 *   onPageChange={setPage}
 *   onItemClick={(item) => console.log(item.slug)}
 *   onRetry={refetch}
 * />
 * ```
 *
 * @see {@link useAgentList}, {@link useSkillList}, {@link useMcpServerList}
 * @see {@link ScopeToggle} for the scope toggle used in the toolbar
 */
export declare function ResourceListView({ items, isLoading, error, totalCount, totalPages, currentPage, onSearchChange, searchPlaceholder, initialSearch, scope, onScopeChange, onPageChange, layout, renderItem, renderItemAction, onItemClick, emptyIcon, emptyTitle, emptyDescription, onRetry, className, "aria-label": ariaLabel, }: ResourceListViewProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ResourceListView.d.ts.map