@byline/admin 2.5.2 → 2.6.0

package/dist/fields/image/image-upload-field.js

@@ -0,0 +1,190 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { createPendingStoredFileValue } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import classnames from "classnames";
+import { useFormContext } from "../../forms/form-context.js";
+import image_upload_field_module from "./image-upload-field.module.js";
+const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept = 'image/*' })=>{
+    const inputRef = useRef(null);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const { addPendingUpload } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const handleFileSelected = useCallback((file)=>{
+        setStatus('processing');
+        setErrorMessage(null);
+        if (!file.type.startsWith('image/')) {
+            setStatus('error');
+            setErrorMessage(t('fields.image.upload.errors.notAnImage'));
+            return;
+        }
+        const previewUrl = URL.createObjectURL(file);
+        const img = new Image();
+        img.onload = ()=>{
+            const w = img.naturalWidth;
+            const h = img.naturalHeight;
+            const dimensions = w > 0 && h > 0 ? {
+                width: w,
+                height: h
+            } : void 0;
+            const pendingValue = createPendingStoredFileValue(file, previewUrl, dimensions);
+            addPendingUpload(fieldPath, {
+                file,
+                previewUrl,
+                collectionPath
+            });
+            setStatus('idle');
+            onUploaded(pendingValue);
+        };
+        img.onerror = ()=>{
+            URL.revokeObjectURL(previewUrl);
+            setStatus('error');
+            setErrorMessage(t('fields.image.upload.errors.cannotRead'));
+        };
+        img.src = previewUrl;
+    }, [
+        collectionPath,
+        fieldPath,
+        addPendingUpload,
+        onUploaded,
+        t
+    ]);
+    const handleFileChange = useCallback((e)=>{
+        const file = e.target.files?.[0];
+        if (file) handleFileSelected(file);
+        e.target.value = '';
+    }, [
+        handleFileSelected
+    ]);
+    const handleBrowseClick = useCallback(()=>{
+        inputRef.current?.click();
+    }, []);
+    const handleDragOver = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file) handleFileSelected(file);
+    }, [
+        handleFileSelected
+    ]);
+    const isProcessing = 'processing' === status;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-field-image-upload', image_upload_field_module.root),
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                type: "file",
+                accept: accept,
+                className: classnames('byline-field-image-upload-input', image_upload_field_module.input),
+                onChange: handleFileChange,
+                disabled: isProcessing,
+                "aria-hidden": "true",
+                tabIndex: -1
+            }),
+            /*#__PURE__*/ jsx("div", {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": t('fields.image.upload.zoneAriaLabel'),
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop,
+                onClick: handleBrowseClick,
+                onKeyDown: (e)=>{
+                    if ('Enter' === e.key || ' ' === e.key) {
+                        e.preventDefault();
+                        handleBrowseClick();
+                    }
+                },
+                className: classnames('byline-field-image-upload-zone', image_upload_field_module.zone, isDragOver && !isProcessing && [
+                    'byline-field-image-upload-zone-active',
+                    image_upload_field_module["zone-active"]
+                ], isProcessing && [
+                    'byline-field-image-upload-zone-busy',
+                    image_upload_field_module["zone-busy"]
+                ]),
+                children: isProcessing ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxs("svg", {
+                            className: classnames('byline-field-image-upload-spinner', image_upload_field_module.spinner),
+                            xmlns: "http://www.w3.org/2000/svg",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ jsx("circle", {
+                                    style: {
+                                        opacity: 0.25
+                                    },
+                                    cx: "12",
+                                    cy: "12",
+                                    r: "10",
+                                    stroke: "currentColor",
+                                    strokeWidth: "4"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    style: {
+                                        opacity: 0.75
+                                    },
+                                    fill: "currentColor",
+                                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: classnames('byline-field-image-upload-label', image_upload_field_module.label),
+                            children: t('fields.image.upload.processing')
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            className: classnames('byline-field-image-upload-icon', image_upload_field_module.icon),
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            strokeWidth: 1.5,
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ jsx("path", {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            className: classnames('byline-field-image-upload-label', image_upload_field_module.label),
+                            children: [
+                                t('fields.image.upload.label'),
+                                ' ',
+                                /*#__PURE__*/ jsx("span", {
+                                    className: classnames('byline-field-image-upload-action', image_upload_field_module.action),
+                                    children: t('fields.image.upload.browse')
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: classnames('byline-field-image-upload-hint', image_upload_field_module.hint),
+                            children: t('fields.image.upload.hint')
+                        })
+                    ]
+                })
+            }),
+            'error' === status && errorMessage && /*#__PURE__*/ jsx("p", {
+                className: classnames('byline-field-image-upload-error', image_upload_field_module.error),
+                role: "alert",
+                children: errorMessage
+            })
+        ]
+    });
+};
+export { ImageUploadField };

