@byline/admin 4.1.0 → 4.3.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -149,32 +149,45 @@
     "src/"
   ],
   "dependencies": {
-    "@tanstack/react-form-start": "^1.33.0",
+    "@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.2",
     "classnames": "^2.5.1",
     "jose": "^6.2.3",
-    "react-diff-viewer-continued": "^4.2.2",
+    "react-diff-viewer-continued": "^4.4.0",
     "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.3.0",
+    "@byline/auth": "4.3.0",
+    "@byline/i18n": "4.3.0",
+    "@byline/ui": "4.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.2",
+    "@biomejs/biome": "2.5.4",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^0.23.2",
-    "@types/node": "^26.1.0",
+    "@types/node": "^26.1.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rimraf": "^6.1.3",
-    "tsx": "^4.23.0",
+    "tsx": "^4.23.1",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vitest": "^4.1.10"

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

@@ -8,20 +8,22 @@
 
 import { useEffect, useState } from 'react'
 
-import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
+import type { ArrayField as ArrayFieldType, Field, FieldAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { DraggableSortable, IconButton, moveItem, PlusIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { defaultScalarForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
-import { SortableItem } from '../../fields/sortable-item'
+import { SortableItem, StaticItem } from '../../fields/sortable-item'
 import { useFormContext } from '../../forms/form-context'
 import styles from './array-field.module.css'
 
 // ---------------------------------------------------------------------------
-// ArrayField — renders `type: 'array'` fields. Children are homogeneous:
-// either single value fields or a single group definition. Supports D&D.
+// ArrayField — renders `type: 'array'` fields. Each item renders every child
+// field declared in the array's `fields` (value fields and/or groups, in any
+// combination). Supports D&D.
 // ---------------------------------------------------------------------------
 
 export const ArrayField = ({
@@ -31,6 +33,7 @@ export const ArrayField = ({
   disableSorting = false,
   collectionPath,
   contentLocale,
+  fieldAdmin,
 }: {
   field: ArrayFieldType
   defaultValue: any
@@ -49,6 +52,16 @@ export const ArrayField = ({
    * 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>
 }) => {
   const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext()
   const { t } = useTranslation('byline-admin')
@@ -207,8 +220,11 @@ export const ArrayField = ({
       const initial = item[childField.name]
 
       if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
-        // Group child — render its inner fields with the group's sub-object
+        // Group child — render its inner fields with the group's sub-object.
+        // fieldAdmin slices one level per structural hop: the group's
+        // descendant map first, then each inner field's own slice.
         const groupData = initial && typeof initial === 'object' ? initial : {}
+        const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name)
         return (
           <div
             key={childField.name}
@@ -228,6 +244,9 @@ export const ArrayField = ({
                 disableSorting={true}
                 collectionPath={collectionPath}
                 contentLocale={contentLocale}
+                components={groupAdmin?.[innerField.name]?.components}
+                editor={groupAdmin?.[innerField.name]?.editor}
+                fieldAdmin={sliceFieldAdmin(groupAdmin, innerField.name)}
               />
             ))}
           </div>
@@ -243,19 +262,34 @@ export const ArrayField = ({
           disableSorting={true}
           collectionPath={collectionPath}
           contentLocale={contentLocale}
+          components={fieldAdmin?.[childField.name]?.components}
+          editor={fieldAdmin?.[childField.name]?.editor}
+          fieldAdmin={sliceFieldAdmin(fieldAdmin, childField.name)}
         />
       )
     })
 
-    const label = field.label ?? field.name
+    // Per-item label: the array label plus a 1-based position, so items
+    // read "Questions 1", "Questions 2" rather than all repeating the bare
+    // array label.
+    const itemLabel = `${field.label ?? field.name} ${index + 1}`
 
+    // `disableSorting` removes only the drag affordance. Structural editing
+    // (add-below / remove / collapse) is always available — StaticItem is
+    // the grip-less sibling of SortableItem (see sortable-item.tsx for why
+    // it is a separate component rather than a prop).
     if (disableSorting) {
       return (
-        <div key={itemWrapper.id} className={cx('byline-field-array-card', styles.card)}>
+        <StaticItem
+          key={itemWrapper.id}
+          label={itemLabel}
+          onAddBelow={() => handleInsertBelow(index)}
+          onRemove={() => handleRemoveItem(index)}
+        >
           <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
             {innerBody}
           </div>
-        </div>
+        </StaticItem>
       )
     }
 
@@ -263,7 +297,7 @@ export const ArrayField = ({
       <SortableItem
         key={itemWrapper.id}
         id={itemWrapper.id}
-        label={label}
+        label={itemLabel}
         onAddBelow={() => handleInsertBelow(index)}
         onRemove={() => handleRemoveItem(index)}
       >
@@ -274,14 +308,43 @@ export const ArrayField = ({
     )
   }
 
+  // The add-row renders in both branches — structural editing does not
+  // depend on sortability.
+  const addRow = (
+    <div className={cx('byline-field-array-add-row', styles['add-row'])}>
+      <IconButton
+        onClick={() => {
+          void handleAddItem()
+        }}
+        aria-label={t('fields.array.addItemAriaLabel')}
+      >
+        <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}
+        onClick={() => {
+          void handleAddItem()
+        }}
+        className={cx('byline-field-array-add-label', styles['add-label'])}
+      >
+        {t('fields.array.addItem')}
+      </button>
+    </div>
+  )
+
   return (
     <div className={`byline-field-array ${field.name}`}>
-      {!disableSorting && field.label && (
+      {field.label && (
         <h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>
       )}
       {disableSorting ? (
         <div className={cx('byline-field-array-stack', styles.stack)}>
           {items.map((item, index) => renderItem(item, index))}
+          {addRow}
         </div>
       ) : (
         <DraggableSortable
@@ -290,16 +353,7 @@ export const ArrayField = ({
           className={cx('byline-field-array-stack', styles.stack)}
         >
           {items.map((item, index) => renderItem(item, index))}
-          <span>
-            <IconButton
-              onClick={() => {
-                void handleAddItem()
-              }}
-              aria-label={t('fields.array.addItemAriaLabel')}
-            >
-              <PlusIcon />
-            </IconButton>
-          </span>
+          {addRow}
         </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 ?? ''
   )
@@ -234,7 +249,13 @@ export const BlocksField = ({
         }
         defaultValue={fieldData}
         path={arrayElementPath}
+        // Arrays directly inside a block are fully sortable: each
+        // DraggableSortable is an independent DndContext and drag listeners
+        // are grip-scoped, so the inner array's drags can't leak into the
+        // block-level context (and vice versa).
+        disableSorting={false}
         contentLocale={contentLocale}
+        fieldAdmin={blockAdminByType.get(item._type)?.fields}
       />
     )
 
@@ -270,9 +291,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 +320,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')}