@asteby/metacore-runtime-react 18.2.0 → 18.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 18.3.0
+
+### Minor Changes
+
+- fc14b4f: Relation (one_to_many) cells now show the FK product image: when an FK column's backend-resolved sibling carries an `image`, the relation row renders a thumbnail + label instead of plain text. The nested line-item edit form drops server-managed/audit columns (`id`, `created_at`, `updated_at`, `deleted_at`, `created_by(_id)`, `updated_by(_id)`) so they no longer render as `[object Object]` inputs, and the nested `dynamic_select` is seeded with the existing value's label/image from the initial record so the trigger shows the name + thumbnail instead of a raw UUID. The image-url resolver context moved to its own `image-url-context` module to avoid a circular import.
+
 ## 18.2.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 import type { ModelSchema } from './types';
-/** Resolves a (possibly relative) storage path into a fetchable URL. */
-export type GetImageUrl = (path: string | null | undefined) => string;
+import { type GetImageUrl } from '../image-url-context';
+export type { GetImageUrl };
 export interface FieldOption {
     value: string;
     label: string;

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

package/dist/dialogs/dynamic-record.js

@@ -27,7 +27,7 @@ import { getFieldRef } from '../dynamic-form-schema';
 import { isNilUuid, normalizeNilUuid } from '../nil-uuid';
 import { humanizeToken } from '../dynamic-columns-helpers';
 import { formatDateCell } from '../dynamic-columns';
-const identityImageUrl = (p) => p ?? '';
+import { ImageUrlContext, identityImageUrl } from '../image-url-context';
 // localizedModelName resolves the (possibly addon-i18n) model name: prefer the
 // translated titleKey, fall back to the backend-provided raw title.
 function localizedModelName(meta, t) {
@@ -157,7 +157,6 @@ const MODE_CONFIG = {
 // Context threading host runtime values to nested field components (uploads,
 // image leads, tz-aware dates) without prop-drilling through every renderer.
 const ModelContext = createContext('');
-const ImageUrlContext = createContext(identityImageUrl);
 const TimeZoneContext = createContext(undefined);
 export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, schema, onDelete, onEdit, onOpenFullPage, initialRecord, getImageUrl = identityImageUrl, timeZone, }) {
     const api = useApi();

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,EACH,cAAc,EACd,aAAa,EAGhB,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,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,+BAkGlB"}
+{"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,EACH,cAAc,EACd,aAAa,EAGhB,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,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,+BAmGlB"}

package/dist/dynamic-form.js

@@ -77,10 +77,35 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
                     const fullWidth = isLineItemsField(field) ||
                         resolveWidget(field) === 'textarea' ||
                         resolveWidget(field) === 'richtext';
-                    return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsx(FieldRenderer, { field: field, value: values[field.key], onChange: (v) => update(field.key, v) }), errors[field.key] && (_jsx("span", { className: "text-red-500 text-sm", role: "alert", children: errors[field.key] }))] }, field.key));
+                    return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsx(FieldRenderer, { field: field, value: values[field.key], onChange: (v) => update(field.key, v), initialValues: initialValues }), errors[field.key] && (_jsx("span", { className: "text-red-500 text-sm", role: "alert", children: errors[field.key] }))] }, field.key));
                 }) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })] })] }));
 }
-function FieldRenderer({ field, value, onChange }) {
+// seedOptionFromSibling builds a pre-resolved option for an FK field from the
+// resolved sibling the backend served on the initial record (e.g. a line item's
+// `product = { value, label, image }` alongside `product_id`). Lets the picker
+// show the name + thumbnail for an existing value without a lookup. Returns
+// undefined when the sibling carries nothing renderable.
+function seedOptionFromSibling(field, value, initialValues) {
+    if (!field.key.endsWith('_id'))
+        return undefined;
+    const sib = initialValues?.[field.key.replace(/_id$/, '')];
+    if (!sib || typeof sib !== 'object')
+        return undefined;
+    const label = sib.label ?? sib.name ?? '';
+    if (!label && !sib.image)
+        return undefined;
+    const id = String(sib.value ?? sib.id ?? value ?? '');
+    return {
+        id,
+        value: id,
+        label: String(label),
+        name: String(label),
+        image: sib.image,
+        color: sib.color,
+        icon: sib.icon,
+    };
+}
+function FieldRenderer({ field, value, onChange, initialValues }) {
     // Repeatable line-items group → render the row grid. Its value is an array
     // of row objects rather than a scalar.
     if (isLineItemsField(field)) {
@@ -91,7 +116,8 @@ function FieldRenderer({ field, value, onChange }) {
     // 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 });
+        const seedOption = seedOptionFromSibling(field, value, initialValues);
+        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange, seedOption: seedOption });
     }
     // File upload → themed picker that POSTs to the host upload endpoint and
     // stores the returned file url/path as the field value.

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

package/dist/dynamic-relation-helpers.js

@@ -10,6 +10,19 @@ function isEnumLikeColumn(col) {
         renderAs === 'badge' ||
         !!col.options?.length);
 }
