@things-factory/auth-ui 10.1.6 → 10.1.13

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

@@ -1,16 +1,18 @@
 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/input/ox-input-search.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 { openPopup } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { PageView } from '@operato/shell';
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { getDomain } from '@things-factory/auth-base/dist-client';
+import { filterPrivilegeModules, selectedVisibleModule } from '../../components/role-privilege-picker-state.js';
 /** 아는 축은 사람 말로 쓰고, 그 순서로 세운다. 모르는 축은 자기 이름으로 뒤에 붙는다. */
 const KNOWN_AXES = ['query', 'mutation', 'execute'];
 const AXIS_LABEL = {
@@ -19,35 +21,33 @@ const AXIS_LABEL = {
     execute: 'label.execute'
 };
 /**
- * 한 역할이 무엇을 열 수 있나 — **왼쪽에 모듈, 오른쪽에 그 모듈에서 되는 일.**
+ * 한 역할이 무엇을 할 수 있나 — **켜진 것이 문장으로 본문에 선다.**
  *
- * ── 왜 페이지인가 (UX 레인, 2026-09-10) ─────────────────────────────────────
- * 처음에는 이것을 팝업에 넣었고 사용자에게 「팝업이 너무 작다」를 들었다. 그때 `size` 를 키우는
- * 것으로 답했는데 그것이 증상 처리였다 — **모듈이 46개고 각 줄에 설명 문장이 붙으면 팝업에
- * 안 들어간다.** 자리 자체가 틀렸다.
+ * ── 사용자 평가가 이 화면을 두 번 뒤집었다 ──────────────────────────────────
+ * **「화면으로부터 배울 수 있는 것이 없고, 혼란스럽고, 어렵고, 불편하다.」**
  *
- * 그리고 이 저장소의 관례가 그렇다: `editable` 컬럼 139 파일 대 `openPopup` 96 파일 —
- * **격자에서 고치고, 팝업은 격자가 못 담는 것에 쓴다.** 역할의 이름과 설명은 목록 격자에서
- * 고치고(`updateMultipleRole`), 권한은 격자가 못 담으므로 이 페이지가 받는다.
+ * 처음에는 팝업 안의 `모듈 × 읽기·쓰기` 격자였다. 격자는 「이 모듈에서 무엇이 켜졌나」에
+ * 답하는데, 관리자가 묻는 것은 **「이 역할이 무엇을 하나」**다. 격자로 그걸 읽으려면 모듈
+ * 46개를 한 번씩 열어야 하고, 역할을 부여하는 사람은 부여하기 **전에** 그 답이 필요하다.
  *
- * ── 「배울 것이 없다」를 고치는 자리 ────────────────────────────────────────
- * 사용자 평가가 이랬다 — **「화면으로부터 배울 수 있는 것이 없고, 혼란스럽고, 어렵고, 불편하다」.**
- * 옛 격자는 `board` 라고만 쓰고 「쓰기를 켜면 이 사람이 무엇을 할 수 있게 되나」를 어디에도 안
- * 적었다. 설명을 체크박스 `title` 에 숨겨 놨는데 마우스를 올려야 나오고, 그건 배우는 길이 아니다.
+ * 그래서 뒤집었다(UX 레인 §2). 켜진 것을 문장으로 늘어놓는 것이 본문이고, 격자는 **더할 때
+ * 쓰는 도구**로 자리를 옮겼다(`renderAdd`). 버린 것은 없다.
  *
- * 그래서 **설명은 본문이다.** 체크박스 옆에 문장이 함께 선다.
+ * ── 문장은 어디서 오나 ──────────────────────────────────────────────────────
+ * ```
+ * 1  Privilege.description   서버가 채우면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다
+ * 2  privilege.allows.<category>.<axis>   UX 레인이 쓴 글 (57 모듈 · 104 문장, ko·en)
+ * 3  「아직 설명이 없습니다」  둘 다 없으면. 지어내지 않는다
+ * ```
  *
- * ⚠ **그런데 그 문장이 아직 시스템에 없다.** `Privilege.description` 은 칸도 있고
- * `createPrivilege` 가 받지만, 부팅 동기화는 `{ category, name }` 둘만 저장하고
- * (`auth-base/server/index.ts:34-36`) 그 mutation 을 부르는 화면이 없다 — 713개 선언이 전부
- * 빈 설명이다. 그래서 이 화면은 **없으면 없다고 말한다.** 코드 낱말(`board mutation`)을 다시
- * 보여 주지 않고, 지어내지도 않는다. 글은 UX 레인이 `privilege.category.*` 키로 채우는 중이다.
+ * 1번은 아직 **전부 비어 있다** — 부팅 동기화가 `{ category, name }` 둘만 저장한다
+ * (`auth-base/server/index.ts:34-36`). 그래서 지금 화면에 나오는 문장은 전부 2번이다.
  *
  * ── 저장 범위는 서버가 준 목록이다 ──────────────────────────────────────────
- * 옛 편집기는 `querySelectorAll('input:checked')` 로 보냈다. 왼쪽에서 다른 모듈을 고르면
- * 앞 모듈의 체크박스는 **DOM 에 없다** — 그 방식이면 모듈을 옮겨 다니는 것만으로 권한이
- * 조용히 떨어진다. 여기서는 `rolePrivileges` 가 준 전체가 범위이고, 켠 것은 `assigned` 에만
- * 있다. 화면이 무엇을 그렸는지와 무관하다.
+ * 옛 편집기는 `querySelectorAll('input:checked')` 로 보냈다. 「더하기」 판에서 다른 모듈로
+ * 옮기면 앞 모듈의 체크박스는 **DOM 에 없다** — 그 방식이면 모듈을 옮겨 다니는 것만으로
+ * 권한이 조용히 떨어진다. 여기서는 `rolePrivileges` 가 준 전체가 범위이고 켠 것은
+ * `assigned` 에만 있다. 화면이 무엇을 그렸는지와 무관하다.
  */
 let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageView) {
     constructor() {
@@ -65,6 +65,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         this.mySubdomain = '';
         this.fetchState = 'loading';
         this.saving = false;
+        this.dirty = false;
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -128,11 +129,19 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
       }
 
       /*
-        입력 상자는 md-filled-text-field 다 — 생 input 이 아니다.
-        같은 일을 하는 create-role.ts·create-user.ts 가 이것을 쓰고, 이 꾸러미에서 10개
-        파일이 그렇다(UX 레인이 재서 바로잡아 준 것). 생 input 은 비밀번호·프로필 셋뿐이다.
+        걸러 보는 칸은 ox-input-search 다.
+
+        여기 md-filled-text-field 를 썼다가 사용자에게 「전체적인 스타일에 어울리지 않는다」를
+        들었다. 그것은 회색 채움 상자에 라벨이 떠 있는 **폼 칸**이고, 이 자리는 **찾는 칸**이다.
+
+        근거는 이 화면 자신에 있다 — 역할 목록의 검색 칸이 이 부품이다.
+        [읽었음] @operato/data-grist/dist/src/filters/filters-form.js:153
+
+        ⚠ 폼 칸도 md-* 를 안 쓴다 — 사용자가 2026-09-11 에 역할 화면 전체로 못 박았다
+        (「너무 크고 스타일이 안 어울린다」). native input 에 FormFieldStyles 를 얹는다.
+        그 블록이 정확히 이 일을 하려고 있는 것이다(shadow 경계를 넘는 토큰 연결).
       */
-      md-filled-text-field {
+      ox-input-search {
         margin: 8px 12px;
         width: calc(100% - 24px);
       }
@@ -192,6 +201,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         gap: 4px 10px;
         padding: 12px 14px;
         border-bottom: 1px solid var(--md-sys-color-surface-variant);
+        cursor: pointer;
       }
 
       ul[axes] li:last-child {
@@ -208,6 +218,39 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         cursor: default;
       }
 
+      ul[axes] li[ghost],
+      ul[axes] li[readonly] {
+        cursor: default;
+      }
+
+      [picker-footer] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.85rem;
+      }
+
+      [picker-footer] button {
+        flex: 0 0 auto;
+        padding: 8px 16px;
+        border: 0;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      [picker-footer] button:disabled {
+        cursor: default;
+        opacity: 0.45;
+      }
+
       /* 설명은 **본문**이다 — tooltip 이 아니다. 체크박스 아래 칸을 비워 두고 거기 놓는다. */
       ul[axes] [says] {
         grid-column: 2;
@@ -257,6 +300,10 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         they cannot answer "what does this role do", because that reading needs 46 clicks.
       */
       [granted] {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
         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);
@@ -276,43 +323,21 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         color: var(--md-sys-color-outline);
       }
 
+      /*
+        ⚠ 여기 display: flex 와 flex-wrap: wrap 이 있었다 — 칩으로 그리던 시절의 규칙이다.
+        마크업을 줄 목록으로 바꾼 뒤에도 남아서 **문장이 한 줄씩 서지 않고 칩처럼 옆으로
+        흘렀다.** 내 ul[lines] 는 display 를 선언하지 않으므로 맞설 것이 없었다.
+        마크업을 갈 때는 그 마크업만 쓰던 CSS 를 함께 지운다.
+
+        높이도 바뀐다. max-height: 22vh 는 격자 두 판이 늘 아래에 펼쳐져 있던 시절의 값이다.
+        지금은 **이 목록이 본문**이므로(§2) 남는 높이를 여기가 받고, 59줄은 여기서 흐른다.
+      */
       [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;
+        flex: 1;
+        min-height: 0;
         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;
       }
@@ -332,6 +357,101 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         color: var(--md-sys-color-on-error-container);
       }
 
