@asteby/metacore-runtime-react 13.2.0 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @asteby/metacore-runtime-react
 
+## 13.3.0
+
+### Minor Changes
+
+- 99477d6: feat(runtime-react): add `dynamic_select` field widget — async searchable FK picker
+
+  Declarative answer to "I don't want to type a raw FK UUID". A field with
+  `type: "dynamic_select"` (or `widget: "dynamic_select"`) + `ref` renders a
+  typeahead combobox that queries the canonical options endpoint as the user
+  types (`GET /api/options/<ref>?field=id&q=<text>&limit=<n>`), reusing
+  `useOptionsResolver` (debounced, abortable). Works both as a flat form field
+  and as a line-items column cell (e.g. the account_id per debit/credit row of a
+  journal entry). The metacore equivalent of 7leguas' `type: search`, driven
+  entirely from the manifest — addons get a searchable picker with zero custom
+  React, keeping custom federated frontends for genuinely page-level UIs (POS).
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/dynamic-form-schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form-schema.d.ts","sourceRoot":"","sources":["../src/dynamic-form-schema.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAmB,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAA;AAiB9D;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,CAEzF;AAcD,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE;;kBAMtD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,CAGrE;AAED,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAE/D;AAqDD,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAU3D"}
+{"version":3,"file":"dynamic-form-schema.d.ts","sourceRoot":"","sources":["../src/dynamic-form-schema.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAmB,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAA;AAiB9D;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,CAEzF;AAcD,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE;;kBAMtD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,CAGrE;AAED,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAE/D;AAqDD,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAa3D"}

package/dist/dynamic-form-schema.js

@@ -116,6 +116,9 @@ export function resolveWidget(field) {
     switch (field.type) {
         case 'textarea': return 'textarea';
         case 'select': return 'select';
+        // Async searchable single-select against /api/options/<ref>. The
+        // declarative replacement for typing a raw FK UUID.
+        case 'dynamic_select': return 'dynamic_select';
         case 'boolean': return 'switch';
         case 'number': return 'number';
         case 'date': return 'date';

package/dist/dynamic-form.d.ts

@@ -2,6 +2,7 @@ import type { ActionFieldDef } from './types';
 import { buildZodSchema, resolveWidget } from './dynamic-form-schema';
 export { buildZodSchema, resolveWidget };
 export { DynamicLineItems } from './dynamic-line-items';
+export { DynamicSelectField } from './dynamic-select-field';
 export interface DynamicFormProps {
     fields: ActionFieldDef[];
     initialValues?: Record<string, any>;

package/dist/dynamic-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAA;AAIvF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CAoElB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAA;AAKvF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CAoElB"}

package/dist/dynamic-form.js

@@ -7,8 +7,10 @@ import { Input, Textarea, Label, Switch, Button, Select, SelectContent, SelectIt
 import { buildZodSchema, resolveWidget, isLineItemsField } from './dynamic-form-schema';
 import { useOptionsResolver } from './use-options-resolver';
 import { DynamicLineItems } from './dynamic-line-items';
+import { DynamicSelectField } from './dynamic-select-field';
 export { buildZodSchema, resolveWidget };
 export { DynamicLineItems } from './dynamic-line-items';
+export { DynamicSelectField } from './dynamic-select-field';
 export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitLabel = 'Guardar', cancelLabel = 'Cancelar', disabled = false, }) {
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
@@ -58,6 +60,12 @@ function FieldRenderer({ field, value, onChange }) {
         return _jsx(DynamicLineItems, { field: field, value: value, onChange: onChange });
     }
     const widget = resolveWidget(field);
+    // Async searchable picker (typeahead against /api/options/<ref>?q=…).
+    // Preferred for FK fields with large option sets — no UUID typing, no
+    // dumping every row into a plain <select>.
+    if (widget === 'dynamic_select') {
+        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange });
+    }
     // Ref-driven select: hook into useOptionsResolver so the canonical
     // /api/options/<ref>?field=id endpoint feeds the dropdown. This is
     // the path the kernel auto-derives for FK columns; legacy callers

package/dist/dynamic-line-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-line-items.d.ts","sourceRoot":"","sources":["../src/dynamic-line-items.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,CAAA;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAUD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,qBAAqB,2CAwEnG"}
+{"version":3,"file":"dynamic-line-items.d.ts","sourceRoot":"","sources":["../src/dynamic-line-items.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,CAAA;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAUD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,qBAAqB,2CAwEnG"}

package/dist/dynamic-line-items.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, Textarea, Switch, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@asteby/metacore-ui/primitives';
 import { Plus, Trash2 } from 'lucide-react';
 import { resolveWidget, getItemFields } from './dynamic-form-schema';
+import { DynamicSelectField } from './dynamic-select-field';
 import { useOptionsResolver } from './use-options-resolver';
 function emptyRow(itemFields) {
     const row = {};
@@ -33,6 +34,11 @@ export function DynamicLineItems({ field, value, onChange, disabled = false }) {
 // a scalar widget).
 function CellRenderer({ field, value, onChange, disabled }) {
     const widget = resolveWidget(field);
+    // Async searchable picker per row cell — e.g. the account_id column of a
+    // journal entry's debit/credit lines. Same widget as the flat form.
+    if (widget === 'dynamic_select') {
+        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange });
+    }
     if (widget === 'select' && field.ref) {
         return _jsx(RefCell, { field: field, value: value, onChange: onChange, disabled: disabled });
     }

package/dist/dynamic-select-field.d.ts

@@ -0,0 +1,9 @@
+import type { ActionFieldDef } from './types';
+export interface DynamicSelectFieldProps {
+    field: ActionFieldDef;
+    value: any;
+    onChange: (v: any) => void;
+}
+export declare function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default DynamicSelectField;
+//# sourceMappingURL=dynamic-select-field.d.ts.map

package/dist/dynamic-select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAW7C,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CA0GrF;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DynamicSelectField — async, searchable single-select for declarative forms.
+//
+// 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
+// text input, it renders a typeahead combobox that queries the canonical
+// options endpoint as the user types:
+//
+//   GET /api/options/<ref>?field=id&q=<text>&limit=<n>
+//
+// reusing `useOptionsResolver` (which already debounce-aborts in-flight
+// requests). It is the metacore equivalent of 7leguas' `search.go` / dynamic
+// `type: search` field, but driven entirely from the manifest — so an addon
+// declares `type: "dynamic_select"` + `ref` and gets a searchable picker with
+// zero custom React.
+//
+// Resolution path (highest priority first):
+//   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.
+import { useEffect, useState } from 'react';
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
+import { Check, ChevronsUpDown, Loader2 } from 'lucide-react';
+import { useOptionsResolver } from './use-options-resolver';
+function useDebounced(value, ms) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        const t = setTimeout(() => setDebounced(value), ms);
+        return () => clearTimeout(t);
+    }, [value, ms]);
+    return debounced;
+}
+export function DynamicSelectField({ field, value, onChange }) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const debounced = useDebounced(search, 250);
+    // Remember the label of the option the user actually picked so the trigger
+    // shows a name (not a UUID) without a round-trip.
+    const [picked, setPicked] = useState(null);
+    const { options, loading } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: field.ref,
+        // searchEndpoint only drives the URL when there's no ref — ref is the
+        // canonical, kernel-derived path and wins.
+        endpoint: field.ref ? undefined : field.searchEndpoint,
+        query: debounced,
+        limit: 20,
+        // Don't fetch until the popover opens (and keep fetching as the query
+        // changes while open).
+        enabled: open,
+    });
+    const selectedLabel = (picked && String(picked.id) === String(value) ? picked.label : null) ??
+        options.find((o) => String(o.id) === String(value))?.label ??
+        (value ? String(value) : '');
+    const handlePick = (opt) => {
+        setPicked(opt);
+        onChange(String(opt.id));
+        setOpen(false);
+        setSearch('');
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, className: "w-full justify-between font-normal", "data-empty": !value, children: [_jsx("span", { className: 'truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || field.placeholder || 'Buscar…' }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
+                // Match the trigger width without an arbitrary Tailwind class
+                // (those don't always survive a consuming app's Tailwind scan).
+                style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: field.placeholder || '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(CommandEmpty, { children: debounced ? 'Sin resultados' : 'Escribí para buscar…' })), !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 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsxs("div", { className: "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)));
+                                    }) }))] })] }) })] }));
+}
+export default DynamicSelectField;

