@asteby/metacore-runtime-react 22.0.0 → 23.1.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @asteby/metacore-runtime-react
 
+## 23.1.0
+
+### Minor Changes
+
+- 08e18bf: Paridad de la experiencia pro de filtros en DynamicTable (vista tabla de los
+  módulos dinámicos), igualando al kanban.
+  - **Prefetch de facetas en la tabla:** al resolver la metadata se precargan en
+    paralelo (dedup por firma, `allSettled`) las facetas de todos los campos facet,
+    sembrando sus `options`. Abrir el filtro de una columna de texto en el header
+    ya muestra el combobox con valores + counts al instante, sin "Cargando…"; el
+    spinner queda solo para el refetch con búsqueda.
+  - **i18n de opciones en la tabla:** las opciones (stages y cualquier key i18n del
+    manifest) se traducen con `t(label, {defaultValue})` en runtime-react antes de
+    pasarlas al ui package, tanto en los filtros de header como en los chips y
+    resúmenes de valor.
+  - **Fila de chips de filtros activos sobre la tabla:** debajo de la toolbar,
+    removibles ("Campo: valor(es) ×" + "Limpiar todo"), con el color del valor
+    cuando aplica (p.ej. la etapa). Extraído a un componente compartido
+    `FilterChipsRow` (con `summarizeFilterValues`/`chipValueColor`/
+    `translateOptionLabels`) reusado por el kanban y la tabla — sin duplicar.
+  - **Stage-select en la tabla:** la columna `group_by`/stage sin opciones propias
+    ofrece el select con las etapas del pipeline (traducidas, con color), no un
+    cuadro de texto — sale del motor compartido; confirmado con test.
+  - **Header de lane del kanban:** los botones de búsqueda y embudo se ven SIEMPRE
+    (se quitó el hover-reveal, que nadie descubría) en muted con hover a foreground.
+    El embudo muestra un badge numérico con la cantidad de valores/filtros
+    aplicados en esa lane (como el badge del botón Filtros de la toolbar); la lupa
+    tiñe a primary + dot cuando hay búsqueda activa.
+
+## 23.0.0
+
+### Patch Changes
+
+- 25a78e7: Fixes del embudo por columna del kanban (LaneFilterButton).
+  - **Precarga de opciones dinámicas:** el value-picker del embudo ahora usa el
+    MISMO combobox pro que el Sheet — si el campo elegido tiene options estáticas
+    o `loadOptions` (facet), renderiza el combobox multi-select con carga lazy
+    (counts, buscador "Buscar valores...", estados de carga). Antes un campo facet
+    (p.ej. "Repo") caía al input crudo "Valor..." porque sus options aún no
+    estaban cargadas. Solo cae a input de texto cuando el campo es texto libre sin
+    facets. Nuevo componente compartible `FilterValueCombobox` en
+    `@asteby/metacore-ui`. El filtrado del lane sigue client-side: igualdad/IN
+    para valores de select/facet, substring para texto libre.
+  - **Traducción de opciones:** las opciones de Stage (y cualquier option con key
+    i18n del manifest) se traducen con `t(label, {defaultValue})` en runtime-react
+    ANTES de pasarlas al control (ColumnFilterControl vive en ui, sin i18n). Aplica
+    al embudo, al Sheet, a los chips y a los resúmenes de valor; el valor activo de
+    stage se muestra traducido y con su color.
+  - **Diseño del popover del embudo:** select de campo y control de valor a ancho
+    completo, popover más ancho (`w-72`), combobox con borde redondeado, botones
+    Limpiar/Aplicar full-width en fila — al nivel del resto del rediseño.
+  - **Prefetch de facetas:** al resolver la metadata se precargan en paralelo las
+    facetas de TODOS los campos facet (un `api.get` por campo, dedupeado por firma,
+    `allSettled` para que un campo con error no rompa el resto), sembrando el cache
+    del loader y poblando las `options` del `ColumnFilterConfig`. Así el popover
+    del Sheet y el value-picker del lane abren instantáneos con valores + counts,
+    sin "Cargando…"; el spinner queda solo para el refetch con búsqueda (`q`).
+    `useFacetLoaders` ahora expone `prefetchFacets` y `facetOptions`.
+
+- Updated dependencies [25a78e7]
+  - @asteby/metacore-ui@2.9.0
+
 ## 22.0.0
 
 ### Minor Changes

