@proteinjs/db-ui 1.10.2 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/proteinjs/db/compare/@proteinjs/db-ui@1.10.2...@proteinjs/db-ui@1.11.0) (2026-08-19)
+
+
+### Features
+
+* record table page phone layout — full-width card with page gutters (task [#53](https://github.com/proteinjs/db/issues/53)) ([43061ff](https://github.com/proteinjs/db/commit/43061ff77d1677ff9294006a00da71c46659c281))
+
+
+
+
+
 ## [1.10.2](https://github.com/proteinjs/db/compare/@proteinjs/db-ui@1.10.1...@proteinjs/db-ui@1.10.2) (2026-08-19)
 
 **Note:** Version bump only for package @proteinjs/db-ui

package/dist/src/pages/RecordTablePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordTablePage.d.ts","sourceRoot":"","sources":["../../../src/pages/RecordTablePage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,eAAe,CAAC;AACzD,OAAO,EAAe,KAAK,EAAE,MAAM,eAAe,CAAC;AAInD,eAAO,MAAM,eAAe,EAAE,IAc7B,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,MAAM,GAAG,CAAC,WAEhD,CAAC;AAEF,eAAO,MAAM,qBAAqB,cAAe,MAAM,WAEtD,CAAC"}
+{"version":3,"file":"RecordTablePage.d.ts","sourceRoot":"","sources":["../../../src/pages/RecordTablePage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAqC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAe,KAAK,EAAE,MAAM,eAAe,CAAC;AAInD,eAAO,MAAM,eAAe,EAAE,IAc7B,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,MAAM,GAAG,CAAC,WAEhD,CAAC;AAEF,eAAO,MAAM,qBAAqB,cAAe,MAAM,WAEtD,CAAC"}

package/dist/src/pages/RecordTablePage.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordTableLinkByName = exports.recordTableLink = exports.recordTablePage = void 0;
 var react_1 = __importDefault(require("react"));
+var ui_1 = require("@proteinjs/ui");
 var db_1 = require("@proteinjs/db");
 var RecordTable_1 = require("../table/RecordTable");
 var material_1 = require("@mui/material");
@@ -58,6 +59,9 @@ var recordTableLinkByName = function (tableName) {
 exports.recordTableLinkByName = recordTableLinkByName;
 var DynamicRecordTable = function (_a) {
     var urlParams = _a.urlParams;
+    // Phone (MOBILE_SUPPORT §4.5): the floating fit-content card becomes a full-width card with
+    // page gutters — the table inside presents its phone card face (rows as stacked cards).
+    var isPhone = (0, ui_1.useFormFactor)().isPhone;
     function Table() {
         var tableName = urlParams['name'];
         var table;
@@ -78,8 +82,8 @@ var DynamicRecordTable = function (_a) {
         if (!table) {
             return react_1.default.createElement(material_1.Typography, { sx: { p: 3, color: 'text.secondary' } }, errorMessage);
         }
-        return (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', flexGrow: 1, justifyContent: 'center', padding: 4 } },
-            react_1.default.createElement(material_1.Paper, { sx: { maxHeight: '80vh' } },
+        return (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', flexGrow: 1, justifyContent: 'center', padding: isPhone ? 2 : 4, minWidth: 0 } },
+            react_1.default.createElement(material_1.Paper, { sx: __assign({ maxHeight: '80vh' }, (isPhone ? { width: '100%', minWidth: 0 } : {})) },
                 react_1.default.createElement(RecordTable_1.RecordTable, { table: table }))));
     }
     return react_1.default.createElement(Table, null);

package/dist/src/pages/RecordTablePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecordTablePage.js","sourceRoot":"","sources":["../../../src/pages/RecordTablePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,oCAAmD;AACnD,oDAAmD;AACnD,0CAAuE;AAE1D,QAAA,eAAe,GAAS;IACnC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,qFAAqF;IACrF,qEAAqE;IACrE,oBAAoB,EAAE,UAAC,KAAY;QACjC,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;SAClD,CAAC;IACJ,CAAC;IACD,SAAS,EAAE,UAAC,EAAY;YAAP,KAAK,cAAV,EAAY,CAAF;QAAO,OAAA,8BAAC,kBAAkB,eAAK,KAAK,EAAI,CAAA;KAAA;CAC/D,CAAC;AAEK,IAAM,eAAe,GAAG,UAAC,KAAiB;IAC/C,OAAO,WAAI,uBAAe,CAAC,IAAI,mBAAS,KAAK,CAAC,IAAI,CAAE,CAAC;AACvD,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B;AAEK,IAAM,qBAAqB,GAAG,UAAC,SAAiB;IACrD,OAAO,WAAI,uBAAe,CAAC,IAAI,mBAAS,SAAS,CAAE,CAAC;AACtD,CAAC,CAAC;AAFW,QAAA,qBAAqB,yBAEhC;AAEF,IAAM,kBAAkB,GAAG,UAAC,EAAiC;QAA/B,SAAS,eAAA;IACrC,SAAS,KAAK;QACZ,IAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,KAAK,CAAC;QACV,IAAI,YAAY,CAAC;QACjB,IAAI,SAAS,EAAE;YACb,IAAI;gBACF,KAAK,GAAG,IAAA,gBAAW,EAAC,SAAS,CAAC,CAAC;aAChC;YAAC,OAAO,KAAK,EAAE;gBACd,YAAY,GAAG,sCAA+B,SAAS,CAAE,CAAC;aAC3D;SACF;aAAM;YACL,YAAY,GAAG,6CAA6C,CAAC;SAC9D;QAED,oFAAoF;QACpF,6EAA6E;QAC7E,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,8BAAC,qBAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAG,YAAY,CAAc,CAAC;SACvF;QAED,OAAO,CACL,8BAAC,cAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE;YAC7E,8BAAC,gBAAK,IAAC,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC9B,8BAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CACvB,CACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,8BAAC,KAAK,OAAG,CAAC;AACnB,CAAC,CAAC"}
+{"version":3,"file":"RecordTablePage.js","sourceRoot":"","sources":["../../../src/pages/RecordTablePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAAwE;AACxE,oCAAmD;AACnD,oDAAmD;AACnD,0CAAuE;AAE1D,QAAA,eAAe,GAAS;IACnC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,qFAAqF;IACrF,qEAAqE;IACrE,oBAAoB,EAAE,UAAC,KAAY;QACjC,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;SAClD,CAAC;IACJ,CAAC;IACD,SAAS,EAAE,UAAC,EAAY;YAAP,KAAK,cAAV,EAAY,CAAF;QAAO,OAAA,8BAAC,kBAAkB,eAAK,KAAK,EAAI,CAAA;KAAA;CAC/D,CAAC;AAEK,IAAM,eAAe,GAAG,UAAC,KAAiB;IAC/C,OAAO,WAAI,uBAAe,CAAC,IAAI,mBAAS,KAAK,CAAC,IAAI,CAAE,CAAC;AACvD,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B;AAEK,IAAM,qBAAqB,GAAG,UAAC,SAAiB;IACrD,OAAO,WAAI,uBAAe,CAAC,IAAI,mBAAS,SAAS,CAAE,CAAC;AACtD,CAAC,CAAC;AAFW,QAAA,qBAAqB,yBAEhC;AAEF,IAAM,kBAAkB,GAAG,UAAC,EAAiC;QAA/B,SAAS,eAAA;IACrC,4FAA4F;IAC5F,wFAAwF;IAChF,IAAA,OAAO,GAAK,IAAA,kBAAa,GAAE,QAApB,CAAqB;IAEpC,SAAS,KAAK;QACZ,IAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,KAAK,CAAC;QACV,IAAI,YAAY,CAAC;QACjB,IAAI,SAAS,EAAE;YACb,IAAI;gBACF,KAAK,GAAG,IAAA,gBAAW,EAAC,SAAS,CAAC,CAAC;aAChC;YAAC,OAAO,KAAK,EAAE;gBACd,YAAY,GAAG,sCAA+B,SAAS,CAAE,CAAC;aAC3D;SACF;aAAM;YACL,YAAY,GAAG,6CAA6C,CAAC;SAC9D;QAED,oFAAoF;QACpF,6EAA6E;QAC7E,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,8BAAC,qBAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAG,YAAY,CAAc,CAAC;SACvF;QAED,OAAO,CACL,8BAAC,cAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;YACxG,8BAAC,gBAAK,IAAC,EAAE,aAAI,SAAS,EAAE,MAAM,IAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAChF,8BAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CACvB,CACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,8BAAC,KAAK,OAAG,CAAC;AACnB,CAAC,CAAC"}

package/dist/test/recordTablePageMobile.test.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+export {};
+//# sourceMappingURL=recordTablePageMobile.test.d.ts.map

package/dist/test/recordTablePageMobile.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordTablePageMobile.test.d.ts","sourceRoot":"","sources":["../../test/recordTablePageMobile.test.tsx"],"names":[],"mappings":"AA+CA,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,wBAAwB,EAAE,OAAO,CAAC;CACvC"}

package/dist/test/recordTablePageMobile.test.js

@@ -0,0 +1,234 @@
+"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
+ *
+ * RecordTablePage's phone layout (task #53: admin surfaces work on mobile). Below the phone
+ * line the page presents the table card full-width with page gutters (the desktop face floats
+ * a fit-content Paper in 32px padding — a fixed column grid wider than the screen). Also pins
+ * the end-to-end substrate integration: on a phone the page renders Table's card face.
+ */
+var react_1 = __importDefault(require("react"));
+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 react_query_1 = require("react-query");
+var db_1 = require("@proteinjs/db");
+var UserTable = /** @class */ (function (_super) {
+    __extends(UserTable, _super);
+    function UserTable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'user';
+        _this.columns = (0, db_1.withRecordColumns)({
+            email: new db_1.StringColumn('email'),
+        });
+        return _this;
+    }
+    return UserTable;
+}(db_1.Table));
+var rows = [{ id: 'u-1', email: 'a@n3xa.io' }];
+var mockDb = {
+    query: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, rows];
+    }); }); }),
+    getRowCount: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, rows.length];
+    }); }); }),
+};
+jest.mock('@proteinjs/db', function () { return (__assign(__assign({}, jest.requireActual('@proteinjs/db')), { getDb: function () { return mockDb; }, tableByName: function (name) {
+        if (name !== 'user') {
+            throw new Error("no such table: ".concat(name));
+        }
+        return new UserTable();
+    } })); });
+// import AFTER the mock so the page module binds the mocked db seams
+var RecordTablePage_1 = require("../src/pages/RecordTablePage");
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+var StubIntersectionObserver = /** @class */ (function () {
+    function StubIntersectionObserver() {
+    }
+    StubIntersectionObserver.prototype.observe = function () { };
+    StubIntersectionObserver.prototype.unobserve = function () { };
+    StubIntersectionObserver.prototype.disconnect = function () { };
+    return StubIntersectionObserver;
+}());
+globalThis.IntersectionObserver = StubIntersectionObserver;
+var phoneMode = true;
+beforeAll(function () {
+    window.matchMedia = function (query) { return ({
+        matches: phoneMode,
+        media: query,
+        onchange: null,
+        addListener: function () { return undefined; },
+        removeListener: function () { return undefined; },
+        addEventListener: function () { return undefined; },
+        removeEventListener: function () { return undefined; },
+        dispatchEvent: function () { return false; },
+    }); };
+});
+/** Emotion under jest injects rules via CSSOM; read the actual styles the classes apply. */
+var cssFor = function (el) {
+    var classes = Array.from(el.classList).filter(function (cls) { return cls.startsWith('css-'); });
+    var out = [];
+    Array.from(document.querySelectorAll('style')).forEach(function (styleEl) {
+        var _a, _b;
+        var rules = (_b = (_a = styleEl.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) !== null && _b !== void 0 ? _b : [];
+        Array.from(rules).forEach(function (rule) {
+            if (classes.some(function (cls) { return rule.cssText.includes(".".concat(cls)); })) {
+                out.push(rule.cssText);
+            }
+        });
+    });
+    return out.join('\n');
+};
+describe('RecordTablePage phone layout', function () {
+    var container;
+    var root;
+    beforeEach(function () {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = (0, client_1.createRoot)(container);
+    });
+    afterEach(function () {
+        (0, test_utils_1.act)(function () {
+            root.unmount();
+        });
+        container.remove();
+    });
+    var mount = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var client, Page;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    client = new react_query_1.QueryClient({ defaultOptions: { queries: { retry: false, cacheTime: 0 } } });
+                    Page = RecordTablePage_1.recordTablePage.component;
+                    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_query_1.QueryClientProvider, { client: client },
+                                    react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+                                        react_1.default.createElement(Page, { urlParams: { name: 'user' } }))));
+                                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*/];
+            }
+        });
+    }); };
+    it('phone: the table card spans the page (full-width Paper) and rows render as the card face', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var paper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    phoneMode = true;
+                    return [4 /*yield*/, mount()];
+                case 1:
+                    _a.sent();
+                    paper = document.querySelector('.MuiPaper-root');
+                    expect(paper).toBeTruthy();
+                    expect(cssFor(paper)).toContain('width: 100%');
+                    expect(document.querySelector('[data-table-phone-face]')).toBeTruthy();
+                    expect(document.querySelector('table')).toBeNull();
+                    expect(document.body.textContent).toContain('a@n3xa.io');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('desktop: the floating fit-content card and the table face stay unchanged', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var paper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    phoneMode = false;
+                    return [4 /*yield*/, mount()];
+                case 1:
+                    _a.sent();
+                    paper = document.querySelector('.MuiPaper-root');
+                    expect(paper).toBeTruthy();
+                    expect(cssFor(paper)).not.toContain('width: 100%');
+                    expect(document.querySelector('table')).toBeTruthy();
+                    expect(document.querySelector('[data-table-phone-face]')).toBeNull();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=recordTablePageMobile.test.js.map

package/dist/test/recordTablePageMobile.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordTablePageMobile.test.js","sourceRoot":"","sources":["../../test/recordTablePageMobile.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;GAOG;AACH,gDAA0B;AAC1B,2CAAoD;AACpD,mDAA2C;AAC3C,qDAAgD;AAChD,2CAA+D;AAC/D,oCAA+E;AAM/E;IAAwB,6BAAW;IAAnC;QAAA,qEAKC;QAJQ,UAAI,GAAG,MAAM,CAAC;QACd,aAAO,GAAG,IAAA,sBAAiB,EAAO;YACvC,KAAK,EAAE,IAAI,iBAAY,CAAC,OAAO,CAAC;SACjC,CAAC,CAAC;;IACL,CAAC;IAAD,gBAAC;AAAD,CAAC,AALD,CAAwB,UAAK,GAK5B;AAED,IAAM,IAAI,GAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAU,CAAC,CAAC;AAEjE,IAAM,MAAM,GAAG;IACb,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;QAAY,sBAAA,IAAI,EAAA;aAAA,CAAC;IAChC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC;QAAY,sBAAA,IAAI,CAAC,MAAM,EAAA;aAAA,CAAC;CAC9C,CAAC;AAEF,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,cAAM,OAAA,uBAC5B,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KACtC,KAAK,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM,EACnB,WAAW,EAAE,UAAC,IAAY;QACxB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,MAAM,IAAI,KAAK,CAAC,yBAAkB,IAAI,CAAE,CAAC,CAAC;SAC3C;QACD,OAAO,IAAI,SAAS,EAAE,CAAC;IACzB,CAAC,IACD,EAT+B,CAS/B,CAAC,CAAC;AAEJ,qEAAqE;AACrE,gEAA+D;AAM/D,UAAU,CAAC,wBAAwB,GAAG,IAAI,CAAC;AAE3C;IAAA;IAIA,CAAC;IAHC,0CAAO,GAAP,cAAW,CAAC;IACZ,4CAAS,GAAT,cAAa,CAAC;IACd,6CAAU,GAAV,cAAc,CAAC;IACjB,+BAAC;AAAD,CAAC,AAJD,IAIC;AACA,UAAkB,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;AAEpE,IAAI,SAAS,GAAG,IAAI,CAAC;AACrB,SAAS,CAAC;IACP,MAAc,CAAC,UAAU,GAAG,UAAC,KAAa,IAAK,OAAA,CAAC;QAC/C,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;QAC5B,cAAc,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;QAC/B,gBAAgB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;QACjC,mBAAmB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;QACpC,aAAa,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;KAC3B,CAAC,EAT8C,CAS9C,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,4FAA4F;AAC5F,IAAM,MAAM,GAAG,UAAC,EAAW;IACzB,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC;IACjF,IAAM,GAAG,GAAa,EAAE,CAAC;IACzB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAC,OAAO;;QAC7D,IAAM,KAAK,GAAG,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,QAAQ,mCAAK,EAA6B,CAAC;QACxE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI;YAC7B,IAAI,OAAO,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAI,GAAG,CAAE,CAAC,EAAhC,CAAgC,CAAC,EAAE;gBAC3D,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACxB;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxB,CAAC,CAAC;AAEF,QAAQ,CAAC,8BAA8B,EAAE;IACvC,IAAI,SAAyB,CAAC;IAC9B,IAAI,IAAU,CAAC;IAEf,UAAU,CAAC;QACT,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,GAAG,IAAA,mBAAU,EAAC,SAAS,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC;QACR,IAAA,gBAAG,EAAC;YACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,IAAM,KAAK,GAAG;;;;;oBACN,MAAM,GAAG,IAAI,yBAAW,CAAC,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;oBAC1F,IAAI,GAAG,iCAAe,CAAC,SAAqC,CAAC;oBACnE,qBAAM,IAAA,gBAAG,EAAC;;gCACR,IAAI,CAAC,MAAM,CACT,8BAAC,iCAAmB,IAAC,MAAM,EAAE,MAAM;oCACjC,8BAAC,+BAAY;wCACX,8BAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAI,CACxB,CACK,CACvB,CAAC;;;6BACH,CAAC,EAAA;;oBARF,SAQE,CAAC;oBACH,qBAAM,IAAA,gBAAG,EAAC;;;4CACR,qBAAM,IAAI,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,EAAtB,CAAsB,CAAC,EAAA;;wCAAtD,SAAsD,CAAC;;;;6BACxD,CAAC,EAAA;;oBAFF,SAEE,CAAC;;;;SACJ,CAAC;IAEF,EAAE,CAAC,0FAA0F,EAAE;;;;;oBAC7F,SAAS,GAAG,IAAI,CAAC;oBACjB,qBAAM,KAAK,EAAE,EAAA;;oBAAb,SAAa,CAAC;oBACR,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;oBACtE,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,CAAC;oBAC3B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;oBAC/C,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;oBACvE,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACnD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;;;;SAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE;;;;;oBAC7E,SAAS,GAAG,KAAK,CAAC;oBAClB,qBAAM,KAAK,EAAE,EAAA;;oBAAb,SAAa,CAAC;oBACR,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;oBACtE,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,CAAC;oBAC3B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;oBACnD,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;oBACrD,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;;;;SACtE,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/db-ui",
-  "version": "1.10.2",
+  "version": "1.11.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.34.1",
+    "@proteinjs/db": "^1.34.2",
     "@proteinjs/reflection": "^1.1.12",
-    "@proteinjs/ui": "^4.9.0",
+    "@proteinjs/ui": "^4.10.0",
     "@proteinjs/util": "^1.6.1",
     "moment": "2.29.4",
     "react": "18.2.0",
@@ -55,5 +55,5 @@
   },
   "main": "./dist/generated/index.js",
   "types": "./dist/generated/index.d.ts",
-  "gitHead": "a5a56218a5757e47576cbe79858c9aacc6026816"
+  "gitHead": "ead198c6ceceff2a37853c6211895b444575295c"
 }

