@byline/admin 4.1.0 → 4.3.0

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

@@ -5,8 +5,8 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { ArrayField as ArrayFieldType } from '@byline/core';
-export declare const ArrayField: ({ field, defaultValue, path, disableSorting, collectionPath, contentLocale, }: {
+import type { ArrayField as ArrayFieldType, FieldAdminConfig } from '@byline/core';
+export declare const ArrayField: ({ field, defaultValue, path, disableSorting, collectionPath, contentLocale, fieldAdmin, }: {
     field: ArrayFieldType;
     defaultValue: any;
     path: string;
@@ -24,4 +24,14 @@ export declare const ArrayField: ({ field, defaultValue, path, disableSorting, c
      * can render their locale badge.
      */
     contentLocale?: string;
+    /**
+     * Admin overrides for the array's child fields, keyed by dotted,
+     * index-free schema paths relative to this array ('answer',
+     * 'filesGroup.publicationFile'). Schema paths address declarations, so
+     * one entry applies to that field in every item. Arrives pre-sliced from
+     * the enclosing widget (`FieldRenderer` / `GroupField`); exact-name
+     * entries apply to the child, deeper entries are re-sliced and threaded
+     * on (see `sliceFieldAdmin`).
+     */
+    fieldAdmin?: Record<string, FieldAdminConfig>;
 }) => import("react").JSX.Element;

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

@@ -3,12 +3,13 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { DraggableSortable, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
 import classnames from "classnames";
+import { sliceFieldAdmin } from "../field-admin.js";
 import { defaultScalarForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
-import { SortableItem } from "../sortable-item.js";
+import { SortableItem, StaticItem } from "../sortable-item.js";
 import { useFormContext } from "../../forms/form-context.js";
 import array_field_module from "./array-field.module.js";
-const ArrayField = ({ field, defaultValue, path, disableSorting = false, collectionPath, contentLocale })=>{
+const ArrayField = ({ field, defaultValue, path, disableSorting = false, collectionPath, contentLocale, fieldAdmin })=>{
     const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const [items, setItems] = useState([]);
@@ -113,6 +114,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
             const initial = item[childField.name];
             if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
                 const groupData = initial && 'object' == typeof initial ? initial : {};
+                const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name);
                 return /*#__PURE__*/ jsxs("div", {
                     className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
                     children: [
@@ -126,7 +128,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                                 basePath: `${arrayElementPath}.${childField.name}`,
                                 disableSorting: true,
                                 collectionPath: collectionPath,
-                                contentLocale: contentLocale
+                                contentLocale: contentLocale,
+                                components: groupAdmin?.[innerField.name]?.components,
+                                editor: groupAdmin?.[innerField.name]?.editor,
+                                fieldAdmin: sliceFieldAdmin(groupAdmin, innerField.name)
                             }, innerField.name))
                     ]
                 }, childField.name);
@@ -137,12 +142,17 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                 basePath: arrayElementPath,
                 disableSorting: true,
                 collectionPath: collectionPath,
-                contentLocale: contentLocale
+                contentLocale: contentLocale,
+                components: fieldAdmin?.[childField.name]?.components,
+                editor: fieldAdmin?.[childField.name]?.editor,
+                fieldAdmin: sliceFieldAdmin(fieldAdmin, childField.name)
             }, childField.name);
         });
-        const label = field.label ?? field.name;
-        if (disableSorting) return /*#__PURE__*/ jsx("div", {
-            className: classnames('byline-field-array-card', array_field_module.card),
+        const itemLabel = `${field.label ?? field.name} ${index + 1}`;
+        if (disableSorting) return /*#__PURE__*/ jsx(StaticItem, {
+            label: itemLabel,
+            onAddBelow: ()=>handleInsertBelow(index),
+            onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
@@ -150,7 +160,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
         }, itemWrapper.id);
         return /*#__PURE__*/ jsx(SortableItem, {
             id: itemWrapper.id,
-            label: label,
+            label: itemLabel,
             onAddBelow: ()=>handleInsertBelow(index),
             onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
@@ -159,31 +169,47 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
             })
         }, itemWrapper.id);
     };
