@asteby/metacore-runtime-react 49.8.0 → 49.9.1

package/dist/option-display.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// OptionDisplay — paints the declarative option display the kernel resolves for
+// every option of a model with `option_display` (manifest v3): avatar, title on
+// up to two lines, muted subtitle, badges, and right-aligned metrics (price,
+// stock…) with tabular numbers and a toned chip («Agotado» in danger, low
+// stock in warning). The server already evaluated formats' inputs, tones,
+// dim/block — this file only formats and paints, so every picker of the model
+// (dynamic_select, the document editor's product cell, an addon screen) reads
+// the same.
+//
+// It plugs into <RecordPicker> through its existing slots (`renderItem`,
+// `renderValue`, `isItemDisabled`), never by editing the picker itself. An
+// option without `display` keeps rendering exactly as before.
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@asteby/metacore-ui/primitives';
+import { useFormatter } from './business/format';
+import { OptionThumb } from './record-picker-option';
+/** Reads a well-formed display off any option-like value (null when absent). */
+export function getOptionDisplay(option) {
+    const d = option && typeof option === 'object' ? option.display : null;
+    return d && typeof d === 'object' ? d : null;
+}
+const TONE_VARIANT = {
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+    info: 'info',
+    neutral: 'muted',
+};
+export const toneVariant = (tone) => TONE_VARIANT[tone ?? ''] ?? 'muted';
+const asNumber = (v) => {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : null;
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+};
+const RELATIVE_UNITS = [
+    ['year', 365 * 86400],
+    ['month', 30 * 86400],
+    ['week', 7 * 86400],
+    ['day', 86400],
+    ['hour', 3600],
+    ['minute', 60],
+];
+/** «hace 3 días» / «en 2 semanas» in the formatter's locale. */
+export function formatRelativeDate(input, locale, now = new Date()) {
+    if (input == null || input === '')
+        return '';
+    const d = new Date(input);
+    if (Number.isNaN(d.getTime()))
+        return String(input);
+    const secs = (d.getTime() - now.getTime()) / 1000;
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    for (const [unit, size] of RELATIVE_UNITS) {
+        if (Math.abs(secs) >= size)
+            return rtf.format(Math.round(secs / size), unit);
+    }
+    return rtf.format(0, 'minute');
+}
+/** Formats one trailing value per its declared format (org currency for money). */
+export function formatTrailingValue(item, fmt, now) {
+    const v = item.value;
+    if (v == null || v === '')
+        return '';
+    switch (item.format) {
+        case 'money':
+            return fmt.money(v, item.currency || undefined);
+        case 'number':
+            return fmt.quantity(v);
+        case 'integer': {
+            const n = asNumber(v);
+            return n == null ? String(v) : new Intl.NumberFormat(fmt.locale, { maximumFractionDigits: 0 }).format(n);
+        }
+        case 'percent': {
+            const n = asNumber(v);
+            if (n == null)
+                return String(v);
+            // 0.16 and 16 both mean 16 %.
+            const frac = Math.abs(n) <= 1 ? n : n / 100;
+            return new Intl.NumberFormat(fmt.locale, { style: 'percent', maximumFractionDigits: 1 }).format(frac);
+        }
+        case 'date':
+            return fmt.date(v);
+        case 'relative_date':
+            return formatRelativeDate(v, fmt.locale, now);
+        default:
+            return typeof v === 'number' ? fmt.quantity(v) : String(v);
+    }
+}
+/**
+ * One metric. A toned metric is a chip carrying its value and label («18
+ * disp.», or the tone's text «Agotado»); a plain one is the value in tabular
+ * numbers, with its label inline only when `showLabel` (several plain metrics
+ * side by side need it to tell «Saldo» from «Vencido»; a lone price does not).
+ */
+function TrailingMetric({ item, fmt, showLabel }) {
+    const { t } = useTranslation();
+    const label = item.label ? t(item.label, { defaultValue: item.label }) : '';
+    const value = formatTrailingValue(item, fmt);
+    if (item.tone) {
+        const text = item.text ? t(item.text, { defaultValue: item.text }) : [value, label].filter(Boolean).join(' ');
+        return (_jsx(Badge, { variant: toneVariant(item.tone), className: "font-medium tabular-nums", title: label && item.text ? `${label}: ${value}` : undefined, "data-slot": "option-metric-chip", "data-key": item.key, "data-tone": item.tone, children: text }));
+    }
+    return (_jsxs("span", { className: "flex items-baseline gap-1 whitespace-nowrap", title: label || undefined, "data-slot": "option-metric", "data-key": item.key, children: [showLabel && label ? _jsx("span", { className: "text-[11px] text-muted-foreground", children: label }) : null, _jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", "data-slot": "option-metric-value", children: item.text ? t(item.text, { defaultValue: item.text }) : value })] }));
+}
+/**
+ * The option row: avatar 32px · title (≤2 lines) + badges · muted subtitle ·
+ * metrics aligned right. `dimmed` attenuates the content, never the hover.
+ */
+export function OptionDisplayRow({ display, label, active, selected, currency, avatarSize = 32 }) {
+    const { t } = useTranslation();
+    const fmt = useFormatter({ currency });
+    const title = display.title || label || '';
+    const trailing = display.trailing ?? [];
+    const badges = display.badges ?? [];
+    const plainCount = trailing.filter((i) => !i.tone).length;
+    return (_jsxs("span", { className: "flex w-full min-w-0 items-center gap-3 py-0.5", "data-slot": "option-display", "data-tone": display.tone || undefined, "data-dimmed": display.dimmed || undefined, "data-selected": selected || undefined, children: [_jsx("span", { className: display.dimmed ? 'opacity-60 grayscale' : undefined, children: _jsx(OptionThumb, { image: display.image ?? null, name: title, size: avatarSize }) }), _jsxs("span", { className: 'flex min-w-0 flex-1 flex-col gap-0.5' + (display.dimmed ? ' opacity-60' : ''), children: [_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [_jsx("span", { className: 'line-clamp-2 min-w-0 break-words text-sm font-medium leading-snug' + (active ? ' text-accent-foreground' : ''), title: title, "data-slot": "option-display-title", children: title }), badges.map((b, i) => (_jsx(Badge, { variant: toneVariant(b.tone), className: "mt-px px-1.5 py-0 text-[10px]", "data-slot": "option-display-badge", children: t(b.text, { defaultValue: b.text }) }, i)))] }), display.subtitle ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", "data-slot": "option-display-subtitle", children: display.subtitle })) : null] }), trailing.length > 0 ? (_jsx("span", { className: "ml-auto flex shrink-0 flex-col items-end justify-center gap-1 text-right", "data-slot": "option-display-trailing", children: trailing.map((item) => (_jsx(TrailingMetric, { item: item, fmt: fmt, showLabel: plainCount > 1 }, item.key))) })) : null] }));
+}
+/**
+ * Compact summary for a picker's trigger: small avatar, title and the most
+ * relevant metric (the toned one, else the first).
+ */
+export function OptionDisplayValue({ display, label, currency }) {
+    const fmt = useFormatter({ currency });
+    const title = display.title || label || '';
+    const trailing = display.trailing ?? [];
+    const lead = trailing.find((i) => i.tone) ?? trailing[0];
+    const extra = lead && trailing.find((i) => i !== lead && !i.tone);
+    return (_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", "data-slot": "option-display-value", children: [_jsx(OptionThumb, { image: display.image ?? null, name: title, size: 20 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), extra ? (_jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatTrailingValue(extra, fmt) })) : null, lead ? _jsx(TrailingMetric, { item: lead, fmt: fmt }) : null] }));
+}
+/** Whether any of the options carries a display (switches a picker to rich rows). */
+export const hasOptionDisplays = (options) => options.some((o) => getOptionDisplay(o) !== null);

package/dist/query-batch.d.ts

@@ -48,7 +48,7 @@ export declare function resetQueryBatchCache(): void;
  */
 export declare function invalidateQueryBatchData(): void;
 export declare function optionsModelFromUrl(url: string): string | null;
-export declare function optionsBatchToken(model: string, field: string, query: string, limit: number | undefined, filter: string | undefined): string;
+export declare function optionsBatchToken(model: string, field: string, query: string, limit: number | undefined, filter: string | undefined, context?: Record<string, string>): string;
 /** Names each distinct token so the server can key the response. */
 export declare function nameBatchTokens(tokens: string[]): {
     name: string;

package/dist/query-batch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-batch.d.ts","sourceRoot":"","sources":["../src/query-batch.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,WAAW,SAAS;IACtB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAyCD,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAuB9D;AAkBD,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAa,GAAG,UAAU,GAAG,IAAI,CAsBhF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EAAE,EACb,IAAI,EAAE,OAAO,EACb,GAAG,SAAa,GACjB,IAAI,CAkBN;AAaD,wBAAgB,oBAAoB,IAAI,IAAI,CAO3C;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAM/C;AAsBD,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG9D;AAED,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,GAC3B,MAAM,CAOR;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAYjG;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,CAsB/E;AAwED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CA8BxF;AAMD;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE;;;GA2BxG"}
+{"version":3,"file":"query-batch.d.ts","sourceRoot":"","sources":["../src/query-batch.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,WAAW,SAAS;IACtB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAyCD,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAuB9D;AAkBD,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAa,GAAG,UAAU,GAAG,IAAI,CAsBhF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EAAE,EACb,IAAI,EAAE,OAAO,EACb,GAAG,SAAa,GACjB,IAAI,CAkBN;AAaD,wBAAgB,oBAAoB,IAAI,IAAI,CAO3C;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAM/C;AAsBD,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG9D;AAED,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,MAAM,CAQR;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAYjG;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,CAsB/E;AAwED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CA8BxF;AAMD;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE;;;GA2BxG"}

package/dist/query-batch.js

@@ -179,7 +179,7 @@ export function optionsModelFromUrl(url) {
     const match = url.match(/^\/options\/([A-Za-z][A-Za-z0-9_]*)$/);
     return match ? match[1] : null;
 }
-export function optionsBatchToken(model, field, query, limit, filter) {
+export function optionsBatchToken(model, field, query, limit, filter, context) {
     const params = new URLSearchParams();
     params.set('field', field);
     if (query)
@@ -188,6 +188,8 @@ export function optionsBatchToken(model, field, query, limit, filter) {
         params.set('limit', String(limit));
     if (filter)
         params.set('filter_value', filter);
+    for (const k of Object.keys(context ?? {}).sort())
+        params.set(`ctx.${k}`, context[k]);
     return `o:${model}?${params.toString()}`;
 }
 /** Names each distinct token so the server can key the response. */

package/dist/use-options-resolver.d.ts

@@ -1,4 +1,5 @@
 import { type OptionFilterRule } from './option-filter';
+import type { OptionDisplayData } from './option-display';
 export interface ResolvedOption {
     /** Canonical id (server-side primary key). */
     id: string | number;
@@ -12,6 +13,12 @@ export interface ResolvedOption {
     image?: string | null;
     color?: string | null;
     icon?: string | null;
+    /**
+     * Presentación declarativa resuelta por el kernel (manifest v3
+     * `option_display`): título, subtítulo, imagen, métricas a la derecha con
+     * tono (precio, stock…) y badges. Ausente en hosts/modelos sin display.
+     */
+    display?: OptionDisplayData | null;
     /**
      * Campos extra del payload (precio, costo, sku, tasa) que no son decoración.
      * Solo se llena cuando el option trae números o strings además de id/label.
@@ -80,6 +87,12 @@ export interface UseOptionsResolverArgs {
     optionFilter?: OptionFilterRule[];
     /** Current selection: never hidden by `optionFilter`, so its label survives. */
     keepValue?: unknown;
+    /**
+     * Picker context for the option display's contributed metrics, sent as
+     * `?ctx.<key>=<value>` (e.g. `{ warehouse_id }` of the document being
+     * edited → stock in that warehouse). Empty values are dropped.
+     */
+    context?: Record<string, string | null | undefined>;
 }
 export interface UseOptionsResolverResult {
     options: ResolvedOption[];
@@ -97,7 +110,9 @@ export interface UseOptionsResolverResult {
 export declare function invalidateOptionsCache(): void;
 /** Runs `fn` on every invalidateOptionsCache (id-label lookups drop with it). */
 export declare function onOptionsCacheInvalidated(fn: () => void): () => void;
-export declare function optionsRequestKey(scope: string, url: string, field: string, query: string, limit: number | undefined, filter: string | undefined): string;
+export declare function optionsRequestKey(scope: string, url: string, field: string, query: string, limit: number | undefined, filter: string | undefined, context?: Record<string, string>): string;
+/** Normalized picker context: string values only, empty dropped (null when none). */
+export declare function normalizeOptionsContext(context: Record<string, string | null | undefined> | undefined): Record<string, string> | undefined;
 /** Org + branch of the host session: part of every options cache key. */
 export declare function optionsScope(): string;
 export declare function useOptionsResolver(args: UseOptionsResolverArgs): UseOptionsResolverResult;

package/dist/use-options-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-options-resolver.d.ts","sourceRoot":"","sources":["../src/use-options-resolver.ts"],"names":[],"mappings":"AAcA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAG1E,MAAM,WAAW,cAAc;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACjC;AAED,MAAM,WAAW,WAAW;IACxB,oEAAoE;IACpE,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACnC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,sBAAsB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACjC,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAA;CACtB;AAuBD;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAK7C;AAID,iFAAiF;AACjF,wBAAgB,yBAAyB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAGpE;AAED,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,GAC3B,MAAM,CAER;AAED,yEAAyE;AACzE,wBAAgB,YAAY,IAAI,MAAM,CAWrC;AAiBD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,wBAAwB,CAuKzF;AASD,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,CAqBtD"}
+{"version":3,"file":"use-options-resolver.d.ts","sourceRoot":"","sources":["../src/use-options-resolver.ts"],"names":[],"mappings":"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"}

package/dist/use-options-resolver.js

@@ -49,8 +49,34 @@ export function onOptionsCacheInvalidated(fn) {
     invalidationListeners.add(fn);
     return () => invalidationListeners.delete(fn);
 }
-export function optionsRequestKey(scope, url, field, query, limit, filter) {
-    return [scope, url, field, query, String(limit ?? ''), filter ?? ''].join('\n');
+export function optionsRequestKey(scope, url, field, query, limit, filter, context) {
+    const parts = [scope, url, field, query, String(limit ?? ''), filter ?? ''];
+    const ctx = contextKey(context);
+    if (ctx)
+        parts.push(ctx);
+    return parts.join('\n');
+}
+/** Normalized picker context: string values only, empty dropped (null when none). */
+export function normalizeOptionsContext(context) {
+    if (!context)
+        return undefined;
+    const out = {};
+    for (const [k, v] of Object.entries(context)) {
+        if (v == null)
+            continue;
+        const s = String(v).trim();
+        if (s)
+            out[k] = s;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+function contextKey(context) {
+    if (!context)
+        return '';
+    return Object.keys(context)
+        .sort()
+        .map((k) => `${k}=${context[k]}`)
+        .join('&');
 }
 /** Org + branch of the host session: part of every options cache key. */
 export function optionsScope() {
@@ -83,6 +109,8 @@ function readOptionsEnvelope(body) {
 }
 export function useOptionsResolver(args) {
     const { modelKey, fieldKey, ref, query, limit, enabled = true, endpoint, filterValue, optionFilter, keepValue, } = args;
+    const context = normalizeOptionsContext(args.context);
+    const ctxSig = contextKey(context);
     const api = useApi();
     const [options, setOptions] = useState([]);
     const [meta, setMeta] = useState(null);
@@ -123,7 +151,7 @@ export function useOptionsResolver(args) {
             setError(null);
             return;
         }
-        const key = optionsRequestKey(optionsScope(), url, effectiveField, query ?? '', limit, filterValue);
+        const key = optionsRequestKey(optionsScope(), url, effectiveField, query ?? '', limit, filterValue, context);
         if (refreshKey !== seenRefresh.current) {
             seenRefresh.current = refreshKey;
             optionsEpoch.set(key, (optionsEpoch.get(key) ?? 0) + 1);
@@ -151,11 +179,13 @@ export function useOptionsResolver(args) {
                 params.limit = limit;
             if (filterValue)
                 params.filter_value = filterValue;
+            for (const [k, v] of Object.entries(context ?? {}))
+                params[`ctx.${k}`] = v;
             const model = optionsModelFromUrl(url);
             pending = (async () => {
                 if (model) {
                     try {
-                        const part = await loadQueryPart(api, optionsBatchToken(model, effectiveField, query ?? '', limit, filterValue));
+                        const part = await loadQueryPart(api, optionsBatchToken(model, effectiveField, query ?? '', limit, filterValue, context));
                         if (!part.success) {
                             throw new Error(part.message || 'options resolver: unsuccessful response');
                         }
@@ -214,7 +244,8 @@ export function useOptionsResolver(args) {
         return () => {
             cancelled = true;
         };
-    }, [api, url, effectiveField, query, limit, enabled, filterValue, refreshKey]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- context is keyed by ctxSig
+    }, [api, url, effectiveField, query, limit, enabled, filterValue, refreshKey, ctxSig]);
     // Rules arrive as a fresh array each render; key on their content.
     const filterKey = optionFilter && optionFilter.length > 0 ? JSON.stringify(optionFilter) : '';
     const visibleOptions = useMemo(() => (filterKey ? applyOptionFilter(options, optionFilter ?? [], keepValue) : options), 
@@ -233,7 +264,7 @@ export function useOptionsResolver(args) {
  * id/value and label/name fields for legacy parity — we accept either
  * and surface a stable shape downstream.
  */
-const OPTION_KNOWN_KEYS = new Set(['id', 'value', 'label', 'name', 'description', 'image', 'color', 'icon']);
+const OPTION_KNOWN_KEYS = new Set(['id', 'value', 'label', 'name', 'description', 'image', 'color', 'icon', 'display']);
 export function projectOption(raw) {
     const id = raw?.id ?? raw?.value ?? '';
     const label = String(raw?.label ?? raw?.name ?? id ?? '');
@@ -255,6 +286,7 @@ export function projectOption(raw) {
         image: raw?.image ?? null,
         color: raw?.color ?? null,
         icon: raw?.icon ?? null,
+        ...(raw?.display && typeof raw.display === 'object' ? { display: raw.display } : {}),
         ...(Object.keys(meta).length > 0 ? { meta } : {}),
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "49.8.0",
+  "version": "49.9.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/document-editor-inline-selects.test.tsx

@@ -47,17 +47,17 @@ describe('DocumentLinesGrid — select de producto en la celda', () => {
         const input = screen.getByRole('combobox', { name: 'Buscar producto' })
         const td = input.closest('td')!
         expect(td).toBeTruthy()
-        // No es una barra a todo lo ancho: el renglón vacío conserva las celdas
-        // de «Importe» y acciones; el buscador usa el ancho de las columnas que
-        // ese renglón aún no llena (cantidad, precio…), así no se corta.
+        // Ocupa SOLO su columna: no invade Cant./Precio/Desc.; el renglón vacío
+        // tiene una celda por columna del encabezado.
         const row = td.closest('tr')!
         expect(row.getAttribute('data-slot')).toBe('line-draft-row')
         const columns = document.querySelectorAll('[data-slot="line-items-editor"] thead th').length
-        expect(td.colSpan).toBe(columns - 2)
-        expect(row.children.length).toBe(3)
-        // Placeholder corto que cabe; el detalle va como ayuda.
+        expect(td.colSpan).toBe(1)
+        expect(row.children.length).toBe(columns)
+        expect(row.firstElementChild).toBe(td)
+        // Placeholder corto que cabe, sin tooltip nativo del navegador.
         expect(input.getAttribute('placeholder')).toBe('Buscar producto…')
-        expect(input.getAttribute('title')).toMatch(/SKU o código de barras/)
+        expect(input.hasAttribute('title')).toBe(false)
     })
 
     it('la lista sale en un portal fuera del contenedor con overflow y Enter elige y pasa a «Cant.»', async () => {

package/src/__tests__/option-display.test.tsx

@@ -0,0 +1,241 @@
+// @vitest-environment happy-dom
+//
+// Declarative option display (kernel `option_display`): the picker paints the
+// row the server resolved — avatar, title, subtitle, toned metrics (price,
+// stock «Agotado»), badges — and keeps the plain row when there is none.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('react-i18next', () => {
+    const value = { t: (k: string, o?: Record<string, any>) => o?.defaultValue ?? k, i18n: { language: 'es' } }
+    return { useTranslation: () => value }
+})
+
+import { DynamicSelectField } from '../dynamic-select-field'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { CurrencyContext } from '../org-runtime-context'
+import { invalidateOptionsCache, projectOption, optionsRequestKey } from '../use-options-resolver'
+import { optionsBatchToken } from '../query-batch'
+import {
+    OptionDisplayRow,
+    formatRelativeDate,
+    formatTrailingValue,
+    getOptionDisplay,
+    toneVariant,
+    type OptionDisplayData,
+} from '../option-display'
+import { createFormatter } from '../business/format'
+import { withOptionDisplays } from '../business/product-display'
+import { ProductHitRow } from '../business/product-options'
+import type { ActionFieldDef } from '../types'
+
+afterEach(() => {
+    cleanup()
+    invalidateOptionsCache()
+})
+
+const tire: OptionDisplayData = {
+    title: 'Llanta Michelin Primacy 4 205/55R16 91V',
+    subtitle: 'MIC-2055516 · 205/55R16',
+    image: null,
+    trailing: [
+        { key: 'price', label: 'Precio', value: 1899.5, format: 'money' },
+        { key: 'stock', label: 'Disp.', value: 8, format: 'number', tone: 'success' },
+    ],
+    badges: [],
+    tone: 'success',
+}
+const oil: OptionDisplayData = {
+    title: 'Aceite 5W30',
+    subtitle: 'ACE-530',
+    trailing: [
+        { key: 'price', label: 'Precio', value: 250, format: 'money' },
+        { key: 'stock', label: 'Disp.', value: 0, format: 'number', tone: 'danger', text: 'Agotado' },
+    ],
+    badges: [{ text: 'Servicio', tone: 'info' }],
+    tone: 'danger',
+    dimmed: true,
+}
+
+describe('formatTrailingValue', () => {
+    const fmt = createFormatter({ currency: 'MXN' })
+    it('money with the org currency (or the item own)', () => {
+        expect(formatTrailingValue({ key: 'p', value: 1899.5, format: 'money' }, fmt)).toBe('$1,899.50')
+        expect(formatTrailingValue({ key: 'p', value: 10, format: 'money', currency: 'USD' }, fmt)).toBe('$10.00')
+    })
+    it('number, integer, percent, text', () => {
+        expect(formatTrailingValue({ key: 'n', value: 1234.5, format: 'number' }, fmt)).toBe('1,234.5')
+        expect(formatTrailingValue({ key: 'n', value: '7.6', format: 'integer' }, fmt)).toBe('8')
+        expect(formatTrailingValue({ key: 'n', value: 0.16, format: 'percent' }, fmt)).toBe('16%')
+        expect(formatTrailingValue({ key: 'n', value: 16, format: 'percent' }, fmt)).toBe('16%')
+        expect(formatTrailingValue({ key: 'n', value: 'ACEPTADA', format: 'text' }, fmt)).toBe('ACEPTADA')
+        expect(formatTrailingValue({ key: 'n', value: null, format: 'money' }, fmt)).toBe('')
+    })
+    it('relative dates', () => {
+        const now = new Date('2026-10-07T12:00:00Z')
+        expect(formatRelativeDate('2026-10-04T12:00:00Z', 'es-MX', now)).toBe('hace 3 días')
+        expect(formatRelativeDate('2026-10-21T12:00:00Z', 'es-MX', now)).toBe('dentro de 2 semanas')
+    })
+    it('tone → badge variant', () => {
+        expect(toneVariant('danger')).toBe('danger')
+        expect(toneVariant('neutral')).toBe('muted')
+        expect(toneVariant(undefined)).toBe('muted')
+    })
+})
+
+describe('OptionDisplayRow', () => {
+    it('paints title, subtitle, metrics aligned with tabular numbers and the toned chip', () => {
+        render(
+            <CurrencyContext.Provider value="MXN">
+                <OptionDisplayRow display={oil} />
+            </CurrencyContext.Provider>,
+        )
+        expect(screen.getByText('Aceite 5W30')).toBeTruthy()
+        expect(screen.getByText('ACE-530')).toBeTruthy()
+        expect(screen.getByText('$250.00').className).toContain('tabular-nums')
+        const chip = screen.getByText('Agotado')
+        expect(chip.getAttribute('data-tone')).toBe('danger')
+        expect(screen.getByText('Servicio')).toBeTruthy()
+        const row = document.querySelector('[data-slot="option-display"]')!
+        expect(row.getAttribute('data-dimmed')).toBe('true')
+        expect(document.querySelectorAll('[data-slot="option-metric"]')).toHaveLength(1)
+        expect(document.querySelectorAll('[data-slot="option-metric-chip"]')).toHaveLength(1)
+        // Title clamps to two lines instead of truncating to one.
+        expect(document.querySelector('[data-slot="option-display-title"]')!.className).toContain('line-clamp-2')
+    })
+})
+
+describe('options wire: display + context', () => {
+    it('projectOption keeps display and leaves it out of meta', () => {
+        const o = projectOption({ id: 'p1', label: 'Llanta', display: tire, sku: 'X' })
+        expect(getOptionDisplay(o)).toEqual(tire)
+        expect(o.meta).toEqual({ sku: 'X' })
+        expect(getOptionDisplay(projectOption({ id: 'p2', label: 'Plain' }))).toBeNull()
+    })
+    it('context is part of the cache key and the batch token', () => {
+        const a = optionsRequestKey('s', '/options/p', 'id', '', 20, undefined, { warehouse_id: 'W1' })
+        const b = optionsRequestKey('s', '/options/p', 'id', '', 20, undefined, { warehouse_id: 'W2' })
+        expect(a).not.toBe(b)
+        expect(optionsRequestKey('s', '/options/p', 'id', '', 20, undefined)).toBe(['s', '/options/p', 'id', '', '20', ''].join('\n'))
+        expect(optionsBatchToken('products.Product', 'id', 'll', 20, undefined, { warehouse_id: 'W1' })).toBe(
+            'o:products.Product?field=id&q=ll&limit=20&ctx.warehouse_id=W1',
+        )
+    })
+})
+
+function host(rows: unknown[]) {
+    const get = vi.fn(async (_url: string, config?: { params?: Record<string, unknown> }) => {
+        const ids = config?.params?.ids
+        const data = typeof ids === 'string' ? rows.filter((r: any) => ids.split(',').includes(r.id)) : rows
+        return { data: { success: true, data, meta: { type: 'dynamic' } } }
+    })
+    const api = { get, post: vi.fn(async () => ({ data: {} })), put: vi.fn(), delete: vi.fn() } as unknown as ApiClient
+    return { api, get }
+}
+
+const product: ActionFieldDef = { key: 'product_id', label: 'Producto', type: 'dynamic_select', ref: 'products.Product' }
+
+describe('DynamicSelectField with option_display', () => {
+    it('lists rich rows, sends the picker context and summarizes the selection in the trigger', async () => {
+        const h = host([
+            { id: 'p1', value: 'p1', label: 'Llanta', display: tire },
+            { id: 'p2', value: 'p2', label: 'Aceite', display: oil },
+        ])
+        const onChange = vi.fn()
+        render(
+            <ApiProvider client={h.api}>
+                <DynamicSelectField field={product} value="" onChange={onChange} optionsContext={{ warehouse_id: 'W1', branch_id: '' }} />
+            </ApiProvider>,
+        )
+        await act(async () => {
+            ;(screen.getByRole('combobox') as HTMLButtonElement).click()
+        })
+        await screen.findByText('Llanta Michelin Primacy 4 205/55R16 91V')
+        const params = h.get.mock.calls[0][1]?.params as Record<string, unknown>
+        expect(params['ctx.warehouse_id']).toBe('W1')
+        expect('ctx.branch_id' in params).toBe(false)
+        expect(screen.getByText('Agotado')).toBeTruthy()
+        // «Agotado» is dimmed but still selectable (not blocked).
+        const options = screen.getAllByRole('option')
+        expect(options[1].getAttribute('aria-disabled')).toBeNull()
+        await act(async () => {
+            options[1].click()
+        })
+        expect(onChange).toHaveBeenCalledWith('p2')
+    })
+
+    it('a blocked option cannot be picked', async () => {
+        const h = host([{ id: 'p3', value: 'p3', label: 'Bloqueado', display: { ...oil, title: 'Bloqueado', blocked: true } }])
+        const onChange = vi.fn()
+        render(
+            <ApiProvider client={h.api}>
+                <DynamicSelectField field={product} value="" onChange={onChange} />
+            </ApiProvider>,
+        )
+        await act(async () => {
+            ;(screen.getByRole('combobox') as HTMLButtonElement).click()
+        })
+        const opt = (await screen.findByText('Bloqueado')).closest('[role="option"]') as HTMLElement
+        expect(opt.getAttribute('aria-disabled')).toBe('true')
+        await act(async () => {
+            opt.click()
+        })
+        expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('a held value shows the compact summary (title + toned metric)', async () => {
+        const h = host([{ id: 'p2', value: 'p2', label: 'Aceite', display: oil }])
+        render(
+            <ApiProvider client={h.api}>
+                <DynamicSelectField field={product} value="p2" onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(document.querySelector('[data-slot="option-display-value"]')).toBeTruthy())
+        expect(screen.getByText('Aceite 5W30')).toBeTruthy()
+        expect(screen.getByText('Agotado')).toBeTruthy()
+    })
+
+    it('without display the plain row stays', async () => {
+        const h = host([{ id: 'b1', value: 'b1', label: 'Michelin' }])
+        render(
+            <ApiProvider client={h.api}>
+                <DynamicSelectField field={{ ...product, ref: 'Brand' }} value="" onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        await act(async () => {
+            ;(screen.getByRole('combobox') as HTMLButtonElement).click()
+        })
+        await screen.findByText('Michelin')
+        expect(document.querySelector('[data-slot="option-display"]')).toBeNull()
+    })
+})
+
+describe('withOptionDisplays (product line search)', () => {
+    const search = vi.fn(async () => [
+        { id: 'P1', name: 'Llanta', price: 1899.5 },
+        { id: 'p2', name: 'Aceite', price: 250 },
+    ])
+    it('one ids lookup with the context, displays merged by id (case-insensitive)', async () => {
+        const h = host([{ id: 'p1', display: tire }, { id: 'p2', display: oil }])
+        const wrapped = withOptionDisplays(search, h.api as any, { model: 'products.Product', context: { warehouse_id: 'W1', branch_id: null } })
+        const out = await wrapped({ kind: 'text', raw: 'a', text: 'a' } as any, new AbortController().signal)
+        expect(h.get).toHaveBeenCalledTimes(1)
+        expect(h.get.mock.calls[0][0]).toBe('/options/products.Product')
+        expect(h.get.mock.calls[0][1]?.params).toEqual({ field: 'id', ids: 'P1,p2', 'ctx.warehouse_id': 'W1' })
+        expect(out[1].display).toEqual(oil)
+        expect(out[0].price).toBe(1899.5)
+    })
+    it('a failing lookup returns the results untouched', async () => {
+        const api = { get: vi.fn(async () => Promise.reject(new Error('501'))) }
+        const out = await withOptionDisplays(search, api as any, { model: 'products.Product' })({} as any, new AbortController().signal)
+        expect(out.map((r) => r.display)).toEqual([undefined, undefined])
+    })
+    it('ProductHitRow paints the display when the product carries one', () => {
+        render(<ProductHitRow hit={{ product: { id: 'p2', name: 'Aceite', display: oil } }} currency="MXN" />)
+        expect(screen.getByText('Agotado')).toBeTruthy()
+        cleanup()
+        render(<ProductHitRow hit={{ product: { id: 'p2', name: 'Aceite plano', sku: 'ACE' } }} currency="MXN" />)
+        expect(screen.getByText('Aceite plano')).toBeTruthy()
+        expect(document.querySelector('[data-slot="option-display"]')).toBeNull()
+    })
+})

package/src/business/document-editor.tsx

@@ -30,6 +30,7 @@ import { DocumentLinesGrid, type DocumentLinesGridProps, type LineItemsColumn }
 import { computeTotals, serializeLineItems, taxBreakdown, type LineItem } from './line-items'
 import { roundMoney, toAmount, useFormatter } from './format'
 import { catalogRecordToProduct, createCatalogProductSearch } from './catalog-product-search'
+import { withOptionDisplays } from './product-display'
 import type { ProductResult } from './product-search'
 import { requestRecordCreate, requestRecordEdit, withSearchPrefill } from '../record-picker-actions'
 import {
@@ -183,9 +184,17 @@ export function DocumentEditor({
     const relCache = useRef(new Map<string, Promise<any[]>>())
 
     const taxRate = defaultTaxRate ?? orgTaxRate
+    // The header's warehouse (when the document type declares one) scopes the
+    // stock the catalog's option_display shows in the product rows.
+    const headerWarehouse = typeof header.warehouse_id === 'string' ? header.warehouse_id : ''
     const search = useMemo(
-        () => searchProducts ?? createCatalogProductSearch(api, { model: productModel, defaultTaxRate: taxRate }),
-        [searchProducts, api, productModel, taxRate],
+        () =>
+            withOptionDisplays(
+                searchProducts ?? createCatalogProductSearch(api, { model: productModel, defaultTaxRate: taxRate }),
+                api,
+                { model: productModel ?? 'products.Product', context: { warehouse_id: headerWarehouse } },
+            ),
+        [searchProducts, api, productModel, taxRate, headerWarehouse],
     )
 
     const isInstalled = useCallback((k?: string) => !k || !installed || installed.addons.has(k), [installed])

package/src/business/index.ts

@@ -22,6 +22,7 @@ export * from './vehicle-picker'
 export * from './relate-documents'
 export * from './print-send-dialog'
 export * from './catalog-product-search'
+export * from './product-display'
 export * from './document-editor-model'
 export * from './document-editor-panels'
 export * from './payment-allocator'