@byline/admin 6.2.1 → 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

@@ -1,16 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@byline/ui/react";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import checkbox_field_module from "./checkbox-field.module.js";
 const CheckboxField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
+    const htmlId = useScopedDomId(fieldPath, id);
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const checked = value ?? fieldValue ?? defaultValue ?? false;
     return /*#__PURE__*/ jsx("div", {
         className: `byline-field-checkbox ${field.name} ${checkbox_field_module["field-checkbox"]}`,
         children: /*#__PURE__*/ jsx(Checkbox, {
-            id: id ?? fieldPath,
+            disabled: field.readOnly,
+            id: htmlId,
             name: field.name,
             label: field.label,
             checked: checked,

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

@@ -3,6 +3,7 @@ import react, { Suspense, useCallback } from "react";
 import { ErrorText, HelpText, Label } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { LocaleBadge } from "../locale-badge.js";
 import code_field_module from "./code-field.module.js";
 const CodeEditor = /*#__PURE__*/ react.lazy(()=>import("./code-editor.js"));
@@ -15,7 +16,7 @@ const CodeField = ({ field, value, defaultValue, onChange, id, path, locale, com
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const siblingPath = field.languageField ? siblingFieldPath(fieldPath, field.languageField) : fieldPath;
     const siblingLanguage = useFieldValue(siblingPath);
     const effectiveLanguage = (field.languageField ? siblingLanguage : void 0) || field.language;

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

@@ -2,9 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker, ErrorText } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import datetime_field_module from "./datetime-field.module.js";
 const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
+    const htmlId = useScopedDomId(fieldPath, id);
     const fieldError = useFieldError(fieldPath);
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
@@ -13,7 +15,8 @@ const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
         className: `byline-field-datetime ${field.name}`,
         children: [
             /*#__PURE__*/ jsx(DatePicker, {
-                id: id ?? fieldPath,
+                disabled: field.readOnly,
+                id: htmlId,
                 name: field.name,
                 label: field.label,
                 required: !field.optional,
@@ -28,7 +31,7 @@ const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
                 ])
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             })
         ]

package/dist/fields/field-renderer.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { getAdminConfig } from "@byline/core";
 import clsx from "clsx";
 import { useFormContext } from "../forms/form-context.js";
+import { useScopedDomId } from "../forms/form-dom-scope.js";
 import { ArrayField } from "./array/array-field.js";
 import { BlocksField } from "./blocks/blocks-field.js";
 import { CheckboxField } from "./checkbox/checkbox-field.js";
@@ -22,7 +23,7 @@ import { useFieldChangeHandler } from "./use-field-change-handler.js";
 import { useFieldCondition } from "./use-field-condition.js";
 const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, contentLocale, components, editor, fieldAdmin })=>{
     const path = basePath ? `${basePath}.${field.name}` : field.name;
-    const htmlId = path.replace(/[[\].]/g, '-');
+    const htmlId = useScopedDomId(path.replace(/[[\].]/g, '-'));
     const handleChange = useFieldChangeHandler(field, path);
     const { getFieldValue } = useFormContext();
     const visible = useFieldCondition(field, basePath);

package/dist/fields/field-services-types.d.ts

@@ -101,6 +101,10 @@ export type GetTreeParentFn = (input: {
     placed: boolean;
     parentDocumentId: string | null;
 }>;
+/** See `BylineFieldServices.canCreateInCollection`. */
+export type CanCreateInCollectionFn = (collectionPath: string) => boolean;
+/** See `BylineFieldServices.getCreateDocumentUrl`. */
+export type GetCreateDocumentUrlFn = (collectionPath: string) => string;
 export interface BylineFieldServices {
     getCollectionDocuments: GetCollectionDocumentsFn;
     uploadField: UploadFieldFn;
@@ -113,4 +117,23 @@ export interface BylineFieldServices {
     removeFromTree?: RemoveFromTreeFn;
     getTreeAncestors?: GetTreeAncestorsFn;
     getTreeParent?: GetTreeParentFn;
+    /**
+     * Whether the viewer may create documents in a collection, used to decide
+     * whether to offer a create affordance in the relation picker.
+     *
+     * Cosmetic only: the create view enforces the ability server-side regardless
+     * of what this returns. Optional, like the tree operations above — a host that
+     * wires neither this nor `getCreateDocumentUrl` simply gets no affordance, and
+     * the widget guards on their presence.
+     */
+    canCreateInCollection?: CanCreateInCollectionFn;
+    /**
+     * Root-relative URL of a collection's create view, built from the host's
+     * configured admin path.
+     *
+     * Root-relative rather than absolute because no origin is available during the
+     * server render, and the admin base path is host configuration —
+     * `@byline/admin` must not assume `/admin`.
+     */
+    getCreateDocumentUrl?: GetCreateDocumentUrlFn;
 }

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

@@ -4,6 +4,7 @@ import { useTranslation } from "@byline/i18n/react";
 import { CloseIcon, DocumentIcon, DownloadIcon, ErrorText, HelpText, IconButton, Label, LoaderRing, VideoIcon } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import file_field_module from "./file-field.module.js";
 import { FileUploadField } from "./file-upload-field.js";
@@ -37,12 +38,13 @@ 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);
     };
     const isVideo = incomingValue?.mimeType?.startsWith('video/') === true;
     const FileGlyph = isVideo ? VideoIcon : DocumentIcon;
-    const htmlId = fieldPath;
+    const htmlId = useScopedDomId(fieldPath);
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-file ${field.name}`,
         children: [
@@ -60,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,
@@ -99,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",
@@ -222,7 +224,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                 text: field.helpText
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             })
         ]

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

@@ -6,9 +6,11 @@ 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 { 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 fieldError = useFieldError(field.name);
+    const htmlId = useScopedDomId(path ?? field.name);
+    const fieldError = useFieldError(path ?? field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
         const placeholder = {};
@@ -44,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,
@@ -55,7 +60,7 @@ const GroupField = ({ field, defaultValue, path, disableSorting = true, contentL
                     }, innerField.name))
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             })
         ]

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

@@ -5,6 +5,7 @@ import { useTranslation } from "@byline/i18n/react";
 import { CloseIcon, ErrorText, HelpText, IconButton, ImageLightbox, Label, LoaderRing } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import image_field_module from "./image-field.module.js";
 import { ImageUploadField } from "./image-upload-field.js";
@@ -29,12 +30,13 @@ 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);
     };
     const [lightboxOpen, setLightboxOpen] = useState(false);
     const canOpenLightbox = !isPending && !!incomingValue?.storageUrl;
-    const htmlId = fieldPath;
+    const htmlId = useScopedDomId(fieldPath);
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-image ${field.name}`,
         children: [
@@ -52,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,
@@ -78,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",
@@ -224,7 +226,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                 text: field.helpText
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             }),
             canOpenLightbox && incomingValue?.storageUrl && /*#__PURE__*/ jsx(ImageLightbox, {

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

@@ -3,13 +3,14 @@ import { useEffect, useState } from "react";
 import { normalizeNumericValue } from "@byline/core";
 import { Input } from "@byline/ui/react";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 const COMPLETE_NUMERIC_RE = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
 const NumericalField = ({ field, value, defaultValue, onChange, id, path, components })=>{
     const fieldPath = path ?? field.name;
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = void 0 !== value ? value : void 0 !== fieldValue ? fieldValue : defaultValue ?? null;
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const canonicalDisplay = null == incomingValue ? '' : String(incomingValue);
     const [displayValue, setDisplayValue] = useState(canonicalDisplay);
     const [isEditing, setIsEditing] = useState(false);

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

@@ -5,12 +5,13 @@ import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, EditIcon, ErrorText, HelpText, IconButton, Label } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+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 RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = void 0 !== fieldValue ? fieldValue ?? null : value ?? defaultValue ?? null;
@@ -21,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,
@@ -32,6 +34,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
         });
     };
     const handleRemove = ()=>{
+        if (field.readOnly) return;
         setPickedRecord(null);
         onChange?.(null);
     };
@@ -79,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",
@@ -93,6 +97,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: field.readOnly,
                                     type: "button",
                                     intent: "noeffect",
                                     size: "xs",
@@ -109,6 +114,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                         })
                     ]
                 }) : /*#__PURE__*/ jsx(Button, {
+                    disabled: field.readOnly,
                     id: htmlId,
                     size: "xs",
                     variant: "outlined",
@@ -124,7 +130,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                 text: field.helpText
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             }),
             !isUnknown && /*#__PURE__*/ jsx(RelationPicker, {