npm - @things-factory/auth-ui - Versions diffs - 10.1.7 → 10.1.16 - Mend

@things-factory/auth-ui 10.1.7 → 10.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/dist-client/components/role-privilege-picker-state.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/** 검색·선택 상태는 Lit 화면 밖에서도 같은 규칙으로 검증한다. */
+export type PrivilegeModuleRef = {
+    category: string;
+};
+/**
+ * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데
+ * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.
+ */
+export declare function filterPrivilegeModules<T extends PrivilegeModuleRef>(modules: T[], keyword: string, labelOf: (category: string) => string): T[];
+/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */
+export declare function selectedVisibleModule<T extends PrivilegeModuleRef>(modules: T[], selected: string): string;

package/dist-client/components/role-privilege-picker-state.js ADDED Viewed

@@ -0,0 +1,15 @@
+/**
+ * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데
+ * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.
+ */
+export function filterPrivilegeModules(modules, keyword, labelOf) {
+    const needle = keyword.trim().toLocaleLowerCase();
+    if (!needle)
+        return modules;
+    return modules.filter(module => [module.category, labelOf(module.category)].some(value => value.toLocaleLowerCase().includes(needle)));
+}
+/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */
+export function selectedVisibleModule(modules, selected) {
+    return modules.some(module => module.category === selected) ? selected : modules[0]?.category || '';
+}
+//# sourceMappingURL=role-privilege-picker-state.js.map

package/dist-client/components/role-privilege-picker-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"role-privilege-picker-state.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker-state.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAY,EACZ,OAAe,EACf,OAAqC;IAErC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAA;IACjD,IAAI,CAAC,MAAM;QAAE,OAAO,OAAO,CAAA;IAE3B,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAC7B,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CACtG,CAAA;AACH,CAAC;AAED,wCAAwC;AACxC,MAAM,UAAU,qBAAqB,CAA+B,OAAY,EAAE,QAAgB;IAChG,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,EAAE,CAAA;AACrG,CAAC","sourcesContent":["/** 검색·선택 상태는 Lit 화면 밖에서도 같은 규칙으로 검증한다. */\nexport type PrivilegeModuleRef = { category: string }\n\n/**\n * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데\n * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.\n */\nexport function filterPrivilegeModules<T extends PrivilegeModuleRef>(\n modules: T[],\n keyword: string,\n labelOf: (category: string) => string\n): T[] {\n const needle = keyword.trim().toLocaleLowerCase()\n if (!needle) return modules\n\n return modules.filter(module =>\n [module.category, labelOf(module.category)].some(value => value.toLocaleLowerCase().includes(needle))\n )\n}\n\n/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */\nexport function selectedVisibleModule<T extends PrivilegeModuleRef>(modules: T[], selected: string): string {\n return modules.some(module => module.category === selected) ? selected : modules[0]?.category || ''\n}\n"]}

package/dist-client/components/role-privilege-picker-state.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist-client/components/role-privilege-picker-state.test.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { filterPrivilegeModules, selectedVisibleModule } from './role-privilege-picker-state';
+const modules = [{ category: 'user' }, { category: 'board' }, { category: 'worklist' }];
+const labels = { user: '사용자', board: '보드', worklist: '작업지시' };
+const labelOf = (category) => labels[category] || category;
+describe('권한 모듈 검색', () => {
+    it('화면에 보이는 한글 모듈명으로 찾는다', () => {
+        expect(filterPrivilegeModules(modules, '사용자', labelOf)).toEqual([{ category: 'user' }]);
+    });
+    it('코드 모듈명으로도 찾는다', () => {
+        expect(filterPrivilegeModules(modules, 'work', labelOf)).toEqual([{ category: 'worklist' }]);
+    });
+    it('검색 결과에서 사라진 선택은 첫 결과로 옮긴다', () => {
+        const visible = filterPrivilegeModules(modules, '작업', labelOf);
+        expect(selectedVisibleModule(visible, 'user')).toBe('worklist');
+    });
+    it('아직 보이는 선택은 유지한다', () => {
+        expect(selectedVisibleModule(modules, 'board')).toBe('board');
+    });
+});
+//# sourceMappingURL=role-privilege-picker-state.test.js.map

package/dist-client/components/role-privilege-picker-state.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"role-privilege-picker-state.test.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker-state.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAE7F,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;AACvF,MAAM,MAAM,GAA2B,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAA;AACrF,MAAM,OAAO,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;AAElE,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;IACzF,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAA;IAC9F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,OAAO,GAAG,sBAAsB,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;QAC9D,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { filterPrivilegeModules, selectedVisibleModule } from './role-privilege-picker-state'\n\nconst modules = [{ category: 'user' }, { category: 'board' }, { category: 'worklist' }]\nconst labels: Record<string, string> = { user: '사용자', board: '보드', worklist: '작업지시' }\nconst labelOf = (category: string) => labels[category] || category\n\ndescribe('권한 모듈 검색', () => {\n it('화면에 보이는 한글 모듈명으로 찾는다', () => {\n expect(filterPrivilegeModules(modules, '사용자', labelOf)).toEqual([{ category: 'user' }])\n })\n\n it('코드 모듈명으로도 찾는다', () => {\n expect(filterPrivilegeModules(modules, 'work', labelOf)).toEqual([{ category: 'worklist' }])\n })\n\n it('검색 결과에서 사라진 선택은 첫 결과로 옮긴다', () => {\n const visible = filterPrivilegeModules(modules, '작업', labelOf)\n expect(selectedVisibleModule(visible, 'user')).toBe('worklist')\n })\n\n it('아직 보이는 선택은 유지한다', () => {\n expect(selectedVisibleModule(modules, 'board')).toBe('board')\n })\n})\n"]}

package/dist-client/components/role-privilege-picker.d.ts CHANGED Viewed

@@ -31,7 +31,10 @@ export declare class RolePrivilegePicker extends LitElement {
     static styles: CSSResultGroup;
     /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */
     page?: any;
+    private searchInput?;
+    private readonly onSearchInput;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
+    updated(): void;
 }

