@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/src/data_import/utils/save_entities.ts

@@ -0,0 +1,138 @@
+import { CollectionAccessor, Entity, RebaseData } from "@rebasepro/types";
+
+/** Rows written per request, and per transaction where the data source has one. */
+export const IMPORT_BATCH_SIZE = 25;
+
+/**
+ * An import failure that says where it stopped.
+ *
+ * "Error saving data / null value in column "sku" violates not-null constraint"
+ * on a ten-thousand-row import named no row, and the Retry button restarted at
+ * zero — where the rows already written now conflicted, so it could never
+ * succeed. Both halves of that are what this carries.
+ */
+export interface ImportSaveError extends Error {
+    /** Rows written and confirmed before the failure. Where a retry resumes. */
+    committed: number;
+    /** Index of the first row that was not written, 0-based. */
+    failedFrom: number;
+    /** Index after the last row of the batch that was not written. */
+    failedTo: number;
+}
+
+/** The row a bulk write takes: the values, with the chosen id as a column. */
+function toBulkRow(entity: Partial<Entity<any>>): Record<string, unknown> {
+    const values = { ...(entity.values ?? {}) } as Record<string, unknown>;
+    if (entity.id !== undefined && entity.id !== null && entity.id !== "") {
+        // Exactly what single-row `create(values, id)` puts on the wire.
+        values.id = entity.id;
+    }
+    return values;
+}
+
+function isBulkUnsupported(error: unknown): boolean {
+    if ((error as { code?: string })?.code === "BULK_UNSUPPORTED") return true;
+    const message = (error as Error)?.message ?? "";
+    return /bulk writes are not supported|does not support bulk/i.test(message);
+}
+
+function isConflict(error: unknown): boolean {
+    const status = (error as { status?: number; statusCode?: number })?.status
+        ?? (error as { statusCode?: number })?.statusCode;
+    if (status === 409) return true;
+    const code = (error as { code?: string })?.code;
+    return code === "CONFLICT" || code === "23505";
+}
+
+/**
+ * Write one batch, all-or-nothing wherever the data source can.
+ *
+ * `POST /<collection>/bulk` validates every row before the transaction opens,
+ * names a failure by row index, and takes the `upsert` flag the preview screen
+ * promises — none of which one `create` per row inside a `Promise.all` could
+ * offer, since `Promise.all` does not cancel its siblings and every request was
+ * its own transaction.
+ */
+async function writeBatch(accessor: CollectionAccessor,
+    batch: Partial<Entity<any>>[],
+    bulkUnsupported: { current: boolean },
+    written: { count: number }): Promise<void> {
+
+    if (accessor.createMany && !bulkUnsupported.current) {
+        try {
+            await accessor.createMany(batch.map(toBulkRow), { upsert: true });
+            written.count = batch.length;
+            return;
+        } catch (e) {
+            if (!isBulkUnsupported(e)) throw e;
+            // A data source without bulk writes: remember it, so the failed
+            // round trip is not paid again on every later batch.
+            bulkUnsupported.current = true;
+        }
+    }
+
+    // Sequential, not `Promise.all`: a rejected write does not cancel its
+    // siblings, so a parallel batch commits an indeterminate subset of itself
+    // and nobody can say which rows landed.
+    for (const entity of batch) {
+        try {
+            await accessor.create(entity.values ?? {}, entity.id);
+        } catch (e) {
+            // Without `/bulk` there is no upsert, so the preview's promise is
+            // honoured the only way left: a row that collided on an id the user
+            // supplied is overwritten. A row with no id had nothing to collide
+            // on, and every other failure is still a failure.
+            if (entity.id === undefined || !isConflict(e)) throw e;
+            await accessor.update(entity.id, entity.values ?? {});
+        }
+        written.count++;
+    }
+}
+
+/**
+ * Write imported entities in batches, reporting what was committed.
+ *
+ * Resumable on purpose: a failure at row 4 000 leaves rows 1–3 999 in the table
+ * whatever this does, so the only useful thing to report is where to carry on
+ * from. `offset` is that point — the Retry button passes back the `committed`
+ * count of the error it is retrying, instead of starting from zero and
+ * conflicting on every row that already exists.
+ *
+ * @throws {ImportSaveError} naming the rows that were not written.
+ */
+export async function saveImportedEntities(dataClient: RebaseData,
+    path: string,
+    data: Partial<Entity<any>>[],
+    {
+        offset = 0,
+        batchSize = IMPORT_BATCH_SIZE,
+        onBatchCommitted = () => undefined,
+        bulkUnsupported = { current: false }
+    }: {
+        offset?: number;
+        batchSize?: number;
+        onBatchCommitted?: (rowsWritten: number) => void;
+        bulkUnsupported?: { current: boolean };
+    } = {}): Promise<void> {
+
+    console.debug("Saving imported data", offset, batchSize);
+
+    const accessor = dataClient.collection(path);
+
+    for (let start = offset; start < data.length; start += batchSize) {
+        const batch = data.slice(start, start + batchSize);
+        const written = { count: 0 };
+        try {
+            await writeBatch(accessor, batch, bulkUnsupported, written);
+        } catch (e) {
+            throw Object.assign(e as Error, {
+                committed: start + written.count,
+                failedFrom: start + written.count,
+                failedTo: start + batch.length
+            }) as ImportSaveError;
+        }
+        onBatchCommitted(start + batch.length);
+    }
+
+    onBatchCommitted(data.length);
+}

