@asteby/metacore-runtime-react 13.10.1 → 13.10.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @asteby/metacore-runtime-react
 
+## 13.10.2
+
+### Patch Changes
+
+- 2813c61: fix(native-form): render rich widgets from column metadata (ref→searchable picker, image/upload→dropzone)
+
+  The native create/edit modal (`DynamicRecordDialog`, the one `CreateRecordDialog`
+  wraps and fetches `/metadata/modal/:model` for) only routed FK columns to its
+  searchable picker when they shipped a legacy `searchEndpoint` / `type: "search"`.
+  Now that the kernel serves a belongs_to column's `ref` (and an explicit
+  `widget`) on modal fields, a plain `ref` column degraded to a raw uuid text input.
+
+  `EditField` now honors:
+  - `field.ref` (or the snake_case `source`/`relation` aliases, or
+    `widget: "dynamic_select"`) → renders `DynamicSelectField`: an async typeahead
+    against `/api/options/<ref>?field=id` with option thumbnails when the remote
+    rows carry an `image` (e.g. a brand logo). Static inline `options` still take
+    the enum `<Select>` path — a `ref` column ships no inline options, so the FK
+    branch never shadows a static enum.
+  - `widget: "upload"` (alongside the existing `type: "image"`) → the themed file
+    dropzone, same control as the Brand logo.
+
+  Also fixes `deriveRelationFormFields` (the column→field mapper for
+  `DynamicRelation` inline child forms): it now carries `col.ref` through to the
+  field so a belongs_to column resolves to `dynamic_select`, and maps
+  `image`/`media-gallery` columns to media field types so they resolve to the
+  `upload` widget instead of a text input.
+
 ## 13.10.1
 
 ### Patch Changes

package/dist/dialogs/dynamic-record.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAmE1C,MAAM,WAAW,wBAAwB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IAClF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IACpG;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAsDD,wBAAgB,mBAAmB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,GACT,EAAE,wBAAwB,2CAsP1B"}
+{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAwF1C,MAAM,WAAW,wBAAwB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IAClF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IACpG;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAsDD,wBAAgB,mBAAmB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,GACT,EAAE,wBAAwB,2CAsP1B"}

package/dist/dialogs/dynamic-record.js

@@ -12,6 +12,8 @@ import { format, parseISO } from 'date-fns';
 import { es } from 'date-fns/locale';
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon } from 'lucide-react';
 import { useApi } from '../api-context';
+import { DynamicSelectField } from '../dynamic-select-field';
+import { getFieldRef } from '../dynamic-form-schema';
 function resolvePath(obj, path) {
     return path.split('.').reduce((acc, part) => acc?.[part], obj);
 }
