beez-ui 0.4.0 → 0.5.0

package/dist/components/data-table.js

@@ -1,15 +1,15 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X, } from "lucide-react";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "lucide-react";
 import { Button } from "./button.js";
 import { Badge } from "./badge.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
-import { parseFilterQuery, serializeFilterQuery, } from "./filter-query-grammar.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { parseFilterQuery, serializeFilterQuery } from "./filter-query-grammar.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { Input } from "./input.js";
-import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table.js";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DIACRITICS_PATTERN = /[\u0300-\u036f]/g;
 const CLEAR_FILTER_ARIA_LABEL = "Limpiar filtro";
 const ACTIVE_EXCLUSIONS_SR_LABEL = "Filtros de exclusión activos";
@@ -21,592 +21,836 @@ const CLEAR_ALL_EXCLUSIONS_ARIA_LABEL = "Quitar todas las exclusiones";
 const CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL = "Limpiar filtros excluidos";
 const REVERSE_FILTER_PENDING_MESSAGE = "Estás escribiendo una exclusión. Presioná Enter para aplicarla.";
 function normalizeFilterToken(value) {
-    return value
-        .normalize("NFD")
-        .replace(DIACRITICS_PATTERN, "")
-        .toLocaleLowerCase()
-        .trim();
+	return value.normalize("NFD").replace(DIACRITICS_PATTERN, "").toLocaleLowerCase().trim();
 }
 function getTableFilterValue(filterValue, showExcludeFilterToggle) {
-    const normalizedFilterValue = filterValue.trimStart();
-    if (showExcludeFilterToggle && normalizedFilterValue.startsWith("-")) {
-        return "";
-    }
-    return filterValue;
+	const normalizedFilterValue = filterValue.trimStart();
+	if (showExcludeFilterToggle && normalizedFilterValue.startsWith("-")) {
+		return "";
+	}
+	return filterValue;
 }
 function areColumnFiltersEqual(leftFilters, rightFilters) {
-    if (leftFilters.length !== rightFilters.length) {
-        return false;
-    }
-    return leftFilters.every((leftFilter, index) => leftFilter.id === rightFilters[index]?.id &&
-        leftFilter.value === rightFilters[index]?.value);
+	if (leftFilters.length !== rightFilters.length) {
+		return false;
+	}
+	return leftFilters.every((leftFilter, index) => leftFilter.id === rightFilters[index]?.id && leftFilter.value === rightFilters[index]?.value);
 }
 function areStringArraysEqual(leftValues, rightValues) {
-    if (leftValues.length !== rightValues.length) {
-        return false;
-    }
-    return leftValues.every((value, index) => value === rightValues[index]);
+	if (leftValues.length !== rightValues.length) {
+		return false;
+	}
+	return leftValues.every((value, index) => value === rightValues[index]);
 }
 function areColumnFilterValuesEqual(leftValue, rightValue) {
-    if (leftValue.kind !== rightValue.kind) {
-        return false;
-    }
-    if (leftValue.kind === "numberRange" && rightValue.kind === "numberRange") {
-        return leftValue.min === rightValue.min && leftValue.max === rightValue.max;
-    }
-    if (leftValue.kind === "yearMonthRange" && rightValue.kind === "yearMonthRange") {
-        return (leftValue.mode === rightValue.mode &&
-            leftValue.min === rightValue.min &&
-            leftValue.max === rightValue.max);
-    }
-    if (leftValue.kind === "enum" && rightValue.kind === "enum") {
-        return leftValue.value === rightValue.value;
-    }
-    if (leftValue.kind === "presence" && rightValue.kind === "presence") {
-        return leftValue.value === rightValue.value;
-    }
-    return false;
+	if (leftValue.kind !== rightValue.kind) {
+		return false;
+	}
+	if (leftValue.kind === "numberRange" && rightValue.kind === "numberRange") {
+		return leftValue.min === rightValue.min && leftValue.max === rightValue.max;
+	}
+	if (leftValue.kind === "yearMonthRange" && rightValue.kind === "yearMonthRange") {
+		return leftValue.mode === rightValue.mode && leftValue.min === rightValue.min && leftValue.max === rightValue.max;
+	}
+	if (leftValue.kind === "enum" && rightValue.kind === "enum") {
+		return leftValue.value === rightValue.value;
+	}
+	if (leftValue.kind === "presence" && rightValue.kind === "presence") {
+		return leftValue.value === rightValue.value;
+	}
+	return false;
 }
 function areAdvancedFilterMapsEqual(leftMap, rightMap) {
-    const leftKeys = Object.keys(leftMap);
-    const rightKeys = Object.keys(rightMap);
-    if (leftKeys.length !== rightKeys.length) {
-        return false;
-    }
-    return leftKeys.every((key) => {
-        const rightValue = rightMap[key];
-        return (rightValue != null && areColumnFilterValuesEqual(leftMap[key], rightValue));
-    });
+	const leftKeys = Object.keys(leftMap);
+	const rightKeys = Object.keys(rightMap);
+	if (leftKeys.length !== rightKeys.length) {
+		return false;
+	}
+	return leftKeys.every((key) => {
+		const rightValue = rightMap[key];
+		return rightValue != null && areColumnFilterValuesEqual(leftMap[key], rightValue);
+	});
 }
