@byline/admin 4.2.0 → 4.3.0

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

@@ -5,8 +5,8 @@
  *
  * 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, collectionPath, contentLocale, fieldAdmin, }: {
     field: ArrayFieldType;
     defaultValue: any;
     path: string;
@@ -24,4 +24,14 @@ export declare const ArrayField: ({ field, defaultValue, path, disableSorting, c
      * 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, collectionPath, 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: [
@@ -126,7 +128,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                                 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);
@@ -137,12 +142,17 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                 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 +160,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 +169,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,7 +5,7 @@
  *
  * 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;
@@ -32,6 +32,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, collectionPath, 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, collectionPath, contentLocale, components, editor, fieldAdmin })=>{
     const path = basePath ? `${basePath}.${field.name}` : field.name;
     const htmlId = path.replace(/[[\].]/g, '-');
     const handleChange = useFieldChangeHandler(field, path);
@@ -203,8 +203,10 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     } : field,
                     defaultValue: defaultValue,
                     path: path,
+                    disableSorting: disableSorting,
                     collectionPath: collectionPath,
-                    contentLocale: contentLocale
+                    contentLocale: contentLocale,
+                    fieldAdmin: fieldAdmin
                 });
             case 'blocks':
                 if (!field.blocks) return null;
@@ -222,7 +224,8 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     path: path,
                     disableSorting: disableSorting,
                     collectionPath: collectionPath,
-                    contentLocale: contentLocale
+                    contentLocale: contentLocale,
+                    fieldAdmin: fieldAdmin
                 });
             default:
                 return null;

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

