@proteinjs/db-ui 1.13.1 → 1.14.0

package/dist/test/recordFormSections.test.js

@@ -0,0 +1,289 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @jest-environment jsdom
+ *
+ * RecordForm's field GROUPING (round 2). Contracts as OUTCOMES:
+ *  1. Sections derive from column type + name in a fixed order: identity (name/email/title)
+ *     → Content (long text, structured values) → Details (everything else) → System
+ *     (id/created/updated), and System is always last.
+ *  2. A column's `ui.formGroup` hint overrides the derivation; an unknown hint value becomes
+ *     its own titled section, ordered after Details.
+ *  3. The record's id renders in System as a readonly value row — a record form's address is
+ *     what an admin copies, and the table layer's `ui.hidden` (a DATA-column flag) doesn't
+ *     bury it here.
+ *  4. A single-section form stays unlabeled — one group needs no header.
+ */
+var react_1 = __importDefault(require("react"));
+var moment_1 = __importDefault(require("moment"));
+var client_1 = require("react-dom/client");
+var test_utils_1 = require("react-dom/test-utils");
+var react_router_dom_1 = require("react-router-dom");
+var db_1 = require("@proteinjs/db");
+require("../generated");
+var RecordForm_1 = require("../src/form/RecordForm");
+var mockDbService = {
+    get: jest.fn(),
+    insert: jest.fn(function (table, record) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, record];
+    }); }); }),
+    update: jest.fn(function (table, record) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, record];
+    }); }); }),
+    delete: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, 1];
+    }); }); }),
+};
+jest.mock('@proteinjs/db', function () { return (__assign(__assign({}, jest.requireActual('@proteinjs/db')), { getDbService: function () { return mockDbService; } })); });
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+var JobTable = /** @class */ (function (_super) {
+    __extends(JobTable, _super);
+    function JobTable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'admin_section_job';
+        _this.columns = (0, db_1.withRecordColumns)({
+            // Declared deliberately out of section order: the form must GROUP, not echo the schema.
+            status: new db_1.StringColumn('status'),
+            failureMessage: new db_1.StringColumn('failure_message', {}, 4000),
+            name: new db_1.StringColumn('name'),
+            manual: new db_1.BooleanColumn('manual'),
+            payload: new db_1.ObjectColumn('payload', { ui: { hidden: false } }),
+        });
+        return _this;
+    }
+    return JobTable;
+}(db_1.Table));
+/** Same shape, but the status column claims the Content section by hint. */
+var HintedJobTable = /** @class */ (function (_super) {
+    __extends(HintedJobTable, _super);
+    function HintedJobTable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'admin_section_hinted_job';
+        _this.columns = (0, db_1.withRecordColumns)({
+            status: new db_1.StringColumn('status', { ui: { formGroup: 'content' } }),
+            failureMessage: new db_1.StringColumn('failure_message', {}, 4000),
+            name: new db_1.StringColumn('name'),
+            manual: new db_1.BooleanColumn('manual', { ui: { formGroup: 'operations' } }),
+            payload: new db_1.ObjectColumn('payload', { ui: { hidden: false } }),
+        });
+        return _this;
+    }
+    return HintedJobTable;
+}(db_1.Table));
+var created = (0, moment_1.default)('2026-01-02T03:04:05.000Z');
+var updated = (0, moment_1.default)('2026-02-03T04:05:06.000Z');
+function loadedRecord() {
+    return {
+        id: 'job-77',
+        name: 'Nightly export',
+        failureMessage: 'It broke',
+        payload: { retries: 3 },
+        status: 'failure',
+        manual: false,
+        created: created,
+        updated: updated,
+    };
+}
+describe('RecordForm sections', function () {
+    var container;
+    var root;
+    beforeEach(function () {
+        jest.clearAllMocks();
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = (0, client_1.createRoot)(container);
+    });
+    afterEach(function () {
+        (0, test_utils_1.act)(function () { return root.unmount(); });
+        container.remove();
+    });
+    var mount = function (table, record) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            root.render(react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+                                react_1.default.createElement(RecordForm_1.RecordForm, { table: table, record: record })));
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var sectionLabels = function () {
+        return Array.from(document.querySelectorAll('[data-form-section-label]')).map(function (el) { return el.textContent; });
+    };
+    /** The section element a field's label sits inside. */
+    var sectionOf = function (labelText) {
+        var label = Array.from(document.querySelectorAll('label')).find(function (l) { var _a; return (_a = l.textContent) === null || _a === void 0 ? void 0 : _a.startsWith(labelText); });
+        if (!label) {
+            throw new Error("No field labeled: ".concat(labelText));
+        }
+        return label.closest('[data-form-section]');
+    };
+    var sectionIndex = function (labelText) {
+        return Array.from(document.querySelectorAll('[data-form-section]')).indexOf(sectionOf(labelText));
+    };
+    it('groups fields into identity → Content → Details → System, in that order', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var sections;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(new JobTable(), loadedRecord())];
+                case 1:
+                    _a.sent();
+                    expect(sectionLabels()).toEqual(['Content', 'Details', 'System']);
+                    // Identity leads (unlabeled), long text/structured land in Content, the rest in Details,
+                    // server-managed meta last — regardless of the schema's declaration order.
+                    expect(sectionIndex('Name')).toBe(0);
+                    expect(sectionOf('Failure message').textContent).toContain('Content');
+                    expect(sectionOf('Payload').textContent).toContain('Content');
+                    expect(sectionOf('Status').textContent).toContain('Details');
+                    expect(sectionOf('Manual').textContent).toContain('Details');
+                    expect(sectionOf('Created').textContent).toContain('System');
+                    expect(sectionOf('Updated').textContent).toContain('System');
+                    sections = document.querySelectorAll('[data-form-section]');
+                    expect(sectionIndex('Created')).toBe(sections.length - 1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders the record id in System as a readonly value row', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var idSection, row;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(new JobTable(), loadedRecord())];
+                case 1:
+                    _a.sent();
+                    idSection = sectionOf('Id');
+                    expect(idSection.textContent).toContain('System');
+                    row = idSection.querySelector('[data-readonly-value-row]');
+                    expect(row).not.toBeNull();
+                    expect(idSection.textContent).toContain('job-77');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('ui.formGroup overrides the derivation; an unknown hint becomes its own section after Details', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(new HintedJobTable(), loadedRecord())];
+                case 1:
+                    _a.sent();
+                    // 'status' (a short string that would derive to Details) claims Content by hint.
+                    expect(sectionOf('Status').textContent).toContain('Content');
+                    // 'manual' claims a section of its own, humanized, ordered after Details — and with both
+                    // would-be Details fields re-hinted, Details doesn't render at all (no empty headers).
+                    expect(sectionLabels()).toEqual(['Content', 'Operations', 'System']);
+                    expect(sectionOf('Manual').textContent).toContain('Operations');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('a new-record form (no System meta) stays a single unlabeled section when one group covers it', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var SimpleTable;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    SimpleTable = /** @class */ (function (_super) {
+                        __extends(SimpleTable, _super);
+                        function SimpleTable() {
+                            var _this = _super !== null && _super.apply(this, arguments) || this;
+                            _this.name = 'admin_section_simple';
+                            _this.columns = (0, db_1.withRecordColumns)({
+                                name: new db_1.StringColumn('name'),
+                            });
+                            return _this;
+                        }
+                        return SimpleTable;
+                    }(db_1.Table));
+                    return [4 /*yield*/, mount(new SimpleTable(), undefined)];
+                case 1:
+                    _a.sent();
+                    expect(document.querySelectorAll('[data-form-section]').length).toBe(1);
+                    expect(sectionLabels()).toEqual([]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=recordFormSections.test.js.map

package/dist/test/recordFormSections.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordFormSections.test.js","sourceRoot":"","sources":["../../test/recordFormSections.test.tsx"],"names":[],"mappings":"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"}

package/dist/test/recordFormStructuredFields.test.js

@@ -283,16 +283,22 @@ describe('RecordForm structured fields', function () {
             }
         });
     }); });