+      /*
+        ── 할 수 있는 일 (본문) ────────────────────────────────────────────────
+        읽는 것이 먼저이므로 글자를 본문 크기로 둔다. 격자의 0.85rem 보다 크다.
+      */
+      ul[lines] {
+        list-style: none;
+        margin: 0;
+        padding: 0 12px;
+      }
+
+      ul[lines] li {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 9px 2px;
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
+      }
+
+      ul[lines] li:last-child {
+        border-bottom: none;
+      }
+
+      ul[lines] [line] {
+        flex: 1;
+        font-size: 0.95rem;
+        line-height: 1.5;
+      }
+
+      /* 문장이 없어서 이름으로 지은 줄 — 문장과 구별되게 조용히 둔다. */
+      ul[lines] [named] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      ul[lines] li[ghost] [line] {
+        text-decoration: line-through;
+        color: var(--md-sys-color-outline);
+      }
+
+      ul[lines] [tag] {
+        margin-left: 8px;
+        font-size: 0.78rem;
+        text-decoration: none;
+        color: var(--md-sys-color-outline);
+      }
+
+      /* 떼기 — 줄마다 있으므로 조용하고, 그 줄에 머물 때 드러난다. */
+      button[drop] {
+        flex: none;
+        display: inline-flex;
+        padding: 3px;
+        color: var(--md-sys-color-outline);
+        background-color: transparent;
+        border: none;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        cursor: pointer;
+      }
+      button[drop] md-icon {
+        --md-icon-size: 18px;
+      }
+      ul[lines] li:hover button[drop] {
+        color: var(--md-sys-color-error);
+        background-color: var(--md-sys-color-error-container);
+      }
+
+      button[add] {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin: 10px 12px 12px;
+        padding: 8px 14px 8px 10px;
+        font: var(--label-font, inherit);
+        font-size: 0.85rem;
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border: none;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        cursor: pointer;
+      }
+      button[add] md-icon {
+        --md-icon-size: 18px;
+      }
+
+      button[close] {
+        margin-left: auto;
+        display: inline-flex;
+        padding: 2px;
+        color: var(--md-sys-color-on-surface-variant);
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+      }
+      button[close] md-icon {
+        --md-icon-size: 18px;
+      }
+
       [empty] {
         padding: var(--spacing-large, 12px);
         color: var(--md-sys-color-on-surface-variant);
@@ -352,18 +472,59 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         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;
+        return filterPrivilegeModules(this.modules, this.keyword, moduleLabel);
     }
