@mmlogic/components 0.5.11 → 0.5.13

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DVbdkYO3.js');
 var clientLayout = require('./client-layout-CqVuJumR.js');
-var cellRenderer = require('./cell-renderer-pwUGEDql.js');
+var cellRenderer = require('./cell-renderer-BBebjBVz.js');
 
 /**
  * Whether a layout item can appear in the merge diff at all. m-n relations

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js

@@ -28,6 +28,10 @@ export class MrdDocumentContainer {
          *  on top, Finder-style. The table manages its own height. */
         this.height = 460;
         this.locale = navigator.language;
+        /** When true, this dashboard is read-only: New folder and Upload are disabled
+         *  (with a tooltip explaining why) and the embedded table/list get it passed
+         *  through so their own create/upload/drag-drop paths are disabled too. */
+        this.readOnly = false;
         /** Active body: folder tree or flat table. */
         this.mode = 'tree';
         /** Whether the folder tree currently has a valid target for "New folder". */
@@ -42,6 +46,8 @@ export class MrdDocumentContainer {
         };
         this.pickFile = () => {
             var _a;
+            if (this.readOnly)
+                return;
             (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click();
         };
         /** One file per upload, matching the drop handler. Reset the input afterwards
@@ -78,11 +84,11 @@ export class MrdDocumentContainer {
     }
     // ── Toolbar ────────────────────────────────────────────────────────────────
     renderToolbar() {
-        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, title: this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined, onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: this.readOnly || !this.canCreate, title: this.readOnly ? t('readonly_access', this.locale) : undefined, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: this.readOnly || !this.canCreate, title: this.readOnly ? t('readonly_access', this.locale) : (this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined), onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
     }
     // ── Bodies ───────────────────────────────────────────────────────────────
     renderTree() {
-        return (h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, containerHref: this.containerHref, locale: this.locale, onMrdLoadDistinct: (e) => {
+        return (h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, containerHref: this.containerHref, locale: this.locale, readOnly: this.readOnly, onMrdLoadDistinct: (e) => {
                 e.stopPropagation();
                 this.mrdLoadDistinct.emit(e.detail);
             }, onMrdLoadPage: (e) => {
@@ -109,7 +115,7 @@ export class MrdDocumentContainer {
             } }));
     }
     renderList() {
-        return (h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, onMrdLoadPage: (e) => {
+        return (h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, readOnly: this.readOnly, onMrdLoadPage: (e) => {
                 e.stopPropagation();
                 this.mrdLoadPage.emit(e.detail);
             }, onMrdLoadAggregations: (e) => {
@@ -133,7 +139,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: 'ae948e2458d9087179e850b527802c489067d93f' }, this.renderToolbar(), h("div", { key: 'a04e1a78413aa794d0bda551aeb9c6245f1aafa2', class: {
+        return (h(Host, { key: '6792d49f08dd19f6c51e4b656df06bbd8bc14f3e' }, this.renderToolbar(), h("div", { key: '702f4c288f8c40bd2c5999beb392b9dfd022b0bc', class: {
                 'mrd-document-container__body': true,
                 'mrd-document-container__body--tree': treeMode,
             }, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
@@ -300,6 +306,26 @@ export class MrdDocumentContainer {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, this dashboard is read-only: New folder and Upload are disabled\n(with a tooltip explaining why) and the embedded table/list get it passed\nthrough so their own create/upload/drag-drop paths are disabled too."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js

@@ -34,6 +34,11 @@ export class MrdDocumentList {
          *  accepts file drops and folder creation. */
         this.containerHref = '';
         this.locale = navigator.language;
+        /** When true, folder creation, file upload (button and drag-drop) and moving a
+         *  document between folders are all disabled — a viewer-role user can browse
+         *  but not mutate anything. Drives mrdCanCreate(false) so the host toolbar's
+         *  New folder / Upload buttons stay disabled too. */
+        this.readOnly = false;
         this.containers = [];
         this.rootLoading = true;
         /** True when the single-container level is collapsed away (dossier context). */
@@ -76,6 +81,8 @@ export class MrdDocumentList {
         /** The optimistic document row awaiting its self href from the create POST. */
         this.lastOptimisticDoc = null;
         this.startCreateFolder = () => {
+            if (this.readOnly)
+                return;
             const resolved = this.resolveTarget();
             if (!resolved || this.pendingNode)
                 return;
@@ -115,6 +122,10 @@ export class MrdDocumentList {
         // ── Drag & drop: move a document into another folder / container ────────────
         this.onDocDragStart = (e, doc, node) => {
             var _a, _b, _c;
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             this.dragDoc = doc;
             this.dragFromId = node.id;
             if (e.dataTransfer) {
@@ -134,6 +145,11 @@ export class MrdDocumentList {
          *  root drop-zone; a different node is highlighted (its own folder = no-op). */
         this.onNodeDragOver = (e, node) => {
             const file = this.isFileDrag(e);
+            if (this.readOnly) {
+                if (file)
+                    e.preventDefault(); // swallow so the browser doesn't navigate to the dropped file
+                return;
+            }
             if (!this.dragDoc && !file)
                 return;
             e.preventDefault();
@@ -149,6 +165,10 @@ export class MrdDocumentList {
                 this.dropTargetId = null;
         };
         this.onNodeDrop = (e, node, container) => {
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             if (this.isFileDrag(e)) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -167,6 +187,11 @@ export class MrdDocumentList {
             if (!this.singleContainer)
                 return;
             const file = this.isFileDrag(e);
+            if (this.readOnly) {
+                if (file)
+                    e.preventDefault(); // swallow so the browser doesn't navigate to the dropped file
+                return;
+            }
             if (!this.dragDoc && !file)
                 return;
             e.preventDefault();
@@ -184,6 +209,10 @@ export class MrdDocumentList {
         };
         this.onRootDrop = (e) => {
             this.rootDropActive = false;
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             if (!this.singleContainer)
                 return;
             const only = this.containers[0];
@@ -454,10 +483,10 @@ export class MrdDocumentList {
         return null;
     }
     get canCreateFolder() {
-        return !this.pendingNode && this.resolveTarget() !== null;
+        return !this.readOnly && !this.pendingNode && this.resolveTarget() !== null;
     }
     /** Start creating a folder under the current target. Called by the host toolbar
-     *  (mrd-document-container). No-op when there is no valid target. */
+     *  (mrd-document-container). No-op when there is no valid target, or read-only. */
     async createFolder() {
         this.startCreateFolder();
     }
@@ -543,7 +572,7 @@ export class MrdDocumentList {
      *  (mrd-document-container). No-op without a target, or while another upload
      *  is still awaiting its setFileReference. */
     async uploadFile(file) {
-        if (!file || this.pendingUpload)
+        if (this.readOnly || !file || this.pendingUpload)
             return;
         const resolved = this.resolveTarget();
         if (!resolved)
@@ -684,7 +713,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '63604a99fc62d9108f61b8efc126c0cd3e8fc5ed', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '5d473ec3a894361325a71deb14e7b52d0abc5f06', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -702,7 +731,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: '2a092e3a7483deb1fb30753b0c0428aaf75c303a' }, h("div", { key: '2b716c912a272b925a95133de5b1ff2abedd9dbc', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: '757babf3ccabbb113ab2a24d632b2b9a02d3c08b' }, h("div", { key: '606c212687482efdc5666333678e2ea406709e75', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -826,6 +855,26 @@ export class MrdDocumentList {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, folder creation, file upload (button and drag-drop) and moving a\ndocument between folders are all disabled \u2014 a viewer-role user can browse\nbut not mutate anything. Drives mrdCanCreate(false) so the host toolbar's\nNew folder / Upload buttons stay disabled too."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }
@@ -1068,7 +1117,7 @@ export class MrdDocumentList {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Start creating a folder under the current target. Called by the host toolbar\n(mrd-document-container). No-op when there is no valid target.",
+                    "text": "Start creating a folder under the current target. Called by the host toolbar\n(mrd-document-container). No-op when there is no valid target, or read-only.",
                     "tags": []
                 }
             },

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js

@@ -17,6 +17,10 @@ export class MrdLayoutSection {
         /** Top-level archetypes on the object dashboard. When it contains commons.document,
          *  the record is rendered as a single-document view instead of generic fields. */
         this.archetypes = [];
+        /** When true, this dashboard is read-only (viewer role): the embedded mrd-table's
+         *  create ("+") action and the documents view's New folder / Upload are disabled
+         *  with a tooltip explaining why, so it's clear at a glance the user can't mutate data. */
+        this.readOnly = false;
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
@@ -222,7 +226,7 @@ export class MrdLayoutSection {
      *  swaps between the folder tree and the flat table. Events are re-emitted to
      *  the host with the view key, exactly as the raw list/table events were. */
     renderDocumentContainer(item, key, parentId, archetype, containerHref) {
-        return (h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, containerHref: containerHref, viewKey: key, locale: this.locale, onMrdLoadDistinct: (e) => {
+        return (h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, containerHref: containerHref, viewKey: key, locale: this.locale, readOnly: this.readOnly, onMrdLoadDistinct: (e) => {
                 e.stopPropagation();
                 this.mrdLoadViewDistinct.emit(Object.assign({ name: key }, e.detail));
             }, onMrdLoadPage: (e) => {
@@ -255,7 +259,7 @@ export class MrdLayoutSection {
             } }));
     }
     renderTable(item, key, parentId) {
-        return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
+        return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, readOnly: this.readOnly, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
                 var _a;
                 e.stopPropagation();
                 this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
@@ -359,7 +363,7 @@ export class MrdLayoutSection {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
         const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
         const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
-        return (h(Host, { key: 'ccae8e82b4dd549ab24239fe685a6830a508061d' }, h("div", { key: '4072cc4ecdd2b087c54a5515e653f7f713b2150f', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: '07b1d61b170a5ae971ba54eaf775e1787dea1642' }, h("div", { key: 'd146e0542b1de11bd130eb3d36d54e4faf055309', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -519,6 +523,26 @@ export class MrdLayoutSection {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, this dashboard is read-only (viewer role): the embedded mrd-table's\ncreate (\"+\") action and the documents view's New folder / Upload are disabled\nwith a tooltip explaining why, so it's clear at a glance the user can't mutate data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/table/mrd-table/mrd-table.js

@@ -31,6 +31,10 @@ export class MrdTable {
         this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** True once the header/totals widths have been checked against the current totals row. */
+        this.fixedContentMeasured = false;
+        /** Guards against scheduling more than one grow pass. */
+        this.growScheduled = false;
         /** Drag origin of the running column resize (null = no drag in progress). */
         this.resizeOrigin = null;
         /** True once the user has dragged (or auto-fitted) a column — see colWidthsUserSet usages. */
@@ -57,6 +61,10 @@ export class MrdTable {
         /** Time (ms) to wait for setPage() before retrying a page request; after
          *  MAX_RETRY_ATTEMPTS retries the page is marked failed (see failedPages). */
         this.requestTimeoutMs = REQUEST_TIMEOUT_MS;
+        /** When true, the toolbar's create ("+") action is disabled (with a tooltip
+         *  explaining why) so a viewer-role user can see at a glance that this dashboard
+         *  is read-only. Sorting, filtering and export stay available — those don't mutate data. */
+        this.readOnly = false;
         // ── Internal state ─────────────────────────────────────────────────────────
         /** Index into allViews[] for the currently displayed view. 0 = primary, 1+ = alternatives. */
         this.activeViewIdx = 0;
@@ -125,6 +133,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -168,6 +177,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -241,6 +251,8 @@ export class MrdTable {
         if (data.total != null)
             this.aggregationsTotal = data.total;
         this.aggregations = data;
+        // Fresh totals can be wider than the ones the columns were checked against.
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
@@ -271,6 +283,7 @@ export class MrdTable {
     }
     componentDidRender() {
         this.freezeColWidths();
+        this.growToFixedContent();
     }
     /** Freeze the column widths once the first data page has rendered.
      *
@@ -324,6 +337,38 @@ export class MrdTable {
         const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
         return Math.ceil(content + borders);
     }
+    /** Width a header cell needs, measured from its children instead of the cell's own
+     *  scrollWidth. A header is not just text: it holds the label plus a sort icon (and a filter
+     *  icon once the column is filtered), with the drag handle absolutely positioned on top of
+     *  the right padding. Summing the in-flow children makes the icons part of the width by
+     *  construction — and a child's own rect is never clipped by the header's `overflow: hidden`,
+     *  so it stays correct even when the header is already truncated on screen.
+     *  Returns 0 when nothing can be measured, so callers fall back to neededWidth(). */
+    neededHeaderWidth(th) {
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const size = (v) => px(parseFloat(v || '0'));
+        const style = getComputedStyle(th);
+        const paddingLeft = size(style.paddingLeft);
+        const paddingRight = size(style.paddingRight);
+        const borders = Math.max(0, px(th.offsetWidth) - px(th.clientWidth));
+        let inflow = 0;
+        let handle = 0;
+        Array.from(th.children).forEach(child => {
+            const el = child;
+            const cs = getComputedStyle(el);
+            const width = px(el.getBoundingClientRect().width) + size(cs.marginLeft) + size(cs.marginRight);
+            // The drag handle is absolutely positioned: it takes no room in the flow, it overlays it.
+            if (cs.position === 'absolute')
+                handle = Math.max(handle, width);
+            else
+                inflow += width;
+        });
+        if (inflow <= 0)
+            return 0;
+        // The handle sits over the right padding; only reserve what would stick out past it,
+        // so the label never ends up underneath the grab area.
+        return Math.ceil(inflow + paddingLeft + paddingRight + Math.max(0, handle - paddingRight) + borders);
+    }
     /** Width each column needs for its header and its rendered page-0 cells — what the columns
      *  are locked to, so they never end up narrower than their content.
      *
@@ -337,11 +382,11 @@ export class MrdTable {
         if (ths.length === 0 || ths.length !== this.columns.length)
             return null;
         const needed = Array.from(ths).map((th, idx) => {
-            let widest = this.neededWidth(th);
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
             // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
             // colSpan cell (without that class) which would measure as the full table width.
             this.el
-                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .querySelectorAll(this.columnCellSelector(idx))
                 .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
             return widest;
         });
@@ -351,6 +396,50 @@ export class MrdTable {
             return null;
         return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
     }
+    /** Data and totals cells of one column. The totals row is included everywhere the data
+     *  cells are: it is fixed, always-visible content, so it must never be clipped. */
+    columnCellSelector(idx) {
+        return `.mrd-table__cell:nth-child(${idx + 1}), .mrd-table__totals-cell:nth-child(${idx + 1})`;
+    }
+    /** Width the header and totals cells of each column need. Null when nothing has a box. */
+    measureFixedContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
+            this.el
+                .querySelectorAll(`.mrd-table__totals-cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        return needed.every(w => w <= 0) ? null : needed;
+    }
+    /** Widen columns whose header or totals cell does not fit. Data cells may be ellipsised —
+     *  that is what the lock is for — but the header and the totals row are fixed content that
+     *  is always on screen, so clipping them just hides information with no way to reveal it.
+     *
+     *  It runs as a second pass because the totals only arrive with setAggregations(), long
+     *  after the widths were frozen on page 0. Grow-only and once per totals change, so it can
+     *  never turn into the per-page re-proportioning the lock exists to prevent. Hand-set
+     *  widths are left alone. */
+    growToFixedContent() {
+        if (this.colWidths.length === 0 || this.colWidthsUserSet || this.fixedContentMeasured || this.growScheduled)
+            return;
+        this.growScheduled = true;
+        writeTask(() => {
+            this.growScheduled = false;
+            if (this.colWidths.length === 0 || this.colWidthsUserSet)
+                return;
+            const needed = this.measureFixedContentWidths();
+            if (!needed)
+                return;
+            this.fixedContentMeasured = true;
+            const grown = this.colWidths.map((w, i) => Math.min(Math.max(w, needed[i]), MAX_AUTOFIT_WIDTH));
+            if (grown.some((w, i) => w !== this.colWidths[i]))
+                this.colWidths = grown;
+        });
+    }
     /** Re-reads the rendered header widths into colWidths so a drag starts from what is
      *  actually on screen — and locks the columns if they weren't locked yet.
      *
@@ -409,9 +498,14 @@ export class MrdTable {
             return;
         // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
         // colSpan cell (without that class) which would otherwise measure as the full table width.
-        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), ${this.columnCellSelector(idx)}`);
         let widest = 0;
-        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+        cells.forEach(cell => {
+            const needed = cell.classList.contains('mrd-table__header')
+                ? Math.max(this.neededWidth(cell), this.neededHeaderWidth(cell))
+                : this.neededWidth(cell);
+            widest = Math.max(widest, needed);
+        });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }
@@ -540,7 +634,7 @@ export class MrdTable {
         const raw = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.actions) !== null && _b !== void 0 ? _b : [];
         return (raw !== null && raw !== void 0 ? raw : []).reduce((acc, a) => {
             if (a === 'NEW')
-                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
+                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary', disabled: this.readOnly });
             if (a === 'EXPORT')
                 acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
             return acc;
@@ -903,7 +997,7 @@ export class MrdTable {
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a;
-        return (h(Toolbar, { locale: this.locale, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, cb: {
+        return (h(Toolbar, { locale: this.locale, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, readOnly: this.readOnly, cb: {
                 onClearAllFilters: () => this.clearAllFilters(),
                 onViewSwitch: idx => this.handleViewSwitch(idx),
                 onToggleViewPopover: e => this.toggleViewPopover(e),
@@ -1248,6 +1342,26 @@ export class MrdTable {
                 "reflect": false,
                 "attribute": "request-timeout-ms",
                 "defaultValue": "15000"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the toolbar's create (\"+\") action is disabled (with a tooltip\nexplaining why) so a viewer-role user can see at a glance that this dashboard\nis read-only. Sorting, filtering and export stay available \u2014 those don't mutate data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/table/mrd-table/table-parts.js

@@ -87,7 +87,7 @@ export const JsonModal = ({ html, locale, onClose }) => {
         return null;
     return (h("div", { class: "mrd-table__modal-backdrop", onClick: onClose, role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: onClose, "aria-label": t('close', locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: html }))));
 };
-export const Toolbar = ({ locale, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, cb }) => {
+export const Toolbar = ({ locale, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, readOnly, cb }) => {
     var _a;
     const hasActions = actions.length > 0;
     const hasViewSwitcher = views.length > 1;
@@ -98,13 +98,17 @@ export const Toolbar = ({ locale, filterCount, actions, views, activeViewIdx, vi
         } }, v.label)))))), h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => cb.onViewSwitch((activeViewIdx + 1) % views.length) }, "\u25B6")))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
         var _a, _b;
         const pickerTypes = a.action === 'create' ? createTypes : null;
+        // readOnly only ever disables 'create' (see mrd-table.tsx tableActions) — export,
+        // sorting and filtering don't mutate data and stay available.
+        const disabled = a.disabled || (readOnly && a.action === 'create');
+        const tooltip = disabled && readOnly ? t('readonly_access', locale) : a.label;
         if (pickerTypes === null || pickerTypes === void 0 ? void 0 : pickerTypes.length) {
-            return (h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, onClick: cb.onToggleCreatePicker }, a.icon
+            return (h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, disabled: disabled, onClick: cb.onToggleCreatePicker }, a.icon
                 ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
-                : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)), createPickerOpen && (h("div", { class: "mrd-table__create-picker" }, pickerTypes.map(ct => (h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => cb.onCreate(ct.type) }, ct.label)))))));
+                : a.label, h("span", { class: "mrd-table__action-tooltip" }, tooltip)), createPickerOpen && (h("div", { class: "mrd-table__create-picker" }, pickerTypes.map(ct => (h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => cb.onCreate(ct.type) }, ct.label)))))));
         }
-        return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, disabled: a.disabled, onClick: () => cb.onAction(a.action) }, a.icon
+        return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, disabled: disabled, onClick: () => cb.onAction(a.action) }, a.icon
             ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
-            : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)));
+            : a.label, h("span", { class: "mrd-table__action-tooltip" }, tooltip)));
     })))));
 };

package/dist/collection/dev/app.js

@@ -14,6 +14,8 @@ let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'objec
 let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
 let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
 let _meUser            = null;    // { id: href, label: name } — resolved once after login via /accounts/me
+let _detailReadOnly    = false;   // Detail View tab: readOnly toggle (TASK-0248 demo)
+let _liveApiReadOnly   = false;   // Live API tab: readOnly toggle (TASK-0248 demo)
 
 /* =====================================================================
    UTILITIES
@@ -135,6 +137,7 @@ async function initDetailViewTab() {
   table.totalElements = window.EXAMPLE_COMPANIES.length;
   table.pageSize      = 20;
   table.locale        = _locale;
+  table.readOnly      = _detailReadOnly;
 
   // Register before init(): init() emits mrdLoadPage for page 0 itself.
   table.addEventListener('mrdLoadPage', async (e) => {
@@ -175,6 +178,7 @@ function showCompanyDetail(row) {
     section.items = layout.items;
     section.data  = company;
     section.locale = _locale;
+    section.readOnly = _detailReadOnly;
 
     section.addEventListener('mrdNavigate', (e) => {
       logEvent('mrdNavigate', e.detail);
@@ -199,6 +203,17 @@ function showCompanyList() {
   document.getElementById('detail-table-panel').style.display = 'block';
 }
 
+/** readOnly demo (TASK-0248): flips the companies table and any rendered
+ *  detail sections without re-fetching — readOnly is a pure render-time prop. */
+function onDetailViewReadOnlyToggle(checked) {
+  _detailReadOnly = checked;
+  const table = document.getElementById('companies-table');
+  if (table) table.readOnly = checked;
+  document.querySelectorAll('#detail-sections mrd-layout-section').forEach((section) => {
+    section.readOnly = checked;
+  });
+}
+
 /* =====================================================================
    DOCUMENT PREVIEW TAB
    ===================================================================== */
@@ -494,6 +509,7 @@ async function renderSection(index) {
   section.items  = layout.items;
   section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
   section.locale = _locale;
+  section.readOnly = _liveApiReadOnly;
   // Dashboard-level archetypes describe the object itself → single-document view.
   // Only apply to the main object layout, not tab-page (related) layouts.
   section.archetypes = (!layout.tabPage && _dashboardData.archetypes) ? _dashboardData.archetypes : [];
@@ -670,6 +686,14 @@ async function renderSection(index) {
 }
 
 
+/** readOnly demo (TASK-0248): flips the currently rendered section without
+ *  re-fetching — readOnly is a pure render-time prop, no reload needed. */
+function onLiveApiReadOnlyToggle(checked) {
+  _liveApiReadOnly = checked;
+  const section = document.querySelector('#sections-container mrd-layout-section');
+  if (section) section.readOnly = checked;
+}
+
 function toggleJsonViewer() {
   const viewer = document.getElementById('json-viewer');
   const btn    = document.getElementById('btn-json-toggle');