@byline/admin 6.3.0 → 6.5.0

package/dist/forms/use-document-reload-recovery.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+function useDocumentReloadRecovery({ mutationsBlocked, mutationIssue, onReloadDocument, isBusy }) {
+    const formRef = useRef(null);
+    const focusBeforeBusyRef = useRef(null);
+    const restoreFocusAfterBusyRef = useRef(false);
+    const [discarding, setDiscarding] = useState(false);
+    const [reloadFailed, setReloadFailed] = useState(false);
+    const warningRef = useRef(null);
+    const mutationBlockedRef = useRef(mutationsBlocked);
+    mutationBlockedRef.current = mutationsBlocked || discarding;
+    useEffect(()=>{
+        if (mutationIssue) warningRef.current?.focus();
+    }, [
+        mutationIssue
+    ]);
+    useEffect(()=>{
+        if (!discarding) return;
+        Promise.resolve().then(()=>onReloadDocument ? onReloadDocument() : window.location.reload()).catch(()=>{
+            setDiscarding(false);
+            setReloadFailed(true);
+        });
+    }, [
+        discarding,
+        onReloadDocument
+    ]);
+    const captureFocusBeforeBusy = useCallback(()=>{
+        if (null != focusBeforeBusyRef.current) return;
+        const activeElement = document.activeElement;
+        if (!(activeElement instanceof HTMLElement) || !formRef.current?.contains(activeElement)) return;
+        focusBeforeBusyRef.current = activeElement;
+        restoreFocusAfterBusyRef.current = true;
+    }, []);
+    useEffect(()=>{
+        if (isBusy || !restoreFocusAfterBusyRef.current) return;
+        restoreFocusAfterBusyRef.current = false;
+        if (mutationIssue) {
+            warningRef.current?.focus();
+            focusBeforeBusyRef.current = null;
+            return;
+        }
+        const original = focusBeforeBusyRef.current;
+        focusBeforeBusyRef.current = null;
+        const originalCanReceiveFocus = original?.isConnected === true && !original.matches(':disabled, [aria-disabled="true"]');
+        const target = originalCanReceiveFocus ? original : formRef.current?.querySelector('input:not(:disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        target?.focus({
+            preventScroll: true
+        });
+    }, [
+        isBusy,
+        mutationIssue
+    ]);
+    const requestDiscard = useCallback(()=>{
+        mutationBlockedRef.current = true;
+        setReloadFailed(false);
+        setDiscarding(true);
+    }, []);
+    return {
+        formRef,
+        warningRef,
+        mutationBlockedRef,
+        discarding,
+        reloadFailed,
+        requestDiscard,
+        captureFocusBeforeBusy
+    };
+}
+export { useDocumentReloadRecovery };

package/dist/forms/use-form-submission.d.ts

