@byline/ui 0.9.3

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

@@ -0,0 +1,41 @@
+/**
+ * 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;
+//# sourceMappingURL=relation-display.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"relation-display.d.ts","sourceRoot":"","sources":["../../../src/fields/relation/relation-display.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAW1E;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,GACP,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAA;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B,+BAiCA;AAED,kEAAkE;AAClE,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,GAC3C,MAAM,GAAG,IAAI,CAIf;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,EAC3C,YAAY,EAAE,MAAM,GAAG,IAAI,GAC1B,MAAM,GAAG,IAAI,CAWf;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,EAC5C,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,aAAa,EAAE,gBAAgB,EAAE,GAAG,SAAS,GAC5C,MAAM,EAAE,GAAG,SAAS,CAgBtB"}

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);
+}
+

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

@@ -0,0 +1,19 @@
+/**
+ * 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 RelationFieldProps {
+    field: FieldType;
+    value?: RelatedDocumentValue | null;
+    defaultValue?: RelatedDocumentValue | null;
+    onChange?: (value: RelatedDocumentValue | null) => void;
+    id?: string;
+    path?: string;
+}
+export declare const RelationField: ({ field, value, defaultValue, onChange, id, path, }: RelationFieldProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=relation-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"relation-field.d.ts","sourceRoot":"","sources":["../../../src/fields/relation/relation-field.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAGV,aAAa,IAAI,SAAS,EAC1B,oBAAoB,EACrB,MAAM,cAAc,CAAA;AAyBrB,UAAU,kBAAkB;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,aAAa,GAAI,qDAO3B,kBAAkB,gCAiJpB,CAAA"}

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

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
+import { Button, ErrorText, Label } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } 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 RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
+    const fieldPath = path ?? field.name;
+    const htmlId = id ?? fieldPath;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = void 0 !== fieldValue ? fieldValue ?? null : value ?? defaultValue ?? null;
+    const targetDef = getCollectionDefinition(field.targetCollection);
+    const targetAdminConfig = getCollectionAdminConfig(field.targetCollection);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickedRecord, setPickedRecord] = useState(null);
+    const handleSelect = (selection)=>{
+        setPickerOpen(false);
+        selection.record ? setPickedRecord({
+            id: selection.targetDocumentId,
+            record: selection.record
+        }) : setPickedRecord(null);
+        onChange?.({
+            targetDocumentId: selection.targetDocumentId,
+            targetCollectionId: selection.targetCollectionId
+        });
+    };
+    const handleRemove = ()=>{
+        setPickedRecord(null);
+        onChange?.(null);
+    };
+    const cachedRecord = pickedRecord && incomingValue && pickedRecord.id === incomingValue.targetDocumentId ? pickedRecord.record : null;
+    const isUnknown = null == targetDef;
+    const monoClass = classnames('byline-field-relation-mono', relation_field_module.mono);
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-relation ${field.name}`,
+        children: [
+            /*#__PURE__*/ jsxs("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
+                    }),
+                    incomingValue && !isUnknown && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: classnames('byline-field-relation-remove', relation_field_module.remove),
+                        onClick: handleRemove,
+                        children: "Remove"
+                    })
+                ]
+            }),
+            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__*/ jsxs("span", {
+                        children: [
+                            "Relation field ",
+                            /*#__PURE__*/ jsx("code", {
+                                className: monoClass,
+                                children: field.name
+                            }),
+                            " targets unknown collection ",
+                            /*#__PURE__*/ jsx("code", {
+                                className: monoClass,
+                                children: field.targetCollection
+                            }),
+                            "."
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
+                        children: "Register the collection in your Byline config or correct the target path."
+                    })
+                ]
+            }) : incomingValue ? /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-relation-tile', relation_field_module.tile),
+                children: [
+                    /*#__PURE__*/ jsx(RelationSummary, {
+                        targetDefinition: targetDef,
+                        targetAdminConfig: targetAdminConfig,
+                        displayField: field.displayField,
+                        value: incomingValue,
+                        cachedRecord: cachedRecord
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        id: htmlId,
+                        size: "xs",
+                        variant: "outlined",
+                        intent: "noeffect",
+                        type: "button",
+                        onClick: ()=>setPickerOpen(true),
+                        children: "Change"
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(Button, {
+                id: htmlId,
+                size: "xs",
+                variant: "outlined",
+                intent: "noeffect",
+                type: "button",
+                onClick: ()=>setPickerOpen(true),
+                children: [
+                    "Select ",
+                    targetDef.labels.singular,
+                    "…"
+                ]
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${field.name}-error`,
+                text: fieldError
+            }),
+            !isUnknown && /*#__PURE__*/ jsx(RelationPicker, {
+                targetCollectionPath: field.targetCollection,
+                targetDefinition: targetDef,
+                displayField: field.displayField,
+                isOpen: pickerOpen,
+                onSelect: handleSelect,
+                onDismiss: ()=>setPickerOpen(false)
+            })
+        ]
+    });
+};
+export { RelationField };

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

@@ -0,0 +1,13 @@
+import "./relation-field_module.css";
+const relation_field_module = {
+    header: "header-y7lSnb",
+    remove: "remove-po_DBR",
+    help: "help-DEGVPH",
+    "error-tile": "error-tile-y2kiiq",
+    errorTile: "error-tile-y2kiiq",
+    "error-text": "error-text-jHQh34",
+    errorText: "error-text-jHQh34",
+    tile: "tile-Y3_yre",
+    mono: "mono-y8Xo6b"
+};
+export default relation_field_module;

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

@@ -0,0 +1,62 @@
+:is(.header-y7lSnb, .byline-field-relation-header) {
+  align-items: baseline;
+  gap: var(--spacing-8);
+  margin-bottom: .25rem;
+  display: flex;
+}
+
+:is(.remove-po_DBR, .byline-field-relation-remove) {
+  color: var(--red-500);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+:is(.remove-po_DBR:hover, .byline-field-relation-remove:hover) {
+  color: var(--red-400);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+
+:is(.help-DEGVPH, .byline-field-relation-help) {
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  margin-bottom: .25rem;
+}
+
+:is(.error-tile-y2kiiq, .byline-field-relation-error-tile) {
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--red-700);
+  background-color: oklch(from var(--red-900) l c h / .2);
+  border-radius: var(--border-radius-md);
+  color: var(--red-200);
+  font-size: var(--font-size-xs);
+  flex-direction: column;
+  gap: .25rem;
+  margin-top: .25rem;
+  display: flex;
+}
+
+:is(.error-text-jHQh34, .byline-field-relation-error-text) {
+  color: oklch(from var(--red-400) l c h / .8);
+}
+
+:is(.tile-Y3_yre, .byline-field-relation-tile) {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  color: var(--gray-200);
+  font-size: var(--font-size-xs);
+  margin-top: .25rem;
+  display: flex;
+}
+
+:is(.mono-y8Xo6b, .byline-field-relation-mono) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+

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

@@ -0,0 +1,50 @@
+/**
+ * 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 } from '@byline/core';
+/**
+ * Row rendering strategy, in priority order:
+ *   1. `CollectionAdminConfig.picker` — a ColumnDefinition[] from the target
+ *      admin config. Each row renders the declared columns side-by-side,
+ *      reusing any column formatters (thumbnail, date, etc).
+ *   2. Explicit `displayField` prop on this component (forwarded from
+ *      `RelationField.displayField`).
+ *   3. `CollectionDefinition.useAsTitle` on the target.
+ *   4. First top-level `text` field on the target.
+ *
+ * Paths 2–4 render a single-line label (primary) + `path` (secondary).
+ */
+interface RelationPickerProps {
+    /** The target collection path (e.g. `'media'`). */
+    targetCollectionPath: string;
+    /** The target collection definition (used for labels + displayField fallback). */
+    targetDefinition?: CollectionDefinition | null;
+    /** Explicit display field to render as row label. */
+    displayField?: string;
+    /** Modal open/close state. */
+    isOpen: boolean;
+    /**
+     * Called with the picked selection when the user confirms.
+     *
+     * `record` is the raw document the picker row rendered — the caller can
+     * use it to show the selected value in its own tile without a refetch.
+     * The fields available on `record` are whatever `resolveSelectFields`
+     * asked the listing endpoint for (picker columns + `useAsTitle` +
+     * `displayField`), so any display surface downstream of the picker that
+     * also renders from those same columns will find the data it needs.
+     */
+    onSelect: (selection: {
+        targetDocumentId: string;
+        targetCollectionId: string;
+        record?: Record<string, any>;
+    }) => void;
+    /** Called when the user dismisses the modal. */
+    onDismiss: () => void;
+}
+export declare const RelationPicker: ({ targetCollectionPath, targetDefinition, displayField, isOpen, onSelect, onDismiss, }: RelationPickerProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=relation-picker.d.ts.map

package/dist/fields/relation/relation-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-picker.d.ts","sourceRoot":"","sources":["../../../src/fields/relation/relation-picker.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAyB,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAkB/E;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,mDAAmD;IACnD,oBAAoB,EAAE,MAAM,CAAA;IAC5B,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAC9C,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8BAA8B;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf;;;;;;;;;OASG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE;QACpB,gBAAgB,EAAE,MAAM,CAAA;QACxB,kBAAkB,EAAE,MAAM,CAAA;QAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAC7B,KAAK,IAAI,CAAA;IACV,gDAAgD;IAChD,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAID,eAAO,MAAM,cAAc,GAAI,wFAO5B,mBAAmB,gCAuPrB,CAAA"}

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

@@ -0,0 +1,233 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { getCollectionAdminConfig } from "@byline/core";
+import { Button, LoaderRing, Modal, Search } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { useBylineFieldServices } from "../../services/field-services-context.js";
+import { PickerCell, resolveFallbackDisplayField, resolveRowLabel, resolveSelectFields } from "./relation-display.js";
+import relation_picker_module from "./relation-picker.module.js";
+const PAGE_SIZE = 15;
+const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField, isOpen, onSelect, onDismiss })=>{
+    const [query, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const [selectedDocumentId, setSelectedDocumentId] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [documents, setDocuments] = useState([]);
+    const [totalPages, setTotalPages] = useState(1);
+    const [collectionId, setCollectionId] = useState(null);
+    const { getCollectionDocuments } = useBylineFieldServices();
+    const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
+    const pickerColumns = targetAdminConfig?.picker;
+    useEffect(()=>{
+        if (isOpen) {
+            setQuery('');
+            setPage(1);
+            setSelectedDocumentId(null);
+            setError(null);
+        }
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (!isOpen) return;
+        let cancelled = false;
+        const selectFields = resolveSelectFields(targetDefinition, displayField, pickerColumns);
+        setLoading(true);
+        setError(null);
+        getCollectionDocuments({
+            collection: targetCollectionPath,
+            params: {
+                page,
+                page_size: PAGE_SIZE,
+                query: query.length > 0 ? query : void 0,
+                fields: selectFields
+            }
+        }).then((response)=>{
+            if (cancelled) return;
+            setDocuments(response.docs);
+            setTotalPages(response.meta.totalPages ?? 1);
+            setCollectionId(response.included.collection.id);
+        }).catch((err)=>{
+            if (cancelled) return;
+            setError(err instanceof Error ? err.message : 'Failed to load documents');
+        }).finally(()=>{
+            if (!cancelled) setLoading(false);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        targetCollectionPath,
+        query,
+        page,
+        displayField,
+        targetDefinition,
+        pickerColumns,
+        getCollectionDocuments
+    ]);
+    const resolvedDisplayField = displayField ?? targetDefinition?.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
+    const handleSelect = useCallback(()=>{
+        if (!selectedDocumentId || !collectionId) return;
+        const record = documents.find((d)=>d?.id === selectedDocumentId);
+        onSelect({
+            targetDocumentId: selectedDocumentId,
+            targetCollectionId: collectionId,
+            record
+        });
+    }, [
+        selectedDocumentId,
+        collectionId,
+        documents,
+        onSelect
+    ]);
+    const title = targetDefinition ? `Select ${targetDefinition.labels.singular}` : `Select ${targetCollectionPath}`;
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        onDismiss: onDismiss,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            style: {
+                maxWidth: '600px',
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Modal.Header, {
+                    className: classnames('byline-field-relation-picker-header', relation_picker_module.header),
+                    children: /*#__PURE__*/ jsx("h3", {
+                        className: classnames('byline-field-relation-picker-title', relation_picker_module.title),
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsx(Modal.Content, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-relation-picker-body', relation_picker_module.body),
+                        children: [
+                            /*#__PURE__*/ jsx(Search, {
+                                onSearch: (q)=>{
+                                    setPage(1);
+                                    setQuery(q ?? '');
+                                },
+                                onClear: ()=>{
+                                    setPage(1);
+                                    setQuery('');
+                                },
+                                inputSize: "sm",
+                                placeholder: "Search"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: classnames('byline-field-relation-picker-list', relation_picker_module.list),
+                                children: [
+                                    loading && 0 === documents.length && /*#__PURE__*/ jsx("div", {
+                                        className: classnames('byline-field-relation-picker-loading', relation_picker_module.loading),
+                                        children: /*#__PURE__*/ jsx(LoaderRing, {
+                                            size: 24,
+                                            color: "#888888"
+                                        })
+                                    }),
+                                    !loading && error && /*#__PURE__*/ jsx("div", {
+                                        className: classnames('byline-field-relation-picker-error', relation_picker_module.error),
+                                        children: error
+                                    }),
+                                    !loading && !error && 0 === documents.length && /*#__PURE__*/ jsx("div", {
+                                        className: classnames('byline-field-relation-picker-empty', relation_picker_module.empty),
+                                        children: "No documents found"
+                                    }),
+                                    documents.length > 0 && /*#__PURE__*/ jsx("ul", {
+                                        className: classnames('byline-field-relation-picker-rows', relation_picker_module.rows),
+                                        children: documents.map((doc)=>{
+                                            const id = doc.id;
+                                            const selected = selectedDocumentId === id;
+                                            return /*#__PURE__*/ jsx("li", {
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: classnames('byline-field-relation-picker-row-button', relation_picker_module["row-button"], selected && [
+                                                        'byline-field-relation-picker-row-selected',
+                                                        relation_picker_module["row-selected"]
+                                                    ]),
+                                                    onClick: ()=>setSelectedDocumentId(id),
+                                                    children: pickerColumns && pickerColumns.length > 0 ? /*#__PURE__*/ jsx("div", {
+                                                        className: classnames('byline-field-relation-picker-row-cells', relation_picker_module["row-cells"]),
+                                                        children: pickerColumns.map((col)=>/*#__PURE__*/ jsx(PickerCell, {
+                                                                column: col,
+                                                                record: doc
+                                                            }, String(col.fieldName)))
+                                                    }) : /*#__PURE__*/ jsxs("div", {
+                                                        className: classnames('byline-field-relation-picker-row-stack', relation_picker_module["row-stack"]),
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: classnames('byline-field-relation-picker-row-label', relation_picker_module["row-label"]),
+                                                                children: resolveRowLabel(doc, resolvedDisplayField) || id
+                                                            }),
+                                                            'string' == typeof doc.path && doc.path.length > 0 && /*#__PURE__*/ jsx("span", {
+                                                                className: classnames('byline-field-relation-picker-row-path', relation_picker_module["row-path"]),
+                                                                children: doc.path
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }, id);
+                                        })
+                                    })
+                                ]
+                            }),
+                            totalPages > 1 && /*#__PURE__*/ jsxs("div", {
+                                className: classnames('byline-field-relation-picker-pager', relation_picker_module.pager),
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "xs",
+                                        variant: "outlined",
+                                        intent: "noeffect",
+                                        type: "button",
+                                        disabled: page <= 1 || loading,
+                                        onClick: ()=>setPage((p)=>Math.max(1, p - 1)),
+                                        children: "Previous"
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        children: [
+                                            "Page ",
+                                            page,
+                                            " of ",
+                                            totalPages
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "xs",
+                                        variant: "outlined",
+                                        intent: "noeffect",
+                                        type: "button",
+                                        disabled: page >= totalPages || loading,
+                                        onClick: ()=>setPage((p)=>Math.min(totalPages, p + 1)),
+                                        children: "Next"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Modal.Actions, {
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            size: "sm",
+                            intent: "noeffect",
+                            type: "button",
+                            onClick: onDismiss,
+                            className: classnames('byline-field-relation-picker-action', relation_picker_module.action),
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            size: "sm",
+                            className: classnames('byline-field-relation-picker-action', relation_picker_module.action),
+                            intent: "primary",
+                            type: "button",
+                            disabled: !selectedDocumentId,
+                            onClick: handleSelect,
+                            children: "Select"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { RelationPicker };