@asteby/metacore-runtime-react 49.5.0 → 49.7.0

package/dist/dynamic-select-field.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // DynamicSelectField — async, searchable single-select for declarative forms.
+// A configuration of the shared <RecordPicker> (record-picker.tsx).
 //
 // This is the declarative answer to "I don't want to type a raw FK UUID".
 // Instead of a plain <select> that dumps every option (RefSelect) or a free
@@ -18,135 +19,86 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   1. field.ref          → /options/<ref>?field=id        (canonical, preferred)
 //   2. field.searchEndpoint→ used verbatim as the options endpoint (escape hatch)
 //
-// Edit-mode caveat: resolving an EXISTING value's label requires the id to be
-// in a fetched page (we match by id against loaded options, else show the raw
-// value). A dedicated `?ids=` lookup is a follow-up; create flows — the common
-// case — start empty and never hit this.
+// Edit mode: an EXISTING value is labelled from (in order) the option the user
+// just picked, the loaded page, the caller's `seedOption`, and otherwise one
+// `?ids=` lookup (useResolveOptionIds — batched and shared with every picker of
+// the same ref on screen). While it resolves the trigger reads "Cargando…",
+// never the raw id; an id that no longer exists reads "(registro eliminado)".
 import { useEffect, useRef, useState } from 'react';
 import { getOptionFilter } from './option-filter';
 import { useTranslation } from 'react-i18next';
-import { Badge, Button, Command, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, InitialsAvatar, } from '@asteby/metacore-ui/primitives';
-import { Check, ChevronsUpDown, Loader2, ScanLine } from 'lucide-react';
-import { resolveColorCss } from '@asteby/metacore-ui/lib';
+import { Badge, Button } from '@asteby/metacore-ui/primitives';
+import { ScanLine } from 'lucide-react';
 import { BarcodeScanner } from './barcode-scanner';
-import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions';
-import { DynamicIcon, isLucideIconName } from './dynamic-icon';
-import { useDebouncedValue } from './use-debounced-value';
+import { RecordPicker } from './record-picker';
+import { OptionLead } from './record-picker-option';
+import { recordLabel, requestRecordCreate, requestRecordEdit, withSearchPrefill } from './record-picker-actions';
 import { useOptionsResolver } from './use-options-resolver';
+import { useResolveOptionIds } from './use-option-ids';
+import { useDebouncedValue } from './use-debounced-value';
 import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema';
+export { OptionLead, OptionThumb } from './record-picker-option';
 /**
  * Default hint shown when a cascading picker's depended-on field is still
  * empty. Domain-neutral on purpose; a caller may override it per field via
  * `dependsHint`.
  */
 export const DEFAULT_DEPENDS_HINT = 'Selecciona primero el campo del que depende';
+/** Label of a held value whose record no longer exists (or is not visible). */
+export const DELETED_RECORD_LABEL = '(registro eliminado)';
 /**
- * Small square thumbnail for an option's `image`. When the option has no image
- * it falls back to a deterministic initials avatar (shared `InitialsAvatar`)
- * derived from `name`, so an imageless reference reads as a colored badge rather
- * than an empty placeholder — and rows/triggers stay aligned. `size` is in
- * pixels (kept small — 20–24px — so the picker reads as a list, not a gallery).
- * Inline style for the box dimensions: arbitrary Tailwind classes from a
- * federated addon don't always survive the host's class scan.
- */
-export function OptionThumb({ image, name, size = 20, }) {
-    const [broken, setBroken] = useState(false);
-    const box = { width: size, height: size };
-    // Missing or 404 image (bare avatar filenames often 404) → initials, never
-    // an invisible box that looks like "no avatar".
-    if (!image || broken) {
-        return _jsx(InitialsAvatar, { name: name, size: size, rounded: "sm", tone: "neutral" });
-    }
-    // A lucide icon name stored where an image url/path is expected (the `icon`
-    // form widget's icon mode) → render the glyph instead of a broken <img>.
-    if (isLucideIconName(image)) {
-        return (_jsx("span", { className: "flex shrink-0 items-center justify-center rounded-sm bg-muted", style: box, "aria-hidden": true, children: _jsx(DynamicIcon, { name: image, className: "size-4" }) }));
-    }
-    return (_jsx("img", { src: image, alt: "", "aria-hidden": true, loading: "lazy", className: "shrink-0 rounded-sm object-cover", style: box, onError: () => setBroken(true) }));
-}
-/**
- * Leading visual for an option: a photo thumbnail (FK relations with an image),
- * else a declared icon, else a color dot (enum/status options with a color).
- * Returns null when the option carries none, so plain text options stay plain.
+ * Declarative `dynamic_select` (manifest `ref` / `optionsConfig.source`) on top
+ * of the shared {@link RecordPicker}: options from the canonical options
+ * endpoint (`useOptionsResolver`: option_filter, options[].when keep-value,
+ * cascade `filter_value`), inline create/edit through the host modal events.
  */