package/dist/fields/image/image-upload-field.module.js

@@ -0,0 +1,19 @@
+import "./image-upload-field_module.css";
+const image_upload_field_module = {
+    root: "root-RQ8s0u",
+    input: "input-DnqmLy",
+    zone: "zone-ZQQueP",
+    "zone-active": "zone-active-GgYY5w",
+    zoneActive: "zone-active-GgYY5w",
+    "zone-busy": "zone-busy-QscsjT",
+    zoneBusy: "zone-busy-QscsjT",
+    spinner: "spinner-vgmURt",
+    "byline-image-upload-spin": "byline-image-upload-spin-PnC9WU",
+    bylineImageUploadSpin: "byline-image-upload-spin-PnC9WU",
+    icon: "icon-ZueG4I",
+    label: "label-jdwMD2",
+    action: "action-g1CZcT",
+    hint: "hint-WOpqdr",
+    error: "error-bRg83I"
+};
+export default image_upload_field_module;

package/dist/fields/image/image-upload-field_module.css

@@ -0,0 +1,92 @@
+:is(.root-RQ8s0u, .byline-field-image-upload) {
+  margin-top: .25rem;
+}
+
+:is(.input-DnqmLy, .byline-field-image-upload-input) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(.zone-ZQQueP, .byline-field-image-upload-zone) {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-8);
+  border: 2px dashed var(--gray-600);
+  border-radius: var(--border-radius-lg);
+  color: var(--gray-400);
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  transition: color .15s, background-color .15s, border-color .15s;
+  display: flex;
+}
+
+:is(.zone-ZQQueP:hover, .byline-field-image-upload-zone:hover) {
+  border-color: var(--primary-500);
+  background-color: oklch(from var(--primary-900) l c h / .1);
+}
+
+:is(.zone-active-GgYY5w, .byline-field-image-upload-zone-active) {
+  border-color: var(--primary-400);
+  background-color: oklch(from var(--primary-900) l c h / .2);
+  color: var(--primary-300);
+}
+
+:is(.zone-busy-QscsjT, .byline-field-image-upload-zone-busy) {
+  border-color: var(--gray-700);
+  background-color: oklch(from var(--canvas-800) l c h / .5);
+  color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+:is(.spinner-vgmURt, .byline-field-image-upload-spinner) {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--primary-400);
+  animation: 1s linear infinite byline-image-upload-spin-PnC9WU;
+}
+
+@keyframes byline-image-upload-spin-PnC9WU {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:is(.icon-ZueG4I, .byline-field-image-upload-icon) {
+  opacity: .6;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+:is(.label-jdwMD2, .byline-field-image-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+:is(.action-g1CZcT, .byline-field-image-upload-action) {
+  color: var(--primary-400);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+
+:is(.hint-WOpqdr, .byline-field-image-upload-hint) {
+  color: var(--gray-500);
+  font-size: .65rem;
+}
+
+:is(.error-bRg83I, .byline-field-image-upload-error) {
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+  margin-top: .375rem;
+}
+

package/dist/fields/local-date-time.d.ts

@@ -0,0 +1,27 @@
+interface LocalDateTimeProps {
+    value: string | Date | null | undefined;
+    mode?: 'datetime' | 'date';
+    className?: string;
+    fallback?: string;
+}
+/**
+ * Client-side date/time formatter that displays dates in the user's local timezone.
+ *
+ * This component avoids hydration mismatches by:
+ * 1. Rendering a placeholder on the server/initial render
+ * 2. Updating to the correctly formatted date after hydration
+ *
+ * Use this instead of formatDateTime when you need to display dates
+ * in the user's local timezone rather than UTC.
+ */
+export declare function LocalDateTime({ value, mode, className, fallback, }: LocalDateTimeProps): React.JSX.Element;
+/**
+ * Formats a date string to the user's local timezone.
+ *
+ * WARNING: Only use this in client components where hydration
+ * mismatches are acceptable or managed. For most cases, prefer
+ * the <LocalDateTime /> component.
+ */
+export declare function formatLocalDateTime(value: string | Date | null | undefined): string;
+export declare function formatLocalDate(value: string | Date | null | undefined): string;
+export {};

package/dist/fields/local-date-time.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const dateTimeFormatter = new Intl.DateTimeFormat(void 0, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+const dateFormatter = new Intl.DateTimeFormat(void 0, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit'
+});
+function LocalDateTime({ value, mode = 'datetime', className, fallback = '—' }) {
+    const [formattedDate, setFormattedDate] = useState(null);
+    useEffect(()=>{
+        if (null == value) return void setFormattedDate(null);
+        const date = 'string' == typeof value ? Date.parse(value) : value.getTime();
+        if (Number.isNaN(date)) return void setFormattedDate('Error');
+        const formatter = 'datetime' === mode ? dateTimeFormatter : dateFormatter;
+        setFormattedDate(formatter.format(date));
+    }, [
+        value,
+        mode
+    ]);
+    if (null === formattedDate) return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: value ? '...' : fallback
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: formattedDate
+    });
+}
+function formatLocalDateTime(value) {
+    if (null == value) return '—';
+    const date = 'string' == typeof value ? Date.parse(value) : value.getTime();
+    if (Number.isNaN(date)) return 'Error';
+    return dateTimeFormatter.format(date);
+}
+function formatLocalDate(value) {
+    if (null == value) return '—';
+    const date = 'string' == typeof value ? Date.parse(value) : value.getTime();
+    if (Number.isNaN(date)) return 'Error';
+    return dateFormatter.format(date);
+}
+export { LocalDateTime, formatLocalDate, formatLocalDateTime };

package/dist/fields/locale-badge.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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
+ */
+export interface LocaleBadgeProps {
+    locale: string;
+}
+/**
+ * Small inline badge shown next to the label of a field that has
+ * `localized: true` in its schema definition. Indicates which locale
+ * the editor is currently working in.
+ *
+ * Stable override handle: `.byline-locale-badge`.
+ */
+export declare const LocaleBadge: ({ locale }: LocaleBadgeProps) => import("react").JSX.Element;

package/dist/fields/locale-badge.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import locale_badge_module from "./locale-badge.module.js";
+const LocaleBadge = ({ locale })=>/*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        title: `Localised — editing ${locale.toUpperCase()} content`,
+        className: classnames('byline-locale-badge', locale_badge_module.badge),
+        children: locale
+    });
+export { LocaleBadge };

package/dist/fields/locale-badge.module.js

@@ -0,0 +1,5 @@
+import "./locale-badge_module.css";
+const locale_badge_module = {
+    badge: "badge-w0AW86"
+};
+export default locale_badge_module;

package/dist/fields/locale-badge_module.css

@@ -0,0 +1,27 @@
+:is(.badge-w0AW86, .byline-locale-badge) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--yellow-400);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--yellow-100);
+  color: var(--yellow-800);
+  font-size: .6rem;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  gap: .125rem;
+  margin-left: .375rem;
+  padding: .125rem .375rem;
+  line-height: 1;
+  display: inline-flex;
+}
+
+:is(:is([data-theme="dark"], .dark) .badge-w0AW86, :is([data-theme="dark"], .dark) .byline-locale-badge) {
+  border-color: var(--yellow-700);
+  background-color: oklch(from var(--yellow-900) l c h / .4);
+  color: var(--yellow-400);
+}
+

package/dist/fields/numerical/numerical-field.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { CounterField, DecimalField, FieldComponentSlots, FloatField, IntegerField } from '@byline/core';
+export declare const NumericalField: ({ field, value, defaultValue, onChange, id, path, components, }: {
+    field: IntegerField | FloatField | DecimalField | CounterField;
+    value?: string | number | null;
+    defaultValue?: string | number | null;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => import("react").JSX.Element;

package/dist/fields/numerical/numerical-field.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@byline/ui/react";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+const NumericalField = ({ field, value, defaultValue, onChange, id, path, components })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    const displayValue = null == incomingValue ? '' : String(incomingValue);
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId
+    };
+    const hasCustomLabel = !!CustomLabel;
+    const suppressInputLabel = hasCustomLabel;
+    const suppressInputHelpText = !!CustomHelpText;
+    const renderLabel = ()=>{
+        if (hasCustomLabel) return /*#__PURE__*/ jsx(CustomLabel, {
+            ...slotBaseProps,
+            label: field.label,
+            required: !field.optional
+        });
+        return null;
+    };
+    const renderInput = ()=>{
+        if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
+            ...slotBaseProps,
+            onChange: (v)=>onChange?.(v),
+            defaultValue: defaultValue,
+            placeholder: field.placeholder
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            type: "number",
+            id: htmlId,
+            name: field.name,
+            label: suppressInputLabel ? void 0 : field.label,
+            required: !field.optional,
+            readOnly: field.readOnly,
+            helpText: suppressInputHelpText ? void 0 : field.helpText,
+            value: displayValue,
+            onChange: (e)=>onChange?.(e.target.value),
+            error: null != fieldError,
+            errorText: fieldError
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-${field.type} ${field.name}`,
+        children: [
+            renderLabel(),
+            BeforeField && /*#__PURE__*/ jsx(BeforeField, {
+                ...slotBaseProps
+            }),
+            renderInput(),
+            AfterField && /*#__PURE__*/ jsx(AfterField, {
+                ...slotBaseProps
+            }),
+            CustomHelpText && /*#__PURE__*/ jsx(CustomHelpText, {
+                ...slotBaseProps,
+                helpText: field.helpText
+            })
+        ]
+    });
+};
+export { NumericalField };

package/dist/fields/relation/relation-display.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 } from '@byline/core';
+/**
+ * Render a single row cell from a `ColumnDefinition`, reading the value
+ * from the document's `fields` (with a fallback to top-level metadata like
+ * `status`, `updated_at`, `path`). Honours both formatter shapes — plain
+ * function → its return value, `{ component }` → the component is rendered.
+ */
+export declare function PickerCell({ column, record, }: {
+    column: ColumnDefinition;
+    record: Record<string, any>;
+}): import("react").JSX.Element;
+/** First top-level `text` field name on a collection, or null. */
+export declare function resolveFallbackDisplayField(def: CollectionDefinition | null | undefined): string | null;
+/** Resolve the row's primary label text from the document. */
+export declare function resolveRowLabel(doc: Record<string, any> | null | undefined, displayField: string | null): string | null;
+/**
+ * Build the `fields` projection for the picker listing. Unions:
+ *   - caller-supplied `displayField`
+ *   - target schema's `useAsTitle` (always included, even when not visible)
+ *   - every `fieldName` declared in the admin config's `picker` columns
+ *   - `title` (metadata fallback for rows with no explicit picker columns)
+ *
+ * Note that the document `path` is top-level metadata on every list response
+ * — it is always returned by `getCollectionDocuments` regardless of the
+ * `fields` projection. Callers that need `{ title, path }` for downstream
+ * normalisation (e.g. the rich-text link plugin) can rely on:
+ *   - `record.fields[def.useAsTitle]` for the title
+ *   - `record.path` for the path
+ *
+ * Returns `undefined` when no target definition is available, leaving the
+ * listing endpoint to decide its own default projection.
+ */
+export declare function resolveSelectFields(def: CollectionDefinition | null | undefined, displayField: string | undefined, pickerColumns: ColumnDefinition[] | undefined): string[] | undefined;

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

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import relation_display_module from "./relation-display.module.js";
+function PickerCell({ column, record }) {
+    const name = String(column.fieldName);
+    const value = record?.fields?.[name] ?? record?.[name];
+    let content;
+    if (column.formatter) if ('function' == typeof column.formatter) content = column.formatter(value, record);
+    else {
+        const Comp = column.formatter.component;
+        content = /*#__PURE__*/ jsx(Comp, {
+            value: value,
+            record: record
+        });
+    }
+    else content = null == value ? null : 'string' == typeof value || 'number' == typeof value || 'boolean' == typeof value ? String(value) : null;
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('byline-relation-cell', relation_display_module.cell, 'center' === column.align && [
+            'byline-relation-cell-center',
+            relation_display_module["cell-center"]
+        ], 'right' === column.align && [
+            'byline-relation-cell-right',
+            relation_display_module["cell-right"]
+        ], column.className),
+        children: content
+    });
+}
+function resolveFallbackDisplayField(def) {
+    if (!def) return null;
+    const textField = def.fields.find((f)=>'text' === f.type);
+    return textField?.name ?? null;
+}
+function resolveRowLabel(doc, displayField) {
+    if (!doc) return null;
+    if (displayField) {
+        const v = doc.fields?.[displayField];
+        if ('string' == typeof v && v.length > 0) return v;
+    }
+    if ('string' == typeof doc.fields?.title && doc.fields.title.length > 0) return doc.fields.title;
+    if ('string' == typeof doc.path && doc.path.length > 0) return doc.path;
+    return null;
+}
+function resolveSelectFields(def, displayField, pickerColumns) {
+    if (!def) return;
+    const out = new Set();
+    if (displayField) out.add(displayField);
+    if (def.useAsTitle) out.add(def.useAsTitle);
+    const fallback = resolveFallbackDisplayField(def);
+    if (fallback) out.add(fallback);
+    if (pickerColumns) for (const col of pickerColumns){
+        const name = String(col.fieldName);
+        if (def.fields.some((f)=>f.name === name)) out.add(name);
+    }
+    if (def.fields.some((f)=>'title' === f.name)) out.add('title');
+    if (0 === out.size) return;
+    return Array.from(out);
+}
+export { PickerCell, resolveFallbackDisplayField, resolveRowLabel, resolveSelectFields };

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

@@ -0,0 +1,9 @@
+import "./relation-display_module.css";
+const relation_display_module = {
+    cell: "cell-ax9SO1",
+    "cell-center": "cell-center-DhmZOy",
+    cellCenter: "cell-center-DhmZOy",
+    "cell-right": "cell-right-GKn6SW",
+    cellRight: "cell-right-GKn6SW"
+};
+export default relation_display_module;

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

@@ -0,0 +1,21 @@
+:is(.cell-ax9SO1, .byline-relation-cell) {
+  min-width: 0;
+  color: var(--gray-700);
+  font-size: var(--font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:is(.cell-center-DhmZOy, .byline-relation-cell-center) {
+  text-align: center;
+}
+
+:is(.cell-right-GKn6SW, .byline-relation-cell-right) {
+  text-align: right;
+}
+
+:is(:is([data-theme="dark"], .dark) .cell-ax9SO1, :is([data-theme="dark"], .dark) .byline-relation-cell) {
+  color: var(--gray-100);
+}
+