npm - @byline/admin - Versions diffs - 4.0.0 → 4.2.0 - Mend

@byline/admin 4.0.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/fields/array/array-field.js +20 -8
package/dist/fields/array/array-field.module.js +5 -1
package/dist/fields/array/array-field_module.css +23 -0
package/dist/fields/blocks/blocks-field.js +33 -12
package/dist/fields/blocks/blocks-field.module.js +2 -0
package/dist/fields/blocks/blocks-field_module.css +37 -0
package/dist/fields/code/code-editor.d.ts +20 -0
package/dist/fields/code/code-editor.js +239 -0
package/dist/fields/code/code-field.d.ts +21 -0
package/dist/fields/code/code-field.js +124 -0
package/dist/fields/code/code-field.module.js +7 -0
package/dist/fields/code/code-field_module.css +58 -0
package/dist/fields/field-helpers.js +1 -0
package/dist/fields/field-renderer.js +15 -1
package/dist/fields/group/group-field.d.ts +10 -2
package/dist/fields/group/group-field.js +4 -2
package/dist/fields/relation/relation-picker.js +8 -2
package/dist/fields/select/select-field.js +4 -2
package/dist/fields/select/select-field.module.js +1 -0
package/dist/fields/select/select-field_module.css +4 -0
package/dist/fields/text/text-field_module.css +1 -0
package/dist/fields/text-area/text-area-field_module.css +1 -0
package/dist/forms/form-renderer.d.ts +1 -1
package/dist/forms/tree-placement-widget.d.ts +1 -1
package/package.json +18 -5
package/src/fields/array/array-field.module.css +30 -0
package/src/fields/array/array-field.tsx +15 -2
package/src/fields/blocks/blocks-field.module.css +53 -0
package/src/fields/blocks/blocks-field.tsx +33 -1
package/src/fields/code/code-editor.tsx +246 -0
package/src/fields/code/code-field.module.css +84 -0
package/src/fields/code/code-field.tsx +191 -0
package/src/fields/field-helpers.ts +1 -0
package/src/fields/field-renderer.tsx +19 -2
package/src/fields/field-services-types.ts +1 -1
package/src/fields/group/group-field.tsx +12 -1
package/src/fields/relation/relation-picker.tsx +11 -0
package/src/fields/select/select-field.module.css +5 -0
package/src/fields/select/select-field.tsx +9 -2
package/src/fields/text/text-field.module.css +1 -0
package/src/fields/text-area/text-area-field.module.css +1 -0
package/src/forms/form-renderer.tsx +1 -1
package/src/forms/tree-placement-widget.tsx +1 -1

package/src/fields/code/code-editor.tsx ADDED Viewed