-export function OptionLead({ option, size = 20, }) {
-    if (!option)
-        return null;
-    if (option.image)
-        return _jsx(OptionThumb, { image: option.image, name: option.label, size: size });
-    if (option.icon) {
-        return (_jsx("span", { className: "flex shrink-0 items-center justify-center", style: { width: size, height: size, color: option.color ? resolveColorCss(option.color) : undefined }, "aria-hidden": true, children: _jsx(DynamicIcon, { name: option.icon, className: "size-4" }) }));
-    }
-    if (option.color) {
-        return (_jsx("span", { className: "shrink-0 rounded-full", style: { width: Math.round(size * 0.5), height: Math.round(size * 0.5), background: resolveColorCss(option.color) }, "aria-hidden": true }));
-    }
-    // No image/icon/color: an imageless reference option. Show its initials
-    // (shared InitialsAvatar) so it stays visually aligned with the sibling
-    // options that DO carry a thumbnail, rather than a blank gap.
-    if (option.label)
-        return _jsx(InitialsAvatar, { name: option.label, size: size, rounded: "sm", tone: "neutral" });
-    return null;
-}
-function useDebounced(value, ms) {
-    return useDebouncedValue(value, ms);
-}
 export function DynamicSelectField({ field, value, onChange, onPick, seedOption, dependsValue, dependsHint, readonly = false, staticOptions = null, descriptionAsBadge = false, hideCreate = false, createDefaults, createLockedFields, invalid = false, }) {
     const { t } = useTranslation();
     const ph = (fallback) => field.placeholder ? t(field.placeholder, { defaultValue: field.placeholder }) : fallback;
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState('');
     const [scanOpen, setScanOpen] = useState(false);
-    const debounced = useDebounced(search, 250);
+    const debounced = useDebouncedValue(search, 250);
     // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`). El
-    // botón aparece SIEMPRE que el campo lo declara (igual que el POS), sin
-    // esconderse por `isCameraScanSupported()` — en escritorio el botón no salía
-    // aunque el campo lo pidiera. El BarcodeScanner ya degrada con un mensaje
-    // cuando no hay cámara. Un código escaneado alimenta la búsqueda y abre el
-    // picker para elegir la referencia sin tipear el UUID.
+    // botón aparece SIEMPRE que el campo lo declara (igual que el POS). El
+    // BarcodeScanner ya degrada con un mensaje cuando no hay cámara. Un código
+    // escaneado alimenta la búsqueda y abre el picker.
     const scanEnabled = !!(field.scan ?? field.scannable);
     const handleScanDetected = (code) => {
         setSearch(code);
         setOpen(true);
     };
-    // Remember the label of the option the user actually picked so the trigger
-    // shows a name (not a UUID) without a round-trip.
+    // Remember the option the user actually picked so the trigger shows a name
+    // (not a UUID) without a round-trip.
     const [picked, setPicked] = useState(null);
-    // Tolerate the snake_case `source`/`relation` aliases the kernel may serve
-    // for the FK target, not just camelCase `ref`.
+    // Tolerate the snake_case `source`/`relation` aliases for the FK target.
     const fieldRef = getFieldRef(field);
-    // Options routing: an `optionsConfig.source` (dependent/scoped picker) wins
-    // over the field's `ref` — query the SOURCE model with `field=<value>`;
-    // otherwise keep the canonical `ref`-based resolution.
+    // An `optionsConfig.source` (dependent/scoped picker) wins over `ref`.
     const source = resolveOptionsSource(field);
     // Cascade: a `dependsOn` field whose value is still empty leaves this
-    // picker disabled until the parent is set. `dependsValue` is the resolved
-    // value the caller threaded from the form context.
+    // picker disabled until the parent is set.
     const dependsOn = getDependsOn(field);
     const scope = dependsValue ? String(dependsValue) : '';
     const blockedByDependency = !!dependsOn && scope === '';
     const useStatic = Array.isArray(staticOptions);
     const optionFilter = getOptionFilter(field);
+    // optionsConfig.source → `/options/<source>`. Else searchEndpoint only
+    // drives the URL when there's no ref (ref is canonical and wins).
+    const optionsEndpoint = source.endpoint ?? (source.ref ? undefined : field.searchEndpoint);
     const { options: fetchedOptions, loading: fetchLoading } = useOptionsResolver({
         modelKey: '',
         fieldKey: source.fieldKey,
         ref: source.ref,
-        // optionsConfig.source → `/options/<source>`. Else searchEndpoint only
-        // drives the URL when there's no ref — ref is the canonical,
-        // kernel-derived path and wins.
-        endpoint: source.endpoint ?? (source.ref ? undefined : field.searchEndpoint),
+        endpoint: optionsEndpoint,
         query: debounced,
         limit: 20,
-        // Cascade scope forwarded as filter_value (only when this field
-        // declares a dependency). Re-fetches when the parent value changes.
         filterValue: dependsOn ? scope : undefined,
         optionFilter,
         keepValue: value,
-        // Don't fetch until the popover opens (and keep fetching as the query
-        // changes while open). A picker blocked by an unset dependency never
-        // fetches. A readonly cell fetches eagerly so its value's label resolves
-        // to the name without the user ever opening it.
-        // Static lists never hit the network.
-        enabled: !useStatic && (open || readonly) && !blockedByDependency,
+        // Fetch only while open (a held value's label comes from the `?ids=`
+        // lookup below, readonly included). Blocked cascades and static lists
+        // never fetch.
+        enabled: !useStatic && open && !blockedByDependency,
     });
     const options = useStatic
         ? staticOptions.filter((o) => {
@@ -158,8 +110,7 @@ export function DynamicSelectField({ field, value, onChange, onPick, seedOption,
         })
         : fetchedOptions;
     const loading = useStatic ? false : fetchLoading;
-    // When the depended-on value changes, the previously-picked option no longer
-    // belongs to the new scope, so clear the selection (skip the initial mount).
+    // A new cascade scope invalidates the selection (skip the initial mount).
     const prevScopeRef = useRef(scope);
     useEffect(() => {
         if (!dependsOn)
@@ -171,17 +122,27 @@ export function DynamicSelectField({ field, value, onChange, onPick, seedOption,
                 onChange('');
         }
     }, [dependsOn, scope, value, onChange]);
-    // The currently-selected option, resolved either from what the user picked
-    // (cached in `picked`) or from the loaded page. Drives both the trigger
-    // label and its thumbnail.
-    const selectedOption = (picked && String(picked.id) === String(value) ? picked : null) ??
-        options.find((o) => String(o.id) === String(value)) ??
-        (seedOption && String(seedOption.id) === String(value) ? seedOption : null) ??
+    const valueKey = value != null && value !== '' ? String(value) : '';
+    const knownOption = (picked && String(picked.id) === valueKey ? picked : null) ??
+        options.find((o) => String(o.id) === valueKey) ??
+        (seedOption && String(seedOption.id) === valueKey ? seedOption : null) ??
         null;
-    const selectedLabel = selectedOption?.label ?? (value ? String(value) : '');
-    // Only switch the picker into "with thumbnails" mode when the data actually
-    // carries images — a relation whose options have no `image` keeps the plain
-    // text list it had before (no empty placeholder column).
+    // A held value nobody has labelled yet: one `?ids=` lookup (no popover).
+    const needsLookup = !!valueKey && !knownOption && !useStatic;
+    const { resolved, loading: idsLoading } = useResolveOptionIds({
+        ref: source.ref,
+        endpoint: optionsEndpoint,
+        field: source.fieldKey,
+        ids: needsLookup ? [valueKey] : [],
+        enabled: needsLookup,
+    });
+    const resolution = needsLookup ? resolved.get(valueKey) : undefined;
+    const selectedOption = knownOption ?? (resolution?.status === 'found' ? resolution.option : null);
+    const valueResolving = needsLookup && !selectedOption && idsLoading;
+    const valueMissing = needsLookup && !selectedOption && resolution?.status === 'missing';
+    const selectedLabel = selectedOption?.label ?? (valueResolving ? '' : valueMissing ? DELETED_RECORD_LABEL : valueKey);
+    const resolvingNode = (_jsx("span", { className: "min-w-0 flex-1 truncate animate-pulse text-muted-foreground", "data-slot": "record-picker-value-loading", children: "Cargando\u2026" }));
+    const missingNode = (_jsx("span", { className: "min-w-0 flex-1 truncate italic text-muted-foreground", "data-slot": "record-picker-value-missing", children: DELETED_RECORD_LABEL }));
     const handlePick = (opt) => {
         setPicked(opt);
         onChange(String(opt.id));
@@ -189,88 +150,60 @@ export function DynamicSelectField({ field, value, onChange, onPick, seedOption,
         setOpen(false);
         setSearch('');
     };
-    // Inline-create: the "+" opens the REFERENCED model's own create modal (the
-    // real one the host renders for that model — full fields, not a duplicate),
-    // via a decoupled window event the host listens for. On success the host
-    // hands back the new record and we select it immediately. No host import →
-    // no circular dependency; works for ANY dynamic_select with a `ref`.
-    // Inline-edit: with a value selected the joined pencil opens THAT record's
-    // edit modal through the sibling `metacore:edit-record` event (the host's
-    // RecordCreateBridge already listens for it). On save the trigger label
-    // refreshes from the returned record.
-    const openEdit = () => {
-        if (!fieldRef || !value || typeof window === 'undefined')
+    const toOption = (id, label) => ({ id, value: id, label, name: label });
+    // Inline create / edit: the REFERENCED model's real modal, rendered by the
+    // host (RecordCreateBridge) via decoupled window events — no host import.
+    const openCreate = (query) => {
+        if (!fieldRef)
             return;
         setOpen(false);
-        window.dispatchEvent(new CustomEvent('metacore:edit-record', {
-            detail: {
-                model: fieldRef,
-                recordId: String(value),
-                onSaved: (rec) => {
-                    const id = String(value);
-                    const label = rec ? rec.name ?? rec.label ?? rec.title : undefined;
-                    if (label != null)
-                        setPicked({ ...(selectedOption ?? { id, value: id }), id, value: id, label: String(label), name: String(label) });
-                },
+        requestRecordCreate({
+            model: fieldRef,
+            // The searched text seeds the new record's name; explicit
+            // createDefaults win. Keys that aren't fields are ignored.
+            defaults: withSearchPrefill(query, 'name', createDefaults),
+            lockedFields: createLockedFields,
+            onCreated: (rec) => {
+                if (rec && rec.id != null) {
+                    const id = String(rec.id);
+                    handlePick(toOption(id, recordLabel(rec) ?? id));
+                }
             },
-        }));
+        });
     };
-    const openCreate = () => {
-        if (!fieldRef || typeof window === 'undefined')
+    const openEdit = () => {
+        if (!fieldRef || !value)
             return;
         setOpen(false);
-        window.dispatchEvent(new CustomEvent('metacore:create-record', {
-            detail: {
-                model: fieldRef,
-                // Generic passthrough: the host's create modal seeds these
-                // values and locks these fields (DynamicRecordDialog's own
-                // defaults/lockedFields props). Undefined when unused.
-                defaults: createDefaults,
-                lockedFields: createLockedFields,
-                onCreated: (rec) => {
-                    if (rec && rec.id != null) {
-                        const id = String(rec.id);
-                        const label = String(rec.name ?? rec.label ?? rec.title ?? rec.id);
-                        handlePick({ id, value: id, label, name: label });
-                    }
-                },
+        const id = String(value);
+        requestRecordEdit({
+            model: fieldRef,
+            recordId: id,
+            onSaved: (rec) => {
+                const label = recordLabel(rec);
+                if (label != null)
+                    setPicked({ ...(selectedOption ?? toOption(id, label)), id, value: id, label, name: label });
             },
-        }));
+        });
     };
-    // Locked display: the value is fixed by context, so render the resolved
-    // label (name) as a disabled control — no popover, no inline-create. While
-    // the eager fetch is in flight the label falls back to the seed/raw value,
-    // then snaps to the name once options arrive.
-    if (readonly) {
-        return (_jsx(Button, { type: "button", variant: "outline", role: "combobox", id: field.key, disabled: true, "aria-readonly": "true", className: "w-full min-w-0 cursor-default justify-start font-normal opacity-100", children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground'), children: selectedOption?.label ?? (loading ? 'Cargando…' : ph('—')) })] }) }));
-    }
-    // w-full + min-w-0: as a grid cell child, the row must be allowed to shrink
-    // to the cell. Without min-w-0 the combobox+button row sizes to its content
-    // (the long empty-state placeholder) and overflows the column, pushing the
-    // "+" off-screen — it only "fit" once a short value was selected.
-    const canMutate = !!fieldRef && !hideCreate && !useStatic;
-    const joined = canMutate && !blockedByDependency && hasRecordPickerAction(!!value, openCreate, openEdit);
+    const canMutate = !!fieldRef && !hideCreate && !useStatic && !blockedByDependency;
     const fieldName = field.label ? t(field.label, { defaultValue: field.label }) : fieldRef ?? '';
-    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", "data-slot": "dynamic-select", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center", children: [_jsxs(Popover, { open: open && !blockedByDependency, onOpenChange: (o) => { if (!blockedByDependency)
-                            setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, "aria-invalid": invalid || undefined, className: 'min-w-0 flex-1 justify-between font-normal' +
-                                        (joined ? ` ${JOINED_TRIGGER_CLASS}` : '') +
-                                        (invalid ? ' border-destructive ring-1 ring-destructive/30' : ''), "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [value && selectedOption ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
-                                                        ? (dependsHint || DEFAULT_DEPENDS_HINT)
-                                                        : selectedLabel || ph('Buscar…') }), descriptionAsBadge && selectedOption?.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: selectedOption.description })) : null] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
-                                // Portaled (never clipped by a table/modal overflow) and
-                                // collision-aware: flips above the trigger when there is no
-                                // room below. Match the trigger width without an arbitrary
-                                // Tailwind class (those don't always survive a consuming app's
-                                // Tailwind scan), with a floor so short cells stay readable.
-                                collisionPadding: 8, style: { width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: ph('Buscar…'), value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx("div", { className: "text-muted-foreground py-6 text-center text-sm", "data-slot": "picker-empty", children: useStatic
-                                                        ? debounced
-                                                            ? 'Sin resultados'
-                                                            : 'Sin opciones'
-                                                        : debounced
-                                                            ? 'Sin resultados'
-                                                            : 'Sin resultados — escribe para filtrar' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {
-                                                        const isSel = String(opt.id) === String(value);
-                                                        return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsx(OptionLead, { option: opt, size: 24 }), descriptionAsBadge ? (_jsxs("div", { className: "ml-2 flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }), opt.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: opt.description })) : null] })) : (_jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] }))] }, String(opt.id)));
-                                                    }) })), canMutate && !loading && (_jsx(PickerCreateItem, { label: fieldName, onSelect: openCreate }))] })] }) })] }), canMutate && !blockedByDependency && (_jsx(RecordPickerAction, { hasValue: !!value, label: fieldName, onCreate: openCreate, onEdit: openEdit }))] }), scanEnabled && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: () => setScanOpen(true), title: "Escanear con la c\u00E1mara", "aria-label": "Escanear c\u00F3digo de barras con la c\u00E1mara", children: _jsx(ScanLine, { className: "size-4" }) })), scanEnabled && (_jsx(BarcodeScanner, { open: scanOpen, onClose: () => setScanOpen(false), onDetected: handleScanDetected, continuous: false, position: "fixed", title: `Escanear ${field.label ?? ''}`.trim() }))] }));
+    const badge = (opt) => opt.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: opt.description })) : null;
+    return (_jsx(RecordPicker, { slot: "dynamic-select", id: field.key, items: options, loading: loading, getKey: (o) => String(o.id), getLabel: (o) => o.label, value: value, selected: selectedOption, onSelect: handlePick, query: search, onQueryChange: setSearch, open: open && !blockedByDependency, onOpenChange: (o) => {
+            if (!blockedByDependency)
+                setOpen(o);
+        }, disabled: blockedByDependency, readOnly: readonly, invalid: invalid, renderLead: (o, where) => _jsx(OptionLead, { option: o, size: where === 'option' ? 24 : 20 }), getDescription: descriptionAsBadge ? undefined : (o) => o.description, renderTrailing: descriptionAsBadge ? (o) => badge(o) : undefined, renderValue: () => {
+            // Never flash the raw id while the label resolves.
+            if (valueResolving)
+                return resolvingNode;
+            if (valueMissing)
+                return missingNode;
+            if (readonly) {
+                return (_jsxs(_Fragment, { children: [selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground'), children: selectedOption?.label ?? ph('—') })] }));
+            }
+            return (_jsxs(_Fragment, { children: [value && selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency ? dependsHint || DEFAULT_DEPENDS_HINT : selectedLabel || ph('Buscar…') }), descriptionAsBadge && selectedOption ? badge(selectedOption) : null] }));
+        }, placeholder: ph('Buscar…'), searchPlaceholder: ph('Buscar…'), emptyText: debounced ? 'Sin resultados' : useStatic ? 'Sin opciones' : 'Sin resultados — escribe para filtrar', entityLabel: fieldName, onCreate: canMutate ? openCreate : undefined, onEdit: canMutate ? openEdit : undefined, triggerProps: {
+            'data-depends-blocked': blockedByDependency ? '' : undefined,
+        }, after: scanEnabled ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: () => setScanOpen(true), title: "Escanear con la c\u00E1mara", "aria-label": "Escanear c\u00F3digo de barras con la c\u00E1mara", children: _jsx(ScanLine, { className: "size-4" }) }), _jsx(BarcodeScanner, { open: scanOpen, onClose: () => setScanOpen(false), onDetected: handleScanDetected, continuous: false, position: "fixed", title: `Escanear ${field.label ?? ''}`.trim() })] })) : null }));
 }
 export default DynamicSelectField;

