@byline/admin 6.8.0 → 6.9.0

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import { Card, CloseIcon, DraggableSortable, ErrorText, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
+import { Card, CloseIcon, DraggableSortable, ErrorText, IconButton, Modal, PlusIcon, WarningIcon, moveItem } from "@byline/ui/react";
 import clsx from "clsx";
 import { defaultScalarForField } from "../field-helpers.js";
 import { GroupField } from "../group/group-field.js";
@@ -11,10 +11,12 @@ import { useFieldError, useFormContext } from "../../forms/form-context.js";
 import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { hasExistingIdTargets } from "../../forms/nested-path.js";
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from "../../forms/repeating-items.js";
+import { useUnavailableBlocks } from "../../forms/unavailable-blocks.js";
 import blocks_field_module from "./blocks-field.module.js";
 const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
     const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } = useFormContext();
     const { t } = useTranslation('byline-admin');
+    const unavailableBlocks = useUnavailableBlocks(path);
     const fieldError = useFieldError(path);
     const htmlId = useScopedDomId(path);
     const [items, setItems] = useState([]);
@@ -170,7 +172,35 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 onDragEnd: handleDragEnd,
                 className: clsx('byline-field-blocks-stack', blocks_field_module.stack),
                 children: [
-                    items.map((item, index)=>renderItem(item, index)),
+                    Array.from({
+                        length: items.length + 1
+                    }, (_, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                unavailableBlocks.map((issue, removedBefore)=>Math.min(issue.storedIndex - removedBefore, items.length) === index ? /*#__PURE__*/ jsxs("div", {
+                                        role: "note",
+                                        className: clsx('byline-field-blocks-unavailable', blocks_field_module.unavailable),
+                                        children: [
+                                            /*#__PURE__*/ jsx(WarningIcon, {
+                                                width: "24px",
+                                                height: "24px"
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("strong", {
+                                                        children: t('fields.blocks.unavailableTitle', {
+                                                            blockType: issue.blockType
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        children: t('fields.blocks.unavailableBody')
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }, `${issue.storedIndex}-${issue.blockType}`) : null),
+                                index < items.length && renderItem(items[index], index)
+                            ]
+                        }, items[index]?.id ?? 'end')),
                     /*#__PURE__*/ jsxs("div", {
                         className: clsx('byline-field-blocks-add-row', blocks_field_module["add-row"]),
                         children: [

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

@@ -2,6 +2,7 @@ import "./blocks-field_module.css";
 const blocks_field_module = {
     title: "title-lxXfG6",
     stack: "stack-Xxa89J",
+    unavailable: "unavailable-B9h_EU",
     "add-row": "add-row-gEqjM_",
     addRow: "add-row-gEqjM_",
     "add-label": "add-label-jiOURu",

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

@@ -10,6 +10,25 @@
   display: flex;
 }
 
+:is(.unavailable-B9h_EU, .byline-field-blocks-unavailable) {
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  border: 1px solid var(--stroke-warning);
+  border-radius: var(--border-radius-md);
+  background-color: oklch(from var(--fill-warning-weak) l c h / calc(alpha * .5));
+  color: var(--foreground);
+  display: flex;
+}
+
+:is(.unavailable-B9h_EU > :first-child, .byline-field-blocks-unavailable > :first-child) {
+  flex-shrink: 0;
+}
+
+:is(.unavailable-B9h_EU p, .byline-field-blocks-unavailable p) {
+  margin: var(--spacing-4) 0 0;
+}
+
 :is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
   color: var(--muted);
   align-items: center;

package/dist/forms/form-page-chrome.d.ts

@@ -14,7 +14,7 @@
  * visible at its call site.
  */
 import type { ReactNode, RefObject } from 'react';
-import type { SlugifierFn, StructuralMutationReceipt, WorkflowStatus } from '@byline/core';
+import type { SlugifierFn, StructuralMutationReceipt, UnavailableBlock, WorkflowStatus } from '@byline/core';
 import { type DocumentActionsLocaleOption } from './document-actions.js';
 import { type UseScheduledPublicationReturn } from './scheduled-publication-control.js';
 import type { PublishedVersionInfo } from './form-renderer.js';
@@ -78,8 +78,9 @@ export interface FormConcurrencyNoticesProps {
     onDiscardRequested: () => void;
     scheduling: UseScheduledPublicationReturn;
     restoreWarnings?: string[];
+    unavailableBlocks?: UnavailableBlock[];
 }
-export declare const FormConcurrencyNotices: ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings, }: FormConcurrencyNoticesProps) => ReactNode;
+export declare const FormConcurrencyNotices: ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings, unavailableBlocks, }: FormConcurrencyNoticesProps) => ReactNode;
 export interface FormSidebarWidgetsProps {
     /** Mutations blocked or a discard in flight. */
     disabled: boolean;

package/dist/forms/form-page-chrome.js

@@ -132,7 +132,7 @@ const FormStatusBar = ({ disabled, initialData, workflowStatuses, publishedVersi
         ]
     });
 };
-const FormConcurrencyNotices = ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings })=>{
+const FormConcurrencyNotices = ({ disabled, mutationIssue, scheduledPublicationsNeedReconfirmation, scheduledPublicationsHref, warningRef, discarding, reloadFailed, onDiscardRequested, scheduling, restoreWarnings, unavailableBlocks })=>{
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -189,6 +189,18 @@ const FormConcurrencyNotices = ({ disabled, mutationIssue, scheduledPublications
                 onCancel: scheduling.cancel
             }),
             scheduling.modal,
+            unavailableBlocks && unavailableBlocks.length > 0 && /*#__PURE__*/ jsx(Alert, {
+                className: "m-0 mt-4",
+                intent: "warning",
+                icon: true,
+                close: false,
+                title: t('forms.unavailableBlocks.title'),
+                children: /*#__PURE__*/ jsx("p", {
+                    children: t('forms.unavailableBlocks.body', {
+                        count: unavailableBlocks.length
+                    })
+                })
+            }),
             restoreWarnings && restoreWarnings.length > 0 && /*#__PURE__*/ jsxs(Alert, {
                 className: "m-0 mt-4",
                 intent: "warning",

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 import { type ReactNode } from 'react';
-import type { AdminResourceConfig, Field, WorkflowStatus } from '@byline/core';
+import type { AdminResourceConfig, Field, UnavailableBlock, WorkflowStatus } from '@byline/core';
 import { type ScheduledPublicationInfo, type SchedulePublicationInput } from './scheduled-publication-control.js';
 import { type SystemFieldsSubmitPayload } from './use-form-submission.js';
 import type { DocumentActionsLocaleOption } from './document-actions.js';
@@ -142,6 +142,7 @@ export interface FormRendererProps {
      * them with the new shape.
      */
     restoreWarnings?: string[];
+    unavailableBlocks?: UnavailableBlock[];
     /**
      * Default content locale used when no `initialLocale` is supplied and as the
      * fallback inside `PathWidget`. Hosts typically pass their app-wide

package/dist/forms/form-renderer.js

@@ -13,9 +13,10 @@ import form_renderer_module from "./form-renderer.module.js";
 import { useNavigationGuardAdapter } from "./navigation-guard.js";
 import { useScheduledPublication } from "./scheduled-publication-control.js";
 import { computeStatusTransitions } from "./status-transitions.js";
+import { UnavailableBlocksProvider } from "./unavailable-blocks.js";
 import { useDocumentReloadRecovery } from "./use-document-reload-recovery.js";
 import { useFormSubmission } from "./use-form-submission.js";
-const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRevision, onMutationError, onTreeMutationCommitted, scheduledPublicationsNeedReconfirmation = false, scheduledPublicationsHref, onReloadDocument, fields, onSubmit, onCancel, onStatusChange, onUnpublish, scheduledPublication, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, showPath = true, heading, advertiseLocales, tree, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
+const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRevision, onMutationError, onTreeMutationCommitted, scheduledPublicationsNeedReconfirmation = false, scheduledPublicationsHref, onReloadDocument, fields, onSubmit, onCancel, onStatusChange, onUnpublish, scheduledPublication, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, showPath = true, heading, advertiseLocales, tree, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, unavailableBlocks, _activeTabBySet, _onTabChange })=>{
     const { hasChanges: hasChangesFn, subscribeMeta } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const [hasChanges, setHasChanges] = useState(hasChangesFn());
@@ -177,7 +178,8 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                             reloadFailed: reloadFailed,
                             onDiscardRequested: requestDiscard,
                             scheduling: scheduling,
-                            restoreWarnings: restoreWarnings
+                            restoreWarnings: restoreWarnings,
+                            unavailableBlocks: unavailableBlocks
                         }),
                         /*#__PURE__*/ jsx(FormLayout, {
                             fields: fields,
@@ -233,20 +235,24 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
 const FormRenderer = (props)=>{
     const { mode, initialData, initialLocale, collectionPath } = props;
     const savedTabsRef = useRef({});
-    return /*#__PURE__*/ jsx(FormProvider, {
-        initialData: initialData,
-        documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : null,
-        collectionPath: collectionPath ?? null,
-        children: /*#__PURE__*/ jsx(FormContent, {
-            ...props,
-            _activeTabBySet: savedTabsRef.current,
-            _onTabChange: (tabSetName, tabName)=>{
-                savedTabsRef.current = {
-                    ...savedTabsRef.current,
-                    [tabSetName]: tabName
-                };
-            }
-        })
-    }, `${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`);
+    return /*#__PURE__*/ jsx(UnavailableBlocksProvider, {
+        issues: props.unavailableBlocks,
+        fields: initialData?.fields ?? initialData ?? {},
+        children: /*#__PURE__*/ jsx(FormProvider, {
+            initialData: initialData,
+            documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : null,
+            collectionPath: collectionPath ?? null,
+            children: /*#__PURE__*/ jsx(FormContent, {
+                ...props,
+                _activeTabBySet: savedTabsRef.current,
+                _onTabChange: (tabSetName, tabName)=>{
+                    savedTabsRef.current = {
+                        ...savedTabsRef.current,
+                        [tabSetName]: tabName
+                    };
+                }
+            })
+        }, `${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`)
+    });
 };
 export { FormRenderer };

package/dist/forms/unavailable-blocks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 type { ReactNode } from 'react';
+import { type UnavailableBlock } from '@byline/core';
+export declare function UnavailableBlocksProvider({ issues, fields, children, }: {
+    issues?: readonly UnavailableBlock[];
+    fields: Record<string, any>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useUnavailableBlocks(path: string): UnavailableBlock[];

package/dist/forms/unavailable-blocks.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { parseInstancePath } from "@byline/core";
+import { repeatingItemPath } from "./repeating-items.js";
+const UnavailableBlocksContext = /*#__PURE__*/ createContext([]);
+function bindUnavailableBlocks(issues, fields) {
+    return issues.map((issue)=>{
+        const parsed = parseInstancePath(issue.fieldPath);
+        if (!parsed.ok) return issue;
+        let value = fields;
+        let path = '';
+        for (const segment of parsed.segments)if ('field' === segment.kind) {
+            path = path ? `${path}.${segment.name}` : segment.name;
+            value = value?.[segment.name];
+        } else if ('index' === segment.kind) {
+            value = value?.[segment.index];
+            path = repeatingItemPath(path, value, segment.index);
+        }
+        return {
+            ...issue,
+            fieldPath: path
+        };
+    });
+}
+function UnavailableBlocksProvider({ issues, fields, children }) {
+    const bound = useMemo(()=>bindUnavailableBlocks(issues ?? [], fields), [
+        issues,
+        fields
+    ]);
+    return /*#__PURE__*/ jsx(UnavailableBlocksContext.Provider, {
+        value: bound,
+        children: children
+    });
+}
+function useUnavailableBlocks(path) {
+    return useContext(UnavailableBlocksContext).filter((issue)=>issue.fieldPath === path);
+}
+export { UnavailableBlocksProvider, useUnavailableBlocks };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "engines": {
     "node": ">=22.22.2"
   },
@@ -169,12 +169,12 @@
     "src/"
   ],
   "dependencies": {
-    "@byline/analytics": "6.8.0",
-    "@byline/analytics-agent": "6.8.0",
-    "@byline/auth": "6.8.0",
-    "@byline/core": "6.8.0",
-    "@byline/i18n": "6.8.0",
-    "@byline/ui": "6.8.0",
+    "@byline/analytics": "6.9.0",
+    "@byline/analytics-agent": "6.9.0",
+    "@byline/auth": "6.9.0",
+    "@byline/core": "6.9.0",
+    "@byline/i18n": "6.9.0",
+    "@byline/ui": "6.9.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.12",

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

@@ -5,6 +5,7 @@
  *   .byline-field-blocks                — outer wrapper
  *   .byline-field-blocks-title          — block-list label heading
  *   .byline-field-blocks-stack          — vertical stack of blocks + add row
+ *   .byline-field-blocks-unavailable    — display-only unavailable-block warning
  *   .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
@@ -33,6 +34,28 @@
   gap: var(--spacing-16);
 }
 
+.unavailable,
+:global(.byline-field-blocks-unavailable) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  border: 1px solid var(--stroke-warning);
+  border-radius: var(--border-radius-md);
+  background-color: oklch(from var(--fill-warning-weak) l c h / calc(alpha * 0.5));
+  color: var(--foreground);
+}
+
+.unavailable > :first-child,
+:global(.byline-field-blocks-unavailable) > :first-child {
+  flex-shrink: 0;
+}
+
+.unavailable p,
+:global(.byline-field-blocks-unavailable) p {
+  margin: var(--spacing-4) 0 0;
+}
+
 .add-row,
 :global(.byline-field-blocks-add-row) {
   display: flex;

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { useEffect, useMemo, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 
 import type {
   BlockAdminConfig,
@@ -25,6 +25,7 @@ import {
   Modal,
   moveItem,
   PlusIcon,
+  WarningIcon,
 } from '@byline/ui/react'
 import cx from 'clsx'
 
@@ -35,6 +36,7 @@ import { useFieldError, useFormContext } from '../../forms/form-context'
 import { useScopedDomId } from '../../forms/form-dom-scope'
 import { hasExistingIdTargets } from '../../forms/nested-path'
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from '../../forms/repeating-items'
+import { useUnavailableBlocks } from '../../forms/unavailable-blocks'
 import styles from './blocks-field.module.css'
 
 // ---------------------------------------------------------------------------
@@ -61,6 +63,7 @@ export const BlocksField = ({
   const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } =
     useFormContext()
   const { t } = useTranslation('byline-admin')
+  const unavailableBlocks = useUnavailableBlocks(path)
   const fieldError = useFieldError(path)
   const htmlId = useScopedDomId(path)
   const [items, setItems] = useState<{ id: string; data: any }[]>([])
@@ -288,7 +291,28 @@ export const BlocksField = ({
         onDragEnd={handleDragEnd}
         className={cx('byline-field-blocks-stack', styles.stack)}
       >
-        {items.map((item, index) => renderItem(item, index))}
+        {Array.from({ length: items.length + 1 }, (_, index) => (
+          <Fragment key={items[index]?.id ?? 'end'}>
+            {unavailableBlocks.map((issue, removedBefore) =>
+              Math.min(issue.storedIndex - removedBefore, items.length) === index ? (
+                <div
+                  key={`${issue.storedIndex}-${issue.blockType}`}
+                  role="note"
+                  className={cx('byline-field-blocks-unavailable', styles.unavailable)}
+                >
+                  <WarningIcon width="24px" height="24px" />
+                  <div>
+                    <strong>
+                      {t('fields.blocks.unavailableTitle', { blockType: issue.blockType })}
+                    </strong>
+                    <p>{t('fields.blocks.unavailableBody')}</p>
+                  </div>
+                </div>
+              ) : null
+            )}
+            {index < items.length && renderItem(items[index]!, index)}
+          </Fragment>
+        ))}
         <div className={cx('byline-field-blocks-add-row', styles['add-row'])}>
           <IconButton
             onClick={() => {

package/src/forms/form-page-chrome.tsx

@@ -19,7 +19,12 @@
 
 import type { ReactNode, RefObject } from 'react'
 
-import type { SlugifierFn, StructuralMutationReceipt, WorkflowStatus } from '@byline/core'
+import type {
+  SlugifierFn,
+  StructuralMutationReceipt,
+  UnavailableBlock,
+  WorkflowStatus,
+} from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, ComboButton, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'clsx'
@@ -263,6 +268,7 @@ export interface FormConcurrencyNoticesProps {
   onDiscardRequested: () => void
   scheduling: UseScheduledPublicationReturn
   restoreWarnings?: string[]
+  unavailableBlocks?: UnavailableBlock[]
 }
 
 export const FormConcurrencyNotices = ({
@@ -276,6 +282,7 @@ export const FormConcurrencyNotices = ({
   onDiscardRequested,
   scheduling,
   restoreWarnings,
+  unavailableBlocks,
 }: FormConcurrencyNoticesProps): ReactNode => {
   const { t } = useTranslation('byline-admin')
 
@@ -329,6 +336,17 @@ export const FormConcurrencyNotices = ({
         onCancel={scheduling.cancel}
       />
       {scheduling.modal}
+      {unavailableBlocks && unavailableBlocks.length > 0 && (
+        <Alert
+          className="m-0 mt-4"
+          intent="warning"
+          icon={true}
+          close={false}
+          title={t('forms.unavailableBlocks.title')}
+        >
+          <p>{t('forms.unavailableBlocks.body', { count: unavailableBlocks.length })}</p>
+        </Alert>
+      )}
       {restoreWarnings && restoreWarnings.length > 0 && (
         <Alert
           className="m-0 mt-4"

package/src/forms/form-renderer-capabilities.test.tsx

@@ -131,7 +131,7 @@ describe('FormRenderer capabilities', () => {
   })
 
   it('forwards adminConfig.lockPath to the path widget', () => {
-    render({ ...baseProps, adminConfig: { slug: 'pages', lockPath: true } })
+    render({ ...baseProps, adminConfig: { path: 'pages', lockPath: true } })
 
     const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
     expect(input?.readOnly).toBe(true)
@@ -139,7 +139,7 @@ describe('FormRenderer capabilities', () => {
   })
 
   it('leaves the path widget editable when no lockPath is declared', () => {
-    render({ ...baseProps, adminConfig: { slug: 'pages' } })
+    render({ ...baseProps, adminConfig: { path: 'pages' } })
 
     const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
     expect(input?.readOnly).toBe(false)
@@ -156,7 +156,7 @@ describe('FormRenderer capabilities', () => {
       fields: [{ name: 'ref', label: 'Ref', type: 'counter' as const }],
       useAsPath: 'ref',
       initialData: { id: 'doc-1', path: 'about-us', fields: { ref: 448 } },
-      adminConfig: { slug: 'pages' },
+      adminConfig: { path: 'pages' },
     })
 
     const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
@@ -173,7 +173,7 @@ describe('FormRenderer capabilities', () => {
       mode: 'create' as const,
       useAsPath: undefined,
       initialData: { fields: {} },
-      adminConfig: { slug: 'pages', lockPath: true },
+      adminConfig: { path: 'pages', lockPath: true },
     })
 
     expect(container.querySelector('.byline-form-path')).not.toBeNull()
@@ -188,14 +188,14 @@ describe('FormRenderer capabilities', () => {
       mode: 'create' as const,
       useAsPath: undefined,
       initialData: { fields: {} },
-      adminConfig: { slug: 'pages' },
+      adminConfig: { path: 'pages' },
     })
 
     expect(container.querySelector('.byline-form-path')).toBeNull()
   })
 
   it('lets showPath: false override lockPath', () => {
-    render({ ...baseProps, showPath: false, adminConfig: { slug: 'pages', lockPath: true } })
+    render({ ...baseProps, showPath: false, adminConfig: { path: 'pages', lockPath: true } })
 
     expect(container.querySelector('.byline-form-path')).toBeNull()
   })

package/src/forms/form-renderer.tsx

@@ -10,7 +10,7 @@
 
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import type { AdminResourceConfig, Field, WorkflowStatus } from '@byline/core'
+import type { AdminResourceConfig, Field, UnavailableBlock, WorkflowStatus } from '@byline/core'
 import { getAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import cx from 'clsx'
@@ -33,6 +33,7 @@ import {
   useScheduledPublication,
 } from './scheduled-publication-control'
 import { computeStatusTransitions } from './status-transitions'
+import { UnavailableBlocksProvider } from './unavailable-blocks'
 import { useDocumentReloadRecovery } from './use-document-reload-recovery'
 import { type SystemFieldsSubmitPayload, useFormSubmission } from './use-form-submission'
 import type { DocumentActionsLocaleOption } from './document-actions'
@@ -168,6 +169,7 @@ export interface FormRendererProps {
    * them with the new shape.
    */
   restoreWarnings?: string[]
+  unavailableBlocks?: UnavailableBlock[]
   /**
    * Default content locale used when no `initialLocale` is supplied and as the
    * fallback inside `PathWidget`. Hosts typically pass their app-wide
@@ -225,6 +227,7 @@ const FormContent = ({
   defaultLocale = 'en',
   useNavigationGuard: useNavigationGuardProp,
   restoreWarnings,
+  unavailableBlocks,
   _activeTabBySet,
   _onTabChange,
 }: FormRendererProps & {
@@ -455,6 +458,7 @@ const FormContent = ({
             onDiscardRequested={requestDiscard}
             scheduling={scheduling}
             restoreWarnings={restoreWarnings}
+            unavailableBlocks={unavailableBlocks}
           />
           <FormLayout
             fields={fields}
@@ -516,23 +520,28 @@ export const FormRenderer = (props: FormRendererProps) => {
   const savedTabsRef = useRef<Record<string, string>>({})
 
   return (
-    <FormProvider
-      key={`${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`}
-      initialData={initialData}
-      documentId={mode === 'edit' && typeof initialData?.id === 'string' ? initialData.id : null}
-      collectionPath={collectionPath ?? null}
+    <UnavailableBlocksProvider
+      issues={props.unavailableBlocks}
+      fields={initialData?.fields ?? initialData ?? {}}
     >
-      {/* Forwarded wholesale. An enumerated prop list here silently dropped
+      <FormProvider
+        key={`${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`}
+        initialData={initialData}
+        documentId={mode === 'edit' && typeof initialData?.id === 'string' ? initialData.id : null}
+        collectionPath={collectionPath ?? null}
+      >
+        {/* Forwarded wholesale. An enumerated prop list here silently dropped
           every prop added to FormRendererProps but not copied down — which is
           how the scheduled-publication handlers reached FormContent as
           `undefined` and the control never rendered. */}
-      <FormContent
-        {...props}
-        _activeTabBySet={savedTabsRef.current}
-        _onTabChange={(tabSetName, tabName) => {
-          savedTabsRef.current = { ...savedTabsRef.current, [tabSetName]: tabName }
-        }}
-      />
-    </FormProvider>
+        <FormContent
+          {...props}
+          _activeTabBySet={savedTabsRef.current}
+          _onTabChange={(tabSetName, tabName) => {
+            savedTabsRef.current = { ...savedTabsRef.current, [tabSetName]: tabName }
+          }}
+        />
+      </FormProvider>
+    </UnavailableBlocksProvider>
   )
 }

package/src/forms/unavailable-blocks.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * 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 { act } from 'react'
+
+import { type BlocksField as BlocksFieldType, defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+
+import { BlocksField } from '../fields/blocks/blocks-field'
+import { FormProvider, useFormContext } from './form-context'
+import { FormConcurrencyNotices } from './form-page-chrome'
+import { UnavailableBlocksProvider, useUnavailableBlocks } from './unavailable-blocks'
+
+vi.mock('../fields/group/group-field', () => ({
+  GroupField: ({ path }: { path: string }) => {
+    const form = useFormContext()
+    return (
+      <button
+        type="button"
+        data-live={path}
+        onClick={() =>
+          form.appendPatch({ kind: 'field.set', path: `${path}.text`, value: 'edited' })
+        }
+      >
+        Edit live
+      </button>
+    )
+  },
+}))
+vi.mock('../fields/sortable-item', () => ({
+  SortableItem: ({ children }: any) => <div>{children}</div>,
+  StaticItem: ({ children }: any) => <div>{children}</div>,
+}))
+
+const field: BlocksFieldType = {
+  name: 'content',
+  type: 'blocks',
+  blocks: [{ blockType: 'live', fields: [{ name: 'text', type: 'text' }] }],
+}
+const fields = {
+  content: [
+    { _id: 'a', _type: 'live', text: 'A' },
+    { _id: 'b', _type: 'live', text: 'B' },
+  ],
+}
+const issues = [0, 2, 4].map((storedIndex) => ({
+  fieldPath: 'content',
+  storedIndex,
+  blockType: `removed-${storedIndex}`,
+}))
+let container: HTMLDivElement
+let root: ReturnType<typeof createRoot>
+let form: ReturnType<typeof useFormContext>
+function Probe() {
+  form = useFormContext()
+  return null
+}
+function render(reports = issues) {
+  act(() =>
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <UnavailableBlocksProvider issues={reports} fields={fields}>
+          <FormProvider initialData={{ fields }}>
+            <Probe />
+            <FormConcurrencyNotices
+              disabled={false}
+              warningRef={{ current: null }}
+              discarding={false}
+              reloadFailed={false}
+              onDiscardRequested={() => {}}
+              scheduling={{ modal: null, state: { isExceptional: false }, timeZone: 'UTC' } as any}
+              unavailableBlocks={reports}
+            />
+            <BlocksField field={field} path="content" defaultValue={fields.content} />
+          </FormProvider>
+        </UnavailableBlocksProvider>
+      </I18nProvider>
+    )
+  )
+}
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  defineAdminConfig({
+    collections: [],
+    i18n: {
+      admin: { defaultLocale: 'en', locales: ['en'] },
+      content: { defaultLocale: 'en', locales: ['en'] },
+    },
+  })
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+it('interleaves display-only cards, keeps live patch addressing, and clears notices after reload', async () => {
+  render()
+  expect(container.textContent).toContain('This document contains 3 blocks')
+  const entries = [...container.querySelectorAll('[role="note"], [data-live]')]
+  expect(
+    entries.map(
+      (entry) => entry.getAttribute('data-live') ?? entry.querySelector('strong')?.textContent
+    )
+  ).toEqual([
+    'Unavailable block: removed-0',
+    'content[id=a]',
+    'Unavailable block: removed-2',
+    'content[id=b]',
+    'Unavailable block: removed-4',
+  ])
+  expect(form.getFieldValues()).toEqual(fields)
+  await act(async () => (container.querySelectorAll('[data-live]')[1] as HTMLButtonElement).click())
+  expect(form.getPatches()).toEqual([
+    { kind: 'field.set', path: 'content[id=b].text', value: 'edited' },
+  ])
+  render([])
+  expect(container.querySelector('[role="note"]')).toBeNull()
+  expect(container.textContent).not.toContain('This document contains')
+})
+it('binds nested paths to surviving parent identities', () => {
+  function NestedProbe() {
+    const issues = useUnavailableBlocks('outer[id=parent].body[id=second].content')
+    return <span>{issues.map((issue) => issue.blockType).join(',')}</span>
+  }
+  act(() =>
+    root.render(
+      <UnavailableBlocksProvider
+        issues={[{ fieldPath: 'outer[0].body[1].content', storedIndex: 0, blockType: 'removed' }]}
+        fields={{ outer: [{ _id: 'parent', body: [{ _id: 'first' }, { _id: 'second' }] }] }}
+      >
+        <NestedProbe />
+      </UnavailableBlocksProvider>
+    )
+  )
+  expect(container.textContent).toBe('removed')
+})

package/src/forms/unavailable-blocks.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 type { ReactNode } from 'react'
+import { createContext, useContext, useMemo } from 'react'
+
+import { parseInstancePath, type UnavailableBlock } from '@byline/core'
+
+import { repeatingItemPath } from './repeating-items'
+
+const UnavailableBlocksContext = createContext<readonly UnavailableBlock[]>([])
+
+/** Bind numeric read paths to initial item identities, so cards follow moved parents. */
+function bindUnavailableBlocks(
+  issues: readonly UnavailableBlock[],
+  fields: Record<string, any>
+): UnavailableBlock[] {
+  return issues.map((issue) => {
+    const parsed = parseInstancePath(issue.fieldPath)
+    if (!parsed.ok) return issue
+    let value: any = fields
+    let path = ''
+    for (const segment of parsed.segments) {
+      if (segment.kind === 'field') {
+        path = path ? `${path}.${segment.name}` : segment.name
+        value = value?.[segment.name]
+      } else if (segment.kind === 'index') {
+        value = value?.[segment.index]
+        path = repeatingItemPath(path, value, segment.index)
+      }
+    }
+    return { ...issue, fieldPath: path }
+  })
+}
+
+export function UnavailableBlocksProvider({
+  issues,
+  fields,
+  children,
+}: {
+  issues?: readonly UnavailableBlock[]
+  fields: Record<string, any>
+  children: ReactNode
+}) {
+  const bound = useMemo(() => bindUnavailableBlocks(issues ?? [], fields), [issues, fields])
+  return (
+    <UnavailableBlocksContext.Provider value={bound}>{children}</UnavailableBlocksContext.Provider>
+  )
+}
+
+export function useUnavailableBlocks(path: string) {
+  return useContext(UnavailableBlocksContext).filter((issue) => issue.fieldPath === path)
+}