@rebasepro/admin 0.13.1-canary.gf57a27e → 0.14.0

package/src/data_import/import/ImportCollectionAction.tsx

@@ -35,7 +35,7 @@ import { DataNewPropertiesMapping } from "../components/DataNewPropertiesMapping
 import { ImportFileUpload } from "../components/ImportFileUpload";
 import { ImportSaveInProgress } from "../components/ImportSaveInProgress";
 import { ImportConfig } from "../types";
-import { slugify } from "@rebasepro/utils";
+import { isPrototypePollutingKey, slugify } from "@rebasepro/utils";
 
 type ImportState = "initial" | "mapping" | "preview" | "import_data_saving";
 
@@ -400,7 +400,15 @@ export function ImportDataPreview<M extends Record<string, unknown>>({
     return <CollectionTableBinding
         title={<div>
             <Typography variant={"subtitle2"}>Imported data preview</Typography>
-            <Typography variant={"caption"}>Entities with the same id will be overwritten</Typography>
+            {/* Conditional because it is only true when a column was chosen as
+                the id: without one, every row is created and nothing can be
+                overwritten. With one, the import asks for an upsert — which it
+                did not, back when this sentence was unconditional and false. */}
+            <Typography variant={"caption"}>
+                {importConfig.idColumn
+                    ? "Entities with the same id will be overwritten"
+                    : "All rows will be imported as new entities"}
+            </Typography>
         </div>}
         tableController={{
             data: importConfig.entities,
@@ -421,6 +429,9 @@ function buildHeadersMappingFromData(objArr: object[], properties?: Properties)
     const headersMapping: Record<string, string> = {};
     objArr.filter(Boolean).forEach((obj) => {
         Object.keys(obj).forEach((key) => {
+            // The keys are the uploaded file's header row; `headersMapping[key] = …`
+            // is the same setter the import pipeline refuses elsewhere.
+            if (isPrototypePollutingKey(key)) return;
             const child = (obj as Record<string, unknown>)[key];
             if (child != null && typeof child === "object" && !Array.isArray(child)) {
                 const childProperty = properties?.[key];

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])) {

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/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/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/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/preview/components/DatePreview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import { format } from "date-fns";
-import * as locales from "date-fns/locale";
 import { useCustomizationController } from "@rebasepro/app";
 import { defaultDateFormat } from "@rebasepro/utils";
+import { getLoadedDateFnsLocale, loadDateFnsLocale } from "./date_fns_locales";
 
 export interface DatePreviewProps {
     date: Date;
@@ -28,7 +28,20 @@ export function DatePreview({
 }: DatePreviewProps): React.ReactElement {
 
     const customizationController = useCustomizationController();
-    const dateUtilsLocale = customizationController?.locale ? (locales as Record<string, locales.Locale>)[customizationController.locale] : undefined;
+    const configuredLocale = customizationController?.locale;
+
+    // The locale arrives asynchronously now (see `date_fns_locales`). Seed from
+    // the cache so only the very first date on a page renders un-localised: by
+    // the time a table of them mounts, the module is already resolved and there
+    // is no second pass.
+    const [dateUtilsLocale, setDateUtilsLocale] = React.useState(() => getLoadedDateFnsLocale(configuredLocale));
+    React.useEffect(() => {
+        let cancelled = false;
+        loadDateFnsLocale(configuredLocale)
+            .then(loaded => { if (!cancelled) setDateUtilsLocale(loaded); })
+            .catch(error => console.error(`[rebase] could not load the "${configuredLocale}" date locale`, error));
+        return () => { cancelled = true; };
+    }, [configuredLocale]);
 
     if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
         return <></>;