@rebasepro/admin 0.13.0 → 0.13.1-canary.g1822133

package/src/data_import/utils/file_to_json.ts

@@ -1,6 +1,7 @@
-import ExcelJS from "exceljs";
 import { getWorksheetHeaders } from "./file_headers";
 import { mapJsonParse, unflattenObject } from "./transforms";
+import { parseCsvToObjects } from "./csv";
+import { isPrototypePollutingKey } from "@rebasepro/utils";
 
 // Re-export for backwards compat (tests import from this file)
 export { unflattenObject } from "./transforms";
@@ -10,9 +11,78 @@ type ConversionResult = {
     propertiesOrder: string[]
 }
 
+/**
+ * ExcelJS, fetched the first time somebody actually opens a workbook.
+ *
+ * It was a top-level `import ExcelJS from "exceljs"`, and that one line put
+ * 940 kB of spreadsheet reader into the admin's entry chunk — preloaded on the
+ * login screen, before anyone has authenticated, let alone clicked Import.
+ * `CollectionViewActions` lazy-loads the import and export actions and says so
+ * in a comment, but the package's own barrel (`src/index.ts` re-exports
+ * `./data_import`) puts this module back in the entry's static graph, so the
+ * `lazy()` bought nothing. A static import inside a module the barrel reaches
+ * is eager no matter what the component above it does; the only thing that
+ * makes a dependency lazy is importing it lazily, here.
+ */
+type ExcelJsModule = typeof import("exceljs");
+
+let excelJsModule: Promise<ExcelJsModule> | undefined;
+
+function loadExcelJs(): Promise<ExcelJsModule> {
+    // exceljs is CommonJS, so the namespace a bundler hands back wraps the real
+    // module under `default`. Native ESM (and the type declarations) put the
+    // members at the top level. Accept either.
+    excelJsModule ??= import("exceljs").then(mod => (mod as { default?: ExcelJsModule }).default ?? mod);
+    return excelJsModule;
+}
+
+/**
+ * Whether this file is delimited text rather than a workbook.
+ *
+ * Browsers report `text/csv`, `application/csv` or nothing at all for the same
+ * `.csv`, so the extension is the reliable half of the test.
+ */
+function isCsvFile(file: File): boolean {
+    const name = (file.name ?? "").toLowerCase();
+    if (name.endsWith(".csv") || name.endsWith(".tsv")) return true;
+    return file.type === "text/csv" || file.type === "application/csv";
+}
+
+/** Turn the parsed cells of one sheet/file into the entity-shaped rows the import maps. */
+function toImportRows(rows: Array<Record<string, unknown>>): object[] {
+    return rows.map(mapJsonParse).map(unflattenObject);
+}
+
 export function convertFileToJson(file: File): Promise<ConversionResult> {
     return new Promise((resolve, reject) => {
-        if (file.type === "application/json") {
+        if (isCsvFile(file)) {
+            // Not the ExcelJS branch: `workbook.xlsx.load` is a zip reader, and
+            // every CSV — the format this admin exports by default — died on it
+            // with "Can't find end of central directory : is this a zip file ?".
+            console.debug("Converting CSV file to JSON", file.name);
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                try {
+                    const { headers, data } = parseCsvToObjects(e.target?.result as string);
+                    if (headers.length === 0) {
+                        reject(new Error("The CSV file is empty"));
+                        return;
+                    }
+                    resolve({
+                        data: toImportRows(data),
+                        propertiesOrder: headers
+                    });
+                } catch (err) {
+                    console.error("Error parsing CSV file", err);
+                    reject(err);
+                }
+            };
+            reader.onerror = () => reject(reader.error ?? new Error("Could not read the file"));
+            // Explicit UTF-8: the pre-ExcelJS implementation passed
+            // `codepage: 65001` for the same reason, and the browser's default
+            // guess mangles accented and CJK text.
+            reader.readAsText(file, "utf-8");
+        } else if (file.type === "application/json") {
             console.debug("Converting JSON file to JSON", file.name);
             const reader = new FileReader();
             reader.onload = function (e) {
@@ -40,6 +110,7 @@ export function convertFileToJson(file: File): Promise<ConversionResult> {
             reader.onload = async function (e) {
                 try {
                     const buffer = e.target?.result as ArrayBuffer;
+                    const ExcelJS = await loadExcelJs();
                     const workbook = new ExcelJS.Workbook();
                     await workbook.xlsx.load(buffer);
                     const worksheet = workbook.worksheets[0];
@@ -57,17 +128,17 @@ export function convertFileToJson(file: File): Promise<ConversionResult> {
                         const obj: Record<string, any> = {};
                         row.eachCell({ includeEmpty: false }, (cell, colNumber) => {
                             const header = headers[colNumber - 1];
-                            if (header) {
+                            // A `__proto__` header would be the prototype setter
+                            // here rather than a column; refused, as in `csv.ts`.
+                            if (header && !isPrototypePollutingKey(header)) {
                                 obj[header] = cell.value;
                             }
                         });
                         parsedData.push(obj);
                     });
 
-                    const cleanedData = parsedData.map(mapJsonParse);
-                    const jsonData = cleanedData.map(unflattenObject);
                     resolve({
-                        data: jsonData,
+                        data: toImportRows(parsedData),
                         propertiesOrder: headers
                     });
                 } catch (err) {

package/src/data_import/utils/index.ts

@@ -1,3 +1,5 @@
 export * from "./file_to_json";
+export * from "./csv";
+export * from "./save_entities";
 export * from "./data";
 export * from "./get_import_inference_type";

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,18 +9,18 @@ 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";
-import { Alert, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Typography } from "@rebasepro/ui";
+import { Alert, Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, paperMixin, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 
-import { FieldBlock, isSelfLabellingProperty } from "./components/FieldBlock";
-import { FormRail } from "./components/FormRail";
+import { FieldBlock, isSelfLabellingProperty, LABEL_ICON_SIZE, spanClass } from "./components/FieldBlock";
+import { AdditionalFieldValue } from "../components/AdditionalFieldValue";
+import { FormRail, RecordMeta } from "./components/FormRail";
 import { FormSections } from "./components/FormSections";
 import { useRailVisible } from "./components/useRailVisible";
-import { LabelWithIconAndTooltip } from "./components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { flattenKeys } from "@rebasepro/app";
 import { ErrorFocus } from "./components/ErrorFocus";
@@ -173,15 +173,30 @@ export function EntityForm<M extends Record<string, unknown>>({
             });
     };
 
-    const [initialValues, initialDirty] = useMemo(() => {
-        const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
-        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
-        return [initialValues, initialDirty];
-    }, [baseInitialValues, initialDirtyValues]);
+    /**
+     * What the form opens showing, when that is not what is stored — an edit
+     * carried over from the side panel's "open full screen", or a draft
+     * restored from the local-changes backup.
+     *
+     * The merge is deliberately *not* folded into the baseline. `mergeDeep`
+     * used to produce a single `initialValues` that served as both, with a
+     * `initialDirty: true` bolted on beside it to say what the baseline could
+     * no longer show — and that flag survived exactly one render, because the
+     * record's data arriving replaced the baseline and the form recomputed
+     * dirty as false against a baseline that already contained the edit.
+     *
+     * Read once, at mount: this is a handoff, and re-reading it every render
+     * tied the form to a cache that is cleared as soon as it has been consumed.
+     */
+    const initialModifiedValues = useRef(
+        initialDirtyValues && Object.keys(initialDirtyValues).length > 0
+            ? mergeDeep(baseInitialValues, initialDirtyValues)
+            : undefined
+    ).current;
 
     const internalFormex = useCreateFormex<M>({
-        initialValues: initialValues as M,
-        initialDirty,
+        initialValues: baseInitialValues as M,
+        initialModifiedValues: initialModifiedValues as M | undefined,
         debugId: `EntityForm:${path}/${entityIdProp}`,
         initialTouched: initialDirtyValues ?
             flattenKeys(initialDirtyValues!)
@@ -193,7 +208,9 @@ export function EntityForm<M extends Record<string, unknown>>({
         onSubmit,
         onReset: () => {
             onResetProp?.();
-            onValuesModified?.(false, initialValues as M);
+            // The stored values — a reset returns the form to them, and by now
+            // that is the baseline whether or not it was at mount.
+            onValuesModified?.(false, baseInitialValues as M);
         },
         onValuesChangeDeferred: onValuesChangeDeferredProp,
         validation: async (values): Promise<Record<string, string>> => {
@@ -420,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)
         );
@@ -440,25 +457,26 @@ export function EntityForm<M extends Record<string, unknown>>({
             const child = AdditionalFieldBuilder
                 ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
                 : <div className={"w-full"}>
-                    {additionalField.value?.({
-                        entity,
-                        context: additionalFieldContext
-                    })?.toString()}
+                    <AdditionalFieldValue
+                        field={additionalField}
+                        entity={entity}
+                        context={additionalFieldContext}/>
                 </div>;
 
             return (
+                // Through FieldBlock like every other cell, so a computed
+                // column is labelled at the same size, with the same gap to its
+                // box, as the property next to it on the grid.
                 <div key={`additional_${field.key}`}
                     className={spanClass(field.span)}>
-                    <LabelWithIconAndTooltip
-                        propertyKey={field.key}
-                        icon={<AlignLeftIcon size={iconSize.small}/>}
-                        title={additionalField.name}
-                        className={"text-text-secondary dark:text-text-secondary-dark"}/>
-                    <div className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
-                        <ErrorBoundary>
+                    <FieldBlock propertyKey={field.key}
+                        showLabel={true}
+                        label={additionalField.name}
+                        icon={<AlignLeftIcon size={LABEL_ICON_SIZE}/>}>
+                        <div className={cls(paperMixin, "w-full min-h-12 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
                             {child}
-                        </ErrorBoundary>
-                    </div>
+                        </div>
+                    </FieldBlock>
                 </div>
             );
         }
@@ -537,12 +555,25 @@ export function EntityForm<M extends Record<string, unknown>>({
                 }
             ];
 
-        return <FormSections
-            sections={sections}
-            collapsed={collapsedSections}
-            onToggle={toggleSection}
-            errorKeys={errorKeys}
-            renderField={renderField}/>;
+        return <>
+            <FormSections
+                sections={sections}
+                collapsed={collapsedSections}
+                onToggle={toggleSection}
+                errorKeys={errorKeys}
+                renderField={renderField}/>
+
+            {/* Folded back with the rail's fields, and for the same reason. The
+                rail renders only where it has been measured to fit, so on the
+                split pane, the side panel and the dialog this block was dropped
+                outright and the record's id was nowhere on screen but the
+                truncated chip in the bar. */}
+            {!showRail && layout.showRecordMeta && status === "existing" && entity && (
+                <div className={cls("mt-8 pt-5 border-t max-w-sm", defaultBorderMixin)}>
+                    <RecordMeta entity={entity as Entity<Record<string, unknown>>}/>
+                </div>
+            )}
+        </>;
     };
 
     const formRef = useRef<HTMLDivElement>(null);
@@ -666,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"
@@ -706,25 +746,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     );
 }
 
-/**
- * Grid placement for a span.
- *
- * Written out as literal class strings rather than composed, because Tailwind
- * scans source text: a template literal would produce classes that exist at
- * runtime and were never generated into the stylesheet.
- *
- * Below the column breakpoint every field takes the single available column, so
- * the side panel, the dialog and mobile all get a plain stack.
- */
-function spanClass(span: 1 | 2 | 3 | 4): string {
-    switch (span) {
-        case 1: return "@2xl/col:col-span-1";
-        case 2: return "@2xl/col:col-span-2";
-        case 3: return "@2xl/col:col-span-3";
-        case 4: return "@2xl/col:col-span-4";
-    }
-}
-
 function useOnAutoSave<M extends Record<string, unknown>>(autoSave: undefined | boolean, formex: FormexController<M>, lastSavedValues: React.MutableRefObject<EntityValues<M> | undefined>, save: (values: EntityValues<M>) => Promise<Entity<M> | void>) {
     useEffect(() => {
         if (!autoSave) return;

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";
 
@@ -127,22 +127,35 @@ export function EntityFormBinding<M extends Record<string, unknown>>({
 
     const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
 
+    // `initialDirtyValues` is deliberately *not* merged in here any more. This
+    // value is the form's baseline, and an edit folded into the baseline is
+    // indistinguishable from saved data — which is how an edit carried over
+    // from the side panel arrived reading "Saved". {@link EntityForm} applies
+    // it as an overlay on the values instead, so the difference survives.
+    //
+    // The auto-applied local-changes backup is still folded in, unchanged, and
+    // has the same shape of problem: a restored draft opens undirty and cannot
+    // be saved until a field is touched. Left as it is rather than changed
+    // blind, since nothing here exercises that path.
     const computedInitialValues = useMemo(() => {
-        const withLocalChanges = autoApplyLocalChanges && localChangesDataRaw
+        return autoApplyLocalChanges && localChangesDataRaw
             ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>)
             : baseInitialValues;
-        return initialDirtyValues ? mergeDeep(withLocalChanges, initialDirtyValues) : withLocalChanges;
-    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues]);
 
     const localChangesData = useMemo(() => {
         if (!localChangesDataRaw) return undefined;
-        const changes = getChanges(localChangesDataRaw, computedInitialValues);
-        const cleaned = removeEmptyContainers(changes);
-        if (cleaned && typeof cleaned === "object" && Object.keys(cleaned).length === 0) {
-            return undefined;
-        }
-        return cleaned;
-    }, [localChangesDataRaw, computedInitialValues]);
+        // 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;
+        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 <></>;