package/dist-client/components/role-privilege-picker.js CHANGED Viewed

@@ -30,6 +30,14 @@ import { RolePrivilegePage } from '../pages/role/role-privilege-page.js';
  * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.
  */
 let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.onSearchInput = (event) => {
+            /* ox-input-search 는 값을 확정할 때만 host `change`를 낸다. 모듈을 찾는 일은 입력 중에도
+               결과가 바뀌어야 하므로, 이 팝업의 shadow root 안 native input을 직접 듣는다. */
+            this.page?.updateKeyword?.(event);
+        };
+    }
     static { this.styles = RolePrivilegePage.styles; }
     connectedCallback() {
         super.connectedCallback();
@@ -38,6 +46,8 @@ let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
         }
     }
     disconnectedCallback() {
+        this.searchInput?.removeEventListener('input', this.onSearchInput);
+        this.searchInput = undefined;
         super.disconnectedCallback();
         if (this.page?.picker === this) {
             this.page.picker = undefined;
@@ -46,6 +56,15 @@ let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
     render() {
         return this.page?.renderPickerBody?.() ?? html ``;
     }
+    updated() {
+        const nextSearchInput = this.renderRoot.querySelector('ox-input-search')?.shadowRoot?.querySelector('input');
+        if (nextSearchInput === this.searchInput) {
+            return;
+        }
+        this.searchInput?.removeEventListener('input', this.onSearchInput);
+        this.searchInput = nextSearchInput;
+        this.searchInput?.addEventListener('input', this.onSearchInput);
+    }
 };
 __decorate([
     property({ type: Object }),

package/dist-client/components/role-privilege-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-privilege-picker.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;~~aAC1C~~,WAAM,GAAmB,iBAAiB,CAAC,MAAwB,AAA7D,CAA6D;~~IAK1E~~,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAA,EAAE,CAAA;IAClD,CAAC;;~~AAlB2B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAW;AAJ3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,~~CAuB~~/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { html, LitElement } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RolePrivilegePage } from '../pages/role/role-privilege-page.js'\n\n/*\n 「할 수 있는 일 더하기」의 그릇.\n \n ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────\n * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」\n \n 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을\n * 함께 봐야 한다. 고르는 동안은 고르는 것만 보는 것이 맞다.\n \n ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────\n * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를\n * 본다. 그것을 여기로 옮기면 상태가 두 벌이 되고, 그 순간 어느 쪽이 저장 범위인지\n * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.\n \n 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신\n * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).\n \n ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────\n * 팝업은 페이지의 shadow root 밖에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면\n * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아\n * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.\n \n 페이지가 이 파일을 동적으로 들이기 때문에 이 import 가 순환이 되지 않는다.\n /\n@customElement('role-privilege-picker')\nexport class RolePrivilegePicker extends LitElement {\n static styles: CSSResultGroup = RolePrivilegePage.styles as CSSResultGroup\n\n /* 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */\n @property({ type: Object }) page?: any\n\n connectedCallback() {\n super.connectedCallback()\n if (this.page) {\n this.page.picker = this\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.page?.picker === this) {\n this.page.picker = undefined\n }\n }\n\n render() {\n return this.page?.renderPickerBody?.() ?? html``\n }\n}\n"]}
1	+ {"version":3,"file":"role-privilege-picker.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAQY,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YAChD;yEAC6D;YAC7D,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAA;IAmCH,CAAC;aA9CQ,WAAM,GAAmB,iBAAiB,CAAC,MAAwB,AAA7D,CAA6D;IAa1E,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAClE,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAA,EAAE,CAAA;IAClD,CAAC;IAED,OAAO;QACL,MAAM,eAAe,GAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAS,EAAE,UAAU,EAAE,aAAa,CAC1G,OAAO,CACwB,CAAA;QAEjC,IAAI,eAAe,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACzC,OAAM;QACR,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAClE,IAAI,CAAC,WAAW,GAAG,eAAe,CAAA;QAClC,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACjE,CAAC;;AA1C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAW;AAJ3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA+C/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { html, LitElement } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RolePrivilegePage } from '../pages/role/role-privilege-page.js'\n\n/*\n 「할 수 있는 일 더하기」의 그릇.\n \n ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────\n * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」\n \n 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을\n * 함께 봐야 한다. 고르는 동안은 고르는 것만 보는 것이 맞다.\n \n ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────\n * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를\n * 본다. 그것을 여기로 옮기면 상태가 두 벌이 되고, 그 순간 어느 쪽이 저장 범위인지\n * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.\n \n 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신\n * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).\n \n ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────\n * 팝업은 페이지의 shadow root 밖에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면\n * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아\n * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.\n \n 페이지가 이 파일을 동적으로 들이기 때문에 이 import 가 순환이 되지 않는다.\n /\n@customElement('role-privilege-picker')\nexport class RolePrivilegePicker extends LitElement {\n static styles: CSSResultGroup = RolePrivilegePage.styles as CSSResultGroup\n\n /* 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. /\n @property({ type: Object }) page?: any\n\n private searchInput?: HTMLInputElement\n\n private readonly onSearchInput = (event: Event) => {\n / ox-input-search 는 값을 확정할 때만 host `change`를 낸다. 모듈을 찾는 일은 입력 중에도\n 결과가 바뀌어야 하므로, 이 팝업의 shadow root 안 native input을 직접 듣는다. */\n this.page?.updateKeyword?.(event)\n }\n\n connectedCallback() {\n super.connectedCallback()\n if (this.page) {\n this.page.picker = this\n }\n }\n\n disconnectedCallback() {\n this.searchInput?.removeEventListener('input', this.onSearchInput)\n this.searchInput = undefined\n super.disconnectedCallback()\n if (this.page?.picker === this) {\n this.page.picker = undefined\n }\n }\n\n render() {\n return this.page?.renderPickerBody?.() ?? html``\n }\n\n updated() {\n const nextSearchInput = (this.renderRoot.querySelector('ox-input-search') as any)?.shadowRoot?.querySelector(\n 'input'\n ) as HTMLInputElement \| undefined\n\n if (nextSearchInput === this.searchInput) {\n return\n }\n\n this.searchInput?.removeEventListener('input', this.onSearchInput)\n this.searchInput = nextSearchInput\n this.searchInput?.addEventListener('input', this.onSearchInput)\n }\n}\n"]}

