@byline/ui 1.3.1 → 1.6.0

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
-import { ErrorText, Select } from "../../uikit.js";
+import { ErrorText, Label, Select } from "../../uikit.js";
 import select_field_module from "./select-field.module.js";
 const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
@@ -9,16 +9,24 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-select ${field.name}`,
         children: [
+            field.label && /*#__PURE__*/ jsx(Label, {
+                id: htmlId,
+                htmlFor: htmlId,
+                label: field.label,
+                required: !field.optional
+            }),
             /*#__PURE__*/ jsx(Select, {
-                size: "xs",
-                id: id ?? fieldPath,
+                size: "sm",
+                id: htmlId,
                 name: field.name,
                 placeholder: "Select an option",
                 required: !field.optional,
                 value: incomingValue,
+                ariaLabel: field.label,
                 helpText: field.helpText,
                 items: field.options.map((opt)=>({
                         value: opt.value,

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

@@ -49,6 +49,14 @@ export interface FormRendererProps {
     initialLocale?: string;
     /** Called when the user picks a different content locale. */
     onLocaleChange?: (locale: string) => void;
+    /**
+     * Schema-mismatch warnings produced by a "best-effort" reconstruction
+     * of the document (`findById({ lenient: true })`). When present, the
+     * form renders an inline Alert telling the editor that fields from a
+     * previous schema have been dropped — saving the form will overwrite
+     * them with the new shape.
+     */
+    restoreWarnings?: string[];
     /**
      * Default content locale used when no `initialLocale` is supplied and as the
      * fallback inside `PathWidget`. Hosts typically pass their app-wide
@@ -62,4 +70,4 @@ export interface FormRendererProps {
      */
     useNavigationGuard?: UseNavigationGuard;
 }
-export declare const FormRenderer: ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, }: FormRendererProps) => import("react").JSX.Element;
+export declare const FormRenderer: ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, restoreWarnings, }: FormRendererProps) => import("react").JSX.Element;

package/dist/forms/form-renderer.js

@@ -8,7 +8,7 @@ import { AdminTabs } from "../admin/tabs.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
 import { LocalDateTime } from "../fields/local-date-time.js";
 import { useBylineFieldServices } from "../services/field-services-context.js";
-import { Button, ComboButton, Modal } from "../uikit.js";
+import { Alert, Button, ComboButton, Modal } from "../uikit.js";
 import { DocumentActions } from "./document-actions.js";
 import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
 import form_renderer_module from "./form-renderer.module.js";
@@ -139,7 +139,7 @@ function computeStatusTransitions(currentStatus, workflowStatuses, nextStatus) {
         secondaryStatuses
     };
 }
-const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, _activeTabBySet, _onTabChange })=>{
+const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
     const { getFieldValues, runFieldHooks, validateForm, errors: initialErrors, hasChanges: hasChangesFn, resetHasChanges, getPatches, getSystemPath, subscribeErrors, subscribeMeta, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads } = useFormContext();
     const [errors, setErrors] = useState(initialErrors);
     const [hasChanges, setHasChanges] = useState(hasChangesFn());
@@ -450,6 +450,29 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                     })
                 ]
             }),
+            restoreWarnings && restoreWarnings.length > 0 && /*#__PURE__*/ jsxs(Alert, {
+                className: "m-0 mt-4",
+                intent: "warning",
+                icon: true,
+                close: false,
+                title: "This document was loaded with a best-effort reconstruction",
+                children: [
+                    /*#__PURE__*/ jsxs("p", {
+                        children: [
+                            "The collection schema has changed since this document was last saved, and",
+                            ' ',
+                            1 === restoreWarnings.length ? '1 field could not be restored against the current shape.' : `${restoreWarnings.length} fields could not be restored against the current shape.`,
+                            ' ',
+                            "The form below shows only the fields that match the new schema. Saving will overwrite the document with the new shape — any data that did not match will be lost. To preserve it, copy what you need before saving, or delete this document and recreate it. Errors:"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("ul", {
+                        children: restoreWarnings.map((w)=>/*#__PURE__*/ jsx("li", {
+                                children: w
+                            }, w))
+                    })
+                ]
+            }),
             /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-form-layout', form_renderer_module.layout),
                 children: [
@@ -517,7 +540,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         ]
     });
 };
-const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard })=>{
+const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, restoreWarnings })=>{
     const savedTabsRef = useRef({});
     return /*#__PURE__*/ jsx(FormProvider, {
         initialData: initialData,
@@ -543,6 +566,7 @@ const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpu
             onLocaleChange: onLocaleChange,
             defaultLocale: defaultLocale,
             useNavigationGuard: useNavigationGuard,
+            restoreWarnings: restoreWarnings,
             _activeTabBySet: savedTabsRef.current,
             _onTabChange: (tabSetName, tabName)=>{
                 savedTabsRef.current = {

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.3.1",
+  "version": "1.6.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "1.3.1",
-    "@byline/core": "1.4.0",
-    "@byline/client": "1.4.0"
+    "@byline/admin": "1.6.0",
+    "@byline/client": "1.6.0",
+    "@byline/core": "1.6.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -10,7 +10,7 @@ import type { SelectField as FieldType } from '@byline/core'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
-import { ErrorText, Select } from '../../uikit.js'
+import { ErrorText, Label, Select } from '../../uikit.js'
 import styles from './select-field.module.css'
 
 export const SelectField = ({
@@ -33,16 +33,21 @@ export const SelectField = ({
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
+  const htmlId = id ?? fieldPath
 
   return (
     <div className={`byline-field-select ${field.name}`}>
+      {field.label && (
+        <Label id={htmlId} htmlFor={htmlId} label={field.label} required={!field.optional} />
+      )}
       <Select<string>
-        size="xs"
-        id={id ?? fieldPath}
+        size="sm"
+        id={htmlId}
         name={field.name}
         placeholder="Select an option"
         required={!field.optional}
         value={incomingValue}
+        ariaLabel={field.label}
         helpText={field.helpText}
         items={field.options.map((opt) => ({ value: opt.value, label: opt.label }))}
         onValueChange={(value) => {

package/src/forms/form-renderer.tsx

@@ -26,7 +26,7 @@ import { AdminTabs } from '../admin/tabs'
 import { FieldRenderer } from '../fields/field-renderer'
 import { LocalDateTime } from '../fields/local-date-time'
 import { useBylineFieldServices } from '../services/field-services-context'
-import { Button, ComboButton, Modal } from '../uikit.js'
+import { Alert, Button, ComboButton, Modal } from '../uikit.js'
 import { DocumentActions } from './document-actions'
 import { FormProvider, useFieldValue, useFormContext } from './form-context'
 import styles from './form-renderer.module.css'
@@ -77,6 +77,14 @@ export interface FormRendererProps {
   initialLocale?: string
   /** Called when the user picks a different content locale. */
   onLocaleChange?: (locale: string) => void
+  /**
+   * Schema-mismatch warnings produced by a "best-effort" reconstruction
+   * of the document (`findById({ lenient: true })`). When present, the
+   * form renders an inline Alert telling the editor that fields from a
+   * previous schema have been dropped — saving the form will overwrite
+   * them with the new shape.
+   */
+  restoreWarnings?: string[]
   /**
    * Default content locale used when no `initialLocale` is supplied and as the
    * fallback inside `PathWidget`. Hosts typically pass their app-wide
@@ -260,6 +268,7 @@ const FormContent = ({
   onLocaleChange,
   defaultLocale = 'en',
   useNavigationGuard: useNavigationGuardProp,
+  restoreWarnings,
   _activeTabBySet,
   _onTabChange,
 }: FormRendererProps & {
@@ -677,6 +686,30 @@ const FormContent = ({
           />
         </div>
       </div>
+      {restoreWarnings && restoreWarnings.length > 0 && (
+        <Alert
+          className="m-0 mt-4"
+          intent="warning"
+          icon={true}
+          close={false}
+          title="This document was loaded with a best-effort reconstruction"
+        >
+          <p>
+            The collection schema has changed since this document was last saved, and{' '}
+            {restoreWarnings.length === 1
+              ? '1 field could not be restored against the current shape.'
+              : `${restoreWarnings.length} fields could not be restored against the current shape.`}{' '}
+            The form below shows only the fields that match the new schema. Saving will overwrite
+            the document with the new shape — any data that did not match will be lost. To preserve
+            it, copy what you need before saving, or delete this document and recreate it. Errors:
+          </p>
+          <ul>
+            {restoreWarnings.map((w) => (
+              <li key={w}>{w}</li>
+            ))}
+          </ul>
+        </Alert>
+      )}
       <div className={cx('byline-form-layout', styles.layout)}>
         <div className={cx('byline-form-content', styles.content)}>
           {layout.main.map((name) => renderItem(name))}
@@ -684,13 +717,13 @@ const FormContent = ({
         <div className={cx('byline-form-sidebar', styles.sidebar)}>
           {(useAsPath ||
             (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
-            <PathWidget
-              useAsPath={useAsPath}
-              collectionPath={collectionPath ?? ''}
-              defaultLocale={defaultLocale}
-              mode={mode}
-            />
-          )}
+              <PathWidget
+                useAsPath={useAsPath}
+                collectionPath={collectionPath ?? ''}
+                defaultLocale={defaultLocale}
+                mode={mode}
+              />
+            )}
           {(layout.sidebar ?? []).map((name) => renderItem(name))}
         </div>
       </div>
@@ -746,6 +779,7 @@ export const FormRenderer = ({
   onLocaleChange,
   defaultLocale,
   useNavigationGuard,
+  restoreWarnings,
 }: FormRendererProps) => {
   // Persists per-tab-set active tab across locale-change remounts of FormContent.
   // useRef so mutations never trigger a re-render of FormRenderer itself.
@@ -778,6 +812,7 @@ export const FormRenderer = ({
         onLocaleChange={onLocaleChange}
         defaultLocale={defaultLocale}
         useNavigationGuard={useNavigationGuard}
+        restoreWarnings={restoreWarnings}
         _activeTabBySet={savedTabsRef.current}
         _onTabChange={(tabSetName, tabName) => {
           savedTabsRef.current = { ...savedTabsRef.current, [tabSetName]: tabName }