@byline/admin 4.1.0 → 4.2.0

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

@@ -0,0 +1,58 @@
+:is(.label-row-bNilI8, .byline-field-code-label-row) {
+  align-items: center;
+  margin-bottom: .25rem;
+  display: flex;
+}
+
+.byline-field-code {
+  --byline-code-bg: var(--canvas-50, #fafafa);
+  --byline-code-fg: var(--canvas-950, #1c1c1e);
+  --byline-code-border: var(--canvas-300, #d6d6d6);
+  --byline-code-gutter-bg: var(--canvas-100, #f2f2f2);
+  --byline-code-gutter-fg: var(--canvas-500, #8b8b90);
+  --byline-code-active-line: #0000000a;
+  --byline-code-selection: #3b82f62e;
+  --byline-code-caret: var(--canvas-950, #1c1c1e);
+  --byline-code-focus-ring: #3b82f699;
+  --byline-code-keyword: #7c3aed;
+  --byline-code-string: #15803d;
+  --byline-code-comment: #767680;
+  --byline-code-number: #c2410c;
+  --byline-code-function: #1d4ed8;
+  --byline-code-type: #0f766e;
+  --byline-code-property: #a16207;
+  --byline-code-operator: #52525b;
+}
+
+:is([data-theme="dark"], .dark) .byline-field-code {
+  --byline-code-bg: var(--canvas-900, #1b1b1f);
+  --byline-code-fg: var(--canvas-100, #e6e6ea);
+  --byline-code-border: var(--canvas-700, #3f3f46);
+  --byline-code-gutter-bg: var(--canvas-800, #232327);
+  --byline-code-gutter-fg: var(--canvas-500, #77777f);
+  --byline-code-active-line: #ffffff0d;
+  --byline-code-selection: #60a5fa47;
+  --byline-code-caret: var(--canvas-100, #e6e6ea);
+  --byline-code-focus-ring: #60a5fa8c;
+  --byline-code-keyword: #c4b5fd;
+  --byline-code-string: #86efac;
+  --byline-code-comment: #8e8e96;
+  --byline-code-number: #fdba74;
+  --byline-code-function: #93c5fd;
+  --byline-code-type: #5eead4;
+  --byline-code-property: #fde047;
+  --byline-code-operator: #a1a1aa;
+}
+
+:is(.loading-sejBT6, .byline-field-code-loading) {
+  resize: none;
+  width: 100%;
+  font-family: var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--byline-code-font-size, 13px);
+  color: var(--byline-code-fg);
+  background-color: var(--byline-code-bg);
+  border: 1px solid var(--byline-code-border);
+  border-radius: var(--byline-code-radius, 4px);
+  padding: .5rem;
+}
+

package/dist/fields/field-helpers.js

@@ -19,6 +19,7 @@ const placeholderForField = (f)=>{
     switch(f.type){
         case 'text':
         case 'textArea':
+        case 'code':
             return '';
         case 'checkbox':
             return false;

package/dist/fields/field-renderer.js

@@ -5,6 +5,7 @@ import { useFormContext } from "../forms/form-context.js";
 import { ArrayField } from "./array/array-field.js";
 import { BlocksField } from "./blocks/blocks-field.js";
 import { CheckboxField } from "./checkbox/checkbox-field.js";
+import { CodeField } from "./code/code-field.js";
 import { DateTimeField } from "./datetime/datetime-field.js";
 import field_renderer_module from "./field-renderer.module.js";
 import { FileField } from "./file/file-field.js";
@@ -60,6 +61,19 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     locale: isLocalised ? contentLocale : void 0,
                     components: components
                 });
+            case 'code':
+                return /*#__PURE__*/ jsx(CodeField, {
+                    field: hideLabel ? {
+                        ...field,
+                        label: void 0
+                    } : field,
+                    defaultValue: defaultValue,
+                    onChange: handleChange,
+                    path: path,
+                    id: htmlId,
+                    locale: isLocalised ? contentLocale : void 0,
+                    components: components
+                });
             case 'checkbox':
                 return /*#__PURE__*/ jsx(CheckboxField, {
                     field: hideLabel ? {
@@ -214,7 +228,7 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                 return null;
         }
     };
-    const selfBadge = 'text' === field.type || 'textArea' === field.type || 'richText' === field.type;
+    const selfBadge = 'text' === field.type || 'textArea' === field.type || 'code' === field.type || 'richText' === field.type;
     if (badge && !selfBadge) return /*#__PURE__*/ jsxs("div", {
         className: classnames('byline-field-localized-wrap', field_renderer_module["localized-wrap"]),
         children: [

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

@@ -5,7 +5,7 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { GroupField as GroupFieldType } from '@byline/core';
+import type { FieldAdminConfig, GroupField as GroupFieldType } from '@byline/core';
 interface GroupFieldProps {
     field: GroupFieldType;
     defaultValue: any;
@@ -22,6 +22,14 @@ interface GroupFieldProps {
      * locale badge.
      */
     contentLocale?: string;
+    /**
+     * Per-child-field admin overrides (`components` slots, richtext `editor`),
+     * keyed by child field name. Threaded by `BlocksField` from the site-wide
+     * `ClientConfig.blockAdmin` registry so block children can take per-field
+     * admin config; plain groups receive none today (their children inherit
+     * site-wide defaults).
+     */
+    fieldAdmin?: Record<string, FieldAdminConfig>;
 }
-export declare const GroupField: ({ field, defaultValue, path, collectionPath, contentLocale, }: GroupFieldProps) => import("react").JSX.Element;
+export declare const GroupField: ({ field, defaultValue, path, collectionPath, contentLocale, fieldAdmin, }: GroupFieldProps) => import("react").JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import { placeholderForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
 import { useFieldError } from "../../forms/form-context.js";
 import group_field_module from "./group-field.module.js";
-const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale })=>{
+const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale, fieldAdmin })=>{
     const fieldError = useFieldError(field.name);
     const groupData = useMemo(()=>{
         if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
@@ -48,7 +48,9 @@ const GroupField = ({ field, defaultValue, path, collectionPath, contentLocale }
                         basePath: path,
                         disableSorting: true,
                         collectionPath: collectionPath,
-                        contentLocale: contentLocale
+                        contentLocale: contentLocale,
+                        components: fieldAdmin?.[innerField.name]?.components,
+                        editor: fieldAdmin?.[innerField.name]?.editor
                     }, innerField.name))
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {

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

@@ -39,13 +39,18 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
         const selectFields = resolveSelectFields(targetDefinition, displayField, pickerColumns, extraSelectFields);
         setLoading(true);
         setError(null);
+        const itemViewSort = targetAdminConfig?.itemViewSort;
         getCollectionDocuments({
             collection: targetCollectionPath,
             params: {
                 page,
                 page_size: PAGE_SIZE,
                 query: query.length > 0 ? query : void 0,
-                fields: selectFields
+                fields: selectFields,
+                ...null != itemViewSort ? {
+                    order: String(itemViewSort.field),
+                    desc: 'desc' === itemViewSort.direction
+                } : {}
             }
         }).then((response)=>{
             if (cancelled) return;
@@ -71,7 +76,8 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
         targetDefinition,
         pickerColumns,
         getCollectionDocuments,
-        t
+        t,
+        targetAdminConfig?.itemViewSort
     ]);
     const resolvedDisplayField = displayField ?? targetDefinition?.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
     const handleSelect = useCallback(()=>{

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

@@ -17,10 +17,12 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
                 id: htmlId,
                 htmlFor: htmlId,
                 label: field.label,
-                required: !field.optional
+                required: !field.optional,
+                className: classnames('byline-field-select-label', select_field_module.label)
             }),
             /*#__PURE__*/ jsx(Select, {
-                size: "sm",
+                size: "xs",
+                variant: "outlined",
                 id: htmlId,
                 name: field.name,
                 placeholder: "Select an option",

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

@@ -1,5 +1,6 @@
 import "./select-field_module.css";
 const select_field_module = {
+    label: "label-ScZ_3S",
     dirty: "dirty-aKaGZN"
 };
 export default select_field_module;

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

@@ -1,3 +1,7 @@
+:is(.label-ScZ_3S, .byline-field-select-label) {
+  margin-bottom: .25rem;
+}
+
 :is(.dirty-aKaGZN, .byline-field-select-dirty) {
   border-color: var(--blue-300);
 }

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

@@ -1,5 +1,6 @@
 :is(.label-row-sjBuRb, .byline-field-text-label-row) {
   align-items: center;
+  margin-bottom: .25rem;
   display: flex;
 }
 

package/dist/fields/text-area/text-area-field_module.css

@@ -1,5 +1,6 @@
 :is(.label-row-HwX7C9, .byline-field-text-area-label-row) {
   align-items: center;
+  margin-bottom: .25rem;
   display: flex;
 }
 

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

@@ -104,7 +104,7 @@ export interface FormRendererProps {
      * Opts the document-tree placement widget into the sidebar (above the
      * available-locales widget). Sourced from `CollectionDefinition.tree` by the
      * caller. Renders only in edit mode (placement needs a persisted document)
-     * and only when the host wires the tree services. See docs/04-collections/03-document-trees.md.
+     * and only when the host wires the tree services. See docs/04-collections/04-document-trees.md.
      */
     tree?: boolean;
     headingLabel?: string;

package/dist/forms/tree-placement-widget.d.ts

@@ -8,7 +8,7 @@ export interface TreePlacementWidgetProps {
 }
 /**
  * Sidebar widget for placing the current document within its collection's
- * single-parent document tree (the `tree: true` primitive — docs/04-collections/03-document-trees.md).
+ * single-parent document tree (the `tree: true` primitive — docs/04-collections/04-document-trees.md).
  *
  * The tree is document-grain and **unversioned**, so changes here write
  * immediately (independent of the form's content save). The editor picks a

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -149,16 +149,29 @@
     "src/"
   ],
   "dependencies": {
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.1",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@lezer/highlight": "^1.2.3",
     "@tanstack/react-form-start": "^1.33.0",
     "classnames": "^2.5.1",
     "jose": "^6.2.3",
     "react-diff-viewer-continued": "^4.2.2",
     "uuid": "^14.0.1",
     "zod": "^4.4.3",
-    "@byline/core": "4.1.0",
-    "@byline/ui": "4.1.0",
-    "@byline/auth": "4.1.0",
-    "@byline/i18n": "4.1.0"
+    "@byline/core": "4.2.0",
+    "@byline/i18n": "4.2.0",
+    "@byline/auth": "4.2.0",
+    "@byline/ui": "4.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/array/array-field.module.css

@@ -5,6 +5,8 @@
  *   .byline-field-array               — outer wrapper
  *   .byline-field-array-title         — array label heading
  *   .byline-field-array-stack         — vertical layout for items + add row
+ *   .byline-field-array-add-row       — add-button row at the bottom
+ *   .byline-field-array-add-label     — clickable text label in the add row
  *   .byline-field-array-card          — disable-sorting fallback card per item
  *   .byline-field-array-group-header  — sub-group title above grouped fields
  *   .byline-field-array-group-fields  — vertical stack of fields inside an item
@@ -46,3 +48,31 @@
   flex-direction: column;
   gap: var(--spacing-16);
 }
+
+.add-row,
+:global(.byline-field-array-add-row) {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  color: var(--muted);
+  gap: var(--spacing-8);
+}
+
+/* Text-styled companion button for the add row's label — clickable like the
+   icon button. Hovering anywhere on the row brightens the label text. */
+.add-label,
+:global(.byline-field-array-add-label) {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.add-row:hover .add-label,
+:global(.byline-field-array-add-row):hover :global(.byline-field-array-add-label) {
+  color: var(--text);
+}

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

@@ -290,7 +290,7 @@ export const ArrayField = ({
           className={cx('byline-field-array-stack', styles.stack)}
         >
           {items.map((item, index) => renderItem(item, index))}
-          <span>
+          <div className={cx('byline-field-array-add-row', styles['add-row'])}>
             <IconButton
               onClick={() => {
                 void handleAddItem()
@@ -299,7 +299,20 @@ export const ArrayField = ({
             >
               <PlusIcon />
             </IconButton>
-          </span>
+            {/* Text-styled button so the label is clickable too. Removed from
+                the tab order (tabIndex -1) — the IconButton is the single
+                keyboard/screen-reader control for this action. */}
+            <button
+              type="button"
+              tabIndex={-1}
+              onClick={() => {
+                void handleAddItem()
+              }}
+              className={cx('byline-field-array-add-label', styles['add-label'])}
+            >
+              {t('fields.array.addItem')}
+            </button>
+          </div>
         </DraggableSortable>
       )}
     </div>

package/src/fields/blocks/blocks-field.module.css

@@ -6,6 +6,7 @@
  *   .byline-field-blocks-title          — block-list label heading
  *   .byline-field-blocks-stack          — vertical stack of blocks + add row
  *   .byline-field-blocks-add-row        — add-button row at the bottom
+ *   .byline-field-blocks-add-label      — clickable text label in the add row
  *   .byline-field-blocks-modal-head     — picker modal header
  *   .byline-field-blocks-modal-title    — picker modal title
  *   .byline-field-blocks-grid           — grid of variant cards
@@ -36,9 +37,35 @@
 :global(.byline-field-blocks-add-row) {
   display: flex;
   align-items: center;
+  font-size: 0.9rem;
+  color: var(--muted);
   gap: var(--spacing-8);
 }
 
+/* Text-styled companion button for the add row's label — clickable like the
+   icon button. Hovering anywhere on the row brightens the label text. */
+.add-label,
+:global(.byline-field-blocks-add-label) {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.add-label:disabled,
+:global(.byline-field-blocks-add-label):disabled {
+  cursor: default;
+}
+
+.add-row:hover .add-label:not(:disabled),
+:global(.byline-field-blocks-add-row):hover :global(.byline-field-blocks-add-label):not(:disabled) {
+  color: var(--text);
+}
+
 .modal-head,
 :global(.byline-field-blocks-modal-head) {
   padding-top: 1rem;
@@ -54,6 +81,32 @@
 .modal-content,
 :global(.byline-field-blocks-card-cursor) {
   cursor: pointer;
+  /* Cap the picker's height and scroll the card grid when a collection
+     declares more blocks than fit. Mobile-first: 80% of the (dynamic)
+     viewport height, tightening to 70% on tablet and 60% on desktop —
+     smaller screens get proportionally more of the picker. `min-height: 0`
+     lets this flex child (Modal.Content is a flex column item) actually
+     shrink and scroll; `overscroll-behavior` keeps wheel momentum from
+     spilling into the document behind the modal. All caps stay inside the
+     Modal.Container's own viewport-height limit. */
+  max-height: 80dvh;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+@media (min-width: 40rem) {
+  .modal-content,
+  :global(.byline-field-blocks-card-cursor) {
+    max-height: 70dvh;
+  }
+}
+
+@media (min-width: 64rem) {
+  .modal-content,
+  :global(.byline-field-blocks-card-cursor) {
+    max-height: 60dvh;
+  }
 }
 
 .grid,

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

@@ -9,10 +9,12 @@
 import { useEffect, useMemo, useState } from 'react'
 
 import type {
+  BlockAdminConfig,
   BlocksField as BlocksFieldType,
   Field,
   GroupField as GroupFieldType,
 } from '@byline/core'
+import { getClientConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import {
   Card,
@@ -59,6 +61,19 @@ export const BlocksField = ({
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null)
 
   const availableBlocks = useMemo(() => field.blocks ?? [], [field.blocks])
+
+  // Site-wide per-block admin config (`ClientConfig.blockAdmin`), resolved by
+  // blockType. Registry-based on purpose: blocks are cross-collection units,
+  // so their admin config applies wherever the block renders — no threading
+  // from the collection admin config is needed (mirrors how FieldRenderer
+  // resolves the global richText editor from client config).
+  const blockAdminByType = useMemo(() => {
+    const map = new Map<string, BlockAdminConfig>()
+    for (const entry of getClientConfig().blockAdmin ?? []) {
+      map.set(entry.blockType, entry)
+    }
+    return map
+  }, [])
   const [selectedBlockName, setSelectedBlockName] = useState<string>(
     () => availableBlocks[0]?.blockType ?? ''
   )
@@ -235,6 +250,7 @@ export const BlocksField = ({
         defaultValue={fieldData}
         path={arrayElementPath}
         contentLocale={contentLocale}
+        fieldAdmin={blockAdminByType.get(item._type)?.fields}
       />
     )
 
@@ -270,9 +286,25 @@ export const BlocksField = ({
             }}
             disabled={!selectedBlockName}
             aria-label={t('fields.blocks.addBlockAriaLabel')}
+            variant="outlined"
           >
             <PlusIcon />
           </IconButton>
+          {/* Text-styled button so the label is clickable too. Removed from
+              the tab order (tabIndex -1) — the IconButton is the single
+              keyboard/screen-reader control for this action. */}
+          <button
+            type="button"
+            tabIndex={-1}
+            disabled={!selectedBlockName}
+            onClick={() => {
+              setPendingInsertIndex(null)
+              setShowAddBlockModal(true)
+            }}
+            className={cx('byline-field-blocks-add-label', styles['add-label'])}
+          >
+            {t('fields.blocks.addBlock')}
+          </button>
         </div>
       </DraggableSortable>
       <Modal
@@ -283,7 +315,7 @@ export const BlocksField = ({
           setPendingInsertIndex(null)
         }}
       >
-        <Modal.Container style={{ maxWidth: '600px' }}>
+        <Modal.Container style={{ maxWidth: '700px' }}>
           <Modal.Header className={cx('byline-field-blocks-modal-head', styles['modal-head'])}>
             <h3 className={cx('byline-field-blocks-modal-title', styles['modal-title'])}>
               {t('fields.blocks.modalTitle')}