@things-factory/auth-ui 10.1.3 → 10.1.6

package/dist-client/pages/role/role-privilege-page.js

@@ -0,0 +1,801 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/checkbox/checkbox.js';
+import '@operato/oops/ox-oops-note.js';
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client, gqlContext } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { PageView } from '@operato/shell';
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { getDomain } from '@things-factory/auth-base/dist-client';
+/** 아는 축은 사람 말로 쓰고, 그 순서로 세운다. 모르는 축은 자기 이름으로 뒤에 붙는다. */
+const KNOWN_AXES = ['query', 'mutation', 'execute'];
+const AXIS_LABEL = {
+    query: 'label.read',
+    mutation: 'label.write',
+    execute: 'label.execute'
+};
+/**
+ * 한 역할이 무엇을 열 수 있나 — **왼쪽에 모듈, 오른쪽에 그 모듈에서 되는 일.**
+ *
+ * ── 왜 페이지인가 (UX 레인, 2026-09-10) ─────────────────────────────────────
+ * 처음에는 이것을 팝업에 넣었고 사용자에게 「팝업이 너무 작다」를 들었다. 그때 `size` 를 키우는
+ * 것으로 답했는데 그것이 증상 처리였다 — **모듈이 46개고 각 줄에 설명 문장이 붙으면 팝업에
+ * 안 들어간다.** 자리 자체가 틀렸다.
+ *
+ * 그리고 이 저장소의 관례가 그렇다: `editable` 컬럼 139 파일 대 `openPopup` 96 파일 —
+ * **격자에서 고치고, 팝업은 격자가 못 담는 것에 쓴다.** 역할의 이름과 설명은 목록 격자에서
+ * 고치고(`updateMultipleRole`), 권한은 격자가 못 담으므로 이 페이지가 받는다.
+ *
+ * ── 「배울 것이 없다」를 고치는 자리 ────────────────────────────────────────
+ * 사용자 평가가 이랬다 — **「화면으로부터 배울 수 있는 것이 없고, 혼란스럽고, 어렵고, 불편하다」.**
+ * 옛 격자는 `board` 라고만 쓰고 「쓰기를 켜면 이 사람이 무엇을 할 수 있게 되나」를 어디에도 안
+ * 적었다. 설명을 체크박스 `title` 에 숨겨 놨는데 마우스를 올려야 나오고, 그건 배우는 길이 아니다.
+ *
+ * 그래서 **설명은 본문이다.** 체크박스 옆에 문장이 함께 선다.
+ *
+ * ⚠ **그런데 그 문장이 아직 시스템에 없다.** `Privilege.description` 은 칸도 있고
+ * `createPrivilege` 가 받지만, 부팅 동기화는 `{ category, name }` 둘만 저장하고
+ * (`auth-base/server/index.ts:34-36`) 그 mutation 을 부르는 화면이 없다 — 713개 선언이 전부
+ * 빈 설명이다. 그래서 이 화면은 **없으면 없다고 말한다.** 코드 낱말(`board mutation`)을 다시
+ * 보여 주지 않고, 지어내지도 않는다. 글은 UX 레인이 `privilege.category.*` 키로 채우는 중이다.
+ *
+ * ── 저장 범위는 서버가 준 목록이다 ──────────────────────────────────────────
+ * 옛 편집기는 `querySelectorAll('input:checked')` 로 보냈다. 왼쪽에서 다른 모듈을 고르면
+ * 앞 모듈의 체크박스는 **DOM 에 없다** — 그 방식이면 모듈을 옮겨 다니는 것만으로 권한이
+ * 조용히 떨어진다. 여기서는 `rolePrivileges` 가 준 전체가 범위이고, 켠 것은 `assigned` 에만
+ * 있다. 화면이 무엇을 그렸는지와 무관하다.
+ */
+let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /*
+         * 이름을 `role` 로 두면 안 된다 — `HTMLElement` 가 ARIA 반영으로 `role` 을 이미 갖고 있어서
+         * private 필드로 가리면 `CustomElementClass` 에 안 맞는다(TS1238·TS2415).
+         */
+        this.subject = {};
+        this.modules = [];
+        this.assigned = new Set();
+        this.holders = [];
+        this.selected = '';
+        this.keyword = '';
+        this.mySubdomain = '';
+        this.fetchState = 'loading';
+        this.saving = false;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-height: 0;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      [body] {
+        flex: 1;
+        min-height: 0;
+        display: grid;
+        /* 왼쪽은 이름만 담으므로 고정, 오른쪽이 문장을 받으므로 남는 폭을 준다. */
+        grid-template-columns: minmax(200px, 280px) 1fr;
+        gap: var(--spacing-large, 12px);
+        padding: var(--spacing-large, 12px);
+      }
+
+      @media screen and (max-width: 780px) {
+        [body] {
+          /* 좁으면 위아래로. 고른 모듈이 아래에 오는 것이 읽는 순서와 같다. */
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+        }
+      }
+
+      [panel] {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-medium, 10px);
+        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+        overflow: hidden;
+      }
+
+      [panel] > header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.8rem;
+      }
+
+      [panel] > header [count] {
+        color: var(--md-sys-color-outline);
+      }
+
+      [scroll] {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+      }
+
+      /*
+        입력 상자는 md-filled-text-field 다 — 생 input 이 아니다.
+        같은 일을 하는 create-role.ts·create-user.ts 가 이것을 쓰고, 이 꾸러미에서 10개
+        파일이 그렇다(UX 레인이 재서 바로잡아 준 것). 생 input 은 비밀번호·프로필 셋뿐이다.
+      */
+      md-filled-text-field {
+        margin: 8px 12px;
+        width: calc(100% - 24px);
+      }
+
+      /* ── 왼쪽: 모듈 ──────────────────────────────────────────────────────── */
+      ul[modules] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul[modules] li {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        border-left: 3px solid transparent;
+      }
+
+      ul[modules] li:hover {
+        background-color: var(--md-sys-color-surface-variant);
+      }
+
+      /* 고른 것은 면과 왼쪽 선으로 말한다 — 글자색만 바꾸면 야간에 안 보인다. */
+      ul[modules] li[selected] {
+        border-left-color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      ul[modules] li [on] {
+        font-size: 0.78rem;
+        color: var(--md-sys-color-primary);
+      }
+
+      ul[modules] li[selected] [on] {
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      ul[modules] li [none] {
+        font-size: 0.78rem;
+        color: var(--md-sys-color-outline);
+      }
+
+      /* ── 오른쪽: 그 모듈에서 되는 일 ────────────────────────────────────── */
+      ul[axes] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul[axes] li {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 4px 10px;
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
+      }
+
+      ul[axes] li:last-child {
+        border-bottom: none;
+      }
+
+      ul[axes] label {
+        font-size: 0.95rem;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      ul[axes] li[ghost] label {
+        cursor: default;
+      }
+
+      /* 설명은 **본문**이다 — tooltip 이 아니다. 체크박스 아래 칸을 비워 두고 거기 놓는다. */
+      ul[axes] [says] {
+        grid-column: 2;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.85rem;
+        line-height: 1.55;
+      }
+
+      ul[axes] [says][missing] {
+        color: var(--md-sys-color-outline);
+        font-style: italic;
+      }
+
+      ul[axes] li[ghost] label {
+        text-decoration: line-through;
+        color: var(--md-sys-color-outline);
+      }
+
+      /*
+        Which role is this? The header alone was not enough - it is one line of chrome above a
+        page full of module names, and a role carries a description that says what the job is.
+        Name and description sit in the body, where the reader is already looking.
+      */
+      [subject] {
+        margin: var(--spacing-large, 12px) var(--spacing-large, 12px) 0;
+      }
+
+      [subject] [name] {
+        font-size: 1.15rem;
+        font-weight: 640;
+      }
+
+      [subject] [says] {
+        margin-top: 2px;
+        font-size: 0.88rem;
+        line-height: 1.55;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [subject] [says][missing] {
+        color: var(--md-sys-color-outline);
+        font-style: italic;
+      }
+
+      /*
+        What is on, all together. The two panels answer "what can this role do in one module";
+        they cannot answer "what does this role do", because that reading needs 46 clicks.
+      */
+      [granted] {
+        margin: var(--spacing-medium, 8px) var(--spacing-large, 12px) 0;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-medium, 10px);
+        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+      }
+
+      [granted] > header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        padding: 8px 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.8rem;
+      }
+
+      [granted] > header [count] {
+        color: var(--md-sys-color-outline);
+      }
+
+      [granted] ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 6px;
+        list-style: none;
+        margin: 0;
+        padding: 0 12px 10px;
+        /* Long-running roles reach every module; cap the block so the panels stay on screen. */
+        max-height: 22vh;
+        overflow: auto;
+      }
+
+      [granted] li {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 5px;
+        padding: 3px 9px;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.82rem;
+        cursor: pointer;
+      }
+
+      [granted] li:hover {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      [granted] li [axes] {
+        color: var(--md-sys-color-primary);
+      }
+
+      [granted] li:hover [axes] {
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      [granted] [empty] {
+        padding: 0 12px 10px;
+      }
+
+      [note] {
+        margin: var(--spacing-large, 12px);
+        padding: 10px 12px;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        font-size: 0.85rem;
+        line-height: 1.55;
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [note][attention] {
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+
+      [empty] {
+        padding: var(--spacing-large, 12px);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.85rem;
+      }
+    `
+    ]; }
+    /**
+     * 부모 도메인의 역할은 여기서 못 고친다 — `updateRole` 의 범위가 `domain.id` 하나다.
+     * 목록이 상속으로 보여 주므로 관리자가 여기까지 온다. 읽기 전용으로 두고 어디로 가야 하는지
+     * 말한다. (프로필의 `domain` 에 `id` 가 없어서 `subdomain` 으로 견준다.)
+     */
+    get inherited() {
+        const subdomain = this.subject?.domain?.subdomain;
+        return Boolean(subdomain && this.mySubdomain && subdomain !== this.mySubdomain);
+    }
+    get savable() {
+        return this.fetchState === 'loaded' && !this.saving && !this.inherited;
+    }
+    get visibleModules() {
+        const keyword = this.keyword.trim().toLowerCase();
+        return keyword ? this.modules.filter(m => m.category.toLowerCase().includes(keyword)) : this.modules;
+    }
+    get context() {
+        return {
+            title: this.subject?.name || i18next.t('field.privileges'),
+            help: 'auth/roles',
+            actions: this.inherited
+                ? []
+                : [
+                    {
+                        title: i18next.t('button.save'),
+                        action: this.onSave.bind(this)
+                    }
+                ]
+        };
+    }
+    render() {
+        if (this.fetchState === 'failed') {
+            return html `<ox-oops-note
+        icon="error_outline"
+        title=${i18next.t('text.failed to fetch')}
+        description=${i18next.t('text.please try again')}
+      ></ox-oops-note>`;
+        }
+        return html `
+      ${this.inherited
+            ? html `<div note attention>
+            ${i18next.t('text.role belongs to x domain and is edited there', {
+                x: this.subject?.domain?.name || this.subject?.domain?.subdomain
+            })}
+          </div>`
+            : nothing}
+      ${this.renderSubject()} ${this.renderGranted()} ${this.renderHolders()}
+
+      <div body>
+        <div panel>
+          <header>
+            ${i18next.t('field.module')}
+            <span count>${this.modules.length}</span>
+          </header>
+          <md-filled-text-field
+            type="text"
+            label=${i18next.t('text.filter by module name')}
+            .value=${this.keyword}
+            @input=${(e) => (this.keyword = e.target.value)}
+          ></md-filled-text-field>
+          <div scroll>${this.renderModules()}</div>
+        </div>
+
+        <div panel>
+          <header>
+            ${this.selected ? moduleLabel(this.selected) : i18next.t('field.privileges')}
+            <span count>${i18next.t('text.x of y on', { x: this.assigned.size, y: this.cellCount() })}</span>
+          </header>
+          <div scroll>${this.renderAxes()}</div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Which role am I editing, and what is it for.
+     *
+     * The page header carried the name and nothing else, and the description - the one line that
+     * says what the job is - was only visible back on the list. A reader who arrives by link had
+     * no way to tell "Administrator" from "PLANT-MANAGER" beyond the word itself.
+     *
+     * A role with no description says so. The next thing to do is write one, in the list grid.
+     */
+    renderSubject() {
+        if (this.fetchState !== 'loaded') {
+            return nothing;
+        }
+        return html `
+      <div subject>
+        <div name>${this.subject?.name || i18next.t('label.role')}</div>
+        ${this.subject?.description
+            ? html `<div says>${this.subject.description}</div>`
+            : html `<div says missing>${i18next.t('text.no description for this role')}</div>`}
+      </div>
+    `;
+    }
+    /**
+     * Everything this role has, in one block.
+     *
+     * The two panels answer "what can this role do in this module". They cannot answer "what does
+     * this role do at all" - that reading costs one click per module, 46 of them, and the person
+     * granting a role needs the whole answer before they grant it.
+     *
+     * Only what is on. The full matrix is what the panels are for, and repeating it here would
+     * put the same 46 modules on screen twice.
+     *
+     * Each entry moves the panels to that module, so this block doubles as the way in.
+     */
+    renderGranted() {
+        if (this.fetchState !== 'loaded' || !this.modules.length) {
+            return nothing;
+        }
+        const on = this.modules
+            .map(module => ({
+            category: module.category,
+            axes: module.cells.filter(cell => this.assigned.has(cell.id))
+        }))
+            .filter(entry => entry.axes.length);
+        return html `
+      <div granted>
+        <header>
+          ${i18next.t('field.granted privileges')}
+          <span count>${i18next.t('text.x of y on', { x: this.assigned.size, y: this.cellCount() })}</span>
+        </header>
+        ${on.length
+            ? html `<ul>
+              ${on.map(entry => html `<li
+                  title=${i18next.t('text.pick a module on the left')}
+                  @click=${() => (this.selected = entry.category)}
+                >
+                  ${moduleLabel(entry.category)}
+                  <span axes>${entry.axes.map(cell => axisLabel(cell.axis)).join(' · ')}</span>
+                </li>`)}
+            </ul>`
+            : html `<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`}
+      </div>
+    `;
+    }
+    /**
+     * 이 역할을 가진 사람.
+     *
+     * 권한을 켜기 **전에** 누가 영향을 받는지 보이는 자리다. 아무도 안 가진 역할을 고치는 것과
+     * 40명이 가진 역할을 고치는 것은 다른 일인데, 옛 화면은 그 둘이 똑같이 보였다.
+     */
+    renderHolders() {
+        if (this.fetchState !== 'loaded') {
+            return nothing;
+        }
+        return this.holders.length
+            ? html `<div note>
+          ${i18next.t('text.x people hold this role', { x: this.holders.length })}
+          — ${this.holders.map(h => h.name || h.email).join(', ')}
+        </div>`
+            : html `<div note>${i18next.t('text.no one holds this role yet')}</div>`;
+    }
+    renderModules() {
+        if (this.fetchState === 'loading') {
+            return html `<div empty>${i18next.t('text.loading')}</div>`;
+        }
+        if (!this.modules.length) {
+            return html `<div empty>${i18next.t('text.no privilege declared in this deployment')}</div>`;
+        }
+        if (!this.visibleModules.length) {
+            return html `<div empty>${i18next.t('text.nothing matches x', { x: this.keyword })}</div>`;
+        }
+        return html `
+      <ul modules>
+        ${this.visibleModules.map(module => {
+            const on = module.cells.filter(cell => this.assigned.has(cell.id)).length;
+            return html `
+            <li ?selected=${module.category === this.selected} @click=${() => (this.selected = module.category)}>
+              <span>${moduleLabel(module.category)}</span>
+              ${on
+                ? html `<span on>${i18next.t('text.x on', { x: on })}</span>`
+                : html `<span none>${i18next.t('text.none on')}</span>`}
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+    }
+    renderAxes() {
+        if (this.fetchState === 'loading') {
+            return html `<div empty>${i18next.t('text.loading')}</div>`;
+        }
+        const module = this.modules.find(m => m.category === this.selected);
+        if (!module) {
+            /* 아무것도 안 고른 상태 — 무엇을 해야 하는지 말한다. */
+            return html `<div empty>${i18next.t('text.pick a module on the left')}</div>`;
+        }
+        return html `
+      <ul axes>
+        ${module.cells.map(cell => {
+            const on = this.assigned.has(cell.id);
+            return html `
+            <li ?ghost=${cell.deprecated}>
+              <md-checkbox
+                id="cell-${cell.id}"
+                touch-target="wrapper"
+                .checked=${on}
+                ?disabled=${this.inherited || (cell.deprecated && !on)}
+                @change=${(e) => this.onToggle(cell.id, e.target.checked)}
+              ></md-checkbox>
+              <!--
+                md-checkbox 는 native input 이 아니라서 label for 로는 안 눌린다.
+                글자를 눌러도 켜지는 것이 사람이 기대하는 것이므로 같은 처리기를 붙인다.
+              -->
+              <label
+                for="cell-${cell.id}"
+                @click=${() => {
+                if (!this.inherited && !(cell.deprecated && !on)) {
+                    this.onToggle(cell.id, !on);
+                }
+            }}
+                >${axisLabel(cell.axis)}</label
+              >
+
+              ${cell.deprecated
+                ? html `<div says>${i18next.t('text.privilege no longer declared')}</div>`
+                : axisSays(module.category, cell) ||
+                    html `<div says missing>${i18next.t('text.no description for this privilege')}</div>`}
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+    }
+    cellCount() {
+        return this.modules.reduce((sum, module) => sum + module.cells.length, 0);
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.lifecycle = lifecycle;
+            await this.fetch();
+        }
+    }
+    /**
+     * 한 번의 질의로 **전체 권한과 이 역할이 가진 것**을 함께 읽는다(`rolePrivileges(roleId:)`).
+     *
+     * 역할 이름과 가진 사람은 `roles(filters: id)` 로 같은 문서에서 받는다 — 옛 편집기는 역할을
+     * **이름**으로 다시 찾았고, 부모 도메인에 같은 이름이 있으면 남의 역할을 그렸다.
+     */
+    async fetch() {
+        const roleId = this.lifecycle?.resourceId;
+        if (!roleId) {
+            this.fetchState = 'failed';
+            return;
+        }
+        this.fetchState = 'loading';
+        this.mySubdomain = (await getDomain())?.subdomain || '';
+        const response = await client.query({
+            query: gql `
+        query ($roleId: String!, $filters: [Filter!]) {
+          rolePrivileges(roleId: $roleId) {
+            id
+            name
+            category
+            description
+            assigned
+            deprecated
+          }
+          roles(filters: $filters) {
+            items {
+              id
+              name
+              description
+              domain {
+                id
+                name
+                subdomain
+              }
+              users {
+                id
+                name
+                email
+              }
+            }
+          }
+        }
+      `,
+            variables: { roleId, filters: [{ name: 'id', operator: 'eq', value: roleId }] },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            /* 실패를 「권한이 하나도 없다」로 그리지 않는다 — 저장하면 실제로 그렇게 된다. */
+            this.fetchState = 'failed';
+            return;
+        }
+        this.subject = response.data?.roles?.items?.[0] || {};
+        this.holders = this.subject.users || [];
+        this.build(response.data?.rolePrivileges || []);
+        this.fetchState = 'loaded';
+        /*
+         * The shell reads `context` once, when the page becomes active - before this fetch
+         * resolves. Without this call the header keeps the fallback, so the screen showed
+         * "권한" and never said which role was being edited.
+         */
+        this.updateContext();
+    }
+    /** 평평한 목록을 모듈로 접는다. 축 순서는 아는 것 먼저, 나머지는 이름 순. */
+    build(privileges) {
+        const byCategory = new Map();
+        const assigned = new Set();
+        for (const privilege of privileges) {
+            const { id, name, category, description, deprecated } = privilege;
+            if (!id || !name || !category) {
+                continue;
+            }
+            if (privilege.assigned) {
+                assigned.add(id);
+            }
+            const module = byCategory.get(category) || { category, cells: [] };
+            module.cells.push({ id, axis: name, deprecated: Boolean(deprecated), description });
+            byCategory.set(category, module);
+        }
+        for (const module of byCategory.values()) {
+            module.cells.sort((a, b) => axisOrder(a.axis) - axisOrder(b.axis) || a.axis.localeCompare(b.axis));
+        }
+        this.modules = [...byCategory.values()].sort((a, b) => moduleLabel(a.category).localeCompare(moduleLabel(b.category)));
+        this.assigned = assigned;
+        /* 고른 것이 없으면 첫 모듈을 연다 — 빈 오른쪽 판을 처음 화면으로 두지 않는다. */
+        if (!this.modules.find(m => m.category === this.selected)) {
+            this.selected = this.modules[0]?.category || '';
+        }
+    }
+    onToggle(id, checked) {
+        const next = new Set(this.assigned);
+        checked ? next.add(id) : next.delete(id);
+        this.assigned = next;
+    }
+    /**
+     * 저장.
+     *
+     * **범위는 `modules` 전체다.** 왼쪽에서 다른 모듈을 고르면 앞 모듈의 체크박스는 DOM 에
+     * 없는데, 그것을 훑어 보내던 것이 옛 편집기가 권한을 조용히 떼던 자리다.
+     *
+     * `privileges` 만 보낸다 — 이름과 설명은 목록 격자가 소유한다.
+     */
+    async onSave() {
+        if (!this.savable) {
+            return;
+        }
+        this.saving = true;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $patch: RolePatch!) {
+            updateRole(id: $id, patch: $patch) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id: this.subject.id,
+                    patch: { privileges: [...this.assigned].map(id => ({ id })) }
+                },
+                context: gqlContext()
+            });
+            if (response.errors?.length) {
+                document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+                return;
+            }
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } }));
+            /* 유령을 뗐으면 목록에서 사라져야 하고, 켠 것이 요약에 반영돼야 한다. */
+            await this.fetch();
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], RolePrivilegePage.prototype, "lifecycle", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RolePrivilegePage.prototype, "subject", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], RolePrivilegePage.prototype, "modules", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], RolePrivilegePage.prototype, "assigned", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], RolePrivilegePage.prototype, "holders", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "keyword", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "mySubdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "fetchState", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RolePrivilegePage.prototype, "saving", void 0);
+RolePrivilegePage = __decorate([
+    customElement('role-privilege-page')
+], RolePrivilegePage);
+export { RolePrivilegePage };
+/**
+ * 모듈 이름을 사람 말로.
+ *
+ * `privilege.category.<category>` 키가 있으면 그것을 쓰고, 없으면 **코드 낱말을 그대로** 낸다 —
+ * 지어내지 않는다. 지금 46개 중 하나(`system`)만 채워져 있고, UX 레인이 나머지를 쓰고 있다.
+ */
+function moduleLabel(category) {
+    const key = `privilege.category.${category}`;
+    return i18next.t(key, { defaultValue: category });
+}
+function axisLabel(axis) {
+    return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis;
+}
+/**
+ * 「켜면 무엇을 할 수 있게 되나」 — **이 화면의 이유다.**
+ *
+ * 사용자 평가가 「화면으로부터 배울 수 있는 것이 없다」였고, 그 원인은 화면이 감춘 것이 아니라
+ * 시스템에 그 문장이 없던 것이었다. 부팅 동기화가 `{ category, name }` 둘만 저장해서
+ * (`auth-base/server/index.ts:34-36`) 713개 선언이 전부 빈 설명이었다.
+ *
+ * 그 글을 UX 레인이 `privilege.allows.<category>.<axis>` 로 썼다(57 모듈 · 104 문장, ko·en).
+ * 번역은 디스크에서 서비스되므로 **배포를 기다리지 않고 붙는다.**
+ *
+ * ── 보는 순서 ───────────────────────────────────────────────────────────────
+ * ```
+ * 1  서버 칸        채워지면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다
+ * 2  우리가 쓴 글    privilege.allows.<category>.<axis>
+ * 3  없다고 말한다   둘 다 없으면. 지어내지 않는다
+ * ```
+ *
+ * ⚠ **`defaultValue: ''` 가 없으면 3번으로 못 떨어진다** — i18next 는 키가 없을 때 **키 이름을
+ * 그대로** 돌려주므로 화면에 `privilege.allows.board.query` 가 찍힌다. 빈 문자열을 기본값으로
+ * 줘서 「없음」이 거짓으로 판정되게 한다.
+ */
+function axisSays(category, cell) {
+    if (cell.description) {
+        return html `<div says>${cell.description}</div>`;
+    }
+    const written = i18next.t(`privilege.allows.${category}.${cell.axis}`, { defaultValue: '' });
+    return written ? html `<div says>${written}</div>` : null;
+}
+function axisOrder(axis) {
+    const index = KNOWN_AXES.indexOf(axis);
+    return index < 0 ? KNOWN_AXES.length : index;
+}
+//# sourceMappingURL=role-privilege-page.js.map