+    const addRow = /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-field-array-add-row', array_field_module["add-row"]),
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                onClick: ()=>{
+                    handleAddItem();
+                },
+                "aria-label": t('fields.array.addItemAriaLabel'),
+                children: /*#__PURE__*/ jsx(PlusIcon, {})
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                onClick: ()=>{
+                    handleAddItem();
+                },
+                className: classnames('byline-field-array-add-label', array_field_module["add-label"]),
+                children: t('fields.array.addItem')
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-array ${field.name}`,
         children: [
-            !disableSorting && field.label && /*#__PURE__*/ jsx("h3", {
+            field.label && /*#__PURE__*/ jsx("h3", {
                 className: classnames('byline-field-array-title', array_field_module.title),
                 children: field.label
             }),
-            disableSorting ? /*#__PURE__*/ jsx("div", {
+            disableSorting ? /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-field-array-stack', array_field_module.stack),
-                children: items.map((item, index)=>renderItem(item, index))
+                children: [
+                    items.map((item, index)=>renderItem(item, index)),
+                    addRow
+                ]
             }) : /*#__PURE__*/ jsxs(DraggableSortable, {
                 ids: items.map((i)=>i.id),
                 onDragEnd: handleDragEnd,
                 className: classnames('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsx("span", {
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            onClick: ()=>{
-                                handleAddItem();
-                            },
-                            "aria-label": t('fields.array.addItemAriaLabel'),
-                            children: /*#__PURE__*/ jsx(PlusIcon, {})
-                        })
-                    })
+                    addRow
                 ]
             })
         ]

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

@@ -6,6 +6,10 @@ const array_field_module = {
     "group-header": "group-header-KJxpIV",
     groupHeader: "group-header-KJxpIV",
     "group-fields": "group-fields-Bmi_hA",
-    groupFields: "group-fields-Bmi_hA"
+    groupFields: "group-fields-Bmi_hA",
+    "add-row": "add-row-bCHtVe",
+    addRow: "add-row-bCHtVe",
+    "add-label": "add-label-KdsV2D",
+    addLabel: "add-label-KdsV2D"
 };
 export default array_field_module;

package/dist/fields/array/array-field_module.css

@@ -30,3 +30,26 @@
   display: flex;
 }
 
+:is(.add-row-bCHtVe, .byline-field-array-add-row) {
+  color: var(--muted);
+  align-items: center;
+  gap: var(--spacing-8);
+  font-size: .9rem;
+  display: flex;
+}
+
+:is(.add-label-KdsV2D, .byline-field-array-add-label) {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color .12s;
+}
+
+:is(.add-row-bCHtVe:hover .add-label-KdsV2D, .byline-field-array-add-row:hover .byline-field-array-add-label) {
+  color: var(--text);
+}
+

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Card, CloseIcon, DraggableSortable, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
 import classnames from "classnames";
@@ -17,6 +18,11 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
     const availableBlocks = useMemo(()=>field.blocks ?? [], [
         field.blocks
     ]);
+    const blockAdminByType = useMemo(()=>{
+        const map = new Map();
+        for (const entry of getClientConfig().blockAdmin ?? [])map.set(entry.blockType, entry);
+        return map;
+    }, []);
     const [selectedBlockName, setSelectedBlockName] = useState(()=>availableBlocks[0]?.blockType ?? '');
     useEffect(()=>{
         if (null == selectedBlockName || !availableBlocks.some((b)=>b.blockType === selectedBlockName)) setSelectedBlockName(availableBlocks[0]?.blockType ?? '');
@@ -130,7 +136,9 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
             },
             defaultValue: fieldData,
             path: arrayElementPath,
-            contentLocale: contentLocale
+            disableSorting: false,
+            contentLocale: contentLocale,
+            fieldAdmin: blockAdminByType.get(item._type)?.fields
         }, subField.blockType);
         return /*#__PURE__*/ jsx(SortableItem, {
             id: itemWrapper.id,
@@ -153,17 +161,31 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            onClick: ()=>{
-                                setPendingInsertIndex(null);
-                                setShowAddBlockModal(true);
-                            },
-                            disabled: !selectedBlockName,
-                            "aria-label": t('fields.blocks.addBlockAriaLabel'),
-                            children: /*#__PURE__*/ jsx(PlusIcon, {})
-                        })
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>{
+                                    setPendingInsertIndex(null);
+                                    setShowAddBlockModal(true);
+                                },
+                                disabled: !selectedBlockName,
+                                "aria-label": t('fields.blocks.addBlockAriaLabel'),
+                                variant: "outlined",
+                                children: /*#__PURE__*/ jsx(PlusIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                tabIndex: -1,
+                                disabled: !selectedBlockName,
+                                onClick: ()=>{
+                                    setPendingInsertIndex(null);
+                                    setShowAddBlockModal(true);
+                                },
+                                className: classnames('byline-field-blocks-add-label', blocks_field_module["add-label"]),
+                                children: t('fields.blocks.addBlock')
+                            })
+                        ]
                     })
                 ]
             }),
@@ -176,7 +198,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 },
                 children: /*#__PURE__*/ jsxs(Modal.Container, {
                     style: {
-                        maxWidth: '600px'
+                        maxWidth: '700px'
                     },
                     children: [
                         /*#__PURE__*/ jsxs(Modal.Header, {

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

@@ -4,6 +4,8 @@ const blocks_field_module = {
     stack: "stack-Xxa89J",
     "add-row": "add-row-gEqjM_",
     addRow: "add-row-gEqjM_",
+    "add-label": "add-label-jiOURu",
+    addLabel: "add-label-jiOURu",
     "modal-head": "modal-head-BTxR9C",
     modalHead: "modal-head-BTxR9C",
     "modal-title": "modal-title-jwOfU_",

package/dist/fields/blocks/blocks-field_module.css

@@ -11,11 +11,32 @@
 }
 
 :is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
+  color: var(--muted);
   align-items: center;
   gap: var(--spacing-8);
+  font-size: .9rem;
   display: flex;
 }
 
+:is(.add-label-jiOURu, .byline-field-blocks-add-label) {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color .12s;
+}
+
+:is(.add-label-jiOURu:disabled, .byline-field-blocks-add-label:disabled) {
+  cursor: default;
+}
+
+:is(.add-row-gEqjM_:hover .add-label-jiOURu:not(:disabled), .byline-field-blocks-add-row:hover .byline-field-blocks-add-label:not(:disabled)) {
+  color: var(--text);
+}
+
 :is(.modal-head-BTxR9C, .byline-field-blocks-modal-head) {
   margin-bottom: var(--spacing-8);
   padding-top: 1rem;
@@ -28,6 +49,22 @@
 
 :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
   cursor: pointer;
+  overscroll-behavior: contain;
+  min-height: 0;
+  max-height: 80dvh;
+  overflow-y: auto;
+}
+
+@media (min-width: 40rem) {
+  :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
+    max-height: 70dvh;
+  }
+}
+
+@media (min-width: 64rem) {
+  :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
+    max-height: 60dvh;
+  }
 }
 
 :is(.grid-gALL6j, .byline-field-blocks-grid) {

package/dist/fields/code/code-editor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export interface CodeEditorProps {
+    id?: string;
+    /** Initial document. External updates sync only while the editor is unfocused. */
+    value: string;
+    /** Highlight language (canonical name or alias). Unknown → plain text. */
+    language?: string;
+    readOnly?: boolean;
+    onChange?: (value: string) => void;
+    ariaInvalid?: boolean;
+    ariaDescribedBy?: string;
+}
+declare const CodeEditor: ({ id, value, language, readOnly, onChange, ariaInvalid, ariaDescribedBy, }: CodeEditorProps) => import("react").JSX.Element;
+export default CodeEditor;

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

@@ -0,0 +1,239 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { defaultKeymap, history as commands_history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from "@codemirror/language";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+const LANGUAGE_LOADERS = {
+    javascript: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript()),
+    jsx: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                jsx: true
+            })),
+    typescript: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                typescript: true
+            })),
+    tsx: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                jsx: true,
+                typescript: true
+            })),
+    json: ()=>import("@codemirror/lang-json").then((m)=>m.json()),
+    html: ()=>import("@codemirror/lang-html").then((m)=>m.html()),
+    css: ()=>import("@codemirror/lang-css").then((m)=>m.css()),
+    markdown: ()=>import("@codemirror/lang-markdown").then((m)=>m.markdown()),
+    python: ()=>import("@codemirror/lang-python").then((m)=>m.python()),
+    sql: ()=>import("@codemirror/lang-sql").then((m)=>m.sql()),
+    yaml: ()=>import("@codemirror/lang-yaml").then((m)=>m.yaml())
+};
+const LANGUAGE_ALIASES = {
+    js: "javascript",
+    ts: "typescript",
+    md: 'markdown',
+    py: 'python',
+    yml: 'yaml'
+};
+const resolveLanguageLoader = (language)=>{
+    if (!language) return null;
+    const key = LANGUAGE_ALIASES[language] ?? language;
+    return LANGUAGE_LOADERS[key] ?? null;
+};
+const bylineCodeTheme = EditorView.theme({
+    '&': {
+        backgroundColor: 'var(--byline-code-bg)',
+        color: 'var(--byline-code-fg)',
+        fontSize: 'var(--byline-code-font-size, 13px)',
+        border: '1px solid var(--byline-code-border)',
+        borderRadius: 'var(--byline-code-radius, 4px)'
+    },
+    '&.cm-focused': {
+        outline: '2px solid var(--byline-code-focus-ring)',
+        outlineOffset: '-1px'
+    },
+    '.cm-content': {
+        fontFamily: 'var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)',
+        caretColor: 'var(--byline-code-caret)',
+        minHeight: 'var(--byline-code-min-height, 6rem)'
+    },
+    '.cm-scroller': {
+        fontFamily: 'inherit',
+        maxHeight: 'var(--byline-code-max-height, 32rem)'
+    },
+    '.cm-gutters': {
+        backgroundColor: 'var(--byline-code-gutter-bg)',
+        color: 'var(--byline-code-gutter-fg)',
+        border: 'none',
+        borderRight: '1px solid var(--byline-code-border)'
+    },
+    '.cm-activeLine': {
+        backgroundColor: 'var(--byline-code-active-line)'
+    },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'var(--byline-code-active-line)'
+    },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+        backgroundColor: 'var(--byline-code-selection) !important'
+    },
+    '.cm-cursor': {
+        borderLeftColor: 'var(--byline-code-caret)'
+    }
+});
+const bylineHighlightStyle = HighlightStyle.define([
+    {
+        tag: tags.keyword,
+        color: 'var(--byline-code-keyword)'
+    },
+    {
+        tag: [
+            tags.string,
+            tags.special(tags.string)
+        ],
+        color: 'var(--byline-code-string)'
+    },
+    {
+        tag: tags.comment,
+        color: 'var(--byline-code-comment)',
+        fontStyle: 'italic'
+    },
+    {
+        tag: [
+            tags.number,
+            tags.bool,
+            tags["null"]
+        ],
+        color: 'var(--byline-code-number)'
+    },
+    {
+        tag: [
+            tags["function"](tags.variableName),
+            tags["function"](tags.propertyName)
+        ],
+        color: 'var(--byline-code-function)'
+    },
+    {
+        tag: [
+            tags.typeName,
+            tags.className,
+            tags.tagName
+        ],
+        color: 'var(--byline-code-type)'
+    },
+    {
+        tag: [
+            tags.propertyName,
+            tags.attributeName
+        ],
+        color: 'var(--byline-code-property)'
+    },
+    {
+        tag: [
+            tags.operator,
+            tags.definitionKeyword
+        ],
+        color: 'var(--byline-code-operator)'
+    }
+]);
+const CodeEditor = ({ id, value, language, readOnly, onChange, ariaInvalid, ariaDescribedBy })=>{
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const languageCompartment = useRef(new Compartment());
+    const readOnlyCompartment = useRef(new Compartment());
+    const ariaCompartment = useRef(new Compartment());
+    const initialValueRef = useRef(value);
+    useEffect(()=>{
+        if (null == containerRef.current) return;
+        const state = EditorState.create({
+            doc: initialValueRef.current,
+            extensions: [
+                lineNumbers(),
+                commands_history(),
+                bracketMatching(),
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap,
+                    indentWithTab
+                ]),
+                EditorView.lineWrapping,
+                bylineCodeTheme,
+                syntaxHighlighting(bylineHighlightStyle),
+                languageCompartment.current.of([]),
+                readOnlyCompartment.current.of([]),
+                ariaCompartment.current.of([]),
+                EditorView.updateListener.of((update)=>{
+                    if (update.docChanged) onChangeRef.current?.(update.state.doc.toString());
+                })
+            ]
+        });
+        const view = new EditorView({
+            state,
+            parent: containerRef.current
+        });
+        viewRef.current = view;
+        return ()=>{
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+    useEffect(()=>{
+        const view = viewRef.current;
+        if (null == view || view.hasFocus) return;
+        const current = view.state.doc.toString();
+        if (current !== value) view.dispatch({
+            changes: {
+                from: 0,
+                to: current.length,
+                insert: value
+            }
+        });
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        let cancelled = false;
+        const view = viewRef.current;
+        if (null == view) return;
+        const loader = resolveLanguageLoader(language);
+        if (null == loader) return void view.dispatch({
+            effects: languageCompartment.current.reconfigure([])
+        });
+        loader().then((extension)=>{
+            if (!cancelled && null != viewRef.current) viewRef.current.dispatch({
+                effects: languageCompartment.current.reconfigure(extension)
+            });
+        }).catch(()=>{});
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        language
+    ]);
+    useEffect(()=>{
+        viewRef.current?.dispatch({
+            effects: readOnlyCompartment.current.reconfigure([
+                EditorState.readOnly.of(true === readOnly),
+                EditorView.editable.of(true !== readOnly)
+            ])
+        });
+    }, [
+        readOnly
+    ]);
+    useEffect(()=>{
+        const attributes = {};
+        if (ariaInvalid) attributes['aria-invalid'] = 'true';
+        if (ariaDescribedBy) attributes['aria-describedby'] = ariaDescribedBy;
+        viewRef.current?.dispatch({
+            effects: ariaCompartment.current.reconfigure(EditorView.contentAttributes.of(attributes))
+        });
+    }, [
+        ariaInvalid,
+        ariaDescribedBy
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        id: id,
+        className: "byline-code-editor"
+    });
+};
+const code_editor = CodeEditor;
+export default code_editor;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 React from 'react';
+import type { FieldComponentSlots, CodeField as FieldType } from '@byline/core';
+export declare const CodeField: ({ field, value, defaultValue, onChange, id, path, locale, components, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** When provided, renders a LocaleBadge next to the field label. */
+    locale?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => React.JSX.Element;