package/dist/dynamic-kanban.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { summarizeFilterValues, translateOptionLabels } from './filter-chips';
 import type { TableMetadata, ColumnDefinition, StageMeta, StageTransition } from './types';
+export { summarizeFilterValues, translateOptionLabels };
 /**
  * Resolves the board lanes for a kanban view. Prefers the model-level
  * `metadata.stages` (the kernel's `stages[]`); falls back to the `group_by`
@@ -41,15 +43,25 @@ export declare function selectCardColumns(metadata: TableMetadata, maxFields?: n
     fields: ColumnDefinition[];
 };
 /**
- * Human-readable summary of a field's selected filter values for the removable
- * chip row. Resolves option labels, unwraps the wire operators
- * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
- * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
+ * Whether a card passes a lane funnel. Picked select/facet `values` match by
+ * equality (IN — the card's field value must be one of them); a free-text
+ * `text` matches by case-insensitive substring. No field / no criteria → passes.
+ * Pure — exported for unit tests.
  */
-export declare function summarizeFilterValues(values: string[] | undefined, options: {
-    label: string;
-    value: string;
-}[] | undefined, maxShown?: number): string;
+export declare function cardMatchesLaneFunnel(card: any, filter: {
+    field?: string;
+    values?: string[];
+    text?: string;
+} | undefined): boolean;
+/**
+ * Count of applied criteria on a lane funnel: the number of picked select/facet
+ * `values`, else 1 for a free-text `text`, else 0. Drives the funnel's count
+ * badge. Pure — exported for unit tests.
+ */
+export declare function laneFunnelCount(value: {
+    values?: string[];
+    text?: string;
+} | undefined): number;
 /**
  * Whether a card matches a free-text lane search: a case-insensitive substring
  * over the card's title + every visible field value (`String(v)`). Empty query

package/dist/dynamic-kanban.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA+D9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAC5B,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,SAAS,EACvD,QAAQ,SAAI,GACb,MAAM,CAuBR;AAgCD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAChC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,gBAAgB,EAAE,EACxB,KAAK,EAAE,MAAM,GACd,OAAO,CAQT;AAqCD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAQ,EACR,QAAc,EACd,QAAQ,EACR,QAAQ,EACR,cAAc,GACjB,EAAE,kBAAkB,qBA2jBpB"}
+{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwD9B,OAAO,EAEH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,gBAAgB,CAAA;AAQvB,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAIhB,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,CAAA;AAMvD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,GAAG,EACT,MAAM,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GACzE,OAAO,CAUT;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GACxD,MAAM,CAIR;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAChC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,gBAAgB,EAAE,EACxB,KAAK,EAAE,MAAM,GACd,OAAO,CAQT;AA4CD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAQ,EACR,QAAc,EACd,QAAQ,EACR,QAAQ,EACR,cAAc,GACjB,EAAE,kBAAkB,qBA8hBpB"}

package/dist/dynamic-kanban.js

@@ -5,10 +5,11 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, useDragg
 import { Calendar, CircleDot, Hash, ListFilter, MoreHorizontal, Search, Tag, ToggleLeft, Type, X, } from 'lucide-react';
 import { toast } from 'sonner';
 import { Badge, Button, Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, Skeleton, } from '@asteby/metacore-ui/primitives';
-import { ColumnFilterControl } from '@asteby/metacore-ui/data-table';
-import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib';
+import { ColumnFilterControl, FilterValueCombobox } from '@asteby/metacore-ui/data-table';
+import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib';
 import { useApi } from './api-context';
 import { useDynamicFilters } from './use-dynamic-filters';
+import { FilterChipsRow, summarizeFilterValues, translateOptionLabels, } from './filter-chips';
 import { useMetadataCache } from './metadata-cache';
 import { ActivityValueRenderer } from './activity-value-renderer';
 import { DynamicIcon } from './dynamic-icon';
@@ -16,6 +17,9 @@ import { isColumnVisibleInTable } from './column-visibility';
 import { isRowActionVisible } from './dynamic-columns';
 import { useCan, usePermissionsActive, resolveRowActions } from './permissions-context';
 import { useDynamicRowActions } from './dynamic-row-actions';
+// Re-exported for tests + backward-compat: these live in ./filter-chips now
+// (shared with DynamicTable) but were historically imported from here.
+export { summarizeFilterValues, translateOptionLabels };
 // ---------------------------------------------------------------------------
 // Pure helpers (exported for unit tests — no React, no transport)
 // ---------------------------------------------------------------------------
@@ -130,62 +134,34 @@ export function selectCardColumns(metadata, maxFields = 3) {
     return { title, fields };
 }
 /**
- * Human-readable summary of a field's selected filter values for the removable
- * chip row. Resolves option labels, unwraps the wire operators
- * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
- * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
+ * Whether a card passes a lane funnel. Picked select/facet `values` match by
+ * equality (IN — the card's field value must be one of them); a free-text
+ * `text` matches by case-insensitive substring. No field / no criteria → passes.
+ * Pure — exported for unit tests.
  */