package/dist/entity-select.d.ts

@@ -1,4 +1,4 @@
-import { type LucideIcon } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 /** One searchable option: `value` is the id, `label` the display text. */
 export interface EntitySelectOption {
     value: string;
@@ -52,5 +52,8 @@ export interface EntitySelectProps {
      */
     lockedCreateFields?: string[];
 }
-export declare function EntitySelect({ model, value, label, onSelect, fetcher, icon: Icon, placeholder, searchPlaceholder, emptyText, preload, canCreate, canEdit, endpoint, labelField, disabled, createDefaults, lockedCreateFields, }: EntitySelectProps): import("react").JSX.Element;
+/**
+ * @deprecated Thin wrapper over {@link RecordPicker}; prefer it for new code.
+ */
+export declare function EntitySelect({ model, value, label, onSelect, fetcher, icon, placeholder, searchPlaceholder, emptyText, preload, canCreate, canEdit, endpoint, labelField, disabled, createDefaults, lockedCreateFields, }: EntitySelectProps): import("react").JSX.Element;
 //# sourceMappingURL=entity-select.d.ts.map

package/dist/entity-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-select.d.ts","sourceRoot":"","sources":["../src/entity-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAiBzD,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,kEAAkE;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,sDAAsD;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3D,sFAAsF;IACtF,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAA;IAE1E,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAChC;AAOD,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EAAE,IAAI,EACV,WAA4B,EAC5B,iBAA6B,EAC7B,SAA4B,EAC5B,OAAe,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAmB,EACnB,QAAgB,EAChB,cAAc,EACd,kBAAkB,GACrB,EAAE,iBAAiB,+BAmMnB"}
+{"version":3,"file":"entity-select.d.ts","sourceRoot":"","sources":["../src/entity-select.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,kEAAkE;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,sDAAsD;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3D,sFAAsF;IACtF,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAA;IAE1E,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAChC;AAOD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAA4B,EAC5B,iBAA6B,EAC7B,SAA4B,EAC5B,OAAe,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAmB,EACnB,QAAgB,EAChB,cAAc,EACd,kBAAkB,GACrB,EAAE,iBAAiB,+BAmDnB"}

package/dist/entity-select.js

@@ -1,126 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// EntitySelect — the shared, permission-aware single-select for a related model.
-//
-// A searchable async combobox over a kernel model's records, plus the two
-// affordances every "pick a related record" control should have, exactly like
-// the dynamic create modal's relation fields (Categoría/Marca) do:
-//
-//   - nothing selected → a "+" that opens the model's CREATE dialog, and
-//     auto-selects the record it creates;
-//   - a record selected → a pencil that opens that record's EDIT dialog.
-//
-// Both affordances are gated by the kernel permissions (useCan): the "+" only
-// shows when the user can create the model, the pencil only when they can edit
-// it. Everything is DYNAMIC — the create/edit form comes from the model's
-// `/metadata/modal/:model` schema via <CreateRecordDialog>, so no per-model form
-// code is needed. This lives in the SDK so POS, purchases and any future addon
-// share ONE implementation instead of each re-porting a bespoke picker.
-import { useCallback, useEffect, useState } from 'react';
-import { Search, X } from 'lucide-react';
-import { Button, Command, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui';
-import { CreateRecordDialog } from './dialogs/create-record-dialog';
-import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RecordPicker, useLatestSearch } from './record-picker';
+import { recordLabel } from './record-picker-actions';
+import { useRecordPickerDialog } from './record-picker-dialog';
 import { useCan } from './permissions-context';
-import { useApi } from './api-context';
 /** Lowercase model → permission capability namespace (Supplier → supplier). */
 function capabilityNamespace(model) {
     return model.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
 }
-export function EntitySelect({ model, value, label, onSelect, fetcher, icon: Icon, placeholder = 'Seleccionar…', searchPlaceholder = 'Buscar…', emptyText = 'Sin resultados', preload = false, canCreate, canEdit, endpoint, labelField = 'name', disabled = false, createDefaults, lockedCreateFields, }) {
+/**
+ * @deprecated Thin wrapper over {@link RecordPicker}; prefer it for new code.
+ */
+export function EntitySelect({ model, value, label, onSelect, fetcher, icon, placeholder = 'Seleccionar…', searchPlaceholder = 'Buscar…', emptyText = 'Sin resultados', preload = false, canCreate, canEdit, endpoint, labelField = 'name', disabled = false, createDefaults, lockedCreateFields, }) {
     const can = useCan();
-    const api = useApi();
     const ns = capabilityNamespace(model);
     const mayCreate = canCreate ?? can(`${ns}.create`);
     const mayEdit = canEdit ?? can(`${ns}.update`);
-    const base = endpoint ?? `/data/${model}/me`;
-    const [open, setOpen] = useState(false);
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [dialogRecordId, setDialogRecordId] = useState(undefined);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [results, setResults] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const minChars = preload ? 0 : 2;
-    const run = useCallback(async (q, signal) => {
-        if (q.length < minChars) {
-            setResults([]);
-            return;
-        }
-        setIsLoading(true);
-        try {
-            const rows = await fetcher(q, signal);
-            if (!signal.aborted)
-                setResults(rows);
-        }
-        catch {
-            if (!signal.aborted)
-                setResults([]);
-        }
-        finally {
-            if (!signal.aborted)
-                setIsLoading(false);
-        }
-    }, [fetcher, minChars]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const controller = new AbortController();
-        const timeout = setTimeout(() => run(searchTerm, controller.signal), 250);
-        return () => {
-            clearTimeout(timeout);
-            controller.abort();
-        };
-    }, [searchTerm, run, open]);
-    const pick = (row) => {
-        onSelect(row.value, row.label);
-        setOpen(false);
-        setSearchTerm('');
-    };
-    const clear = (e) => {
-        e.stopPropagation();
-        onSelect(null, null);
-    };
-    const openCreate = () => {
-        setOpen(false);
-        setDialogRecordId(undefined);
-        setDialogOpen(true);
-    };
-    const openEdit = () => {
-        if (!value)
-            return;
-        setOpen(false);
-        setDialogRecordId(value);
-        setDialogOpen(true);
-    };
-    // Read the {id,label} off a saved record and select it. The transport
-    // matches the standard org-scoped CRUD the dynamic modal uses, so create/edit
-    // stay consistent with the rest of the app.
-    const selectSaved = (rec) => {
-        if (!rec)
-            return;
-        const id = rec.id != null ? String(rec.id) : value ?? '';
-        const lbl = (rec[labelField] != null && String(rec[labelField])) ||
-            (rec.name != null && String(rec.name)) ||
-            label ||
-            id;
-        onSelect(id, lbl);
-    };
-    const onCreate = mayCreate ? openCreate : undefined;
-    const onEdit = mayEdit ? openEdit : undefined;
-    const joined = hasRecordPickerAction(!!value, onCreate, onEdit);
-    return (_jsxs("div", { className: "flex items-center", "data-slot": "entity-select", children: [_jsxs(Popover, { open: open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: 'w-full min-w-0 flex-1 justify-start gap-2 font-normal' + (joined ? ` ${JOINED_TRIGGER_CLASS}` : ''), children: [Icon && _jsx(Icon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: "flex-1 truncate text-left", children: label ?? placeholder }), value && (_jsx("span", { role: "button", tabIndex: 0, onClick: clear, onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ')
-                                            clear(e);
-                                    }, className: "hover:bg-accent ml-auto shrink-0 rounded-sm p-0.5", children: _jsx(X, { className: "size-3.5" }) }))] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", collisionPadding: 8, style: { width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: searchPlaceholder, value: searchTerm, onValueChange: setSearchTerm }), _jsxs(CommandList, { children: [isLoading && (_jsx("div", { className: "text-muted-foreground py-4 text-center text-sm", children: "Buscando\u2026" })), !isLoading &&
-                                            searchTerm.length >= minChars &&
-                                            results.length === 0 && _jsx("div", { className: "text-muted-foreground py-6 text-center text-sm", children: emptyText }), !isLoading && results.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: results.map((row) => (_jsxs(CommandItem, { value: row.value, onSelect: () => pick(row), className: "flex flex-col items-start gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: row.label }), row.description && (_jsx("span", { className: "text-muted-foreground text-xs", children: row.description }))] }, row.value))) })), !isLoading && !preload && searchTerm.length < minChars && (_jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-1 py-6", children: [_jsx(Search, { className: "size-5" }), _jsx("span", { className: "text-xs", children: "Escribe al menos 2 caracteres" })] })), onCreate && !isLoading && _jsx(PickerCreateItem, { label: model, onSelect: openCreate })] })] }) })] }), _jsx(RecordPickerAction, { hasValue: !!value, label: model, onCreate: onCreate, onEdit: onEdit, disabled: disabled }), dialogOpen && (_jsx(CreateRecordDialog, { modelKey: model, open: dialogOpen, onOpenChange: setDialogOpen, recordId: dialogRecordId, endpoint: base, defaults: dialogRecordId ? undefined : createDefaults, lockedFields: dialogRecordId ? undefined : lockedCreateFields, onCreate: async (data) => {
-                    const res = await api.post(base, data);
-                    const rec = (res.data?.data ?? res.data);
-                    selectSaved(rec);
-                    return rec.id != null ? { id: String(rec.id) } : undefined;
-                }, onUpdate: async (id, data) => {
-                    const res = await api.put(`${base}/${id}`, data);
-                    const rec = (res.data?.data ?? res.data);
-                    selectSaved({ id, ...rec });
-                    return { id: String(id) };
-                } }))] }));
+    // Read the {id,label} off a saved record and select it (create) or
+    // refresh its label (edit).
+    const { openCreate, openEdit, dialog } = useRecordPickerDialog({
+        model,
+        endpoint,
+        prefillField: labelField,
+        createDefaults,
+        lockedCreateFields,
+        onSaved: (rec) => {
+            const id = rec.id != null ? String(rec.id) : value ?? '';
+            onSelect(id, recordLabel(rec, labelField) ?? label ?? id);
+        },
+    });
+    const search = useLatestSearch(fetcher);
+    return (_jsxs(_Fragment, { children: [_jsx(RecordPicker, { slot: "entity-select", search: search, minChars: preload ? 0 : 2, minCharsText: "Escribe al menos 2 caracteres", getKey: (o) => o.value, getLabel: (o) => o.label, getDescription: (o) => o.description, showCheck: false, value: value, selected: value ? { value, label: label ?? value } : null, onSelect: (o) => onSelect(o.value, o.label), onClear: () => onSelect(null, null), icon: icon, placeholder: placeholder, renderValue: (sel) => (_jsx("span", { className: 'min-w-0 flex-1 truncate' + (sel ? '' : ' text-muted-foreground'), children: label ?? placeholder })), searchPlaceholder: searchPlaceholder, emptyText: emptyText, entityLabel: model, onCreate: mayCreate ? (q) => openCreate(q) : undefined, onEdit: mayEdit && value ? () => openEdit(value) : undefined, disabled: disabled }), dialog] }));
 }