-    it('readonly timestamps display compact with the relative read as the helper line', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var createdControl;
+    it('readonly timestamps render as a value ROW (no input chrome) — compact stamp with the relative read inline', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var labels, createdLabel, row;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, mount(loadedRecord())];
                 case 1:
                     _a.sent();
-                    createdControl = controlByLabel('Created');
-                    expect(createdControl.value).toBe(created.format('MMM D, YYYY, h:mm A'));
-                    expect(document.body.textContent).toContain(created.fromNow());
+                    labels = Array.from(document.body.querySelectorAll('label'));
+                    createdLabel = labels.find(function (candidate) { var _a; return (_a = candidate.textContent) === null || _a === void 0 ? void 0 : _a.startsWith('Created'); });
+                    expect(createdLabel).toBeDefined();
+                    // No control is wired to it: a readonly timestamp is text, not an input.
+                    expect(createdLabel.htmlFor).toBeFalsy();
+                    row = createdLabel.closest('[data-form-field-row]').querySelector('[data-readonly-value-row]');
+                    expect(row).not.toBeNull();
+                    expect(row.textContent).toContain(created.format('MMM D, YYYY, h:mm A'));
+                    expect(row.textContent).toContain(created.fromNow());
                     return [2 /*return*/];
             }
         });

package/dist/test/recordFormStructuredFields.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"recordFormStructuredFields.test.js","sourceRoot":"","sources":["../../test/recordFormStructuredFields.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"recordFormStructuredFields.test.js","sourceRoot":"","sources":["../../test/recordFormStructuredFields.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/db-ui",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "Db ui components",
   "publishConfig": {
     "access": "public"
@@ -26,9 +26,9 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.11",
     "@mui/material": "5.14.11",
-    "@proteinjs/db": "^1.37.0",
+    "@proteinjs/db": "^1.38.0",
     "@proteinjs/reflection": "^1.2.0",
-    "@proteinjs/ui": "^4.11.0",
+    "@proteinjs/ui": "^4.12.0",
     "@proteinjs/util": "^1.6.1",
     "moment": "2.29.4",
     "react": "18.2.0",
@@ -56,5 +56,5 @@
   },
   "main": "./dist/generated/index.js",
   "types": "./dist/generated/index.d.ts",
-  "gitHead": "cb0fda126d5d2bd5b17d1bc13e87c2373eb61f52"
+  "gitHead": "7c4ebb2ab218d48a276940140161979f0aa31730"
 }