+    /**
+     * `role-privilege-picker` 는 이 페이지의 상태를 읽어 그린다. 둘은 서로 다른 shadow root 이므로
+     * 여기 state 만 바꾸면 picker 는 다시 그릴 이유를 알지 못한다. 검색·모듈 선택은 그 누락 때문에
+     * 눌러도 화면이 그대로였다.
+     */
+    refreshPicker() {
+        this.picker?.requestUpdate();
+    }
+    selectModule(category) {
+        if (this.selected === category) {
+            return;
+        }
+        this.selected = category;
+        this.refreshPicker();
+    }
+    /**
+     * ox-input-search 의 `change` 는 입력을 끝내고 포커스를 옮길 때만 온다. 모듈을 찾는 칸은
+     * 입력하는 즉시 좁혀져야 하므로 shadow 경계를 넘어오는 native input 이벤트도 함께 받는다.
+     */
+    updateKeyword(event) {
+        const nativeInput = event.composedPath().find(node => node instanceof HTMLInputElement);
+        const keyword = nativeInput?.value ?? event.target?.value ?? '';
+        this.keyword = keyword;
+        /* 검색 결과에 현재 선택 모듈이 없으면 첫 결과를 바로 연다. 오른쪽에 이전 모듈의 축이
+           남아 있으면 검색이 안 된 것처럼 보이기 때문이다. */
+        this.selected = selectedVisibleModule(this.visibleModules, this.selected);
+        this.refreshPicker();
+    }
+    /*
+     * The page is named after the screen, not after the role it happens to be showing.
+     *
+     * It used to carry `this.subject.name`, and the reader then saw "Administrator" three times
+     * on one screen: the tab, the page header, and the subject block in the body. Worse, the page
+     * had no name of its own - nothing said what this screen is for.
+     *
+     * A record-valued title does have precedent here (appliance, app-binding, application in this
+     * package, and board-ui's play list - 4 of the 6 object-form titles), but those pages are the
+     * record's own detail. This one is one facet of a role, and the role is already named in the
+     * body, where a description can sit beside it.
+     */
     get context() {
         return {
-            title: this.subject?.name || i18next.t('field.privileges'),
+            title: { icon: 'vpn_key', text: i18next.t('title.role privileges') },
             help: 'auth/roles',
             actions: this.inherited
                 ? []
                 : [
                     {
                         title: i18next.t('button.save'),
+                        disabled: !this.dirty || !this.savable,
+                        disabledTitle: this.saving ? '권한을 저장하고 있습니다.' : '권한을 바꾼 뒤 저장할 수 있습니다.',
                         action: this.onSave.bind(this)
                     }
                 ]
@@ -385,41 +546,16 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
             })}
           </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>