package/dist/index.d.ts

@@ -85,8 +85,13 @@ export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } fro
 export { CreateRecordDialog } from './dialogs/create-record-dialog';
 export { EntitySelect } from './entity-select';
 export type { EntitySelectProps, EntitySelectOption } from './entity-select';
-export { RecordPickerAction, PickerCreateItem, JOINED_TRIGGER_CLASS, hasRecordPickerAction } from './record-picker-actions';
-export type { RecordPickerActionProps } from './record-picker-actions';
+export { RecordPicker, useRecordSearch, useLatestSearch, RECORD_PICKER_Z_INDEX } from './record-picker';
+export type { RecordPickerProps, RecordPickerItemState, RecordPickerVariant, RecordPickerTrigger, UseRecordSearchOptions, UseRecordSearchResult, } from './record-picker';
+export { RecordPickerAction, PickerCreateItem, JOINED_TRIGGER_CLASS, hasRecordPickerAction, requestRecordCreate, requestRecordEdit, recordLabel, withSearchPrefill, } from './record-picker-actions';
+export type { RecordPickerActionProps, RecordCreateRequest, RecordEditRequest } from './record-picker-actions';
+export { useRecordPickerDialog } from './record-picker-dialog';
+export type { UseRecordPickerDialogOptions, UseRecordPickerDialogResult } from './record-picker-dialog';
+export { OptionLead, OptionThumb } from './record-picker-option';
 export { ViewRecordDialog } from './dialogs/view-record-dialog';
 export type { ModelKey, ModelSchema, CreateResult, RecordDialogProps, CreateRecordDialogProps, ViewRecordDialogProps, } from './dialogs/types';
 export { ExportDialog } from './dialogs/export';