package/src/form/RecordForm.tsx

@@ -2,7 +2,16 @@ import React from 'react';
 import S from 'string';
 import moment from 'moment';
 import { StringUtil, isInstanceOf } from '@proteinjs/util';
-import { Form, Fields, FieldComponentProps, textField, checkboxField, dateField, FormButtons } from '@proteinjs/ui';
+import {
+  Form,
+  Fields,
+  FieldComponentProps,
+  FormFieldSection,
+  textField,
+  checkboxField,
+  dateField,
+  FormButtons,
+} from '@proteinjs/ui';
 import {
   Table,
   Record,
@@ -115,16 +124,17 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
   const recordFormCustomization = getRecordFormCustomization(table.name);
   const defaultFieldLayout = fieldLayout();
   const defaultFormButtons = buttons();
+  // The customization contract stays FLAT rows (string[] | string[][]) — customizations
+  // narrow/reorder without knowing about sections; the final layout is sectioned afterwards.
+  const customizedFieldLayout = recordFormCustomization
+    ? recordFormCustomization.getFieldLayout(record, defaultFieldLayout)
+    : defaultFieldLayout;
 
   return (
     <Form
       name={S(table.name).humanize().s}
       createFields={createFields()}
-      fieldLayout={
-        recordFormCustomization
-          ? recordFormCustomization.getFieldLayout(record, defaultFieldLayout)
-          : defaultFieldLayout
-      }
+      fieldLayout={sectionizeFieldLayout(customizedFieldLayout)}
       buttons={
         recordFormCustomization
           ? recordFormCustomization.getFormButtons(record, defaultFormButtons)
@@ -148,7 +158,12 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
 
     for (const columnPropertyName in table.columns) {
       const column = getColumn(columnPropertyName);
-      if (columnPropertyName == 'name' || columnPropertyName == 'created' || columnPropertyName == 'updated') {
+      if (
+        columnPropertyName == 'name' ||
+        columnPropertyName == 'id' ||
+        columnPropertyName == 'created' ||
+        columnPropertyName == 'updated'
+      ) {
         continue;
       }
 
@@ -161,6 +176,12 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     }
 
     if (!isNewRecord) {
+      // The System section: id (schema-hidden as a DATA column, but the record's address is
+      // exactly what an admin copies off a record form — it renders as a readonly mono row),
+      // then the stored timestamps.
+      if ((table.columns as any)['id']) {
+        columns['id'] = getColumn('id');
+      }
       columns['created'] = getColumn('created');
       columns['updated'] = getColumn('updated');
     }
@@ -233,10 +254,10 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
       return customField(name, label, column, fieldRenderer);
     }
 
-    // Readonly values render as text (a native date input isn't text-selectable): copyable
-    // ids/timestamps beat a type-specific control the user can't interact with anyway.
+    // Readonly values render as text ROWS (no input chrome — @proteinjs/ui's ReadonlyValueRow):
+    // copyable ids/timestamps beat a type-specific control the user can't interact with anyway.
     if (isReadonlyField(columnPropertyName, column)) {
-      return textField({ name, label, accessibility: { readonly: true } });
+      return textField({ name, label, accessibility: { readonly: true }, monospace: columnPropertyName === 'id' });
     }
 
     if (isInstanceOf(column, BooleanColumn)) {
@@ -322,14 +343,75 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     };
   }
 
+  /**
+   * Which form section a column belongs to (the founder's grouping order: identity → content
+   * → details/config → system meta last). `column.options.ui.formGroup` overrides the
+   * derivation; unknown hint strings become their own titled sections after Details.
+   */
+  function sectionForColumn(columnPropertyName: string, column: Column<T, any> | undefined): string {
+    if (['id', 'created', 'updated'].includes(columnPropertyName)) {
+      return 'system';
+    }
+
+    const hint = column?.options?.ui?.formGroup;
+    if (hint) {
+      return hint;
+    }
+
+    // Custom-rendered fields (service-owned state like user.roles) are config their component
+    // presents — Details unless the column hints otherwise, never Content by storage shape.
+    if (getFieldRenderer(columnPropertyName)) {
+      return 'details';
+    }
+
+    if (columnPropertyName === 'name' || isIdentityColumnName(columnPropertyName)) {
+      return 'identity';
+    }
+
+    if (
+      column &&
+      (isLongTextColumn(column) ||
+        ((isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) &&
+          !isInstanceOf(column, ReferenceArrayColumn)))
+    ) {
+      return 'content';
+    }
+
+    return 'details';
+  }
+
+  /** Identity-named strings promote to the top (same suffix grammar as the table's column pick). */
+  function isIdentityColumnName(columnPropertyName: string) {
+    const name = columnPropertyName.toLowerCase();
+    return name.endsWith('email') || name.endsWith('title') || ['label', 'subject'].includes(name);
+  }
+
+  /** The default flat layout, ordered by section; the customization contract stays flat rows. */
   function fieldLayout(): any {
     const columns = getColumns();
     const layoutColumns = Object.entries(columns).length > 6 ? 2 : 1;
+
+    // Stable order: identity → content → details → custom-hint sections → system.
+    const sectionRank = (section: string) => ({ identity: 0, content: 1, details: 2, system: 4 })[section] ?? 3;
+    const ordered = Object.keys(columns).sort((a, b) => {
+      const rankDelta = sectionRank(sectionForColumn(a, columns[a])) - sectionRank(sectionForColumn(b, columns[b]));
+      if (rankDelta !== 0) {
+        return rankDelta;
+      }
+      // Within a section, keep getColumns() order (name first, then schema order).
+      return Object.keys(columns).indexOf(a) - Object.keys(columns).indexOf(b);
+    });
+
     if (layoutColumns > 1) {
       const layout: (keyof T)[][] = [];
       let lastRowIsSolo = false;
-      for (const columnPropertyName in columns) {
+      let lastSection: string | undefined;
+      for (const columnPropertyName of ordered) {
         const column = columns[columnPropertyName];
+        const section = sectionForColumn(columnPropertyName, column);
+        // Rows never straddle sections — a section boundary always starts a fresh row.
+        const sectionChanged = section !== lastSection;
+        lastSection = section;
         // Multiline fields (long text / JSON) take a full-width row of their own — half a
         // two-column row squeezes exactly the fields that hold the most text.
         const isMultiline =
@@ -338,13 +420,20 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
           (isLongTextColumn(column) ||
             ((isInstanceOf(column, ObjectColumn) || isInstanceOf(column, ArrayColumn)) &&
               !isInstanceOf(column, ReferenceArrayColumn)));
-        if (isMultiline) {
+        // The record's address wants its own line — a uuid halved into a two-column row wraps.
+        const isSoloValue = isMultiline || columnPropertyName === 'id';
+        if (isSoloValue) {
           layout.push([columnPropertyName as keyof T]);
           lastRowIsSolo = true;
           continue;
         }
 
-        if (layout.length == 0 || lastRowIsSolo || layout[layout.length - 1].length >= layoutColumns) {
+        if (
+          layout.length == 0 ||
+          lastRowIsSolo ||
+          sectionChanged ||
+          layout[layout.length - 1].length >= layoutColumns
+        ) {
           layout.push([]);
           lastRowIsSolo = false;
         }
@@ -355,7 +444,47 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
       return layout;
     }
 
-    return Object.keys(columns) as (keyof T)[];
+    return ordered as (keyof T)[];
+  }
+
+  /**
+   * Wrap a FLAT layout (default or customization-returned) into the quiet form sections the
+   * base Form renders. Each row maps to its first field's section; contiguous runs merge, so a
+   * customization's reordering stays honest (an interleaved order yields repeated sections
+   * rather than silently re-sorting the fields it chose). A single-section result stays
+   * unlabeled — one group needs no header.
+   */
+  function sectionizeFieldLayout(layout: string[] | string[][]): FormFieldSection<Fields>[] {
+    const sectionLabels: { [section: string]: string | undefined } = {
+      identity: undefined,
+      content: 'Content',
+      details: 'Details',
+      system: 'System',
+    };
+    const rows = (layout as (string | string[])[]).map((entry) => (Array.isArray(entry) ? entry : [entry]));
+    const sections: { section: string; fields: string[][] }[] = [];
+    for (const row of rows) {
+      if (row.length === 0) {
+        continue;
+      }
+
+      const section = sectionForColumn(row[0], getColumn(row[0]));
+      const last = sections[sections.length - 1];
+      if (last && last.section === section) {
+        last.fields.push(row);
+      } else {
+        sections.push({ section, fields: [row] });
+      }
+    }
+
+    if (sections.length <= 1) {
+      return sections.map(({ fields }) => ({ fields }) as FormFieldSection<Fields>);
+    }
+
+    return sections.map(({ section, fields }) => ({
+      label: section in sectionLabels ? sectionLabels[section] : StringUtil.humanizeCamel(section),
+      fields,
+    })) as FormFieldSection<Fields>[];
   }
 
   function getFieldValue(columnPropertyName: string, fieldValue: unknown) {

package/src/table/ReferenceCellValue.tsx

@@ -94,7 +94,9 @@ export function ReferenceCellValue({ tableName, id }: { tableName?: string; id?:
         event.preventDefault();
         navigate(url);
       }}
-      sx={{ whiteSpace: 'nowrap' }}
+      // Data ink, link affordance: a table of primary-colored names competes with the row's
+      // identity (round 2's fewer-competing-inks pass) — the hover underline still says door.
+      sx={{ whiteSpace: 'nowrap', color: 'text.primary' }}
     >
       {name !== null ? (
         <Typography variant='body2' component='span'>

package/test/recordFormInteractions.test.tsx

@@ -170,13 +170,15 @@ describe('RecordForm', () => {
       expect(dueDate.type).toBe('date');
       expect(dueDate.value).toBe('2026-08-10');
 
-      // Readonly fields render as text, readOnly-not-disabled (item 3): copyable
-      // (`id` itself is ui.hidden at the column layer and never renders)
+      // Readonly fields render as value ROWS (round 2): selectable text with a copy control
+      // and no input chrome at all.
       for (const labelText of ['Created', 'Updated', 'Archived at']) {
-        const input = inputByLabel(labelText);
-        expect(input.type).toBe('text');
-        expect(input.readOnly).toBe(true);
-        expect(input.disabled).toBe(false);
+        const label = Array.from(document.querySelectorAll('label')).find((l) => l.textContent?.startsWith(labelText))!;
+        expect(label).toBeDefined();
+        // Scope to the field's own shell: two readonly fields can share one two-column row.
+        const row = label.parentElement!.parentElement!.querySelector('[data-readonly-value-row]')!;
+        expect(row).not.toBeNull();
+        expect(row.querySelector(`button[aria-label="Copy ${labelText}"]`)).not.toBeNull();
       }
     });