@byline/admin 3.13.3 → 3.15.0

package/dist/fields/field-renderer.js

@@ -12,6 +12,7 @@ import { ImageField } from "./image/image-field.js";
 import { LocaleBadge } from "./locale-badge.js";
 import { NumericalField } from "./numerical/numerical-field.js";
 import { RelationField } from "./relation/relation-field.js";
+import { RelationManyField } from "./relation/relation-many-field.js";
 import { SelectField } from "./select/select-field.js";
 import { TextField } from "./text/text-field.js";
 import { TextAreaField } from "./text-area/text-area-field.js";
@@ -152,6 +153,15 @@ const FieldRenderer = ({ field, defaultValue, basePath, disableSorting, hideLabe
                     collectionPath: collectionPath
                 });
             case 'relation':
+                if (field.hasMany) return /*#__PURE__*/ jsx(RelationManyField, {
+                    field: hideLabel ? {
+                        ...field,
+                        label: void 0
+                    } : field,
+                    defaultValue: defaultValue,
+                    path: path,
+                    id: htmlId
+                });
                 return /*#__PURE__*/ jsx(RelationField, {
                     field: hideLabel ? {
                         ...field,

package/dist/fields/relation/relation-column-formatter.d.ts

@@ -0,0 +1,28 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { CollectionDefinition, ColumnDefinition, ColumnFormatter, RelationField } from '@byline/core';
+/**
+ * Pure text projection of a relation cell: the target's title for a single
+ * relation, or "A, B, +N more" for `hasMany`. Unresolved targets are skipped;
+ * an all-empty cell yields `null` (the formatter renders a muted dash).
+ *
+ * `displayField` is the resolved chain
+ * (`field.displayField` → target `useAsTitle` → first text field).
+ */
+export declare function formatRelationCellText(field: Pick<RelationField, 'hasMany'>, value: unknown, displayField: string | null): string | null;
+/**
+ * The built-in `{ component }` column formatter for a `relation` field. Resolves
+ * the target collection's `useAsTitle` at render time and renders the cell text.
+ */
+export declare function relationColumnFormatter(field: RelationField): ColumnFormatter;
+/**
+ * Return a copy of `columns` with {@link relationColumnFormatter} applied to any
+ * `relation`-typed column that doesn't already declare its own formatter, so
+ * relation cells render target titles by default. Other columns are untouched.
+ */
+export declare function applyRelationColumnFormatters(columns: ColumnDefinition[], definition: CollectionDefinition): ColumnDefinition[];

package/dist/fields/relation/relation-column-formatter.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { getCollectionDefinition } from "@byline/core";
+import { resolveFallbackDisplayField, resolveRowLabel } from "./relation-display.js";
+const MAX_SHOWN = 3;
+function labelFor(env, displayField) {
+    if (null == env || false === env._resolved || null == env.document) return null;
+    return resolveRowLabel(env.document, displayField);
+}
+function formatRelationCellText(field, value, displayField) {
+    const envelopes = field.hasMany ? Array.isArray(value) ? value : [] : value ? [
+        value
+    ] : [];
+    const labels = envelopes.map((env)=>labelFor(env, displayField)).filter((l)=>null != l && l.length > 0);
+    if (0 === labels.length) return null;
+    if (!field.hasMany) return labels[0] ?? null;
+    const shown = labels.slice(0, MAX_SHOWN);
+    const extra = labels.length - shown.length;
+    return extra > 0 ? `${shown.join(', ')}, +${extra} more` : shown.join(', ');
+}
+function relationColumnFormatter(field) {
+    return {
+        component: ({ value })=>{
+            const targetDef = getCollectionDefinition(field.targetCollection);
+            const displayField = field.displayField ?? targetDef?.useAsTitle ?? resolveFallbackDisplayField(targetDef);
+            const text = formatRelationCellText(field, value, displayField);
+            return null != text ? /*#__PURE__*/ jsx("span", {
+                className: "byline-relation-column",
+                children: text
+            }) : /*#__PURE__*/ jsx("span", {
+                className: "byline-relation-column-empty muted",
+                children: "—"
+            });
+        }
+    };
+}
+function applyRelationColumnFormatters(columns, definition) {
+    return columns.map((col)=>{
+        if (col.formatter) return col;
+        const field = definition.fields.find((f)=>f.name === String(col.fieldName));
+        if (field?.type === 'relation') return {
+            ...col,
+            formatter: relationColumnFormatter(field)
+        };
+        return col;
+    });
+}
+export { applyRelationColumnFormatters, formatRelationCellText, relationColumnFormatter };

package/dist/fields/relation/relation-field.module.js

@@ -8,6 +8,21 @@ const relation_field_module = {
     errorText: "error-text-jHQh34",
     tile: "tile-Y3_yre",
     actions: "actions-Nov8hS",
-    mono: "mono-y8Xo6b"
+    mono: "mono-y8Xo6b",
+    many: "many-ohEmr7",
+    "many-empty": "many-empty-T0OJd9",
+    manyEmpty: "many-empty-T0OJd9",
+    "many-tile": "many-tile-jNifSf",
+    manyTile: "many-tile-jNifSf",
+    "many-tile-dragging": "many-tile-dragging-AUDjxQ",
+    manyTileDragging: "many-tile-dragging-AUDjxQ",
+    "many-grip": "many-grip-i7LGT9",
+    manyGrip: "many-grip-i7LGT9",
+    "many-body": "many-body-e8JKV8",
+    manyBody: "many-body-e8JKV8",
+    "many-remove": "many-remove-fuuKiO",
+    manyRemove: "many-remove-fuuKiO",
+    "many-add": "many-add-c5uQ7B",
+    manyAdd: "many-add-c5uQ7B"
 };
 export default relation_field_module;

package/dist/fields/relation/relation-field_module.css

@@ -60,3 +60,67 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
+:is(.many-ohEmr7, .byline-field-relation-many) {
+  gap: var(--spacing-4);
+  flex-direction: column;
+  margin-top: .25rem;
+  display: flex;
+}
+
+:is(.many-empty-T0OJd9, .byline-field-relation-many-empty) {
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  margin: .25rem 0;
+}
+
+:is(.many-tile-jNifSf, .byline-field-relation-many-tile) {
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  background-color: var(--surface-100, transparent);
+  color: var(--gray-200);
+  font-size: var(--font-size-xs);
+  display: flex;
+}
+
+:is(.many-tile-dragging-AUDjxQ, .byline-field-relation-many-tile-dragging) {
+  opacity: .85;
+  box-shadow: var(--shadow-md, 0 4px 12px #0003);
+}
+
+:is(.many-grip-i7LGT9, .byline-field-relation-many-grip) {
+  color: var(--gray-400);
+  cursor: grab;
+  touch-action: none;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.many-grip-i7LGT9:active {
+  cursor: grabbing;
+}
+
+.byline-field-relation-many-grip:active {
+  cursor: grabbing;
+}
+
+:is(.many-body-e8JKV8, .byline-field-relation-many-body) {
+  flex: auto;
+  min-width: 0;
+}
+
+:is(.many-remove-fuuKiO, .byline-field-relation-many-remove) {
+  flex-shrink: 0;
+}
+
+:is(.many-add-c5uQ7B, .byline-field-relation-many-add) {
+  margin-top: .25rem;
+  display: flex;
+}
+

package/dist/fields/relation/relation-many-field.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { RelationField as FieldType, RelatedDocumentValue } from '@byline/core';
+interface RelationManyFieldProps {
+    field: FieldType;
+    defaultValue?: RelatedDocumentValue[] | null;
+    id?: string;
+    path?: string;
+}
+export declare const RelationManyField: ({ field, defaultValue, id, path }: RelationManyFieldProps) => import("react").JSX.Element;
+export {};

package/dist/fields/relation/relation-many-field.js

@@ -0,0 +1,193 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Button, CloseIcon, DraggableSortable, ErrorText, GripperVerticalIcon, IconButton, Label, PlusIcon, moveItem, useSortable } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue, useFormContext } from "../../forms/form-context.js";
+import relation_field_module from "./relation-field.module.js";
+import { RelationPicker } from "./relation-picker.js";
+import { RelationSummary } from "./relation-summary.js";
+const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        transition: {
+            duration: 250,
+            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
+        }
+    });
+    const style = {
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+        transition,
+        zIndex: isDragging ? 10 : 'auto'
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: setNodeRef,
+        style: style,
+        className: classnames('byline-field-relation-many-tile', relation_field_module["many-tile"], isDragging && [
+            'byline-field-relation-many-tile-dragging',
+            relation_field_module["many-tile-dragging"]
+        ]),
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: classnames('byline-field-relation-many-grip', relation_field_module["many-grip"]),
+                ...attributes,
+                ...listeners,
+                children: /*#__PURE__*/ jsx(GripperVerticalIcon, {})
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-relation-many-body', relation_field_module["many-body"]),
+                children: children
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                type: "button",
+                size: "xs",
+                intent: "noeffect",
+                "aria-label": removeAriaLabel,
+                className: classnames('byline-field-relation-many-remove', relation_field_module["many-remove"]),
+                onClick: onRemove,
+                children: /*#__PURE__*/ jsx(CloseIcon, {
+                    width: "14px",
+                    height: "14px"
+                })
+            })
+        ]
+    });
+};
+const RelationManyField = ({ field, defaultValue, id, path })=>{
+    const fieldPath = path ?? field.name;
+    const htmlId = id ?? fieldPath;
+    const { t } = useTranslation('byline-admin');
+    const fieldError = useFieldError(fieldPath);
+    const { getFieldValue, setFieldValue } = useFormContext();
+    const targetDef = getCollectionDefinition(field.targetCollection);
+    const targetAdminConfig = getCollectionAdminConfig(field.targetCollection);
+    const isUnknown = null == targetDef;
+    const targetLabel = targetDef?.labels.singular ?? field.targetCollection;
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickedRecords, setPickedRecords] = useState({});
+    const liveValue = useFieldValue(fieldPath);
+    const items = Array.isArray(liveValue) ? liveValue : Array.isArray(defaultValue) ? defaultValue : [];
+    const currentArray = ()=>{
+        const v = getFieldValue(fieldPath);
+        if (Array.isArray(v)) return v;
+        return Array.isArray(defaultValue) ? defaultValue : [];
+    };
+    const handleAdd = (selection)=>{
+        setPickerOpen(false);
+        const current = currentArray();
+        if (current.some((v)=>v.targetDocumentId === selection.targetDocumentId)) return;
+        if (selection.record) setPickedRecords((prev)=>({
+                ...prev,
+                [selection.targetDocumentId]: selection.record
+            }));
+        setFieldValue(fieldPath, [
+            ...current,
+            {
+                targetDocumentId: selection.targetDocumentId,
+                targetCollectionId: selection.targetCollectionId
+            }
+        ]);
+    };
+    const handleRemove = (targetDocumentId)=>{
+        setFieldValue(fieldPath, currentArray().filter((v)=>v.targetDocumentId !== targetDocumentId));
+    };
+    const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
+        if (moveFromIndex === moveToIndex) return;
+        setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex));
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-relation ${field.name}`,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-relation-header', relation_field_module.header),
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
+            }),
+            field.helpText && /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-relation-help', relation_field_module.help),
+                children: field.helpText
+            }),
+            isUnknown ? /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-relation-error-tile', relation_field_module["error-tile"]),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: t('fields.relation.unknownError', {
+                            name: field.name,
+                            target: field.targetCollection
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
+                        children: t('fields.relation.unknownHint')
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    0 === items.length ? /*#__PURE__*/ jsx("p", {
+                        className: classnames('byline-field-relation-many-empty', relation_field_module["many-empty"]),
+                        children: t('fields.relation.manyEmpty', {
+                            label: targetDef.labels.plural
+                        })
+                    }) : /*#__PURE__*/ jsx(DraggableSortable, {
+                        ids: items.map((v)=>v.targetDocumentId),
+                        onDragEnd: handleDragEnd,
+                        className: classnames('byline-field-relation-many', relation_field_module.many),
+                        children: items.map((value)=>/*#__PURE__*/ jsx(RelationManyTile, {
+                                id: value.targetDocumentId,
+                                onRemove: ()=>handleRemove(value.targetDocumentId),
+                                removeAriaLabel: t('fields.relation.removeAriaLabel', {
+                                    label: targetLabel
+                                }),
+                                children: /*#__PURE__*/ jsx(RelationSummary, {
+                                    targetDefinition: targetDef,
+                                    targetAdminConfig: targetAdminConfig,
+                                    displayField: field.displayField,
+                                    value: value,
+                                    cachedRecord: pickedRecords[value.targetDocumentId] ?? null
+                                })
+                            }, value.targetDocumentId))
+                    }),
+                    fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                        id: `${field.name}-error`,
+                        text: fieldError
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-relation-many-add', relation_field_module["many-add"]),
+                        children: /*#__PURE__*/ jsxs(Button, {
+                            id: htmlId,
+                            size: "xs",
+                            variant: "outlined",
+                            intent: "noeffect",
+                            type: "button",
+                            onClick: ()=>setPickerOpen(true),
+                            children: [
+                                /*#__PURE__*/ jsx(PlusIcon, {
+                                    width: "14px",
+                                    height: "14px"
+                                }),
+                                t('fields.relation.addButton', {
+                                    label: targetLabel
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(RelationPicker, {
+                        targetCollectionPath: field.targetCollection,
+                        targetDefinition: targetDef,
+                        displayField: field.displayField,
+                        isOpen: pickerOpen,
+                        onSelect: handleAdd,
+                        onDismiss: ()=>setPickerOpen(false)
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { RelationManyField };

package/dist/fields/relation/relation-picker.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { getCollectionAdminConfig } from "@byline/core";
+import { getCollectionAdminConfig, resolveItemViewColumns } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, LoaderRing, Modal, Search } from "@byline/ui/react";
 import classnames from "classnames";
@@ -20,7 +20,7 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
     const [collectionId, setCollectionId] = useState(null);
     const { getCollectionDocuments } = useBylineFieldServices();
     const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
-    const pickerColumns = targetAdminConfig?.picker;
+    const pickerColumns = resolveItemViewColumns(targetAdminConfig);
     useEffect(()=>{
         if (isOpen) {
             setQuery('');

package/dist/fields/relation/relation-summary.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveItemViewColumns } from "@byline/core";
 import classnames from "classnames";
 import { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from "./relation-display.js";
 import relation_summary_module from "./relation-summary.module.js";
 function RelationSummary({ targetDefinition, targetAdminConfig, displayField, value, cachedRecord }) {
-    const pickerColumns = targetAdminConfig?.picker;
+    const pickerColumns = resolveItemViewColumns(targetAdminConfig);
     if (false === value._resolved) return /*#__PURE__*/ jsxs("div", {
         className: classnames('byline-relation-summary-stack', relation_summary_module.stack),
         children: [

package/dist/react.d.ts

@@ -45,7 +45,9 @@ export * from './fields/image/image-upload-field.js';
 export * from './fields/local-date-time.js';
 export * from './fields/locale-badge.js';
 export * from './fields/numerical/numerical-field.js';
+export * from './fields/relation/relation-column-formatter.js';
 export * from './fields/relation/relation-field.js';
+export * from './fields/relation/relation-many-field.js';
 export * from './fields/relation/relation-picker.js';
 export * from './fields/select/select-field.js';
 export * from './fields/sortable-item.js';

package/dist/react.js

@@ -16,7 +16,9 @@ export * from "./fields/image/image-upload-field.js";
 export * from "./fields/local-date-time.js";
 export * from "./fields/locale-badge.js";
 export * from "./fields/numerical/numerical-field.js";
+export * from "./fields/relation/relation-column-formatter.js";
 export * from "./fields/relation/relation-field.js";
+export * from "./fields/relation/relation-many-field.js";
 export * from "./fields/relation/relation-picker.js";
 export * from "./fields/select/select-field.js";
 export * from "./fields/sortable-item.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "3.13.3",
+  "version": "3.15.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -156,10 +156,10 @@
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
     "zod-form-data": "^3.0.1",
-    "@byline/auth": "3.13.3",
-    "@byline/core": "3.13.3",
-    "@byline/i18n": "3.13.3",
-    "@byline/ui": "3.13.3"
+    "@byline/auth": "3.15.0",
+    "@byline/core": "3.15.0",
+    "@byline/i18n": "3.15.0",
+    "@byline/ui": "3.15.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/field-renderer.tsx

@@ -28,6 +28,7 @@ import { ImageField } from './image/image-field'
 import { LocaleBadge } from './locale-badge'
 import { NumericalField } from './numerical/numerical-field'
 import { RelationField } from './relation/relation-field'
+import { RelationManyField } from './relation/relation-many-field'
 import { SelectField } from './select/select-field'
 import { TextField } from './text/text-field'
 import { TextAreaField } from './text-area/text-area-field'
@@ -223,6 +224,16 @@ export const FieldRenderer = ({
           />
         )
       case 'relation':
+        if (field.hasMany) {
+          return (
+            <RelationManyField
+              field={hideLabel ? { ...field, label: undefined } : field}
+              defaultValue={defaultValue}
+              path={path}
+              id={htmlId}
+            />
+          )
+        }
         return (
           <RelationField
             field={hideLabel ? { ...field, label: undefined } : field}

package/src/fields/relation/relation-column-formatter.tsx

@@ -0,0 +1,119 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type {
+  CollectionDefinition,
+  ColumnDefinition,
+  ColumnFormatter,
+  RelationField,
+} from '@byline/core'
+import { getCollectionDefinition } from '@byline/core'
+
+import { resolveFallbackDisplayField, resolveRowLabel } from './relation-display'
+
+// ---------------------------------------------------------------------------
+// Built-in list-view column formatter for `relation` fields. Renders the
+// target's title (via the displayField → useAsTitle → first-text chain)
+// instead of a raw `target_document_id`. For `hasMany` relations it renders
+// the first few titles followed by "+N more".
+//
+// Requires the list read to populate relation columns (depth 1) — the list
+// server fn does this for relation columns so each cell value arrives as a
+// populated relation envelope (`{ targetDocumentId, _resolved, document }`)
+// or, for hasMany, an array of them.
+// ---------------------------------------------------------------------------
+
+interface RelationEnvelope {
+  targetDocumentId?: string
+  _resolved?: boolean
+  document?: Record<string, any>
+}
+
+/** Max titles shown for a hasMany cell before collapsing to "+N more". */
+const MAX_SHOWN = 3
+
+function labelFor(
+  env: RelationEnvelope | null | undefined,
+  displayField: string | null
+): string | null {
+  // Unresolved (deleted / out-of-scope target) or not populated → no title.
+  if (env == null || env._resolved === false || env.document == null) return null
+  return resolveRowLabel(env.document, displayField)
+}
+
+/**
+ * Pure text projection of a relation cell: the target's title for a single
+ * relation, or "A, B, +N more" for `hasMany`. Unresolved targets are skipped;
+ * an all-empty cell yields `null` (the formatter renders a muted dash).
+ *
+ * `displayField` is the resolved chain
+ * (`field.displayField` → target `useAsTitle` → first text field).
+ */
+export function formatRelationCellText(
+  field: Pick<RelationField, 'hasMany'>,
+  value: unknown,
+  displayField: string | null
+): string | null {
+  const envelopes: RelationEnvelope[] = field.hasMany
+    ? Array.isArray(value)
+      ? (value as RelationEnvelope[])
+      : []
+    : value
+      ? [value as RelationEnvelope]
+      : []
+
+  const labels = envelopes
+    .map((env) => labelFor(env, displayField))
+    .filter((l): l is string => l != null && l.length > 0)
+
+  if (labels.length === 0) return null
+  if (!field.hasMany) return labels[0] ?? null
+
+  const shown = labels.slice(0, MAX_SHOWN)
+  const extra = labels.length - shown.length
+  return extra > 0 ? `${shown.join(', ')}, +${extra} more` : shown.join(', ')
+}
+
+/**
+ * The built-in `{ component }` column formatter for a `relation` field. Resolves
+ * the target collection's `useAsTitle` at render time and renders the cell text.
+ */
+export function relationColumnFormatter(field: RelationField): ColumnFormatter {
+  return {
+    component: ({ value }) => {
+      const targetDef = getCollectionDefinition(field.targetCollection)
+      const displayField =
+        field.displayField ?? targetDef?.useAsTitle ?? resolveFallbackDisplayField(targetDef)
+      const text = formatRelationCellText(field, value, displayField)
+      return text != null ? (
+        <span className="byline-relation-column">{text}</span>
+      ) : (
+        <span className="byline-relation-column-empty muted">—</span>
+      )
+    },
+  }
+}
+
+/**
+ * Return a copy of `columns` with {@link relationColumnFormatter} applied to any
+ * `relation`-typed column that doesn't already declare its own formatter, so
+ * relation cells render target titles by default. Other columns are untouched.
+ */
+export function applyRelationColumnFormatters(
+  columns: ColumnDefinition[],
+  definition: CollectionDefinition
+): ColumnDefinition[] {
+  return columns.map((col) => {
+    if (col.formatter) return col
+    const field = definition.fields.find((f) => f.name === String(col.fieldName))
+    if (field?.type === 'relation') {
+      return { ...col, formatter: relationColumnFormatter(field as RelationField) }
+    }
+    return col
+  })
+}

package/src/fields/relation/relation-field.module.css

@@ -81,3 +81,84 @@
 :global(.byline-field-relation-mono) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
+
+/* ---------------------------------------------------------------------------
+ * hasMany — ordered list of relation tiles with drag-reorder + remove.
+ *
+ * Override handles:
+ *   .byline-field-relation-many        — vertical list of tiles
+ *   .byline-field-relation-many-empty  — empty-state hint
+ *   .byline-field-relation-many-tile   — one row: grip + summary + remove
+ *   .byline-field-relation-many-grip   — drag handle
+ *   .byline-field-relation-many-body   — flexible summary cell
+ *   .byline-field-relation-many-add    — add-item button row
+ * --------------------------------------------------------------------------- */
+
+.many,
+:global(.byline-field-relation-many) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin-top: 0.25rem;
+}
+
+.many-empty,
+:global(.byline-field-relation-many-empty) {
+  margin: 0.25rem 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+}
+
+.many-tile,
+:global(.byline-field-relation-many-tile) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  background-color: var(--surface-100, transparent);
+  color: var(--gray-200);
+  font-size: var(--font-size-xs);
+}
+
+.many-tile-dragging,
+:global(.byline-field-relation-many-tile-dragging) {
+  opacity: 0.85;
+  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.2));
+}
+
+.many-grip,
+:global(.byline-field-relation-many-grip) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--gray-400);
+  cursor: grab;
+  touch-action: none;
+}
+
+.many-grip:active,
+:global(.byline-field-relation-many-grip:active) {
+  cursor: grabbing;
+}
+
+.many-body,
+:global(.byline-field-relation-many-body) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.many-remove,
+:global(.byline-field-relation-many-remove) {
+  flex-shrink: 0;
+}
+
+.many-add,
+:global(.byline-field-relation-many-add) {
+  display: flex;
+  margin-top: 0.25rem;
+}

package/src/fields/relation/relation-many-field.tsx

@@ -0,0 +1,274 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { type ReactNode, useState } from 'react'
+
+import type {
+  CollectionAdminConfig,
+  CollectionDefinition,
+  RelationField as FieldType,
+  RelatedDocumentValue,
+} from '@byline/core'
+import { getCollectionAdminConfig, getCollectionDefinition } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import {
+  Button,
+  CloseIcon,
+  DraggableSortable,
+  ErrorText,
+  GripperVerticalIcon,
+  IconButton,
+  Label,
+  moveItem,
+  PlusIcon,
+  useSortable,
+} from '@byline/ui/react'
+import cx from 'classnames'
+
+import { useFieldError, useFieldValue, useFormContext } from '../../forms/form-context'
+import styles from './relation-field.module.css'
+import { RelationPicker } from './relation-picker'
+import { RelationSummary } from './relation-summary'
+
+// A single stored item. On the edit path the loader's populate pass attaches
+// `_resolved` / `document`; freshly-picked items are bare refs. Both flatten
+// the same way (storage ignores the envelope keys), so we never strip them.
+type IncomingRelationValue = RelatedDocumentValue & {
+  _resolved?: boolean
+  _cycle?: boolean
+  document?: Record<string, any>
+}
+
+// ---------------------------------------------------------------------------
+// RelationManyField — `type: 'relation'` with `hasMany: true`.
+//
+// An ordered list of summary tiles: drag to reorder, ✕ to remove, "+ Add" to
+// open the standard picker and append. The value is an array of relation
+// envelopes; every mutation writes the whole array back via `setFieldValue`,
+// which emits a coalesced `field.set` patch — relations carry no stable `_id`,
+// so the granular `array.*` patches (which key on `_id`) don't apply, and a
+// whole-array set is both correct and simplest for these small lists.
+// ---------------------------------------------------------------------------
+
+interface RelationManyTileProps {
+  id: string
+  children: ReactNode
+  onRemove: () => void
+  removeAriaLabel: string
+}
+
+const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationManyTileProps) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    transition: { duration: 250, easing: 'cubic-bezier(0, 0.2, 0.2, 1)' },
+  })
+
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    transition,
+    zIndex: isDragging ? 10 : 'auto',
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cx(
+        'byline-field-relation-many-tile',
+        styles['many-tile'],
+        isDragging && ['byline-field-relation-many-tile-dragging', styles['many-tile-dragging']]
+      )}
+    >
+      <button
+        type="button"
+        className={cx('byline-field-relation-many-grip', styles['many-grip'])}
+        {...attributes}
+        {...listeners}
+      >
+        <GripperVerticalIcon />
+      </button>
+      <div className={cx('byline-field-relation-many-body', styles['many-body'])}>{children}</div>
+      <IconButton
+        type="button"
+        size="xs"
+        intent="noeffect"
+        aria-label={removeAriaLabel}
+        className={cx('byline-field-relation-many-remove', styles['many-remove'])}
+        onClick={onRemove}
+      >
+        <CloseIcon width="14px" height="14px" />
+      </IconButton>
+    </div>
+  )
+}
+
+interface RelationManyFieldProps {
+  field: FieldType
+  defaultValue?: RelatedDocumentValue[] | null
+  id?: string
+  path?: string
+}
+
+export const RelationManyField = ({ field, defaultValue, id, path }: RelationManyFieldProps) => {
+  const fieldPath = path ?? field.name
+  const htmlId = id ?? fieldPath
+  const { t } = useTranslation('byline-admin')
+  const fieldError = useFieldError(fieldPath)
+  const { getFieldValue, setFieldValue } = useFormContext()
+
+  const targetDef: CollectionDefinition | null = getCollectionDefinition(field.targetCollection)
+  const targetAdminConfig: CollectionAdminConfig | null = getCollectionAdminConfig(
+    field.targetCollection
+  )
+  const isUnknown = targetDef == null
+  const targetLabel = targetDef?.labels.singular ?? field.targetCollection
+
+  const [pickerOpen, setPickerOpen] = useState(false)
+  // Records handed back by the picker, keyed by target id — lets a freshly
+  // added tile render real display data (title / thumbnail) without a refetch.
+  const [pickedRecords, setPickedRecords] = useState<Record<string, Record<string, any>>>({})
+
+  // Subscribe to the live array so reorders / adds / removes re-render.
+  const liveValue = useFieldValue<IncomingRelationValue[] | undefined>(fieldPath)
+  const items: IncomingRelationValue[] = Array.isArray(liveValue)
+    ? liveValue
+    : Array.isArray(defaultValue)
+      ? (defaultValue as IncomingRelationValue[])
+      : []
+
+  const currentArray = (): IncomingRelationValue[] => {
+    const v = getFieldValue(fieldPath)
+    if (Array.isArray(v)) return v as IncomingRelationValue[]
+    return Array.isArray(defaultValue) ? (defaultValue as IncomingRelationValue[]) : []
+  }
+
+  const handleAdd = (selection: {
+    targetDocumentId: string
+    targetCollectionId: string
+    record?: Record<string, any>
+  }) => {
+    setPickerOpen(false)
+    const current = currentArray()
+    // Dedup — a target may appear at most once.
+    if (current.some((v) => v.targetDocumentId === selection.targetDocumentId)) return
+    if (selection.record) {
+      setPickedRecords((prev) => ({ ...prev, [selection.targetDocumentId]: selection.record! }))
+    }
+    setFieldValue(fieldPath, [
+      ...current,
+      {
+        targetDocumentId: selection.targetDocumentId,
+        targetCollectionId: selection.targetCollectionId,
+      },
+    ])
+  }
+
+  const handleRemove = (targetDocumentId: string) => {
+    setFieldValue(
+      fieldPath,
+      currentArray().filter((v) => v.targetDocumentId !== targetDocumentId)
+    )
+  }
+
+  const handleDragEnd = ({
+    moveFromIndex,
+    moveToIndex,
+  }: {
+    moveFromIndex: number
+    moveToIndex: number
+  }) => {
+    if (moveFromIndex === moveToIndex) return
+    setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex))
+  }
+
+  return (
+    <div className={`byline-field-relation ${field.name}`}>
+      <div className={cx('byline-field-relation-header', styles.header)}>
+        <Label
+          id={`${htmlId}-label`}
+          htmlFor={htmlId}
+          label={field.label ?? field.name}
+          required={!field.optional}
+        />
+      </div>
+      {field.helpText && (
+        <div className={cx('byline-field-relation-help', styles.help)}>{field.helpText}</div>
+      )}
+
+      {isUnknown ? (
+        <div className={cx('byline-field-relation-error-tile', styles['error-tile'])}>
+          <span>
+            {t('fields.relation.unknownError', {
+              name: field.name,
+              target: field.targetCollection,
+            })}
+          </span>
+          <span className={cx('byline-field-relation-error-text', styles['error-text'])}>
+            {t('fields.relation.unknownHint')}
+          </span>
+        </div>
+      ) : (
+        <>
+          {items.length === 0 ? (
+            <p className={cx('byline-field-relation-many-empty', styles['many-empty'])}>
+              {t('fields.relation.manyEmpty', { label: targetDef.labels.plural })}
+            </p>
+          ) : (
+            <DraggableSortable
+              ids={items.map((v) => v.targetDocumentId)}
+              onDragEnd={handleDragEnd}
+              className={cx('byline-field-relation-many', styles.many)}
+            >
+              {items.map((value) => (
+                <RelationManyTile
+                  key={value.targetDocumentId}
+                  id={value.targetDocumentId}
+                  onRemove={() => handleRemove(value.targetDocumentId)}
+                  removeAriaLabel={t('fields.relation.removeAriaLabel', { label: targetLabel })}
+                >
+                  <RelationSummary
+                    targetDefinition={targetDef}
+                    targetAdminConfig={targetAdminConfig}
+                    displayField={field.displayField}
+                    value={value}
+                    cachedRecord={pickedRecords[value.targetDocumentId] ?? null}
+                  />
+                </RelationManyTile>
+              ))}
+            </DraggableSortable>
+          )}
+
+          {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+
+          <div className={cx('byline-field-relation-many-add', styles['many-add'])}>
+            <Button
+              id={htmlId}
+              size="xs"
+              variant="outlined"
+              intent="noeffect"
+              type="button"
+              onClick={() => setPickerOpen(true)}
+            >
+              <PlusIcon width="14px" height="14px" />
+              {t('fields.relation.addButton', { label: targetLabel })}
+            </Button>
+          </div>
+
+          <RelationPicker
+            targetCollectionPath={field.targetCollection}
+            targetDefinition={targetDef}
+            displayField={field.displayField}
+            isOpen={pickerOpen}
+            onSelect={handleAdd}
+            onDismiss={() => setPickerOpen(false)}
+          />
+        </>
+      )}
+    </div>
+  )
+}

package/src/fields/relation/relation-picker.tsx

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
-import { getCollectionAdminConfig } from '@byline/core'
+import { getCollectionAdminConfig, resolveItemViewColumns } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Button, LoaderRing, Modal, Search } from '@byline/ui/react'
 import cx from 'classnames'
@@ -102,7 +102,7 @@ export const RelationPicker = ({
 
   const targetAdminConfig: CollectionAdminConfig | null =
     getCollectionAdminConfig(targetCollectionPath)
-  const pickerColumns = targetAdminConfig?.picker
+  const pickerColumns = resolveItemViewColumns(targetAdminConfig)
 
   // Reset local state each time the modal opens so prior queries don't leak.
   useEffect(() => {

package/src/fields/relation/relation-summary.tsx

@@ -7,6 +7,7 @@
  */
 
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
+import { resolveItemViewColumns } from '@byline/core'
 import cx from 'classnames'
 
 import { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from './relation-display'
@@ -17,7 +18,7 @@ import styles from './relation-summary.module.css'
 //
 // Rendering priority (mirrors RelationPicker so the tile and picker rows
 // look identical):
-//   1. target `CollectionAdminConfig.picker` columns (full fidelity, with
+//   1. target `CollectionAdminConfig.itemView` columns (full fidelity, with
 //      formatters — e.g. MediaThumbnail + title)
 //   2. explicit `displayField` prop (from source schema's RelationField)
 //   3. `CollectionDefinition.useAsTitle`
@@ -62,7 +63,7 @@ export function RelationSummary({
   value,
   cachedRecord,
 }: RelationSummaryProps) {
-  const pickerColumns = targetAdminConfig?.picker
+  const pickerColumns = resolveItemViewColumns(targetAdminConfig)
 
   // Unresolved (deleted target).
   if (value._resolved === false) {

package/src/react.ts

@@ -48,7 +48,9 @@ export * from './fields/image/image-upload-field.js'
 export * from './fields/local-date-time.js'
 export * from './fields/locale-badge.js'
 export * from './fields/numerical/numerical-field.js'
+export * from './fields/relation/relation-column-formatter.js'
 export * from './fields/relation/relation-field.js'
+export * from './fields/relation/relation-many-field.js'
 export * from './fields/relation/relation-picker.js'
 export * from './fields/select/select-field.js'
 export * from './fields/sortable-item.js'