-export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel = "Filtrar", filterPlaceholder = "Filtrar...", filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle = false, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder = "Excluir por descripción", excludeFilterLabel = "Filtro de exclusión", excludeFilterToggleLabel = "Mostrar filtros de exclusión", excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle = false, columnVisibilityButtonLabel = "Columnas", columnVisibilityMenuLabel = "Mostrar columnas", columnVisibilityMenuExtraContent, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel = "Mostrar todas", deselectAllColumnsLabel = "Ocultar todas", hideableColumnsDefaultVisibility, }) {
-    const [uncontrolledSorting, setUncontrolledSorting] = React.useState([]);
-    const [columnFilters, setColumnFilters] = React.useState([]);
-    const [uncontrolledFilterValue, setUncontrolledFilterValue] = React.useState("");
-    const [filterQueryDraft, setFilterQueryDraft] = React.useState("");
-    // Filtros estructurados de la última query parseada. Se preservan para que la
-    // re-sincronización canónica (al perder foco) NO descarte los qualifiers sin
-    // columna (textMatch/folder) ni los negados, que no viven en
-    // `advancedFiltersAppliedByColumn` y quedarían como filtros activos invisibles.
-    const [appliedFiltersDraft, setAppliedFiltersDraft] = React.useState([]);
-    const [isQueryFilterFocused, setIsQueryFilterFocused] = React.useState(false);
-    const [uncontrolledExcludeFilterValues, setUncontrolledExcludeFilterValues] = React.useState([]);
-    const [excludeFilterInputValue, setExcludeFilterInputValue] = React.useState("");
-    const [excludeFilterErrorMessage, setExcludeFilterErrorMessage] = React.useState(null);
-    const [isExcludeFilterInputVisible, setIsExcludeFilterInputVisible] = React.useState(false);
-    const [uncontrolledColumnVisibility, setUncontrolledColumnVisibility] = React.useState({});
-    const [advancedFiltersAppliedByColumn, setAdvancedFiltersAppliedByColumn] = React.useState({});
-    const sorting = controlledSorting ?? uncontrolledSorting;
-    const columnVisibility = controlledColumnVisibility ?? uncontrolledColumnVisibility;
-    const shouldShowQueryFilter = queryFilterConfig != null;
-    const isFilterValueControlled = controlledFilterValue != null;
-    const isExcludeFilterValuesControlled = controlledExcludeFilterValues != null;
-    const resolvedFilterValue = isFilterValueControlled
-        ? controlledFilterValue
-        : uncontrolledFilterValue;
-    const resolvedExcludeFilterValues = isExcludeFilterValuesControlled
-        ? controlledExcludeFilterValues
-        : uncontrolledExcludeFilterValues;
-    const hasActiveExcludeFilterValues = resolvedExcludeFilterValues.length > 0;
-    const tableFilterValue = getTableFilterValue(resolvedFilterValue, showExcludeFilterToggle);
-    const hasPendingReverseFilter = showExcludeFilterToggle && resolvedFilterValue.trimStart().startsWith("-");
-    const advancedFilterColumnIds = React.useMemo(() => {
-        const columnIds = new Set();
-        for (const queryQualifier of queryFilterConfig ?? []) {
-            if (queryQualifier.columnId) {
-                columnIds.add(queryQualifier.columnId);
-            }
-        }
-        return columnIds;
-    }, [queryFilterConfig]);
-    const handleExcludeFilterValuesChange = React.useCallback((nextExcludeFilterValues) => {
-        if (!isExcludeFilterValuesControlled) {
-            setUncontrolledExcludeFilterValues(nextExcludeFilterValues);
-        }
-        onExcludeFilterValuesChange?.(nextExcludeFilterValues);
-    }, [isExcludeFilterValuesControlled, onExcludeFilterValuesChange]);
-    // La barra de query es la fuente de verdad mientras se tipea: parsea el texto
-    // y escribe en los mismos canales que usan los controles clásicos (descripción,
-    // exclusiones y avanzados), de modo que ambas vistas queden sincronizadas.
-    const handleQueryFilterChange = React.useCallback((nextQuery) => {
-        // Update urgente: mantiene el input y el dropdown de sugerencias
-        // respondiendo de inmediato a cada tecla.
-        setFilterQueryDraft(nextQuery);
-        if (!queryFilterConfig) {
-            return;
-        }
-        const parsedQuery = parseFilterQuery(nextQuery, queryFilterConfig);
-        // El re-filtrado vuelve a renderizar toda la tabla (celdas con popovers,
-        // tooltips y menús por fila), lo que bloquearía el commit del dropdown si
-        // corriera urgente. Se difiere como transición de baja prioridad para que
-        // el tipeo y las sugerencias no se cuelguen.
-        React.startTransition(() => {
-            // Cada canal se actualiza solo si cambió. Propagar valores iguales
-            // (p. ej. una lista de exclusiones vacía nueva en cada tecla) dispararía
-            // re-cálculos de memos y un re-render extra de todas las filas sin
-            // ningún cambio observable.
-            if (parsedQuery.descriptionFilter !== resolvedFilterValue) {
-                if (!isFilterValueControlled) {
-                    setUncontrolledFilterValue(parsedQuery.descriptionFilter);
-                }
-                onFilterValueChange?.(parsedQuery.descriptionFilter);
-            }
-            if (!areStringArraysEqual(parsedQuery.excludedDescriptionFilters, resolvedExcludeFilterValues)) {
-                handleExcludeFilterValuesChange(parsedQuery.excludedDescriptionFilters);
-            }
-            if (!areAdvancedFilterMapsEqual(parsedQuery.advancedFiltersByColumn, advancedFiltersAppliedByColumn)) {
-                setAdvancedFiltersAppliedByColumn(parsedQuery.advancedFiltersByColumn);
-            }
-            setAppliedFiltersDraft(parsedQuery.appliedFilters);
-            onAppliedFiltersChange?.(parsedQuery.appliedFilters);
-        });
-    }, [
-        advancedFiltersAppliedByColumn,
-        handleExcludeFilterValuesChange,
-        isFilterValueControlled,
-        onAppliedFiltersChange,
-        onFilterValueChange,
-        queryFilterConfig,
-        resolvedExcludeFilterValues,
-        resolvedFilterValue,
-    ]);
-    // Forma canónica de los filtros activos, para reflejarlos en la barra de query.
-    // Se serializa desde los filtros aplicados id-backed (no desde el texto de la
-    // barra), de modo que un filtro de carpeta apunte siempre por `folderId`: si la
-    // carpeta se renombra, su slug se re-deriva del nombre nuevo; si desaparece, el
-    // filtro se descarta. Definida antes del efecto de reparse para que este pueda
-    // re-propagar la forma id-backed cuando cambia la config.
-    const canonicalQueryFromFilters = React.useMemo(() => {
-        if (!queryFilterConfig) {
-            return "";
-        }
-        return serializeFilterQuery({
-            advancedFiltersByColumn: advancedFiltersAppliedByColumn,
-            appliedFilters: appliedFiltersDraft,
-            descriptionFilter: tableFilterValue,
-            excludedDescriptionFilters: resolvedExcludeFilterValues,
-            invalidTokens: [],
-        }, queryFilterConfig);
-    }, [
-        advancedFiltersAppliedByColumn,
-        appliedFiltersDraft,
-        queryFilterConfig,
-        resolvedExcludeFilterValues,
-        tableFilterValue,
-    ]);
-    // Firma estructural de la config de qualifiers: dispara la reconciliación solo
-    // cuando su CONTENIDO cambia (no en cada render con una referencia de array
-    // nueva), evitando re-propagar la forma canónica mientras el usuario tipea.
-    const queryFilterConfigSignature = React.useMemo(() => (queryFilterConfig ? JSON.stringify(queryFilterConfig) : ""), [queryFilterConfig]);
-    const previousQueryFilterConfigSignatureRef = React.useRef(null);
-    // Si la config de qualifiers cambia (p. ej. se renombra una carpeta y su opción
-    // pasa de `carpeta:hogar` a `carpeta:casa`, o se borra y desaparece), se
-    // re-propaga la forma canónica id-backed contra la NUEVA config en vez de
-    // re-parsear el texto con el slug viejo. Así un filtro de carpeta seleccionado
-    // sobrevive a renames y colisiones de slug (se vuelve a serializar por
-    // `folderId`), mientras que un filtro realmente huérfano (cuyo `folderId` ya no
-    // existe) se descarta del predicado en vez de seguir filtrando de forma
-    // invisible.
-    React.useEffect(() => {
-        const previousSignature = previousQueryFilterConfigSignatureRef.current;
-        previousQueryFilterConfigSignatureRef.current = queryFilterConfigSignature;
-        // Primer render o config sin contenido: nada que reconciliar todavía.
-        if (previousSignature === null) {
-            return;
-        }
-        if (!queryFilterConfig ||
-            !filterQueryDraft ||
-            previousSignature === queryFilterConfigSignature) {
-            return;
-        }
-        handleQueryFilterChange(canonicalQueryFromFilters);
-        // Solo debe re-correr cuando cambia el contenido de la config; el resto de los
-        // valores se leen como estado actual y no como disparadores para no re-parsear
-        // en cada tecla.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [queryFilterConfigSignature]);
-    // Reemplaza los filtros de carpeta de la barra por un único `carpeta:<id>` (o
-    // ninguno si `folderId` es `null`), preservando el resto. Lo usa el consumidor
-    // al clickear un chip de carpeta, para que la barra sea la única fuente de
-    // verdad y no queden filtros de carpeta inconsistentes.
-    const setSingleFolderFilter = React.useCallback((folderId) => {
-        if (!queryFilterConfig) {
-            return;
-        }
-        const folderQualifierKey = queryFilterConfig.find((config) => config.kind === "folder")?.key;
-        if (!folderQualifierKey) {
-            return;
-        }
-        const parsedQuery = parseFilterQuery(filterQueryDraft, queryFilterConfig);
-        // Limpia TODO filtro que apunte a la key de carpeta —tanto `carpeta:<id>`
-        // (kind "folder") como la presencia `tiene:carpeta`/`no:carpeta`—, para que
-        // el chip sea la única fuente de verdad y no queden filtros contradictorios
-        // (p. ej. `no:carpeta` + `carpeta:hogar`, que oculta todas las filas).
-        const nonFolderFilters = parsedQuery.appliedFilters.filter((appliedFilter) => appliedFilter.value.kind !== "folder" &&
-            appliedFilter.key !== folderQualifierKey);
-        const nextAppliedFilters = folderId == null
-            ? nonFolderFilters
-            : [
-                ...nonFolderFilters,
-                {
-                    key: folderQualifierKey,
-                    negated: false,
-                    value: { folderId, kind: "folder" },
-                },
-            ];
-        handleQueryFilterChange(serializeFilterQuery({ ...parsedQuery, appliedFilters: nextAppliedFilters }, queryFilterConfig));
-    }, [filterQueryDraft, handleQueryFilterChange, queryFilterConfig]);
-    React.useEffect(() => {
-        if (!queryFilterControlsRef) {
-            return;
-        }
-        queryFilterControlsRef.current = {
-            getQueryText: () => filterQueryDraft,
-            setQueryText: handleQueryFilterChange,
-            setSingleFolderFilter,
-        };
-        return () => {
-            queryFilterControlsRef.current = null;
-        };
-    }, [
-        filterQueryDraft,
-        handleQueryFilterChange,
-        queryFilterControlsRef,
-        setSingleFolderFilter,
-    ]);
-    const addExcludeFilterValue = React.useCallback((rawExcludeFilterValue, options = {}) => {
-        const normalizedCandidate = normalizeFilterToken(rawExcludeFilterValue);
-        if (!normalizedCandidate) {
-            setExcludeFilterErrorMessage(EMPTY_EXCLUDE_FILTER_ERROR_MESSAGE);
-            return false;
-        }
-        const hasDuplicateExcludeFilter = resolvedExcludeFilterValues.some((excludeFilterValue) => normalizeFilterToken(excludeFilterValue) === normalizedCandidate);
-        if (hasDuplicateExcludeFilter) {
-            setExcludeFilterErrorMessage(DUPLICATE_EXCLUDE_FILTER_ERROR_MESSAGE);
-            return false;
-        }
-        handleExcludeFilterValuesChange([
-            ...resolvedExcludeFilterValues,
-            rawExcludeFilterValue.trim(),
-        ]);
-        if (options.clearExcludeInputValue ?? true) {
-            setExcludeFilterInputValue("");
-        }
-        setExcludeFilterErrorMessage(null);
-        return true;
-    }, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
-    const removeExcludeFilterValue = React.useCallback((excludeFilterValueToRemove) => {
-        handleExcludeFilterValuesChange(resolvedExcludeFilterValues.filter((excludeFilterValue) => excludeFilterValue !== excludeFilterValueToRemove));
-    }, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
-    const handleClearAllExcludeFilters = React.useCallback(() => {
-        handleExcludeFilterValuesChange([]);
-        setExcludeFilterInputValue("");
-        setExcludeFilterErrorMessage(null);
-    }, [handleExcludeFilterValuesChange]);
-    const handleSortingChange = React.useCallback((updater) => {
-        const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
-        if (controlledSorting == null) {
-            setUncontrolledSorting(nextSorting);
-        }
-        onSortingChange?.(nextSorting);
-    }, [controlledSorting, onSortingChange, sorting]);
-    const handleColumnVisibilityChange = React.useCallback((updater) => {
-        if (controlledColumnVisibility == null) {
-            setUncontrolledColumnVisibility(updater);
-        }
-        onColumnVisibilityChange?.(updater);
-    }, [controlledColumnVisibility, onColumnVisibilityChange]);
-    // TanStack Table manages internal reactive state through this hook.
-    const table = useReactTable({
-        columns,
-        data,
-        // La tabla no pagina (no hay `getPaginationRowModel`). Con el auto-reset por
-        // defecto, cada cambio de filtro dispara `resetPageIndex` → `setPagination`,
-        // que vuelve a renderizar y re-dispara el reset en bucle: "Maximum update
-        // depth exceeded" y la página colgada al tipear. Se desactivan los
-        // auto-resets porque no hay estado de paginado/expansión que reiniciar.
-        autoResetPageIndex: false,
-        autoResetExpanded: false,
-        getCoreRowModel: getCoreRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        onSortingChange: handleSortingChange,
-        onColumnVisibilityChange: handleColumnVisibilityChange,
-        state: {
-            columnFilters,
-            columnVisibility,
-            sorting,
-        },
-    });
-    const hideableColumns = table
-        .getAllLeafColumns()
-        .filter((column) => column.getCanHide());
-    const getHideableColumnDefaultVisibility = React.useCallback((columnId) => hideableColumnsDefaultVisibility?.[columnId] ?? true, [hideableColumnsDefaultVisibility]);
-    const areHideableColumnsAtDefaultVisibility = hideableColumns.every((column) => column.getIsVisible() === getHideableColumnDefaultVisibility(column.id));
-    const areSomeHideableColumnsVisible = hideableColumns.some((column) => column.getIsVisible());
-    const shouldShowColumnVisibilityToggle = showColumnVisibilityToggle && hideableColumns.length > 0;
-    const hasModifiedColumnVisibility = shouldShowColumnVisibilityToggle && !areHideableColumnsAtDefaultVisibility;
-    const hasToolbarChanges = hasModifiedColumnVisibility;
-    const shouldShowToolbarActions = shouldShowColumnVisibilityToggle || toolbarActions != null;
-    const shouldShowToolbar = shouldShowQueryFilter ||
-        Boolean(filterColumnId) ||
-        shouldShowToolbarActions;
-    const filterColumn = filterColumnId ? table.getColumn(filterColumnId) : undefined;
-    const activeSortingEntry = sorting.find((sortingEntry) => !sortingBadgeIgnoredColumnIds?.has(sortingEntry.id));
-    const activeSortingColumn = activeSortingEntry
-        ? table.getColumn(activeSortingEntry.id)
-        : undefined;
-    const activeSortingColumnMeta = activeSortingColumn?.columnDef.meta;
-    const activeSortingColumnLabel = (activeSortingEntry
-        ? sortingBadgeLabelOverrides?.[activeSortingEntry.id]
-        : undefined) ??
-        activeSortingColumnMeta?.label ??
-        (typeof activeSortingColumn?.columnDef.header === "string"
-            ? activeSortingColumn.columnDef.header
-            : activeSortingEntry?.id);
-    const shouldShowSortingBadge = activeSortingEntry != null && activeSortingColumnLabel != null;
-    const activeSortingDirectionSymbol = activeSortingEntry?.desc ? "↓" : "↑";
-    const activeSortingDirectionLabel = activeSortingEntry?.desc
-        ? "descendente"
-        : "ascendente";
-    const footerGroups = table.getFooterGroups();
-    const hasFooterContent = footerGroups.some((footerGroup) => footerGroup.headers.some((footer) => !footer.isPlaceholder && footer.column.columnDef.footer != null));
-    const handleResetSorting = React.useCallback(() => {
-        handleSortingChange([]);
-    }, [handleSortingChange]);
-    const handleClearMainFilter = React.useCallback(() => {
-        if (!isFilterValueControlled) {
-            setUncontrolledFilterValue("");
-        }
-        onFilterValueChange?.("");
-        filterColumn?.setFilterValue("");
-    }, [filterColumn, isFilterValueControlled, onFilterValueChange]);
-    React.useEffect(() => {
-        if (!filterColumn) {
-            return;
-        }
-        const currentFilterValue = String(filterColumn.getFilterValue() ?? "");
-        if (currentFilterValue === tableFilterValue) {
-            return;
-        }
-        filterColumn.setFilterValue(tableFilterValue);
-    }, [filterColumn, tableFilterValue]);
-    // Mientras la barra está enfocada, el usuario es la fuente de verdad y no se
-    // pisa su texto; al perder el foco (o al editar los controles clásicos) la
-    // barra se re-sincroniza con la forma canónica de los filtros activos.
-    React.useEffect(() => {
-        if (!queryFilterConfig || isQueryFilterFocused) {
-            return;
-        }
-        setFilterQueryDraft((previousDraft) => previousDraft === canonicalQueryFromFilters
-            ? previousDraft
-            : canonicalQueryFromFilters);
-    }, [canonicalQueryFromFilters, isQueryFilterFocused, queryFilterConfig]);
-    React.useEffect(() => {
-        if (advancedFilterColumnIds.size === 0 &&
-            Object.keys(advancedFiltersAppliedByColumn).length === 0) {
-            return;
-        }
-        setColumnFilters((previousColumnFilters) => {
-            const nextColumnFilters = previousColumnFilters.filter((columnFilter) => !advancedFilterColumnIds.has(columnFilter.id));
-            for (const [columnId, filterValue] of Object.entries(advancedFiltersAppliedByColumn)) {
-                nextColumnFilters.push({
-                    id: columnId,
-                    value: filterValue,
-                });
-            }
-            if (areColumnFiltersEqual(previousColumnFilters, nextColumnFilters)) {
-                return previousColumnFilters;
-            }
-            return nextColumnFilters;
-        });
-    }, [advancedFilterColumnIds, advancedFiltersAppliedByColumn]);
-    React.useEffect(() => {
-        onVisibleRowsChange?.(table.getRowModel().rows.map((row) => row.original));
-    }, [
-        columnFilters,
-        columnVisibility,
-        data,
-        onVisibleRowsChange,
-        sorting,
-        table,
-    ]);
-    const sortingBadgeNode = shouldShowSortingBadge ? (_jsxs(Badge, { "aria-live": "polite", className: "inline-flex w-fit items-center gap-1.5", variant: "secondary", children: [_jsx("span", { children: `Ordenado por: ${activeSortingColumnLabel} ${activeSortingDirectionSymbol}` }), _jsx("span", { className: "sr-only", children: `Orden ${activeSortingDirectionLabel}` }), _jsx("button", { "aria-label": "Quitar orden", className: "inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: handleResetSorting, type: "button", children: _jsx(X, { "aria-hidden": "true", className: "size-3" }) })] })) : null;
-    const filterExtraContentNode = filterExtraContent ? (_jsx("div", { className: "grid gap-1", children: filterExtraContent })) : null;
-    const tableRowModelRows = table.getRowModel().rows;
-    const visibleLeafColumnsCount = table.getVisibleLeafColumns().length;
-    // El cuerpo de la tabla es la parte más cara de renderizar (cientos de celdas
-    // con popovers, tooltips y menús). Se memoiza para que los cambios de estado
-    // locales del toolbar —el draft de la barra de query, el foco, los inputs de
-    // filtros— no vuelvan a renderizar todas las filas. Solo se recalcula cuando
-    // cambia el row model (datos/filtros/orden), la visibilidad de columnas o los
-    // callbacks de fila. Sin esto, cada tecla disparaba varios re-render completos
-    // del cuerpo y colgaba la página. Se sigue el patrón de memoización de
-    // TanStack: no se depende de la identidad de `table`, que cambia en cada render.
-    const tableBodyRows = React.useMemo(() => {
-        // Con agrupado activo, el conteo por grupo se calcula sobre el row model
-        // visible (post filtros/orden) para que el encabezado refleje lo que se ve.
-        const groupRowCounts = new Map();
-        if (rowGroups) {
-            for (const row of tableRowModelRows) {
-                const groupKey = rowGroups.getGroupKey(row.original);
-                groupRowCounts.set(groupKey, (groupRowCounts.get(groupKey) ?? 0) + 1);
-            }
-        }
-        // Partición por grupo: garantiza un único bloque por clave aunque el row
-        // model llegue intercalado (orden manual, sorting sin la columna fantasma,
-        // etc.). El orden interno de cada grupo respeta el row model; el orden de
-        // los grupos usa getGroupSortValue (del primer row) o la primera aparición.
-        let rowsToRender = tableRowModelRows;
-        if (rowGroups) {
-            const rowsByGroupKey = new Map();
-            for (const row of tableRowModelRows) {
-                const groupKey = rowGroups.getGroupKey(row.original);
-                const groupRows = rowsByGroupKey.get(groupKey);
-                if (groupRows) {
-                    groupRows.push(row);
-                }
-                else {
-                    rowsByGroupKey.set(groupKey, [row]);
-                }
-            }
-            const groupEntries = [...rowsByGroupKey.values()];
-            const getGroupSortValue = rowGroups.getGroupSortValue;
-            if (getGroupSortValue) {
-                groupEntries.sort((leftRows, rightRows) => {
-                    const leftValue = getGroupSortValue(leftRows[0].original);
-                    const rightValue = getGroupSortValue(rightRows[0].original);
-                    if (leftValue === rightValue) {
-                        return 0;
-                    }
-                    return leftValue < rightValue ? -1 : 1;
-                });
-            }
-            rowsToRender = groupEntries.flat();
-        }
-        const renderedRows = [];
-        let previousGroupKey = null;
-        for (const row of rowsToRender) {
-            if (rowGroups) {
-                const groupKey = rowGroups.getGroupKey(row.original);
-                const isGroupCollapsed = rowGroups.collapsedGroupKeys?.has(groupKey) ?? false;
-                if (groupKey !== previousGroupKey) {
-                    const groupHeaderContent = rowGroups.renderGroupHeader(groupKey, groupRowCounts.get(groupKey) ?? 0);
-                    const handleGroupToggle = rowGroups.onGroupToggle;
-                    renderedRows.push(_jsx(TableRow, { className: "hover:bg-transparent", "data-slot": "table-group-header-row", children: _jsx(TableCell, { className: "bg-muted/40", colSpan: Math.max(visibleLeafColumnsCount, 1), children: handleGroupToggle ? (_jsxs("button", { "aria-expanded": !isGroupCollapsed, className: "flex w-full items-center gap-1.5 text-left", onClick: () => handleGroupToggle(groupKey), type: "button", children: [isGroupCollapsed ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 shrink-0" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0" })), groupHeaderContent] })) : (groupHeaderContent) }) }, `group-header-${groupKey}-${row.id}`));
-                    previousGroupKey = groupKey;
-                }
-                // Grupo colapsado: solo queda el encabezado; sus filas no se renderizan.
-                if (isGroupCollapsed) {
-                    continue;
-                }
-            }
-            const rowClassName = getRowClassName?.(row.original);
-            renderedRows.push(_jsx(TableRow, { className: rowClassName, children: row.getVisibleCells().map((cell) => {
-                    const columnMeta = cell.column.columnDef.meta;
-                    const handleCellClick = onCellClick && columnMeta?.isClickable
-                        ? (event) => {
-                            onCellClick(event, row.original, cell.column.id);
-                        }
-                        : undefined;
-                    return (_jsx(TableCell, { className: columnMeta?.cellClassName, "data-label": columnMeta?.label, onClick: handleCellClick, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                }) }, row.id));
-        }
-        return renderedRows;
-        // `columnVisibility` se incluye a propósito: alterna qué celdas devuelve
-        // `row.getVisibleCells()` sin cambiar la referencia de `tableRowModelRows`,
-        // por lo que es necesaria para invalidar la memo al mostrar/ocultar columnas
-        // aunque el linter no la vea referenciada léxicamente.
-        // `emptyMessage` se mantiene FUERA de esta memo a propósito: cambia al pasar
-        // de "sin filtro" a "con filtro" y, si estuviera acá, invalidaría la memo y
-        // re-renderizaría todas las filas en la primera tecla aunque no cambien.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        columnVisibility,
-        getRowClassName,
-        onCellClick,
-        rowGroups,
-        tableRowModelRows,
-        visibleLeafColumnsCount,
-    ]);
-    const tableBodyContent = tableBodyRows.length ? (tableBodyRows) : (_jsx(TableRow, { children: _jsx(TableCell, { className: "h-24 text-center", colSpan: Math.max(visibleLeafColumnsCount, 1), children: emptyMessage }) }));
-    return (_jsxs("div", { className: "grid gap-4", children: [shouldShowToolbar ? (_jsxs("div", { className: "grid gap-2", children: [shouldShowQueryFilter ? (_jsx(FilterQueryBar, { ariaLabel: queryFilterLabel, configs: queryFilterConfig, onFocusChange: setIsQueryFilterFocused, onValueChange: handleQueryFilterChange, placeholder: queryFilterPlaceholder, trailingAction: queryFilterTrailingAction, value: filterQueryDraft })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [filterColumnId ? (_jsxs("div", { className: "grid w-full max-w-sm gap-2", children: [!shouldShowQueryFilter ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative w-full", children: [_jsx(Input, { "aria-label": filterLabel, className: `w-full pr-16 ${hasPendingReverseFilter ? "text-red-400" : ""}`, onChange: (event) => {
-                                                            const nextFilterValue = event.target.value;
-                                                            if (!isFilterValueControlled) {
-                                                                setUncontrolledFilterValue(nextFilterValue);
-                                                            }
-                                                            onFilterValueChange?.(nextFilterValue);
-                                                            filterColumn?.setFilterValue(getTableFilterValue(nextFilterValue, showExcludeFilterToggle));
-                                                        }, onKeyDown: (event) => {
-                                                            if (event.key !== "Enter") {
-                                                                return;
-                                                            }
-                                                            const trimmedResolvedFilterValue = resolvedFilterValue.trimStart();
-                                                            if (!showExcludeFilterToggle ||
-                                                                !trimmedResolvedFilterValue.startsWith("-")) {
-                                                                return;
-                                                            }
-                                                            event.preventDefault();
-                                                            const excludeFilterCandidate = trimmedResolvedFilterValue.slice(1);
-                                                            const wasExcludeFilterAdded = addExcludeFilterValue(excludeFilterCandidate, {
-                                                                clearExcludeInputValue: false,
-                                                            });
-                                                            if (wasExcludeFilterAdded) {
-                                                                handleClearMainFilter();
-                                                            }
-                                                        }, placeholder: filterPlaceholder, type: "text", value: resolvedFilterValue }), _jsxs("div", { className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5", children: [resolvedFilterValue ? (_jsx(Button, { "aria-label": CLEAR_FILTER_ARIA_LABEL, className: "active:-translate-y-0", onClick: handleClearMainFilter, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(X, { "aria-hidden": "true" }) })) : null, showExcludeFilterToggle ? (_jsxs(Button, { "aria-expanded": isExcludeFilterInputVisible, "aria-label": isExcludeFilterInputVisible
-                                                                    ? HIDE_EXCLUDE_FILTERS_ARIA_LABEL
-                                                                    : excludeFilterToggleLabel, className: "relative", onClick: () => {
-                                                                    setIsExcludeFilterInputVisible((previousState) => {
-                                                                        const nextState = !previousState;
-                                                                        if (!nextState) {
-                                                                            setExcludeFilterInputValue("");
-                                                                            setExcludeFilterErrorMessage(null);
-                                                                        }
-                                                                        return nextState;
-                                                                    });
-                                                                }, size: "icon-xs", type: "button", variant: "ghost", children: [_jsx(Ellipsis, { "aria-hidden": "true" }), hasActiveExcludeFilterValues ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background" }), _jsx("span", { className: "sr-only", children: ACTIVE_EXCLUSIONS_SR_LABEL })] })) : null] })) : null] })] }), showExcludeFilterToggle && isExcludeFilterInputVisible ? (_jsxs("div", { className: "grid gap-1", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { "aria-invalid": excludeFilterErrorMessage != null, "aria-label": excludeFilterLabel, onChange: (event) => {
-                                                                    setExcludeFilterInputValue(event.target.value);
-                                                                    if (excludeFilterErrorMessage != null) {
-                                                                        setExcludeFilterErrorMessage(null);
-                                                                    }
-                                                                }, onKeyDown: (event) => {
-                                                                    if (event.key !== "Enter") {
-                                                                        return;
-                                                                    }
-                                                                    event.preventDefault();
-                                                                    addExcludeFilterValue(excludeFilterInputValue);
-                                                                }, placeholder: excludeFilterPlaceholder, type: "text", value: excludeFilterInputValue }), _jsx(Button, { "aria-label": CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL, className: "shrink-0", disabled: !hasActiveExcludeFilterValues, onClick: handleClearAllExcludeFilters, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(Eraser, { "aria-hidden": "true" }) })] }), excludeFilterErrorMessage ? (_jsx("p", { "aria-live": "polite", className: "text-sm text-destructive", children: excludeFilterErrorMessage })) : null] })) : null, hasPendingReverseFilter ? (_jsxs("div", { "aria-live": "polite", className: "rounded-md border border-border/80 bg-muted/40 px-3 py-2 text-muted-foreground", role: "status", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground/80", children: [_jsx(CircleAlert, { "aria-hidden": "true", className: "size-4" }), _jsx("span", { children: "Exclusi\u00F3n pendiente" })] }), _jsx("p", { className: "mt-1 text-xs", children: REVERSE_FILTER_PENDING_MESSAGE })] })) : null] })) : null, showExcludeFilterToggle && resolvedExcludeFilterValues.length > 0 ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [excludeFilterUniqueRowsCount != null ? (_jsxs(Badge, { "aria-label": `Total de filas excluidas únicas: ${excludeFilterUniqueRowsCount}`, className: "inline-flex h-6 items-center gap-1.5 px-2.5", variant: "destructive", children: [_jsx("span", { children: `${EXCLUDED_ROWS_SUMMARY_LABEL}:` }), _jsx("span", { className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold", children: excludeFilterUniqueRowsCount }), _jsx("button", { "aria-label": CLEAR_ALL_EXCLUSIONS_ARIA_LABEL, className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40", onClick: handleClearAllExcludeFilters, type: "button", children: _jsx(X, { "aria-hidden": "true", className: "size-3" }) })] })) : null, resolvedExcludeFilterValues.map((excludeFilterValue) => {
-                                                const excludedRowsCount = excludeFilterRowsCountByValue?.[excludeFilterValue];
-                                                return (_jsxs(Badge, { className: "inline-flex h-6 items-center gap-1.5 px-2.5", variant: "destructive", children: [_jsx("span", { children: `− ${excludeFilterValue}` }), excludedRowsCount != null ? (_jsx("span", { "aria-label": `Filas excluidas por ${excludeFilterValue}: ${excludedRowsCount}`, className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold", children: excludedRowsCount })) : null, _jsx("button", { "aria-label": `Quitar exclusión ${excludeFilterValue}`, className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40", onClick: () => removeExcludeFilterValue(excludeFilterValue), type: "button", children: _jsx(X, { "aria-hidden": "true", className: "size-3" }) })] }, excludeFilterValue));
-                                            })] })) : null, sortingBadgeNode, filterExtraContentNode] })) : null, shouldShowToolbarActions ? (_jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [toolbarActions, shouldShowColumnVisibilityToggle ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { "aria-label": columnVisibilityButtonLabel, className: "relative", type: "button", variant: "outline", children: [columnVisibilityButtonLabel, _jsx(ChevronDown, { "aria-hidden": "true" }), hasToolbarChanges ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background" }), _jsx("span", { className: "sr-only", children: "Columnas modificadas" })] })) : null] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [columnVisibilityMenuExtraContent ? (_jsxs(_Fragment, { children: [columnVisibilityMenuExtraContent, _jsx(DropdownMenuSeparator, {})] })) : null, _jsx(DropdownMenuLabel, { children: columnVisibilityMenuLabel }), _jsx(DropdownMenuItem, { disabled: areHideableColumnsAtDefaultVisibility, onSelect: (event) => {
-                                                            event.preventDefault();
-                                                            hideableColumns.forEach((column) => {
-                                                                column.toggleVisibility(getHideableColumnDefaultVisibility(column.id));
-                                                            });
-                                                        }, children: selectAllColumnsLabel }), _jsx(DropdownMenuItem, { disabled: !areSomeHideableColumnsVisible, onSelect: (event) => {
-                                                            event.preventDefault();
-                                                            hideableColumns.forEach((column) => {
-                                                                column.toggleVisibility(false);
-                                                            });
-                                                        }, children: deselectAllColumnsLabel }), _jsx(DropdownMenuSeparator, {}), hideableColumns.map((column) => {
-                                                        const columnMeta = column.columnDef.meta;
-                                                        const isColumnVisible = column.getIsVisible();
-                                                        const label = columnMeta?.label ??
-                                                            (typeof column.columnDef.header === "string"
-                                                                ? column.columnDef.header
-                                                                : column.id);
-                                                        return (_jsxs(DropdownMenuCheckboxItem, { checked: isColumnVisible, onSelect: (event) => {
-                                                                event.preventDefault();
-                                                            }, onCheckedChange: (nextVisible) => {
-                                                                column.toggleVisibility(Boolean(nextVisible));
-                                                            }, children: [label, !isColumnVisible ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "absolute right-2 top-1.5 size-2 rounded-full bg-destructive ring-2 ring-background" }), _jsx("span", { className: "sr-only", children: "Columna deseleccionada" })] })) : null] }, column.id));
-                                                    })] })] })) : null] })) : null] })] })) : null, _jsx("div", { className: "relative w-full overflow-x-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
-                                    const columnMeta = header.column.columnDef.meta;
-                                    return (_jsx(TableHead, { className: columnMeta?.headerClassName, onClick: columnMeta?.onHeaderClick, children: header.isPlaceholder
-                                            ? null
-                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: tableBodyContent }), hasFooterContent ? (_jsx(TableFooter, { children: footerGroups.map((footerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: footerGroup.headers.map((footer) => (_jsx(TableCell, { "data-label": footer.column.columnDef.meta?.label, children: footer.isPlaceholder
-                                        ? null
-                                        : flexRender(footer.column.columnDef.footer, footer.getContext()) }, footer.id))) }, footerGroup.id))) })) : null] }) })] }));
+export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel = "Filtrar", filterPlaceholder = "Filtrar...", filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle = false, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder = "Excluir por descripción", excludeFilterLabel = "Filtro de exclusión", excludeFilterToggleLabel = "Mostrar filtros de exclusión", excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle = false, columnVisibilityButtonLabel = "Columnas", columnVisibilityMenuLabel = "Mostrar columnas", columnVisibilityMenuExtraContent, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel = "Mostrar todas", deselectAllColumnsLabel = "Ocultar todas", hideableColumnsDefaultVisibility }) {
+	const [uncontrolledSorting, setUncontrolledSorting] = React.useState([]);
+	const [columnFilters, setColumnFilters] = React.useState([]);
+	const [uncontrolledFilterValue, setUncontrolledFilterValue] = React.useState("");
+	const [filterQueryDraft, setFilterQueryDraft] = React.useState("");
+	// Filtros estructurados de la última query parseada. Se preservan para que la
+	// re-sincronización canónica (al perder foco) NO descarte los qualifiers sin
+	// columna (textMatch/folder) ni los negados, que no viven en
+	// `advancedFiltersAppliedByColumn` y quedarían como filtros activos invisibles.
+	const [appliedFiltersDraft, setAppliedFiltersDraft] = React.useState([]);
+	const [isQueryFilterFocused, setIsQueryFilterFocused] = React.useState(false);
+	const [uncontrolledExcludeFilterValues, setUncontrolledExcludeFilterValues] = React.useState([]);
+	const [excludeFilterInputValue, setExcludeFilterInputValue] = React.useState("");
+	const [excludeFilterErrorMessage, setExcludeFilterErrorMessage] = React.useState(null);
+	const [isExcludeFilterInputVisible, setIsExcludeFilterInputVisible] = React.useState(false);
+	const [uncontrolledColumnVisibility, setUncontrolledColumnVisibility] = React.useState({});
+	const [advancedFiltersAppliedByColumn, setAdvancedFiltersAppliedByColumn] = React.useState({});
+	const sorting = controlledSorting ?? uncontrolledSorting;
+	const columnVisibility = controlledColumnVisibility ?? uncontrolledColumnVisibility;
+	const shouldShowQueryFilter = queryFilterConfig != null;
+	const isFilterValueControlled = controlledFilterValue != null;
+	const isExcludeFilterValuesControlled = controlledExcludeFilterValues != null;
+	const resolvedFilterValue = isFilterValueControlled ? controlledFilterValue : uncontrolledFilterValue;
+	const resolvedExcludeFilterValues = isExcludeFilterValuesControlled ? controlledExcludeFilterValues : uncontrolledExcludeFilterValues;
+	const hasActiveExcludeFilterValues = resolvedExcludeFilterValues.length > 0;
+	const tableFilterValue = getTableFilterValue(resolvedFilterValue, showExcludeFilterToggle);
+	const hasPendingReverseFilter = showExcludeFilterToggle && resolvedFilterValue.trimStart().startsWith("-");
+	const advancedFilterColumnIds = React.useMemo(() => {
+		const columnIds = new Set();
+		for (const queryQualifier of queryFilterConfig ?? []) {
+			if (queryQualifier.columnId) {
+				columnIds.add(queryQualifier.columnId);
+			}
+		}
+		return columnIds;
+	}, [queryFilterConfig]);
+	const handleExcludeFilterValuesChange = React.useCallback((nextExcludeFilterValues) => {
+		if (!isExcludeFilterValuesControlled) {
+			setUncontrolledExcludeFilterValues(nextExcludeFilterValues);
+		}
+		onExcludeFilterValuesChange?.(nextExcludeFilterValues);
+	}, [isExcludeFilterValuesControlled, onExcludeFilterValuesChange]);
+	// La barra de query es la fuente de verdad mientras se tipea: parsea el texto
+	// y escribe en los mismos canales que usan los controles clásicos (descripción,
+	// exclusiones y avanzados), de modo que ambas vistas queden sincronizadas.
+	const handleQueryFilterChange = React.useCallback((nextQuery) => {
+		// Update urgente: mantiene el input y el dropdown de sugerencias
+		// respondiendo de inmediato a cada tecla.
+		setFilterQueryDraft(nextQuery);
+		if (!queryFilterConfig) {
+			return;
+		}
+		const parsedQuery = parseFilterQuery(nextQuery, queryFilterConfig);
+		// El re-filtrado vuelve a renderizar toda la tabla (celdas con popovers,
+		// tooltips y menús por fila), lo que bloquearía el commit del dropdown si
+		// corriera urgente. Se difiere como transición de baja prioridad para que
+		// el tipeo y las sugerencias no se cuelguen.
+		React.startTransition(() => {
+			// Cada canal se actualiza solo si cambió. Propagar valores iguales
+			// (p. ej. una lista de exclusiones vacía nueva en cada tecla) dispararía
+			// re-cálculos de memos y un re-render extra de todas las filas sin
+			// ningún cambio observable.
+			if (parsedQuery.descriptionFilter !== resolvedFilterValue) {
+				if (!isFilterValueControlled) {
+					setUncontrolledFilterValue(parsedQuery.descriptionFilter);
+				}
+				onFilterValueChange?.(parsedQuery.descriptionFilter);
+			}
+			if (!areStringArraysEqual(parsedQuery.excludedDescriptionFilters, resolvedExcludeFilterValues)) {
+				handleExcludeFilterValuesChange(parsedQuery.excludedDescriptionFilters);
+			}
+			if (!areAdvancedFilterMapsEqual(parsedQuery.advancedFiltersByColumn, advancedFiltersAppliedByColumn)) {
+				setAdvancedFiltersAppliedByColumn(parsedQuery.advancedFiltersByColumn);
+			}
+			setAppliedFiltersDraft(parsedQuery.appliedFilters);
+			onAppliedFiltersChange?.(parsedQuery.appliedFilters);
+		});
+	}, [
+		advancedFiltersAppliedByColumn,
+		handleExcludeFilterValuesChange,
+		isFilterValueControlled,
+		onAppliedFiltersChange,
+		onFilterValueChange,
+		queryFilterConfig,
+		resolvedExcludeFilterValues,
+		resolvedFilterValue
+	]);
+	// Forma canónica de los filtros activos, para reflejarlos en la barra de query.
+	// Se serializa desde los filtros aplicados id-backed (no desde el texto de la
+	// barra), de modo que un filtro de carpeta apunte siempre por `folderId`: si la
+	// carpeta se renombra, su slug se re-deriva del nombre nuevo; si desaparece, el
+	// filtro se descarta. Definida antes del efecto de reparse para que este pueda
+	// re-propagar la forma id-backed cuando cambia la config.
+	const canonicalQueryFromFilters = React.useMemo(() => {
+		if (!queryFilterConfig) {
+			return "";
+		}
+		return serializeFilterQuery({
+			advancedFiltersByColumn: advancedFiltersAppliedByColumn,
+			appliedFilters: appliedFiltersDraft,
+			descriptionFilter: tableFilterValue,
+			excludedDescriptionFilters: resolvedExcludeFilterValues,
+			invalidTokens: []
+		}, queryFilterConfig);
+	}, [
+		advancedFiltersAppliedByColumn,
+		appliedFiltersDraft,
+		queryFilterConfig,
+		resolvedExcludeFilterValues,
+		tableFilterValue
+	]);
+	// Firma estructural de la config de qualifiers: dispara la reconciliación solo
+	// cuando su CONTENIDO cambia (no en cada render con una referencia de array
+	// nueva), evitando re-propagar la forma canónica mientras el usuario tipea.
+	const queryFilterConfigSignature = React.useMemo(() => queryFilterConfig ? JSON.stringify(queryFilterConfig) : "", [queryFilterConfig]);
+	const previousQueryFilterConfigSignatureRef = React.useRef(null);
+	// Si la config de qualifiers cambia (p. ej. se renombra una carpeta y su opción
+	// pasa de `carpeta:hogar` a `carpeta:casa`, o se borra y desaparece), se
+	// re-propaga la forma canónica id-backed contra la NUEVA config en vez de
+	// re-parsear el texto con el slug viejo. Así un filtro de carpeta seleccionado
+	// sobrevive a renames y colisiones de slug (se vuelve a serializar por
+	// `folderId`), mientras que un filtro realmente huérfano (cuyo `folderId` ya no
+	// existe) se descarta del predicado en vez de seguir filtrando de forma
+	// invisible.
+	React.useEffect(() => {
+		const previousSignature = previousQueryFilterConfigSignatureRef.current;
+		previousQueryFilterConfigSignatureRef.current = queryFilterConfigSignature;
+		// Primer render o config sin contenido: nada que reconciliar todavía.
+		if (previousSignature === null) {
+			return;
+		}
+		if (!queryFilterConfig || !filterQueryDraft || previousSignature === queryFilterConfigSignature) {
+			return;
+		}
+		handleQueryFilterChange(canonicalQueryFromFilters);
+		// Solo debe re-correr cuando cambia el contenido de la config; el resto de los
+		// valores se leen como estado actual y no como disparadores para no re-parsear
+		// en cada tecla.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [queryFilterConfigSignature]);
+	// Reemplaza los filtros de carpeta de la barra por un único `carpeta:<id>` (o
+	// ninguno si `folderId` es `null`), preservando el resto. Lo usa el consumidor
+	// al clickear un chip de carpeta, para que la barra sea la única fuente de
+	// verdad y no queden filtros de carpeta inconsistentes.
+	const setSingleFolderFilter = React.useCallback((folderId) => {
+		if (!queryFilterConfig) {
+			return;
+		}
+		const folderQualifierKey = queryFilterConfig.find((config) => config.kind === "folder")?.key;
+		if (!folderQualifierKey) {
+			return;
+		}
+		const parsedQuery = parseFilterQuery(filterQueryDraft, queryFilterConfig);
+		// Limpia TODO filtro que apunte a la key de carpeta —tanto `carpeta:<id>`
+		// (kind "folder") como la presencia `tiene:carpeta`/`no:carpeta`—, para que
+		// el chip sea la única fuente de verdad y no queden filtros contradictorios
+		// (p. ej. `no:carpeta` + `carpeta:hogar`, que oculta todas las filas).
+		const nonFolderFilters = parsedQuery.appliedFilters.filter((appliedFilter) => appliedFilter.value.kind !== "folder" && appliedFilter.key !== folderQualifierKey);
+		const nextAppliedFilters = folderId == null ? nonFolderFilters : [...nonFolderFilters, {
+			key: folderQualifierKey,
+			negated: false,
+			value: {
+				folderId,
+				kind: "folder"
+			}
+		}];
+		handleQueryFilterChange(serializeFilterQuery({
+			...parsedQuery,
+			appliedFilters: nextAppliedFilters
+		}, queryFilterConfig));
+	}, [
+		filterQueryDraft,
+		handleQueryFilterChange,
+		queryFilterConfig
+	]);
+	React.useEffect(() => {
+		if (!queryFilterControlsRef) {
+			return;
+		}
+		queryFilterControlsRef.current = {
+			getQueryText: () => filterQueryDraft,
+			setQueryText: handleQueryFilterChange,
+			setSingleFolderFilter
+		};
+		return () => {
+			queryFilterControlsRef.current = null;
+		};
+	}, [
+		filterQueryDraft,
+		handleQueryFilterChange,
+		queryFilterControlsRef,
+		setSingleFolderFilter
+	]);
+	const addExcludeFilterValue = React.useCallback((rawExcludeFilterValue, options = {}) => {
+		const normalizedCandidate = normalizeFilterToken(rawExcludeFilterValue);
+		if (!normalizedCandidate) {
+			setExcludeFilterErrorMessage(EMPTY_EXCLUDE_FILTER_ERROR_MESSAGE);
+			return false;
+		}
+		const hasDuplicateExcludeFilter = resolvedExcludeFilterValues.some((excludeFilterValue) => normalizeFilterToken(excludeFilterValue) === normalizedCandidate);
+		if (hasDuplicateExcludeFilter) {
+			setExcludeFilterErrorMessage(DUPLICATE_EXCLUDE_FILTER_ERROR_MESSAGE);
+			return false;
+		}
+		handleExcludeFilterValuesChange([...resolvedExcludeFilterValues, rawExcludeFilterValue.trim()]);
+		if (options.clearExcludeInputValue ?? true) {
+			setExcludeFilterInputValue("");
+		}
+		setExcludeFilterErrorMessage(null);
+		return true;
+	}, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
+	const removeExcludeFilterValue = React.useCallback((excludeFilterValueToRemove) => {
+		handleExcludeFilterValuesChange(resolvedExcludeFilterValues.filter((excludeFilterValue) => excludeFilterValue !== excludeFilterValueToRemove));
+	}, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
+	const handleClearAllExcludeFilters = React.useCallback(() => {
+		handleExcludeFilterValuesChange([]);
+		setExcludeFilterInputValue("");
+		setExcludeFilterErrorMessage(null);
+	}, [handleExcludeFilterValuesChange]);
+	const handleSortingChange = React.useCallback((updater) => {
+		const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+		if (controlledSorting == null) {
+			setUncontrolledSorting(nextSorting);
+		}
+		onSortingChange?.(nextSorting);
+	}, [
+		controlledSorting,
+		onSortingChange,
+		sorting
+	]);
+	const handleColumnVisibilityChange = React.useCallback((updater) => {
+		if (controlledColumnVisibility == null) {
+			setUncontrolledColumnVisibility(updater);
+		}
+		onColumnVisibilityChange?.(updater);
+	}, [controlledColumnVisibility, onColumnVisibilityChange]);
+	// TanStack Table manages internal reactive state through this hook.
+	const table = useReactTable({
+		columns,
+		data,
+		// La tabla no pagina (no hay `getPaginationRowModel`). Con el auto-reset por
+		// defecto, cada cambio de filtro dispara `resetPageIndex` → `setPagination`,
+		// que vuelve a renderizar y re-dispara el reset en bucle: "Maximum update
+		// depth exceeded" y la página colgada al tipear. Se desactivan los
+		// auto-resets porque no hay estado de paginado/expansión que reiniciar.
+		autoResetPageIndex: false,
+		autoResetExpanded: false,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		onSortingChange: handleSortingChange,
+		onColumnVisibilityChange: handleColumnVisibilityChange,
+		state: {
+			columnFilters,
+			columnVisibility,
+			sorting
+		}
+	});
+	const hideableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+	const getHideableColumnDefaultVisibility = React.useCallback((columnId) => hideableColumnsDefaultVisibility?.[columnId] ?? true, [hideableColumnsDefaultVisibility]);
+	const areHideableColumnsAtDefaultVisibility = hideableColumns.every((column) => column.getIsVisible() === getHideableColumnDefaultVisibility(column.id));
+	const areSomeHideableColumnsVisible = hideableColumns.some((column) => column.getIsVisible());
+	const shouldShowColumnVisibilityToggle = showColumnVisibilityToggle && hideableColumns.length > 0;
+	const hasModifiedColumnVisibility = shouldShowColumnVisibilityToggle && !areHideableColumnsAtDefaultVisibility;
+	const hasToolbarChanges = hasModifiedColumnVisibility;
+	const shouldShowToolbarActions = shouldShowColumnVisibilityToggle || toolbarActions != null;
+	const shouldShowToolbar = shouldShowQueryFilter || Boolean(filterColumnId) || shouldShowToolbarActions;
+	const filterColumn = filterColumnId ? table.getColumn(filterColumnId) : undefined;
+	const activeSortingEntry = sorting.find((sortingEntry) => !sortingBadgeIgnoredColumnIds?.has(sortingEntry.id));
+	const activeSortingColumn = activeSortingEntry ? table.getColumn(activeSortingEntry.id) : undefined;
+	const activeSortingColumnMeta = activeSortingColumn?.columnDef.meta;
+	const activeSortingColumnLabel = (activeSortingEntry ? sortingBadgeLabelOverrides?.[activeSortingEntry.id] : undefined) ?? activeSortingColumnMeta?.label ?? (typeof activeSortingColumn?.columnDef.header === "string" ? activeSortingColumn.columnDef.header : activeSortingEntry?.id);
+	const shouldShowSortingBadge = activeSortingEntry != null && activeSortingColumnLabel != null;
+	const activeSortingDirectionSymbol = activeSortingEntry?.desc ? "↓" : "↑";
+	const activeSortingDirectionLabel = activeSortingEntry?.desc ? "descendente" : "ascendente";
+	const footerGroups = table.getFooterGroups();
+	const hasFooterContent = footerGroups.some((footerGroup) => footerGroup.headers.some((footer) => !footer.isPlaceholder && footer.column.columnDef.footer != null));
+	const handleResetSorting = React.useCallback(() => {
+		handleSortingChange([]);
+	}, [handleSortingChange]);
+	const handleClearMainFilter = React.useCallback(() => {
+		if (!isFilterValueControlled) {
+			setUncontrolledFilterValue("");
+		}
+		onFilterValueChange?.("");
+		filterColumn?.setFilterValue("");
+	}, [
+		filterColumn,
+		isFilterValueControlled,
+		onFilterValueChange
+	]);
+	React.useEffect(() => {
+		if (!filterColumn) {
+			return;
+		}
+		const currentFilterValue = String(filterColumn.getFilterValue() ?? "");
+		if (currentFilterValue === tableFilterValue) {
+			return;
+		}
+		filterColumn.setFilterValue(tableFilterValue);
+	}, [filterColumn, tableFilterValue]);
+	// Mientras la barra está enfocada, el usuario es la fuente de verdad y no se
+	// pisa su texto; al perder el foco (o al editar los controles clásicos) la
+	// barra se re-sincroniza con la forma canónica de los filtros activos.
+	React.useEffect(() => {
+		if (!queryFilterConfig || isQueryFilterFocused) {
+			return;
+		}
+		setFilterQueryDraft((previousDraft) => previousDraft === canonicalQueryFromFilters ? previousDraft : canonicalQueryFromFilters);
+	}, [
+		canonicalQueryFromFilters,
+		isQueryFilterFocused,
+		queryFilterConfig
+	]);
+	React.useEffect(() => {
+		if (advancedFilterColumnIds.size === 0 && Object.keys(advancedFiltersAppliedByColumn).length === 0) {
+			return;
+		}
+		setColumnFilters((previousColumnFilters) => {
+			const nextColumnFilters = previousColumnFilters.filter((columnFilter) => !advancedFilterColumnIds.has(columnFilter.id));
+			for (const [columnId, filterValue] of Object.entries(advancedFiltersAppliedByColumn)) {
+				nextColumnFilters.push({
+					id: columnId,
+					value: filterValue
+				});
+			}
+			if (areColumnFiltersEqual(previousColumnFilters, nextColumnFilters)) {
+				return previousColumnFilters;
+			}
+			return nextColumnFilters;
+		});
+	}, [advancedFilterColumnIds, advancedFiltersAppliedByColumn]);
+	React.useEffect(() => {
+		onVisibleRowsChange?.(table.getRowModel().rows.map((row) => row.original));
+	}, [
+		columnFilters,
+		columnVisibility,
+		data,
+		onVisibleRowsChange,
+		sorting,
+		table
+	]);
+	const sortingBadgeNode = shouldShowSortingBadge ? /* @__PURE__ */ _jsxs(Badge, {
+		"aria-live": "polite",
+		className: "inline-flex w-fit items-center gap-1.5",
+		variant: "secondary",
+		children: [
+			/* @__PURE__ */ _jsx("span", { children: `Ordenado por: ${activeSortingColumnLabel} ${activeSortingDirectionSymbol}` }),
+			/* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				children: `Orden ${activeSortingDirectionLabel}`
+			}),
+			/* @__PURE__ */ _jsx("button", {
+				"aria-label": "Quitar orden",
+				className: "inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				onClick: handleResetSorting,
+				type: "button",
+				children: /* @__PURE__ */ _jsx(X, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})
+		]
+	}) : null;
+	const filterExtraContentNode = filterExtraContent ? /* @__PURE__ */ _jsx("div", {
+		className: "grid gap-1",
+		children: filterExtraContent
+	}) : null;
+	const tableRowModelRows = table.getRowModel().rows;
+	const visibleLeafColumnsCount = table.getVisibleLeafColumns().length;
+	// El cuerpo de la tabla es la parte más cara de renderizar (cientos de celdas
+	// con popovers, tooltips y menús). Se memoiza para que los cambios de estado
+	// locales del toolbar —el draft de la barra de query, el foco, los inputs de
+	// filtros— no vuelvan a renderizar todas las filas. Solo se recalcula cuando
+	// cambia el row model (datos/filtros/orden), la visibilidad de columnas o los
+	// callbacks de fila. Sin esto, cada tecla disparaba varios re-render completos
+	// del cuerpo y colgaba la página. Se sigue el patrón de memoización de
+	// TanStack: no se depende de la identidad de `table`, que cambia en cada render.
+	const tableBodyRows = React.useMemo(() => {
+		// Con agrupado activo, el conteo por grupo se calcula sobre el row model
+		// visible (post filtros/orden) para que el encabezado refleje lo que se ve.
+		const groupRowCounts = new Map();
+		if (rowGroups) {
+			for (const row of tableRowModelRows) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				groupRowCounts.set(groupKey, (groupRowCounts.get(groupKey) ?? 0) + 1);
+			}
+		}
+		// Partición por grupo: garantiza un único bloque por clave aunque el row
+		// model llegue intercalado (orden manual, sorting sin la columna fantasma,
+		// etc.). El orden interno de cada grupo respeta el row model; el orden de
+		// los grupos usa getGroupSortValue (del primer row) o la primera aparición.
+		let rowsToRender = tableRowModelRows;
+		if (rowGroups) {
+			const rowsByGroupKey = new Map();
+			for (const row of tableRowModelRows) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				const groupRows = rowsByGroupKey.get(groupKey);
+				if (groupRows) {
+					groupRows.push(row);
+				} else {
+					rowsByGroupKey.set(groupKey, [row]);
+				}
+			}
+			const groupEntries = [...rowsByGroupKey.values()];
+			const getGroupSortValue = rowGroups.getGroupSortValue;
+			if (getGroupSortValue) {
+				groupEntries.sort((leftRows, rightRows) => {
+					const leftValue = getGroupSortValue(leftRows[0].original);
+					const rightValue = getGroupSortValue(rightRows[0].original);
+					if (leftValue === rightValue) {
+						return 0;
+					}
+					return leftValue < rightValue ? -1 : 1;
+				});
+			}
+			rowsToRender = groupEntries.flat();
+		}
+		const renderedRows = [];
+		let previousGroupKey = null;
+		for (const row of rowsToRender) {
+			if (rowGroups) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				const isGroupCollapsed = rowGroups.collapsedGroupKeys?.has(groupKey) ?? false;
+				if (groupKey !== previousGroupKey) {
+					const groupHeaderContent = rowGroups.renderGroupHeader(groupKey, groupRowCounts.get(groupKey) ?? 0);
+					const handleGroupToggle = rowGroups.onGroupToggle;
+					renderedRows.push(/* @__PURE__ */ _jsx(TableRow, {
+						className: "hover:bg-transparent",
+						"data-slot": "table-group-header-row",
+						children: /* @__PURE__ */ _jsx(TableCell, {
+							className: "bg-muted/40",
+							colSpan: Math.max(visibleLeafColumnsCount, 1),
+							children: handleGroupToggle ? /* @__PURE__ */ _jsxs("button", {
+								"aria-expanded": !isGroupCollapsed,
+								className: "flex w-full items-center gap-1.5 text-left",
+								onClick: () => handleGroupToggle(groupKey),
+								type: "button",
+								children: [isGroupCollapsed ? /* @__PURE__ */ _jsx(ChevronRight, {
+									"aria-hidden": "true",
+									className: "size-4 shrink-0"
+								}) : /* @__PURE__ */ _jsx(ChevronDown, {
+									"aria-hidden": "true",
+									className: "size-4 shrink-0"
+								}), groupHeaderContent]
+							}) : groupHeaderContent
+						})
+					}, `group-header-${groupKey}-${row.id}`));
+					previousGroupKey = groupKey;
+				}
+				// Grupo colapsado: solo queda el encabezado; sus filas no se renderizan.
+				if (isGroupCollapsed) {
+					continue;
+				}
+			}
+			const rowClassName = getRowClassName?.(row.original);
+			renderedRows.push(/* @__PURE__ */ _jsx(TableRow, {
+				className: rowClassName,
+				children: row.getVisibleCells().map((cell) => {
+					const columnMeta = cell.column.columnDef.meta;
+					const handleCellClick = onCellClick && columnMeta?.isClickable ? (event) => {
+						onCellClick(event, row.original, cell.column.id);
+					} : undefined;
+					return /* @__PURE__ */ _jsx(TableCell, {
+						className: columnMeta?.cellClassName,
+						"data-label": columnMeta?.label,
+						onClick: handleCellClick,
+						children: flexRender(cell.column.columnDef.cell, cell.getContext())
+					}, cell.id);
+				})
+			}, row.id));
+		}
+		return renderedRows;
+		// `columnVisibility` se incluye a propósito: alterna qué celdas devuelve
+		// `row.getVisibleCells()` sin cambiar la referencia de `tableRowModelRows`,
+		// por lo que es necesaria para invalidar la memo al mostrar/ocultar columnas
+		// aunque el linter no la vea referenciada léxicamente.
+		// `emptyMessage` se mantiene FUERA de esta memo a propósito: cambia al pasar
+		// de "sin filtro" a "con filtro" y, si estuviera acá, invalidaría la memo y
+		// re-renderizaría todas las filas en la primera tecla aunque no cambien.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		columnVisibility,
+		getRowClassName,
+		onCellClick,
+		rowGroups,
+		tableRowModelRows,
+		visibleLeafColumnsCount
+	]);
+	const tableBodyContent = tableBodyRows.length ? tableBodyRows : /* @__PURE__ */ _jsx(TableRow, { children: /* @__PURE__ */ _jsx(TableCell, {
+		className: "h-24 text-center",
+		colSpan: Math.max(visibleLeafColumnsCount, 1),
+		children: emptyMessage
+	}) });
+	return /* @__PURE__ */ _jsxs("div", {
+		className: "grid gap-4",
+		children: [shouldShowToolbar ? /* @__PURE__ */ _jsxs("div", {
+			className: "grid gap-2",
+			children: [shouldShowQueryFilter ? /* @__PURE__ */ _jsx(FilterQueryBar, {
+				ariaLabel: queryFilterLabel,
+				configs: queryFilterConfig,
+				onFocusChange: setIsQueryFilterFocused,
+				onValueChange: handleQueryFilterChange,
+				placeholder: queryFilterPlaceholder,
+				trailingAction: queryFilterTrailingAction,
+				value: filterQueryDraft
+			}) : null, /* @__PURE__ */ _jsxs("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [filterColumnId ? /* @__PURE__ */ _jsxs("div", {
+					className: "grid w-full max-w-sm gap-2",
+					children: [
+						!shouldShowQueryFilter ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
+							/* @__PURE__ */ _jsxs("div", {
+								className: "relative w-full",
+								children: [/* @__PURE__ */ _jsx(Input, {
+									"aria-label": filterLabel,
+									className: `w-full pr-16 ${hasPendingReverseFilter ? "text-red-400" : ""}`,
+									onChange: (event) => {
+										const nextFilterValue = event.target.value;
+										if (!isFilterValueControlled) {
+											setUncontrolledFilterValue(nextFilterValue);
+										}
+										onFilterValueChange?.(nextFilterValue);
+										filterColumn?.setFilterValue(getTableFilterValue(nextFilterValue, showExcludeFilterToggle));
+									},
+									onKeyDown: (event) => {
+										if (event.key !== "Enter") {
+											return;
+										}
+										const trimmedResolvedFilterValue = resolvedFilterValue.trimStart();
+										if (!showExcludeFilterToggle || !trimmedResolvedFilterValue.startsWith("-")) {
+											return;
+										}
+										event.preventDefault();
+										const excludeFilterCandidate = trimmedResolvedFilterValue.slice(1);
+										const wasExcludeFilterAdded = addExcludeFilterValue(excludeFilterCandidate, { clearExcludeInputValue: false });
+										if (wasExcludeFilterAdded) {
+											handleClearMainFilter();
+										}
+									},
+									placeholder: filterPlaceholder,
+									type: "text",
+									value: resolvedFilterValue
+								}), /* @__PURE__ */ _jsxs("div", {
+									className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5",
+									children: [resolvedFilterValue ? /* @__PURE__ */ _jsx(Button, {
+										"aria-label": CLEAR_FILTER_ARIA_LABEL,
+										className: "active:-translate-y-0",
+										onClick: handleClearMainFilter,
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: /* @__PURE__ */ _jsx(X, { "aria-hidden": "true" })
+									}) : null, showExcludeFilterToggle ? /* @__PURE__ */ _jsxs(Button, {
+										"aria-expanded": isExcludeFilterInputVisible,
+										"aria-label": isExcludeFilterInputVisible ? HIDE_EXCLUDE_FILTERS_ARIA_LABEL : excludeFilterToggleLabel,
+										className: "relative",
+										onClick: () => {
+											setIsExcludeFilterInputVisible((previousState) => {
+												const nextState = !previousState;
+												if (!nextState) {
+													setExcludeFilterInputValue("");
+													setExcludeFilterErrorMessage(null);
+												}
+												return nextState;
+											});
+										},
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: [/* @__PURE__ */ _jsx(Ellipsis, { "aria-hidden": "true" }), hasActiveExcludeFilterValues ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+											"aria-hidden": "true",
+											className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+										}), /* @__PURE__ */ _jsx("span", {
+											className: "sr-only",
+											children: ACTIVE_EXCLUSIONS_SR_LABEL
+										})] }) : null]
+									}) : null]
+								})]
+							}),
+							showExcludeFilterToggle && isExcludeFilterInputVisible ? /* @__PURE__ */ _jsxs("div", {
+								className: "grid gap-1",
+								children: [/* @__PURE__ */ _jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ _jsx(Input, {
+										"aria-invalid": excludeFilterErrorMessage != null,
+										"aria-label": excludeFilterLabel,
+										onChange: (event) => {
+											setExcludeFilterInputValue(event.target.value);
+											if (excludeFilterErrorMessage != null) {
+												setExcludeFilterErrorMessage(null);
+											}
+										},
+										onKeyDown: (event) => {
+											if (event.key !== "Enter") {
+												return;
+											}
+											event.preventDefault();
+											addExcludeFilterValue(excludeFilterInputValue);
+										},
+										placeholder: excludeFilterPlaceholder,
+										type: "text",
+										value: excludeFilterInputValue
+									}), /* @__PURE__ */ _jsx(Button, {
+										"aria-label": CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL,
+										className: "shrink-0",
+										disabled: !hasActiveExcludeFilterValues,
+										onClick: handleClearAllExcludeFilters,
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: /* @__PURE__ */ _jsx(Eraser, { "aria-hidden": "true" })
+									})]
+								}), excludeFilterErrorMessage ? /* @__PURE__ */ _jsx("p", {
+									"aria-live": "polite",
+									className: "text-sm text-destructive",
+									children: excludeFilterErrorMessage
+								}) : null]
+							}) : null,
+							hasPendingReverseFilter ? /* @__PURE__ */ _jsxs("div", {
+								"aria-live": "polite",
+								className: "rounded-md border border-border/80 bg-muted/40 px-3 py-2 text-muted-foreground",
+								role: "status",
+								children: [/* @__PURE__ */ _jsxs("div", {
+									className: "flex items-center gap-2 text-sm font-medium text-foreground/80",
+									children: [/* @__PURE__ */ _jsx(CircleAlert, {
+										"aria-hidden": "true",
+										className: "size-4"
+									}), /* @__PURE__ */ _jsx("span", { children: "Exclusión pendiente" })]
+								}), /* @__PURE__ */ _jsx("p", {
+									className: "mt-1 text-xs",
+									children: REVERSE_FILTER_PENDING_MESSAGE
+								})]
+							}) : null
+						] }) : null,
+						showExcludeFilterToggle && resolvedExcludeFilterValues.length > 0 ? /* @__PURE__ */ _jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [excludeFilterUniqueRowsCount != null ? /* @__PURE__ */ _jsxs(Badge, {
+								"aria-label": `Total de filas excluidas únicas: ${excludeFilterUniqueRowsCount}`,
+								className: "inline-flex h-6 items-center gap-1.5 px-2.5",
+								variant: "destructive",
+								children: [
+									/* @__PURE__ */ _jsx("span", { children: `${EXCLUDED_ROWS_SUMMARY_LABEL}:` }),
+									/* @__PURE__ */ _jsx("span", {
+										className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold",
+										children: excludeFilterUniqueRowsCount
+									}),
+									/* @__PURE__ */ _jsx("button", {
+										"aria-label": CLEAR_ALL_EXCLUSIONS_ARIA_LABEL,
+										className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40",
+										onClick: handleClearAllExcludeFilters,
+										type: "button",
+										children: /* @__PURE__ */ _jsx(X, {
+											"aria-hidden": "true",
+											className: "size-3"
+										})
+									})
+								]
+							}) : null, resolvedExcludeFilterValues.map((excludeFilterValue) => {
+								const excludedRowsCount = excludeFilterRowsCountByValue?.[excludeFilterValue];
+								return /* @__PURE__ */ _jsxs(Badge, {
+									className: "inline-flex h-6 items-center gap-1.5 px-2.5",
+									variant: "destructive",
+									children: [
+										/* @__PURE__ */ _jsx("span", { children: `− ${excludeFilterValue}` }),
+										excludedRowsCount != null ? /* @__PURE__ */ _jsx("span", {
+											"aria-label": `Filas excluidas por ${excludeFilterValue}: ${excludedRowsCount}`,
+											className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold",
+											children: excludedRowsCount
+										}) : null,
+										/* @__PURE__ */ _jsx("button", {
+											"aria-label": `Quitar exclusión ${excludeFilterValue}`,
+											className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40",
+											onClick: () => removeExcludeFilterValue(excludeFilterValue),
+											type: "button",
+											children: /* @__PURE__ */ _jsx(X, {
+												"aria-hidden": "true",
+												className: "size-3"
+											})
+										})
+									]
+								}, excludeFilterValue);
+							})]
+						}) : null,
+						sortingBadgeNode,
+						filterExtraContentNode
+					]
+				}) : null, shouldShowToolbarActions ? /* @__PURE__ */ _jsxs("div", {
+					className: "ml-auto flex flex-wrap items-center gap-2",
+					children: [toolbarActions, shouldShowColumnVisibilityToggle ? /* @__PURE__ */ _jsxs(DropdownMenu, { children: [/* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ _jsxs(Button, {
+							"aria-label": columnVisibilityButtonLabel,
+							className: "relative",
+							type: "button",
+							variant: "outline",
+							children: [
+								columnVisibilityButtonLabel,
+								/* @__PURE__ */ _jsx(ChevronDown, { "aria-hidden": "true" }),
+								hasToolbarChanges ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+									"aria-hidden": "true",
+									className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+								}), /* @__PURE__ */ _jsx("span", {
+									className: "sr-only",
+									children: "Columnas modificadas"
+								})] }) : null
+							]
+						})
+					}), /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+						align: "end",
+						children: [
+							columnVisibilityMenuExtraContent ? /* @__PURE__ */ _jsxs(_Fragment, { children: [columnVisibilityMenuExtraContent, /* @__PURE__ */ _jsx(DropdownMenuSeparator, {})] }) : null,
+							/* @__PURE__ */ _jsx(DropdownMenuLabel, { children: columnVisibilityMenuLabel }),
+							/* @__PURE__ */ _jsx(DropdownMenuItem, {
+								disabled: areHideableColumnsAtDefaultVisibility,
+								onSelect: (event) => {
+									event.preventDefault();
+									hideableColumns.forEach((column) => {
+										column.toggleVisibility(getHideableColumnDefaultVisibility(column.id));
+									});
+								},
+								children: selectAllColumnsLabel
+							}),
+							/* @__PURE__ */ _jsx(DropdownMenuItem, {
+								disabled: !areSomeHideableColumnsVisible,
+								onSelect: (event) => {
+									event.preventDefault();
+									hideableColumns.forEach((column) => {
+										column.toggleVisibility(false);
+									});
+								},
+								children: deselectAllColumnsLabel
+							}),
+							/* @__PURE__ */ _jsx(DropdownMenuSeparator, {}),
+							hideableColumns.map((column) => {
+								const columnMeta = column.columnDef.meta;
+								const isColumnVisible = column.getIsVisible();
+								const label = columnMeta?.label ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+								return /* @__PURE__ */ _jsxs(DropdownMenuCheckboxItem, {
+									checked: isColumnVisible,
+									onSelect: (event) => {
+										event.preventDefault();
+									},
+									onCheckedChange: (nextVisible) => {
+										column.toggleVisibility(Boolean(nextVisible));
+									},
+									children: [label, !isColumnVisible ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+										"aria-hidden": "true",
+										className: "absolute right-2 top-1.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+									}), /* @__PURE__ */ _jsx("span", {
+										className: "sr-only",
+										children: "Columna deseleccionada"
+									})] }) : null]
+								}, column.id);
+							})
+						]
+					})] }) : null]
+				}) : null]
+			})]
+		}) : null, /* @__PURE__ */ _jsx("div", {
+			className: "relative w-full overflow-x-auto",
+			children: /* @__PURE__ */ _jsxs(Table, { children: [
+				/* @__PURE__ */ _jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ _jsx(TableRow, { children: headerGroup.headers.map((header) => {
+					const columnMeta = header.column.columnDef.meta;
+					return /* @__PURE__ */ _jsx(TableHead, {
+						className: columnMeta?.headerClassName,
+						onClick: columnMeta?.onHeaderClick,
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+					}, header.id);
+				}) }, headerGroup.id)) }),
+				/* @__PURE__ */ _jsx(TableBody, { children: tableBodyContent }),
+				hasFooterContent ? /* @__PURE__ */ _jsx(TableFooter, { children: footerGroups.map((footerGroup) => /* @__PURE__ */ _jsx(TableRow, {
+					className: "hover:bg-transparent",
+					children: footerGroup.headers.map((footer) => /* @__PURE__ */ _jsx(TableCell, {
+						"data-label": footer.column.columnDef.meta?.label,
+						children: footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext())
+					}, footer.id))
+				}, footerGroup.id)) }) : null
+			] })
+		})]
+	});
 }