@rebasepro/admin 0.13.0 → 0.13.1-canary.g06dbe5b

package/src/data_import/utils/csv.ts

@@ -0,0 +1,153 @@
+import { isPrototypePollutingKey } from "@rebasepro/utils";
+
+/**
+ * Delimiters sniffed from the header row, most common first.
+ *
+ * A spreadsheet saved as "CSV" in a locale that uses the comma as a decimal
+ * separator is semicolon-delimited, and a tab-separated file saved as `.csv`
+ * happens often enough to be worth reading.
+ */
+const CANDIDATE_DELIMITERS = [",", ";", "\t"];
+
+/**
+ * Split CSV text into rows of raw cells, RFC 4180 style.
+ *
+ * Quoted fields may contain the delimiter, newlines and doubled quotes; this is
+ * the exact inverse of what the export's `entryToCSVRow` writes, so a file this
+ * admin produced reads back into the cells it was built from.
+ */
+export function parseCsvRows(text: string, delimiter = ","): string[][] {
+    const rows: string[][] = [];
+    let row: string[] = [];
+    let field = "";
+    let quoted = false;
+    let inQuotes = false;
+    let i = 0;
+
+    const endField = () => {
+        row.push(field);
+        field = "";
+        quoted = false;
+    };
+
+    while (i < text.length) {
+        const char = text[i];
+
+        if (inQuotes) {
+            if (char === "\"") {
+                // A doubled quote is a literal one; a single quote closes the field.
+                if (text[i + 1] === "\"") {
+                    field += "\"";
+                    i += 2;
+                    continue;
+                }
+                inQuotes = false;
+                i++;
+                continue;
+            }
+            field += char;
+            i++;
+            continue;
+        }
+
+        if (char === "\"" && field === "") {
+            inQuotes = true;
+            quoted = true;
+            i++;
+            continue;
+        }
+        if (char === delimiter) {
+            endField();
+            i++;
+            continue;
+        }
+        if (char === "\r") {
+            // CRLF: the line ends on the \n. A lone CR outside quotes is dropped.
+            i++;
+            continue;
+        }
+        if (char === "\n") {
+            endField();
+            rows.push(row);
+            row = [];
+            i++;
+            continue;
+        }
+        field += char;
+        i++;
+    }
+
+    // A file that does not end in a newline still has a last row.
+    if (field !== "" || quoted || row.length > 0) {
+        endField();
+        rows.push(row);
+    }
+
+    return rows;
+}
+
+/**
+ * Pick the delimiter that splits the header row into the most cells. A
+ * single-column file matches nothing and stays on the comma.
+ */
+export function detectCsvDelimiter(text: string): string {
+    const sample = text.slice(0, 64 * 1024);
+    let best = CANDIDATE_DELIMITERS[0];
+    let bestCount = 1;
+    for (const candidate of CANDIDATE_DELIMITERS) {
+        const count = parseCsvRows(sample, candidate)[0]?.length ?? 0;
+        if (count > bestCount) {
+            best = candidate;
+            bestCount = count;
+        }
+    }
+    return best;
+}
+
+export interface ParsedCsv {
+    headers: string[];
+    data: Record<string, string>[];
+}
+
+/**
+ * Parse CSV text into one object per row, keyed by the header row.
+ *
+ * The picker accepts `.csv` and the dialog promises "Upload a CSV, Excel or JSON
+ * file", but every non-JSON file used to be handed to ExcelJS'
+ * `workbook.xlsx.load`, which is a zip reader — so every CSV failed with
+ * "Can't find end of central directory : is this a zip file ?". The export
+ * writes CSV by default, so the round trip could not close.
+ *
+ * A blank header keeps its column rather than collapsing it, so the cells to its
+ * right stay under their own names.
+ */
+export function parseCsvToObjects(text: string): ParsedCsv {
+    // A BOM is one character of the first header, and Excel writes one.
+    const cleaned = text.charCodeAt(0) === 0xFEFF ? text.slice(1) : text;
+    const delimiter = detectCsvDelimiter(cleaned);
+    const rows = parseCsvRows(cleaned, delimiter)
+        .filter(row => row.some(cell => cell.trim() !== ""));
+
+    if (rows.length === 0) {
+        return { headers: [],
+            data: [] };
+    }
+
+    const headers = rows[0].map((header, index) => header.trim() || `Column${index + 1}`);
+
+    const data = rows.slice(1).map((cells) => {
+        const obj: Record<string, string> = {};
+        headers.forEach((header, index) => {
+            // The header row is uploaded data: `obj["__proto__"] = …` is the
+            // prototype setter, not a column. Refused, as elsewhere in import.
+            if (isPrototypePollutingKey(header)) return;
+            const cell = cells[index];
+            if (cell === undefined) return;
+            obj[header] = cell;
+        });
+        return obj;
+    });
+
+    return { headers,
+        data };
+}