package/dist/types.d.ts

@@ -100,7 +100,7 @@ export interface FieldValidation {
     max?: number;
     custom?: string;
 }
-export type FieldWidget = 'text' | 'textarea' | 'richtext' | 'color' | 'number' | 'date' | 'select' | 'switch';
+export type FieldWidget = 'text' | 'textarea' | 'richtext' | 'color' | 'number' | 'date' | 'select' | 'dynamic_select' | 'switch';
 export interface ActionFieldDef {
     key: string;
     label: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/dynamic-form-schema.ts

@@ -119,6 +119,9 @@ export function resolveWidget(field: ActionFieldDef): string {
     switch (field.type) {
         case 'textarea': return 'textarea'
         case 'select': return 'select'
+        // Async searchable single-select against /api/options/<ref>. The
+        // declarative replacement for typing a raw FK UUID.
+        case 'dynamic_select': return 'dynamic_select'
         case 'boolean': return 'switch'
         case 'number': return 'number'
         case 'date': return 'date'

package/src/dynamic-form.tsx

@@ -18,9 +18,11 @@ import type { ActionFieldDef } from './types'
 import { buildZodSchema, resolveWidget, isLineItemsField } from './dynamic-form-schema'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { DynamicLineItems } from './dynamic-line-items'
+import { DynamicSelectField } from './dynamic-select-field'
 
 export { buildZodSchema, resolveWidget }
 export { DynamicLineItems } from './dynamic-line-items'
+export { DynamicSelectField } from './dynamic-select-field'
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -123,6 +125,12 @@ function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
         return <DynamicLineItems field={field} value={value} onChange={onChange} />
     }
     const widget = resolveWidget(field)
+    // Async searchable picker (typeahead against /api/options/<ref>?q=…).
+    // Preferred for FK fields with large option sets — no UUID typing, no
+    // dumping every row into a plain <select>.
+    if (widget === 'dynamic_select') {
+        return <DynamicSelectField field={field} value={value} onChange={onChange} />
+    }
     // Ref-driven select: hook into useOptionsResolver so the canonical
     // /api/options/<ref>?field=id endpoint feeds the dropdown. This is
     // the path the kernel auto-derives for FK columns; legacy callers

package/src/dynamic-line-items.tsx

@@ -21,6 +21,7 @@ import {
 import { Plus, Trash2 } from 'lucide-react'
 import type { ActionFieldDef } from './types'
 import { resolveWidget, getItemFields } from './dynamic-form-schema'
+import { DynamicSelectField } from './dynamic-select-field'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 
 export interface DynamicLineItemsProps {
@@ -125,6 +126,11 @@ interface CellRendererProps {
 // a scalar widget).
 function CellRenderer({ field, value, onChange, disabled }: CellRendererProps) {
     const widget = resolveWidget(field)
+    // Async searchable picker per row cell — e.g. the account_id column of a
+    // journal entry's debit/credit lines. Same widget as the flat form.
+    if (widget === 'dynamic_select') {
+        return <DynamicSelectField field={field} value={value} onChange={onChange} />
+    }
     if (widget === 'select' && field.ref) {
         return <RefCell field={field} value={value} onChange={onChange} disabled={disabled} />
     }

package/src/dynamic-select-field.tsx

@@ -0,0 +1,164 @@
+// DynamicSelectField — async, searchable single-select for declarative forms.
+//
+// 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
+// text input, it renders a typeahead combobox that queries the canonical
+// options endpoint as the user types:
+//
+//   GET /api/options/<ref>?field=id&q=<text>&limit=<n>
+//
+// reusing `useOptionsResolver` (which already debounce-aborts in-flight
+// requests). It is the metacore equivalent of 7leguas' `search.go` / dynamic
+// `type: search` field, but driven entirely from the manifest — so an addon
+// declares `type: "dynamic_select"` + `ref` and gets a searchable picker with
+// zero custom React.
+//
+// Resolution path (highest priority first):
+//   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.
+import { useEffect, useState } from 'react'
+import {
+    Button,
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@asteby/metacore-ui/primitives'
+import { Check, ChevronsUpDown, Loader2 } from 'lucide-react'
+import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
+import type { ActionFieldDef } from './types'
+
+function useDebounced<T>(value: T, ms: number): T {
+    const [debounced, setDebounced] = useState(value)
+    useEffect(() => {
+        const t = setTimeout(() => setDebounced(value), ms)
+        return () => clearTimeout(t)
+    }, [value, ms])
+    return debounced
+}
+
+export interface DynamicSelectFieldProps {
+    field: ActionFieldDef
+    value: any
+    onChange: (v: any) => void
+}
+
+export function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps) {
+    const [open, setOpen] = useState(false)
+    const [search, setSearch] = useState('')
+    const debounced = useDebounced(search, 250)
+    // Remember the label of the option the user actually picked so the trigger
+    // shows a name (not a UUID) without a round-trip.
+    const [picked, setPicked] = useState<ResolvedOption | null>(null)
+
+    const { options, loading } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: field.ref,
+        // searchEndpoint only drives the URL when there's no ref — ref is the
+        // canonical, kernel-derived path and wins.
+        endpoint: field.ref ? undefined : field.searchEndpoint,
+        query: debounced,
+        limit: 20,
+        // Don't fetch until the popover opens (and keep fetching as the query
+        // changes while open).
+        enabled: open,
+    })
+
+    const selectedLabel =
+        (picked && String(picked.id) === String(value) ? picked.label : null) ??
+        options.find((o) => String(o.id) === String(value))?.label ??
+        (value ? String(value) : '')
+
+    const handlePick = (opt: ResolvedOption) => {
+        setPicked(opt)
+        onChange(String(opt.id))
+        setOpen(false)
+        setSearch('')
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    id={field.key}
+                    className="w-full justify-between font-normal"
+                    data-empty={!value}
+                >
+                    <span className={'truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
+                        {selectedLabel || field.placeholder || 'Buscar…'}
+                    </span>
+                    <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent
+                className="p-0"
+                align="start"
+                // Match the trigger width without an arbitrary Tailwind class
+                // (those don't always survive a consuming app's Tailwind scan).
+                style={{ width: 'var(--radix-popover-trigger-width)' }}
+            >
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder={field.placeholder || 'Buscar…'}
+                        value={search}
+                        onValueChange={setSearch}
+                    />
+                    <CommandList>
+                        {loading && (
+                            <div className="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
+                                <Loader2 className="size-4 animate-spin" />
+                                Buscando…
+                            </div>
+                        )}
+                        {!loading && options.length === 0 && (
+                            <CommandEmpty>
+                                {debounced ? 'Sin resultados' : 'Escribí para buscar…'}
+                            </CommandEmpty>
+                        )}
+                        {!loading && options.length > 0 && (
+                            <CommandGroup className="max-h-64 overflow-auto">
+                                {options.map((opt) => {
+                                    const isSel = String(opt.id) === String(value)
+                                    return (
+                                        <CommandItem
+                                            key={String(opt.id)}
+                                            value={String(opt.id)}
+                                            onSelect={() => handlePick(opt)}
+                                        >
+                                            <Check className={'mr-2 size-4 ' + (isSel ? 'opacity-100' : 'opacity-0')} />
+                                            <div className="flex min-w-0 flex-col">
+                                                <span className="truncate">{opt.label}</span>
+                                                {opt.description && (
+                                                    <span className="text-muted-foreground truncate text-xs">
+                                                        {opt.description}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </CommandItem>
+                                    )
+                                })}
+                            </CommandGroup>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export default DynamicSelectField

package/src/types.ts

@@ -116,6 +116,7 @@ export type FieldWidget =
     | 'number'
     | 'date'
     | 'select'
+    | 'dynamic_select'
     | 'switch'
 
 export interface ActionFieldDef {