@@ -260,9 +262,21 @@ function EditField({ field, value, onChange }) {
     if (field.type === 'textarea') {
         return (_jsx(Textarea, { value: value ?? '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, rows: 4 }));
     }
-    if (field.type === 'image') {
+    // Media widgets: the kernel may serve an explicit `widget: 'upload'` (or the
+    // `image` type) for a file/photo column. Both render the themed dropzone
+    // that POSTs to the host upload endpoint — same control as the Brand logo.
+    if (field.type === 'image' || field.widget === 'upload') {
         return _jsx(ImageUploadField, { field: field, value: value, onChange: onChange });
     }
+    // FK columns: a `ref` (kernel-derived belongs_to target) or an explicit
+    // `widget: 'dynamic_select'` renders the async searchable picker against
+    // /api/options/<ref>?field=id — with option thumbnails when the remote rows
+    // carry an `image` — instead of a raw FK uuid text input. Static inline
+    // `options` are handled by the enum <Select> branch below; a ref column does
+    // not ship inline options, so this never shadows a static enum.
+    if ((getFieldRef(field) || field.widget === 'dynamic_select') && !field.options?.length) {
+        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange });
+    }
     if (field.type === 'search' && field.searchEndpoint) {
         return _jsx(SearchField, { field: field, value: value, onChange: onChange });
     }

package/dist/dynamic-relation-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-relation-helpers.d.ts","sourceRoot":"","sources":["../src/dynamic-relation-helpers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAA;AAEhE,MAAM,WAAW,YAAY;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACrC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBxB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAC9B,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAGrB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACpC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,EAC3D,UAAU,EAAE,MAAM,GACnB,cAAc,EAAE,CAelB;AAcD;;;;GAIG;AACH,wBAAgB,cAAc,CAC1B,GAAG,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,EAChD,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,GACnB,MAAM,CAKR;AAMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACnC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAcrB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CACpC,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EACzD,aAAa,EAAE,MAAM,GACtB,MAAM,EAAE,CASV;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAC9B,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EACzD,aAAa,EAAE,MAAM,GACtB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAU9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,GAC5B;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CAYzC;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,GAAG,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,EACrC,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,OAAO,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,GAAG,SAAS,GAC5D,MAAM,CAiBR"}
+{"version":3,"file":"dynamic-relation-helpers.d.ts","sourceRoot":"","sources":["../src/dynamic-relation-helpers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAA;AAEhE,MAAM,WAAW,YAAY;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACrC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBxB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAC9B,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAGrB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACpC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,EAC3D,UAAU,EAAE,MAAM,GACnB,cAAc,EAAE,CAoBlB;AAkBD;;;;GAIG;AACH,wBAAgB,cAAc,CAC1B,GAAG,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,EAChD,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,GACnB,MAAM,CAKR;AAMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACnC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAcrB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CACpC,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EACzD,aAAa,EAAE,MAAM,GACtB,MAAM,EAAE,CASV;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAC9B,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EACzD,aAAa,EAAE,MAAM,GACtB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAU9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,GAC5B;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CAYzC;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,GAAG,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,EACrC,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,OAAO,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,GAAG,SAAS,GAC5D,MAAM,CAiBR"}

package/dist/dynamic-relation-helpers.js

@@ -59,6 +59,11 @@ export function deriveRelationFormFields(metadata, foreignKey) {
             type: columnTypeToFieldType(col),
             required: false,
             options: col.options?.map(o => ({ value: String(o.value), label: o.label })),
+            // Carry the FK target through so a belongs_to column renders the
+            // async searchable picker (resolveWidget → 'dynamic_select') rather
+            // than a raw uuid text input. Without this the column lost its `ref`
+            // crossing the column→field boundary and degraded to plain text.
+            ref: col.ref,
         });
     }
     return out;
@@ -69,6 +74,10 @@ function columnTypeToFieldType(col) {
         case 'boolean': return 'boolean';
         case 'date': return 'date';
         case 'select': return 'select';
+        // Media columns map to the upload widget (resolveWidget → 'upload') so an
+        // image/photo column gets the file dropzone instead of a text input.
+        case 'image': return 'image';
+        case 'media-gallery': return 'media';
         case 'text':
         default:
             return 'string';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.10.1",
+  "version": "13.10.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.1.0",
-    "@asteby/metacore-ui": "2.1.2"
+    "@asteby/metacore-ui": "2.1.2",
+    "@asteby/metacore-sdk": "3.1.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-relation.test.ts

@@ -10,6 +10,7 @@ import {
     pickOptionLabel,
     relationRowKey,
 } from '../dynamic-relation-helpers'
+import { resolveWidget } from '../dynamic-form-schema'
 import type { ColumnDefinition, TableMetadata } from '../types'
 
 describe('buildRelationFilterParams', () => {
@@ -134,6 +135,36 @@ describe('deriveRelationFormFields', () => {
         expect(deriveRelationFormFields(undefined, 'invoice_id')).toEqual([])
         expect(deriveRelationFormFields({ columns: [] }, 'invoice_id')).toEqual([])
     })
+
+    // The column→field boundary must carry `ref` (FK target) so a belongs_to
+    // column renders the searchable picker instead of a raw uuid text input.
+    it('propaga el ref (FK target) de la columna al field', () => {
+        const meta: Pick<TableMetadata, 'columns'> = {
+            columns: [
+                { key: 'product_id', label: 'Producto', type: 'text', sortable: true, filterable: false, ref: 'product' },
+            ],
+        }
+        const fields = deriveRelationFormFields(meta, 'invoice_id')
+        const prod = fields.find(f => f.key === 'product_id')
+        expect(prod?.ref).toBe('product')
+        // …and that ref drives the widget to the async searchable picker.
+        expect(resolveWidget(prod!)).toBe('dynamic_select')
+    })
+
+    // Media columns must map to a media-bearing field type so the form renders
+    // the upload dropzone (resolveWidget → 'upload'), not a text input.
+    it('mapea columnas image/media-gallery a tipos que resuelven a upload', () => {
+        const meta: Pick<TableMetadata, 'columns'> = {
+            columns: [
+                { key: 'logo', label: 'Logo', type: 'image', sortable: false, filterable: false },
+                { key: 'gallery', label: 'Galería', type: 'media-gallery', sortable: false, filterable: false },
+            ],
+        }
+        const fields = deriveRelationFormFields(meta, 'invoice_id')
+        const byKey = Object.fromEntries(fields.map(f => [f.key, f]))
+        expect(resolveWidget(byKey['logo'])).toBe('upload')
+        expect(resolveWidget(byKey['gallery'])).toBe('upload')
+    })
 })
 
 describe('relationRowKey', () => {

package/src/dialogs/dynamic-record.tsx

@@ -40,6 +40,9 @@ import { format, parseISO } from 'date-fns'
 import { es } from 'date-fns/locale'
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon } from 'lucide-react'
 import { useApi } from '../api-context'
+import { DynamicSelectField } from '../dynamic-select-field'
+import { getFieldRef } from '../dynamic-form-schema'
+import type { ActionFieldDef } from '../types'
 
 interface FieldOption {
     value: string
@@ -58,6 +61,24 @@ interface FieldDef {
     hidden?: boolean
     searchEndpoint?: string
     filterBy?: string
+    /**
+     * FK target model the kernel auto-derives for a belongs_to column (>=
+     * v0.46.x serves it on modal fields, not just action fields). When present
+     * the native form renders an async searchable picker (`DynamicSelectField`)
+     * against `/api/options/<ref>?field=id` — with option thumbnails when the
+     * remote rows carry an `image` — instead of a raw FK text input. Tolerates
+     * the snake_case `source`/`relation` aliases the manifest may serve.
+     */
+    ref?: string
+    source?: string
+    relation?: string
+    /**
+     * Explicit renderer hint. Wins over the `type` switch: `dynamic_select`
+     * forces the searchable picker, `upload` forces the file dropzone. Lets the
+     * kernel opt a plain text/uuid column into a rich widget without changing
+     * its SQL type. Unknown values fall through to the `type`-based default.
+     */
+    widget?: string
 }
 
 // Permissive shape: the wire payload may omit some fields (e.g. `title` is
@@ -566,10 +587,23 @@ function EditField({ field, value, onChange }: {
         )
     }
 
-    if (field.type === 'image') {
+    // Media widgets: the kernel may serve an explicit `widget: 'upload'` (or the
+    // `image` type) for a file/photo column. Both render the themed dropzone
+    // that POSTs to the host upload endpoint — same control as the Brand logo.
+    if (field.type === 'image' || field.widget === 'upload') {
         return <ImageUploadField field={field} value={value} onChange={onChange} />
     }
 
+    // FK columns: a `ref` (kernel-derived belongs_to target) or an explicit
+    // `widget: 'dynamic_select'` renders the async searchable picker against
+    // /api/options/<ref>?field=id — with option thumbnails when the remote rows
+    // carry an `image` — instead of a raw FK uuid text input. Static inline
+    // `options` are handled by the enum <Select> branch below; a ref column does
+    // not ship inline options, so this never shadows a static enum.
+    if ((getFieldRef(field as ActionFieldDef) || field.widget === 'dynamic_select') && !field.options?.length) {
+        return <DynamicSelectField field={field as ActionFieldDef} value={value} onChange={onChange} />
+    }
+
     if (field.type === 'search' && field.searchEndpoint) {
         return <SearchField field={field} value={value} onChange={onChange} />
     }

package/src/dynamic-relation-helpers.ts

@@ -82,6 +82,11 @@ export function deriveRelationFormFields(
             type: columnTypeToFieldType(col),
             required: false,
             options: col.options?.map(o => ({ value: String(o.value), label: o.label })),
+            // Carry the FK target through so a belongs_to column renders the
+            // async searchable picker (resolveWidget → 'dynamic_select') rather
+            // than a raw uuid text input. Without this the column lost its `ref`
+            // crossing the column→field boundary and degraded to plain text.
+            ref: col.ref,
         })
     }
     return out
@@ -93,6 +98,10 @@ function columnTypeToFieldType(col: ColumnDefinition): string {
         case 'boolean': return 'boolean'
         case 'date': return 'date'
         case 'select': return 'select'
+        // Media columns map to the upload widget (resolveWidget → 'upload') so an
+        // image/photo column gets the file dropzone instead of a text input.
+        case 'image': return 'image'
+        case 'media-gallery': return 'media'
         case 'text':
         default:
             return 'string'