@rakun-kit/manager-react 1.4.3 → 1.4.4

package/dist/esm/components/editor/themes/editor-theme.css

@@ -1,91 +1,91 @@
-.EditorTheme__code {
-  background-color: transparent;
-  font-family: Menlo, Consolas, Monaco, monospace;
-  display: block;
-  padding: 8px 8px 8px 52px;
-  line-height: 1.53;
-  font-size: 13px;
-  margin: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  overflow-x: auto;
-  border: 1px solid #ccc;
-  position: relative;
-  border-radius: 8px;
-  tab-size: 2;
-}
-.EditorTheme__code:before {
-  content: attr(data-gutter);
-  position: absolute;
-  background-color: transparent;
-  border-right: 1px solid #ccc;
-  left: 0;
-  top: 0;
-  padding: 8px;
-  color: #777;
-  white-space: pre-wrap;
-  text-align: right;
-  min-width: 25px;
-}
-.EditorTheme__table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-y: scroll;
-  overflow-x: scroll;
-  table-layout: fixed;
-  width: fit-content;
-  width: 100%;
-  margin: 0px 0px 30px 0px;
-}
-.EditorTheme__tokenComment {
-  color: slategray;
-}
-.EditorTheme__tokenPunctuation {
-  color: #999;
-}
-.EditorTheme__tokenProperty {
-  color: #905;
-}
-.EditorTheme__tokenSelector {
-  color: #690;
-}
-.EditorTheme__tokenOperator {
-  color: #9a6e3a;
-}
-.EditorTheme__tokenAttr {
-  color: #07a;
-}
-.EditorTheme__tokenVariable {
-  color: #e90;
-}
-.EditorTheme__tokenFunction {
-  color: #dd4a68;
-}
-
-.Collapsible__container {
-  background-color: var(--background);
-  border: 1px solid #ccc;
-  border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.Collapsible__title{
-  padding: 0.25rem;
-  padding-left: 1rem;
-  position: relative;
-  font-weight: bold;
-  outline: none;
-  cursor: pointer;
-  list-style-type: disclosure-closed;
-  list-style-position: inside;
-}
-
-.Collapsible__title p{
-  display: inline-flex;
-}
-.Collapsible__title::marker{
-  color: lightgray;
-}
-.Collapsible__container[open] >.Collapsible__title {
-  list-style-type: disclosure-open;
-}
+.EditorTheme__code {
+  background-color: transparent;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  border: 1px solid #ccc;
+  position: relative;
+  border-radius: 8px;
+  tab-size: 2;
+}
+.EditorTheme__code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: transparent;
+  border-right: 1px solid #ccc;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.EditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: fit-content;
+  width: 100%;
+  margin: 0px 0px 30px 0px;
+}
+.EditorTheme__tokenComment {
+  color: slategray;
+}
+.EditorTheme__tokenPunctuation {
+  color: #999;
+}
+.EditorTheme__tokenProperty {
+  color: #905;
+}
+.EditorTheme__tokenSelector {
+  color: #690;
+}
+.EditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.EditorTheme__tokenAttr {
+  color: #07a;
+}
+.EditorTheme__tokenVariable {
+  color: #e90;
+}
+.EditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+
+.Collapsible__container {
+  background-color: var(--background);
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.Collapsible__title{
+  padding: 0.25rem;
+  padding-left: 1rem;
+  position: relative;
+  font-weight: bold;
+  outline: none;
+  cursor: pointer;
+  list-style-type: disclosure-closed;
+  list-style-position: inside;
+}
+
+.Collapsible__title p{
+  display: inline-flex;
+}
+.Collapsible__title::marker{
+  color: lightgray;
+}
+.Collapsible__container[open] >.Collapsible__title {
+  list-style-type: disclosure-open;
+}

package/dist/esm/components/ui/sortable.js

@@ -127,10 +127,10 @@ function Sortable(props) {
         },
     }), [value]);
     const screenReaderInstructions = React.useMemo(() => ({
-        draggable: `
-        To pick up a sortable item, press space or enter.
-        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
-        Press space or enter again to drop the item in its new position, or press escape to cancel.
+        draggable: `
+        To pick up a sortable item, press space or enter.
+        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
+        Press space or enter again to drop the item in its new position, or press escape to cancel.
       `,
     }), [orientation]);
     const contextValue = React.useMemo(() => ({

package/dist/esm/router/dashboard/[contentType]/[edit]/_fields/DynamicDataControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicDataControl.d.ts","sourceRoot":"","sources":["../../../../../../../src/router/dashboard/[contentType]/[edit]/_fields/DynamicDataControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,uBAAuB,EAEvB,kBAAkB,EAClB,mBAAmB,EAGpB,MAAM,wBAAwB,CAAA;AA4F/B,eAAO,MAAM,qBAAqB,GAChC,aAAa,kBAAkB,EAC/B,OAAO,mBAAmB,YAM3B,CAAA;AAqvBD,eAAO,MAAM,kBAAkB,GAAI,qHAWhC;IACD,WAAW,EAAE,kBAAkB,CAAA;IAC/B,mBAAmB,CAAC,EAAE,kBAAkB,CAAA;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,mBAAmB,CAAA;IAC1B,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,CAAA;IAC7C,QAAQ,EAAE,CAAC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,KAAK,IAAI,CAAA;IACjE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,mDAiOA,CAAA"}
+{"version":3,"file":"DynamicDataControl.d.ts","sourceRoot":"","sources":["../../../../../../../src/router/dashboard/[contentType]/[edit]/_fields/DynamicDataControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,uBAAuB,EAIvB,kBAAkB,EAClB,mBAAmB,EAIpB,MAAM,wBAAwB,CAAA;AAuG/B,eAAO,MAAM,qBAAqB,GAChC,aAAa,kBAAkB,EAC/B,OAAO,mBAAmB,YAM3B,CAAA;AAwxCD,eAAO,MAAM,kBAAkB,GAAI,qHAWhC;IACD,WAAW,EAAE,kBAAkB,CAAA;IAC/B,mBAAmB,CAAC,EAAE,kBAAkB,CAAA;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,mBAAmB,CAAA;IAC1B,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,CAAA;IAC7C,QAAQ,EAAE,CAAC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,KAAK,IAAI,CAAA;IACjE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,mDAiOA,CAAA"}

package/dist/esm/router/dashboard/[contentType]/[edit]/_fields/DynamicDataControl.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getListField, isDynamicDataSourceContentTypeAllowed, isTranslatableObject, } from '@rakun-kit/core/client';
-import { Cable, HelpCircle, Link2, ListFilter, X } from 'lucide-react';
+import { Cable, ChevronRight, HelpCircle, Link2, ListFilter, X } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Badge } from '../../../../../components/ui/badge.js';
 import { Button } from '../../../../../components/ui/button.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../../../../components/ui/collapsible.js';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../../../../components/ui/dialog.js';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from '../../../../../components/ui/select.js';
 import { Tooltip, TooltipContent, TooltipTrigger, } from '../../../../../components/ui/tooltip.js';
@@ -27,6 +28,7 @@ const cleanDynamicBindings = (bindings) => {
 };
 const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
 const isListField = (field) => field.config.ui === 'List' || field.config.ui === 'Iterator';
+const isRelatedCollectionSource = (source) => !!source && 'kind' in source && source.kind === 'relatedCollection';
 const isDynamicVisibleField = (field) => (field.visibility ?? 'all') === 'all' && field.isDynamic !== false;
 export const isDynamicFieldEnabled = (contentType, field) => {
     return (contentType.dynamicData !== false &&
@@ -56,6 +58,8 @@ const getFieldKind = (field) => {
     }
     if (field.config.type === 'Relation')
         return 'object';
+    if (field.config.ui === 'SimpleList')
+        return 'array';
     if (isListField(field))
         return 'array';
     return 'unknown';
@@ -65,11 +69,31 @@ const isCompatibleSourceKind = (sourceKind, targetField) => {
         return sourceKind !== 'object' && sourceKind !== 'array';
     return sourceKind === getFieldKind(targetField);
 };
+const getMultipleFileField = (field) => field.config.type === 'File' &&
+    field.isMultiple
+    ? field
+    : undefined;
+const areFieldKindsCompatible = (sourceField, targetField) => {
+    const sourceKind = getFieldKind(sourceField);
+    if (!targetField)
+        return isCompatibleSourceKind(sourceKind);
+    const targetKind = getFieldKind(targetField);
+    if (sourceKind !== targetKind)
+        return false;
+    if (sourceKind !== 'array')
+        return true;
+    const sourceFile = getMultipleFileField(sourceField);
+    const targetFile = getMultipleFileField(targetField);
+    if (!sourceFile && !targetFile)
+        return true;
+    if (!sourceFile || !targetFile)
+        return false;
+    return (sourceFile.mediaType === 'Any' ||
+        targetFile.mediaType === 'Any' ||
+        sourceFile.mediaType === targetFile.mediaType);
+};
 const fieldLabel = (path) => path.startsWith('_seo.') ? `seo.${path.slice('_seo.'.length)}` : path;
-const isSeoPath = (path) => path === '_seo' ||
-    path === 'seo' ||
-    path.startsWith('_seo.') ||
-    path.startsWith('seo.');
+const isSeoPath = (path) => path.split('.').some((segment) => segment === '_seo' || segment === 'seo');
 const fileFieldOptions = (path, targetField) => {
     const options = [
         { label: fieldLabel(`${path}.url`), value: `${path}.url`, kind: 'string' },
@@ -117,10 +141,22 @@ const nestedSourceFieldOptions = ({ contentType, prefix = '', targetField, depth
             depth: depth + 1,
         });
     }
+    if (field.config.type === 'File' &&
+        field.isMultiple) {
+        if (!areFieldKindsCompatible(field, targetField))
+            return [];
+        return [
+            {
+                label: fieldLabel(path),
+                value: path,
+                kind,
+            },
+        ];
+    }
     if (field.config.type === 'File') {
         return fileFieldOptions(path, targetField);
     }
-    if (!isCompatibleSourceKind(kind, targetField))
+    if (!areFieldKindsCompatible(field, targetField))
         return [];
     return [
         {
@@ -145,6 +181,26 @@ const createSource = (contentType, value, id) => value === '$href'
     : { contentType, id, path: value };
 const sourceValue = (source) => source?.virtual === 'href' ? '$href' : source?.path || '';
 const sourceLabel = (source) => source?.virtual === 'href' ? 'href' : fieldLabel(source?.path || '');
+const mappingSourceSummary = (source, currentSourceName) => {
+    if (!source) {
+        return {
+            mode: 'Not configured',
+            detail: 'Choose a mapping source',
+        };
+    }
+    if (!isRelatedCollectionSource(source)) {
+        return {
+            mode: 'Direct field',
+            detail: `${currentSourceName}.${sourceLabel(source)}`,
+        };
+    }
+    const sort = Object.entries(source.sort ?? {})[0];
+    const sortSummary = sort ? ` · sort ${sort[0]} ${sort[1]}` : '';
+    return {
+        mode: 'Related collection',
+        detail: `${source.contentType}.${source.relation} → ${currentSourceName} · collect ${source.path} · limit ${source.limit}${sortSummary}`,
+    };
+};
 const sourceContentTypeLabel = (source, documentContentTypeName) => source.contentType === documentContentTypeName && !source.id
     ? 'Current document'
     : source.contentType;
@@ -212,6 +268,7 @@ const bindingSummary = ({ list, fieldBinding, listBinding, documentContentTypeNa
     return `${sourceContentTypeLabel(fieldBinding, documentContentTypeName)} -> ${sourceLabel(fieldBinding)}`;
 };
 const PanelSection = ({ title, children, }) => (_jsxs("div", { className: 'grid gap-3 rounded-md border border-border bg-muted/20 p-3', children: [_jsx("div", { className: 'text-xs font-semibold uppercase text-muted-foreground', children: title }), children] }));
+const ControlLabel = ({ children, help, }) => (_jsxs("div", { className: 'flex items-center gap-1.5', children: [_jsx(Label, { children: children }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: 'button', className: 'rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring', "aria-label": help, children: _jsx(HelpCircle, { className: 'h-3.5 w-3.5' }) }) }), _jsx(TooltipContent, { side: 'top', sideOffset: 6, className: 'max-w-xs', children: help })] })] }));
 const FieldBindingEditor = ({ contentTypes, documentContentType, currentDocumentSourceEnabled, targetField, binding, onChange, }) => {
     const { language } = useLanguage();
     const [sourceType, setSourceType] = useState(binding?.contentType || '');
@@ -241,6 +298,9 @@ const FieldBindingEditor = ({ contentTypes, documentContentType, currentDocument
             selectedContentType?.dynamicDataSource === true,
     });
     const items = (sourceItemsQuery.data?.items ?? []);
+    const hasCurrentDocumentItem = currentDocumentSourceEnabled && sourceType === documentContentType.name;
+    const hasItemOptions = hasCurrentDocumentItem || items.length > 0;
+    const fieldOptions = sourceFieldOptions(selectedContentType, targetField);
     const emit = (nextType = sourceType, nextId = sourceId, nextPath = fieldPath) => {
         const usesCurrentDocument = currentDocumentSourceEnabled &&
             nextType === documentContentType.name &&
@@ -251,7 +311,7 @@ const FieldBindingEditor = ({ contentTypes, documentContentType, currentDocument
         }
         onChange(createSource(nextType, nextPath, usesCurrentDocument ? undefined : nextId));
     };
-    return (_jsx(PanelSection, { title: 'Source value', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-[1fr_1.4fr_1fr]', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Source", _jsxs(Select, { value: sourceType, onValueChange: (value) => {
+    return (_jsx(PanelSection, { title: 'Source value', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-[1fr_1.4fr_1fr]', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Source", _jsxs(Select, { disabled: contentTypes.length === 0, value: sourceType, onValueChange: (value) => {
                                 const nextId = currentDocumentSourceEnabled &&
                                     value === documentContentType.name
                                     ? CURRENT_DOCUMENT_ID
@@ -260,24 +320,23 @@ const FieldBindingEditor = ({ contentTypes, documentContentType, currentDocument
                                 setSourceId(nextId);
                                 setFieldPath('');
                                 onChange(undefined);
-                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Content type' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: contentTypes.map((ct) => (_jsx(SelectItem, { value: ct.name, children: currentDocumentSourceEnabled &&
+                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: contentTypes.length > 0 ? 'Content type' : 'No content types' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: contentTypes.map((ct) => (_jsx(SelectItem, { value: ct.name, children: currentDocumentSourceEnabled &&
                                                 ct.name === documentContentType.name
                                                 ? `${ct.name} (current document)`
-                                                : ct.name }, ct.name))) }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Item", _jsxs(Select, { disabled: !sourceType, value: sourceId, onValueChange: (value) => {
+                                                : ct.name }, ct.name))) }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Item", _jsxs(Select, { disabled: !sourceType || !hasItemOptions, value: sourceId, onValueChange: (value) => {
                                 setSourceId(value);
                                 emit(sourceType, value, fieldPath);
-                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Item' }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [currentDocumentSourceEnabled &&
-                                                sourceType === documentContentType.name ? (_jsx(SelectItem, { value: CURRENT_DOCUMENT_ID, children: "Current document" })) : null, items.map((item) => {
+                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: hasItemOptions ? 'Item' : 'No items available' }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [hasCurrentDocumentItem ? (_jsx(SelectItem, { value: CURRENT_DOCUMENT_ID, children: "Current document" })) : null, items.map((item) => {
                                                 const label = selectedContentType
                                                     ? getListField(item, selectedContentType.listFields ?? [])
                                                     : item._id;
                                                 return (_jsx(SelectItem, { value: item._id, children: isTranslatableObject(label)
                                                         ? label[language.code]
                                                         : String(label || item._id) }, item._id));
-                                            })] }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Field", _jsxs(Select, { disabled: !sourceType || !sourceId, value: fieldPath, onValueChange: (value) => {
+                                            })] }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Field", _jsxs(Select, { disabled: !sourceType || !sourceId || fieldOptions.length === 0, value: fieldPath, onValueChange: (value) => {
                                 setFieldPath(value);
                                 emit(sourceType, sourceId, value);
-                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Field' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: sourceFieldOptions(selectedContentType, targetField).map((field) => (_jsx(SelectItem, { value: field.value, children: field.label }, field.value))) }) })] })] })] }) }));
+                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: fieldOptions.length > 0 ? 'Field' : 'No compatible fields' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: fieldOptions.map((field) => (_jsx(SelectItem, { value: field.value, children: field.label }, field.value))) }) })] })] })] }) }));
 };
 const getListTargetContentType = (field, itemName) => {
     const entry = field.fields.find((item) => item.name === itemName);
@@ -285,15 +344,140 @@ const getListTargetContentType = (field, itemName) => {
         return undefined;
     return entry.field.contentType;
 };
+const getRelationContentType = (field) => {
+    if (field.isTranslatable)
+        return undefined;
+    if (field.config.type === 'Relation') {
+        return field.contentType;
+    }
+    if (field.config.ui === 'SimpleList') {
+        const itemField = field.field;
+        if (itemField.config.type === 'Relation') {
+            return itemField.contentType;
+        }
+    }
+    return undefined;
+};
+const getRelatedRelationOptions = (contentType, currentSource) => Object.entries(contentType.fields).flatMap(([name, field]) => {
+    if (!isDynamicVisibleField(field))
+        return [];
+    const relationContentType = getRelationContentType(field);
+    return relationContentType?.name === currentSource.name ? [name] : [];
+});
+const getRelatedPathOptions = (contentType, targetField) => sourceFieldOptions(contentType, targetField).filter((option) => option.kind === 'array' && option.value !== '$href');
+const getSortFieldOptions = (contentType) => Object.entries(contentType.fields).flatMap(([name, field]) => {
+    if (!isDynamicVisibleField(field) ||
+        field.isTranslatable ||
+        name.startsWith('_') ||
+        isSeoPath(name)) {
+        return [];
+    }
+    const kind = getFieldKind(field);
+    const isSingleSelect = field.config.type === 'Select' &&
+        !field.isMultiple;
+    const isSortable = (field.config.type === 'String' && field.config.ui !== 'RichText') ||
+        field.config.type === 'Number' ||
+        field.config.type === 'Boolean' ||
+        field.config.type === 'Date' ||
+        isSingleSelect;
+    return isSortable ? [{ label: fieldLabel(name), value: name, kind }] : [];
+});
+const createRelatedCollectionSource = ({ contentType, currentSource, targetField, }) => {
+    const relation = getRelatedRelationOptions(contentType, currentSource)[0];
+    const path = getRelatedPathOptions(contentType, targetField)[0]?.value;
+    if (!relation || !path)
+        return undefined;
+    return {
+        kind: 'relatedCollection',
+        contentType: contentType.name,
+        relation,
+        path,
+        limit: 10,
+    };
+};
+const MappingSourceEditor = ({ contentTypes, currentSource, targetField, source, onChange, }) => {
+    const relatedSource = isRelatedCollectionSource(source) ? source : undefined;
+    const directSource = source && !isRelatedCollectionSource(source) ? source : undefined;
+    const directFieldOptions = sourceFieldOptions(currentSource, targetField);
+    const relatedContentTypes = contentTypes.filter((contentType) => getRelatedRelationOptions(contentType, currentSource).length > 0 &&
+        getRelatedPathOptions(contentType, targetField).length > 0);
+    const selectedRelatedContentType = relatedSource
+        ? relatedContentTypes.find((contentType) => contentType.name === relatedSource.contentType)
+        : undefined;
+    const relationOptions = selectedRelatedContentType
+        ? getRelatedRelationOptions(selectedRelatedContentType, currentSource)
+        : [];
+    const pathOptions = selectedRelatedContentType
+        ? getRelatedPathOptions(selectedRelatedContentType, targetField)
+        : [];
+    const sortOptions = selectedRelatedContentType
+        ? getSortFieldOptions(selectedRelatedContentType)
+        : [];
+    const sortEntry = Object.entries(relatedSource?.sort ?? {})[0];
+    const sortField = sortEntry?.[0] ?? '';
+    const sortDirection = sortEntry?.[1] ?? 'desc';
+    if (!relatedSource) {
+        return (_jsxs("div", { className: 'grid gap-3 md:grid-cols-[0.7fr_1.3fr]', children: [_jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Choose a direct field or query a related collection.', children: "Mapping mode" }), _jsxs(Select, { value: 'field', onValueChange: (value) => {
+                                if (value !== 'relatedCollection')
+                                    return;
+                                const next = relatedContentTypes
+                                    .map((contentType) => createRelatedCollectionSource({
+                                    contentType,
+                                    currentSource,
+                                    targetField,
+                                }))
+                                    .find(Boolean);
+                                onChange(next);
+                            }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'field', children: "Direct field" }), relatedContentTypes.length > 0 ? (_jsx(SelectItem, { value: 'relatedCollection', children: "Related collection" })) : null] })] })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsxs(ControlLabel, { help: 'Its value will be assigned to this mapped property.', children: ["Field on ", currentSource.name] }), _jsxs(Select, { disabled: directFieldOptions.length === 0, value: sourceValue(directSource), onValueChange: (value) => onChange(createSource(currentSource.name, value)), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: directFieldOptions.length > 0
+                                            ? 'Select a source field'
+                                            : 'No compatible fields' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: directFieldOptions.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] })] })] }));
+    }
+    return (_jsxs("div", { className: 'grid gap-3', children: [_jsxs("div", { className: 'grid gap-3 sm:grid-cols-2 lg:grid-cols-4', children: [_jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Query records related to the current source item.', children: "Mapping mode" }), _jsxs(Select, { value: 'relatedCollection', onValueChange: () => onChange(undefined), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'field', children: "Direct field" }), _jsx(SelectItem, { value: 'relatedCollection', children: "Related collection" })] })] })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Content type whose records will be searched.', children: "Collection to query" }), _jsxs(Select, { disabled: relatedContentTypes.length === 0, value: relatedSource.contentType, onValueChange: (value) => {
+                                    const contentType = relatedContentTypes.find((item) => item.name === value);
+                                    if (!contentType)
+                                        return;
+                                    onChange(createRelatedCollectionSource({
+                                        contentType,
+                                        currentSource,
+                                        targetField,
+                                    }));
+                                }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: relatedContentTypes.length > 0
+                                                ? 'Select a content type'
+                                                : 'No compatible collections' }) }), _jsx(SelectContent, { children: relatedContentTypes.map((contentType) => (_jsx(SelectItem, { value: contentType.name, children: contentType.name }, contentType.name))) })] })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsxs(ControlLabel, { help: `Field on ${relatedSource.contentType} that points to ${currentSource.name}.`, children: ["Relation to ", currentSource.name] }), _jsxs(Select, { disabled: relationOptions.length === 0, value: relatedSource.relation, onValueChange: (relation) => onChange({ ...relatedSource, relation }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: relationOptions.length > 0
+                                                ? 'Select a relation field'
+                                                : 'No compatible relations' }) }), _jsx(SelectContent, { children: relationOptions.map((relation) => (_jsx(SelectItem, { value: relation, children: relation }, relation))) })] })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Arrays from matching records are flattened into one result.', children: "Array field to collect" }), _jsxs(Select, { disabled: pathOptions.length === 0, value: relatedSource.path, onValueChange: (path) => onChange({ ...relatedSource, path }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: pathOptions.length > 0
+                                                ? 'Select an array field'
+                                                : 'No compatible array fields' }) }), _jsx(SelectContent, { children: pathOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })] }), _jsxs("div", { className: 'grid gap-3 sm:grid-cols-[0.7fr_1fr_0.7fr]', children: [_jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: `Number of ${relatedSource.contentType} records queried per ${currentSource.name}. Minimum 1, maximum 100.`, children: "Maximum related records" }), _jsx(Input, { type: 'number', min: 1, max: 100, value: String(relatedSource.limit), onChange: (event) => onChange({
+                                    ...relatedSource,
+                                    limit: Math.min(100, Math.max(1, Number(event.target.value || 10))),
+                                }) })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Optional. Only direct scalar fields can be used.', children: "Sort related records by" }), _jsxs(Select, { value: sortField || '__none__', onValueChange: (value) => onChange({
+                                    ...relatedSource,
+                                    sort: value === '__none__'
+                                        ? undefined
+                                        : { [value]: sortDirection },
+                                }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'No sort' }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: '__none__', children: "No sort" }), sortOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] })] }), _jsxs("div", { className: 'grid content-start gap-1.5', children: [_jsx(ControlLabel, { help: 'Applied before collecting and flattening the arrays.', children: "Sort direction" }), _jsxs(Select, { disabled: !sortField, value: sortDirection, onValueChange: (direction) => sortField
+                                    ? onChange({
+                                        ...relatedSource,
+                                        sort: { [sortField]: direction },
+                                    })
+                                    : undefined, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'asc', children: "Ascending" }), _jsx(SelectItem, { value: 'desc', children: "Descending" })] })] })] })] })] }));
+};
 const ListBindingEditor = ({ contentTypes, field, binding, onChange, }) => {
     const [sourceType, setSourceType] = useState(binding?.contentType || '');
     const [itemName, setItemName] = useState(binding?.itemName || field.fields[0]?.name || '');
     const [filterState, setFilterState] = useState(readFilterState(binding?.query?.filter));
+    const [openMappingField, setOpenMappingField] = useState(null);
     const selectedSource = contentTypes.find((ct) => ct.name === sourceType);
     const targetContentType = getListTargetContentType(field, itemName);
     const targetFields = useMemo(() => targetContentType
         ? Object.entries(targetContentType.fields).filter(([, targetField]) => isDynamicVisibleField(targetField))
         : [], [targetContentType]);
+    const sortFieldOptions = selectedSource
+        ? getSortFieldOptions(selectedSource)
+        : [];
+    const filterFieldOptions = selectedSource
+        ? sourceFieldOptions(selectedSource).filter((item) => item.value !== '$href')
+        : [];
     const emit = (patch) => {
         const next = {
             contentType: sourceType,
@@ -317,13 +501,13 @@ const ListBindingEditor = ({ contentTypes, field, binding, onChange, }) => {
             },
         });
     };
-    return (_jsxs("div", { className: 'grid gap-3', children: [_jsx(PanelSection, { title: 'Collection', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-2', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Source", _jsxs(Select, { value: sourceType, onValueChange: (value) => {
+    return (_jsxs("div", { className: 'grid gap-3', children: [_jsx(PanelSection, { title: 'Collection', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-2', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Source", _jsxs(Select, { disabled: contentTypes.length === 0, value: sourceType, onValueChange: (value) => {
                                         setSourceType(value);
                                         emit({ contentType: value, map: {} });
-                                    }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Content type' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: contentTypes.map((ct) => (_jsx(SelectItem, { value: ct.name, children: ct.name }, ct.name))) }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Item", _jsxs(Select, { disabled: !sourceType, value: itemName, onValueChange: (value) => {
+                                    }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: contentTypes.length > 0 ? 'Content type' : 'No content types' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: contentTypes.map((ct) => (_jsx(SelectItem, { value: ct.name, children: ct.name }, ct.name))) }) })] })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Item", _jsxs(Select, { disabled: !sourceType || field.fields.length === 0, value: itemName, onValueChange: (value) => {
                                         setItemName(value);
                                         emit({ itemName: value, map: {} });
-                                    }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Item type' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: field.fields.map((item) => (_jsx(SelectItem, { value: item.name, children: item.name }, item.name))) }) })] })] })] }) }), _jsx(PanelSection, { title: 'Query', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-[0.7fr_1fr_1.1fr]', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Limit", _jsx(Input, { type: 'number', min: 1, value: String(binding?.query?.options?.limit ?? 10), onChange: (event) => emit({
+                                    }, children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: field.fields.length > 0 ? 'Item type' : 'No item types' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: field.fields.map((item) => (_jsx(SelectItem, { value: item.name, children: item.name }, item.name))) }) })] })] })] }) }), _jsx(PanelSection, { title: 'Query', children: _jsxs("div", { className: 'grid gap-3 md:grid-cols-[0.7fr_1fr_1.1fr]', children: [_jsxs(Label, { className: 'grid gap-1.5', children: ["Limit", _jsx(Input, { type: 'number', min: 1, value: String(binding?.query?.options?.limit ?? 10), onChange: (event) => emit({
                                         query: {
                                             ...binding?.query,
                                             options: {
@@ -331,7 +515,7 @@ const ListBindingEditor = ({ contentTypes, field, binding, onChange, }) => {
                                                 limit: Number(event.target.value || 10),
                                             },
                                         },
-                                    }) })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Sort", _jsxs(Select, { disabled: !selectedSource, value: Object.keys(binding?.query?.options?.sort ?? {})[0] ?? '', onValueChange: (value) => emit({
+                                    }) })] }), _jsxs(Label, { className: 'grid gap-1.5', children: ["Sort", _jsxs(Select, { disabled: sortFieldOptions.length === 0, value: Object.keys(binding?.query?.options?.sort ?? {})[0] ?? '', onValueChange: (value) => emit({
                                         query: {
                                             ...binding?.query,
                                             options: {
@@ -339,17 +523,17 @@ const ListBindingEditor = ({ contentTypes, field, binding, onChange, }) => {
                                                 sort: value ? { [value]: 'desc' } : undefined,
                                             },
                                         },
-                                    }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Field' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: sourceFieldOptions(selectedSource)
-                                                    .filter((item) => item.value !== '$href')
-                                                    .map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] })] }), _jsxs("div", { className: 'grid gap-1.5', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2', children: [_jsx("span", { className: 'text-sm font-medium', children: "Filter" }), _jsxs(Button, { type: 'button', size: 'icon', variant: 'ghost', className: 'size-7', onClick: () => updateFilter(undefined), children: [_jsx(X, { className: 'h-4 w-4' }), _jsx("span", { className: 'sr-only', children: "Clear filter" })] })] }), _jsxs("div", { className: 'grid gap-2 sm:grid-cols-[1fr_0.9fr_1fr]', children: [_jsxs(Select, { disabled: !selectedSource, value: filterState?.field || '', onValueChange: (value) => updateFilter(value
+                                    }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: sortFieldOptions.length > 0
+                                                    ? 'Field'
+                                                    : 'No sortable fields' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: sortFieldOptions.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] })] }), _jsxs("div", { className: 'grid gap-1.5', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2', children: [_jsx("span", { className: 'text-sm font-medium', children: "Filter" }), _jsxs(Button, { type: 'button', size: 'icon', variant: 'ghost', className: 'size-7', onClick: () => updateFilter(undefined), children: [_jsx(X, { className: 'h-4 w-4' }), _jsx("span", { className: 'sr-only', children: "Clear filter" })] })] }), _jsxs("div", { className: 'grid gap-2 sm:grid-cols-[1fr_0.9fr_1fr]', children: [_jsxs(Select, { disabled: filterFieldOptions.length === 0, value: filterState?.field || '', onValueChange: (value) => updateFilter(value
                                                 ? {
                                                     field: value,
                                                     operator: filterState?.operator ?? 'equals',
                                                     value: filterState?.value ?? '',
                                                 }
-                                                : undefined), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Field' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: sourceFieldOptions(selectedSource)
-                                                            .filter((item) => item.value !== '$href')
-                                                            .map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] }), _jsxs(Select, { disabled: !filterState?.field, value: filterState?.operator || 'equals', onValueChange: (value) => filterState
+                                                : undefined), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: filterFieldOptions.length > 0
+                                                            ? 'Field'
+                                                            : 'No filterable fields' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: filterFieldOptions.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] }), _jsxs(Select, { disabled: !filterState?.field, value: filterState?.operator || 'equals', onValueChange: (value) => filterState
                                                 ? updateFilter({
                                                     ...filterState,
                                                     operator: value,
@@ -365,12 +549,18 @@ const ListBindingEditor = ({ contentTypes, field, binding, onChange, }) => {
                                                 })
                                                 : undefined }))] })] })] }) }), _jsx(PanelSection, { title: 'Mapping', children: _jsx("div", { className: 'grid gap-2', children: targetFields.map(([targetField, targetFieldConfig]) => {
                         const source = binding?.map?.[targetField];
-                        return (_jsxs("div", { className: 'grid items-center gap-2 rounded-md border border-border bg-background/70 px-3 py-2 md:grid-cols-[minmax(8rem,0.7fr)_auto_minmax(12rem,1.3fr)]', children: [_jsx("span", { className: 'truncate text-sm font-medium', children: targetField }), _jsx("span", { className: 'hidden text-xs text-muted-foreground md:block', children: '->' }), _jsxs(Select, { disabled: !selectedSource, value: sourceValue(source), onValueChange: (value) => emit({
-                                        map: {
-                                            ...binding?.map,
-                                            [targetField]: createSource(sourceType, value),
-                                        },
-                                    }), children: [_jsx(SelectTrigger, { className: 'w-full', children: _jsx(SelectValue, { placeholder: 'Source field' }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: sourceFieldOptions(selectedSource, targetFieldConfig).map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] })] }, targetField));
+                        const summary = mappingSourceSummary(source, selectedSource?.name ?? 'Source');
+                        const isOpen = openMappingField === targetField;
+                        return (_jsx(Collapsible, { open: isOpen, onOpenChange: (open) => setOpenMappingField(open ? targetField : null), children: _jsxs("div", { className: 'overflow-hidden rounded-md border border-border bg-background/70 transition-colors hover:border-foreground/20', children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: 'button', disabled: !selectedSource, className: 'group grid w-full grid-cols-[minmax(6rem,0.45fr)_auto_minmax(0,1fr)_auto] items-center gap-3 px-3 py-2.5 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', children: [_jsx("span", { className: 'truncate text-sm font-semibold', children: targetField }), _jsx(Badge, { variant: source ? 'secondary' : 'outline', className: 'max-w-40 truncate', children: summary.mode }), _jsx("span", { className: 'truncate text-sm text-muted-foreground', children: selectedSource
+                                                        ? summary.detail
+                                                        : 'Select a source collection first' }), _jsx(ChevronRight, { className: 'h-4 w-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-90' }), _jsxs("span", { className: 'sr-only', children: ["Configure ", targetField, " mapping"] })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: 'border-t border-border bg-muted/20 p-3', children: selectedSource ? (_jsx(MappingSourceEditor, { contentTypes: contentTypes, currentSource: selectedSource, targetField: targetFieldConfig, source: source, onChange: (nextSource) => {
+                                                    const map = { ...(binding?.map ?? {}) };
+                                                    if (nextSource)
+                                                        map[targetField] = nextSource;
+                                                    else
+                                                        delete map[targetField];
+                                                    emit({ map });
+                                                } })) : null }) })] }) }, targetField));
                     }) }) })] }));
 };
 export const DynamicDataControl = ({ contentType, documentContentType, fieldName, field, contentTypes, bindings, onChange, open, onOpenChange, mode = 'full', }) => {