+      ${this.renderSubject()} ${this.renderHolders()} ${this.renderGranted()}
     `;
     }
     /**
-     * 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.
+     * 머리말은 이름만 들고 있었고, **직무를 말하는 한 줄인 설명은 목록에만 있었다.** 링크로
+     * 들어온 사람은 `Administrator` 와 `PLANT-MANAGER` 를 낱말 말고는 구별할 방법이 없다.
      *
-     * A role with no description says so. The next thing to do is write one, in the list grid.
+     * 설명이 없는 역할은 없다고 말한다. 다음에 할 일은 그것을 쓰는 것이고, 자리는 목록 격자다.
      */
     renderSubject() {
         if (this.fetchState !== 'loaded') {
@@ -435,44 +571,165 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
     `;
     }
     /**
-     * Everything this role has, in one block.
+     * **이 역할이 할 수 있는 일 — 이것이 본문이다.**
+     *
+     * ── 뒤집은 이유 (UX 레인 §2, 사용자 평가) ──────────────────────────────────
+     * 격자는 「이 모듈에서 무엇이 켜졌나」에 답한다. 관리자가 묻는 것은 **「이 역할이 무엇을
+     * 하나」**이고, 격자로 그것을 읽으려면 모듈 46개를 한 번씩 열어야 한다. 역할을 부여하는
+     * 사람은 부여하기 **전에** 그 답이 필요하다.
+     *
+     * 그래서 켜진 것을 문장으로 늘어놓는 것이 본문이 되고, 격자는 **더할 때 쓰는 도구**로
+     * 자리를 옮긴다(`renderAdd`). 문장이 줄마다 있으므로 배우는 일이 따로 없다.
      *
-     * 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.
+     * ── 켜진 것만 낸다 ─────────────────────────────────────────────────────────
+     * 전체를 여기 또 그리면 같은 46 모듈이 화면에 두 번 선다. 전체는 「더하기」 판이 갖는다.
      *
-     * 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.
+     * 여기서는 다르다. **이 줄이 곧 그 권한의 신분이다.** 없다고만 쓰면 무엇을 떼는지 모르는
+     * 줄이 되므로, 그때는 `모듈 · 축` 으로 이름을 짓는다. 그것은 코드 낱말이 아니다 —
+     * `privilege.category.*` 57개와 「읽기/쓰기」가 사람 말이다.
      */
     renderGranted() {
-        if (this.fetchState !== 'loaded' || !this.modules.length) {
+        if (this.fetchState !== 'loaded') {
             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);
+        const granted = this.modules
+            .flatMap(module => module.cells.map(cell => ({ category: module.category, cell })))
+            .filter(entry => this.assigned.has(entry.cell.id));
         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>
+          <span count>${granted.length}</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>`)}
+
+        ${granted.length
+            ? html `<ul lines>
+              ${granted.map(({ category, cell }) => this.renderGrantedLine(category, cell))}
             </ul>`
             : html `<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`}
+        ${this.renderAdd()}
+      </div>
+    `;
+    }
+    /**
+     * 한 줄 — 문장과 [떼기].
+     *
+     * 유령(이 배포의 어떤 코드도 요구하지 않는 권한)은 취소선으로 보이고 **떼는 것만** 된다.
+     * 이미 붙어 있으니 뗄 수 있어야 하고, 붙여도 아무 일이 없으니 다시 켤 이유가 없다.
+     */
+    renderGrantedLine(category, cell) {
+        const written = axisText(category, cell);
+        return html `
+      <li ?ghost=${cell.deprecated}>
+        <div line>
+          ${written || html `<span named>${moduleLabel(category)} · ${axisLabel(cell.axis)}</span>`}
+          ${cell.deprecated ? html `<span tag>${i18next.t('text.privilege no longer declared')}</span>` : nothing}
+        </div>
+
+        ${this.inherited
+            ? nothing
+            : html `<button drop title=${i18next.t('button.drop')} @click=${() => this.onToggle(cell.id, false)}>
+              <md-icon>close</md-icon>
+            </button>`}
+      </li>
+    `;
+    }
+    /**
+     * 「＋ 할 수 있는 일 더하기」 — 격자가 여기 들어간다.
+     *
+     * 열어 두지 않는 이유는 하나다 — **처음 읽는 것이 「이 역할이 무엇을 하나」여야 한다.**
+     * 46 모듈이 늘 펼쳐져 있으면 그 답이 화면 아래로 밀린다.
+     *
+     * 상속 역할에는 내주지 않는다. 여기서 저장할 수 없으므로 켜 보게 하는 것이 헛수고다 —
+     * 대신 위쪽 안내가 어느 도메인에서 고치는지 말한다.
+     */
+    renderAdd() {
+        if (this.inherited || this.fetchState !== 'loaded') {
+            return nothing;
+        }
+        if (!this.modules.length) {
+            return html `<div note attention>${i18next.t('text.no privilege declared in this deployment')}</div>`;
+        }
+        return html `
+      <button add @click=${() => this.openAdd()}>
+        <md-icon>add</md-icon>${i18next.t('button.add what it can do')}
+      </button>
+    `;
+    }
+    /**
+     * 고르는 판을 **넓은 팝업**으로 연다.
+     *
+     * 사용자 말씀이다 — 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가?
+     * 지금은 좁아보이고」. 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서
+     * 모듈 46개와 축 목록을 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.
+     *
+     * ```
+     * [읽었음] ox-floating-overlay.ts:126-134   [size=large]  width 100% · height 100%
+     * ```
+     *
+     * `escapable` 을 건드리지 않는다 — 켠 것은 팝업이 아니라 **이 페이지의 `assigned`** 에 바로
+     * 들어가므로 닫든 ESC 를 누르든 잃는 것이 없다. 물어볼 것이 없는 판에 물으면 그 물음이 값을
+     * 잃는다. 저장은 여전히 툴바가 한다.
+     *
+     * ⚠ 부품을 **동적으로 들인다.** 그 부품은 스타일 한 벌을 이 클래스에서 가져가므로, 위에서
+     * 정적으로 import 하면 순환이 된다. 여는 순간에 들이면 그 고리가 끊긴다.
+     */
+    async openAdd() {
+        await import('../../components/role-privilege-picker.js');
+        const popup = openPopup(html `<role-privilege-picker .page=${this} @close=${() => popup.close()}></role-privilege-picker>`, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('button.add what it can do')
+        });
+    }
+    /**
+     * 고르는 판의 몸체 — **팝업이 이것을 그린다.**
+     *
+     * 판을 부품 안으로 옮기지 않는다. 모듈 접기·축 줄·유령 규칙이 전부 이 페이지의 상태
+     * (`modules`·`assigned`·`selected`·`keyword`)를 보기 때문이고, 옮기면 **상태가 두 벌**이 된다.
+     * 두 벌이 되는 순간 어느 쪽이 저장 범위인지 흐려진다 — 옛 편집기가 `querySelectorAll` 로
+     * 범위를 만들던 결함이 정확히 그 모양이었다.
+     */
+    renderPickerBody() {
+        return html `
+      <div body>
+        <div panel>
+          <header>
+            ${i18next.t('field.module')}
+            <span count>${this.modules.length}</span>
+          </header>
+          <ox-input-search
+            .placeholder=${i18next.t('text.filter by module name')}
+            .value=${this.keyword}
+            @input=${(event) => this.updateKeyword(event)}
+            @change=${(event) => this.updateKeyword(event)}
+          ></ox-input-search>
+          <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>
+      <div picker-footer>
+        <span>
+          ${this.saving
+            ? '권한을 저장하고 있습니다.'
+            : this.dirty
+                ? '변경 사항이 있습니다. 저장해야 적용됩니다.'
+                : '권한을 바꾼 뒤 저장할 수 있습니다.'}
+        </span>
+        <button ?disabled=${!this.savable || !this.dirty} @click=${() => this.onSave()}>
+          ${this.saving ? '저장 중…' : i18next.t('button.save')}
+        </button>
       </div>
     `;
     }
