@byline/admin 6.2.1 → 6.3.0

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

@@ -1,16 +1,18 @@
 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,
+            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,7 @@ const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
         className: `byline-field-datetime ${field.name}`,
         children: [
             /*#__PURE__*/ jsx(DatePicker, {
-                id: id ?? fieldPath,
+                id: htmlId,
                 name: field.name,
                 label: field.label,
                 required: !field.optional,
@@ -28,7 +30,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";
@@ -42,7 +43,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
     };
     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: [
@@ -222,7 +223,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,8 +6,10 @@ 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 htmlId = useScopedDomId(path ?? field.name);
     const fieldError = useFieldError(field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
@@ -55,7 +57,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";
@@ -34,7 +35,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
     };
     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: [
@@ -224,7 +225,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;
@@ -124,7 +125,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, {

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

@@ -5,6 +5,7 @@ import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, DraggableSortable, ErrorText, GripperVerticalIcon, HelpText, IconButton, Label, PlusIcon, moveItem, useSortable } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext } 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";
@@ -57,7 +58,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
 };
 const RelationManyField = ({ field, defaultValue, id, path })=>{
     const fieldPath = path ?? field.name;
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const { t } = useTranslation('byline-admin');
     const fieldError = useFieldError(fieldPath);
     const { getFieldValue, setFieldValue } = useFormContext();
@@ -185,7 +186,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                         text: field.helpText
                     }),
                     fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                        id: `${field.name}-error`,
+                        id: `${htmlId}-error`,
                         text: fieldError
                     }),
                     /*#__PURE__*/ jsx(RelationPicker, {

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

@@ -19,7 +19,9 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
     const [documents, setDocuments] = useState([]);
     const [totalPages, setTotalPages] = useState(1);
     const [collectionId, setCollectionId] = useState(null);
-    const { getCollectionDocuments } = useBylineFieldServices();
+    const [refreshNonce, setRefreshNonce] = useState(0);
+    const { getCollectionDocuments, canCreateInCollection, getCreateDocumentUrl } = useBylineFieldServices();
+    const createHref = null != getCreateDocumentUrl && canCreateInCollection?.(targetCollectionPath) === true ? getCreateDocumentUrl(targetCollectionPath) : null;
     const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
     const pickerColumns = targetAdminConfig?.itemView;
     useEffect(()=>{
@@ -77,7 +79,8 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
         pickerColumns,
         getCollectionDocuments,
         t,
-        targetAdminConfig?.itemViewSort
+        targetAdminConfig?.itemViewSort,
+        refreshNonce
     ]);
     const resolvedDisplayField = displayField ?? targetDefinition?.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
     const handleSelect = useCallback(()=>{
@@ -127,12 +130,40 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                 width: '100%'
             },
             children: [
-                /*#__PURE__*/ jsx(Modal.Header, {
+                /*#__PURE__*/ jsxs(Modal.Header, {
                     className: clsx('byline-field-relation-picker-header', relation_picker_module.header),
-                    children: /*#__PURE__*/ jsx("h3", {
-                        className: clsx('byline-field-relation-picker-title', relation_picker_module.title),
-                        children: title
-                    })
+                    children: [
+                        /*#__PURE__*/ jsx("h3", {
+                            className: clsx('byline-field-relation-picker-title', relation_picker_module.title),
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx('byline-field-relation-picker-actions', relation_picker_module.actions),
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    type: "button",
+                                    size: "xs",
+                                    variant: "outlined",
+                                    className: clsx('byline-field-relation-picker-refresh', relation_picker_module.refresh),
+                                    onClick: ()=>setRefreshNonce((nonce)=>nonce + 1),
+                                    children: t('fields.relation.picker.refresh')
+                                }),
+                                null != createHref && /*#__PURE__*/ jsx(Button, {
+                                    size: "xs",
+                                    variant: "outlined",
+                                    className: clsx('byline-field-relation-picker-create', relation_picker_module.create),
+                                    render: /*#__PURE__*/ jsx("a", {
+                                        href: createHref,
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
+                                        children: t('fields.relation.picker.createNew', {
+                                            label: targetDefinition?.labels.singular ?? targetCollectionPath
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ jsx(Modal.Content, {
                     children: /*#__PURE__*/ jsxs("div", {

package/dist/fields/relation/relation-picker.module.js

@@ -1,6 +1,9 @@
 import "./relation-picker_module.css";
 const relation_picker_module = {
     header: "header-quQOWP",
+    actions: "actions-s42_zl",
+    refresh: "refresh-CVQwEV",
+    create: "create-Ol3jYM",
     title: "title-nX1CSv",
     body: "body-S2EcHm",
     list: "list-UFzd89",

package/dist/fields/relation/relation-picker_module.css

@@ -1,6 +1,26 @@
 :is(.header-quQOWP, .byline-field-relation-picker-header) {
   margin-bottom: var(--spacing-8);
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
   padding-top: 1rem;
+  display: flex;
+}
+
+:is(.actions-s42_zl, .byline-field-relation-picker-actions) {
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.refresh-CVQwEV, .byline-field-relation-picker-refresh) {
+  white-space: nowrap;
+}
+
+:is(.create-Ol3jYM, .byline-field-relation-picker-create) {
+  white-space: nowrap;
+  text-decoration: none;
 }
 
 :is(.title-nX1CSv, .byline-field-relation-picker-title) {

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ErrorText, Label, Select } 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 select_field_module from "./select-field.module.js";
 const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
@@ -9,7 +10,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-select ${field.name}`,
         children: [
@@ -43,7 +44,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
                 ])
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             })
         ]

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

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { Input, 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 text_field_module from "./text-field.module.js";
 const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
@@ -10,7 +11,7 @@ const TextField = ({ 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 handleChange = useCallback((value)=>{
         if (onChange) onChange(value);
     }, [

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

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { Label, TextArea } 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 text_area_field_module from "./text-area-field.module.js";
 const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
@@ -10,7 +11,7 @@ const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale,
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const handleChange = useCallback((value)=>{
         if (onChange) onChange(value);
     }, [

package/dist/forms/form-context.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { normalizeHooks } from "@byline/core";
+import { FormDomScopeProvider } from "./form-dom-scope.js";
 import { get, hasExistingIdTargets, setWithResult } from "./nested-path.js";
 import { deletePendingUploadsUnderPath } from "./pending-uploads.js";
 import { useTrackedSlot } from "./use-tracked-slot.js";
@@ -430,7 +431,9 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
             setSystemAvailableLocales: availableLocalesSlot.set,
             subscribeSystemAvailableLocales: availableLocalesSlot.subscribe
         },
-        children: children
+        children: /*#__PURE__*/ jsx(FormDomScopeProvider, {
+            children: children
+        })
     });
 };
 const useSystemPath = ()=>{

package/dist/forms/form-dom-scope.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { ReactNode } from 'react';
+/**
+ * Establishes one DOM id scope. `FormProvider` wraps its children in this, so a
+ * scope exists wherever form state does and no caller has to opt in.
+ */
+export declare const FormDomScopeProvider: ({ children }: {
+    children: ReactNode;
+}) => ReactNode;
+/**
+ * The active scope, or `''` when rendered outside a form. Field widgets are also
+ * composed directly by the admin user and role screens, which have no
+ * `FormProvider`, so an absent scope degrades to the unprefixed id rather than
+ * throwing.
+ */
+export declare function useFormDomScope(): string;
+/**
+ * Scope a derived DOM id.
+ *
+ * A caller-supplied `id` is returned untouched: it is the author's identifier, it
+ * may already be referenced from outside the form, and scoping it would break that
+ * reference as well as double-prefix ids that pass through here twice.
+ *
+ * The result is a valid HTML id and a valid `for` / `aria-*` reference, but React's
+ * generated scope contains characters that need escaping in a CSS selector. Resolve
+ * these with `document.getElementById`, not `querySelector('#…')`.
+ */
+export declare function useScopedDomId(base: string, explicit?: string): string;

package/dist/forms/form-dom-scope.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+const FormDomScopeContext = /*#__PURE__*/ createContext(null);
+const FormDomScopeProvider = ({ children })=>{
+    const scope = useId();
+    return /*#__PURE__*/ jsx(FormDomScopeContext.Provider, {
+        value: scope,
+        children: children
+    });
+};
+function useFormDomScope() {
+    return useContext(FormDomScopeContext) ?? '';
+}
+function useScopedDomId(base, explicit) {
+    const scope = useFormDomScope();
+    if (null != explicit) return explicit;
+    return '' === scope ? base : `${scope}${base}`;
+}
+export { FormDomScopeProvider, useFormDomScope, useScopedDomId };

package/dist/forms/form-layout.js

@@ -7,6 +7,7 @@ import { FieldRenderer } from "../fields/field-renderer.js";
 import { AdminGroup } from "../presentation/group.js";
 import { AdminRow } from "../presentation/row.js";
 import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
+import { useFormDomScope } from "./form-dom-scope.js";
 import form_renderer_module from "./form-renderer.module.js";
 import { useFormLayout } from "./use-form-layout.js";
 import { useFormTabs } from "./use-form-tabs.js";
@@ -17,6 +18,7 @@ const BOTH_REGIONS = [
 const FormLayout = ({ fields, adminConfig, regions = BOTH_REGIONS, variant = 'split', activeLocale, initialData, activeTabBySet, onTabChange, sidebarSlot })=>{
     const { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath } = useFormLayout(adminConfig, fields);
     const tabs = useFormTabs(fieldToTabPath, activeTabBySet);
+    const domScope = useFormDomScope();
     const renderField = (fieldName)=>{
         const field = fieldByName.get(fieldName);
         if (!field) return null;
@@ -47,7 +49,7 @@ const FormLayout = ({ fields, adminConfig, regions = BOTH_REGIONS, variant = 'sp
         }, `group:${group.name}`);
     const renderTabSet = (set)=>{
         const { visibleTabs, activeTabName, activeTab, errorCounts } = tabs.resolve(set);
-        const idBase = `tabset:${set.name}`;
+        const idBase = `${domScope}tabset:${set.name}`;
         return /*#__PURE__*/ jsxs("div", {
             className: clsx('byline-form-tabset', form_renderer_module.tabset),
             children: [

package/dist/forms/form-renderer.js

@@ -149,6 +149,7 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
         if (onCancel && 'function' == typeof onCancel) onCancel();
     };
     const handleSubmit = (e)=>{
+        if (e.target !== e.currentTarget) return;
         e.preventDefault();
         if (mutationBlockedRef.current) return;
         submission.submit();

package/dist/presentation/tabs.js

@@ -30,6 +30,7 @@ const AdminTabs = ({ tabs, activeTab, onChange, idBase, errorCounts, className }
     const tabRefs = useRef(new Map());
     const focusAfterChange = useRef(null);
     const [strip, setStrip] = useState(INITIAL_STRIP_STATE);
+    const tabsKey = tabs.map((tab)=>`${tab.name}:${tab.label}`).join('\u0000');
     const measure = useCallback(()=>{
         const container = containerRef.current;
         const row = rowRef.current;
@@ -54,7 +55,7 @@ const AdminTabs = ({ tabs, activeTab, onChange, idBase, errorCounts, className }
         return ()=>observer.disconnect();
     }, [
         measure,
-        tabs
+        tabsKey
     ]);
     const reveal = useCallback((name)=>{
         const viewport = viewportRef.current;

package/dist/react.d.ts

@@ -67,4 +67,4 @@ export * from './presentation/tabs.js';
 export * from './widgets/diff-viewer/diff-modal.js';
 export * from './widgets/source-locale-badge/source-locale-badge.js';
 export * from './widgets/status-badge/status-badge.js';
-export type { BylineFieldServices, CollectionListDoc, CollectionListParams, CollectionListResponse, GetCollectionDocumentsFn, GetTreeAncestorsFn, GetTreeParentFn, PlaceTreeNodeFn, PlaceTreeNodeInput, RemoveFromTreeFn, TreeAncestor, UploadedFileResult, UploadFieldFn, } from './fields/field-services-types.js';
+export type { BylineFieldServices, CanCreateInCollectionFn, CollectionListDoc, CollectionListParams, CollectionListResponse, GetCollectionDocumentsFn, GetCreateDocumentUrlFn, GetTreeAncestorsFn, GetTreeParentFn, PlaceTreeNodeFn, PlaceTreeNodeInput, RemoveFromTreeFn, TreeAncestor, UploadedFileResult, UploadFieldFn, } from './fields/field-services-types.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -183,12 +183,12 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.6.2",
-    "@byline/analytics": "6.2.1",
-    "@byline/auth": "6.2.1",
-    "@byline/ui": "6.2.1",
-    "@byline/core": "6.2.1",
-    "@byline/analytics-agent": "6.2.1",
-    "@byline/i18n": "6.2.1"
+    "@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"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -10,6 +10,7 @@ import type { CheckboxField as FieldType } from '@byline/core'
 import { Checkbox } from '@byline/ui/react'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import styles from './checkbox-field.module.css'
 
 export const CheckboxField = ({
@@ -28,6 +29,7 @@ export const CheckboxField = ({
   path?: string
 }) => {
   const fieldPath = path ?? field.name
+  const htmlId = useScopedDomId(fieldPath, id)
   const fieldError = useFieldError(fieldPath)
   const fieldValue = useFieldValue<boolean | undefined>(fieldPath)
   const checked = value ?? fieldValue ?? defaultValue ?? false
@@ -35,7 +37,7 @@ export const CheckboxField = ({
   return (
     <div className={`byline-field-checkbox ${field.name} ${styles['field-checkbox']}`}>
       <Checkbox
-        id={id ?? fieldPath}
+        id={htmlId}
         name={field.name}
         label={field.label}
         checked={checked}

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

@@ -13,6 +13,7 @@ import { ErrorText, HelpText, Label } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { LocaleBadge } from '../locale-badge'
 import styles from './code-field.module.css'
 
@@ -57,7 +58,7 @@ export const CodeField = ({
   const fieldError = useFieldError(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
 
   // Effective highlight language: a sibling `languageField` selection (e.g.
   // a `select` next to the code field) wins over the schema's static