+// Server-managed / audit columns that must never become editable form inputs.
+// They're set by the backend and several ship as resolved objects (e.g.
+// `created_by = { name, avatar, email }`) that would render as `[object Object]`.
+const MANAGED_RELATION_COLUMNS = new Set([
+    'id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+]);
 // Pulls a human label off a resolved relation/user object a backend serves:
 // `{ value, label }` (FK sibling), `{ name, … }` (user object such as
 // created_by) or `{ title }`. Returns undefined for plain/empty objects so the
@@ -122,6 +135,11 @@ export function deriveRelationFormFields(metadata, foreignKey) {
             continue;
         if (col.hidden)
             continue;
+        // Managed/audit columns are server-owned and ship resolved objects
+        // (`created_by = { name, avatar, … }`); making them editable inputs
+        // renders `[object Object]`. Never surface them in the inline form.
+        if (MANAGED_RELATION_COLUMNS.has(col.key.toLowerCase()))
+            continue;
         out.push({
             key: col.key,
             label: col.label,

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"AA2CA,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,cAAc,GACjB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,wBAAwB,EAAE,MAAM,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;CACtB;AAiBD,UAAU,WAAW;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAC9D,IAAI,EAAE,aAAa,CAAA;IACnB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IAC/D,IAAI,EAAE,cAAc,CAAA;IACpB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,oBAAoB,GAC1B,6BAA6B,GAC7B,8BAA8B,CAAA;AAEpC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D"}
+{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"AA6CA,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,cAAc,GACjB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,wBAAwB,EAAE,MAAM,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;CACtB;AAiBD,UAAU,WAAW;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAC9D,IAAI,EAAE,aAAa,CAAA;IACnB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IAC/D,IAAI,EAAE,cAAc,CAAA;IACpB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,oBAAoB,GAC1B,6BAA6B,GAC7B,8BAA8B,CAAA;AAEpC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D"}

package/dist/dynamic-relation.js

@@ -10,6 +10,8 @@ import { Plus, Trash2, Pencil } from 'lucide-react';
 import { useApi } from './api-context';
 import { useMetadataCache } from './metadata-cache';
 import { DynamicForm } from './dynamic-form';
+import { useImageUrl } from './image-url-context';
+import { OptionThumb } from './dynamic-select-field';
 import { useOptionsResolver } from './use-options-resolver';
 import { buildCreatePayload, buildPivotAttachPayload, buildPivotRowIndex, buildRelationFilterParams, deriveRelationFormFields, diffSelection, extractSelectedTargetIds, formatRelationCell, pickOptionLabel, relationRowKey, } from './dynamic-relation-helpers';
 export { buildCreatePayload, buildPivotAttachPayload, buildPivotRowIndex, buildRelationFilterParams, deriveRelationFormFields, diffSelection, extractSelectedTargetIds, formatRelationCell, objectLabel, pickOptionLabel, relationRowKey, } from './dynamic-relation-helpers';
@@ -35,6 +37,7 @@ export function DynamicRelation(props) {
 }
 function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoint, hiddenColumns = [], canCreate = true, canDelete = true, canEdit = true, strings, className, onChange, }) {
     const api = useApi();
+    const getImageUrl = useImageUrl();
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache();
     const cachedMeta = getMetadata(model);
     const labels = { ...DEFAULT_STRINGS, ...(strings || {}) };
@@ -136,6 +139,17 @@ function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoin
     }, [api, dataEndpoint, fetchAll, onChange, rowToDelete]);
     return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-model": model, children: [(labels.title || canCreate) && (_jsxs("div", { className: "flex items-center justify-between pb-3", children: [labels.title ? _jsx("h3", { className: "text-sm font-medium", children: labels.title }) : _jsx("span", {}), canCreate && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => { setEditingRow(null); setFormOpen(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), labels.addLabel] }))] })), loading ? (_jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-10 w-full" }, `rel-skeleton-${i}`))) })) : rows.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsx("div", { className: "border rounded-md divide-y bg-card", children: rows.map((row, idx) => (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [_jsx("div", { className: "flex-1 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2 text-sm", children: visibleColumns.map(col => {
                                 const cell = formatRelationCell(row, col);
+                                // FK column whose backend-resolved sibling
+                                // carries an image → render a thumbnail + label
+                                // instead of plain text (e.g. a line item's
+                                // product photo). The sibling is the column key
+                                // with the trailing `_id` stripped.
+                                const isFk = !!col.ref || col.key.endsWith('_id');
+                                const sibling = isFk ? row[col.key.replace(/_id$/, '')] : undefined;
+                                if (sibling && typeof sibling === 'object' && sibling.image) {
+                                    const label = sibling.label ?? sibling.name ?? cell;
+                                    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2", title: String(label), children: [_jsx(OptionThumb, { image: getImageUrl(sibling.image), size: 20 }), _jsx("span", { className: "truncate", children: label })] }, col.key));
+                                }
                                 return (_jsx("span", { className: "truncate", title: cell, children: cell }, col.key));
                             }) }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [canEdit && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => { setEditingRow(row); setFormOpen(true); }, "aria-label": labels.editLabel, children: _jsx(Pencil, { className: "h-4 w-4" }) })), canDelete && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setRowToDelete(row), "aria-label": labels.removeLabel, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }, relationRowKey(row, idx, foreignKey)))) })), _jsx(Dialog, { open: formOpen, onOpenChange: (open) => { setFormOpen(open); if (!open)
                     setEditingRow(null); }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editingRow ? labels.editLabel : labels.addLabel }) }), _jsx(DynamicForm, { fields: formFields, initialValues: editingRow || undefined, onSubmit: handleSubmit, onCancel: () => { setFormOpen(false); setEditingRow(null); }, submitLabel: labels.saveLabel, cancelLabel: labels.cancelLabel, disabled: submitting })] }) }), _jsx(AlertDialog, { open: !!rowToDelete, onOpenChange: (open) => !open && setRowToDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.confirmRemoveTitle }), _jsx(AlertDialogDescription, { children: labels.confirmRemoveDescription })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: submitting, children: labels.cancelLabel }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); handleDelete(); }, className: "bg-red-600 hover:bg-red-700", disabled: submitting, children: labels.removeLabel })] })] }) })] }));

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