@@ -508,7 +765,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         ${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)}>
+            <li ?selected=${module.category === this.selected} @click=${() => this.selectModule(module.category)}>
               <span>${moduleLabel(module.category)}</span>
               ${on
                 ? html `<span on>${i18next.t('text.x on', { x: on })}</span>`
@@ -533,27 +790,19 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         ${module.cells.map(cell => {
             const on = this.assigned.has(cell.id);
             return html `
-            <li ?ghost=${cell.deprecated}>
-              <md-checkbox
+            <li
+              ?ghost=${cell.deprecated}
+              ?readonly=${this.inherited || (cell.deprecated && !on)}
+              @click=${(event) => this.toggleCellFromRow(event, cell, on)}
+            >
+              <input
+                type="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
-              >
+              />
+              <label for="cell-${cell.id}">${axisLabel(cell.axis)}</label>
 
               ${cell.deprecated
                 ? html `<div says>${i18next.t('text.privilege no longer declared')}</div>`
@@ -658,15 +907,43 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         }
         this.modules = [...byCategory.values()].sort((a, b) => moduleLabel(a.category).localeCompare(moduleLabel(b.category)));
         this.assigned = assigned;
+        this.dirty = false;
         /* 고른 것이 없으면 첫 모듈을 연다 — 빈 오른쪽 판을 처음 화면으로 두지 않는다. */
         if (!this.modules.find(m => m.category === this.selected)) {
             this.selected = this.modules[0]?.category || '';
         }
     }
     onToggle(id, checked) {
+        if (this.assigned.has(id) === checked) {
+            return;
+        }
         const next = new Set(this.assigned);
         checked ? next.add(id) : next.delete(id);
         this.assigned = next;
+        this.dirty = true;
+        this.updateContext();
+        /* 팝업은 자기 상태를 안 들고 이 페이지를 본다 — 열려 있으면 다시 그리라고 알린다. */
+        this.refreshPicker();
+    }
+    /** 라벨·설명을 포함한 행 전체를 누를 수 있게 한다. checkbox와 키보드 Space는 native change가 맡는다. */
+    toggleCellFromRow(event, cell, on) {
+        if (this.inherited || (cell.deprecated && !on) || event.target instanceof HTMLInputElement) {
+            return;
+        }
+        /* label의 기본 동작이 checkbox change를 한 번 더 보내지 않게 막는다. */
+        event.preventDefault();
+        this.onToggle(cell.id, !on);
+    }
+    async canDeactivate() {
+        if (!this.dirty) {
+            return true;
+        }
+        return await OxPrompt.open({
+            title: '저장하지 않은 변경 사항',
+            text: '수정된 권한이 있습니다. 저장하지 않고 이 페이지를 나가시겠습니까?',
+            confirmButton: { text: '저장하지 않고 나가기' },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
     }
     /**
      * 저장.
@@ -681,6 +958,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
             return;
         }
         this.saving = true;
+        this.updateContext();
         try {
             const response = await client.mutate({
                 mutation: gql `
@@ -703,9 +981,11 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
             document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } }));
             /* 유령을 뗐으면 목록에서 사라져야 하고, 켠 것이 요약에 반영돼야 한다. */
             await this.fetch();
+            this.dirty = false;
         }
         finally {
             this.saving = false;
+            this.updateContext();
         }
     }
 };
@@ -749,6 +1029,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], RolePrivilegePage.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RolePrivilegePage.prototype, "dirty", void 0);
 RolePrivilegePage = __decorate([
     customElement('role-privilege-page')
 ], RolePrivilegePage);
@@ -787,11 +1071,14 @@ function axisLabel(axis) {
  * 그대로** 돌려주므로 화면에 `privilege.allows.board.query` 가 찍힌다. 빈 문자열을 기본값으로
  * 줘서 「없음」이 거짓으로 판정되게 한다.
  */
-function axisSays(category, cell) {
+function axisText(category, cell) {
     if (cell.description) {
-        return html `<div says>${cell.description}</div>`;
+        return cell.description;
     }
-    const written = i18next.t(`privilege.allows.${category}.${cell.axis}`, { defaultValue: '' });
+    return i18next.t(`privilege.allows.${category}.${cell.axis}`, { defaultValue: '' });
+}
+function axisSays(category, cell) {
+    const written = axisText(category, cell);
     return written ? html `<div says>${written}</div>` : null;
 }
 function axisOrder(axis) {