@byline/admin 6.3.0 → 6.4.0

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

@@ -1,19 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
-import { DraggableSortable, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
+import { DraggableSortable, ErrorText, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
 import clsx from "clsx";
 import { sliceFieldAdmin } from "../field-admin.js";
 import { defaultScalarForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
 import { SortableItem, StaticItem } from "../sortable-item.js";
-import { useFormContext } from "../../forms/form-context.js";
+import { useFieldError, useFormContext } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { hasExistingIdTargets } from "../../forms/nested-path.js";
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from "../../forms/repeating-items.js";
 import array_field_module from "./array-field.module.js";
 const ArrayField = ({ field, defaultValue, path, disableSorting = false, contentLocale, fieldAdmin })=>{
     const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } = useFormContext();
     const { t } = useTranslation('byline-admin');
+    const fieldError = useFieldError(path);
+    const htmlId = useScopedDomId(path);
     const [items, setItems] = useState([]);
     useEffect(()=>{
         const storeValue = getFieldValue(path);
@@ -28,6 +31,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         path
     ]);
     const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
+        if (field.readOnly) return;
         const currentArray = getFieldValue(path) ?? defaultValue;
         if (!Array.isArray(currentArray)) return;
         const move = moveRepeatingItems(currentArray, moveFromIndex, moveToIndex);
@@ -42,6 +46,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         });
     };
     const handleAddItem = async (atIndex)=>{
+        if (field.readOnly) return;
         const childFields = field.fields ?? [];
         if (0 === childFields.length) return;
         const newId = crypto.randomUUID();
@@ -80,6 +85,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         setFieldStore(path, newArrayValue);
     };
     const handleRemoveItem = (index)=>{
+        if (field.readOnly) return;
         const currentArray = getFieldValue(path) ?? defaultValue;
         if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
         const item = currentArray[index];
@@ -98,6 +104,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         setFieldStore(path, newArrayValue);
     };
     const handleInsertBelow = (index)=>{
+        if (field.readOnly) return;
         handleAddItem(index + 1);
     };
     const renderItem = (itemWrapper, index)=>{
@@ -119,7 +126,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                             children: childField.label
                         }),
                         childField.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
-                                field: innerField,
+                                field: field.readOnly || childField.readOnly ? {
+                                    ...innerField,
+                                    readOnly: true
+                                } : innerField,
                                 defaultValue: groupData[innerField.name],
                                 basePath: `${arrayElementPath}.${childField.name}`,
                                 disableSorting: true,
@@ -132,7 +142,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                 }, childField.name);
             }
             return /*#__PURE__*/ jsx(FieldRenderer, {
-                field: childField,
+                field: field.readOnly ? {
+                    ...childField,
+                    readOnly: true
+                } : childField,
                 defaultValue: initial,
                 basePath: arrayElementPath,
                 disableSorting: true,
@@ -143,10 +156,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
             }, childField.name);
         });
         const itemLabel = `${field.label ?? field.name} ${index + 1}`;