package/src/data_import/utils/transforms.ts

@@ -1,10 +1,27 @@
+import { isPrototypePollutingKey, pathTraversesPrototype } from "@rebasepro/utils";
+
 /**
  * Take an object with keys of type `address.street`, `address.city` and
  * convert it to an object with nested objects like `{ address: { street: ..., city: ... } }`
+ *
+ * Keys here are the **header row of an uploaded file**, so they are attacker
+ * data. `res["__proto__"] = …` is the prototype setter rather than an own
+ * property, so a column named `__proto__.polluted` walked out of the accumulator
+ * and wrote onto `Object.prototype` for the life of the tab — and
+ * `constructor.prototype.x` threw a `TypeError` that surfaced as an unreadable
+ * file. Such a column is refused, not sanitised, the way `setIn` settled it
+ * (`docs/bug-classes.md` class 22).
+ *
  * @param flatObj
  */
 export function unflattenObject(flatObj: { [key: string]: any }) {
     return Object.keys(flatObj).reduce((nestedObj, key) => {
+        // The string form, so `toPath` rewrites `__proto__[0]` to a `__proto__`
+        // segment too — the bracket branch below writes through the same setter.
+        if (pathTraversesPrototype(key)) {
+            console.warn(`Skipping column "${key}": a header may not reach the prototype chain`);
+            return nestedObj;
+        }
         let currentObj = nestedObj;
         const keyParts = key.split(".");
         keyParts.forEach((keyPart, i) => {
@@ -37,6 +54,12 @@ export function unflattenObject(flatObj: { [key: string]: any }) {
 
 export function mapJsonParse(obj: Record<string, any>) {
     return Object.keys(obj).reduce((acc: Record<string, any>, key) => {
+        // Same header row, same setter: `acc["__proto__"] = value` replaces the
+        // accumulator's prototype instead of adding a column.
+        if (isPrototypePollutingKey(key)) {
+            console.warn(`Skipping column "${key}": a header may not reach the prototype chain`);
+            return acc;
+        }
         try {
             acc[key] = JSON.parse(obj[key]);
         } catch (e) {

package/src/editor/components/image-bubble.tsx

@@ -157,6 +157,7 @@ export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
             >
                 <TextField
                     size={"small"}
+                    aria-label={t("alt_text")}
                     placeholder={t("alt_text")}
                     value={alt}
                     onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -166,6 +167,7 @@ export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
                 />
                 <TextField
                     size={"small"}
+                    aria-label={t("title")}
                     placeholder={t("title")}
                     value={title}
                     onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

package/src/editor/selectors/link-selector.tsx

@@ -90,6 +90,7 @@ export const LinkSelector = ({
                 <TextField
                     inputRef={inputRef}
                     autoFocus={open}
+                    aria-label={t("editor_paste_or_type_link")}
                     placeholder={t("editor_paste_or_type_link")}
                     defaultValue={href}
                     size="small"

package/src/form/EntityForm.tsx

@@ -9,7 +9,7 @@ import { deepEqual as equal } from "fast-equals";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { AlignLeftIcon, useDebouncedCallback } from "@rebasepro/ui";
 import { getDefaultValuesFor } from "@rebasepro/common";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 
 import { getFormFieldKeys, resolveFormLayout } from "@rebasepro/app";
 import type { ResolvedFormField } from "@rebasepro/app";
@@ -437,7 +437,7 @@ export function EntityForm<M extends Record<string, unknown>>({
             disabledProp
             || (!autoSave && formex.isSubmitting)
             || isReadOnly(property)
-            || Boolean(property.admin?.disabled)
+            || isDisabled(property)
             || (!isNew && "isId" in property && Boolean(property.isId))
             || (isNew && isIdAndAuto)
         );
@@ -697,7 +697,16 @@ export function EntityForm<M extends Record<string, unknown>>({
                         <div
                             id={`form_${path}`}
                             className={cls(
-                                "@container/col w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                                // Two rules widen the column, and they answer to
+                                // different things on purpose. `@7xl/form` measures
+                                // the form itself: full screen on a laptop is ~1400px
+                                // of form, which after the 304px rail leaves room for
+                                // the wider column with real gutters either side — and
+                                // it stays 768 in the split pane and the side panel,
+                                // which never get that wide. `2xl` is the older
+                                // viewport rule, kept so a panel on a large monitor
+                                // does not get *narrower* than it is today.
+                                "@container/col w-full max-w-3xl @7xl/form:max-w-4xl 2xl:max-w-4xl flex flex-col",
                                 openEntityMode === "dialog"
                                     ? "pt-5 pb-8 px-6 sm:px-8"
                                     : "pt-6 pb-12 px-5 sm:px-8"

package/src/form/EntityFormBinding.tsx

@@ -35,8 +35,8 @@ import { EntityForm } from "./EntityForm";
 import {
     extractTouchedValues,
     removeEmptyContainers,
-    getChanges,
     getInitialEntityValues,
+    getUnappliedLocalChanges,
 } from "./form_utils";
 import { mergeDeep } from "@rebasepro/utils";
 
@@ -145,20 +145,16 @@ export function EntityFormBinding<M extends Record<string, unknown>>({
 
     const localChangesData = useMemo(() => {
         if (!localChangesDataRaw) return undefined;
-        // Against what the form *opens showing*, not against the baseline. The
-        // banner exists to offer a draft the form is not already displaying;
-        // an edit carried over from the side panel is in both the backup and
-        // the form, so measuring it against the baseline alone offered to
-        // restore the values already on screen.
+        // What the form opens showing: the baseline plus any edit handed over by
+        // the layout this one replaced. See {@link getUnappliedLocalChanges} for
+        // why the banner is measured against that and not against the baseline.
         const openingValues = initialDirtyValues
             ? mergeDeep(computedInitialValues, initialDirtyValues)
             : computedInitialValues;
-        const changes = getChanges(localChangesDataRaw, openingValues);
-        const cleaned = removeEmptyContainers(changes);
-        if (cleaned && typeof cleaned === "object" && Object.keys(cleaned).length === 0) {
-            return undefined;
-        }
-        return cleaned;
+        return getUnappliedLocalChanges(
+            localChangesDataRaw as Partial<M>,
+            openingValues as Partial<M>
+        );
     }, [localChangesDataRaw, computedInitialValues, initialDirtyValues]);
 
     const hasLocalChanges = !localChangesCleared && !!localChangesData && Object.keys(localChangesData as object).length > 0;

package/src/form/PropertyFieldBinding.tsx

@@ -14,7 +14,7 @@ import { Field, FormexFieldProps, getIn } from "@rebasepro/forms";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isPropertyBuilder, resolveProperty } from "@rebasepro/common";
-import { isHidden, isReadOnly } from "@rebasepro/app";
+import { isDisabled, isHidden, isReadOnly } from "@rebasepro/app";
 import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { Typography } from "@rebasepro/ui";
 import { getFieldConfig, getFieldId } from "../components/field_configs";
@@ -113,7 +113,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 }) as Property | null;
 
                 const readOnly = resolvedProperty ? isReadOnly(resolvedProperty) : true;
-                const disabled = disabledProp || readOnly || Boolean(resolvedProperty?.admin?.disabled) || context.disabled;
+                const disabled = disabledProp || readOnly || (resolvedProperty ? isDisabled(resolvedProperty) : false) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -7,7 +7,7 @@ import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@rebasepro/ui";
 import { getArrayResolvedProperties } from "@rebasepro/common";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 import { getIconForProperty } from "../../util/property_utils";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "@rebasepro/app";
@@ -65,7 +65,7 @@ export function ArrayCustomShapedFieldBinding({
     </>);
 
     const body = (resolvedProperties ?? []).map((childProperty, index) => {
-        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.admin?.disabled);
+        const thisDisabled = isReadOnly(childProperty) || isDisabled(childProperty);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
             disabled: disabled || thisDisabled,

package/src/form/field_bindings/BinaryFieldBinding.tsx

@@ -139,6 +139,7 @@ export function BinaryFieldBinding({
                         <div className={cls("flex flex-col gap-2 p-4 rounded-xl border", defaultBorderMixin)}>
                             <TextField
                                 size={size}
+                                aria-label={`${property.name ?? propertyKey} base64 value`}
                                 value={text}
                                 onChange={onChange}
                                 autoFocus={autoFocus ?? true}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -13,7 +13,7 @@ import { EnumValuesChip } from "../../preview";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, getDefaultValueFor } from "@rebasepro/common";
 import { getIconForProperty } from "../../util/property_utils";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
+import { isDisabled, useTranslation } from "@rebasepro/app";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
 import { mergeDeep } from "@rebasepro/utils";
@@ -94,8 +94,8 @@ export function BlockFieldBinding({
                                  addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
-                                 disabled={isSubmitting || Boolean(property.admin?.disabled)}
-                                 canAddElements={!property.admin?.disabled}
+                                 disabled={isSubmitting || isDisabled(property)}
+                                 canAddElements={!isDisabled(property)}
                                  onValueChange={(value) => setFieldValue(propertyKey, value)}
                                  newDefaultEntry={{
                                      [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -60,6 +60,10 @@ export function DateTimeFieldBinding({
                         required={property.validation?.required}
                         className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
                         title={property.name ?? propertyKey}/>}
+                    // The entity form sets `hideLabel` for every field FieldBlock
+                    // labels on its behalf, and FieldBlock's label is a <span> that
+                    // points at nothing — so without this the control is nameless.
+                    aria-label={hideLabel ? (property.name ?? propertyKey) : undefined}
                 />
             </PropertyIdCopyTooltip>
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -269,6 +269,7 @@ function MapKeyValueRow<T extends Record<string, unknown>>({
         if (type === "string" || type === "number") {
             return <TextField
                 key={type}
+                aria-label={fieldKey ? `${t("value")}: ${fieldKey}` : t("value")}
                 placeholder={"value"}
                 value={entryValue as string | number | undefined}
                 type={type === "number" ? "number" : "text"}
@@ -390,6 +391,7 @@ function MapKeyValueRow<T extends Record<string, unknown>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
+                        aria-label={t("key")}
                         placeholder={"key"}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
@@ -459,6 +461,7 @@ function ArrayKeyValueRow<T>({
     function buildInput(entryValue: unknown, type: DataType) {
         if (type === "string" || type === "number") {
             return <TextField value={entryValue as string | number | undefined}
+                              aria-label={`Value ${index + 1}`}
                               type={type === "number" ? "number" : "text"}
                               size={"medium"}
                               onChange={(event) => {

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "@rebasepro/app";
 
 import { ErrorBoundary } from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
-import { isHidden, isReadOnly } from "@rebasepro/app";
+import { isDisabled, isHidden, isReadOnly } from "@rebasepro/app";
 import { FieldHelperText } from "../components/FieldHelperText";
 import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -50,7 +50,7 @@ export function MapFieldBinding({
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
-                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.admin?.disabled);
+                    const thisDisabled = isReadOnly(childProperty) || isDisabled(childProperty);
                     const fieldBindingProps: PropertyFieldBindingProps<Record<string, unknown>> = {
                         propertyKey: `${propertyKey}.${entryKey}`,
                         disabled: disabled || thisDisabled,

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -45,7 +45,7 @@ export function ReadOnlyFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name ?? propertyKey}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3"}/>
             }
 
             <div
@@ -59,13 +59,26 @@ export function ReadOnlyFieldBinding({
                         // so a row holding one of each had its two boxes'
                         // baselines and bottom edges disagree — the field looked
                         // misaligned rather than uneditable.
-                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-4 md:px-6 min-h-12 opacity-80"
+                        // `px-3` is what `TextField` gives its input, so a
+                        // read-only value starts on the same vertical line as
+                        // the text beside it. It was `px-4 md:px-6`, which in a
+                        // one-column span spent a sixth of the box on empty
+                        // margin and pushed short values towards the middle.
+                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-3 min-h-12 opacity-80"
                 )}>
 
                 <ErrorBoundary>
+                    {/* The field is labelled either just above by this
+                        component, or by the `FieldBlock` that asked for
+                        `hideLabel` — never by the preview. `BooleanPreview`
+                        prints the property name beside its checkbox, so a
+                        read-only boolean read as "Procesado por LLM" over a
+                        checkbox saying "Procesado por LLM", wrapped over two
+                        lines in a one-column span. */}
                     <PropertyPreview propertyKey={propertyKey}
                         value={value}
                         property={property}
+                        hideLabel={hideLabel || !minimalistView}
                         size={"medium"}/>
                 </ErrorBoundary>
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -11,7 +11,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
-import { useAuthController, useTranslation } from "@rebasepro/app";
+import { isDisabled, useAuthController, useTranslation } from "@rebasepro/app";
 import { mergeDeep } from "@rebasepro/utils";
 
 /**
@@ -96,14 +96,14 @@ export function RepeatFieldBinding({
         </ErrorBoundary>;
     };
 
-    const canAddElements = !property.admin?.disabled && !isSubmitting && !disabled && (property.admin?.canAddElements || property.admin?.canAddElements === undefined);
+    const canAddElements = !isDisabled(property) && !isSubmitting && !disabled && (property.admin?.canAddElements || property.admin?.canAddElements === undefined);
     const sortable = property.admin?.sortable === undefined ? true : property.admin.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
         addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
         value={(value as unknown[]) ?? []}
         buildEntry={buildEntry}
         onInternalIdAdded={setLastAddedId}
-        disabled={isSubmitting || Boolean(property.admin?.disabled)}
+        disabled={isSubmitting || isDisabled(property)}
         canAddElements={canAddElements}
         sortable={sortable}
         newDefaultEntry={getDefaultValueFor(property.of)}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -8,7 +8,7 @@ import { useDropzone } from "react-dropzone";
 import { FieldHelperText } from "../components/FieldHelperText";
 import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
 
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 import { getIconForProperty } from "../../util/property_utils";
 import { useAuthController, useSnackbarController, useStorageSource, useTranslation } from "@rebasepro/app";
 import { StorageSourceContext } from "@rebasepro/app";
@@ -74,7 +74,7 @@ export function StorageUploadFieldBinding({
     const authController = useAuthController();
 
     const storageSource = useStorageSource();
-    const disabled = isReadOnly(property) || !!property.admin?.disabled || isSubmitting || context.disabled;
+    const disabled = isReadOnly(property) || isDisabled(property) || isSubmitting || context.disabled;
 
     const {
         internalValue,

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -97,6 +97,22 @@ export function TextFieldBinding<T extends string | number>({
                 required={property.validation?.required || property.isId === true}
                 title={property.name ?? propertyKey}/>
         );
+
+    // The control needs a name of its own in two cases, and between them they
+    // cover every text field in an entity form:
+    //
+    //  - `hideLabel`, which the form sets for anything FieldBlock labels for it
+    //    (`hideLabel: !selfLabelling`). FieldBlock draws the name in a <span>
+    //    inside a <div> — not a <label>, and pointing at nothing — so suppressing
+    //    the field's own label left the input with no accessible name at all and
+    //    a screen reader fell back to reading its value back to you.
+    //  - the multiline branch below, which never associated anything: its label
+    //    is a decorative absolutely-positioned <div>, so it is unnamed whether or
+    //    not the form also drew one.
+    //
+    // The single-line TextField is already handled by the kit when a label is
+    // present — it wires `aria-labelledby` — so it only needs this as a fallback.
+    const accessibleName = property.name ?? propertyKey;
     return (<>
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 {isMultiline ? (
@@ -115,6 +131,7 @@ export function TextFieldBinding<T extends string | number>({
                             onChange={onChange}
                             autoFocus={autoFocus}
                             disabled={disabled}
+                            aria-label={accessibleName}
                             className={cls(
                                 "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
                                 label ? "pt-8 pb-2" : "py-2",
@@ -138,6 +155,7 @@ export function TextFieldBinding<T extends string | number>({
                         onChange={onChange}
                         autoFocus={autoFocus}
                         label={label}
+                        aria-label={label ? undefined : accessibleName}
                         type={inputType}
                         disabled={disabled}
                         endAdornment={

package/src/form/field_bindings/VectorFieldBinding.tsx

@@ -166,6 +166,7 @@ export function VectorFieldBinding({
                         <div className={cls("flex flex-col gap-2 p-4 rounded-xl border bg-surface-50/20 dark:bg-surface-800/10", defaultBorderMixin)}>
                             <TextField
                                 size={size}
+                                aria-label={`${property.name ?? propertyKey} vector values`}
                                 value={textValue}
                                 onChange={onChange}
                                 autoFocus={true}

package/src/form/form_utils.ts

@@ -114,6 +114,84 @@ export function getChanges<T extends object>(source: Partial<T>, comparison: Par
     return changes;
 }
 
+/**
+ * What the local-changes backup still has to offer, given what the form is
+ * already showing — the answer the "unsaved local changes" banner is asking for.
+ * `undefined` means there is nothing left to apply, and no banner.
+ *
+ * Measured against what the form *opens showing*, not against the stored
+ * record. The banner exists to offer a draft the form is not already displaying,
+ * and an edit carried across a change of layout is in both the backup and the
+ * form: measuring against the stored values alone offered to restore the values
+ * already on screen, over an edit the user had never left.
+ */
+export function getUnappliedLocalChanges<M extends Record<string, unknown>>(
+    backupValues: Partial<M>,
+    openingValues: Partial<M>
+): Partial<M> | undefined {
+    const changes = getChanges(backupValues, openingValues);
+    const cleaned = removeEmptyContainers(changes);
+    if (!cleaned || typeof cleaned !== "object" || Object.keys(cleaned).length === 0) {
+        return undefined;
+    }
+    return cleaned as Partial<M>;
+}
+
+/**
+ * What travels when the same record changes layout — the split's "hide list",
+ * full screen's "show list", the side panel's "open full screen". One mounted
+ * form is replaced by another showing the same record, so the edit in progress
+ * has to be handed over; left to the local-changes backup alone, the new form
+ * met it as a draft from a closed tab and raised the "unsaved local changes"
+ * banner over changes the user had made a second earlier and never left.
+ *
+ * Returns `undefined` when there is nothing to carry, which is its own answer: a
+ * record nobody edited must open in the next layout exactly as clean as it was.
+ *
+ * Only what was edited here travels, keyed by `touched` — the same subset the
+ * backup stores. Carrying the whole record instead marks every field touched in
+ * the receiving form, which lights up every empty required field as an error and
+ * writes the entire record back out as a "local change".
+ */
+export function getEditHandoffValues<M extends Record<string, unknown>>({
+    status,
+    dirty,
+    values,
+    touched,
+    storedValues
+}: {
+    status: EntityStatus;
+    /** Whether `values` differ from what is stored. */
+    dirty: boolean;
+    values: Partial<M>;
+    touched: Record<string, boolean>;
+    /** The stored record, for the fallback below. Absent for a new one. */
+    storedValues?: Partial<M>;
+}): Partial<M> | undefined {
+
+    if (!values) return undefined;
+
+    // A record with nothing stored behind it carries whole: there is no
+    // baseline to fall back to, so anything not carried is simply lost.
+    if (status === "new" || status === "copy") {
+        return Object.keys(values).length > 0 ? values : undefined;
+    }
+
+    if (!dirty) return undefined;
+
+    const touchedValues = removeEmptyContainers(extractTouchedValues(values, touched ?? {})) as Partial<M> | undefined;
+    if (touchedValues && Object.keys(touchedValues).length > 0) {
+        return touchedValues;
+    }
+
+    // Dirty with nothing touched — a value set programmatically, by a plugin or
+    // a custom field that writes through `setFieldValue` without the blur that
+    // marks it. Diffing against the stored record still finds it, and dropping
+    // it here would hand over a form that opens clean over an edit.
+    const changes = getChanges(values, storedValues ?? {});
+    return Object.keys(changes).length > 0 ? changes : undefined;
+}
+
 export function getInitialEntityValues<M extends Record<string, unknown>>(
     authController: AuthController,
     collection: AdminCollection,

package/src/index.ts

@@ -44,6 +44,12 @@ export {
     Drawer,
     DefaultDrawer,
     DrawerFooterActions,
+    // The two rows the `Shell.DrawerNavigation*` overrides replace. Public so an
+    // app can wrap the stock ones — pass different props, add a context — instead of
+    // reimplementing a nav row and drifting from the framework's hover, active and
+    // tooltip behaviour on the next release.
+    DrawerNavigationItem,
+    DrawerNavigationGroup,
     AdminModeSyncer,
     // ContentHomePage is lazy-loaded — not re-exported here
     RebaseAdmin,
@@ -60,7 +66,9 @@ export type {
     EntityViewBindingProps,
     SelectionProps,
     SelectableTableProps,
-    CollectionPanelProps
+    CollectionPanelProps,
+    DrawerNavigationGroupProps,
+    DrawerNavigationItemProps
 } from "./components";
 
 export * from "./hooks";