package/src/data_import/utils/data.ts

@@ -5,7 +5,7 @@ import { isPropertyBuilder } from "@rebasepro/common";
 import { unflattenObject } from "./file_to_json";
 import { getIn } from "@rebasepro/forms";
 import { inferTypeFromValue } from "@rebasepro/inference";
-import { mergeDeep } from "@rebasepro/utils";
+import { isPrototypePollutingKey, mergeDeep } from "@rebasepro/utils";
 
 export function convertDataToEntity(authController: AuthController,
     navigation: CollectionRegistryController,
@@ -57,6 +57,12 @@ export function convertDataToEntity(authController: AuthController,
 
 export function flattenEntry(obj: Record<string, unknown>, parent = ""): Record<string, unknown> {
     return Object.keys(obj).reduce<Record<string, unknown>>((acc, key) => {
+        // Keys come from the uploaded file, so `acc[key] = …` is the class-22
+        // primitive when the key is `__proto__`; refuse the column instead.
+        if (isPrototypePollutingKey(key)) {
+            console.warn(`Skipping column "${key}": a header may not reach the prototype chain`);
+            return acc;
+        }
         const prefixedKey = parent ? `${parent}.${key}` : key;
 
         if (typeof obj[key] === "object" && !(obj[key] instanceof Date) && obj[key] !== null && !Array.isArray(obj[key])) {
@@ -100,7 +106,15 @@ export function processValueMapping(authController: AuthController, value: any,
     if (from === "array" && to === "array" && Array.isArray(value) && usedProperty.of && !Array.isArray(usedProperty.of) && !isPropertyBuilder(usedProperty.of)) {
         return value.map(v => processValueMapping(authController, v, navigation, usedProperty.of as Property));
     } else if (from === "string" && to === "number" && typeof value === "string") {
-        return Number(value);
+        // `Number("")` is 0, so a blank cell used to import as a real zero — a
+        // price of nothing rather than a price nobody filled in — and `Number`
+        // of anything unreadable imported as NaN. Both are absent values, and
+        // saying so lets the importer's own validation see them. The `vector`
+        // branch above already draws the same distinction.
+        const trimmed = value.trim();
+        if (trimmed === "") return null;
+        const num = Number(trimmed);
+        return Number.isNaN(num) ? null : num;
     } else if (from === "string" && to === "array" && typeof value === "string" && usedProperty.of && !Array.isArray(usedProperty.of) && !isPropertyBuilder(usedProperty.of)) {
         return value.split(",").map((v: string) => processValueMapping(authController, v, navigation, usedProperty.of as Property));
     } else if (from === "string" && to === "boolean") {

package/src/data_import/utils/file_to_json.ts

@@ -1,6 +1,8 @@
 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 +12,53 @@ type ConversionResult = {
     propertiesOrder: string[]
 }
 
+/**
+ * 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) {
@@ -57,17 +103,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/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;