-        if (disableSorting) return /*#__PURE__*/ jsx(StaticItem, {
+        if (disableSorting || field.readOnly) return /*#__PURE__*/ jsx(StaticItem, {
             label: itemLabel,
-            onAddBelow: ()=>handleInsertBelow(index),
-            onRemove: ()=>handleRemoveItem(index),
+            onAddBelow: field.readOnly ? void 0 : ()=>handleInsertBelow(index),
+            onRemove: field.readOnly ? void 0 : ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
                 className: clsx('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
@@ -155,8 +168,8 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         return /*#__PURE__*/ jsx(SortableItem, {
             id: itemWrapper.id,
             label: itemLabel,
-            onAddBelow: ()=>handleInsertBelow(index),
-            onRemove: ()=>handleRemoveItem(index),
+            onAddBelow: field.readOnly ? void 0 : ()=>handleInsertBelow(index),
+            onRemove: field.readOnly ? void 0 : ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
                 className: clsx('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
@@ -191,11 +204,11 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                 className: clsx('byline-field-array-title', array_field_module.title),
                 children: field.label
             }),
-            disableSorting ? /*#__PURE__*/ jsxs("div", {
+            disableSorting || field.readOnly ? /*#__PURE__*/ jsxs("div", {
                 className: clsx('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    addRow
+                    !field.readOnly && addRow
                 ]
             }) : /*#__PURE__*/ jsxs(DraggableSortable, {
                 ids: items.map((i)=>i.id),
@@ -203,8 +216,12 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                 className: clsx('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    addRow
+                    !field.readOnly && addRow
                 ]
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${htmlId}-error`,
+                text: fieldError
             })
         ]
     });

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

@@ -2,18 +2,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import { Card, CloseIcon, DraggableSortable, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
+import { Card, CloseIcon, DraggableSortable, ErrorText, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
 import clsx from "clsx";
 import { defaultScalarForField } from "../field-helpers.js";
 import { GroupField } from "../group/group-field.js";
-import { SortableItem } from "../sortable-item.js";
-import { useFormContext } from "../../forms/form-context.js";
+import { SortableItem, StaticItem } from "../sortable-item.js";
+import { useFieldError, useFormContext } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { hasExistingIdTargets } from "../../forms/nested-path.js";
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from "../../forms/repeating-items.js";
 import blocks_field_module from "./blocks-field.module.js";
 const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
     const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } = useFormContext();
     const { t } = useTranslation('byline-admin');
+    const fieldError = useFieldError(path);
+    const htmlId = useScopedDomId(path);
     const [items, setItems] = useState([]);
     const [showAddBlockModal, setShowAddBlockModal] = useState(false);
     const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
@@ -45,6 +48,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
         path
     ]);
     const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
+        if (field.readOnly) return;
         const currentArray = getFieldValue(path) ?? defaultValue;
         if (!Array.isArray(currentArray)) return;
         const move = moveRepeatingItems(currentArray, moveFromIndex, moveToIndex);
@@ -59,6 +63,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
         });
     };
     const handleAddItem = async (forcedVariantName, atIndex)=>{
+        if (field.readOnly) return;
         setShowAddBlockModal(false);
         setPendingInsertIndex(null);
         const variant = (null != forcedVariantName ? availableBlocks.find((v)=>v.blockType === forcedVariantName) : void 0) ?? availableBlocks[0];
@@ -97,6 +102,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
         setFieldStore(path, newArrayValue);
     };
     const handleRemoveItem = (index)=>{
+        if (field.readOnly) return;
         const currentArray = getFieldValue(path) ?? defaultValue;
         if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
         const item = currentArray[index];
@@ -134,6 +140,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 type: 'group',
                 name: subField.blockType,
                 fields: subField.fields,
+                readOnly: field.readOnly,
                 label: void 0
             },
             defaultValue: fieldData,
@@ -142,11 +149,12 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
             contentLocale: contentLocale,
             fieldAdmin: blockAdminByType.get(item._type)?.fields
         }, subField.blockType);
-        return /*#__PURE__*/ jsx(SortableItem, {
+        const Item = field.readOnly ? StaticItem : SortableItem;
+        return /*#__PURE__*/ jsx(Item, {
             id: itemWrapper.id,
             label: label ?? subField.blockType,
-            onAddBelow: ()=>handleInsertBelow(index),
-            onRemove: ()=>handleRemoveItem(index),
+            onAddBelow: field.readOnly ? void 0 : ()=>handleInsertBelow(index),
+            onRemove: field.readOnly ? void 0 : ()=>handleRemoveItem(index),
             children: body
         }, itemWrapper.id);
     };
@@ -171,7 +179,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                                     setPendingInsertIndex(null);
                                     setShowAddBlockModal(true);
                                 },
-                                disabled: !selectedBlockName,
+                                disabled: field.readOnly || !selectedBlockName,
                                 "aria-label": t('fields.blocks.addBlockAriaLabel'),
                                 variant: "outlined",
                                 children: /*#__PURE__*/ jsx(PlusIcon, {})
@@ -179,7 +187,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                             /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 tabIndex: -1,
-                                disabled: !selectedBlockName,
+                                disabled: field.readOnly || !selectedBlockName,
                                 onClick: ()=>{
                                     setPendingInsertIndex(null);
                                     setShowAddBlockModal(true);
@@ -267,6 +275,10 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                         })
                     ]
                 })
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${htmlId}-error`,
+                text: fieldError
             })
         ]
     });

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

@@ -12,6 +12,7 @@ const CheckboxField = ({ field, value, defaultValue, onChange, id, path })=>{
     return /*#__PURE__*/ jsx("div", {
         className: `byline-field-checkbox ${field.name} ${checkbox_field_module["field-checkbox"]}`,
         children: /*#__PURE__*/ jsx(Checkbox, {
+            disabled: field.readOnly,
             id: htmlId,
             name: field.name,
             label: field.label,

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

@@ -15,6 +15,7 @@ const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
         className: `byline-field-datetime ${field.name}`,
         children: [
             /*#__PURE__*/ jsx(DatePicker, {
+                disabled: field.readOnly,
                 id: htmlId,
                 name: field.name,
                 label: field.label,

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

@@ -38,6 +38,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
     const showUploadWidget = null == incomingValue || isOldPlaceholder(incomingValue);
     const uploadGated = field.upload?.requireSavedDocument === true && null == documentId;
     const handleRemove = ()=>{
+        if (field.readOnly) return;
         if (isPending) removePendingUpload(fieldPath);
         handleChange(null);
     };
@@ -61,7 +62,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                 role: "note",
                 "data-testid": "upload-require-saved-document",
                 children: t('fields.upload.requireSavedDocument')
-            }) : collectionPath ? /*#__PURE__*/ jsx(FileUploadField, {
+            }) : collectionPath && !field.readOnly ? /*#__PURE__*/ jsx(FileUploadField, {
                 field: field,
                 collectionPath: collectionPath,
                 fieldPath: fieldPath,
@@ -100,7 +101,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                                 intent: "noeffect",
                                 onClick: handleRemove,
                                 size: "xs",
-                                disabled: isUploading,
+                                disabled: isUploading || field.readOnly,
                                 "aria-label": t('fields.file.removeAriaLabel'),
                                 children: /*#__PURE__*/ jsx(CloseIcon, {
                                     width: "15px",

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

@@ -10,7 +10,7 @@ import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import group_field_module from "./group-field.module.js";
 const GroupField = ({ field, defaultValue, path, disableSorting = true, contentLocale, fieldAdmin })=>{
     const htmlId = useScopedDomId(path ?? field.name);
-    const fieldError = useFieldError(field.name);
+    const fieldError = useFieldError(path ?? field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
         const placeholder = {};
@@ -46,7 +46,10 @@ const GroupField = ({ field, defaultValue, path, disableSorting = true, contentL
             /*#__PURE__*/ jsx("div", {
                 className: clsx('byline-field-group-body', group_field_module.body),
                 children: field.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
-                        field: innerField,
+                        field: field.readOnly ? {
+                            ...innerField,
+                            readOnly: true
+                        } : innerField,
                         defaultValue: groupData[innerField.name],
                         basePath: path,
                         disableSorting: disableSorting,

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

@@ -30,6 +30,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
     const thumbVariant = incomingValue && !isPendingStoredFileValue(incomingValue) ? incomingValue.variants?.find((v)=>'thumbnail' === v.name) : void 0;
     const previewUrl = thumbVariant?.storageUrl ?? incomingValue?.storageUrl;
     const handleRemove = ()=>{
+        if (field.readOnly) return;
         if (isPending) removePendingUpload(fieldPath);
         handleChange(null);
     };
@@ -53,7 +54,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                 role: "note",
                 "data-testid": "upload-require-saved-document",
                 children: t('fields.upload.requireSavedDocument')
-            }) : collectionPath ? /*#__PURE__*/ jsx(ImageUploadField, {
+            }) : collectionPath && !field.readOnly ? /*#__PURE__*/ jsx(ImageUploadField, {
                 field: field,
                 collectionPath: collectionPath,
                 fieldPath: fieldPath,
@@ -79,7 +80,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             intent: "noeffect",
                             onClick: handleRemove,
                             size: "xs",
-                            disabled: isUploading,
+                            disabled: isUploading || field.readOnly,
                             "aria-label": t('fields.image.removeAriaLabel'),
                             children: /*#__PURE__*/ jsx(CloseIcon, {
                                 width: "15px",

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

@@ -22,6 +22,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
     const [pickerOpen, setPickerOpen] = useState(false);
     const [pickedRecord, setPickedRecord] = useState(null);
     const handleSelect = (selection)=>{
+        if (field.readOnly) return;
         setPickerOpen(false);
         selection.record ? setPickedRecord({
             id: selection.targetDocumentId,
@@ -33,6 +34,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
         });
     };
     const handleRemove = ()=>{
+        if (field.readOnly) return;
         setPickedRecord(null);
         onChange?.(null);
     };
@@ -80,6 +82,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                             className: clsx('byline-field-relation-actions', relation_field_module.actions),
                             children: [
                                 /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: field.readOnly,
                                     id: htmlId,
                                     type: "button",
                                     intent: "noeffect",
@@ -94,6 +97,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: field.readOnly,
                                     type: "button",
                                     intent: "noeffect",
                                     size: "xs",
@@ -110,6 +114,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                         })
                     ]
                 }) : /*#__PURE__*/ jsx(Button, {
+                    disabled: field.readOnly,
                     id: htmlId,
                     size: "xs",
                     variant: "outlined",

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

@@ -9,9 +9,10 @@ import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import relation_field_module from "./relation-field.module.js";
 import { RelationPicker } from "./relation-picker.js";
 import { RelationSummary } from "./relation-summary.js";
-const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
+const RelationManyTile = ({ id, children, onRemove, removeAriaLabel, readOnly })=>{
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id,
+        disabled: readOnly,
         transition: {
             duration: 250,
             easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
@@ -31,6 +32,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
         ]),
         children: [
             /*#__PURE__*/ jsx("button", {
+                disabled: readOnly,
                 type: "button",
                 className: clsx('byline-field-relation-many-grip', relation_field_module["many-grip"]),
                 ...attributes,
@@ -42,6 +44,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
                 children: children
             }),
             /*#__PURE__*/ jsx(IconButton, {
+                disabled: readOnly,
                 type: "button",
                 size: "xs",
                 intent: "noeffect",
@@ -77,6 +80,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
         return Array.isArray(defaultValue) ? defaultValue : [];
     };
     const handleAddMany = (selections)=>{
+        if (field.readOnly) return;
         setPickerOpen(false);
         const current = currentArray();
         const existing = new Set(current.map((v)=>v.targetDocumentId));
@@ -99,10 +103,11 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
         ]);
     };
     const handleRemove = (targetDocumentId)=>{
+        if (field.readOnly) return;
         setFieldValue(fieldPath, currentArray().filter((v)=>v.targetDocumentId !== targetDocumentId));
     };
     const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
-        if (moveFromIndex === moveToIndex) return;
+        if (field.readOnly || moveFromIndex === moveToIndex) return;
         setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex));
     };
     return /*#__PURE__*/ jsxs("div", {
@@ -146,6 +151,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                                 onDragEnd: handleDragEnd,
                                 className: clsx('byline-field-relation-many', relation_field_module.many),
                                 children: items.map((value)=>/*#__PURE__*/ jsx(RelationManyTile, {
+                                        readOnly: field.readOnly,
                                         id: value.targetDocumentId,
                                         onRemove: ()=>handleRemove(value.targetDocumentId),
                                         removeAriaLabel: t('fields.relation.removeAriaLabel', {
@@ -163,6 +169,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                             /*#__PURE__*/ jsx("div", {
                                 className: clsx('byline-field-relation-many-add', relation_field_module["many-add"]),
                                 children: /*#__PURE__*/ jsxs(Button, {
+                                    disabled: field.readOnly,
                                     id: htmlId,
                                     size: "xs",
                                     variant: "outlined",

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

@@ -22,6 +22,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
                 className: clsx('byline-field-select-label', select_field_module.label)
             }),
             /*#__PURE__*/ jsx(Select, {
+                disabled: field.readOnly,
                 size: "xs",
                 variant: "outlined",
                 id: htmlId,

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

@@ -13,9 +13,10 @@ const TextField = ({ field, value, defaultValue, onChange, id, path, locale, com
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
     const htmlId = useScopedDomId(fieldPath, id);
     const handleChange = useCallback((value)=>{
-        if (onChange) onChange(value);
+        if (onChange && !field.readOnly) onChange(value);
     }, [
-        onChange
+        onChange,
+        field.readOnly
     ]);
     const slots = components;
     const CustomLabel = slots?.Label;
@@ -73,6 +74,7 @@ const TextField = ({ field, value, defaultValue, onChange, id, path, locale, com
             placeholder: field.placeholder
         });
         return /*#__PURE__*/ jsx(Input, {
+            readOnly: field.readOnly,
             id: htmlId,
             name: field.name,
             label: suppressInputLabel ? void 0 : field.label,

package/dist/fields/text-area/text-area-field.js

@@ -13,9 +13,10 @@ const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale,
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
     const htmlId = useScopedDomId(fieldPath, id);
     const handleChange = useCallback((value)=>{
-        if (onChange) onChange(value);
+        if (onChange && !field.readOnly) onChange(value);
     }, [
-        onChange
+        onChange,
+        field.readOnly
     ]);
     const slots = components;
     const CustomLabel = slots?.Label;
@@ -73,6 +74,7 @@ const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale,
             placeholder: field.placeholder
         });
         return /*#__PURE__*/ jsx(TextArea, {
+            readOnly: field.readOnly,
             id: htmlId,
             name: field.name,
             label: suppressInputLabel ? void 0 : field.label,

package/dist/fields/use-field-change-handler.js

@@ -1,9 +1,19 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { normalizeHooks } from "@byline/core";
 import { useFormContext } from "../forms/form-context.js";
 function useFieldChangeHandler(field, path) {
-    const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError } = useFormContext();
+    const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError, trackFieldChange } = useFormContext();
+    const generation = useRef(0);
+    const releasePending = useRef(void 0);
+    useEffect(()=>()=>{
+            generation.current++;
+            releasePending.current?.();
+        }, []);
     return useCallback((value)=>{
+        releasePending.current?.();
+        const invocation = ++generation.current;
+        if (field.readOnly) return;
+        const current = ()=>invocation === generation.current;
         const hooks = field.hooks;
         const validateFns = normalizeHooks(hooks?.beforeValidate);
         const changeFns = normalizeHooks(hooks?.beforeChange);
@@ -16,30 +26,37 @@ function useFieldChangeHandler(field, path) {
             path,
             field,
             operation: 'change',
-            setFieldValue
+            setFieldValue: (target, next)=>{
+                if (current()) setFieldValue(target, next);
+            }
         };
         clearFieldError(path);
         if (0 === changeFns.length) setFieldValue(path, value);
-        (async ()=>{
+        const pending = (async ()=>{
             try {
                 let advisoryError;
                 for (const fn of validateFns){
                     const result = await fn(ctx);
+                    if (!current()) return;
                     if (result?.error) advisoryError = result.error;
                     if (result?.value !== void 0) ctx.value = result.value;
                 }
                 for (const fn of changeFns){
                     const result = await fn(ctx);
+                    if (!current()) return;
                     if (result?.error) return void setFieldError(path, result.error);
                     if (result?.value !== void 0) ctx.value = result.value;
                 }
-                setFieldValue(path, ctx.value);
+                if (!current()) return;
+                if (changeFns.length > 0 || !Object.is(ctx.value, value)) setFieldValue(path, ctx.value);
                 if (advisoryError) setFieldError(path, advisoryError);
             } catch (err) {
+                if (!current()) return;
                 const message = err instanceof Error ? err.message : 'Unexpected hook error';
                 setFieldError(path, message);
             }
         })();
+        releasePending.current = trackFieldChange(pending);
     }, [
         field,
         path,
@@ -47,7 +64,8 @@ function useFieldChangeHandler(field, path) {
         getFieldValue,
         getFieldValues,
         setFieldError,
-        clearFieldError
+        clearFieldError,
+        trackFieldChange
     ]);
 }
 export { useFieldChangeHandler };

package/dist/fields/use-field-condition.d.ts

@@ -6,19 +6,4 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { Field } from '@byline/core';
-/**
- * Evaluate a field's visibility `condition` against live form data.
- *
- * Subscribes to the form's meta listeners — fired on every field commit, the
- * same loop `TabDefinition.condition` rides — and recomputes the predicate.
- * The consumer only re-renders when the boolean actually flips, so a stable
- * condition costs one function call per form edit, no reconciliation.
- *
- * `basePath` is the field's sibling scope: the enclosing group / array item
- * (e.g. `files[0].filesGroup` for `files[0].filesGroup.thumbnailPage`).
- * Root-level fields pass no basePath and receive the full form data as their
- * sibling scope, mirroring `FieldCondition`'s contract.
- *
- * Fields without a condition are always visible and no subscription is made.
- */
 export declare const useFieldCondition: (field: Field, basePath?: string) => boolean;

package/dist/fields/use-field-condition.js

@@ -1,13 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
 import { useFormContext } from "../forms/form-context.js";
 import { get } from "../forms/nested-path.js";
+const reportedConditionFailures = new WeakSet();
 const useFieldCondition = (field, basePath)=>{
     const { getFieldValues, subscribeMeta } = useFormContext();
     const evaluate = useCallback(()=>{
         if (!field.condition) return true;
         const data = getFieldValues();
         const siblingData = basePath ? get(data, basePath) ?? {} : data;
-        return Boolean(field.condition(data, siblingData));
+        try {
+            return Boolean(field.condition(data, siblingData));
+        } catch (error) {
+            if (!reportedConditionFailures.has(field)) {
+                reportedConditionFailures.add(field);
+                console.error(`Field condition threw for '${field.name}'; keeping the field visible`, error);
+            }
+            return true;
+        }
     }, [
         field,
         basePath,

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

@@ -78,7 +78,9 @@ interface FormContextType {
     hasChanges: () => boolean;
     resetHasChanges: () => void;
     runFieldHooks: (fields: Field[]) => Promise<FormError[]>;
-    validateForm: (fields: Field[]) => FormError[];
+    validateForm: (fields: Field[], additionalErrors?: FormError[]) => FormError[];
+    trackFieldChange: (pending: Promise<void>) => () => void;
+    waitForFieldChanges: () => Promise<void>;
     errors: FormError[];
     getErrors: () => FormError[];
     clearErrors: () => void;
@@ -131,11 +133,6 @@ export declare const FormProvider: ({ children, initialData, documentId, collect
  * Returns the current value (or `null` when no override is set).
  */
 export declare const useSystemPath: () => string | null;
-/**
- * Subscribe to the system `availableLocales` slot edited by the
- * available-locales widget. Returns the current advertised set (or `[]` when
- * nothing is advertised / not yet surfaced).
- */
 export declare const useSystemAvailableLocales: () => string[];
 export declare const useFormStore: () => FormContextType;
 export declare const useFieldError: (name: string) => string | undefined;
@@ -144,11 +141,5 @@ export declare const useFormMeta: () => {
 };
 export declare const useIsDirty: (name: string) => boolean;
 export declare const useFieldValue: <T = any>(name: string) => T | undefined;
-/**
- * Subscribe to a single field's upload-in-flight state. Returns `true` while
- * the form orchestrator is actively transporting this field's pending upload
- * (between the `setFieldUploading(path, true)` and the matching `false`
- * emitted by the upload executor's progress callback).
- */
 export declare const useIsFieldUploading: (fieldPath: string) => boolean;
 export {};