@@ -1,4 +1,4 @@
-import type { Field } from '@byline/core';
+import { type Field } from '@byline/core';
 import type { DocumentPatch } from '@byline/core/patches';
 /**
  * Payload emitted by the form on Save. Carries the content (field data +

package/dist/forms/use-form-submission.js

@@ -1,5 +1,6 @@
 "use client";
 import { useCallback, useRef, useState } from "react";
+import { getDocumentFieldValidationDetails } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { useFormContext } from "./form-context.js";
@@ -9,11 +10,12 @@ const IDLE = {
 };
 function useFormSubmission(options) {
     const { mode, fields, documentId, advertiseLocales, onSubmit, isBlocked, onBeforeBusy } = options;
-    const { getFieldValues, runFieldHooks, validateForm, resetHasChanges, getPatches, getDirtyBreakdown, getSystemPath, getSystemAvailableLocales, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads, setFieldUploading } = useFormContext();
+    const { getFieldValues, runFieldHooks, validateForm, resetHasChanges, getPatches, getDirtyBreakdown, getSystemPath, getSystemAvailableLocales, setFieldValue, setFieldError, getPendingUploads, removePendingUpload, clearFieldError, waitForFieldChanges, setFieldUploading } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const { uploadField } = useBylineFieldServices();
     const [phase, setPhase] = useState(IDLE);
     const inFlightRef = useRef(false);
+    const confirmationRef = useRef(null);
     const isBusy = 'uploading' === phase.kind || 'submitting' === phase.kind;
     const deliver = useCallback(async (payload)=>{
         if (isBlocked() || 'function' != typeof onSubmit) return void setPhase(IDLE);
@@ -24,14 +26,18 @@ function useFormSubmission(options) {
         try {
             await onSubmit(payload);
             resetHasChanges();
-        } catch  {} finally{
+        } catch (error) {
+            const validation = getDocumentFieldValidationDetails(error);
+            for (const issue of validation?.issues ?? [])setFieldError(issue.field, issue.message);
+        } finally{
             setPhase(IDLE);
         }
     }, [
         isBlocked,
         onBeforeBusy,
         onSubmit,
-        resetHasChanges
+        resetHasChanges,
+        setFieldError
     ]);
     const runUploads = useCallback(async ()=>{
         const pendingUploads = getPendingUploads();
@@ -48,22 +54,26 @@ function useFormSubmission(options) {
                 fields,
                 getFormValues: getFieldValues
             });
+            for (const [fieldPath, storedFile] of uploadResult.successful)if (getPendingUploads().get(fieldPath) === pendingUploads.get(fieldPath)) {
+                setFieldValue(fieldPath, storedFile);
+                clearFieldError(fieldPath);
+                removePendingUpload(fieldPath);
+            }
             if (!uploadResult.allSucceeded) {
-                for (const [fieldPath, errorMessage] of uploadResult.errors.entries())setFieldError(fieldPath, t('forms.uploadFailedFieldError', {
+                for (const [fieldPath, errorMessage] of uploadResult.errors)if (getPendingUploads().get(fieldPath) === pendingUploads.get(fieldPath)) setFieldError(fieldPath, t('forms.uploadFailedFieldError', {
                     message: errorMessage
                 }));
-                console.error('One or more uploads failed:', uploadResult.errors);
                 return false;
             }
-            for (const [fieldPath, storedFile] of uploadResult.successful.entries())setFieldValue(fieldPath, storedFile);
-            clearPendingUploads();
+            if (getPendingUploads().size > 0) return false;
             return true;
         } catch (err) {
             console.error('Upload execution error:', err);
             return false;
         }
     }, [
-        clearPendingUploads,
+        removePendingUpload,
+        clearFieldError,
         documentId,
         fields,
         getFieldValues,
@@ -81,8 +91,8 @@ function useFormSubmission(options) {
         return {
             reason,
             payload: {
-                data: getFieldValues(),
-                patches: getPatches(),
+                data: structuredClone(getFieldValues()),
+                patches: structuredClone(getPatches()),
                 contentDirty,
                 pathDirty,
                 systemPath: getSystemPath(),
@@ -100,49 +110,56 @@ function useFormSubmission(options) {
     ]);
     const submit = useCallback(async ()=>{
         if (isBlocked()) return;
-        if (inFlightRef.current) return;
+        if (inFlightRef.current || confirmationRef.current) return;
         inFlightRef.current = true;
         try {
             setPhase({
                 kind: 'validating'
             });
-            const hookErrors = await runFieldHooks(fields);
-            const formErrors = validateForm(fields);
-            const allErrors = [
-                ...hookErrors,
-                ...formErrors
-            ];
-            if (allErrors.length > 0) {
-                console.error('Form validation failed:', allErrors);
-                setPhase(IDLE);
-                return;
+            await waitForFieldChanges();
+            if (isBlocked()) return void setPhase(IDLE);
+            if ('edit' !== mode || 'direct-write' !== getDirtyBreakdown().reason) {
+                const hookErrors = await runFieldHooks(fields);
+                const formErrors = validateForm(fields, hookErrors);
+                if (formErrors.length > 0) {
+                    console.error('Form validation failed:', formErrors);
+                    setPhase(IDLE);
+                    return;
+                }
             }
             if (isBlocked()) return void setPhase(IDLE);
             if (!await runUploads()) return void setPhase(IDLE);
             const { payload, reason } = buildPayload();
-            if ('edit' === mode && ('direct-write' === reason || 'both' === reason)) return void setPhase({
-                kind: 'confirmingSystemFields',
-                payload
-            });
+            if ('edit' === mode && ('direct-write' === reason || 'both' === reason)) {
+                confirmationRef.current = payload;
+                setPhase({
+                    kind: 'confirmingSystemFields',
+                    payload
+                });
+                return;
+            }
             await deliver(payload);
         } finally{
             inFlightRef.current = false;
         }
     }, [
         buildPayload,
+        getDirtyBreakdown,
         deliver,
         fields,
         isBlocked,
         mode,
         runUploads,
         runFieldHooks,
-        validateForm
+        validateForm,
+        waitForFieldChanges
     ]);
     const confirmSystemFields = useCallback(async ()=>{
-        if ('confirmingSystemFields' !== phase.kind) return;
+        if ('confirmingSystemFields' !== phase.kind || confirmationRef.current !== phase.payload) return;
         if (inFlightRef.current) return;
         inFlightRef.current = true;
         const { payload } = phase;
+        confirmationRef.current = null;
         try {
             await deliver(payload);
         } finally{
@@ -153,6 +170,7 @@ function useFormSubmission(options) {
         phase
     ]);
     const cancelSystemFields = useCallback(()=>{
+        confirmationRef.current = null;
         setPhase((current)=>'confirmingSystemFields' === current.kind ? IDLE : current);
     }, []);
     return {

package/dist/forms/use-form-tabs.d.ts

@@ -1,4 +1,4 @@
-import type { TabDefinition, TabSetDefinition } from '@byline/core';
+import { type TabDefinition, type TabSetDefinition } from '@byline/core';
 /** One tab set, resolved against live form data and current errors. */
 export interface ResolvedTabSet {
     /** Tabs whose `condition` is satisfied, in declaration order. */
@@ -26,4 +26,4 @@ export interface UseFormTabsResult {
 export declare function useFormTabs(fieldToTabPath: Map<string, {
     tabSetName: string;
     tabName: string;
-}>, activeTabBySet: Record<string, string>): UseFormTabsResult;
+}>, activeTabBySet: Record<string, string>, tabSets: TabSetDefinition[]): UseFormTabsResult;

