@byline/admin 3.13.3 → 3.14.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-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/react.d.ts

@@ -46,6 +46,7 @@ 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-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

@@ -17,6 +17,7 @@ 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-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.14.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.14.0",
+    "@byline/ui": "3.14.0",
+    "@byline/core": "3.14.0",
+    "@byline/i18n": "3.14.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-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/react.ts

@@ -49,6 +49,7 @@ 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-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'