package/src/pages/RecordTablePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Page, PageComponentProps } from '@proteinjs/ui';
+import { Page, PageComponentProps, useFormFactor } from '@proteinjs/ui';
 import { tableByName, Table } from '@proteinjs/db';
 import { RecordTable } from '../table/RecordTable';
 import { Box, Paper, SxProps, Theme, Typography } from '@mui/material';
@@ -29,6 +29,10 @@ export const recordTableLinkByName = (tableName: string) => {
 };
 
 const DynamicRecordTable = ({ urlParams }: PageComponentProps) => {
+  // Phone (MOBILE_SUPPORT §4.5): the floating fit-content card becomes a full-width card with
+  // page gutters — the table inside presents its phone card face (rows as stacked cards).
+  const { isPhone } = useFormFactor();
+
   function Table() {
     const tableName = urlParams['name'];
     let table;
@@ -50,8 +54,8 @@ const DynamicRecordTable = ({ urlParams }: PageComponentProps) => {
     }
 
     return (
-      <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center', padding: 4 }}>
-        <Paper sx={{ maxHeight: '80vh' }}>
+      <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center', padding: isPhone ? 2 : 4, minWidth: 0 }}>
+        <Paper sx={{ maxHeight: '80vh', ...(isPhone ? { width: '100%', minWidth: 0 } : {}) }}>
           <RecordTable table={table} />
         </Paper>
       </Box>

package/test/recordTablePageMobile.test.tsx

@@ -0,0 +1,144 @@
+/**
+ * @jest-environment jsdom
+ *
+ * RecordTablePage's phone layout (task #53: admin surfaces work on mobile). Below the phone
+ * line the page presents the table card full-width with page gutters (the desktop face floats
+ * a fit-content Paper in 32px padding — a fixed column grid wider than the screen). Also pins
+ * the end-to-end substrate integration: on a phone the page renders Table's card face.
+ */
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Record, StringColumn, Table, withRecordColumns } from '@proteinjs/db';
+
+interface User extends Record {
+  email: string;
+}
+
+class UserTable extends Table<User> {
+  public name = 'user';
+  public columns = withRecordColumns<User>({
+    email: new StringColumn('email'),
+  });
+}
+
+const rows: User[] = [{ id: 'u-1', email: 'a@n3xa.io' } as User];
+
+const mockDb = {
+  query: jest.fn(async () => rows),
+  getRowCount: jest.fn(async () => rows.length),
+};
+
+jest.mock('@proteinjs/db', () => ({
+  ...jest.requireActual('@proteinjs/db'),
+  getDb: () => mockDb,
+  tableByName: (name: string) => {
+    if (name !== 'user') {
+      throw new Error(`no such table: ${name}`);
+    }
+    return new UserTable();
+  },
+}));
+
+// import AFTER the mock so the page module binds the mocked db seams
+import { recordTablePage } from '../src/pages/RecordTablePage';
+
+declare global {
+  // eslint-disable-next-line no-var
+  var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+class StubIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as any).IntersectionObserver = StubIntersectionObserver;
+
+let phoneMode = true;
+beforeAll(() => {
+  (window as any).matchMedia = (query: string) => ({
+    matches: phoneMode,
+    media: query,
+    onchange: null,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  });
+});
+
+/** Emotion under jest injects rules via CSSOM; read the actual styles the classes apply. */
+const cssFor = (el: Element): string => {
+  const classes = Array.from(el.classList).filter((cls) => cls.startsWith('css-'));
+  const out: string[] = [];
+  Array.from(document.querySelectorAll('style')).forEach((styleEl) => {
+    const rules = styleEl.sheet?.cssRules ?? ([] as unknown as CSSRuleList);
+    Array.from(rules).forEach((rule) => {
+      if (classes.some((cls) => rule.cssText.includes(`.${cls}`))) {
+        out.push(rule.cssText);
+      }
+    });
+  });
+  return out.join('\n');
+};
+
+describe('RecordTablePage phone layout', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async () => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false, cacheTime: 0 } } });
+    const Page = recordTablePage.component as React.ComponentType<any>;
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={client}>
+          <MemoryRouter>
+            <Page urlParams={{ name: 'user' }} />
+          </MemoryRouter>
+        </QueryClientProvider>
+      );
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  };
+
+  it('phone: the table card spans the page (full-width Paper) and rows render as the card face', async () => {
+    phoneMode = true;
+    await mount();
+    const paper = document.querySelector('.MuiPaper-root') as HTMLElement;
+    expect(paper).toBeTruthy();
+    expect(cssFor(paper)).toContain('width: 100%');
+    expect(document.querySelector('[data-table-phone-face]')).toBeTruthy();
+    expect(document.querySelector('table')).toBeNull();
+    expect(document.body.textContent).toContain('a@n3xa.io');
+  });
+
+  it('desktop: the floating fit-content card and the table face stay unchanged', async () => {
+    phoneMode = false;
+    await mount();
+    const paper = document.querySelector('.MuiPaper-root') as HTMLElement;
+    expect(paper).toBeTruthy();
+    expect(cssFor(paper)).not.toContain('width: 100%');
+    expect(document.querySelector('table')).toBeTruthy();
+    expect(document.querySelector('[data-table-phone-face]')).toBeNull();
+  });
+});