package/dist-client/components/role-template-picker.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
+import { axisLabel } from '../utils/privilege-axis.js';
 import { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
-const AXIS_LABEL = {
-    query: 'label.read',
-    mutation: 'label.write',
-    execute: 'label.execute'
-};
+/*
+ * The axis vocabulary lives in `utils/privilege-axis.ts` now — one table, not the copy that
+ * used to sit here beside an identical one in `role-privilege-page.ts`. It also stopped
+ * translating `query`/`mutation` into 「읽기」/「쓰기」; that file says why.
+ */
 /**
  * The module, in words people use.
  *
@@ -22,9 +23,6 @@ const AXIS_LABEL = {
 function moduleLabel(category) {
     return i18next.t(`privilege.category.${category}`, { defaultValue: category });
 }
-function axisLabel(axis) {
-    return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis;
-}
 /** Stable order inside a group, by the name a person actually reads. */
 function byName(a, b) {
     return moduleLabel(a.category).localeCompare(moduleLabel(b.category));

package/dist-client/components/role-template-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-template-picker.js","sourceRoot":"","sources":["../../client/components/role-template-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { CSSResultGroup } from 'lit'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\ntype GrantView = { category: string; axes: string[]; missingAxes: string[] }\ntype TemplateView = {\n id: string\n name: string\n description?: string\n grants: GrantView[]\n privilegeCount: number\n missingCount: number\n defaultNameTaken: boolean\n grantsNothingDeliberately: boolean\n}\n\nconst AXIS_LABEL: Record<string, string> = {\n query: 'label.read',\n mutation: 'label.write',\n execute: 'label.execute'\n}\n\n/*\n The module, in words people use.\n \n Same rule as the role privilege page (`moduleLabel` there): use\n * `privilege.category.<category>` when it exists and fall back to the code word. Not\n * inventing one is the point — a made-up name would read as product vocabulary and hide\n * from the UX lane that the sentence is still missing.\n /\nfunction moduleLabel(category: string): string {\n return i18next.t(`privilege.category.${category}`, { defaultValue: category })\n}\n\nfunction axisLabel(axis: string): string {\n return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis\n}\n\n/* Stable order inside a group, by the name a person actually reads. /\nfunction byName(a: GrantView, b: GrantView): number {\n return moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n}\n\n/\n Starting a role.\n \n ── Why this stands where the blank row used to ──────────────────────────────\n * A new plant has no roles, and the old answer to \"make one\" was an empty line waiting for\n * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a\n * quality inspector, and that is a judgement the product has made and the plant has not.\n \n miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven\n * approval doors standing empty because there is nothing to route them to. Read from\n * inside, that looks like a plant that has not decided. It is a plant with nothing to\n * decide from.\n \n ── Both doors, in one place ─────────────────────────────────────────────────\n * The templates come first and the blank name last, because the order is what teaches: a\n * plant that sees \"quality inspector, 7 privileges\" learns what a seat looks like before\n * it is asked to invent one. Hiding the blank door would be worse, though — the seats a\n * factory actually has (\"night shift lead\", \"outside inspector\") are its own, and the\n * product does not know them.\n \n ── Why the name is editable ─────────────────────────────────────────────────\n * The template knows the seat exists; it does not know what the people there call it. And\n * because a role is also what an approval line points at, the same seat is sometimes\n * needed twice — a day and a night inspector hold the same privileges and take different\n * approvals. A fixed name would allow each template exactly once per domain.\n /\n@customElement('role-template-picker')\nexport class RoleTemplatePicker extends localize(i18next)(LitElement) {\n static styles: CSSResultGroup = [\n ScrollbarStyles,\n /\n * Native controls, styled by the shared block.\n \n This used `md-filled-text-field` and the Material buttons until the user looked at it\n * (2026-09-11): \"too big, and the style does not fit.\" They are right — a filled field\n * with a floating label is a form control from a different density than the pills,\n * chips and 30px rows this product uses everywhere else.\n \n `FormFieldStyles` exists precisely for this: a component draws its input inside its\n * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to\n * be declared per component. It goes first so local rules below can override it.\n /\n FormFieldStyles,\n / The popup footer already has a convention — plain buttons, pill on pointer devices. /\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface-container-lowest);\n color: var(--md-sys-color-on-surface);\n height: 100%;\n overflow: hidden;\n }\n\n [body] {\n display: grid;\n grid-template-columns: minmax(240px, 320px) 1fr;\n gap: var(--spacing-medium, 8px);\n padding: var(--spacing-medium, 8px);\n flex: 1;\n min-height: 0;\n }\n\n [panel] {\n display: flex;\n flex-direction: column;\n min-height: 0;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--md-sys-shape-corner-medium, 8px);\n overflow: hidden;\n }\n\n [panel] > header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n font-size: var(--fontsize-small, 13px);\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-container);\n }\n\n [count] {\n color: var(--md-sys-color-primary);\n font-weight: 600;\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n flex: 1;\n }\n\n li[seat] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n cursor: pointer;\n }\n\n li[seat]:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n li[seat][selected] {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n li[seat] [title-row] {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n li[seat] [name] {\n font-weight: 600;\n }\n\n li[seat] small {\n color: var(--md-sys-color-on-surface-variant);\n font-size: var(--fontsize-small, 12px);\n }\n\n li[seat][selected] small {\n color: inherit;\n }\n\n [tag] {\n font-size: var(--fontsize-smaller, 11px);\n padding: 0 6px;\n border-radius: var(--md-sys-shape-corner-full, 999px);\n background-color: var(--md-sys-color-surface-container-highest);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n [tag][warn] {\n background-color: var(--md-sys-color-error-container);\n color: var(--md-sys-color-on-error-container);\n }\n\n [detail] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-large, 14px);\n padding: var(--spacing-large, 14px);\n overflow-y: auto;\n flex: 1;\n }\n\n / 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. /\n [note],\n label[field] small {\n margin: 0;\n font-size: var(--fontsize-small, 12px);\n color: var(--md-sys-color-on-surface-variant);\n line-height: 1.5;\n }\n\n dl[grants] {\n display: grid;\n grid-template-columns: minmax(8em, max-content) 1fr;\n / 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. /\n gap: 6px var(--spacing-large, 14px);\n margin: 0;\n align-items: baseline;\n }\n\n /\n * 모듈 이름이 기준선이다 — 굵기로 두 칸이 저절로 갈린다.\n \n 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이\n * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은\n * 「이 자리가 어느 모듈을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.\n /\n dl[grants] dt {\n color: var(--md-sys-color-on-surface);\n font-size: var(--fontsize-small, 13px);\n font-weight: 600;\n }\n\n dl[grants] dd {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n / 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. /\n gap: 0 6px;\n }\n\n dl[grants] dd [axis] + [axis]::before {\n content: '·';\n margin-right: 6px;\n color: var(--md-sys-color-outline);\n }\n\n [axis] {\n font-size: var(--fontsize-small, 12px);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n [axis][missing] {\n text-decoration: line-through;\n color: var(--md-sys-color-outline);\n }\n\n [empty] {\n margin: auto;\n text-align: center;\n color: var(--md-sys-color-on-surface-variant);\n font-size: var(--fontsize-small, 13px);\n padding: var(--spacing-large, 16px);\n }\n\n / 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. /\n .footer {\n justify-content: flex-end;\n }\n `\n ]\n\n @property({ type: Object }) page?: any\n\n @state() private templates: TemplateView[] = []\n @state() private selected?: TemplateView\n /* `undefined` means \"the blank door\" — name the seat yourself. /\n @state() private scratch = false\n @state() private name = ''\n @state() private description = ''\n\n async connectedCallback() {\n super.connectedCallback()\n await this.fetchTemplates()\n }\n\n private async fetchTemplates() {\n const response = await client.query({\n query: gql`\n query {\n roleTemplates {\n id\n name\n description\n privilegeCount\n missingCount\n defaultNameTaken\n grantsNothingDeliberately\n grants {\n category\n axes\n missingAxes\n }\n }\n }\n `,\n context: gqlContext()\n })\n\n /\n * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw\n * that as \"this installation offers nothing\" — a refusal made to look like an answer.\n /\n if (response.errors?.length) {\n document.dispatchEvent(\n new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n )\n return\n }\n\n this.templates = response.data?.roleTemplates \|\| []\n }\n\n render() {\n return html`\n <div body>\n <div panel>\n <header>\n ${i18next.t('field.seat')}\n <span count>${this.templates.length}</span>\n </header>\n <ul>\n ${this.templates.map(\n template => html`\n <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>\n <div title-row>\n <span name>${template.name}</span>\n ${template.defaultNameTaken\n ? html`<span tag>${i18next.t('text.already in this domain')}</span>`\n : nothing}\n ${template.missingCount\n ? html`<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`\n : nothing}\n </div>\n <small>${this.summarize(template)}</small>\n </li>\n `\n )}\n <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>\n <div title-row>\n <md-icon>edit</md-icon>\n <span name>${i18next.t('button.name it yourself')}</span>\n </div>\n <small>${i18next.t('text.start from a blank seat')}</small>\n </li>\n </ul>\n </div>\n\n <div panel>${this.renderDetail()}</div>\n </div>\n\n <div class=\"footer\">\n <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>\n <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>\n </div>\n `\n }\n\n /\n What the seat opens, in one line — counted, not interpreted.\n \n This briefly said \"changes 6 · only sees 8\", which read well and was not something the\n * data supports: the privilege axis is an unconstrained string and its name does not\n * determine what the resolver behind it does. Counting is safe; grouping by meaning was\n * not. See `renderOpens`.\n \n \"0 privileges\" is still two different facts and must not be merged: granting nothing\n * on purpose is an approval seat, and a template whose grants are all missing here is a\n * defect (`missingCount`).\n /\n private summarize(template: TemplateView) {\n if (template.grantsNothingDeliberately) {\n return i18next.t('text.opens nothing, receives approvals')\n }\n\n return i18next.t('text.x modules y privileges', {\n x: template.grants.filter(grant => grant.axes.length).length,\n y: template.privilegeCount\n })\n }\n\n private renderDetail() {\n if (this.scratch) {\n return html`\n <header>${i18next.t('button.name it yourself')}</header>\n <div detail>\n <label field>\n ${i18next.t('field.name')}\n <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n </label>\n <label field>\n ${i18next.t('field.description')}\n <input .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n </label>\n <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>\n </div>\n `\n }\n\n if (!this.selected) {\n return html`<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`\n }\n\n const template = this.selected\n\n return html`\n <header>${template.name}</header>\n <div detail>\n <label field>\n ${i18next.t('field.name')}\n <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n <small>${i18next.t('text.this plant may call the seat what it likes')}</small>\n </label>\n ${template.defaultNameTaken && this.name === template.name\n ? html`<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`\n : nothing}\n ${this.renderOpens(template)}\n </div>\n `\n }\n\n /\n 이 자리가 무엇을 여나 — 선언된 것만.\n \n ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):\n * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」\n \n 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.\n \n ① `@privilege(privilege:)` 는 제약 없는 문자열이다(지시자 선언이 `privilege: String`\n * 이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 *오늘\n 그렇게 쓴 것*이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,\n 처음 보는 값은 알아서가 아니라 query 가 아니라서 「바꿀 수 있는 것」으로 떨어졌다.\n * ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,\n * 그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 읽는 질의에\n * `privilege: \"mutation\"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가\n * 아니라 어느 문을 지나야 하나의 이름이다.\n \n 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것\n * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.\n */\n private renderOpens(template: TemplateView) {\n if (template.grantsNothingDeliberately) {\n return html`<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`\n }\n\n return html`\n <dl grants>\n ${[...template.grants].sort(byName).map(\n grant => html`\n <dt>${moduleLabel(grant.category)}</dt>\n <dd>\n ${grant.axes.map(axis => html`<span axis>${axisLabel(axis)}</span>`)}\n ${grant.missingAxes.map(axis => html`<span axis missing>${axisLabel(axis)}</span>`)}\n </dd>\n `\n )}\n </dl>\n ${template.missingCount\n ? html`<p note>${i18next.t('text.struck through are not installed here')}</p>`\n : nothing}\n `\n }\n\n private pick(template: TemplateView) {\n this.scratch = false\n this.selected = template\n this.name = template.name\n }\n\n private pickScratch() {\n this.scratch = true\n this.selected = undefined\n this.name = ''\n }\n\n private canCreate() {\n return Boolean(this.name.trim()) && (this.scratch \|\| Boolean(this.selected))\n }\n\n private async create() {\n const created = this.scratch\n ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())\n : await this.page?.createFromTemplate?.(this.selected!.id, this.name.trim())\n\n if (created) {\n this.dispatchEvent(new CustomEvent('close'))\n }\n }\n}\n"]}
1	+ {"version":3,"file":"role-template-picker.js","sourceRoot":"","sources":["../../client/components/role-template-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAIlE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AActF;;;;GAIG;AAEH;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,QAAgB;IACnC,OAAO,OAAO,CAAC,CAAC,CAAC,sBAAsB,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAA;AAChF,CAAC;AAED,wEAAwE;AACxE,SAAS,MAAM,CAAC,CAAY,EAAE,CAAY;IACxC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;AACvE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA9D;;QAwMY,cAAS,GAAmB,EAAE,CAAA;QAE/C,mEAAmE;QAClD,YAAO,GAAG,KAAK,CAAA;QACf,SAAI,GAAG,EAAE,CAAA;QACT,gBAAW,GAAG,EAAE,CAAA;IA4NnC,CAAC;aAxaQ,WAAM,GAAmB;QAC9B,eAAe;QACf;;;;;;;;;;;WAWG;QACH,eAAe;QACf,yFAAyF;QACzF,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiLF;KACF,AAnMY,CAmMZ;IAWD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAA;IAC7B,CAAC;IAEO,KAAK,CAAC,cAAc;QAC1B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;OAiBT;YACD,OAAO,EAAE,UAAU,EAAE;SACtB,CAAC,CAAA;QAEF;;;WAGG;QACH,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC5B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,CAChG,CAAA;YACD,OAAM;QACR,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,EAAE,aAAa,IAAI,EAAE,CAAA;IACrD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;0BACX,IAAI,CAAC,SAAS,CAAC,MAAM;;;cAGjC,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;qCACO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,QAAQ,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;iCAE1F,QAAQ,CAAC,IAAI;sBACxB,QAAQ,CAAC,gBAAgB;YACzB,CAAC,CAAC,IAAI,CAAA,aAAa,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,SAAS;YACpE,CAAC,CAAC,OAAO;sBACT,QAAQ,CAAC,YAAY;YACrB,CAAC,CAAC,IAAI,CAAA,kBAAkB,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,YAAY,EAAE,CAAC,SAAS;YAC3F,CAAC,CAAC,OAAO;;2BAEJ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;;eAEpC,CACF;iCACoB,IAAI,CAAC,OAAO,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;;6BAGnD,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;uBAE1C,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;;;qBAK3C,IAAI,CAAC,YAAY,EAAE;;;;yBAIf,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;+BAC1E,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;KAEvG,CAAA;IACH,CAAC;IAED;;;;;;;;;;;OAWG;IACK,SAAS,CAAC,QAAsB;QACtC,IAAI,QAAQ,CAAC,yBAAyB,EAAE,CAAC;YACvC,OAAO,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAA;QAC5D,CAAC;QAED,OAAO,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE;YAC9C,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM;YAC5D,CAAC,EAAE,QAAQ,CAAC,cAAc;SAC3B,CAAC,CAAA;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA;kBACC,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;cAGxC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;4BACT,IAAI,CAAC,IAAI,WAAW,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;cAG1E,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;4BAChB,IAAI,CAAC,WAAW,WAAW,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;mBAEnF,OAAO,CAAC,CAAC,CAAC,8DAA8D,CAAC;;OAErF,CAAA;QACH,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,uCAAuC,CAAC,QAAQ,CAAA;QACrF,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE9B,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC,IAAI;;;YAGjB,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;0BACT,IAAI,CAAC,IAAI,WAAW,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;mBACnE,OAAO,CAAC,CAAC,CAAC,iDAAiD,CAAC;;UAErE,QAAQ,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI;YACxD,CAAC,CAAC,IAAI,CAAA,WAAW,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,MAAM;YACxF,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;;KAE/B,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACK,WAAW,CAAC,QAAsB;QACxC,IAAI,QAAQ,CAAC,yBAAyB,EAAE,CAAC;YACvC,OAAO,IAAI,CAAA,WAAW,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,MAAM,CAAA;QACjF,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CACrC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;kBACL,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;;gBAE7B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,cAAc,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;gBAClE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;WAEtF,CACF;;QAED,QAAQ,CAAC,YAAY;YACrB,CAAC,CAAC,IAAI,CAAA,WAAW,OAAO,CAAC,CAAC,CAAC,4CAA4C,CAAC,MAAM;YAC9E,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAEO,IAAI,CAAC,QAAsB;QACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAA;IAC3B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QACzB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS;QACf,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC9E,CAAC;IAEO,KAAK,CAAC,MAAM;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;YAC1B,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAC/E,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,kBAAkB,EAAE,CAAC,IAAI,CAAC,QAAS,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;QAE9E,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;;AAlO2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAW;AAErB;IAAhB,KAAK,EAAE;;qDAAuC;AAC9B;IAAhB,KAAK,EAAE;;oDAAgC;AAEvB;IAAhB,KAAK,EAAE;;mDAAwB;AACf;IAAhB,KAAK,EAAE;;gDAAkB;AACT;IAAhB,KAAK,EAAE;;uDAAyB;AA7MtB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAya9B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { CSSResultGroup } from 'lit'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { axisLabel } from '../utils/privilege-axis.js'\nimport { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\ntype GrantView = { category: string; axes: string[]; missingAxes: string[] }\ntype TemplateView = {\n id: string\n name: string\n description?: string\n grants: GrantView[]\n privilegeCount: number\n missingCount: number\n defaultNameTaken: boolean\n grantsNothingDeliberately: boolean\n}\n\n/\n The axis vocabulary lives in `utils/privilege-axis.ts` now — one table, not the copy that\n * used to sit here beside an identical one in `role-privilege-page.ts`. It also stopped\n * translating `query`/`mutation` into 「읽기」/「쓰기」; that file says why.\n /\n\n/\n The module, in words people use.\n \n Same rule as the role privilege page (`moduleLabel` there): use\n * `privilege.category.<category>` when it exists and fall back to the code word. Not\n * inventing one is the point — a made-up name would read as product vocabulary and hide\n * from the UX lane that the sentence is still missing.\n /\nfunction moduleLabel(category: string): string {\n return i18next.t(`privilege.category.${category}`, { defaultValue: category })\n}\n\n/* Stable order inside a group, by the name a person actually reads. /\nfunction byName(a: GrantView, b: GrantView): number {\n return moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n}\n\n/\n Starting a role.\n \n ── Why this stands where the blank row used to ──────────────────────────────\n * A new plant has no roles, and the old answer to \"make one\" was an empty line waiting for\n * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a\n * quality inspector, and that is a judgement the product has made and the plant has not.\n \n miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven\n * approval doors standing empty because there is nothing to route them to. Read from\n * inside, that looks like a plant that has not decided. It is a plant with nothing to\n * decide from.\n \n ── Both doors, in one place ─────────────────────────────────────────────────\n * The templates come first and the blank name last, because the order is what teaches: a\n * plant that sees \"quality inspector, 7 privileges\" learns what a seat looks like before\n * it is asked to invent one. Hiding the blank door would be worse, though — the seats a\n * factory actually has (\"night shift lead\", \"outside inspector\") are its own, and the\n * product does not know them.\n \n ── Why the name is editable ─────────────────────────────────────────────────\n * The template knows the seat exists; it does not know what the people there call it. And\n * because a role is also what an approval line points at, the same seat is sometimes\n * needed twice — a day and a night inspector hold the same privileges and take different\n * approvals. A fixed name would allow each template exactly once per domain.\n /\n@customElement('role-template-picker')\nexport class RoleTemplatePicker extends localize(i18next)(LitElement) {\n static styles: CSSResultGroup = [\n ScrollbarStyles,\n /\n * Native controls, styled by the shared block.\n \n This used `md-filled-text-field` and the Material buttons until the user looked at it\n * (2026-09-11): \"too big, and the style does not fit.\" They are right — a filled field\n * with a floating label is a form control from a different density than the pills,\n * chips and 30px rows this product uses everywhere else.\n \n `FormFieldStyles` exists precisely for this: a component draws its input inside its\n * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to\n * be declared per component. It goes first so local rules below can override it.\n /\n FormFieldStyles,\n / The popup footer already has a convention — plain buttons, pill on pointer devices. /\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface-container-lowest);\n color: var(--md-sys-color-on-surface);\n height: 100%;\n overflow: hidden;\n }\n\n [body] {\n display: grid;\n grid-template-columns: minmax(240px, 320px) 1fr;\n gap: var(--spacing-medium, 8px);\n padding: var(--spacing-medium, 8px);\n flex: 1;\n min-height: 0;\n }\n\n [panel] {\n display: flex;\n flex-direction: column;\n min-height: 0;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--md-sys-shape-corner-medium, 8px);\n overflow: hidden;\n }\n\n [panel] > header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n font-size: var(--fontsize-small, 13px);\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-container);\n }\n\n [count] {\n color: var(--md-sys-color-primary);\n font-weight: 600;\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n flex: 1;\n }\n\n li[seat] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n cursor: pointer;\n }\n\n li[seat]:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n li[seat][selected] {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n li[seat] [title-row] {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n li[seat] [name] {\n font-weight: 600;\n }\n\n li[seat] small {\n color: var(--md-sys-color-on-surface-variant);\n font-size: var(--fontsize-small, 12px);\n }\n\n li[seat][selected] small {\n color: inherit;\n }\n\n [tag] {\n font-size: var(--fontsize-smaller, 11px);\n padding: 0 6px;\n border-radius: var(--md-sys-shape-corner-full, 999px);\n background-color: var(--md-sys-color-surface-container-highest);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n [tag][warn] {\n background-color: var(--md-sys-color-error-container);\n color: var(--md-sys-color-on-error-container);\n }\n\n [detail] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-large, 14px);\n padding: var(--spacing-large, 14px);\n overflow-y: auto;\n flex: 1;\n }\n\n / 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. /\n [note],\n label[field] small {\n margin: 0;\n font-size: var(--fontsize-small, 12px);\n color: var(--md-sys-color-on-surface-variant);\n line-height: 1.5;\n }\n\n dl[grants] {\n display: grid;\n grid-template-columns: minmax(8em, max-content) 1fr;\n / 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. /\n gap: 6px var(--spacing-large, 14px);\n margin: 0;\n align-items: baseline;\n }\n\n /\n * 모듈 이름이 기준선이다 — 굵기로 두 칸이 저절로 갈린다.\n \n 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이\n * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은\n * 「이 자리가 어느 모듈을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.\n /\n dl[grants] dt {\n color: var(--md-sys-color-on-surface);\n font-size: var(--fontsize-small, 13px);\n font-weight: 600;\n }\n\n dl[grants] dd {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n / 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. /\n gap: 0 6px;\n }\n\n dl[grants] dd [axis] + [axis]::before {\n content: '·';\n margin-right: 6px;\n color: var(--md-sys-color-outline);\n }\n\n [axis] {\n font-size: var(--fontsize-small, 12px);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n [axis][missing] {\n text-decoration: line-through;\n color: var(--md-sys-color-outline);\n }\n\n [empty] {\n margin: auto;\n text-align: center;\n color: var(--md-sys-color-on-surface-variant);\n font-size: var(--fontsize-small, 13px);\n padding: var(--spacing-large, 16px);\n }\n\n / 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. /\n .footer {\n justify-content: flex-end;\n }\n `\n ]\n\n @property({ type: Object }) page?: any\n\n @state() private templates: TemplateView[] = []\n @state() private selected?: TemplateView\n /* `undefined` means \"the blank door\" — name the seat yourself. /\n @state() private scratch = false\n @state() private name = ''\n @state() private description = ''\n\n async connectedCallback() {\n super.connectedCallback()\n await this.fetchTemplates()\n }\n\n private async fetchTemplates() {\n const response = await client.query({\n query: gql`\n query {\n roleTemplates {\n id\n name\n description\n privilegeCount\n missingCount\n defaultNameTaken\n grantsNothingDeliberately\n grants {\n category\n axes\n missingAxes\n }\n }\n }\n `,\n context: gqlContext()\n })\n\n /\n * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw\n * that as \"this installation offers nothing\" — a refusal made to look like an answer.\n /\n if (response.errors?.length) {\n document.dispatchEvent(\n new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n )\n return\n }\n\n this.templates = response.data?.roleTemplates \|\| []\n }\n\n render() {\n return html`\n <div body>\n <div panel>\n <header>\n ${i18next.t('field.seat')}\n <span count>${this.templates.length}</span>\n </header>\n <ul>\n ${this.templates.map(\n template => html`\n <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>\n <div title-row>\n <span name>${template.name}</span>\n ${template.defaultNameTaken\n ? html`<span tag>${i18next.t('text.already in this domain')}</span>`\n : nothing}\n ${template.missingCount\n ? html`<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`\n : nothing}\n </div>\n <small>${this.summarize(template)}</small>\n </li>\n `\n )}\n <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>\n <div title-row>\n <md-icon>edit</md-icon>\n <span name>${i18next.t('button.name it yourself')}</span>\n </div>\n <small>${i18next.t('text.start from a blank seat')}</small>\n </li>\n </ul>\n </div>\n\n <div panel>${this.renderDetail()}</div>\n </div>\n\n <div class=\"footer\">\n <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>\n <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>\n </div>\n `\n }\n\n /\n What the seat opens, in one line — counted, not interpreted.\n \n This briefly said \"changes 6 · only sees 8\", which read well and was not something the\n * data supports: the privilege axis is an unconstrained string and its name does not\n * determine what the resolver behind it does. Counting is safe; grouping by meaning was\n * not. See `renderOpens`.\n \n \"0 privileges\" is still two different facts and must not be merged: granting nothing\n * on purpose is an approval seat, and a template whose grants are all missing here is a\n * defect (`missingCount`).\n /\n private summarize(template: TemplateView) {\n if (template.grantsNothingDeliberately) {\n return i18next.t('text.opens nothing, receives approvals')\n }\n\n return i18next.t('text.x modules y privileges', {\n x: template.grants.filter(grant => grant.axes.length).length,\n y: template.privilegeCount\n })\n }\n\n private renderDetail() {\n if (this.scratch) {\n return html`\n <header>${i18next.t('button.name it yourself')}</header>\n <div detail>\n <label field>\n ${i18next.t('field.name')}\n <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n </label>\n <label field>\n ${i18next.t('field.description')}\n <input .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n </label>\n <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>\n </div>\n `\n }\n\n if (!this.selected) {\n return html`<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`\n }\n\n const template = this.selected\n\n return html`\n <header>${template.name}</header>\n <div detail>\n <label field>\n ${i18next.t('field.name')}\n <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n <small>${i18next.t('text.this plant may call the seat what it likes')}</small>\n </label>\n ${template.defaultNameTaken && this.name === template.name\n ? html`<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`\n : nothing}\n ${this.renderOpens(template)}\n </div>\n `\n }\n\n /\n 이 자리가 무엇을 여나 — 선언된 것만.\n \n ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):\n * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」\n \n 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.\n \n ① `@privilege(privilege:)` 는 제약 없는 문자열이다(지시자 선언이 `privilege: String`\n * 이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 *오늘\n 그렇게 쓴 것*이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,\n 처음 보는 값은 알아서가 아니라 query 가 아니라서 「바꿀 수 있는 것」으로 떨어졌다.\n * ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,\n * 그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 읽는 질의에\n * `privilege: \"mutation\"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가\n * 아니라 어느 문을 지나야 하나의 이름이다.\n \n 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것\n * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.\n */\n private renderOpens(template: TemplateView) {\n if (template.grantsNothingDeliberately) {\n return html`<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`\n }\n\n return html`\n <dl grants>\n ${[...template.grants].sort(byName).map(\n grant => html`\n <dt>${moduleLabel(grant.category)}</dt>\n <dd>\n ${grant.axes.map(axis => html`<span axis>${axisLabel(axis)}</span>`)}\n ${grant.missingAxes.map(axis => html`<span axis missing>${axisLabel(axis)}</span>`)}\n </dd>\n `\n )}\n </dl>\n ${template.missingCount\n ? html`<p note>${i18next.t('text.struck through are not installed here')}</p>`\n : nothing}\n `\n }\n\n private pick(template: TemplateView) {\n this.scratch = false\n this.selected = template\n this.name = template.name\n }\n\n private pickScratch() {\n this.scratch = true\n this.selected = undefined\n this.name = ''\n }\n\n private canCreate() {\n return Boolean(this.name.trim()) && (this.scratch \|\| Boolean(this.selected))\n }\n\n private async create() {\n const created = this.scratch\n ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())\n : await this.page?.createFromTemplate?.(this.selected!.id, this.name.trim())\n\n if (created) {\n this.dispatchEvent(new CustomEvent('close'))\n }\n }\n}\n"]}

