beez-ui 0.4.0

package/dist/components/filter-query-bar.js

@@ -0,0 +1,526 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Calendar, Check, CircleDot, CircleMinus, CircleSlash, Folder, Hash, List, Type, User, X, } from "lucide-react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverAnchor, PopoverContent, } from "./popover.js";
+import { cn } from "../lib/utils.js";
+import { getActiveFilterToken, getValueHighlightRanges, normalizeFilterSlug, parseFilterQuery, PRESENCE_HAS_META_KEY, PRESENCE_NO_META_KEY, UNASSIGNED_FOLDER_FILTER_VALUE, } from "./filter-query-grammar.js";
+const DEFAULT_PLACEHOLDER = "Filtrar por campo o palabra clave";
+const DEFAULT_ARIA_LABEL = "Filtrar gastos";
+const CLEAR_FILTER_ARIA_LABEL = "Limpiar todos los filtros";
+const KEY_GROUP_LABEL = "Campos";
+const VALUE_GROUP_LABEL = "Valores";
+const LISTBOX_ID = "filter-query-bar-listbox";
+const OPTION_ID_PREFIX = "filter-query-bar-option";
+const NUMBER_RANGE_VALUE_SUGGESTIONS = [
+    { label: "Mayor o igual (≥)", slug: ">=" },
+    { label: "Menor o igual (≤)", slug: "<=" },
+    { label: "Rango (100..500)", slug: ".." },
+];
+/**
+ * Operadores para qualifiers de fecha (mes-año). Reflejan los numéricos: cota
+ * inferior (`>=`), cota superior (`<=`) y rango (`..`). La presencia/ausencia de
+ * fecha se cubre con las meta-claves `tiene:`/`no:` del bloque universal.
+ */
+const YEAR_MONTH_VALUE_SUGGESTIONS = [
+    { keepOpen: true, label: "Desde (≥)", slug: ">=" },
+    { keepOpen: true, label: "Hasta (≤)", slug: "<=" },
+    { keepOpen: true, label: "Rango (2026-01..2026-06)", slug: ".." },
+];
+const TEXT_MATCH_VALUE_SUGGESTIONS = [
+    // `texto*`: el caret queda antes del `*` para escribir el prefijo.
+    { caretOffset: 0, insertText: "*", keepOpen: true, label: "Empieza por…", name: "starts", slug: "" },
+    // `*texto*`: el caret queda entre los dos `*`.
+    { caretOffset: 1, insertText: "**", keepOpen: true, label: "Contiene…", name: "contains", slug: "" },
+    // `*texto`: el caret queda después del `*` para escribir el sufijo.
+    { insertText: "*", keepOpen: true, label: "Termina con…", name: "ends", slug: "" },
+];
+/** Meta-claves de presencia ofrecidas también como campos de primer nivel. */
+const PRESENCE_META_KEY_SUGGESTIONS = [
+    { icon: Check, key: PRESENCE_HAS_META_KEY, label: "Tiene…" },
+    { icon: CircleSlash, key: PRESENCE_NO_META_KEY, label: "No tiene…" },
+];
+/** Icono representativo de cada tipo de qualifier, mostrado a su izquierda. */
+function getKindIcon(kind) {
+    switch (kind) {
+        case "numberRange":
+            return Hash;
+        case "textMatch":
+            return Type;
+        case "enum":
+            return List;
+        case "presence":
+            return CircleDot;
+        case "yearMonthRange":
+            return Calendar;
+        case "folder":
+            return Folder;
+        default:
+            return Type;
+    }
+}
+/** Iconos por nombre lógico declarado en el qualifier (`config.iconName`). */
+const ICON_BY_NAME = {
+    user: User,
+};
+/** Icono de un qualifier: override por `iconName`, o el icono por defecto del kind. */
+function getQualifierIcon(config) {
+    if (config.iconName && ICON_BY_NAME[config.iconName]) {
+        return ICON_BY_NAME[config.iconName];
+    }
+    return getKindIcon(config.kind);
+}
+function startsWithNormalized(candidate, prefix) {
+    if (!prefix) {
+        return true;
+    }
+    return normalizeFilterSlug(candidate).startsWith(normalizeFilterSlug(prefix));
+}
+/** Etiqueta de la opción raíz de exclusión (arranca un token `-campo:`). */
+const EXCLUDE_ROOT_LABEL = "Excluir";
+function buildKeySuggestions(configs, keyPart, { negated, includeExclude, appliedFilters }) {
+    // En modo exclusión el campo elegido conserva el `-` para formar `-campo:`.
+    const prefix = negated ? "-" : "";
+    const fieldSuggestions = configs
+        .filter((config) => config.kind !== "text" && config.key)
+        .filter((config) => getAppliedPresenceValue(config, appliedFilters) !== "noValue")
+        .filter((config) => startsWithNormalized(config.key, keyPart) ||
+        startsWithNormalized(config.label, keyPart))
+        .map((config) => ({
+        group: "key",
+        icon: getQualifierIcon(config),
+        id: `${OPTION_ID_PREFIX}-key-${negated ? "neg-" : ""}${config.key}`,
+        insertText: `${prefix}${config.key}:`,
+        keepOpen: true,
+        label: config.label,
+    }));
+    // Meta-claves de presencia como campos de primer nivel (`tiene:` / `no:`); no
+    // se ofrecen en modo exclusión (la ausencia ya se cubre con `no:`) ni cuando
+    // ningún campo soporta presencia (todos tienen valor siempre).
+    const hasPresenceCapableFields = configs.some((config) => config.kind !== "text" &&
+        Boolean(config.key) &&
+        config.supportsPresence !== false);
+    const metaSuggestions = negated || !hasPresenceCapableFields
+        ? []
+        : PRESENCE_META_KEY_SUGGESTIONS.filter((meta) => startsWithNormalized(meta.key, keyPart) ||
+            startsWithNormalized(meta.label, keyPart)).map((meta) => ({
+            group: "meta",
+            icon: meta.icon,
+            id: `${OPTION_ID_PREFIX}-key-${meta.key}`,
+            insertText: `${meta.key}:`,
+            keepOpen: true,
+            label: meta.label,
+        }));
+    // "Excluir" al final (estilo GitHub): inserta `-` y reabre la lista de campos
+    // para elegir cuál excluir.
+    const excludeSuggestion = includeExclude
+        ? [
+            {
+                group: "meta",
+                icon: CircleMinus,
+                id: `${OPTION_ID_PREFIX}-exclude-root`,
+                insertText: "-",
+                keepOpen: true,
+                label: EXCLUDE_ROOT_LABEL,
+            },
+        ]
+        : [];
+    return [...fieldSuggestions, ...metaSuggestions, ...excludeSuggestion];
+}
+/**
+ * Sugerencias de valor para una meta-clave de presencia (`tiene:` / `no:`): el
+ * "valor" es la clave del campo destino (`tiene:enviados`, `no:carpeta`).
+ */
+function buildMetaValueSuggestions(configs, metaKey, valuePart, appliedFilters) {
+    return configs
+        .filter((config) => config.kind !== "text" && config.key)
+        .filter((config) => config.supportsPresence !== false)
+        .filter((config) => !hasPresenceMetaFilterAlreadyApplied(config, appliedFilters))
+        .filter((config) => startsWithNormalized(config.key, valuePart) ||
+        startsWithNormalized(config.label, valuePart))
+        .map((config) => ({
+        group: "value",
+        icon: getQualifierIcon(config),
+        id: `${OPTION_ID_PREFIX}-meta-${metaKey}-${config.key}`,
+        insertText: `${config.key} `,
+        keepOpen: false,
+        label: config.label,
+    }));
+}
+/**
+ * Bloque universal que aparece al entrar a cualquier filtro: presencia
+ * (`tiene:<clave>`), ausencia (`no:<clave>`) y exclusión de un valor
+ * (`-<clave>:`). Reescriben el token completo, por eso usan `replaceTokenStart`.
+ */
+function buildPresenceAndExcludeSuggestions(config, appliedFilters) {
+    const appliedPresenceValue = getAppliedPresenceValue(config, appliedFilters);
+    const hasAppliedPresence = appliedPresenceValue != null;
+    const suggestions = hasAppliedPresence || config.supportsPresence === false
+        ? []
+        : [
+            {
+                group: "meta",
+                icon: CircleSlash,
+                id: `${OPTION_ID_PREFIX}-presence-no-${config.key}`,
+                insertText: `${PRESENCE_NO_META_KEY}:${config.key} `,
+                keepOpen: false,
+                label: `No tiene ${config.label}`,
+                replaceTokenStart: true,
+            },
+            {
+                group: "meta",
+                icon: Check,
+                id: `${OPTION_ID_PREFIX}-presence-has-${config.key}`,
+                insertText: `${PRESENCE_HAS_META_KEY}:${config.key} `,
+                keepOpen: false,
+                label: `Tiene ${config.label}`,
+                replaceTokenStart: true,
+            },
+        ];
+    // Excluir un valor concreto solo aplica a kinds con valores; en presencia pura
+    // (deuda) el único filtro es tener/no tener, ya cubierto arriba.
+    if (config.kind !== "presence" && appliedPresenceValue !== "noValue") {
+        suggestions.push({
+            group: "meta",
+            icon: CircleMinus,
+            id: `${OPTION_ID_PREFIX}-exclude-${config.key}`,
+            insertText: `-${config.key}:`,
+            keepOpen: true,
+            label: `Excluir ${config.label}…`,
+            replaceTokenStart: true,
+        });
+    }
+    return suggestions;
+}
+function getValueSuggestionSource(config) {
+    if (config.kind === "enum" || config.kind === "folder") {
+        return (config.options ?? []).map((option) => ({
+            label: option.label,
+            slug: option.slug,
+            value: option.value,
+        }));
+    }
+    if (config.kind === "presence") {
+        // La presencia se ofrece con el bloque universal No/Tiene, no como valores.
+        return [];
+    }
+    if (config.kind === "yearMonthRange") {
+        return YEAR_MONTH_VALUE_SUGGESTIONS;
+    }
+    if (config.kind === "numberRange") {
+        return NUMBER_RANGE_VALUE_SUGGESTIONS;
+    }
+    if (config.kind === "textMatch") {
+        return TEXT_MATCH_VALUE_SUGGESTIONS;
+    }
+    return [];
+}
+function hasPresenceMetaFilterAlreadyApplied(config, appliedFilters) {
+    return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key &&
+        !appliedFilter.negated &&
+        appliedFilter.value.kind === "presence");
+}
+function hasSelectableValueAlreadyApplied(config, option, appliedFilters) {
+    if (config.kind === "enum") {
+        return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key &&
+            appliedFilter.value.kind === "enum" &&
+            appliedFilter.value.value === option.value);
+    }
+    if (config.kind === "folder") {
+        return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key &&
+            appliedFilter.value.kind === "folder" &&
+            appliedFilter.value.folderId === option.value);
+    }
+    return false;
+}
+function getAppliedPresenceValue(config, appliedFilters) {
+    const presenceFilter = appliedFilters.find((appliedFilter) => appliedFilter.key === config.key &&
+        !appliedFilter.negated &&
+        appliedFilter.value.kind === "presence");
+    return presenceFilter?.value.kind === "presence"
+        ? presenceFilter.value.value
+        : null;
+}
+function isSelectableValueCompatibleWithPresence(config, option, appliedFilters) {
+    const presenceValue = getAppliedPresenceValue(config, appliedFilters);
+    if (presenceValue === "noValue") {
+        return false;
+    }
+    if (config.kind !== "folder") {
+        return true;
+    }
+    if (presenceValue === "hasValue") {
+        return option.value !== UNASSIGNED_FOLDER_FILTER_VALUE;
+    }
+    return true;
+}
+function buildValueSuggestions(config, valuePart, negated, appliedFilters) {
+    // Los operadores numéricos no cierran el popover: el usuario completa el número.
+    const defaultKeepOpen = config.kind === "numberRange";
+    // Para texto, los operadores (empieza/contiene/termina) son un menú inicial:
+    // aparecen al entrar al filtro y desaparecen apenas se escribe el texto, igual
+    // que en GitHub. El resto de los kinds filtra sus valores a medida que se tipea.
+    const sourceOptions = config.kind === "textMatch" && valuePart !== ""
+        ? []
+        : getValueSuggestionSource(config);
+    // Para listas seleccionables (enum/folder) se tolera un `@` inicial al estilo
+    // "mención" (p. ej. `prestamista:@vero`) al filtrar las opciones.
+    const filterValuePart = config.kind === "enum" || config.kind === "folder"
+        ? valuePart.replace(/^@/, "")
+        : valuePart;
+    const valueSuggestions = sourceOptions
+        .filter((option) => !hasSelectableValueAlreadyApplied(config, option, appliedFilters) &&
+        isSelectableValueCompatibleWithPresence(config, option, appliedFilters))
+        .filter((option) => startsWithNormalized(option.slug, filterValuePart))
+        .map((option) => {
+        const keepOpen = option.keepOpen ?? defaultKeepOpen;
+        const insertText = option.insertText ?? (keepOpen ? option.slug : `${option.slug} `);
+        return {
+            caretOffset: option.caretOffset,
+            group: "value",
+            icon: getQualifierIcon(config),
+            id: `${OPTION_ID_PREFIX}-value-${config.key}-${option.name ?? option.slug}`,
+            insertText,
+            keepOpen,
+            label: option.label,
+        };
+    });
+    // El bloque universal (No tiene / Tiene / Excluir) encabeza las sugerencias al
+    // entrar al filtro (valor vacío) y solo en tokens no negados: dentro de
+    // `-clave:` el usuario ya excluye y elige directamente el valor a excluir.
+    if (negated || valuePart.length > 0) {
+        return valueSuggestions;
+    }
+    return [
+        ...buildPresenceAndExcludeSuggestions(config, appliedFilters),
+        ...valueSuggestions,
+    ];
+}
+function resolveConfigByKey(configs, rawKey) {
+    const normalized = normalizeFilterSlug(rawKey);
+    return configs.find((config) => {
+        if (config.kind === "text" || !config.key) {
+            return false;
+        }
+        if (normalizeFilterSlug(config.key) === normalized) {
+            return true;
+        }
+        return (config.aliases ?? []).some((alias) => normalizeFilterSlug(alias) === normalized);
+    });
+}
+/**
+ * Parte la query en nodos para el overlay de resaltado: los rangos de valores
+ * válidos se pintan con color de acento; el resto queda con el color normal.
+ */
+function renderHighlightedQuery(value, ranges) {
+    if (ranges.length === 0) {
+        return value;
+    }
+    const nodes = [];
+    let cursor = 0;
+    ranges.forEach((range, index) => {
+        if (range.start > cursor) {
+            nodes.push(value.slice(cursor, range.start));
+        }
+        nodes.push(_jsx("span", { className: "text-primary", children: value.slice(range.start, range.end) }, `highlight-${index}`));
+        cursor = range.end;
+    });
+    if (cursor < value.length) {
+        nodes.push(value.slice(cursor));
+    }
+    return nodes;
+}
+/**
+ * Barra de filtro estilo GitHub Issues: input único con autocompletado de
+ * `clave:valor`. Sugiere primero los campos disponibles y luego los valores de
+ * cada campo, con navegación por teclado y semántica ARIA de combobox/listbox.
+ * La navegación es virtual: el foco real nunca abandona el input.
+ */
+export function FilterQueryBar({ configs, value, onValueChange, placeholder = DEFAULT_PLACEHOLDER, ariaLabel = DEFAULT_ARIA_LABEL, className, onFocusChange, trailingAction, }) {
+    // Ids únicos por instancia: puede haber más de una barra montada a la vez
+    // (p. ej. la barra principal y el editor de un preset guardado).
+    const instanceId = React.useId();
+    const listboxId = `${instanceId}-${LISTBOX_ID}`;
+    const inputRef = React.useRef(null);
+    const highlightOverlayRef = React.useRef(null);
+    const pendingCaretRef = React.useRef(null);
+    const [caretIndex, setCaretIndex] = React.useState(0);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    // El popover se abre al enfocar; sin esta marca, Tab insertaría la primera
+    // sugerencia en vez de mover el foco. Solo interceptamos Tab cuando el usuario
+    // navegó explícitamente las sugerencias con las flechas.
+    const [hasNavigatedSuggestions, setHasNavigatedSuggestions] = React.useState(false);
+    const suggestions = React.useMemo(() => {
+        const activeToken = getActiveFilterToken(value, caretIndex);
+        const appliedFilters = parseFilterQuery(value, configs).appliedFilters;
+        if (activeToken.mode === "key") {
+            // En modo clave negado (`-` / `-cam`) se sugieren los campos a excluir, que
+            // arman `-campo:`. El texto libre `-palabra` sigue funcionando porque una
+            // palabra que no matchea ninguna clave no produce sugerencias. "Excluir"
+            // solo aparece con la barra vacía (sin clave a medio tipear ni negación).
+            return buildKeySuggestions(configs, activeToken.keyPart, {
+                appliedFilters,
+                includeExclude: !activeToken.negated && activeToken.keyPart === "",
+                negated: activeToken.negated,
+            });
+        }
+        const normalizedResolvedKey = normalizeFilterSlug(activeToken.resolvedKey ?? "");
+        // Meta-claves (`tiene:` / `no:`): el valor a sugerir es la clave del campo.
+        if (normalizedResolvedKey === PRESENCE_HAS_META_KEY ||
+            normalizedResolvedKey === PRESENCE_NO_META_KEY) {
+            return buildMetaValueSuggestions(configs, normalizedResolvedKey, activeToken.valuePart, appliedFilters);
+        }
+        const config = resolveConfigByKey(configs, activeToken.resolvedKey ?? "");
+        if (!config) {
+            return [];
+        }
+        return buildValueSuggestions(config, activeToken.valuePart, activeToken.negated, appliedFilters);
+    }, [caretIndex, configs, value]);
+    const invalidTokenCount = React.useMemo(() => parseFilterQuery(value, configs).invalidTokens.length, [configs, value]);
+    const highlightRanges = React.useMemo(() => getValueHighlightRanges(value, configs), [configs, value]);
+    // El overlay de resaltado debe seguir el scroll horizontal del input cuando el
+    // texto excede el ancho visible, para que el color quede alineado al caret.
+    const syncOverlayScroll = React.useCallback(() => {
+        if (highlightOverlayRef.current && inputRef.current) {
+            highlightOverlayRef.current.scrollLeft = inputRef.current.scrollLeft;
+        }
+    }, []);
+    React.useEffect(() => {
+        setActiveIndex((previousIndex) => previousIndex < suggestions.length ? previousIndex : 0);
+    }, [suggestions]);
+    React.useLayoutEffect(() => {
+        const pendingCaret = pendingCaretRef.current;
+        if (pendingCaret == null || !inputRef.current) {
+            return;
+        }
+        inputRef.current.setSelectionRange(pendingCaret, pendingCaret);
+        setCaretIndex(pendingCaret);
+        pendingCaretRef.current = null;
+    }, [value]);
+    React.useLayoutEffect(() => {
+        syncOverlayScroll();
+    }, [syncOverlayScroll, value]);
+    const isPopoverOpen = isOpen && suggestions.length > 0;
+    const activeSuggestion = isPopoverOpen ? suggestions[activeIndex] : undefined;
+    const syncCaretFromInput = React.useCallback(() => {
+        if (inputRef.current) {
+            setCaretIndex(inputRef.current.selectionStart ?? 0);
+        }
+    }, []);
+    const applySuggestion = React.useCallback((suggestion) => {
+        const activeToken = getActiveFilterToken(value, inputRef.current?.selectionStart ?? caretIndex);
+        // Las opciones universales reescriben el token entero (clave incluida); el
+        // resto solo reemplaza el tramo del valor bajo el caret.
+        const replaceStart = suggestion.replaceTokenStart
+            ? activeToken.tokenStart
+            : activeToken.replaceStart;
+        const before = value.slice(0, replaceStart);
+        const after = value.slice(activeToken.replaceEnd);
+        const nextValue = before + suggestion.insertText + after;
+        // El caret queda dentro del texto insertado (p. ej. entre los `*` de `**`).
+        pendingCaretRef.current =
+            before.length + (suggestion.caretOffset ?? suggestion.insertText.length);
+        onValueChange(nextValue);
+        setIsOpen(true);
+        setActiveIndex(0);
+        setHasNavigatedSuggestions(false);
+        if (!suggestion.keepOpen) {
+            // El valor quedó completo; el siguiente token reabrirá en modo claves.
+            setIsOpen(false);
+        }
+    }, [caretIndex, onValueChange, value]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setHasNavigatedSuggestions(true);
+            if (!isPopoverOpen) {
+                setIsOpen(true);
+                return;
+            }
+            setActiveIndex((previousIndex) => suggestions.length === 0
+                ? 0
+                : (previousIndex + 1) % suggestions.length);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHasNavigatedSuggestions(true);
+            if (!isPopoverOpen) {
+                setIsOpen(true);
+                return;
+            }
+            setActiveIndex((previousIndex) => suggestions.length === 0
+                ? 0
+                : (previousIndex - 1 + suggestions.length) % suggestions.length);
+            return;
+        }
+        if (event.key === "Enter" && activeSuggestion) {
+            event.preventDefault();
+            applySuggestion(activeSuggestion);
+            return;
+        }
+        // Tab solo acepta una sugerencia si el usuario la resaltó con las flechas;
+        // de lo contrario deja que el foco se mueva con normalidad.
+        if (event.key === "Tab" &&
+            hasNavigatedSuggestions &&
+            activeSuggestion) {
+            event.preventDefault();
+            applySuggestion(activeSuggestion);
+            return;
+        }
+        if (event.key === "Escape" && isPopoverOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsOpen(false);
+        }
+    }, [
+        activeSuggestion,
+        applySuggestion,
+        hasNavigatedSuggestions,
+        isPopoverOpen,
+        suggestions.length,
+    ]);
+    const handleClear = React.useCallback(() => {
+        onValueChange("");
+        pendingCaretRef.current = 0;
+        setIsOpen(false);
+        inputRef.current?.focus();
+    }, [onValueChange]);
+    return (_jsxs("div", { className: cn("grid w-full gap-2", className), children: [_jsxs(Popover, { onOpenChange: setIsOpen, open: isPopoverOpen, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsx(Input, { "aria-activedescendant": activeSuggestion
+                                        ? `${instanceId}-${activeSuggestion.id}`
+                                        : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": isPopoverOpen, "aria-label": ariaLabel, autoComplete: "off", 
+                                    // El texto se vuelve transparente: lo dibuja el overlay coloreado de
+                                    // abajo. El caret queda visible con el color de texto normal. El
+                                    // padding derecho deja lugar a los iconos (limpiar + acción opcional).
+                                    className: cn("w-full text-transparent", trailingAction ? "pr-16" : "pr-9"), onChange: (event) => {
+                                        onValueChange(event.target.value);
+                                        setIsOpen(true);
+                                        setActiveIndex(0);
+                                        setHasNavigatedSuggestions(false);
+                                        setCaretIndex(event.target.selectionStart ?? event.target.value.length);
+                                    }, onClick: syncCaretFromInput, onBlur: () => {
+                                        setHasNavigatedSuggestions(false);
+                                        onFocusChange?.(false);
+                                    }, onFocus: () => {
+                                        syncCaretFromInput();
+                                        setIsOpen(true);
+                                        onFocusChange?.(true);
+                                    }, onKeyDown: handleKeyDown, onKeyUp: syncCaretFromInput, onScroll: syncOverlayScroll, placeholder: placeholder, ref: inputRef, role: "combobox", style: { caretColor: "var(--foreground)" }, type: "text", value: value }), _jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0 flex items-center overflow-hidden rounded-lg border border-transparent px-2.5 text-base text-foreground select-none md:text-sm", trailingAction ? "pr-16" : "pr-9"), ref: highlightOverlayRef, children: _jsx("span", { className: "whitespace-pre", children: renderHighlightedQuery(value, highlightRanges) }) }), _jsxs("div", { className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5", children: [value ? (_jsx(Button, { "aria-label": CLEAR_FILTER_ARIA_LABEL, className: "active:-translate-y-0", onClick: handleClear, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(X, { "aria-hidden": "true" }) })) : null, trailingAction] })] }) }), _jsx(PopoverContent, { align: "start", className: "w-[250px] max-h-[280px] gap-0 overflow-y-auto p-1", onCloseAutoFocus: (event) => event.preventDefault(), onOpenAutoFocus: (event) => event.preventDefault(), children: _jsx("ul", { "aria-label": suggestions.some((suggestion) => suggestion.group === "value")
+                                ? VALUE_GROUP_LABEL
+                                : KEY_GROUP_LABEL, className: "grid gap-0.5", id: listboxId, role: "listbox", children: suggestions.map((suggestion, index) => {
+                                const SuggestionIcon = suggestion.icon;
+                                // Separador entre grupos lógicos (p. ej. campos | presencia/exclusión).
+                                const showSeparator = index > 0 && suggestions[index - 1].group !== suggestion.group;
+                                return (_jsxs(React.Fragment, { children: [showSeparator ? (_jsx("li", { "aria-hidden": "true", className: "my-1 border-t border-border", role: "presentation" })) : null, _jsxs("li", { "aria-selected": index === activeIndex, className: cn("flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm", index === activeIndex
+                                                ? "bg-accent text-accent-foreground"
+                                                : "text-foreground"), id: `${instanceId}-${suggestion.id}`, onMouseDown: (event) => {
+                                                event.preventDefault();
+                                                applySuggestion(suggestion);
+                                            }, role: "option", children: [_jsx(SuggestionIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: suggestion.label })] })] }, suggestion.id));
+                            }) }) })] }), _jsxs("span", { "aria-live": "polite", className: "sr-only", children: [isPopoverOpen ? `${suggestions.length} sugerencias disponibles` : "", invalidTokenCount > 0
+                        ? ` ${invalidTokenCount} filtros no aplicados`
+                        : ""] })] }));
+}