@@ -99,6 +104,8 @@ export { registerAgentResultRenderer, resolveAgentResultRenderer, listAgentResul
 export { isColumnVisibleInTable, isColumnVisibleInModal, isColumnVisibleInLineSubtable, AUDIT_SUBTABLE_COLUMN_KEYS, getSearchableColumnKeys, } from './column-visibility';
 export { batchGet, loadQueryPart, nameBatchTokens, narrowInToken, optionsBatchToken, optionsModelFromUrl, rememberInRows, invalidateQueryBatchData, resetQueryBatchCache, splitInToken, tokenForGet, type InListToken, type NarrowedIn, type QueryPart, } from './query-batch';
 export { useOptionsResolver, invalidateOptionsCache, projectOption, type ResolvedOption, type OptionsMeta, type UseOptionsResolverArgs, type UseOptionsResolverResult, } from './use-options-resolver';
+export { useResolveOptionIds, OPTION_IDS_CHUNK, type OptionIdResolution, type UseResolveOptionIdsArgs, type UseResolveOptionIdsResult, } from './use-option-ids';
+export { DELETED_RECORD_LABEL } from './dynamic-select-field';
 export { setOrgConfigBridge, getOrgConfigBridge, resolveValidatorToken, type OrgConfigBridge, } from './use-org-config-bridge';
 export { registerValidator, getDependsOn, resolveDependsValue, getOptionsConfig, resolveOptionsSource, getVisibleWhen, evaluateVisibleWhen, ATTRIBUTE_CLASSES_KEY, scopeValueFromFilterToken, buildListScopeValues, evaluateVisibleWhenForListScope, applyLineItemRowFormulas, computeLineItemTotals, toNumber, } from './dynamic-form-schema';
 export { BranchCreateGateProvider, useBranchCreateGate, type BranchCreateGateApi, } from './branch-create-gate';