@asteby/metacore-runtime-react 21.1.0 → 23.0.0

package/dist/use-dynamic-filters.js

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useApi } from './api-context';
 import { DATE_CELL_TYPES } from './dynamic-columns';
 import { getSearchableColumnKeys } from './column-visibility';
+import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders';
 /**
  * Reads the model's filter metadata and returns the live filter state + the
  * serialized request params. Pure of any view concern — DynamicTable adds its
@@ -21,11 +22,21 @@ import { getSearchableColumnKeys } from './column-visibility';
  * straight onto its single-page fetch.
  */
 export function useDynamicFilters(metadata, opts = {}) {
-    const { defaultFilters } = opts;
+    const { defaultFilters, model, endpoint, facetsEndpoint } = opts;
     const api = useApi();
     const [dynamicFilters, setDynamicFilters] = useState({});
     const [globalFilter, setGlobalFilter] = useState('');
     const [filterOptionsMap, setFilterOptionsMap] = useState(new Map());
+    // Where a `facet` filter loads its distinct values from. Explicit override
+    // wins; otherwise `<endpoint>/facets` (same derivation as the aggregate
+    // endpoint), falling back to the model. Null → text filters stay plain.
+    const facetsBase = facetsEndpoint ??
+        (endpoint
+            ? `${endpoint}/facets`
+            : model
+                ? `/data/${model}/facets`
+                : null);
+    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
@@ -100,8 +111,17 @@ export function useDynamicFilters(metadata, opts = {}) {
         const map = new Map();
         if (!metadata)
             return map;
+        const stages = metadata.stages ?? [];
+        const groupBy = metadata.group_by;
+        // Stage options derived once from the pipeline machine, reused wherever a
+        // stage column has no inline options of its own (A).
+        const stageOptions = stages.map((s) => ({
+            label: s.label,
+            value: s.key,
+            color: s.color,
+        }));
         for (const f of metadata.filters ?? []) {
-            const fType = f.type;
+            let fType = f.type;
             let options = [];
             if (f.options && f.options.length > 0) {
                 options = f.options.map((o) => ({
@@ -114,6 +134,29 @@ export function useDynamicFilters(metadata, opts = {}) {
             if (f.searchEndpoint && filterOptionsMap.has(f.searchEndpoint)) {
                 options = filterOptionsMap.get(f.searchEndpoint) || [];
             }
+            // (A) Stage column with no options of its own → project the pipeline
+            // stages (with their colors) into a real select instead of leaving it as
+            // a text box.
+            if (options.length === 0 &&
+                !f.searchEndpoint &&
+                (f.column || f.key) === groupBy &&
+                stageOptions.length > 0) {
+                fType = 'select';
+                options = stageOptions;
+            }
+            // (B) A plain text filter becomes a facet value-picker when a facets
+            // endpoint is available.
+            let loadOptions;
+            if (fType === 'text' && facetsBase) {
+                const loader = getFacetLoader(f.column || f.key);
+                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)
                 continue;
             map.set(f.key, {
@@ -124,6 +167,7 @@ export function useDynamicFilters(metadata, opts = {}) {
                 onFilterChange: handleDynamicFilterChange,
                 loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
                 searchEndpoint: f.searchEndpoint,
+                loadOptions,
             });
         }
         for (const c of metadata.columns ?? []) {
@@ -132,8 +176,17 @@ export function useDynamicFilters(metadata, opts = {}) {
             const hasStaticOptions = (c.options?.length ?? 0) > 0;
             const hasEndpoint = !!c.searchEndpoint;
             const isRelation = !!c.ref || c.filterType === 'dynamic_select';
+            // (A) A stage column with no options of its own inherits the pipeline's
+            // stages — so "Stage" becomes a colored select, not a text box.
+            const isStageColumn = c.key === groupBy &&
+                !hasStaticOptions &&
+                !hasEndpoint &&
+                !c.filterType &&
+                stageOptions.length > 0;
             let filterType;
-            if (c.filterType)
+            if (isStageColumn)
+                filterType = 'select';
+            else if (c.filterType)
                 filterType = c.filterType;
             else if (isRelation && hasEndpoint)
                 filterType = 'dynamic_select';
@@ -147,7 +200,7 @@ export function useDynamicFilters(metadata, opts = {}) {
                 filterType = 'date_range';
             else
                 filterType = 'text';
-            const options = hasStaticOptions
+            let options = hasStaticOptions
                 ? c.options.map((o) => ({
                     label: o.label,
                     value: String(o.value),
@@ -157,6 +210,20 @@ export function useDynamicFilters(metadata, opts = {}) {
                 : hasEndpoint && filterOptionsMap.has(c.searchEndpoint)
                     ? filterOptionsMap.get(c.searchEndpoint) || []
                     : [];
+            if (isStageColumn)
+                options = stageOptions;
+            // (B) Upgrade a plain text filter to a facet value-picker (unless it's a
+            // long-text/body column — too many unique values to enumerate).
+            let loadOptions;
+            if (filterType === 'text' && facetsBase && !isLongTextColumn(c)) {
+                const loader = getFacetLoader(c.key);
+                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,
@@ -165,10 +232,37 @@ export function useDynamicFilters(metadata, opts = {}) {
                 onFilterChange: handleDynamicFilterChange,
                 loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint),
                 searchEndpoint: c.searchEndpoint,
+                loadOptions,
             });
         }
         return map;
-    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange]);
+    }, [
+        metadata,
+        filterOptionsMap,
+        dynamicFilters,
+        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

@@ -0,0 +1,38 @@
+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:
+ * a truncate-text/widget cell or a json/long-text SQL type are the strong
+ * signals; the name pattern is only a last-resort fallback.
+ */
+export declare function isLongTextColumn(c: {
+    key: string;
+    type?: string;
+    cellStyle?: string;
+}): boolean;
+/**
+ * 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): UseFacetLoadersResult;
+//# sourceMappingURL=use-facet-loaders.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,108 @@
+// useFacetLoaders — the shared machinery that turns a plain text filter into a
+// `facet` value-picker. Both DynamicKanban (via useDynamicFilters) and
+// DynamicTable derive their filter configs independently, so the lazy
+// 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, useState } from 'react';
+import { useApi } from './api-context';
+/**
+ * Long-text / body columns aren't worth faceting (thousands of unique values,
+ * each a paragraph). Heuristic on the metadata, not a hardcoded name list:
+ * a truncate-text/widget cell or a json/long-text SQL type are the strong
+ * signals; the name pattern is only a last-resort fallback.
+ */
+export function isLongTextColumn(c) {
+    if (c.cellStyle === 'truncate-text' || c.cellStyle === 'widget')
+        return true;
+    const t = (c.type || '').toLowerCase();
+    if (t === 'json' || t === 'long_text' || t === 'text_long' || t === 'widget')
+        return true;
+    return /^(body|description|content|notes?|comment|message|summary)$/i.test(c.key);
+}
+/**
+ * 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]);
+    const getFacetLoader = useCallback((field) => {
+        if (!facetsBase)
+            return undefined;
+        const existing = loaderCache.current.get(field);
+        if (existing)
+            return existing;
+        const loader = async (q) => {
+            const term = q?.trim() || '';
+            const cacheKey = `${field}::${term}`;
+            const cached = resultCache.current.get(cacheKey);
+            if (cached)
+                return cached;
+            const res = await api.get(facetsBase, {
+                params: { field, q: term || undefined, limit: 50 },
+            });
+            const body = res.data;
+            const rows = body?.success ? body.data || [] : [];
+            const opts = rows.map((r) => ({
+                value: String(r.value ?? ''),
+                label: String(r.label ?? r.value ?? ''),
+                count: typeof r.count === 'number' ? r.count : undefined,
+            }));
+            resultCache.current.set(cacheKey, opts);
+            return opts;
+        };
+        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": "21.1.0",
+  "version": "23.0.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.7.0"
+    "@asteby/metacore-ui": "^2.9.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.7.0"
+    "@asteby/metacore-ui": "2.9.0",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

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

@@ -38,6 +38,10 @@ import {
     isTransitionAllowed,
     applyOptimisticMove,
     selectCardColumns,
+    cardMatchesLaneQuery,
+    cardMatchesLaneFunnel,
+    translateOptionLabels,
+    summarizeFilterValues,
     UNASSIGNED_LANE,
     DynamicKanban,
 } from '../dynamic-kanban'
@@ -208,6 +212,128 @@ describe('selectCardColumns', () => {
     })
 })
 
+describe('cardMatchesLaneQuery', () => {
+    const cols = [
+        { key: 'title', label: 'Title', type: 'text', sortable: false, filterable: false },
+        { key: 'assignee', label: 'Assignee', type: 'text', sortable: false, filterable: false },
+    ] as any
+
+    it('matches on the title (case-insensitive)', () => {
+        expect(cardMatchesLaneQuery(CARDS[0], cols, 'LOGIN')).toBe(true)
+        expect(cardMatchesLaneQuery(CARDS[0], cols, 'dark')).toBe(false)
+    })
+
+    it('matches on any visible field value, not just the title', () => {
+        // card 1: title "Fix login bug", assignee "ana"
+        expect(cardMatchesLaneQuery(CARDS[0], cols, 'ana')).toBe(true)
+    })
+
+    it('an empty query matches everything', () => {
+        expect(cardMatchesLaneQuery(CARDS[0], cols, '')).toBe(true)
+        expect(cardMatchesLaneQuery(CARDS[0], cols, '   ')).toBe(true)
+    })
+})
+
+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('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' },
+        { value: 'done', label: 'Done' },
+        { value: 'review', label: 'Review' },
+    ]
+    it('resolves a single value to its option label', () => {
+        expect(summarizeFilterValues(['done'], opts)).toBe('Done')
+    })
+    it('unwraps IN: and caps at 2 with a +n overflow', () => {
+        expect(summarizeFilterValues(['IN:backlog,done,review'], opts)).toBe(
+            'Backlog, Done +1',
+        )
+    })
+    it('renders a free-text ILIKE: match quoted', () => {
+        expect(summarizeFilterValues(['ILIKE:urgent'], opts)).toBe('"urgent"')
+    })
+    it('renders a numeric GTE/LTE range', () => {
+        expect(summarizeFilterValues(['GTE:10', 'LTE:20'], opts)).toBe('10 – 20')
+    })
+    it('is empty for no selection', () => {
+        expect(summarizeFilterValues([], opts)).toBe('')
+        expect(summarizeFilterValues(undefined, opts)).toBe('')
+    })
+})
+
 // ---------------------------------------------------------------------------
 // 2. Render smoke + 3. optimistic PUT contract
 // ---------------------------------------------------------------------------
@@ -332,3 +458,74 @@ describe('DynamicKanban filter bar', () => {
         )
     })
 })
+
+// ---------------------------------------------------------------------------
+// 5. Per-lane search — the inline lane header search narrows ONLY that lane's
+//    already-fetched cards, client-side, by title + field values.
+// ---------------------------------------------------------------------------
+
+describe('DynamicKanban lane search', () => {
+    it('filters a single lane by card title, leaving the card set narrowed', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // all backlog cards present up front
+        expect(await screen.findByText('Fix login bug')).toBeTruthy()
+        expect(screen.getByText('Dark mode')).toBeTruthy()
+
+        // open the first lane's (backlog) inline search and type
+        const searchButtons = screen.getAllByLabelText('Buscar en la columna')
+        fireEvent.click(searchButtons[0])
+        const input = await screen.findByPlaceholderText('Buscar tarjetas...')
+        fireEvent.change(input, { target: { value: 'dark' } })
+
+        // backlog now shows only "Dark mode"; the other backlog cards are hidden
+        await waitFor(() => expect(screen.queryByText('Fix login bug')).toBeNull())
+        expect(screen.getByText('Dark mode')).toBeTruthy()
+    })
+
+    it('matches on a field value, not only the title', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        expect(await screen.findByText('Fix login bug')).toBeTruthy()
+        const searchButtons = screen.getAllByLabelText('Buscar en la columna')
+        fireEvent.click(searchButtons[0])
+        const input = await screen.findByPlaceholderText('Buscar tarjetas...')
+        // card 1 (backlog) has assignee "ana"; card 2/3 do not.
+        fireEvent.change(input, { target: { value: 'ana' } })
+        await waitFor(() => expect(screen.queryByText('Dark mode')).toBeNull())
+        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()
+    })
+})