@@ -24,7 +24,14 @@ export interface DynamicSelectFieldProps {
     field: ActionFieldDef;
     value: any;
     onChange: (v: any) => void;
+    /**
+     * Pre-resolved option for the CURRENT value (label + image/color/icon) the
+     * caller already has — e.g. the relation sibling the table served. Lets the
+     * trigger show the name + thumbnail for an existing value without waiting for
+     * a lookup (which only loads once the popover opens). Matched by id == value.
+     */
+    seedOption?: ResolvedOption | null;
 }
-export declare function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps): import("react").JSX.Element;
+export declare function DynamicSelectField({ field, value, onChange, seedOption }: DynamicSelectFieldProps): import("react").JSX.Element;
 export default DynamicSelectField;
 //# sourceMappingURL=dynamic-select-field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,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,+BA0KrF;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,+BA2KjG;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -79,7 +79,7 @@ function useDebounced(value, ms) {
     }, [value, ms]);
     return debounced;
 }
-export function DynamicSelectField({ field, value, onChange }) {
+export function DynamicSelectField({ field, value, onChange, seedOption }) {
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState('');
     const debounced = useDebounced(search, 250);
@@ -107,6 +107,7 @@ export function DynamicSelectField({ field, value, onChange }) {
     // 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) ??
         null;
     const selectedLabel = selectedOption?.label ?? (value ? String(value) : '');
     // Only switch the picker into "with thumbnails" mode when the data actually

package/dist/image-url-context.d.ts

@@ -0,0 +1,13 @@
+/** Resolves a (possibly relative) storage path into a fetchable URL. */
+export type GetImageUrl = (path: string | null | undefined) => string;
+/** Default resolver: pass the path through unchanged (works same-origin). */
+export declare const identityImageUrl: GetImageUrl;
+/**
+ * Threads the host's image-url resolver to nested field/cell components without
+ * prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
+ * fall back to `identityImageUrl` (the relative path, which renders same-origin).
+ */
+export declare const ImageUrlContext: import("react").Context<GetImageUrl>;
+/** Reads the nearest image-url resolver (identity outside a provider). */
+export declare const useImageUrl: () => GetImageUrl;
+//# sourceMappingURL=image-url-context.d.ts.map

package/dist/image-url-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-url-context.d.ts","sourceRoot":"","sources":["../src/image-url-context.tsx"],"names":[],"mappings":"AAQA,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,MAAM,CAAA;AAErE,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,WAA4B,CAAA;AAE3D;;;;GAIG;AACH,eAAO,MAAM,eAAe,sCAA+C,CAAA;AAE3E,0EAA0E;AAC1E,eAAO,MAAM,WAAW,mBAAoC,CAAA"}

package/dist/image-url-context.js

@@ -0,0 +1,17 @@
+// Image-url resolver context — its own module so any renderer (record dialog,
+// relation cells, …) can consume the host's storage-path → URL resolver without
+// importing from `dialogs/dynamic-record`. That dialog imports
+// `dynamic-relations` (which renders `dynamic-relation`), so the relation cell
+// cannot import the context back from the dialog without a circular import —
+// hence this standalone module is the single source of truth.
+import { createContext, useContext } from 'react';
+/** Default resolver: pass the path through unchanged (works same-origin). */
+export const identityImageUrl = (p) => p ?? '';
+/**
+ * Threads the host's image-url resolver to nested field/cell components without
+ * prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
+ * fall back to `identityImageUrl` (the relative path, which renders same-origin).
+ */
+export const ImageUrlContext = createContext(identityImageUrl);
+/** Reads the nearest image-url resolver (identity outside a provider). */
+export const useImageUrl = () => useContext(ImageUrlContext);

package/package.json

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

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

@@ -114,6 +114,23 @@ describe('deriveRelationFormFields', () => {
         expect(fields.find(f => f.key === 'id')).toBeUndefined()
     })
 
+    // Server-managed / audit columns ship as resolved objects (created_by =
+    // { name, avatar }) and must never become editable inputs ([object Object]).
+    it('omite columnas managed/audit aunque no estén hidden', () => {
+        const meta: Pick<TableMetadata, 'columns'> = {
+            columns: [
+                { key: 'sku', label: 'SKU', type: 'text', sortable: true, filterable: true },
+                { key: 'created_by', label: 'Creado por', type: 'text', sortable: false, filterable: false },
+                { key: 'created_by_id', label: 'Creado por id', type: 'text', sortable: false, filterable: false },
+                { key: 'created_at', label: 'Creado', type: 'date', sortable: true, filterable: false },
+                { key: 'updated_at', label: 'Actualizado', type: 'date', sortable: true, filterable: false },
+                { key: 'deleted_at', label: 'Eliminado', type: 'date', sortable: false, filterable: false },
+            ],
+        }
+        const fields = deriveRelationFormFields(meta, 'invoice_id')
+        expect(fields.map(f => f.key)).toEqual(['sku'])
+    })
+
     it('mapea types de ColumnDefinition al ActionFieldDef.type', () => {
         const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
         const byKey = Object.fromEntries(fields.map(f => [f.key, f]))

package/src/dialogs/dynamic-record.tsx

@@ -56,10 +56,11 @@ import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { humanizeToken } from '../dynamic-columns-helpers'
 import { formatDateCell } from '../dynamic-columns'
 import type { ActionFieldDef, RelationMeta } from '../types'
+import { ImageUrlContext, identityImageUrl, type GetImageUrl } from '../image-url-context'
 
-/** Resolves a (possibly relative) storage path into a fetchable URL. */
-export type GetImageUrl = (path: string | null | undefined) => string
-const identityImageUrl: GetImageUrl = (p) => p ?? ''
+// Re-export the resolver type so `index.ts`'s
+// `export type { … GetImageUrl } from './dialogs/dynamic-record'` keeps working.
+export type { GetImageUrl }
 
 export interface FieldOption {
     value: string
@@ -330,7 +331,6 @@ const MODE_CONFIG = {
 // Context threading host runtime values to nested field components (uploads,
 // image leads, tz-aware dates) without prop-drilling through every renderer.
 const ModelContext = createContext('')
-const ImageUrlContext = createContext<GetImageUrl>(identityImageUrl)
 const TimeZoneContext = createContext<string | undefined>(undefined)
 
 export function DynamicRecordDialog({

package/src/dynamic-form.tsx

@@ -129,6 +129,7 @@ export function DynamicForm({
                                 field={field}
                                 value={values[field.key]}
                                 onChange={(v: any) => update(field.key, v)}
+                                initialValues={initialValues}
                             />
                             {errors[field.key] && (
                                 <span className="text-red-500 text-sm" role="alert">{errors[field.key]}</span>
@@ -155,9 +156,38 @@ interface FieldRendererProps {
     field: ActionFieldDef
     value: any
     onChange: (v: any) => void
+    /** The form's initial record — used to seed an FK picker's existing label/image. */
+    initialValues?: Record<string, any>
+}
+
+// seedOptionFromSibling builds a pre-resolved option for an FK field from the
+// resolved sibling the backend served on the initial record (e.g. a line item's
+// `product = { value, label, image }` alongside `product_id`). Lets the picker
+// show the name + thumbnail for an existing value without a lookup. Returns
+// undefined when the sibling carries nothing renderable.
+function seedOptionFromSibling(
+    field: ActionFieldDef,
+    value: any,
+    initialValues?: Record<string, any>,
+): ResolvedOption | undefined {
+    if (!field.key.endsWith('_id')) return undefined
+    const sib = initialValues?.[field.key.replace(/_id$/, '')]
+    if (!sib || typeof sib !== 'object') return undefined
+    const label = sib.label ?? sib.name ?? ''
+    if (!label && !sib.image) return undefined
+    const id = String(sib.value ?? sib.id ?? value ?? '')
+    return {
+        id,
+        value: id,
+        label: String(label),
+        name: String(label),
+        image: sib.image,
+        color: sib.color,
+        icon: sib.icon,
+    }
 }
 
-function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
+function FieldRenderer({ field, value, onChange, initialValues }: FieldRendererProps) {
     // Repeatable line-items group → render the row grid. Its value is an array
     // of row objects rather than a scalar.
     if (isLineItemsField(field)) {
@@ -168,7 +198,8 @@ function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
     // 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} />
+        const seedOption = seedOptionFromSibling(field, value, initialValues)
+        return <DynamicSelectField field={field} value={value} onChange={onChange} seedOption={seedOption} />
     }
     // File upload → themed picker that POSTs to the host upload endpoint and
     // stores the returned file url/path as the field value.

package/src/dynamic-relation-helpers.ts

@@ -20,6 +20,20 @@ function isEnumLikeColumn(col: ColumnDefinition): boolean {
 
 export type DynamicRelationKind = 'one_to_many' | 'many_to_many'
 
+// Server-managed / audit columns that must never become editable form inputs.
+// They're set by the backend and several ship as resolved objects (e.g.
+// `created_by = { name, avatar, email }`) that would render as `[object Object]`.
+const MANAGED_RELATION_COLUMNS = new Set([
+    'id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+])
+
 // Pulls a human label off a resolved relation/user object a backend serves:
 // `{ value, label }` (FK sibling), `{ name, … }` (user object such as
 // created_by) or `{ title }`. Returns undefined for plain/empty objects so the
@@ -146,6 +160,10 @@ export function deriveRelationFormFields(
     for (const col of metadata.columns) {
         if (col.key === foreignKey) continue
         if (col.hidden) continue
+        // Managed/audit columns are server-owned and ship resolved objects
+        // (`created_by = { name, avatar, … }`); making them editable inputs
+        // renders `[object Object]`. Never surface them in the inline form.
+        if (MANAGED_RELATION_COLUMNS.has(col.key.toLowerCase())) continue
         out.push({
             key: col.key,
             label: col.label,

package/src/dynamic-relation.tsx

@@ -25,6 +25,8 @@ import { Plus, Trash2, Pencil } from 'lucide-react'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
 import { DynamicForm } from './dynamic-form'
+import { useImageUrl } from './image-url-context'
+import { OptionThumb } from './dynamic-select-field'
 import { useOptionsResolver } from './use-options-resolver'
 import type { ApiResponse, TableMetadata } from './types'
 import {
@@ -169,6 +171,7 @@ function OneToManyRelation({
     onChange,
 }: DynamicRelationOneToManyProps) {
     const api = useApi()
+    const getImageUrl = useImageUrl()
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache()
     const cachedMeta = getMetadata(model)
     const labels = { ...DEFAULT_STRINGS, ...(strings || {}) }
@@ -305,6 +308,22 @@ function OneToManyRelation({
                             <div className="flex-1 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2 text-sm">
                                 {visibleColumns.map(col => {
                                     const cell = formatRelationCell(row, col)
+                                    // FK column whose backend-resolved sibling
+                                    // carries an image → render a thumbnail + label
+                                    // instead of plain text (e.g. a line item's
+                                    // product photo). The sibling is the column key
+                                    // with the trailing `_id` stripped.
+                                    const isFk = !!col.ref || col.key.endsWith('_id')
+                                    const sibling = isFk ? (row as any)[col.key.replace(/_id$/, '')] : undefined
+                                    if (sibling && typeof sibling === 'object' && sibling.image) {
+                                        const label = sibling.label ?? sibling.name ?? cell
+                                        return (
+                                            <span key={col.key} className="flex min-w-0 items-center gap-2" title={String(label)}>
+                                                <OptionThumb image={getImageUrl(sibling.image)} size={20} />
+                                                <span className="truncate">{label}</span>
+                                            </span>
+                                        )
+                                    }
                                     return (
                                         <span key={col.key} className="truncate" title={cell}>
                                             {cell}

package/src/dynamic-select-field.tsx

@@ -138,9 +138,16 @@ export interface DynamicSelectFieldProps {
     field: ActionFieldDef
     value: any
     onChange: (v: any) => void
+    /**
+     * Pre-resolved option for the CURRENT value (label + image/color/icon) the
+     * caller already has — e.g. the relation sibling the table served. Lets the
+     * trigger show the name + thumbnail for an existing value without waiting for
+     * a lookup (which only loads once the popover opens). Matched by id == value.
+     */
+    seedOption?: ResolvedOption | null
 }
 
-export function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps) {
+export function DynamicSelectField({ field, value, onChange, seedOption }: DynamicSelectFieldProps) {
     const [open, setOpen] = useState(false)
     const [search, setSearch] = useState('')
     const debounced = useDebounced(search, 250)
@@ -172,6 +179,7 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
     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) ??
         null
 
     const selectedLabel = selectedOption?.label ?? (value ? String(value) : '')

package/src/image-url-context.tsx

@@ -0,0 +1,23 @@
+// Image-url resolver context — its own module so any renderer (record dialog,
+// relation cells, …) can consume the host's storage-path → URL resolver without
+// importing from `dialogs/dynamic-record`. That dialog imports
+// `dynamic-relations` (which renders `dynamic-relation`), so the relation cell
+// cannot import the context back from the dialog without a circular import —
+// hence this standalone module is the single source of truth.
+import { createContext, useContext } from 'react'
+
+/** Resolves a (possibly relative) storage path into a fetchable URL. */
+export type GetImageUrl = (path: string | null | undefined) => string
+
+/** Default resolver: pass the path through unchanged (works same-origin). */
+export const identityImageUrl: GetImageUrl = (p) => p ?? ''
+
+/**
+ * Threads the host's image-url resolver to nested field/cell components without
+ * prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
+ * fall back to `identityImageUrl` (the relative path, which renders same-origin).
+ */
+export const ImageUrlContext = createContext<GetImageUrl>(identityImageUrl)
+
+/** Reads the nearest image-url resolver (identity outside a provider). */
+export const useImageUrl = () => useContext(ImageUrlContext)