package/dist-client/pages/role/role-list-page.d.ts CHANGED Viewed

@@ -44,6 +44,12 @@ export declare class RoleListPage extends RoleListPageBase {
     private total;
     private filtered;
     private mySubdomain;
+    /**
+     * 물려받는 곳. `null` 이면 최상위, `undefined` 면 아직 안 읽었다.
+     *
+     * 셋을 가르는 이유는 화면이 「모른다」와 「없다」를 다르게 그려야 하기 때문이다.
+     */
+    private parentDomain;
     private scope;
     /**
      * 묶음마다 몇 건인가.
@@ -96,6 +102,20 @@ export declare class RoleListPage extends RoleListPageBase {
      * 아직 못 센 묶음은 수를 **안 그린다** — 0 으로 메우면 「없다」와 같아 보인다.
      */
     private renderScopes;
+    /**
+     * 어디에서 물려받나 — **있을 때나 없을 때나 같은 자리에서 말한다.**
+     *
+     * 「상속」 단추만 두면 눌러 보기 전에는 그것이 무엇을 뜻하는지 알 수 없다. 부모가 있는
+     * 도메인에서는 **어느 도메인인지**가 필요하고(그 역할을 고치러 가야 할 곳이다), 최상위
+     * 도메인에서는 **물려받는 곳이 없다는 사실**이 필요하다. 후자를 안 적으면 「상속 0」이
+     * 「아직 안 만들었나」로 읽힌다.
+     *
+     * 단추를 숨기지 않는다. 숨기면 최상위 도메인의 관리자는 상속이라는 것이 있다는 사실
+     * 자체를 모르고, 자식 도메인을 만든 뒤에 갑자기 나타나는 단추를 만난다.
+     *
+     * 아직 프로필을 못 읽었으면 **아무것도 안 적는다** — 모르는 것을 「없다」로 적지 않는다.
+     */
+    private renderLineage;
     private onScope;
     /**
      * 세 묶음의 건수.

package/dist-client/pages/role/role-list-page.js CHANGED Viewed

@@ -60,6 +60,12 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
          * 견준다 — 두 도메인이 같은 subdomain 을 가질 수 없으므로 id 와 같은 답이다.
          */
         this.mySubdomain = '';
+        /**
+         * 물려받는 곳. `null` 이면 최상위, `undefined` 면 아직 안 읽었다.
+         *
+         * 셋을 가르는 이유는 화면이 「모른다」와 「없다」를 다르게 그려야 하기 때문이다.
+         */
+        this.parentDomain = undefined;
         /*
          * **어느 묶음을 보고 있나 — 기본값은 「우리 역할」이다.**
          *
@@ -127,6 +133,19 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         display: flex;
         align-items: center;
         gap: 4px;
+        flex-wrap: wrap;
+      }
+      /*
+        어디에서 물려받나 — 단추가 아니라 **사실을 적은 글**이다. 그래서 알약도 테두리도 없다.
+        고르는 것과 읽는 것이 같은 모양이면 눌러 보게 된다.
+        단추 줄에서 한 칸 떨어뜨린다. 붙여 두면 네 번째 단추로 보인다.
+      */
+      [lineage] {
+        margin-left: 8px;
+        font-size: 0.78rem;
+        color: var(--md-sys-color-on-surface-variant);
       }
       button[scope] {
@@ -291,9 +310,36 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
               ${this.counts[scope] === undefined ? nothing : html `<span count>${this.counts[scope]}</span>`}
             </button>
           `)}
+        ${this.renderLineage()}
       </div>
     `;
     }
+    /**
+     * 어디에서 물려받나 — **있을 때나 없을 때나 같은 자리에서 말한다.**
+     *
+     * 「상속」 단추만 두면 눌러 보기 전에는 그것이 무엇을 뜻하는지 알 수 없다. 부모가 있는
+     * 도메인에서는 **어느 도메인인지**가 필요하고(그 역할을 고치러 가야 할 곳이다), 최상위
+     * 도메인에서는 **물려받는 곳이 없다는 사실**이 필요하다. 후자를 안 적으면 「상속 0」이
+     * 「아직 안 만들었나」로 읽힌다.
+     *
+     * 단추를 숨기지 않는다. 숨기면 최상위 도메인의 관리자는 상속이라는 것이 있다는 사실
+     * 자체를 모르고, 자식 도메인을 만든 뒤에 갑자기 나타나는 단추를 만난다.
+     *
+     * 아직 프로필을 못 읽었으면 **아무것도 안 적는다** — 모르는 것을 「없다」로 적지 않는다.
+     */
+    renderLineage() {
+        if (this.parentDomain === undefined) {
+            return nothing;
+        }
+        const from = this.parentDomain?.name || this.parentDomain?.subdomain;
+        return html `
+      <span lineage>
+        ${from
+            ? i18next.t('text.inherited from x', { x: from })
+            : i18next.t('text.this domain is top level and inherits from nowhere')}
+      </span>
+    `;
+    }
     onScope(scope) {
         if (this.scope === scope) {
             return;
@@ -389,7 +435,14 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
     >`;
     }
     async pageInitialized() {
-        this.mySubdomain = (await getDomain())?.subdomain || '';
+        const mine = await getDomain();
+        this.mySubdomain = mine?.subdomain || '';
+        /*
+         * `undefined` 는 「아직 모른다」, `null` 은 「부모가 없다」다. 프로필이 `parent` 칸을
+         * 들고 오므로 둘이 갈린다 — 옛 서버가 그 칸을 안 보내면 `undefined` 로 남아 아무것도
+         * 안 적는다. 「모른다」를 「없다」로 접지 않는다.
+         */
+        this.parentDomain = mine && 'parent' in mine ? mine.parent : undefined;
         this.countScopes();
         this.config = {
             /*
@@ -803,6 +856,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], RoleListPage.prototype, "mySubdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RoleListPage.prototype, "parentDomain", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)