@byline/admin 4.1.0 → 4.3.0

package/src/fields/field-renderer.tsx

@@ -10,6 +10,7 @@ import type {
   ArrayField as ArrayFieldType,
   BlocksField as BlocksFieldType,
   Field,
+  FieldAdminConfig,
   FieldComponentSlots,
   GroupField as GroupFieldType,
   RichTextEditorComponent,
@@ -21,6 +22,7 @@ import { useFormContext } from '../forms/form-context'
 import { ArrayField } from './array/array-field'
 import { BlocksField } from './blocks/blocks-field'
 import { CheckboxField } from './checkbox/checkbox-field'
+import { CodeField } from './code/code-field'
 import { DateTimeField } from './datetime/datetime-field'
 import styles from './field-renderer.module.css'
 import { FileField } from './file/file-field'
@@ -67,6 +69,15 @@ interface FieldRendererProps {
    * Ignored when `field.type !== 'richText'`.
    */
   editor?: RichTextEditorComponent
+  /**
+   * Admin overrides for this field's *descendants*, keyed by dotted,
+   * index-free schema paths relative to this field ('answer',
+   * 'filesGroup.publicationFile'). Only meaningful when `field` is a
+   * structural `group` / `array` — the widget slices the map per child
+   * (see `sliceFieldAdmin`). `components` / `editor` above stay the
+   * overrides for this field itself.
+   */
+  fieldAdmin?: Record<string, FieldAdminConfig>
 }
 
 export const FieldRenderer = ({
@@ -79,6 +90,7 @@ export const FieldRenderer = ({
   contentLocale,
   components,
   editor,
+  fieldAdmin,
 }: FieldRendererProps) => {
   const path = basePath ? `${basePath}.${field.name}` : field.name
   const htmlId = path.replace(/[[\].]/g, '-')
@@ -140,6 +152,18 @@ export const FieldRenderer = ({
             components={components}
           />
         )
+      case 'code':
+        return (
+          <CodeField
+            field={hideLabel ? { ...field, label: undefined } : field}
+            defaultValue={defaultValue}
+            onChange={handleChange}
+            path={path}
+            id={htmlId}
+            locale={isLocalised ? contentLocale : undefined}
+            components={components}
+          />
+        )
       case 'checkbox':
         return (
           <CheckboxField
@@ -276,8 +300,10 @@ export const FieldRenderer = ({
             }
             defaultValue={defaultValue}
             path={path}
+            disableSorting={disableSorting}
             collectionPath={collectionPath}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       case 'blocks':
@@ -300,6 +326,7 @@ export const FieldRenderer = ({
             disableSorting={disableSorting}
             collectionPath={collectionPath}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       default:
@@ -307,9 +334,13 @@ export const FieldRenderer = ({
     }
   }
 
-  // text and textArea render the badge inside their own Label row;
+  // text, textArea, and code render the badge inside their own Label row;
   // the outer wrapper is only needed for other field types.
-  const selfBadge = field.type === 'text' || field.type === 'textArea' || field.type === 'richText'
+  const selfBadge =
+    field.type === 'text' ||
+    field.type === 'textArea' ||
+    field.type === 'code' ||
+    field.type === 'richText'
 
   if (badge && !selfBadge) {
     return (

package/src/fields/field-services-types.ts

@@ -62,7 +62,7 @@ export type UploadFieldFn = (
   createDocument?: boolean
 ) => Promise<UploadedFileResult>
 
-// --- Document tree (the `tree: true` primitive — docs/04-collections/03-document-trees.md) -----
+// --- Document tree (the `tree: true` primitive — docs/04-collections/04-document-trees.md) -----
 
 /** One hydrated ancestor in a document's breadcrumb trail (root-first). */
 export interface TreeAncestor {

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

@@ -8,10 +8,11 @@
 
 import { useMemo } from 'react'
 
-import type { Field, GroupField as GroupFieldType } from '@byline/core'
+import type { Field, FieldAdminConfig, GroupField as GroupFieldType } from '@byline/core'
 import { ErrorText } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { placeholderForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { useFieldError } from '../../forms/form-context'
@@ -32,6 +33,16 @@ interface GroupFieldProps {
   field: GroupFieldType
   defaultValue: any
   path: string
+  /**
+   * Threaded to child fields — governs only the *drag* affordance of any
+   * `array` children (structural add/remove always renders; see ArrayField).
+   * Defaults to `true` (conservative): arrays inside plain schema groups
+   * stay drag-free. `BlocksField` passes `false` on its synthesized group so
+   * arrays directly inside blocks are fully sortable — safe because each
+   * `DraggableSortable` is an independent DndContext with grip-scoped
+   * listeners.
+   */
+  disableSorting?: boolean
   /**
    * Collection path forwarded to upload-capable child fields (`file` / `image`),
    * which need it to reach the `/upload` endpoint. Without it those fields fall
@@ -44,14 +55,27 @@ interface GroupFieldProps {
    * locale badge.
    */
   contentLocale?: string
+  /**
+   * Per-child-field admin overrides (`components` slots, richtext `editor`),
+   * keyed by dotted, index-free schema paths relative to this group
+   * ('caption', 'faq.answer'). Threaded by `BlocksField` from the site-wide
+   * `ClientConfig.blockAdmin` registry (block children render through a
+   * synthesized group) and by `FieldRenderer` for plain schema groups, whose
+   * map arrives pre-sliced from the collection admin config. Exact-name
+   * entries apply to the child itself; deeper entries are re-sliced and
+   * threaded on (see `sliceFieldAdmin`).
+   */
+  fieldAdmin?: Record<string, FieldAdminConfig>
 }
 
 export const GroupField = ({
   field,
   defaultValue,
   path,
+  disableSorting = true,
   collectionPath,
   contentLocale,
+  fieldAdmin,
 }: GroupFieldProps) => {
   const fieldError = useFieldError(field.name)
   // Default value for a group field is a plain object: { rating: 5, comment: '...' }
@@ -91,9 +115,12 @@ export const GroupField = ({
               field={innerField}
               defaultValue={groupData[innerField.name]}
               basePath={path}
-              disableSorting={true}
+              disableSorting={disableSorting}
               collectionPath={collectionPath}
               contentLocale={contentLocale}
+              components={fieldAdmin?.[innerField.name]?.components}
+              editor={fieldAdmin?.[innerField.name]?.editor}
+              fieldAdmin={sliceFieldAdmin(fieldAdmin, innerField.name)}
             />
           )
         })}

package/src/fields/relation/relation-picker.tsx

@@ -165,6 +165,13 @@ export const RelationPicker = ({
 
     setLoading(true)
     setError(null)
+    // Item-view sort: the target collection's `itemViewSort` (boot-validated)
+    // orders the picker independently of its list view's `defaultSort`.
+    // Passed as explicit params because the list server fn gives an explicit
+    // `order` top precedence; when absent the server falls back through
+    // `defaultSort` → `created_at desc` (or `order_key asc` for orderable
+    // collections) exactly as before.
+    const itemViewSort = targetAdminConfig?.itemViewSort
     getCollectionDocuments({
       collection: targetCollectionPath,
       params: {
@@ -172,6 +179,9 @@ export const RelationPicker = ({
         page_size: PAGE_SIZE,
         query: query.length > 0 ? query : undefined,
         fields: selectFields,
+        ...(itemViewSort != null
+          ? { order: String(itemViewSort.field), desc: itemViewSort.direction === 'desc' }
+          : {}),
       },
     })
       .then((response: any) => {
@@ -202,6 +212,7 @@ export const RelationPicker = ({
     pickerColumns,
     getCollectionDocuments,
     t,
+    targetAdminConfig?.itemViewSort,
   ])
 
   const resolvedDisplayField =

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

@@ -7,6 +7,11 @@
  *                                  field has unsaved local changes
  */
 
+.label,
+:global(.byline-field-select-label) {
+  margin-bottom: 0.25rem;
+}
+
 .dirty,
 :global(.byline-field-select-dirty) {
   border-color: var(--blue-300);

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

@@ -38,10 +38,17 @@ export const SelectField = ({
   return (
     <div className={`byline-field-select ${field.name}`}>
       {field.label && (
-        <Label id={htmlId} htmlFor={htmlId} label={field.label} required={!field.optional} />
+        <Label
+          id={htmlId}
+          htmlFor={htmlId}
+          label={field.label}
+          required={!field.optional}
+          className={cx('byline-field-select-label', styles.label)}
+        />
       )}
       <Select<string>
-        size="sm"
+        size="xs"
+        variant="outlined"
         id={htmlId}
         name={field.name}
         placeholder="Select an option"

package/src/fields/sortable-item.tsx

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { type ReactNode, useState } from 'react'
+import { type CSSProperties, type ReactNode, type Ref, useState } from 'react'
 
 import { useTranslation } from '@byline/i18n/react'
 import { ChevronDownIcon, GripperVerticalIcon, useSortable } from '@byline/ui/react'
@@ -15,44 +15,60 @@ import cx from 'classnames'
 import { DraggableContextMenu } from './draggable-context-menu'
 import styles from './sortable-item.module.css'
 
-export const SortableItem = ({
-  id,
-  label,
-  children,
-  onAddBelow,
-  onRemove,
-}: {
-  id: string
+// ---------------------------------------------------------------------------
+// Item chrome for repeating-structure entries (array items, block instances):
+// a header carrying the label, the add-below/remove context menu, and a
+// collapse toggle, above the item's rendered fields.
+//
+// Two variants share the frame:
+//   - `SortableItem` — adds the dnd-kit grip (drag handle). Must render
+//     inside a `DraggableSortable` (it calls `useSortable`).
+//   - `StaticItem`  — no grip, no dnd hook. For contexts where drag is
+//     disabled but structural editing (add/remove/collapse) must remain,
+//     e.g. arrays nested inside another array's items.
+//
+// They are separate components (not a boolean prop on one component)
+// because `useSortable` is a hook — it cannot be called conditionally, and
+// it throws outside a DndContext.
+// ---------------------------------------------------------------------------
+
+interface ItemFrameProps {
   label: ReactNode
   children: ReactNode
   onAddBelow?: () => void
   onRemove?: () => void
-}) => {
-  const { t } = useTranslation('byline-admin')
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id,
-    transition: {
-      duration: 250,
-      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
-    },
-  })
+  /** Drag handle slot — rendered leading the header when provided. */
+  grip?: ReactNode
+  rootRef?: Ref<HTMLDivElement>
+  style?: CSSProperties
+  dragging?: boolean
+  /** Extra root class, e.g. the static variant marker. */
+  rootClassName?: string
+}
 
+const ItemFrame = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+  grip,
+  rootRef,
+  style,
+  dragging = false,
+  rootClassName,
+}: ItemFrameProps) => {
+  const { t } = useTranslation('byline-admin')
   const [collapsed, setCollapsed] = useState(false)
 
-  const style = {
-    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
-    transition,
-    zIndex: isDragging ? 10 : 'auto',
-  }
-
   return (
     <div
-      ref={setNodeRef}
+      ref={rootRef}
       style={style}
       className={cx(
         'byline-sortable',
         styles.root,
-        isDragging && ['byline-sortable-dragging', styles.dragging],
+        rootClassName,
+        dragging && ['byline-sortable-dragging', styles.dragging],
         collapsed && ['byline-sortable-collapsed', styles.collapsed]
       )}
     >
@@ -63,14 +79,7 @@ export const SortableItem = ({
           !collapsed && ['byline-sortable-header-expanded', styles['header-expanded']]
         )}
       >
-        <button
-          type="button"
-          className={cx('byline-sortable-grip', styles.grip)}
-          {...attributes}
-          {...listeners}
-        >
-          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
-        </button>
+        {grip}
         <div className={cx('byline-sortable-label', styles.label)}>{label}</div>
         <DraggableContextMenu onAddBelow={onAddBelow} onRemove={onRemove} />
         <button
@@ -104,3 +113,75 @@ export const SortableItem = ({
     </div>
   )
 }
+
+export const SortableItem = ({
+  id,
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  id: string
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    transition,
+    zIndex: isDragging ? 10 : 'auto',
+  }
+
+  return (
+    <ItemFrame
+      label={label}
+      onAddBelow={onAddBelow}
+      onRemove={onRemove}
+      rootRef={setNodeRef}
+      style={style}
+      dragging={isDragging}
+      grip={
+        <button
+          type="button"
+          className={cx('byline-sortable-grip', styles.grip)}
+          {...attributes}
+          {...listeners}
+        >
+          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])} />
+        </button>
+      }
+    >
+      {children}
+    </ItemFrame>
+  )
+}
+
+export const StaticItem = ({
+  label,
+  children,
+  onAddBelow,
+  onRemove,
+}: {
+  label: ReactNode
+  children: ReactNode
+  onAddBelow?: () => void
+  onRemove?: () => void
+}) => (
+  <ItemFrame
+    label={label}
+    onAddBelow={onAddBelow}
+    onRemove={onRemove}
+    rootClassName="byline-sortable-static"
+  >
+    {children}
+  </ItemFrame>
+)

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

@@ -10,4 +10,5 @@
 :global(.byline-field-text-label-row) {
   display: flex;
   align-items: center;
+  margin-bottom: 0.25rem;
 }

package/src/fields/text-area/text-area-field.module.css

@@ -10,4 +10,5 @@
 :global(.byline-field-text-area-label-row) {
   display: flex;
   align-items: center;
+  margin-bottom: 0.25rem;
 }

package/src/forms/form-context.tsx

@@ -316,7 +316,15 @@ export const FormProvider = ({
   const getPatches = useCallback(() => patchesRef.current, [])
   const appendPatch = useCallback(
     (patch: DocumentPatch) => {
-      patchesRef.current = [...patchesRef.current, patch]
+      // Snapshot the patch at append time. Structural patches (array.insert,
+      // block add) carry item objects that are ALSO placed into the form
+      // store — and `setNestedValue` mutates store nodes in place, so a
+      // later nested write inside the item (e.g. adding an array item to a
+      // block added this session) would silently rewrite the queued patch.
+      // Serialized at save time, the block insert would then already contain
+      // the array items AND the array.insert patches would re-add them —
+      // duplicating items server-side (caught by e2e/array-in-block.spec.ts).
+      patchesRef.current = [...patchesRef.current, structuredClone(patch)]
       // Mark a generic dirty flag so hasChanges() becomes true even
       // for patches that don't correspond to a specific field.set.
       dirtyFields.current.add('__patch__')

package/src/forms/form-renderer.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, ComboButton } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../fields/field-admin'
 import { FieldRenderer } from '../fields/field-renderer'
 import { useBylineFieldServices } from '../fields/field-services-context'
 import { AdminGroup } from '../presentation/group'
@@ -135,7 +136,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
@@ -488,6 +489,7 @@ const FormContent = ({
         contentLocale={contentLocale}
         components={adminConfig?.fields?.[field.name]?.components}
         editor={adminConfig?.fields?.[field.name]?.editor}
+        fieldAdmin={sliceFieldAdmin(adminConfig?.fields, field.name)}
       />
     )
   }

package/src/forms/tree-placement-widget.tsx

@@ -30,7 +30,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