package/dist/forms/use-form-tabs.js

@@ -1,21 +1,28 @@
 "use client";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { parseInstancePath } from "@byline/core";
 import { useFormContext } from "./form-context.js";
-function useFormTabs(fieldToTabPath, activeTabBySet) {
-    const { errors: initialErrors, subscribeErrors, subscribeMeta, getFieldValues } = useFormContext();
-    const [errors, setErrors] = useState(initialErrors);
-    useEffect(()=>subscribeErrors((newErrors)=>setErrors(newErrors)), [
-        subscribeErrors
+function useFormTabs(fieldToTabPath, activeTabBySet, tabSets) {
+    const { getErrors, subscribeErrors, subscribeMeta, getFieldValues } = useFormContext();
+    const errors = useSyncExternalStore(subscribeErrors, getErrors, getErrors);
+    const conditionalTabs = useMemo(()=>tabSets.flatMap((set)=>set.tabs.filter((tab)=>tab.condition)), [
+        tabSets
     ]);
-    const [formData, setFormData] = useState(()=>getFieldValues());
-    useEffect(()=>subscribeMeta(()=>setFormData(getFieldValues())), [
-        subscribeMeta,
+    const snapshot = useCallback(()=>JSON.stringify(conditionalTabs.map((tab)=>Boolean(tab.condition?.(getFieldValues())))), [
+        conditionalTabs,
         getFieldValues
     ]);
+    const subscribe = useCallback((notify)=>conditionalTabs.length ? subscribeMeta(notify) : ()=>{}, [
+        conditionalTabs,
+        subscribeMeta
+    ]);
+    useSyncExternalStore(subscribe, snapshot, snapshot);
     const errorCountsBySet = useMemo(()=>{
         const result = {};
         for (const err of errors){
-            const path = fieldToTabPath.get(err.field);
+            const parsed = parseInstancePath(err.field);
+            const root = parsed.ok ? parsed.segments[0] : void 0;
+            const path = fieldToTabPath.get(err.field) ?? (root?.kind === 'field' ? fieldToTabPath.get(root.name) : void 0);
             if (path) {
                 result[path.tabSetName] ??= {};
                 result[path.tabSetName][path.tabName] = (result[path.tabSetName]?.[path.tabName] ?? 0) + 1;
@@ -27,7 +34,7 @@ function useFormTabs(fieldToTabPath, activeTabBySet) {
         fieldToTabPath
     ]);
     const resolve = (set)=>{
-        const visibleTabs = set.tabs.filter((tab)=>!tab.condition || tab.condition(formData));
+        const visibleTabs = set.tabs.filter((tab)=>!tab.condition || tab.condition(getFieldValues()));
         const requested = activeTabBySet[set.name] ?? '';
         const activeTabName = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
         return {

package/dist/modules/admin-account/components/change-password.js

@@ -138,6 +138,8 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                             error: field.state.meta.errors.length > 0,
                             errorText: firstError(field.state.meta.errors),
                             autoComplete: "current-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),
@@ -153,6 +155,8 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                             error: field.state.meta.errors.length > 0,
                             errorText: translateValidationError(t, firstError(field.state.meta.errors)),
                             autoComplete: "new-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),
@@ -168,6 +172,8 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                             error: field.state.meta.errors.length > 0,
                             errorText: firstError(field.state.meta.errors),
                             autoComplete: "new-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),

package/dist/modules/admin-users/components/create.js

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { passwordSchema } from "@byline/core/validation";
 import { useTranslation } from "@byline/i18n/react";
-import { Alert, Button, Checkbox, Input, LoaderEllipsis } from "@byline/ui/react";
+import { Alert, Button, Checkbox, Input, InputPassword, LoaderEllipsis } from "@byline/ui/react";
 import clsx from "clsx";
 import { z } from "zod";
 import { translateValidationError } from "../../../lib/translate-validation-error.js";
@@ -180,11 +180,10 @@ function CreateAdminUser({ onClose, onSuccess }) {
                 }),
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "password",
-                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                    children: (field)=>/*#__PURE__*/ jsx(InputPassword, {
                             label: t('adminUsers.create.fields.password'),
                             id: "new-password",
                             name: field.name,
-                            type: "password",
                             value: field.state.value,
                             onBlur: field.handleBlur,
                             onChange: (e)=>field.handleChange(e.currentTarget.value),
@@ -192,6 +191,8 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             errorText: translateValidationError(t, firstError(field.state.meta.errors)),
                             helpText: t('adminUsers.create.fields.passwordHelp'),
                             autoComplete: "new-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),

package/dist/modules/admin-users/components/set-password.js

@@ -103,6 +103,8 @@ function SetPassword({ user, onClose, onSuccess }) {
                             error: field.state.meta.errors.length > 0,
                             errorText: translateValidationError(t, firstError(field.state.meta.errors)),
                             autoComplete: "new-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),
@@ -118,6 +120,8 @@ function SetPassword({ user, onClose, onSuccess }) {
                             error: field.state.meta.errors.length > 0,
                             errorText: firstError(field.state.meta.errors),
                             autoComplete: "new-password",
+                            showPasswordLabel: t('common.actions.showPassword'),
+                            hidePasswordLabel: t('common.actions.hidePassword'),
                             required: true
                         })
                 }),

package/dist/modules/auth/components/sign-in-form.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import { Alert, Button, Card, Input, LoaderEllipsis } from "@byline/ui/react";
+import { Alert, Button, Card, Input, InputPassword, LoaderEllipsis } from "@byline/ui/react";
 import clsx from "clsx";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import { normalizeRootRelativeRedirect, resolveSignInFormRedirect } from "../safe-redirect.js";
@@ -78,12 +78,13 @@ function SignInForm({ redirectTo, homeUrl }) {
                                     onChange: (event)=>setEmail(event.currentTarget.value),
                                     disabled: pending
                                 }),
-                                /*#__PURE__*/ jsx(Input, {
+                                /*#__PURE__*/ jsx(InputPassword, {
                                     label: t('common.fields.password'),
                                     id: "password",
                                     name: "password",
-                                    type: "password",
                                     autoComplete: "current-password",
+                                    showPasswordLabel: t('common.actions.showPassword'),
+                                    hidePasswordLabel: t('common.actions.hidePassword'),
                                     required: true,
                                     value: password,
                                     onChange: (event)=>setPassword(event.currentTarget.value),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -164,7 +164,7 @@
     "src/"
   ],
   "dependencies": {
-    "@codemirror/commands": "^6.11.0",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.12",
     "@codemirror/lang-javascript": "^6.2.5",
@@ -174,40 +174,40 @@
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.12.4",
-    "@codemirror/state": "^6.7.4",
-    "@codemirror/view": "^6.43.11",
+    "@codemirror/state": "^6.7.5",
+    "@codemirror/view": "^6.43.12",
     "@lezer/highlight": "^1.2.3",
     "@tanstack/react-form-start": "^1.33.5",
     "clsx": "^2.1.1",
     "jose": "^6.2.12",
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
-    "zod": "^4.6.2",
-    "@byline/analytics": "6.3.0",
-    "@byline/core": "6.3.0",
-    "@byline/i18n": "6.3.0",
-    "@byline/auth": "6.3.0",
-    "@byline/ui": "6.3.0",
-    "@byline/analytics-agent": "6.3.0"
+    "zod": "^4.6.5",
+    "@byline/analytics": "6.5.0",
+    "@byline/auth": "6.5.0",
+    "@byline/analytics-agent": "6.5.0",
+    "@byline/ui": "6.5.0",
+    "@byline/i18n": "6.5.0",
+    "@byline/core": "6.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.13",
+    "@biomejs/biome": "2.5.14",
     "@rsbuild/plugin-react": "^2.1.0",
-    "@rslib/core": "^1.0.0",
-    "@types/node": "^26.5.1",
+    "@rslib/core": "^1.0.1",
+    "@types/node": "^26.6.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.1"
   },
   "publishConfig": {
     "access": "public",

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

@@ -10,14 +10,15 @@ import { useEffect, useState } from 'react'
 
 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 { DraggableSortable, ErrorText, IconButton, moveItem, PlusIcon } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { sliceFieldAdmin } from '../../fields/field-admin'
 import { defaultScalarForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { SortableItem, StaticItem } from '../../fields/sortable-item'
-import { useFormContext } from '../../forms/form-context'
+import { useFieldError, useFormContext } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { hasExistingIdTargets } from '../../forms/nested-path'
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from '../../forms/repeating-items'
 import styles from './array-field.module.css'
@@ -60,6 +61,8 @@ export const ArrayField = ({
   const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } =
     useFormContext()
   const { t } = useTranslation('byline-admin')
+  const fieldError = useFieldError(path)
+  const htmlId = useScopedDomId(path)
   const [items, setItems] = useState<{ id: string; data: any }[]>([])
 
   useEffect(() => {
@@ -95,6 +98,7 @@ export const ArrayField = ({
     moveFromIndex: number
     moveToIndex: number
   }) => {
+    if (field.readOnly) return
     const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
     if (!Array.isArray(currentArray)) return
 
@@ -112,6 +116,7 @@ export const ArrayField = ({
   }
 
   const handleAddItem = async (atIndex?: number) => {
+    if (field.readOnly) return
     const childFields = field.fields ?? []
     if (childFields.length === 0) return
 
@@ -164,6 +169,7 @@ export const ArrayField = ({
   }
 
   const handleRemoveItem = (index: number) => {
+    if (field.readOnly) return
     const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
     if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return
 
@@ -185,6 +191,7 @@ export const ArrayField = ({
   }
 
   const handleInsertBelow = (index: number) => {
+    if (field.readOnly) return
     void handleAddItem(index + 1)
   }
 
@@ -220,7 +227,11 @@ export const ArrayField = ({
             {(childField.fields as Field[]).map((innerField) => (
               <FieldRenderer
                 key={innerField.name}
-                field={innerField}
+                field={
+                  field.readOnly || childField.readOnly
+                    ? { ...innerField, readOnly: true }
+                    : innerField
+                }
                 defaultValue={groupData[innerField.name]}
                 basePath={`${arrayElementPath}.${childField.name}`}
                 disableSorting={true}
@@ -237,7 +248,7 @@ export const ArrayField = ({
       return (
         <FieldRenderer
           key={childField.name}
-          field={childField}
+          field={field.readOnly ? { ...childField, readOnly: true } : childField}
           defaultValue={initial}
           basePath={arrayElementPath}
           disableSorting={true}
@@ -258,13 +269,13 @@ export const ArrayField = ({
     // (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) {
+    if (disableSorting || field.readOnly) {
       return (
         <StaticItem
           key={itemWrapper.id}
           label={itemLabel}
-          onAddBelow={() => handleInsertBelow(index)}
-          onRemove={() => handleRemoveItem(index)}
+          onAddBelow={field.readOnly ? undefined : () => handleInsertBelow(index)}
+          onRemove={field.readOnly ? undefined : () => handleRemoveItem(index)}
         >
           <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
             {innerBody}
@@ -278,8 +289,8 @@ export const ArrayField = ({
         key={itemWrapper.id}
         id={itemWrapper.id}
         label={itemLabel}
-        onAddBelow={() => handleInsertBelow(index)}
-        onRemove={() => handleRemoveItem(index)}
+        onAddBelow={field.readOnly ? undefined : () => handleInsertBelow(index)}
+        onRemove={field.readOnly ? undefined : () => handleRemoveItem(index)}
       >
         <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
           {innerBody}
@@ -321,10 +332,10 @@ export const ArrayField = ({
       {field.label && (
         <h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>
       )}
-      {disableSorting ? (
+      {disableSorting || field.readOnly ? (
         <div className={cx('byline-field-array-stack', styles.stack)}>
           {items.map((item, index) => renderItem(item, index))}
-          {addRow}
+          {!field.readOnly && addRow}
         </div>
       ) : (
         <DraggableSortable
@@ -333,9 +344,10 @@ export const ArrayField = ({
           className={cx('byline-field-array-stack', styles.stack)}
         >
           {items.map((item, index) => renderItem(item, index))}
-          {addRow}
+          {!field.readOnly && addRow}
         </DraggableSortable>
       )}
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
     </div>
   )
 }