@@ -10,6 +10,16 @@ interface GroupFieldProps {
     field: GroupFieldType;
     defaultValue: any;
     path: string;
+    /**
+     * 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.
+     */
+    disableSorting?: boolean;
     /**
      * Collection path forwarded to upload-capable child fields (`file` / `image`),
      * which need it to reach the `/upload` endpoint. Without it those fields fall
@@ -24,12 +34,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, collectionPath, 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, collectionPath, contentLocale, fieldAdmin })=>{
     const fieldError = useFieldError(field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
@@ -46,11 +47,12 @@ const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale,
                         field: innerField,
                         defaultValue: groupData[innerField.name],
                         basePath: path,
-                        disableSorting: true,
+                        disableSorting: disableSorting,
                         collectionPath: collectionPath,
                         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/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.js

@@ -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();

package/dist/forms/form-renderer.js

@@ -5,6 +5,7 @@ import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, ComboButton } from "@byline/ui/react";
 import classnames from "classnames";
+import { sliceFieldAdmin } from "../fields/field-admin.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { AdminGroup } from "../presentation/group.js";
@@ -185,7 +186,8 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
             collectionPath: collectionPath,
             contentLocale: contentLocale,
             components: adminConfig?.fields?.[field.name]?.components,
-            editor: adminConfig?.fields?.[field.name]?.editor
+            editor: adminConfig?.fields?.[field.name]?.editor,
+            fieldAdmin: sliceFieldAdmin(adminConfig?.fields, field.name)
         }, field.name);
     };
     const renderItem = (name)=>{

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -162,32 +162,32 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.6",
     "@lezer/highlight": "^1.2.3",
-    "@tanstack/react-form-start": "^1.33.0",
+    "@tanstack/react-form-start": "^1.33.2",
     "classnames": "^2.5.1",
     "jose": "^6.2.3",
-    "react-diff-viewer-continued": "^4.2.2",
+    "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.1",
     "zod": "^4.4.3",
-    "@byline/core": "4.2.0",
-    "@byline/i18n": "4.2.0",
-    "@byline/auth": "4.2.0",
-    "@byline/ui": "4.2.0"
+    "@byline/core": "4.3.0",
+    "@byline/auth": "4.3.0",
+    "@byline/i18n": "4.3.0",
+    "@byline/ui": "4.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.2",
+    "@biomejs/biome": "2.5.4",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^0.23.2",
-    "@types/node": "^26.1.0",
+    "@types/node": "^26.1.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rimraf": "^6.1.3",
-    "tsx": "^4.23.0",
+    "tsx": "^4.23.1",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vitest": "^4.1.10"

package/src/fields/array/array-field.tsx

@@ -8,20 +8,22 @@
 
 import { useEffect, useState } from 'react'
 
-import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
+import type { ArrayField as ArrayFieldType, Field, FieldAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { DraggableSortable, IconButton, moveItem, PlusIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { defaultScalarForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
-import { SortableItem } from '../../fields/sortable-item'
+import { SortableItem, StaticItem } from '../../fields/sortable-item'
 import { useFormContext } from '../../forms/form-context'
 import styles from './array-field.module.css'
 
 // ---------------------------------------------------------------------------
-// ArrayField — renders `type: 'array'` fields. Children are homogeneous:
-// either single value fields or a single group definition. Supports D&D.
+// ArrayField — renders `type: 'array'` fields. Each item renders every child
+// field declared in the array's `fields` (value fields and/or groups, in any
+// combination). Supports D&D.
 // ---------------------------------------------------------------------------
 
 export const ArrayField = ({
@@ -31,6 +33,7 @@ export const ArrayField = ({
   disableSorting = false,
   collectionPath,
   contentLocale,
+  fieldAdmin,
 }: {
   field: ArrayFieldType
   defaultValue: any
@@ -49,6 +52,16 @@ export const ArrayField = ({
    * 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>
 }) => {
   const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext()
   const { t } = useTranslation('byline-admin')
@@ -207,8 +220,11 @@ export const ArrayField = ({
       const initial = item[childField.name]
 
       if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
-        // Group child — render its inner fields with the group's sub-object
+        // Group child — render its inner fields with the group's sub-object.
+        // fieldAdmin slices one level per structural hop: the group's
+        // descendant map first, then each inner field's own slice.
         const groupData = initial && typeof initial === 'object' ? initial : {}
+        const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name)
         return (
           <div
             key={childField.name}
@@ -228,6 +244,9 @@ export const ArrayField = ({
                 disableSorting={true}
                 collectionPath={collectionPath}
                 contentLocale={contentLocale}
+                components={groupAdmin?.[innerField.name]?.components}
+                editor={groupAdmin?.[innerField.name]?.editor}
+                fieldAdmin={sliceFieldAdmin(groupAdmin, innerField.name)}
               />
             ))}
           </div>
@@ -243,19 +262,34 @@ export const ArrayField = ({
           disableSorting={true}
           collectionPath={collectionPath}
           contentLocale={contentLocale}
+          components={fieldAdmin?.[childField.name]?.components}
+          editor={fieldAdmin?.[childField.name]?.editor}
+          fieldAdmin={sliceFieldAdmin(fieldAdmin, childField.name)}
         />
       )
     })
 
-    const label = field.label ?? field.name
+    // Per-item label: the array label plus a 1-based position, so items
+    // read "Questions 1", "Questions 2" rather than all repeating the bare
+    // array label.
+    const itemLabel = `${field.label ?? field.name} ${index + 1}`
 
+    // `disableSorting` removes only the drag affordance. Structural editing
+    // (add-below / remove / collapse) is always available — StaticItem is
+    // the grip-less sibling of SortableItem (see sortable-item.tsx for why
+    // it is a separate component rather than a prop).
     if (disableSorting) {
       return (
-        <div key={itemWrapper.id} className={cx('byline-field-array-card', styles.card)}>
+        <StaticItem
+          key={itemWrapper.id}
+          label={itemLabel}
+          onAddBelow={() => handleInsertBelow(index)}
+          onRemove={() => handleRemoveItem(index)}
+        >
           <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
             {innerBody}
           </div>
-        </div>
+        </StaticItem>
       )
     }
 
@@ -263,7 +297,7 @@ export const ArrayField = ({
       <SortableItem
         key={itemWrapper.id}
         id={itemWrapper.id}
-        label={label}
+        label={itemLabel}
         onAddBelow={() => handleInsertBelow(index)}
         onRemove={() => handleRemoveItem(index)}
       >
@@ -274,14 +308,43 @@ export const ArrayField = ({
     )
   }
 
+  // The add-row renders in both branches — structural editing does not
+  // depend on sortability.
+  const addRow = (
+    <div className={cx('byline-field-array-add-row', styles['add-row'])}>
+      <IconButton
+        onClick={() => {
+          void handleAddItem()
+        }}
+        aria-label={t('fields.array.addItemAriaLabel')}
+      >
+        <PlusIcon />
+      </IconButton>
+      {/* Text-styled button so the label is clickable too. Removed from
+          the tab order (tabIndex -1) — the IconButton is the single
+          keyboard/screen-reader control for this action. */}
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => {
+          void handleAddItem()
+        }}
+        className={cx('byline-field-array-add-label', styles['add-label'])}
+      >
+        {t('fields.array.addItem')}
+      </button>
+    </div>
+  )
+
   return (
     <div className={`byline-field-array ${field.name}`}>
-      {!disableSorting && field.label && (
+      {field.label && (
         <h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>
       )}
       {disableSorting ? (
         <div className={cx('byline-field-array-stack', styles.stack)}>
           {items.map((item, index) => renderItem(item, index))}
+          {addRow}
         </div>
       ) : (
         <DraggableSortable
@@ -290,29 +353,7 @@ export const ArrayField = ({
           className={cx('byline-field-array-stack', styles.stack)}
         >
           {items.map((item, index) => renderItem(item, index))}
-          <div className={cx('byline-field-array-add-row', styles['add-row'])}>
-            <IconButton
-              onClick={() => {
-                void handleAddItem()
-              }}
-              aria-label={t('fields.array.addItemAriaLabel')}
-            >
-              <PlusIcon />
-            </IconButton>
-            {/* Text-styled button so the label is clickable too. Removed from
-                the tab order (tabIndex -1) — the IconButton is the single
-                keyboard/screen-reader control for this action. */}
-            <button
-              type="button"
-              tabIndex={-1}
-              onClick={() => {
-                void handleAddItem()
-              }}
-              className={cx('byline-field-array-add-label', styles['add-label'])}
-            >
-              {t('fields.array.addItem')}
-            </button>
-          </div>
+          {addRow}
         </DraggableSortable>
       )}
     </div>

package/src/fields/blocks/blocks-field.tsx

@@ -249,6 +249,11 @@ export const BlocksField = ({
         }
         defaultValue={fieldData}
         path={arrayElementPath}
+        // Arrays directly inside a block are fully sortable: each
+        // DraggableSortable is an independent DndContext and drag listeners
+        // are grip-scoped, so the inner array's drags can't leak into the
+        // block-level context (and vice versa).
+        disableSorting={false}
         contentLocale={contentLocale}
         fieldAdmin={blockAdminByType.get(item._type)?.fields}
       />

package/src/fields/draggable-context-menu.tsx

@@ -37,7 +37,15 @@ export function DraggableContextMenu({
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" />}>
+      <DropdownMenu.Trigger
+        render={
+          <IconButton
+            variant="text"
+            size="sm"
+            aria-label={t('fields.draggableMenu.triggerAriaLabel')}
+          />
+        }
+      >
         <EllipsisIcon width="16px" height="16px" />
       </DropdownMenu.Trigger>
 

package/src/fields/field-admin.test.node.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { describe, expect, it } from 'vitest'
+
+import { sliceFieldAdmin } from './field-admin.js'
+
+describe('sliceFieldAdmin', () => {
+  const answer = { editor: (() => null) as any }
+  const question = { components: {} }
+
+  it('returns undefined for an undefined map', () => {
+    expect(sliceFieldAdmin(undefined, 'faq')).toBeUndefined()
+  })
+
+  it('returns undefined when no entry addresses a descendant of the child', () => {
+    expect(sliceFieldAdmin({ faq: question, other: question }, 'faq')).toBeUndefined()
+  })
+
+  it('strips the child prefix from descendant keys', () => {
+    expect(sliceFieldAdmin({ 'faq.answer': answer, 'faq.question': question }, 'faq')).toEqual({
+      answer,
+      question,
+    })
+  })
+
+  it('keeps deeper paths dotted for the next level to slice', () => {
+    const map = { 'files.filesGroup.publicationFile': question }
+    const level1 = sliceFieldAdmin(map, 'files')
+    expect(level1).toEqual({ 'filesGroup.publicationFile': question })
+    expect(sliceFieldAdmin(level1, 'filesGroup')).toEqual({ publicationFile: question })
+  })
+
+  it('does not match on name prefixes that are not path segments', () => {
+    // 'faqExtra.answer' must not be sliced by child 'faq'.
+    expect(sliceFieldAdmin({ 'faqExtra.answer': answer }, 'faq')).toBeUndefined()
+  })
+
+  it('excludes the child’s own exact-name entry from the slice', () => {
+    expect(sliceFieldAdmin({ faq: question, 'faq.answer': answer }, 'faq')).toEqual({
+      answer,
+    })
+  })
+})

package/src/fields/field-admin.ts

@@ -0,0 +1,39 @@
+/**
+ * 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'
+
+// ---------------------------------------------------------------------------
+// Field admin map slicing — `fields{}` override maps (CollectionAdminConfig /
+// BlockAdminConfig) are keyed by dotted, index-free schema paths relative to
+// the map's root ('title', 'faq.answer'). Structural widgets thread the map
+// down one level at a time: a child field takes its own entry by exact name,
+// and receives the descendant entries re-keyed relative to itself.
+// ---------------------------------------------------------------------------
+
+/**
+ * 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 function sliceFieldAdmin(
+  map: Record<string, FieldAdminConfig> | undefined,
+  childName: string
+): Record<string, FieldAdminConfig> | undefined {
+  if (map == null) return undefined
+  const prefix = `${childName}.`
+  let sliced: Record<string, FieldAdminConfig> | undefined
+  for (const [key, value] of Object.entries(map)) {
+    if (key.startsWith(prefix)) {
+      sliced ??= {}
+      sliced[key.slice(prefix.length)] = value
+    }
+  }
+  return sliced
+}

package/src/fields/field-renderer.tsx

@@ -10,6 +10,7 @@ import type {
   ArrayField as ArrayFieldType,
   BlocksField as BlocksFieldType,
   Field,
+  FieldAdminConfig,
   FieldComponentSlots,
   GroupField as GroupFieldType,
   RichTextEditorComponent,
@@ -68,6 +69,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 const FieldRenderer = ({
@@ -80,6 +90,7 @@ export const FieldRenderer = ({
   contentLocale,
   components,
   editor,
+  fieldAdmin,
 }: FieldRendererProps) => {
   const path = basePath ? `${basePath}.${field.name}` : field.name
   const htmlId = path.replace(/[[\].]/g, '-')
@@ -289,8 +300,10 @@ export const FieldRenderer = ({
             }
             defaultValue={defaultValue}
             path={path}
+            disableSorting={disableSorting}
             collectionPath={collectionPath}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       case 'blocks':
@@ -313,6 +326,7 @@ export const FieldRenderer = ({
             disableSorting={disableSorting}
             collectionPath={collectionPath}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       default:

package/src/fields/group/group-field.tsx

@@ -12,6 +12,7 @@ import type { Field, FieldAdminConfig, GroupField as GroupFieldType } from '@byl
 import { ErrorText } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { placeholderForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { useFieldError } from '../../forms/form-context'
@@ -32,6 +33,16 @@ interface GroupFieldProps {
   field: GroupFieldType
   defaultValue: any
   path: string
+  /**
+   * 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.
+   */
+  disableSorting?: boolean
   /**
    * Collection path forwarded to upload-capable child fields (`file` / `image`),
    * which need it to reach the `/upload` endpoint. Without it those fields fall
@@ -46,10 +57,13 @@ 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>
 }
@@ -58,6 +72,7 @@ export const GroupField = ({
   field,
   defaultValue,
   path,
+  disableSorting = true,
   collectionPath,
   contentLocale,
   fieldAdmin,
@@ -100,11 +115,12 @@ export const GroupField = ({
               field={innerField}
               defaultValue={groupData[innerField.name]}
               basePath={path}
-              disableSorting={true}
+              disableSorting={disableSorting}
               collectionPath={collectionPath}
               contentLocale={contentLocale}
               components={fieldAdmin?.[innerField.name]?.components}
               editor={fieldAdmin?.[innerField.name]?.editor}
+              fieldAdmin={sliceFieldAdmin(fieldAdmin, innerField.name)}
             />
           )
         })}

package/src/fields/sortable-item.tsx

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { type ReactNode, useState } from 'react'
+import { type CSSProperties, type ReactNode, type Ref, useState } from 'react'
 
 import { useTranslation } from '@byline/i18n/react'
 import { ChevronDownIcon, GripperVerticalIcon, useSortable } from '@byline/ui/react'
@@ -15,44 +15,60 @@ import cx from 'classnames'
 import { DraggableContextMenu } from './draggable-context-menu'
 import styles from './sortable-item.module.css'
 
-export const SortableItem = ({
-  id,
-  label,
-  children,
-  onAddBelow,
-  onRemove,
-}: {
-  id: string
+// ---------------------------------------------------------------------------
+// Item chrome for repeating-structure entries (array items, block instances):
+// a header carrying the label, the add-below/remove context menu, and a
+// collapse toggle, above the item's rendered fields.
+//
+// Two variants share the frame:
+//   - `SortableItem` — adds the dnd-kit grip (drag handle). Must render
+//     inside a `DraggableSortable` (it calls `useSortable`).
+//   - `StaticItem`  — no grip, no dnd hook. For contexts where drag is
+//     disabled but structural editing (add/remove/collapse) must remain,
+//     e.g. arrays nested inside another array's items.
+//
+// They are separate components (not a boolean prop on one component)
+// because `useSortable` is a hook — it cannot be called conditionally, and
+// it throws outside a DndContext.
+// ---------------------------------------------------------------------------
+
+interface ItemFrameProps {
   label: ReactNode
   children: ReactNode
   onAddBelow?: () => void
   onRemove?: () => void
-}) => {
-  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)',
-    },
-  })
+  /** Drag handle slot — rendered leading the header when provided. */
+  grip?: ReactNode
+  rootRef?: Ref<HTMLDivElement>
+  style?: CSSProperties
+  dragging?: boolean
+  /** Extra root class, e.g. the static variant marker. */
+  rootClassName?: string
+}
 
+const ItemFrame = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+  grip,
+  rootRef,
+  style,
+  dragging = false,
+  rootClassName,
+}: ItemFrameProps) => {
+  const { t } = useTranslation('byline-admin')
   const [collapsed, setCollapsed] = useState(false)
 
-  const style = {
-    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
-    transition,
-    zIndex: isDragging ? 10 : 'auto',
-  }
-
   return (
     <div
-      ref={setNodeRef}
+      ref={rootRef}
       style={style}
       className={cx(
         'byline-sortable',
         styles.root,
-        isDragging && ['byline-sortable-dragging', styles.dragging],
+        rootClassName,
+        dragging && ['byline-sortable-dragging', styles.dragging],
         collapsed && ['byline-sortable-collapsed', styles.collapsed]
       )}
     >
@@ -63,14 +79,7 @@ export const SortableItem = ({
           !collapsed && ['byline-sortable-header-expanded', styles['header-expanded']]
         )}
       >
-        <button
-          type="button"
-          className={cx('byline-sortable-grip', styles.grip)}
-          {...attributes}
-          {...listeners}
-        >
-          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
-        </button>
+        {grip}
         <div className={cx('byline-sortable-label', styles.label)}>{label}</div>
         <DraggableContextMenu onAddBelow={onAddBelow} onRemove={onRemove} />
         <button
@@ -104,3 +113,75 @@ export const SortableItem = ({
     </div>
   )
 }
+
+export const SortableItem = ({
+  id,
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  id: string
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    transition,
+    zIndex: isDragging ? 10 : 'auto',
+  }
+
+  return (
+    <ItemFrame
+      label={label}
+      onAddBelow={onAddBelow}
+      onRemove={onRemove}
+      rootRef={setNodeRef}
+      style={style}
+      dragging={isDragging}
+      grip={
+        <button
+          type="button"
+          className={cx('byline-sortable-grip', styles.grip)}
+          {...attributes}
+          {...listeners}
+        >
+          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
+        </button>
+      }
+    >
+      {children}
+    </ItemFrame>
+  )
+}
+
+export const StaticItem = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => (
+  <ItemFrame
+    label={label}
+    onAddBelow={onAddBelow}
+    onRemove={onRemove}
+    rootClassName="byline-sortable-static"
+  >
+    {children}
+  </ItemFrame>
+)

package/src/forms/form-context.tsx

@@ -316,7 +316,15 @@ export const FormProvider = ({
   const getPatches = useCallback(() => patchesRef.current, [])
   const appendPatch = useCallback(
     (patch: DocumentPatch) => {
-      patchesRef.current = [...patchesRef.current, patch]
+      // Snapshot the patch at append time. Structural patches (array.insert,
+      // block add) carry item objects that are ALSO placed into the form
+      // store — and `setNestedValue` mutates store nodes in place, so a
+      // later nested write inside the item (e.g. adding an array item to a
+      // block added this session) would silently rewrite the queued patch.
+      // Serialized at save time, the block insert would then already contain
+      // the array items AND the array.insert patches would re-add them —
+      // duplicating items server-side (caught by e2e/array-in-block.spec.ts).
+      patchesRef.current = [...patchesRef.current, structuredClone(patch)]
       // Mark a generic dirty flag so hasChanges() becomes true even
       // for patches that don't correspond to a specific field.set.
       dirtyFields.current.add('__patch__')

package/src/forms/form-renderer.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, ComboButton } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../fields/field-admin'
 import { FieldRenderer } from '../fields/field-renderer'
 import { useBylineFieldServices } from '../fields/field-services-context'
 import { AdminGroup } from '../presentation/group'
@@ -488,6 +489,7 @@ const FormContent = ({
         contentLocale={contentLocale}
         components={adminConfig?.fields?.[field.name]?.components}
         editor={adminConfig?.fields?.[field.name]?.editor}
+        fieldAdmin={sliceFieldAdmin(adminConfig?.fields, field.name)}
       />
     )
   }