@asteby/metacore-runtime-react 22.0.0 → 23.1.0

package/dist/filter-chips.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Human-readable summary of a field's selected filter values for a 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.
+ */
+export declare function summarizeFilterValues(values: string[] | undefined, options: {
+    label: string;
+    value: string;
+}[] | undefined, maxShown?: number): string;
+/**
+ * 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.
+ */
+export declare function chipValueColor(config: {
+    selectedValues: string[];
+    options: {
+        value: string;
+        color?: string;
+    }[];
+}): string | undefined;
+/**
+ * Translates option labels through the app translator (manifest i18n keys →
+ * localized text). A raw value with no matching key falls through to itself via
+ * `defaultValue`. Pure — exported for unit tests.
+ */
+export declare function translateOptionLabels<T extends {
+    label: string;
+}>(options: T[], translate: (key: string) => string): T[];
+export interface FilterChipField {
+    key: string;
+    label: string;
+    config: {
+        selectedValues: string[];
+        options: {
+            label: string;
+            value: string;
+            color?: string;
+        }[];
+        filterKey: string;
+        onFilterChange: (filterKey: string, values: string[]) => void;
+    };
+}
+export interface FilterChipsRowProps {
+    /** Fields with an active selection (one chip each). */
+    fields: FilterChipField[];
+    /** Clears every filter (the trailing "Limpiar todo"). */
+    onClearAll: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * The removable active-filter chip row shown under a board/table toolbar. Each
+ * chip: an optional value-color dot, "Campo: valor(es)" (capped + `+n`), and an
+ * X that clears that field; a trailing "Limpiar todo". Renders nothing when no
+ * field is active.
+ */
+export declare function FilterChipsRow({ fields, onClearAll, className, 'data-testid': testId, }: FilterChipsRowProps): import("react").JSX.Element | null;
+//# sourceMappingURL=filter-chips.d.ts.map

package/dist/filter-chips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chips.d.ts","sourceRoot":"","sources":["../src/filter-chips.tsx"],"names":[],"mappings":"AASA;;;;;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,CAsBR;AAYD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE;IACnC,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/C,GAAG,MAAM,GAAG,SAAS,CAUrB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,OAAO,EAAE,CAAC,EAAE,EACZ,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GACnC,CAAC,EAAE,CAEL;AAED,MAAM,WAAW,eAAe;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACJ,cAAc,EAAE,MAAM,EAAE,CAAA;QACxB,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QAC3D,SAAS,EAAE,MAAM,CAAA;QACjB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;KAChE,CAAA;CACJ;AAED,MAAM,WAAW,mBAAmB;IAChC,uDAAuD;IACvD,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,yDAAyD;IACzD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,SAAS,EACT,aAAa,EAAE,MAAM,GACxB,EAAE,mBAAmB,sCA0DrB"}

package/dist/filter-chips.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shared filter presentation: the removable active-filter chip row + the pure
+// helpers that summarize a filter's value and resolve its color. Used by BOTH
+// DynamicKanban and DynamicTable so the two surfaces render identical chips
+// (one component, no drift).
+import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
+import { Badge, Button } from '@asteby/metacore-ui/primitives';
+import { resolveColorCss } from '@asteby/metacore-ui/lib';
+/**
+ * Human-readable summary of a field's selected filter values for a 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.
+ */
+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('_', ' – ');
+    }
+    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 || '…'}`;
+    }
+    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}`;
+}
+/**
+ * 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.
+ */
+export 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;
+}
+/**
+ * Translates option labels through the app translator (manifest i18n keys →
+ * localized text). A raw value with no matching key falls through to itself via
+ * `defaultValue`. Pure — exported for unit tests.
+ */
+export function translateOptionLabels(options, translate) {
+    return options.map((o) => ({ ...o, label: translate(o.label) }));
+}
+/**
+ * The removable active-filter chip row shown under a board/table toolbar. Each
+ * chip: an optional value-color dot, "Campo: valor(es)" (capped + `+n`), and an
+ * X that clears that field; a trailing "Limpiar todo". Renders nothing when no
+ * field is active.
+ */
+export function FilterChipsRow({ fields, onClearAll, className, 'data-testid': testId, }) {
+    const { t } = useTranslation();
+    if (fields.length === 0)
+        return null;
+    return (_jsxs("div", { className: `flex flex-wrap items-center gap-1.5${className ? ` ${className}` : ''}`, "data-testid": testId, children: [fields.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('filters.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: onClearAll, children: t('filters.clearAll', { defaultValue: 'Limpiar todo' }) })] }));
+}

package/dist/use-dynamic-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-dynamic-filters.d.ts","sourceRoot":"","sources":["../src/use-dynamic-filters.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAgB,MAAM,wBAAwB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,4EAA4E;IAC5E,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iFAAiF;IACjF,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAA;IACpD;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACjC,uDAAuD;IACvD,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxE,kEAAkE;IAClE,iBAAiB,EAAE,MAAM,CAAA;IACzB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,GAAG,IAAI,EAC9B,IAAI,GAAE,wBAA6B,GAClC,uBAAuB,CAgSzB"}
+{"version":3,"file":"use-dynamic-filters.d.ts","sourceRoot":"","sources":["../src/use-dynamic-filters.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAgB,MAAM,wBAAwB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,4EAA4E;IAC5E,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iFAAiF;IACjF,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAA;IACpD;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACjC,uDAAuD;IACvD,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxE,kEAAkE;IAClE,iBAAiB,EAAE,MAAM,CAAA;IACzB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,GAAG,IAAI,EAC9B,IAAI,GAAE,wBAA6B,GAClC,uBAAuB,CAyTzB"}

package/dist/use-dynamic-filters.js

@@ -36,7 +36,7 @@ export function useDynamicFilters(metadata, opts = {}) {
             : model
                 ? `/data/${model}/facets`
                 : null);
-    const getFacetLoader = useFacetLoaders(facetsBase);
+    const { getFacetLoader, prefetchFacets, facetOptions } = useFacetLoaders(facetsBase);
     // Prefetch the option lists for relation/select filters (once per model). The
     // combobox needs these before the user opens it; mirrors DynamicTable's
     // metadata-init option prefetch, narrowed to the FILTER endpoints only (the
@@ -152,6 +152,9 @@ export function useDynamicFilters(metadata, opts = {}) {
                 if (loader) {
                     fType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → the popover opens with the
+                    // list already there, no "Cargando…" flash.
+                    options = facetOptions.get(f.column || f.key) ?? [];
                 }
             }
             if (fType === 'select' && options.length === 0 && !f.searchEndpoint)
@@ -217,6 +220,8 @@ export function useDynamicFilters(metadata, opts = {}) {
                 if (loader) {
                     filterType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → instant open.
+                    options = facetOptions.get(c.key) ?? [];
                 }
             }
             map.set(c.key, {
@@ -238,7 +243,26 @@ export function useDynamicFilters(metadata, opts = {}) {
         handleDynamicFilterChange,
         facetsBase,
         getFacetLoader,
+        facetOptions,
     ]);
+    // Prewarm every facet field in one burst once the configs settle, so the
+    // Sheet popover and the lane value-picker open instantly (values + counts)
+    // instead of flashing "Cargando…". Deduped inside prefetchFacets by field set.
+    const facetFieldsSig = useMemo(() => {
+        const keys = [];
+        // Key on `filterKey` (the column the loader queries), not the config map key
+        // — they differ when an explicit filter sets a distinct `column`.
+        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]);
     const searchableKeys = useMemo(() => (metadata ? getSearchableColumnKeys(metadata) : null), [metadata]);
     // Serialize to `/data/:model` query params — identical operator encoding to
     // DynamicTable.buildFilterParams (IN:/RANGE:/GTE:/LTE:/ILIKE:/plain).

package/dist/use-facet-loaders.d.ts

@@ -1,4 +1,21 @@
 import type { FilterOption } from './dynamic-columns-shim';
+export interface UseFacetLoadersResult {
+    /**
+     * Stable per-field loader → `<facetsBase>?field=&q=&limit=`. Cached per
+     * `field+query`. Null `facetsBase` → yields `undefined` (column stays text).
+     */
+    getFacetLoader: (field: string) => ((q?: string) => Promise<FilterOption[]>) | undefined;
+    /**
+     * Warms the caches for a set of facet fields in ONE parallel burst (called
+     * when metadata resolves), so a popover opens instantly with values + counts
+     * instead of showing "Cargando…". Deduped by the field set; a field whose
+     * request fails is simply omitted (it degrades to lazy/text — the rest are
+     * unaffected). Resolved options also land in `facetOptions`.
+     */
+    prefetchFacets: (fields: string[]) => void;
+    /** Prefetched options per field (empty until `prefetchFacets` resolves). */
+    facetOptions: Map<string, FilterOption[]>;
+}
 /**
  * Long-text / body columns aren't worth faceting (thousands of unique values,
  * each a paragraph). Heuristic on the metadata, not a hardcoded name list:
@@ -11,12 +28,11 @@ export declare function isLongTextColumn(c: {
     cellStyle?: string;
 }): boolean;
 /**
- * Returns `getFacetLoader(field)` — a stable per-field loader that resolves the
- * column's distinct values + counts from `<facetsBase>?field=&q=&limit=`. Loader
- * identity is memoized per field (so it doesn't churn the config memo that
- * depends on it) and results are cached per `field+query`. Both caches reset
- * when `facetsBase` changes (model switch). A null `facetsBase` returns a
- * factory that yields `undefined` — the caller keeps the column as plain text.
+ * Facet option machinery: a stable per-field lazy loader (`getFacetLoader`, with
+ * a `field+query` result cache) plus `prefetchFacets` to warm every facet
+ * field's values up front and `facetOptions` holding those prewarmed results.
+ * Loader identity is memoized per field (so it doesn't churn the config memo
+ * that depends on it). Caches reset when `facetsBase` changes (model switch).
  */
-export declare function useFacetLoaders(facetsBase: string | null): (field: string) => ((q?: string) => Promise<FilterOption[]>) | undefined;
+export declare function useFacetLoaders(facetsBase: string | null): UseFacetLoadersResult;
 //# sourceMappingURL=use-facet-loaders.d.ts.map

package/dist/use-facet-loaders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-facet-loaders.d.ts","sourceRoot":"","sources":["../src/use-facet-loaders.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAE1D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAQV;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,WAa7C,MAAM,WAVG,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,cAqCtD"}
+{"version":3,"file":"use-facet-loaders.d.ts","sourceRoot":"","sources":["../src/use-facet-loaders.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAE1D,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,cAAc,EAAE,CACd,KAAK,EAAE,MAAM,KACV,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,GAAG,SAAS,CAAA;IAC1D;;;;;;OAMG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC1C,4EAA4E;IAC5E,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;CAC1C;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAQV;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,qBAAqB,CAwFhF"}

package/dist/use-facet-loaders.js

@@ -4,7 +4,7 @@
 // per-field option loader + result cache lives here to guarantee they facet
 // identically (one board and its table sibling hit the same `/facets` endpoint
 // with the same caching).
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useApi } from './api-context';
 /**
  * Long-text / body columns aren't worth faceting (thousands of unique values,
@@ -21,22 +21,32 @@ export function isLongTextColumn(c) {
     return /^(body|description|content|notes?|comment|message|summary)$/i.test(c.key);
 }
 /**
- * Returns `getFacetLoader(field)` — a stable per-field loader that resolves the
- * column's distinct values + counts from `<facetsBase>?field=&q=&limit=`. Loader
- * identity is memoized per field (so it doesn't churn the config memo that
- * depends on it) and results are cached per `field+query`. Both caches reset
- * when `facetsBase` changes (model switch). A null `facetsBase` returns a
- * factory that yields `undefined` — the caller keeps the column as plain text.
+ * Facet option machinery: a stable per-field lazy loader (`getFacetLoader`, with
+ * a `field+query` result cache) plus `prefetchFacets` to warm every facet
+ * field's values up front and `facetOptions` holding those prewarmed results.
+ * Loader identity is memoized per field (so it doesn't churn the config memo
+ * that depends on it). Caches reset when `facetsBase` changes (model switch).
  */
 export function useFacetLoaders(facetsBase) {
     const api = useApi();
     const loaderCache = useRef(new Map());
     const resultCache = useRef(new Map());
+    const prefetchSig = useRef(null);
+    const mountedRef = useRef(true);
+    const [facetOptions, setFacetOptions] = useState(new Map());
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
     useEffect(() => {
         loaderCache.current.clear();
         resultCache.current.clear();
+        prefetchSig.current = null;
+        setFacetOptions(new Map());
     }, [facetsBase]);
-    return useCallback((field) => {
+    const getFacetLoader = useCallback((field) => {
         if (!facetsBase)
             return undefined;
         const existing = loaderCache.current.get(field);
@@ -64,4 +74,35 @@ export function useFacetLoaders(facetsBase) {
         loaderCache.current.set(field, loader);
         return loader;
     }, [api, facetsBase]);
+    const prefetchFacets = useCallback((fields) => {
+        if (!facetsBase || fields.length === 0)
+            return;
+        const sig = [...fields].sort().join('|');
+        if (prefetchSig.current === sig)
+            return;
+        prefetchSig.current = sig;
+        // One parallel burst; the loader seeds its own `${field}::` cache so the
+        // subsequent lazy open (q === '') is a cache hit. allSettled so one bad
+        // field never blocks the others.
+        void Promise.allSettled(fields.map(async (field) => {
+            const loader = getFacetLoader(field);
+            if (!loader)
+                return null;
+            const opts = await loader();
+            return { field, opts };
+        })).then((results) => {
+            if (!mountedRef.current)
+                return;
+            setFacetOptions((prev) => {
+                const next = new Map(prev);
+                for (const r of results) {
+                    if (r.status === 'fulfilled' && r.value) {
+                        next.set(r.value.field, r.value.opts);
+                    }
+                }
+                return next;
+            });
+        });
+    }, [facetsBase, getFacetLoader]);
+    return { getFacetLoader, prefetchFacets, facetOptions };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "22.0.0",
+  "version": "23.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.8.0"
+    "@asteby/metacore-ui": "^2.9.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.8.0"
+    "@asteby/metacore-ui": "2.9.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-kanban.test.tsx

@@ -39,6 +39,9 @@ import {
     applyOptimisticMove,
     selectCardColumns,
     cardMatchesLaneQuery,
+    cardMatchesLaneFunnel,
+    laneFunnelCount,
+    translateOptionLabels,
     summarizeFilterValues,
     UNASSIGNED_LANE,
     DynamicKanban,
@@ -232,6 +235,92 @@ describe('cardMatchesLaneQuery', () => {
     })
 })
 
+describe('cardMatchesLaneFunnel', () => {
+    // card 4: title "Refactor api", assignee "ana", priority "mid", stage "in_progress"
+    const card = CARDS[3]
+
+    it('matches picked select/facet values by equality (IN), not substring', () => {
+        // exact value matches
+        expect(
+            cardMatchesLaneFunnel(card, { field: 'assignee', values: ['ana'] }),
+        ).toBe(true)
+        // a substring of the value must NOT match under equality
+        expect(
+            cardMatchesLaneFunnel(card, { field: 'assignee', values: ['an'] }),
+        ).toBe(false)
+        // IN semantics: any of the picked values
+        expect(
+            cardMatchesLaneFunnel(card, {
+                field: 'assignee',
+                values: ['dani', 'ana'],
+            }),
+        ).toBe(true)
+        expect(
+            cardMatchesLaneFunnel(card, {
+                field: 'assignee',
+                values: ['dani', 'eva'],
+            }),
+        ).toBe(false)
+    })
+
+    it('matches free text by case-insensitive substring', () => {
+        expect(cardMatchesLaneFunnel(card, { field: 'title', text: 'refac' })).toBe(
+            true,
+        )
+        expect(cardMatchesLaneFunnel(card, { field: 'title', text: 'REFAC' })).toBe(
+            true,
+        )
+        expect(cardMatchesLaneFunnel(card, { field: 'title', text: 'zzz' })).toBe(
+            false,
+        )
+    })
+
+    it('passes when there is no field or no criteria', () => {
+        expect(cardMatchesLaneFunnel(card, undefined)).toBe(true)
+        expect(cardMatchesLaneFunnel(card, { field: 'assignee' })).toBe(true)
+        expect(
+            cardMatchesLaneFunnel(card, { field: 'assignee', values: [] }),
+        ).toBe(true)
+    })
+})
+
+describe('laneFunnelCount', () => {
+    it('counts picked values, else 1 for free text, else 0', () => {
+        expect(laneFunnelCount(undefined)).toBe(0)
+        expect(laneFunnelCount({})).toBe(0)
+        expect(laneFunnelCount({ values: ['a', 'b', 'c'] })).toBe(3)
+        expect(laneFunnelCount({ text: 'foo' })).toBe(1)
+        expect(laneFunnelCount({ text: '  ' })).toBe(0)
+        // picked values win over stray text
+        expect(laneFunnelCount({ values: ['a'], text: 'x' })).toBe(1)
+    })
+})
+
+describe('translateOptionLabels', () => {
+    it('runs option labels through the translator (stage i18n keys → localized)', () => {
+        const opts = [
+            { value: 'backlog', label: 'issue.stage.backlog', color: 'slate' },
+            { value: 'done', label: 'issue.stage.done', color: 'green' },
+        ]
+        const dict: Record<string, string> = {
+            'issue.stage.backlog': 'Pendiente',
+            'issue.stage.done': 'Hecho',
+        }
+        const out = translateOptionLabels(opts, (k) => dict[k] ?? k)
+        expect(out.map((o) => o.label)).toEqual(['Pendiente', 'Hecho'])
+        // value + color preserved
+        expect(out[0]).toMatchObject({ value: 'backlog', color: 'slate' })
+    })
+
+    it('leaves raw values (no matching key) untouched', () => {
+        const out = translateOptionLabels(
+            [{ value: 'acme/repo', label: 'acme/repo' }],
+            (k) => k,
+        )
+        expect(out[0].label).toBe('acme/repo')
+    })
+})
+
 describe('summarizeFilterValues', () => {
     const opts = [
         { value: 'backlog', label: 'Backlog' },
@@ -428,3 +517,55 @@ describe('DynamicKanban lane search', () => {
         expect(screen.getByText('Fix login bug')).toBeTruthy()
     })
 })
+
+// ---------------------------------------------------------------------------
+// 6. Lane funnel — for a field with options (the Stage select), the value step
+//    renders the pro multi-select combobox, NOT a raw text input.
+// ---------------------------------------------------------------------------
+
+describe('DynamicKanban lane funnel', () => {
+    it('renders the value combobox for a field that has options', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Fix login bug')
+        // open the first lane's funnel (the only filterable field is Stage → select)
+        const funnelButtons = screen.getAllByLabelText('Filtrar columna')
+        fireEvent.click(funnelButtons[0])
+        // the value step is the searchable combobox, not the old raw text box
+        expect(
+            await screen.findByPlaceholderText('Buscar valores...'),
+        ).toBeTruthy()
+        expect(screen.queryByPlaceholderText('Contiene...')).toBeNull()
+    })
+
+    it('shows a count badge on the funnel with the number of picked values', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Fix login bug')
+        fireEvent.click(screen.getAllByLabelText('Filtrar columna')[0])
+        await screen.findByPlaceholderText('Buscar valores...')
+
+        // pick two stage values from the combobox
+        const options = screen.getAllByRole('option')
+        expect(options.length).toBeGreaterThanOrEqual(2)
+        fireEvent.click(options[0])
+        fireEvent.click(options[1])
+        // apply
+        fireEvent.click(screen.getByText(/Aplicar/))
+
+        // the first lane's funnel button now carries a "2" count badge
+        await waitFor(() =>
+            expect(
+                screen.getAllByLabelText('Filtrar columna')[0].textContent,
+            ).toContain('2'),
+        )
+    })
+})

package/src/__tests__/dynamic-table-filters.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable filter parity with the kanban:
+//   - Facet PREFETCH: on metadata resolve, the table warms every facet field in
+//     one burst (`/data/<model>/facets?field=<key>`), so a text-column header
+//     filter opens instantly.
+//   - Stage-select: the group_by/stage column with no options of its own becomes
+//     a select (NOT a facet) — so it must NOT trigger a facets prewarm.
+//   - Long-text columns stay plain text (no facet, no prewarm).
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const STAGES = [
+    { key: 'backlog', label: 'issue.stage.backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'issue.stage.done', color: 'green', order: 1 },
+]
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: true, searchable: true },
+            { key: 'body', label: 'Body', type: 'text', sortable: false, filterable: true, cellStyle: 'truncate-text' },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+    }
+}
+
+function fakeApi(): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total: 0 } } })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) {
+                const f = cfg?.params?.field
+                return ok([
+                    { value: `${f}-a`, label: `${f} A`, count: 2 },
+                    { value: `${f}-b`, label: `${f} B`, count: 1 },
+                ])
+            }
+            return ok([])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function facetFields(api: ApiClient): string[] {
+    return (api.get as any).mock.calls
+        .filter((c: any[]) => String(c[0]).endsWith('/facets'))
+        .map((c: any[]) => c[1]?.params?.field)
+}
+
+describe('DynamicTable facet prefetch + stage-select', () => {
+    it('prewarms the plain text column but NOT the stage (select) or long-text columns', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" />
+            </ApiProvider>,
+        )
+        // 'title' is a facet → it gets prewarmed against the model-derived endpoint
+        await waitFor(() =>
+            expect(
+                (api.get as any).mock.calls.some(
+                    (c: any[]) =>
+                        String(c[0]) === '/data/issue/facets' &&
+                        c[1]?.params?.field === 'title',
+                ),
+            ).toBe(true),
+        )
+        const fields = facetFields(api)
+        // stage → select (from the pipeline stages), never faceted
+        expect(fields).not.toContain('stage')
+        // body → long-text, stays plain text, never faceted
+        expect(fields).not.toContain('body')
+    })
+})