@asteby/metacore-runtime-react 22.0.0 → 23.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @asteby/metacore-runtime-react
 
+## 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

@@ -50,6 +50,25 @@ export declare function summarizeFilterValues(values: string[] | undefined, opti
     label: string;
     value: string;
 }[] | undefined, maxShown?: number): string;
+/**
+ * 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 cardMatchesLaneFunnel(card: any, filter: {
+    field?: string;
+    values?: string[];
+    text?: string;
+} | undefined): boolean;
+/**
+ * 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[];
 /**
  * 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":"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"}

package/dist/dynamic-kanban.js

@@ -5,7 +5,7 @@ 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 { ColumnFilterControl, FilterValueCombobox } from '@asteby/metacore-ui/data-table';
 import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib';
 import { useApi } from './api-context';
 import { useDynamicFilters } from './use-dynamic-filters';
@@ -187,6 +187,32 @@ function chipValueColor(config) {
     const opt = config.options.find((o) => o.value === value);
     return opt?.color ? resolveColorCss(opt.color) : undefined;
 }
+/**
+ * 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 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 (filter.text?.trim()) {
+        return raw.toLowerCase().includes(filter.text.trim().toLowerCase());
+    }
+    return true;
+}
+/**
+ * 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) }));
+}
 /**
  * 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
@@ -308,11 +334,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 +386,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;
@@ -475,12 +521,8 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                             // (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 +532,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 +570,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,8 +591,12 @@ 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,
@@ -560,7 +614,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 +625,54 @@ 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()));
+    // 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);
     };
+    const clear = () => {
+        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', {
                         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" }) }) }), _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.js

@@ -462,7 +462,7 @@ 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 } = useFacetLoaders(facetsBase);
     const columnFilterConfigs = useMemo(() => {
         const map = new Map();
         if (!metadata)

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.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.8.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.8.0"
+    "@asteby/metacore-ui": "2.9.0",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",