@mmlogic/components 0.5.14 → 0.5.16

package/dist/collection/components/memo/mrd-memo-list/mrd-memo-list.js

@@ -0,0 +1,559 @@
+import { Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
+import { t } from "../../../utils/i18n";
+import { formatDateTime } from "../../../utils/format";
+import { buildListPath } from "../../../utils/query-params";
+import { buildSortParam, buildTableQueryParams, parseDefaultSort } from "../../table/mrd-table/table-query";
+/** Plain-text length above which a card's body is clamped with a show-more toggle. */
+const BODY_PREVIEW_THRESHOLD = 220;
+/**
+ * Card-view body for a `commons.memo` collection — the alternative to the flat
+ * `mrd-table` a `mrd-memo-container` can switch to. Deliberately simpler than
+ * `mrd-table`'s virtual-scroll internals: memo cards accumulate via a plain
+ * "load more" affordance rather than windowed rendering, since a bounded card
+ * list of notes doesn't need that complexity.
+ *
+ * Mirrors `mrd-table`'s external contract for the parts a host / mrd-layout-
+ * section already knows how to drive — `init()`, `setPage()`, the `mrdLoadPage`
+ * event shape `{ page, sort, path, qs }` — so no new host-side wiring is needed
+ * to feed it data.
+ *
+ * There is no separate memo detail page: clicking a card opens mrd-memo-
+ * container's quick-edit dialog directly (mrdEdit), the same dialog "New memo"
+ * uses for creation.
+ */
+export class MrdMemoList {
+    constructor() {
+        /** The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config). */
+        this.item = null;
+        /** Parent record id — required for RELATED_VIEW path building. */
+        this.parentId = '';
+        /** Records per page (must match API page size). */
+        this.pageSize = 20;
+        this.locale = navigator.language;
+        /** When true, cards are not clickable (no mrdEdit) — matches mrd-table's own
+         *  readOnly gating on its create action. */
+        this.readOnly = false;
+        /** listItems of the FIELD bound to the `labels` slot, resolved by mrd-layout-section
+         *  from its own items array, same reason mrd-memo-view needs it. */
+        this.labelsListItems = null;
+        /** False when the list is already scoped to its own container (a company's own
+         *  memo tab) — showing "belongs to: <this same company>" on every card there
+         *  would be redundant. True everywhere else (top-level VIEW, or a RELATED_VIEW
+         *  scoped by a different relation, e.g. a person's authored-memos list). */
+        this.showContainerLink = true;
+        this.rows = [];
+        this.loading = false;
+        this.exhausted = false;
+        this.started = false;
+        this.expandedHrefs = new Set();
+        this.nextPage = 0;
+        this.loadMore = () => {
+            if (this.loading || this.exhausted)
+                return;
+            this.emitLoadPage(this.nextPage);
+        };
+        this.toggleExpanded = (e, href) => {
+            e.stopPropagation();
+            const next = new Set(this.expandedHrefs);
+            if (next.has(href))
+                next.delete(href);
+            else
+                next.add(href);
+            this.expandedHrefs = next;
+        };
+    }
+    buildDataPath() {
+        var _a, _b, _c, _d, _e;
+        return buildListPath({
+            isRelatedView: ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW',
+            fromClass: (_b = this.item) === null || _b === void 0 ? void 0 : _b.fromClass,
+            parentId: this.parentId,
+            dataClass: (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.dataClass) !== null && _d !== void 0 ? _d : (_e = this.item) === null || _e === void 0 ? void 0 : _e.relatedClass,
+        });
+    }
+    sortParam() {
+        var _a, _b, _c;
+        const { field, dir } = parseDefaultSort((_c = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.defaultSort) !== null && _c !== void 0 ? _c : '');
+        return buildSortParam(field, dir);
+    }
+    emitLoadPage(page) {
+        var _a, _b, _c;
+        this.loading = true;
+        this.mrdLoadPage.emit({
+            page,
+            sort: this.sortParam(),
+            path: this.buildDataPath(),
+            qs: buildTableQueryParams({
+                page,
+                sort: this.sortParam(),
+                filterClass: (_a = this.item) === null || _a === void 0 ? void 0 : _a.filterClass,
+                viewFilters: (_c = (_b = this.item) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.filter,
+                activeFilters: [],
+            }),
+        });
+    }
+    /** Reset and request page 0. Call after setting all props, mirrors mrd-table.init(). */
+    async init() {
+        this.rows = [];
+        this.loading = false;
+        this.exhausted = false;
+        this.started = true;
+        this.nextPage = 0;
+        this.emitLoadPage(0);
+    }
+    /** Inject the rows for a page (0-based); page 0 replaces, later pages append. */
+    async setPage(pageNumber, rows, hasNext) {
+        this.loading = false;
+        this.rows = pageNumber === 0 ? rows : [...this.rows, ...rows];
+        this.nextPage = pageNumber + 1;
+        this.exhausted = hasNext !== undefined ? !hasNext : rows.length < this.pageSize;
+    }
+    /** Optimistically merge an edit into the matching row — mrdUpdateObject's PATCH
+     *  is fire-and-forget on the host side, so this is what makes an edit visible
+     *  immediately rather than only after the next full reload. */
+    async patchRow(href, values) {
+        this.rows = this.rows.map(row => { var _a, _b; return ((_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) === href ? Object.assign(Object.assign({}, row), values) : row; });
+    }
+    /** Optimistically drop a deleted row — mrdDeleteObject's DELETE is fire-and-
+     *  forget on the host side, same reasoning as patchRow(). */
+    async removeRow(href) {
+        this.rows = this.rows.filter(row => { var _a, _b; return ((_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== href; });
+    }
+    /** Value of a value-slot: reads row[field] via the slot→field map. */
+    slotValue(row, slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return row[field];
+    }
+    /** Relation link for a relation-slot: reads row._links[field]. */
+    slotLink(row, slot) {
+        var _a, _b, _c;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_c = row === null || row === void 0 ? void 0 : row._links) !== null && _c !== void 0 ? _c : {});
+        return links[field];
+    }
+    plainTextLength(row) {
+        const raw = this.slotValue(row, 'body');
+        if (raw == null || raw === '')
+            return 0;
+        return String(raw).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim().length;
+    }
+    renderContainer(row) {
+        if (!this.showContainerLink)
+            return null;
+        const link = this.slotLink(row, 'container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-memo-list__card-container", onClick: e => { e.stopPropagation(); this.mrdNavigate.emit({ href: link.href, label: link.name }); } }, link.name));
+    }
+    renderLabels(row) {
+        const raw = this.slotValue(row, 'labels');
+        const keys = Array.isArray(raw) ? raw.map(String) : (raw != null && raw !== '' ? [String(raw)] : []);
+        if (!keys.length)
+            return null;
+        return (h("div", { class: "mrd-memo-list__labels" }, keys.map(key => {
+            var _a, _b;
+            const listItem = ((_a = this.labelsListItems) !== null && _a !== void 0 ? _a : []).find(li => li.key === key);
+            const label = (_b = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _b !== void 0 ? _b : key;
+            if ((listItem === null || listItem === void 0 ? void 0 : listItem.color) && (listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor)) {
+                return (h("span", { key: key, class: "mrd-memo-list__badge", style: { color: listItem.color, backgroundColor: listItem.backgroundColor } }, label));
+            }
+            return h("span", { key: key, class: "mrd-memo-list__badge mrd-memo-list__badge--plain" }, label);
+        })));
+    }
+    renderBody(row, href) {
+        const raw = this.slotValue(row, 'body');
+        if (raw == null || raw === '')
+            return null;
+        const expanded = this.expandedHrefs.has(href);
+        const needsToggle = this.plainTextLength(row) > BODY_PREVIEW_THRESHOLD;
+        return (h("div", { class: "mrd-memo-list__card-body-wrap" }, h("div", { class: {
+                'mrd-memo-list__card-body': true,
+                'mrd-memo-list__card-body--clamped': needsToggle && !expanded,
+            }, innerHTML: DOMPurify.sanitize(String(raw)) }), needsToggle && (h("button", { type: "button", class: "mrd-memo-list__card-toggle", onClick: e => this.toggleExpanded(e, href) }, t(expanded ? 'textblock_show_less' : 'textblock_show_more', this.locale)))));
+    }
+    renderCard(row, index) {
+        var _a, _b, _c;
+        const titleRaw = this.slotValue(row, 'title');
+        const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
+        const dateRaw = this.slotValue(row, 'date');
+        const author = this.slotLink(row, 'author');
+        const important = !!this.slotValue(row, 'important');
+        const href = (_c = (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : '';
+        return (h("div", { key: href || index, class: { 'mrd-memo-list__card': true, 'mrd-memo-list__card--readonly': this.readOnly }, role: this.readOnly ? undefined : 'button', tabIndex: this.readOnly ? undefined : 0, onClick: () => {
+                if (!this.readOnly)
+                    this.mrdEdit.emit({ row });
+            }, onKeyDown: e => {
+                if (this.readOnly)
+                    return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.mrdEdit.emit({ row });
+                }
+            } }, h("div", { class: "mrd-memo-list__card-header" }, title && h("span", { class: "mrd-memo-list__card-title" }, title), important && (h("span", { class: "mrd-memo-list__card-important", title: t('memo_important', this.locale) }, h("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 7.1-1.01z" }))))), this.renderBody(row, href), this.renderLabels(row), h("div", { class: "mrd-memo-list__card-meta" }, (author === null || author === void 0 ? void 0 : author.name) && h("span", { class: "mrd-memo-list__card-author" }, author.name), dateRaw != null && dateRaw !== '' && (h("span", { class: "mrd-memo-list__card-date" }, formatDateTime(dateRaw, this.locale)))), this.renderContainer(row)));
+    }
+    render() {
+        return (h(Host, { key: '18294fc609b741d38f9933d3ae01d20d6dda5ec5' }, h("div", { key: 'ac6c1adc6575ae1edb2cd507c8ac31b1f28ea35c', class: "mrd-memo-list" }, this.rows.map((row, i) => this.renderCard(row, i)), this.started && !this.loading && this.rows.length === 0 && (h("div", { key: '271281b2e087f8fd55dc51b32b1fe4cce387cdcb', class: "mrd-memo-list__empty" }, t('no_results', this.locale))), !this.exhausted && this.rows.length > 0 && (h("button", { key: '24861c35323d759d69bfd4f358657fe201ca7727', type: "button", class: "mrd-memo-list__load-more", disabled: this.loading, onClick: this.loadMore }, t('load_more', this.locale))))));
+    }
+    static get is() { return "mrd-memo-list"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-memo-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-memo-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem | null",
+                    "resolved": "ClientLayoutItem | null",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.memo` archetype binding."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent record id \u2014 required for RELATED_VIEW path building."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-id",
+                "defaultValue": "''"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Records per page (must match API page size)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "20"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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, cards are not clickable (no mrdEdit) \u2014 matches mrd-table's own\nreadOnly gating on its create action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "labelsListItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientListValue[] | null",
+                    "resolved": "ClientListValue[] | null",
+                    "references": {
+                        "ClientListValue": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientListValue",
+                            "referenceLocation": "ClientListValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "listItems of the FIELD bound to the `labels` slot, resolved by mrd-layout-section\nfrom its own items array, same reason mrd-memo-view needs it."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "showContainerLink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "False when the list is already scoped to its own container (a company's own\nmemo tab) \u2014 showing \"belongs to: <this same company>\" on every card there\nwould be redundant. True everywhere else (top-level VIEW, or a RELATED_VIEW\nscoped by a different relation, e.g. a person's authored-memos list)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-container-link",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rows": {},
+            "loading": {},
+            "exhausted": {},
+            "started": {},
+            "expandedHrefs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdLoadPage",
+                "name": "mrdLoadPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a page needs fetching; same shape as mrd-table's mrdLoadPage minus `qs`'s\ncolumn-filter support (cards have no filter UI) \u2014 host calls setPage() with the result."
+                },
+                "complexType": {
+                    "original": "{ page: number; sort: string; path: string; qs: string }",
+                    "resolved": "{ page: number; sort: string; path: string; qs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdEdit",
+                "name": "mrdEdit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A card was clicked (and not read-only). mrd-memo-container opens its quick-\nedit dialog pre-filled from `row` \u2014 no navigation, no detail page."
+                },
+                "complexType": {
+                    "original": "{ row: Record<string, unknown> }",
+                    "resolved": "{ row: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The container link on a card was clicked \u2014 this is real navigation (to the\ncontainer record), unrelated to mrdEdit."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "init": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset and request page 0. Call after setting all props, mirrors mrd-table.init().",
+                    "tags": []
+                }
+            },
+            "setPage": {
+                "complexType": {
+                    "signature": "(pageNumber: number, rows: Record<string, unknown>[], hasNext?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "pageNumber",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "rows",
+                            "type": "Record<string, unknown>[]",
+                            "docs": ""
+                        }, {
+                            "name": "hasNext",
+                            "type": "boolean | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject the rows for a page (0-based); page 0 replaces, later pages append.",
+                    "tags": []
+                }
+            },
+            "patchRow": {
+                "complexType": {
+                    "signature": "(href: string, values: Record<string, unknown>) => Promise<void>",
+                    "parameters": [{
+                            "name": "href",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "values",
+                            "type": "{ [x: string]: unknown; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Optimistically merge an edit into the matching row \u2014 mrdUpdateObject's PATCH\nis fire-and-forget on the host side, so this is what makes an edit visible\nimmediately rather than only after the next full reload.",
+                    "tags": []
+                }
+            },
+            "removeRow": {
+                "complexType": {
+                    "signature": "(href: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "href",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Optimistically drop a deleted row \u2014 mrdDeleteObject's DELETE is fire-and-\nforget on the host side, same reasoning as patchRow().",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/memo/mrd-memo-view/mrd-memo-view.css

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+:host {
+  display: block;
+}
+
+.mrd-memo-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-3);
+}
+.mrd-memo-view__header {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-3);
+}
+.mrd-memo-view__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-memo-view__important {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-warning);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.mrd-memo-view__important svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.mrd-memo-view__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-memo-view__meta-author {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: inherit;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+}
+.mrd-memo-view__meta-author:hover {
+  color: var(--mrd-color-primary);
+  text-decoration: underline;
+}
+.mrd-memo-view__meta-date::before {
+  content: "·";
+  margin-right: var(--mrd-space-2);
+}
+.mrd-memo-view__meta-author + .mrd-memo-view__meta-date::before {
+  content: "·";
+}
+.mrd-memo-view__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-2);
+}
+.mrd-memo-view__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 1.375rem;
+  padding: 0 var(--mrd-space-2);
+  border-radius: var(--mrd-border-radius-full, 999px);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-memo-view__badge--plain {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-memo-view__container-link {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-memo-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-memo-view__divider {
+  height: var(--mrd-border-width);
+  background: var(--mrd-color-neutral-200);
+}
+.mrd-memo-view__body {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-800);
+  line-height: var(--mrd-line-height-relaxed);
+  word-break: break-word;
+}