@@ -0,0 +1,246 @@
+/**
+ * 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 { useEffect, useRef } from 'react'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { bracketMatching, HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
+import { Compartment, EditorState } from '@codemirror/state'
+import { EditorView, keymap, lineNumbers } from '@codemirror/view'
+import { tags } from '@lezer/highlight'
+// ---------------------------------------------------------------------------
+// CodeEditor — the CodeMirror 6 half of the `code` field widget.
+//
+// This module owns EVERY CodeMirror import and is loaded through
+// `React.lazy` from `code-field.tsx`, so none of it lands in the main admin
+// chunk — the consuming app's bundler splits it out and fetches it the first
+// time a code field actually renders. Keep it dependency-tight: anything
+// imported here ships in the lazy chunk.
+//
+// Theming: one theme + one highlight style, both defined entirely in terms
+// of `--byline-code-*` CSS custom properties (declared with light/dark
+// values in `code-field.module.css`). The admin theme contract is a
+// `.dark`/`.light` class on <html>, so the editor follows theme flips live
+// with zero JS involvement.
+// ---------------------------------------------------------------------------
+/**
+ * Per-language lazy loaders. Each grammar stays in its own chunk — adding a
+ * code field to a document only fetches the grammar it actually uses.
+ * Unknown languages resolve to `null` → plain text (no language extension).
+ */
+const LANGUAGE_LOADERS: Record<string, () => Promise<Extension>> = {
+  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()),
+}
+/** Common aliases → canonical loader keys. */
+const LANGUAGE_ALIASES: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  md: 'markdown',
+  py: 'python',
+  yml: 'yaml',
+}
+const resolveLanguageLoader = (language: string | undefined): (() => Promise<Extension>) | null => {
+  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)' },
+])
+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
+}
+const CodeEditor = ({
+  id,
+  value,
+  language,
+  readOnly,
+  onChange,
+  ariaInvalid,
+  ariaDescribedBy,
+}: CodeEditorProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  // Keep the latest onChange without recreating the EditorView.
+  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)
+  // Create the view once per mount. The form store lives above the tab
+  // layout, so remounts (tab switches, conditional visibility) re-seed from
+  // the store-backed `value` — same contract the other widgets follow.
+  useEffect(() => {
+    if (containerRef.current == null) return
+    const state = EditorState.create({
+      doc: initialValueRef.current,
+      extensions: [
+        lineNumbers(),
+        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
+    }
+  }, [])
+  // External value sync — only while unfocused, so we never fight the
+  // editor's own keystrokes (our own onChange echoes back as an equal doc).
+  useEffect(() => {
+    const view = viewRef.current
+    if (view == null || view.hasFocus) return
+    const current = view.state.doc.toString()
+    if (current !== value) {
+      view.dispatch({ changes: { from: 0, to: current.length, insert: value } })
+    }
+  }, [value])
+  // Language switching through a compartment: each grammar loads lazily the
+  // first time it's requested and reconfigures in place (no view recreation).
+  useEffect(() => {
+    let cancelled = false
+    const view = viewRef.current
+    if (view == null) return
+    const loader = resolveLanguageLoader(language)
+    if (loader == null) {
+      view.dispatch({ effects: languageCompartment.current.reconfigure([]) })
+      return
+    }
+    loader()
+      .then((extension) => {
+        if (!cancelled && viewRef.current != null) {
+          viewRef.current.dispatch({
+            effects: languageCompartment.current.reconfigure(extension),
+          })
+        }
+      })
+      .catch(() => {
+        // Grammar chunk failed to load — degrade to plain text.
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [language])
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: readOnlyCompartment.current.reconfigure([
+        EditorState.readOnly.of(readOnly === true),
+        EditorView.editable.of(readOnly !== true),
+      ]),
+    })
+  }, [readOnly])
+  // ARIA lives on CodeMirror's own contenteditable (which already carries
+  // role="textbox"), not on the wrapper div.
+  useEffect(() => {
+    const attributes: Record<string, string> = {}
+    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 <div ref={containerRef} id={id} className="byline-code-editor" />
+}
+export default CodeEditor

package/src/fields/code/code-field.module.css ADDED Viewed

@@ -0,0 +1,84 @@
+/**
+ * CodeField — CodeMirror-backed source-code input.
+ *
+ * Override handles:
+ *   .byline-field-code            — the wrapper div (also carries the
+ *                                   --byline-code-* theme variables)
+ *   .byline-field-code-label-row  — the label + locale-badge row
+ *   .byline-field-code-loading    — the Suspense fallback textarea
+ *   .byline-code-editor           — the CodeMirror mount point
+ *
+ * Theming: the CodeMirror theme (see code-editor.tsx) is written entirely in
+ * terms of the --byline-code-* custom properties declared here, with dark
+ * values scoped under the admin's `.dark` root class — the editor follows
+ * theme flips live with zero JS. Consumers can re-skin the editor by
+ * overriding these variables on `.byline-field-code`.
+ */
+.label-row,
+:global(.byline-field-code-label-row) {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+:global(.byline-field-code) {
+  /* Chrome */
+  --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: rgba(0, 0, 0, 0.04);
+  --byline-code-selection: rgba(59, 130, 246, 0.18);
+  --byline-code-caret: var(--canvas-950, #1c1c1e);
+  --byline-code-focus-ring: rgba(59, 130, 246, 0.6);
+  /* Syntax */
+  --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"], :global(.dark)) {
+  :global(.byline-field-code) {
+    /* Chrome */
+    --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: rgba(255, 255, 255, 0.05);
+    --byline-code-selection: rgba(96, 165, 250, 0.28);
+    --byline-code-caret: var(--canvas-100, #e6e6ea);
+    --byline-code-focus-ring: rgba(96, 165, 250, 0.55);
+    /* Syntax */
+    --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;
+  }
+}
+.loading,
+:global(.byline-field-code-loading) {
+  width: 100%;
+  resize: none;
+  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: 0.5rem;
+}

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

@@ -0,0 +1,191 @@
+/**
+ * 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, { Suspense, useCallback } from 'react'
+import type { Field, FieldComponentSlots, CodeField as FieldType } from '@byline/core'
+import { ErrorText, HelpText, Label } from '@byline/ui/react'
+import cx from 'classnames'
+import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { LocaleBadge } from '../locale-badge'
+import styles from './code-field.module.css'
+// The CodeMirror half of the widget. `React.lazy` is the bundle-splitting
+// boundary: `code-editor.tsx` owns every CodeMirror import, so the editor
+// (and its per-language grammars) stays out of the main admin chunk and is
+// fetched the first time a code field actually renders.
+const CodeEditor = React.lazy(() => import('./code-editor'))
+/**
+ * Resolve the form-store path of a sibling field (same group/block/array
+ * item scope). `content[0].code` + `language` → `content[0].language`;
+ * a top-level `code` + `language` → `language`.
+ */
+const siblingFieldPath = (fieldPath: string, siblingName: string): string => {
+  const lastDot = fieldPath.lastIndexOf('.')
+  return lastDot === -1 ? siblingName : `${fieldPath.slice(0, lastDot + 1)}${siblingName}`
+}
+export 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
+}) => {
+  const fieldPath = path ?? field.name
+  const fieldError = useFieldError(fieldPath)
+  const fieldValue = useFieldValue<string | undefined>(fieldPath)
+  const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
+  const htmlId = id ?? fieldPath
+  // Effective highlight language: a sibling `languageField` selection (e.g.
+  // a `select` next to the code field) wins over the schema's static
+  // `language` hint. The hook subscribes to the sibling path, so switching
+  // the select re-highlights live. When no `languageField` is declared we
+  // subscribe to our own path — a stable no-op (hooks must run
+  // unconditionally).
+  const siblingPath = field.languageField
+    ? siblingFieldPath(fieldPath, field.languageField)
+    : fieldPath
+  const siblingLanguage = useFieldValue<string | undefined>(siblingPath)
+  const effectiveLanguage = (field.languageField ? siblingLanguage : undefined) || field.language
+  const handleChange = useCallback(
+    (value: string) => {
+      if (onChange) {
+        onChange(value)
+      }
+    },
+    [onChange]
+  )
+  // Custom component slots (from admin config)
+  const slots = components
+  const CustomLabel = slots?.Label
+  const CustomHelpText = slots?.HelpText
+  const CustomField = slots?.Field
+  const BeforeField = slots?.beforeField
+  const AfterField = slots?.afterField
+  // Shared props available to every slot component
+  const slotBaseProps = {
+    field: field as Field,
+    path: fieldPath,
+    value: incomingValue,
+    error: fieldError,
+    id: htmlId,
+  }
+  const showBadge = !!locale && !!field.label
+  const hasCustomLabel = !!CustomLabel
+  const labelRowClass = cx('byline-field-code-label-row', styles['label-row'])
+  // ── Label rendering ──────────────────────────────────────────
+  const renderLabel = () => {
+    if (hasCustomLabel) {
+      return (
+        <div className={labelRowClass}>
+          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional} />
+          {showBadge && <LocaleBadge locale={locale!} />}
+        </div>
+      )
+    }
+    if (field.label) {
+      return (
+        <div className={labelRowClass}>
+          <Label
+            id={`${htmlId}-label`}
+            htmlFor={htmlId}
+            label={field.label}
+            required={!field.optional}
+          />
+          {showBadge && <LocaleBadge locale={locale!} />}
+        </div>
+      )
+    }
+    return null
+  }
+  // ── Field input rendering ────────────────────────────────────
+  const renderInput = () => {
+    if (CustomField) {
+      return (
+        <CustomField
+          {...slotBaseProps}
+          onChange={handleChange}
+          defaultValue={defaultValue}
+          placeholder={field.placeholder}
+        />
+      )
+    }
+    return (
+      <Suspense
+        fallback={
+          // Read-only monospace textarea: keeps the layout stable and the
+          // content visible while the editor chunk loads.
+          <textarea
+            className={cx('byline-field-code-loading', styles.loading)}
+            readOnly
+            value={incomingValue}
+            rows={6}
+            aria-label={field.label}
+          />
+        }
+      >
+        <CodeEditor
+          id={htmlId}
+          value={incomingValue}
+          language={effectiveLanguage}
+          onChange={handleChange}
+          readOnly={field.readOnly === true}
+          ariaInvalid={fieldError != null}
+          ariaDescribedBy={
+            fieldError != null
+              ? `error-for-${htmlId}`
+              : field.helpText
+                ? `help-for-${htmlId}`
+                : undefined
+          }
+        />
+      </Suspense>
+    )
+  }
+  return (
+    <div className={`byline-field-code ${field.name}`}>
+      {renderLabel()}
+      {BeforeField && <BeforeField {...slotBaseProps} />}
+      {renderInput()}
+      {AfterField && <AfterField {...slotBaseProps} />}
+      {fieldError != null && <ErrorText id={`error-for-${htmlId}`} text={fieldError} />}
+      {CustomHelpText ? (
+        <CustomHelpText {...slotBaseProps} helpText={field.helpText} />
+      ) : (
+        fieldError == null &&
+        field.helpText && <HelpText id={`help-for-${htmlId}`} text={field.helpText} />
+      )}
+    </div>
+  )
+}

package/src/fields/field-helpers.ts CHANGED Viewed

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

package/src/fields/field-renderer.tsx CHANGED Viewed

@@ -21,6 +21,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'
@@ -140,6 +141,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
@@ -307,9 +320,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -8,7 +8,7 @@
 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'
@@ -44,6 +44,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 const GroupField = ({
@@ -52,6 +60,7 @@ export const GroupField = ({
   path,
   collectionPath,
   contentLocale,
+  fieldAdmin,
 }: GroupFieldProps) => {
   const fieldError = useFieldError(field.name)
   // Default value for a group field is a plain object: { rating: 5, comment: '...' }
@@ -94,6 +103,8 @@ export const GroupField = ({
               disableSorting={true}
               collectionPath={collectionPath}
               contentLocale={contentLocale}
+              components={fieldAdmin?.[innerField.name]?.components}
+              editor={fieldAdmin?.[innerField.name]?.editor}
             />
           )
         })}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"