-export function summarizeFilterValues(values, options, maxShown = 2) {
-    if (!values || values.length === 0)
-        return '';
-    const opts = options ?? [];
-    const labelFor = (v) => opts.find((o) => o.value === v)?.label ?? v;
-    const first = values[0];
-    if (values.length === 1) {
-        if (first.startsWith('ILIKE:'))
-            return `"${first.slice(6)}"`;
-        if (first.startsWith('IN:')) {
-            return summarizeList(first.slice(3).split(','), labelFor, maxShown);
-        }
-        if (first.startsWith('RANGE:')) {
-            const [min, max] = first.slice(6).split(',');
-            return `${min || '…'} – ${max || '…'}`;
-        }
-        if (/^\d{4}-\d{2}-\d{2}_/.test(first))
-            return first.replace('_', ' – ');
+export function cardMatchesLaneFunnel(card, filter) {
+    if (!filter?.field)
+        return true;
+    const raw = String(card?.[filter.field] ?? '');
+    if (filter.values && filter.values.length > 0) {
+        return filter.values.includes(raw);
     }
-    if (first.startsWith('GTE:') || first.startsWith('LTE:')) {
-        const min = values.find((v) => v.startsWith('GTE:'))?.slice(4) ?? '';
-        const max = values.find((v) => v.startsWith('LTE:'))?.slice(4) ?? '';
-        return `${min || '…'} – ${max || '…'}`;
+    if (filter.text?.trim()) {
+        return raw.toLowerCase().includes(filter.text.trim().toLowerCase());
     }
-    return summarizeList(values, labelFor, maxShown);
-}
-function summarizeList(items, labelFor, maxShown) {
-    const labels = items.map(labelFor);
-    if (labels.length <= maxShown)
-        return labels.join(', ');
-    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown}`;
+    return true;
 }
 /**
- * The color of a filter's first selected value (for the chip's dot) — e.g. a
- * stage's palette color. Returns a resolved CSS color, or undefined for
- * operator/range/free-text values that carry no option color.
+ * Count of applied criteria on a lane funnel: the number of picked select/facet
+ * `values`, else 1 for a free-text `text`, else 0. Drives the funnel's count
+ * badge. Pure — exported for unit tests.
  */
-function chipValueColor(config) {
-    const sel = config.selectedValues;
-    if (!sel || sel.length === 0)
-        return undefined;
-    const first = sel[0];
-    let value = first;
-    if (first.startsWith('IN:'))
-        value = first.slice(3).split(',')[0];
-    else if (/^(ILIKE|RANGE|GTE|LTE):/.test(first))
-        return undefined;
-    else if (/^\d{4}-\d{2}-\d{2}_/.test(first))
-        return undefined;
-    const opt = config.options.find((o) => o.value === value);
-    return opt?.color ? resolveColorCss(opt.color) : undefined;
+export function laneFunnelCount(value) {
+    if (value?.values?.length)
+        return value.values.length;
+    if (value?.text?.trim())
+        return 1;
+    return 0;
 }
 /**
  * Whether a card matches a free-text lane search: a case-insensitive substring
@@ -308,11 +284,29 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         if (!metadata)
             return [];
         const out = [];
+        // Option labels come from the manifest as i18n keys (e.g.
+        // "integration_github.stage.backlog"). ColumnFilterControl lives in the
+        // ui package (no i18n), so translate labels HERE — on the static options
+        // and on whatever the facet loader resolves — before they ever reach a
+        // control, chip or value summary. A raw value (a repo name) has no key,
+        // so t() returns it verbatim via defaultValue.
+        const tr = (label) => t(label, { defaultValue: label });
         for (const [key, config] of columnFilterConfigs) {
             const f = metadata.filters?.find((x) => x.key === key);
             const c = metadata.columns.find((x) => x.key === key);
             const rawLabel = f?.label || c?.label || key;
-            out.push({ key, label: t(rawLabel, { defaultValue: rawLabel }), config });
+            const translatedConfig = {
+                ...config,
+                options: translateOptionLabels(config.options, tr),
+                loadOptions: config.loadOptions
+                    ? (q) => config.loadOptions(q).then((opts) => translateOptionLabels(opts, tr))
+                    : undefined,
+            };
+            out.push({
+                key,
+                label: tr(rawLabel),
+                config: translatedConfig,
+            });
         }
         return out;
     }, [metadata, columnFilterConfigs, t]);
@@ -342,7 +336,9 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         setLaneFilters((prev) => {
             const merged = { ...prev[stageKey], ...patch };
             const next = { ...prev };
-            const hasFunnel = !!(merged.field && merged.value?.trim());
+            const hasFunnel = !!(merged.field &&
+                ((merged.values && merged.values.length > 0) ||
+                    merged.text?.trim()));
             const hasQuery = !!merged.query?.trim();
             if (hasFunnel || hasQuery)
                 next[stageKey] = merged;
@@ -462,25 +458,15 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                                                     })
                                                     : t('kanban.noActiveFilters', {
                                                         defaultValue: 'Sin filtros',
-                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), activeFields.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", "data-testid": "kanban-filter-chips", children: [activeFields.map((field) => {
-                        const summary = summarizeFilterValues(field.config.selectedValues, field.config.options);
-                        const dot = chipValueColor(field.config);
-                        return (_jsxs(Badge, { variant: "secondary", className: "h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal", children: [dot && (_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dot } })), _jsxs("span", { className: "font-medium", children: [field.label, ":"] }), _jsx("span", { className: "max-w-[180px] truncate text-muted-foreground", children: summary }), _jsx("button", { type: "button", onClick: () => field.config.onFilterChange(field.config.filterKey, []), className: "ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20", "aria-label": t('kanban.removeFilter', {
-                                        defaultValue: 'Quitar filtro',
-                                    }), children: _jsx(X, { className: "h-3 w-3" }) })] }, field.key));
-                    }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-2 text-xs text-muted-foreground", onClick: clearAll, children: t('kanban.clearAll', { defaultValue: 'Limpiar todo' }) })] })), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
+                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
                             const allCards = grouped.get(stage.key) ?? [];
                             // Per-lane client-side narrowing (instant, scoped to this
                             // stage). The funnel (field/value) and the lane search
                             // (query) are AND-combined.
                             const laneFilter = laneFilters[stage.key];
                             let cards = allCards;
-                            if (laneFilter?.field && laneFilter.value?.trim()) {
-                                const v = laneFilter.value.trim().toLowerCase();
-                                const field = laneFilter.field;
-                                cards = cards.filter((c) => String(c[field] ?? '')
-                                    .toLowerCase()
-                                    .includes(v));
+                            if (laneFilter?.field) {
+                                cards = cards.filter((c) => cardMatchesLaneFunnel(c, laneFilter));
                             }
                             if (laneFilter?.query?.trim()) {
                                 cards = cards.filter((c) => cardMatchesLaneQuery(c, searchCols, laneFilter.query));
@@ -490,7 +476,8 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                                 isTransitionAllowed(transitions, activeStage, stage.key);
                             return (_jsx(KanbanLane, { stage: stage, count: cards.length, totalCount: allCards.length, filterFields: filterFields, laneFilter: laneFilter, onFunnelChange: (f) => updateLaneFilter(stage.key, {
                                     field: f?.field,
-                                    value: f?.value,
+                                    values: f?.values,
+                                    text: f?.text,
                                 }), onQueryChange: (q) => updateLaneFilter(stage.key, { query: q }), isDark: isDark, dimmed: !!activeId && !droppableAllowed, disabled: !!activeId && !droppableAllowed, children: loadingData && cards.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20 w-full" }), _jsx(Skeleton, { className: "h-20 w-full" })] })) : cards.length === 0 ? (_jsx("p", { className: "px-1 py-6 text-center text-xs text-muted-foreground", children: t('kanban.emptyLane', { defaultValue: 'Sin tarjetas' }) })) : (cards.map((card) => (_jsx(KanbanCard, { card: card, titleCol: titleCol, fieldCols: fieldCols, actions: rowActions, locale: i18n.language, timeZone: timeZone, currency: currency, onClick: onCardClick, onAction: handleInternalAction }, String(card.id))))) }, stage.key));
                         }) }), _jsx(DragOverlay, { children: activeCard ? (_jsx(CardPreview, { card: activeCard, titleCol: titleCol, fieldCols: fieldCols, locale: i18n.language, timeZone: timeZone, currency: currency })) : null }), rowActionDialogs] })] }));
 }
@@ -527,11 +514,18 @@ function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunn
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     });
-    const funnelActive = !!(laneFilter?.field && laneFilter.value?.trim());
+    const funnelField = filterFields.find((f) => f.key === laneFilter?.field);
+    const funnelActive = !!(laneFilter?.field &&
+        ((laneFilter.values && laneFilter.values.length > 0) ||
+            laneFilter.text?.trim()));
     const queryActive = !!laneFilter?.query?.trim();
     const laneActive = funnelActive || queryActive;
-    const activeFieldLabel = filterFields.find((f) => f.key === laneFilter?.field)?.label ??
-        laneFilter?.field;
+    const activeFieldLabel = funnelField?.label ?? laneFilter?.field;
+    // Human summary of the funnel value: resolved option labels for picked
+    // values, or the raw free text.
+    const funnelSummary = laneFilter?.values && laneFilter.values.length > 0
+        ? summarizeFilterValues(laneFilter.values, funnelField?.config?.options)
+        : laneFilter?.text ?? '';
     // Inline lane search: a Search icon expands an Input; Escape or blur-while-
     // empty collapses it. The query itself lives in the parent's laneFilters so
     // it survives collapse and combines with the funnel.
@@ -541,16 +535,20 @@ function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunn
         if (searchOpen)
             searchRef.current?.focus();
     }, [searchOpen]);
-    const funnelValue = laneFilter?.field && laneFilter.value
-        ? { field: laneFilter.field, value: laneFilter.value }
+    const funnelValue = laneFilter?.field
+        ? {
+            field: laneFilter.field,
+            values: laneFilter.values,
+            text: laneFilter.text,
+        }
         : undefined;
     return (_jsxs("div", { ref: setNodeRef, className: "group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity", style: {
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,
-        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive ? `${count}/${totalCount}` : count })] }), _jsxs("div", { className: `flex items-center gap-0.5 transition-opacity focus-within:opacity-100 group-hover/lane:opacity-100 ${laneActive || searchOpen ? 'opacity-100' : 'opacity-0'}`, children: [_jsx("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
+        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive ? `${count}/${totalCount}` : count })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
                                     defaultValue: 'Buscar en la columna',
-                                }), children: _jsx(Search, { className: "h-3.5 w-3.5" }) }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange })] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
+                                }), children: [_jsx(Search, { className: "h-3.5 w-3.5" }), queryActive && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" }))] }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange })] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Escape') {
                                     onQueryChange('');
                                     setSearchOpen(false);
@@ -560,7 +558,7 @@ function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunn
                                     setSearchOpen(false);
                             }, placeholder: t('kanban.searchLanePlaceholder', {
                                 defaultValue: 'Buscar tarjetas...',
-                            }), className: "h-7 pl-7 text-xs" })] }) })), funnelActive && (_jsxs("div", { className: "flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground", children: [_jsx(ListFilter, { className: "h-3 w-3 shrink-0" }), _jsxs("span", { className: "truncate", children: [activeFieldLabel, ": ", laneFilter.value] }), _jsx("button", { type: "button", onClick: () => onFunnelChange(null), className: "ml-auto rounded p-0.5 hover:bg-muted", "aria-label": t('kanban.clearFilters', {
+                            }), className: "h-7 pl-7 text-xs" })] }) })), funnelActive && (_jsxs("div", { className: "flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground", children: [_jsx(ListFilter, { className: "h-3 w-3 shrink-0" }), _jsxs("span", { className: "truncate", children: [activeFieldLabel, ": ", funnelSummary] }), _jsx("button", { type: "button", onClick: () => onFunnelChange(null), className: "ml-auto rounded p-0.5 hover:bg-muted", "aria-label": t('kanban.clearFilters', {
                             defaultValue: 'Limpiar',
                         }), children: _jsx(X, { className: "h-3 w-3" }) })] })), _jsx("div", { className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: children })] }));
 }
@@ -571,53 +569,56 @@ function LaneFilterButton({ fields, value, onChange, }) {
     const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '');
-    const [text, setText] = useState(value?.value ?? '');
+    const [values, setValues] = useState(value?.values ?? []);
+    const [text, setText] = useState(value?.text ?? '');
     // Re-seed the draft from the committed filter each time the popover opens.
     useEffect(() => {
         if (open) {
             setField(value?.field ?? fields[0]?.key ?? '');
-            setText(value?.value ?? '');
+            setValues(value?.values ?? []);
+            setText(value?.text ?? '');
         }
     }, [open, value, fields]);
     if (fields.length === 0)
         return null;
-    const active = !!(value && value.value.trim());
-    // When the chosen field carries a known option set (select/facet with
-    // pre-loaded values), offer those values as a Select instead of a raw text
-    // box — so the funnel picks real values, not free strings.
-    const selectedFieldCfg = fields.find((f) => f.key === field)?.config;
-    const valueOptions = selectedFieldCfg?.options ?? [];
-    const hasValueOptions = valueOptions.length > 0;
+    const active = !!(value &&
+        ((value.values && value.values.length > 0) || value.text?.trim()));
+    // Number of applied criteria on this lane's funnel (drives the count badge).
+    const activeCount = laneFunnelCount(value);
+    // The value step mirrors the sheet: when the chosen field is a select or a
+    // facet (static options OR a lazy loader), render the SAME pro combobox —
+    // multi-select, searchable, with counts. Only a genuinely free-text field
+    // (no options, no loader) falls back to a raw "Contiene..." input.
+    const cfg = fields.find((f) => f.key === field)?.config;
+    const hasValuePicker = (cfg?.options?.length ?? 0) > 0 || !!cfg?.loadOptions;
+    const toggle = (v) => setValues((prev) => prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v]);
     const apply = () => {
-        if (field && text.trim())
-            onChange({ field, value: text });
+        if (field && values.length > 0)
+            onChange({ field, values });
+        else if (field && text.trim())
+            onChange({ field, text: text.trim() });
         else
             onChange(null);
         setOpen(false);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: `flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${active ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.filterLane', {
+    const clear = () => {
+        onChange(null);
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${active ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.filterLane', {
                         defaultValue: 'Filtrar columna',
-                    }), children: _jsx(ListFilter, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", className: "w-56 space-y-2 p-2", children: [_jsxs(Select, { value: field, onValueChange: (f) => {
+                    }), children: [_jsx(ListFilter, { className: "h-3.5 w-3.5" }), activeCount > 0 && (_jsx("span", { className: "absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[9px] font-bold leading-none text-primary-foreground tabular-nums", children: activeCount }))] }) }), _jsxs(PopoverContent, { align: "end", className: "w-72 space-y-2.5 rounded-xl p-2.5 shadow-lg", children: [_jsxs(Select, { value: field, onValueChange: (f) => {
                             setField(f);
                             // Reset the value when switching fields — a value picked
                             // for one field is meaningless for another.
+                            setValues([]);
                             setText('');
-                        }, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: fields.map((f) => (_jsx(SelectItem, { value: f.key, className: "text-xs", children: f.label }, f.key))) })] }), hasValueOptions ? (_jsxs(Select, { value: text || undefined, onValueChange: (v) => {
-                            setText(v);
-                            if (field && v)
-                                onChange({ field, value: v });
-                            setOpen(false);
-                        }, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, { placeholder: t('kanban.filterValue', {
-                                        defaultValue: 'Valor...',
-                                    }) }) }), _jsx(SelectContent, { children: valueOptions.map((o) => (_jsx(SelectItem, { value: o.value, className: "text-xs", children: o.label }, o.value))) })] })) : (_jsx(Input, { autoFocus: true, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 w-full text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: fields.map((f) => (_jsx(SelectItem, { value: f.key, className: "text-xs", children: f.label }, f.key))) })] }), hasValuePicker ? (_jsx("div", { className: "overflow-hidden rounded-lg border", children: _jsx(FilterValueCombobox, { staticOptions: cfg?.options, loadOptions: cfg?.loadOptions, selected: values, onToggle: toggle }, field) })) : (_jsx(Input, { autoFocus: true, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter')
                                 apply();
                         }, placeholder: t('kanban.filterValue', {
-                            defaultValue: 'Valor...',
-                        }), className: "h-8 text-xs" })), _jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs", onClick: () => {
-                                    onChange(null);
-                                    setOpen(false);
-                                }, children: t('kanban.clearFilters', { defaultValue: 'Limpiar' }) }), _jsx(Button, { size: "sm", className: "h-7 text-xs", onClick: apply, children: t('kanban.apply', { defaultValue: 'Aplicar' }) })] })] })] }));
+                            defaultValue: 'Contiene...',
+                        }), className: "h-8 w-full text-xs" })), _jsxs("div", { className: "flex gap-1.5", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-7 flex-1 text-xs", onClick: clear, disabled: !active && values.length === 0 && !text.trim(), children: t('kanban.clearFilters', { defaultValue: 'Limpiar' }) }), _jsxs(Button, { size: "sm", className: "h-7 flex-1 text-xs", onClick: apply, disabled: values.length === 0 && !text.trim(), children: [t('kanban.apply', { defaultValue: 'Aplicar' }), values.length > 0 ? ` (${values.length})` : ''] })] })] })] }));
 }
 function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, currency, onClick, onAction, }) {
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAWnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BA02BnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAYnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAw6BnB"}

package/dist/dynamic-table.js

@@ -25,6 +25,7 @@ import { useMetadataCache } from './metadata-cache';
 import { useApi, useCurrentBranch } from './api-context';
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns';
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders';
+import { FilterChipsRow, translateOptionLabels } from './filter-chips';
 import { OptionsContext } from './options-context';
 import { getSearchableColumnKeys } from './column-visibility';
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context';
@@ -462,11 +463,15 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // getDynamicColumns forwards `loadOptions` into the column meta). Facets base
     // derived off the list endpoint exactly like the aggregate endpoint below.
     const facetsBase = endpoint ? `${endpoint}/facets` : model ? `/data/${model}/facets` : null;
-    const getFacetLoader = useFacetLoaders(facetsBase);
+    const { getFacetLoader, prefetchFacets, facetOptions } = useFacetLoaders(facetsBase);
     const columnFilterConfigs = useMemo(() => {
         const map = new Map();
         if (!metadata)
             return map;
+        // Option labels arrive as manifest i18n keys; translate them here (the ui
+        // package has no i18n) so header filters, chips and value summaries show
+        // localized text. A raw value with no key falls through via defaultValue.
+        const tr = (label) => t(label, { defaultValue: label });
         const stageOptions = (metadata.stages ?? []).map((s) => ({
             label: s.label,
             value: s.key,
@@ -500,6 +505,9 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 if (loader) {
                     fType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → the header filter
+                    // opens with the list already there, no "Cargando…" flash.
+                    options = facetOptions.get(f.column || f.key) ?? [];
                 }
             }
             if (fType === 'select' && options.length === 0 && !f.searchEndpoint)
@@ -507,12 +515,14 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             map.set(f.key, {
                 filterType: fType,
                 filterKey: f.column || f.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[f.column || f.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
                 searchEndpoint: f.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q) => loadOptions(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             });
         }
         for (const c of metadata.columns ?? []) {
@@ -569,21 +579,64 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 if (loader) {
                     filterType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → instant open.
+                    options = facetOptions.get(c.key) ?? [];
                 }
             }
             map.set(c.key, {
                 filterType,
                 filterKey: c.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[c.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint),
                 searchEndpoint: c.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q) => loadOptions(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             });
         }
         return map;
-    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader]);
+    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader, facetOptions, t]);
+    // Prewarm every facet field once the configs settle, so a text column's
+    // header filter opens instantly with values + counts (same as the kanban).
+    const facetFieldsSig = useMemo(() => {
+        const keys = [];
+        for (const config of columnFilterConfigs.values()) {
+            if (config.filterType === 'facet')
+                keys.push(config.filterKey);
+        }
+        return keys.join('|');
+    }, [columnFilterConfigs]);
+    useEffect(() => {
+        if (!facetFieldsSig)
+            return;
+        prefetchFacets(facetFieldsSig.split('|'));
+    }, [facetFieldsSig, prefetchFacets]);
+    // Active-filter chips (shared row with the kanban). One chip per field with a
+    // selection; the label is the translated filter/column label.
+    const activeFilterChips = useMemo(() => {
+        if (!metadata)
+            return [];
+        const out = [];
+        for (const [key, config] of columnFilterConfigs) {
+            if ((config.selectedValues?.length ?? 0) === 0)
+                continue;
+            const f = metadata.filters?.find((x) => x.key === key);
+            const c = metadata.columns?.find((x) => x.key === key);
+            const rawLabel = f?.label || c?.label || key;
+            out.push({
+                key,
+                label: t(rawLabel, { defaultValue: rawLabel }),
+                config,
+            });
+        }
+        return out;
+    }, [metadata, columnFilterConfigs, t]);
+    const clearAllDynamicFilters = useCallback(() => {
+        setDynamicFilters({});
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }, []);
     const columns = useMemo(() => {
         if (!viewMetadata)
             return [];
@@ -629,7 +682,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     if (!metadata) {
         return _jsx("div", { className: "text-center text-muted-foreground py-8", children: "Error al cargar la configuraci\u00F3n de la tabla." });
     }
-    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsx("div", { className: 'pb-4 shrink-0', children: _jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }) }), _jsx("div", { className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
+    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsxs("div", { className: 'pb-4 shrink-0', children: [_jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }), activeFilterChips.length > 0 && (_jsx("div", { className: 'pt-2', children: _jsx(FilterChipsRow, { fields: activeFilterChips, onClearAll: clearAllDynamicFilters, "data-testid": 'table-filter-chips' }) }))] }), _jsx("div", { className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
                                             const isActionsColumn = header.id === 'actions';
                                             return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActionsColumn && 'sticky right-0 z-20 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                                         }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {