@byline/admin 4.2.0 → 4.4.0

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

@@ -5,23 +5,26 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { ArrayField as ArrayFieldType } from '@byline/core';
-export declare const ArrayField: ({ field, defaultValue, path, disableSorting, collectionPath, contentLocale, }: {
+import type { ArrayField as ArrayFieldType, FieldAdminConfig } from '@byline/core';
+export declare const ArrayField: ({ field, defaultValue, path, disableSorting, contentLocale, fieldAdmin, }: {
     field: ArrayFieldType;
     defaultValue: any;
     path: string;
     disableSorting?: boolean;
-    /**
-     * Collection path forwarded to upload-capable fields (`file` / `image`)
-     * nested inside an array item, which need it to reach the `/upload`
-     * endpoint. Without it those fields fall back to their empty placeholder
-     * and never render an upload widget.
-     */
-    collectionPath?: string;
     /**
      * Active content locale, forwarded to each array item's fields so
      * localized widgets nested inside an array (e.g. a `localized` richText)
      * can render their locale badge.
      */
     contentLocale?: string;
+    /**
+     * Admin overrides for the array's child fields, keyed by dotted,
+     * index-free schema paths relative to this array ('answer',
+     * 'filesGroup.publicationFile'). Schema paths address declarations, so
+     * one entry applies to that field in every item. Arrives pre-sliced from
+     * the enclosing widget (`FieldRenderer` / `GroupField`); exact-name
+     * entries apply to the child, deeper entries are re-sliced and threaded
+     * on (see `sliceFieldAdmin`).
+     */
+    fieldAdmin?: Record<string, FieldAdminConfig>;
 }) => import("react").JSX.Element;

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

@@ -3,12 +3,13 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { DraggableSortable, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
 import classnames from "classnames";
+import { sliceFieldAdmin } from "../field-admin.js";
 import { defaultScalarForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
-import { SortableItem } from "../sortable-item.js";
+import { SortableItem, StaticItem } from "../sortable-item.js";
 import { useFormContext } from "../../forms/form-context.js";
 import array_field_module from "./array-field.module.js";
-const ArrayField = ({ field, defaultValue, path, disableSorting = false, collectionPath, contentLocale })=>{
+const ArrayField = ({ field, defaultValue, path, disableSorting = false, contentLocale, fieldAdmin })=>{
     const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const [items, setItems] = useState([]);
@@ -113,6 +114,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
             const initial = item[childField.name];
             if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
                 const groupData = initial && 'object' == typeof initial ? initial : {};
+                const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name);
                 return /*#__PURE__*/ jsxs("div", {
                     className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
                     children: [
@@ -125,8 +127,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                                 defaultValue: groupData[innerField.name],
                                 basePath: `${arrayElementPath}.${childField.name}`,
                                 disableSorting: true,
-                                collectionPath: collectionPath,
-                                contentLocale: contentLocale
+                                contentLocale: contentLocale,
+                                components: groupAdmin?.[innerField.name]?.components,
+                                editor: groupAdmin?.[innerField.name]?.editor,
+                                fieldAdmin: sliceFieldAdmin(groupAdmin, innerField.name)
                             }, innerField.name))
                     ]
                 }, childField.name);
@@ -136,13 +140,17 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                 defaultValue: initial,
                 basePath: arrayElementPath,
                 disableSorting: true,
-                collectionPath: collectionPath,
-                contentLocale: contentLocale
+                contentLocale: contentLocale,
+                components: fieldAdmin?.[childField.name]?.components,
+                editor: fieldAdmin?.[childField.name]?.editor,
+                fieldAdmin: sliceFieldAdmin(fieldAdmin, childField.name)
             }, childField.name);
         });
-        const label = field.label ?? field.name;
-        if (disableSorting) return /*#__PURE__*/ jsx("div", {
-            className: classnames('byline-field-array-card', array_field_module.card),
+        const itemLabel = `${field.label ?? field.name} ${index + 1}`;
+        if (disableSorting) return /*#__PURE__*/ jsx(StaticItem, {
+            label: itemLabel,
+            onAddBelow: ()=>handleInsertBelow(index),
+            onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
@@ -150,7 +158,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
         }, itemWrapper.id);
         return /*#__PURE__*/ jsx(SortableItem, {
             id: itemWrapper.id,
-            label: label,
+            label: itemLabel,
             onAddBelow: ()=>handleInsertBelow(index),
             onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
@@ -159,43 +167,47 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
             })
         }, itemWrapper.id);
     };
+    const addRow = /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-field-array-add-row', array_field_module["add-row"]),
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                onClick: ()=>{
+                    handleAddItem();
+                },
+                "aria-label": t('fields.array.addItemAriaLabel'),
+                children: /*#__PURE__*/ jsx(PlusIcon, {})
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                onClick: ()=>{
+                    handleAddItem();
+                },
+                className: classnames('byline-field-array-add-label', array_field_module["add-label"]),
+                children: t('fields.array.addItem')
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-array ${field.name}`,
         children: [
-            !disableSorting && field.label && /*#__PURE__*/ jsx("h3", {
+            field.label && /*#__PURE__*/ jsx("h3", {
                 className: classnames('byline-field-array-title', array_field_module.title),
                 children: field.label
             }),
-            disableSorting ? /*#__PURE__*/ jsx("div", {
+            disableSorting ? /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-field-array-stack', array_field_module.stack),
-                children: items.map((item, index)=>renderItem(item, index))
+                children: [
+                    items.map((item, index)=>renderItem(item, index)),
+                    addRow
+                ]
             }) : /*#__PURE__*/ jsxs(DraggableSortable, {
                 ids: items.map((i)=>i.id),
                 onDragEnd: handleDragEnd,
                 className: classnames('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-array-add-row', array_field_module["add-row"]),
-                        children: [
-                            /*#__PURE__*/ jsx(IconButton, {
-                                onClick: ()=>{
-                                    handleAddItem();
-                                },
-                                "aria-label": t('fields.array.addItemAriaLabel'),
-                                children: /*#__PURE__*/ jsx(PlusIcon, {})
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                tabIndex: -1,
-                                onClick: ()=>{
-                                    handleAddItem();
-                                },
-                                className: classnames('byline-field-array-add-label', array_field_module["add-label"]),
-                                children: t('fields.array.addItem')
-                            })
-                        ]
-                    })
+                    addRow
                 ]
             })
         ]

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

@@ -136,6 +136,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
             },
             defaultValue: fieldData,
             path: arrayElementPath,
+            disableSorting: false,
             contentLocale: contentLocale,
             fieldAdmin: blockAdminByType.get(item._type)?.fields
         }, subField.blockType);

package/dist/fields/draggable-context-menu.js

@@ -16,7 +16,8 @@ function DraggableContextMenu({ onAddBelow, onRemove }) {
             /*#__PURE__*/ jsx(Dropdown.Trigger, {
                 render: /*#__PURE__*/ jsx(IconButton, {
                     variant: "text",
-                    size: "sm"
+                    size: "sm",
+                    "aria-label": t('fields.draggableMenu.triggerAriaLabel')
                 }),
                 children: /*#__PURE__*/ jsx(EllipsisIcon, {
                     width: "16px",

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

@@ -0,0 +1,15 @@
+/**
+ * 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 { FieldAdminConfig } from '@byline/core';
+/**
+ * Entries of `map` addressing descendants of `childName`, re-keyed with the
+ * `childName.` prefix stripped — the sub-map a structural child (group /
+ * array) threads to its own children. Returns `undefined` when `map` has no
+ * descendant entries for the child, so leaf widgets aren't handed empty maps.
+ */
+export declare function sliceFieldAdmin(map: Record<string, FieldAdminConfig> | undefined, childName: string): Record<string, FieldAdminConfig> | undefined;

package/dist/fields/field-admin.js

@@ -0,0 +1,11 @@
+function sliceFieldAdmin(map, childName) {
+    if (null == map) return;
+    const prefix = `${childName}.`;
+    let sliced;
+    for (const [key, value] of Object.entries(map))if (key.startsWith(prefix)) {
+        sliced ??= {};
+        sliced[key.slice(prefix.length)] = value;
+    }
+    return sliced;
+}
+export { sliceFieldAdmin };

package/dist/fields/field-admin.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 {};

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

@@ -5,15 +5,13 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { Field, FieldComponentSlots, RichTextEditorComponent } from '@byline/core';
+import type { Field, FieldAdminConfig, FieldComponentSlots, RichTextEditorComponent } from '@byline/core';
 interface FieldRendererProps {
     field: Field;
     defaultValue?: any;
     basePath?: string;
     disableSorting?: boolean;
     hideLabel?: boolean;
-    /** Collection path (e.g. `'media'`) forwarded to upload-capable fields. */
-    collectionPath?: string;
     /**
      * The active content locale (e.g. `'en'`, `'fr'`). When provided and
      * `field.localized === true`, a small locale badge is shown so the editor
@@ -32,6 +30,15 @@ interface FieldRendererProps {
      * Ignored when `field.type !== 'richText'`.
      */
     editor?: RichTextEditorComponent;
+    /**
+     * Admin overrides for this field's *descendants*, keyed by dotted,
+     * index-free schema paths relative to this field ('answer',
+     * 'filesGroup.publicationFile'). Only meaningful when `field` is a
+     * structural `group` / `array` — the widget slices the map per child
+     * (see `sliceFieldAdmin`). `components` / `editor` above stay the
+     * overrides for this field itself.
+     */
+    fieldAdmin?: Record<string, FieldAdminConfig>;
 }
-export declare const FieldRenderer: ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, collectionPath, contentLocale, components, editor, }: FieldRendererProps) => import("react").JSX.Element | null;
+export declare const FieldRenderer: ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, contentLocale, components, editor, fieldAdmin, }: FieldRendererProps) => import("react").JSX.Element | null;
 export {};

package/dist/fields/field-renderer.js

@@ -20,7 +20,7 @@ import { TextField } from "./text/text-field.js";
 import { TextAreaField } from "./text-area/text-area-field.js";
 import { useFieldChangeHandler } from "./use-field-change-handler.js";
 import { useFieldCondition } from "./use-field-condition.js";
-const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, collectionPath, contentLocale, components, editor })=>{
+const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, contentLocale, components, editor, fieldAdmin })=>{
     const path = basePath ? `${basePath}.${field.name}` : field.name;
     const htmlId = path.replace(/[[\].]/g, '-');
     const handleChange = useFieldChangeHandler(field, path);
@@ -161,8 +161,7 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     } : field,
                     defaultValue: defaultValue,
                     onChange: handleChange,
-                    path: path,
-                    collectionPath: collectionPath
+                    path: path
                 });
             case 'image':
                 return /*#__PURE__*/ jsx(ImageField, {
@@ -172,8 +171,7 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     } : field,
                     defaultValue: defaultValue,
                     onChange: handleChange,
-                    path: path,
-                    collectionPath: collectionPath
+                    path: path
                 });
             case 'relation':
                 if (field.hasMany) return /*#__PURE__*/ jsx(RelationManyField, {
@@ -203,8 +201,9 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     } : field,
                     defaultValue: defaultValue,
                     path: path,
-                    collectionPath: collectionPath,
-                    contentLocale: contentLocale
+                    disableSorting: disableSorting,
+                    contentLocale: contentLocale,
+                    fieldAdmin: fieldAdmin
                 });
             case 'blocks':
                 if (!field.blocks) return null;
@@ -221,8 +220,8 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     defaultValue: defaultValue,
                     path: path,
                     disableSorting: disableSorting,
-                    collectionPath: collectionPath,
-                    contentLocale: contentLocale
+                    contentLocale: contentLocale,
+                    fieldAdmin: fieldAdmin
                 });
             default:
                 return null;

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

@@ -8,12 +8,10 @@
 import { type FileField as FieldType, type StoredFileValue } from '@byline/core';
 interface FileFieldProps {
     field: FieldType;
-    /** Collection path required to call the /upload endpoint. */
-    collectionPath?: string;
     value?: StoredFileValue | null;
     defaultValue?: StoredFileValue | null;
     onChange?: (value: StoredFileValue | null) => void;
     path?: string;
 }
-export declare const FileField: ({ field, collectionPath, value, defaultValue, onChange: _onChange, path, }: FileFieldProps) => import("react").JSX.Element;
+export declare const FileField: ({ field, value, defaultValue, onChange: _onChange, path, }: FileFieldProps) => import("react").JSX.Element;
 export {};

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

@@ -18,14 +18,14 @@ function triggerDownload(url, filename) {
     a.click();
     document.body.removeChild(a);
 }
-const FileField = ({ field, collectionPath, value, defaultValue, onChange: _onChange, path })=>{
+const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
     const fieldPath = path ?? field.name;
     const { t } = useTranslation('byline-admin');
     const fieldError = useFieldError(fieldPath);
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const isUploading = useIsFieldUploading(fieldPath);
-    const { removePendingUpload, documentId } = useFormContext();
+    const { removePendingUpload, documentId, collectionPath } = useFormContext();
     const handleChange = useFieldChangeHandler(field, fieldPath);
     const incomingValue = isDirty ? fieldValue ?? null : value ?? fieldValue ?? defaultValue ?? null;
     const isPending = isPendingStoredFileValue(incomingValue);

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

@@ -11,11 +11,15 @@ interface GroupFieldProps {
     defaultValue: any;
     path: string;
     /**
-     * Collection path forwarded to upload-capable child fields (`file` / `image`),
-     * which need it to reach the `/upload` endpoint. Without it those fields fall
-     * back to their empty placeholder and never render an upload widget.
+     * Threaded to child fields — governs only the *drag* affordance of any
+     * `array` children (structural add/remove always renders; see ArrayField).
+     * Defaults to `true` (conservative): arrays inside plain schema groups
+     * stay drag-free. `BlocksField` passes `false` on its synthesized group so
+     * arrays directly inside blocks are fully sortable — safe because each
+     * `DraggableSortable` is an independent DndContext with grip-scoped
+     * listeners.
      */
-    collectionPath?: string;
+    disableSorting?: boolean;
     /**
      * Active content locale, forwarded to child fields so localized widgets
      * nested inside the group (e.g. a `localized` richText) can render their
@@ -24,12 +28,15 @@ interface GroupFieldProps {
     contentLocale?: string;
     /**
      * Per-child-field admin overrides (`components` slots, richtext `editor`),
-     * keyed by child field name. Threaded by `BlocksField` from the site-wide
-     * `ClientConfig.blockAdmin` registry so block children can take per-field
-     * admin config; plain groups receive none today (their children inherit
-     * site-wide defaults).
+     * keyed by dotted, index-free schema paths relative to this group
+     * ('caption', 'faq.answer'). Threaded by `BlocksField` from the site-wide
+     * `ClientConfig.blockAdmin` registry (block children render through a
+     * synthesized group) and by `FieldRenderer` for plain schema groups, whose
+     * map arrives pre-sliced from the collection admin config. Exact-name
+     * entries apply to the child itself; deeper entries are re-sliced and
+     * threaded on (see `sliceFieldAdmin`).
      */
     fieldAdmin?: Record<string, FieldAdminConfig>;
 }
-export declare const GroupField: ({ field, defaultValue, path, collectionPath, contentLocale, fieldAdmin, }: GroupFieldProps) => import("react").JSX.Element;
+export declare const GroupField: ({ field, defaultValue, path, disableSorting, contentLocale, fieldAdmin, }: GroupFieldProps) => import("react").JSX.Element;
 export {};

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

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ErrorText } from "@byline/ui/react";
 import classnames from "classnames";
+import { sliceFieldAdmin } from "../field-admin.js";
 import { placeholderForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
 import { useFieldError } from "../../forms/form-context.js";
 import group_field_module from "./group-field.module.js";
-const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale, fieldAdmin })=>{
+const GroupField = ({ field, defaultValue, path, disableSorting = true, contentLocale, fieldAdmin })=>{
     const fieldError = useFieldError(field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
@@ -46,11 +47,11 @@ const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale,
                         field: innerField,
                         defaultValue: groupData[innerField.name],
                         basePath: path,
-                        disableSorting: true,
-                        collectionPath: collectionPath,
+                        disableSorting: disableSorting,
                         contentLocale: contentLocale,
                         components: fieldAdmin?.[innerField.name]?.components,
-                        editor: fieldAdmin?.[innerField.name]?.editor
+                        editor: fieldAdmin?.[innerField.name]?.editor,
+                        fieldAdmin: sliceFieldAdmin(fieldAdmin, innerField.name)
                     }, innerField.name))
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {

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

@@ -8,12 +8,10 @@
 import { type ImageField as FieldType, type StoredFileValue } from '@byline/core';
 interface ImageFieldProps {
     field: FieldType;
-    /** Collection path required to call the /upload endpoint. */
-    collectionPath?: string;
     value?: StoredFileValue | null;
     defaultValue?: StoredFileValue | null;
     onChange?: (value: StoredFileValue | null) => void;
     path?: string;
 }
-export declare const ImageField: ({ field, collectionPath, value, defaultValue, onChange: _onChange, path, }: ImageFieldProps) => import("react").JSX.Element;
+export declare const ImageField: ({ field, value, defaultValue, onChange: _onChange, path, }: ImageFieldProps) => import("react").JSX.Element;
 export {};

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

@@ -8,13 +8,13 @@ import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUpl
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import image_field_module from "./image-field.module.js";
 import { ImageUploadField } from "./image-upload-field.js";
-const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onChange, path })=>{
+const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
     const fieldPath = path ?? field.name;
     const fieldError = useFieldError(fieldPath);
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const isUploading = useIsFieldUploading(fieldPath);
-    const { removePendingUpload, documentId } = useFormContext();
+    const { removePendingUpload, documentId, collectionPath } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const handleChange = useFieldChangeHandler(field, fieldPath);
     const incomingValue = isDirty ? fieldValue ?? null : value ?? fieldValue ?? defaultValue ?? null;

package/dist/fields/sortable-item.d.ts

@@ -13,3 +13,9 @@ export declare const SortableItem: ({ id, label, children, onAddBelow, onRemove,
     onAddBelow?: () => void;
     onRemove?: () => void;
 }) => import("react").JSX.Element;
+export declare const StaticItem: ({ label, children, onAddBelow, onRemove, }: {
+    label: ReactNode;
+    children: ReactNode;
+    onAddBelow?: () => void;
+    onRemove?: () => void;
+}) => import("react").JSX.Element;

package/dist/fields/sortable-item.js

@@ -5,25 +5,13 @@ import { ChevronDownIcon, GripperVerticalIcon, useSortable } from "@byline/ui/re
 import classnames from "classnames";
 import { DraggableContextMenu } from "./draggable-context-menu.js";
 import sortable_item_module from "./sortable-item.module.js";
-const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
+const ItemFrame = ({ label, children, onAddBelow, onRemove, grip, rootRef, style, dragging = false, rootClassName })=>{
     const { t } = useTranslation('byline-admin');
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id,
-        transition: {
-            duration: 250,
-            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
-        }
-    });
     const [collapsed, setCollapsed] = useState(false);
-    const style = {
-        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
-        transition,
-        zIndex: isDragging ? 10 : 'auto'
-    };
     return /*#__PURE__*/ jsxs("div", {
-        ref: setNodeRef,
+        ref: rootRef,
         style: style,
-        className: classnames('byline-sortable', sortable_item_module.root, isDragging && [
+        className: classnames('byline-sortable', sortable_item_module.root, rootClassName, dragging && [
             'byline-sortable-dragging',
             sortable_item_module.dragging
         ], collapsed && [
@@ -37,15 +25,7 @@ const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
                     sortable_item_module["header-expanded"]
                 ]),
                 children: [
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: classnames('byline-sortable-grip', sortable_item_module.grip),
-                        ...attributes,
-                        ...listeners,
-                        children: /*#__PURE__*/ jsx(GripperVerticalIcon, {
-                            className: classnames('byline-sortable-grip-icon', sortable_item_module["grip-icon"])
-                        })
-                    }),
+                    grip,
                     /*#__PURE__*/ jsx("div", {
                         className: classnames('byline-sortable-label', sortable_item_module.label),
                         children: label
@@ -78,4 +58,43 @@ const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
         ]
     });
 };
-export { SortableItem };
+const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        transition: {
+            duration: 250,
+            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
+        }
+    });
+    const style = {
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+        transition,
+        zIndex: isDragging ? 10 : 'auto'
+    };
+    return /*#__PURE__*/ jsx(ItemFrame, {
+        label: label,
+        onAddBelow: onAddBelow,
+        onRemove: onRemove,
+        rootRef: setNodeRef,
+        style: style,
+        dragging: isDragging,
+        grip: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: classnames('byline-sortable-grip', sortable_item_module.grip),
+            ...attributes,
+            ...listeners,
+            children: /*#__PURE__*/ jsx(GripperVerticalIcon, {
+                className: classnames('byline-sortable-grip-icon', sortable_item_module["grip-icon"])
+            })
+        }),
+        children: children
+    });
+};
+const StaticItem = ({ label, children, onAddBelow, onRemove })=>/*#__PURE__*/ jsx(ItemFrame, {
+        label: label,
+        onAddBelow: onAddBelow,
+        onRemove: onRemove,
+        rootClassName: "byline-sortable-static",
+        children: children
+    });
+export { SortableItem, StaticItem };

package/dist/forms/form-context.d.ts

@@ -55,6 +55,19 @@ interface FormContextType {
      * `@byline/core`).
      */
     documentId: string | null;
+    /**
+     * Path of the collection this form edits, `null` when the form is rendered
+     * without one. Upload widgets need it to address the upload endpoint.
+     *
+     * It lives here rather than being passed down because it is constant for
+     * the whole form: threading it as a prop meant every nesting-capable
+     * container (`array`, `group`, `blocks`) had to remember to forward it,
+     * and a container that forgot silently rendered upload fields read-only —
+     * no error, just a missing drop zone. That happened twice, in `array` /
+     * `group` and then in `blocks`. A value read from context cannot be
+     * dropped by a container that never carries it.
+     */
+    collectionPath: string | null;
     setFieldValue: (name: string, value: any) => void;
     setFieldStore: (name: string, value: any) => void;
     getFieldValue: (name: string) => any;
@@ -97,7 +110,7 @@ interface FormContextType {
     subscribeSystemAvailableLocales: (listener: SystemAvailableLocalesListener) => () => void;
 }
 export declare const useFormContext: () => FormContextType;
-export declare const FormProvider: ({ children, initialData, documentId, }: {
+export declare const FormProvider: ({ children, initialData, documentId, collectionPath, }: {
     children: React.ReactNode;
     initialData?: Record<string, any>;
     /**
@@ -105,6 +118,12 @@ export declare const FormProvider: ({ children, initialData, documentId, }: {
      * the context for upload widgets honouring `upload.requireSavedDocument`.
      */
     documentId?: string | null;
+    /**
+     * Path of the collection being edited. Exposed on the context so upload
+     * widgets can reach the upload endpoint from any nesting depth without
+     * every container forwarding it — see `FormContextType.collectionPath`.
+     */
+    collectionPath?: string | null;
 }) => React.JSX.Element;
 /**
  * Subscribe to the system `path` slot edited by the path widget.

package/dist/forms/form-context.js

@@ -22,7 +22,7 @@ const useFormContext = ()=>{
     if (null == context) throw new Error('useFormContext must be used within a FormProvider');
     return context;
 };
-const FormProvider = ({ children, initialData = {}, documentId = null })=>{
+const FormProvider = ({ children, initialData = {}, documentId = null, collectionPath = null })=>{
     const fieldValues = useRef(JSON.parse(JSON.stringify(initialData?.fields ?? initialData)));
     const initialValues = useRef(initialData?.fields ?? initialData);
     const errorsRef = useRef([]);
@@ -140,7 +140,7 @@ const FormProvider = ({ children, initialData = {}, documentId = null })=>{
     const appendPatch = useCallback((patch)=>{
         patchesRef.current = [
             ...patchesRef.current,
-            patch
+            structuredClone(patch)
         ];
         dirtyFields.current.add('__patch__');
         notifyMetaListeners();
@@ -377,6 +377,7 @@ const FormProvider = ({ children, initialData = {}, documentId = null })=>{
     return /*#__PURE__*/ jsx(FormContext.Provider, {
         value: {
             documentId,
+            collectionPath,
             setFieldValue,
             setFieldStore,
             getFieldValue,