@things-factory/auth-ui 10.1.226 → 10.1.227

package/dist-client/components/role-template-picker.d.ts

@@ -40,6 +40,11 @@ export declare class RoleTemplatePicker extends RoleTemplatePicker_base {
     connectedCallback(): Promise<void>;
     private fetchTemplates;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 「추가」가 무엇을 하는지 단추 줄에서 말한다. 이 창에서는 업무 · 권한을 고칠 수 없어 사람이 의아해한다 — 템플릿과
+     * 같은 상태로 시작하고, 고치는 것은 목록의 「권한 편집」에서 따로 한다(2026-10-28 사용자).
+     */
+    private renderHowItStarts;
     /**
      * What the seat opens, in one line — **counted, not interpreted.**
      *

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

@@ -80,41 +80,51 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
         /* The popup footer already has a convention — plain buttons, pill on pointer devices. */
         CommonHeaderStyles,
         css `
+      /*
+       * 글 크기를 이 창이 정한다(2026-10-28 사용자: 「추가 팝업도 스타일이 벙벙하다」). 팝업 몸통의 기본
+       * 글 크기를 그대로 받아 자리 이름이 제목만 하게 컸고, 줄 사이도 그만큼 벌어졌다.
+       */
       :host {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-surface-container-lowest);
         color: var(--md-sys-color-on-surface);
+        font-size: var(--fontsize-default, 14px);
         height: 100%;
         overflow: hidden;
       }
 
+      /*
+       * 두 칸은 상자가 아니라 한 면을 가르는 선 하나로 나뉜다(2026-10-28 사용자: 「팝업 내부에서 어설픈 라운드 섹션
+       * 쓰지마라」). 둥근 상자 둘이 팝업 안에 또 떠 있었다.
+       */
       [body] {
         display: grid;
         grid-template-columns: minmax(240px, 320px) 1fr;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-medium, 8px);
         flex: 1;
         min-height: 0;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
       }
 
       [panel] {
         display: flex;
         flex-direction: column;
         min-height: 0;
-        background-color: var(--md-sys-color-surface);
-        border-radius: var(--md-sys-shape-corner-medium, 8px);
         overflow: hidden;
       }
 
+      [panel] + [panel] {
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+      }
+
       [panel] > header {
         display: flex;
         align-items: center;
         gap: 6px;
-        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);
+        padding: var(--spacing-small, 6px) var(--spacing-medium, 10px);
         font-size: var(--fontsize-small, 13px);
         color: var(--md-sys-color-on-surface-variant);
-        background-color: var(--md-sys-color-surface-container);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
       }
 
       [count] {
@@ -133,8 +143,8 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       li[seat] {
         display: flex;
         flex-direction: column;
-        gap: 2px;
-        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);
+        gap: 1px;
+        padding: 6px var(--spacing-medium, 10px);
         border-bottom: 1px solid var(--md-sys-color-outline-variant);
         cursor: pointer;
       }
@@ -155,9 +165,14 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       }
 
       li[seat] [name] {
+        font-size: var(--fontsize-default, 14px);
         font-weight: 600;
       }
 
+      li[seat] md-icon {
+        --md-icon-size: 16px;
+      }
+
       li[seat] small {
         color: var(--md-sys-color-on-surface-variant);
         font-size: var(--fontsize-small, 12px);
@@ -183,15 +198,67 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       [detail] {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-large, 14px);
-        padding: var(--spacing-large, 14px);
+        gap: var(--spacing-medium, 10px);
+        padding: var(--spacing-medium, 10px) var(--spacing-large, 14px);
         overflow-y: auto;
         flex: 1;
       }
 
+      /*
+       * 이름 · 설명은 한 줄에 하나 — 이름표가 왼쪽 한 열에 서고 칸이 나머지를 채운다(2026-10-28 사용자: 「이름 수정
+       * 부분이 있는데, 그런것은 왜 두줄로 만드냐」). 이름표 열은 가장 긴 이름표만큼이라 두 줄의 칸 머리가 맞는다.
+       */
+      [form] {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        align-items: center;
+        gap: 6px 12px;
+      }
+
+      /*
+       * 첫 줄이 무엇에서 시작하는지 말한다 — 창 이름이 「역할 추가」뿐이라 고르는 것이 템플릿이라는 것을 알 수
+       * 없었다(2026-10-28 사용자). 이름을 고쳐도 어느 템플릿인지는 이 줄에 남는다.
+       */
+      [form] label,
+      [form] [label] {
+        font-size: var(--fontsize-small, 13px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [form] [value] {
+        font-weight: 600;
+      }
+
+      [form] input {
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      [form] [note] {
+        grid-column: 2;
+      }
+
+      /* 업무 · 권한 — 머리말 한 줄이 두 덩어리를 가른다. */
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding-top: var(--spacing-medium, 10px);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      section > h4 {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        margin: 0;
+        font-size: var(--fontsize-small, 13px);
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
       /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */
-      [note],
-      label[field] small {
+      [note] {
         margin: 0;
         font-size: var(--fontsize-small, 12px);
         color: var(--md-sys-color-on-surface-variant);
@@ -202,12 +269,20 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
         color: var(--md-sys-color-error);
       }
 
-      /* The seat's work, one per line - the words a person reads first; the modules below are the detail. */
+      /* The seat's work - the words a person reads first, as chips that wrap; the modules below are the detail. */
       ul[tasks] {
-        margin: 0;
-        padding: 0 0 0 1.1em;
-        font-size: 0.92rem;
-        line-height: 1.6;
+        flex: none;
+        overflow: visible;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 6px;
+      }
+
+      ul[tasks] li {
+        padding: 2px 10px;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        background-color: var(--md-sys-color-surface-container-high);
+        font-size: var(--fontsize-small, 13px);
       }
 
       dl[grants] {
@@ -268,6 +343,12 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       .footer {
         justify-content: flex-end;
       }
+
+      .footer [how] {
+        margin: 0 auto 0 0;
+        font-size: var(--fontsize-small, 13px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
     `
     ]; }
     async connectedCallback() {
@@ -307,13 +388,17 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
             return;
         }
         this.templates = response.data?.roleTemplates || [];
+        /* 처음부터 하나를 보인다 — 아무것도 안 고른 창은 오른쪽 절반이 빈 채로 열렸다. 만드는 것은 여전히 「추가」를 눌러야 한다. */
+        const first = this.templates.find(template => !template.definitionErrors.length);
+        if (first && !this.selected && !this.scratch)
+            this.pick(first);
     }
     render() {
         return html `
       <div body>
         <div panel>
           <header>
-            ${i18next.t('field.seat')}
+            ${i18next.t('field.role templates')}
             <span count>${this.templates.length}</span>
           </header>
           <ul>
@@ -336,9 +421,9 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
             <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>
               <div title-row>
                 <md-icon>edit</md-icon>
-                <span name>${i18next.t('button.name it yourself')}</span>
+                <span name>${i18next.t('label.no template')}</span>
               </div>
-              <small>${i18next.t('text.start from a blank seat')}</small>
+              <small>${i18next.t('text.an empty role with no privileges')}</small>
             </li>
           </ul>
         </div>
@@ -347,11 +432,26 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       </div>
 
       <div class="footer">
+        ${this.renderHowItStarts()}
         <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>
-        <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>
+        <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.add')}</button>
       </div>
     `;
     }
+    /**
+     * 「추가」가 무엇을 하는지 단추 줄에서 말한다. 이 창에서는 업무 · 권한을 고칠 수 없어 사람이 의아해한다 — 템플릿과
+     * 같은 상태로 시작하고, 고치는 것은 목록의 「권한 편집」에서 따로 한다(2026-10-28 사용자).
+     */
+    renderHowItStarts() {
+        const words = { add: i18next.t('button.add'), edit: i18next.t('button.edit privileges') };
+        if (this.scratch) {
+            return html `<p how>${i18next.t('text.add starts an empty role', words)}</p>`;
+        }
+        if (!this.selected) {
+            return nothing;
+        }
+        return html `<p how>${i18next.t('text.add starts the role as the template is', words)}</p>`;
+    }
     /**
      * What the seat opens, in one line — **counted, not interpreted.**
      *
@@ -368,6 +468,10 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
         if (template.grantsNothingDeliberately) {
             return i18next.t('text.opens nothing, receives approvals');
         }
+        /* 업무로 지은 자리는 업무 수로 — 오른쪽이 먼저 보이는 것이 업무다. */
+        if (template.tasks.length) {
+            return i18next.t('text.x tasks y privileges', { x: template.tasks.length, y: template.privilegeCount });
+        }
         return i18next.t('text.x modules y privileges', {
             x: template.grants.filter(grant => grant.axes.length).length,
             y: template.privilegeCount
@@ -376,17 +480,15 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
     renderDetail() {
         if (this.scratch) {
             return html `
-        <header>${i18next.t('button.name it yourself')}</header>
         <div detail>
-          <label field>
-            ${i18next.t('field.name')}
-            <input .value=${this.name} @input=${(e) => (this.name = e.target.value)} />
-          </label>
-          <label field>
-            ${i18next.t('field.description')}
-            <input .value=${this.description} @input=${(e) => (this.description = e.target.value)} />
-          </label>
-          <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>
+          <div form>
+            <span label>${i18next.t('field.role template')}</span>
+            <span value>${i18next.t('label.no template')}</span>
+            <label for="name">${i18next.t('field.new role name')}</label>
+            <input id="name" .value=${this.name} @input=${(e) => (this.name = e.target.value)} />
+            <label for="description">${i18next.t('field.description')}</label>
+            <input id="description" .value=${this.description} @input=${(e) => (this.description = e.target.value)} />
+          </div>
         </div>
       `;
         }
@@ -395,17 +497,21 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
         }
         const template = this.selected;
         return html `
-      <header>${template.name}</header>
       <div detail>
-        <label field>
-          ${i18next.t('field.name')}
-          <input .value=${this.name} @input=${(e) => (this.name = e.target.value)} />
-          <small>${i18next.t('text.this plant may call the seat what it likes')}</small>
-        </label>
-        ${template.defaultNameTaken && this.name === template.name
+        <div form>
+          <span label>${i18next.t('field.role template')}</span>
+          <span value>${template.name}</span>
+          <label for="name">${i18next.t('field.new role name')}</label>
+          <input id="name" .value=${this.name} @input=${(e) => (this.name = e.target.value)} />
+          ${template.defaultNameTaken && this.name === template.name
             ? html `<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`
             : nothing}
-        ${this.renderTasks(template)} ${this.renderOpens(template)}
+        </div>
+        ${this.renderTasks(template)}
+        <section>
+          <h4>${i18next.t('field.privileges')} <span count>${template.privilegeCount}</span></h4>
+          ${this.renderOpens(template)}
+        </section>
       </div>
     `;
     }
@@ -458,9 +564,12 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
             ? html `<p note attention>${i18next.t('text.template cannot be applied because', { list: template.definitionErrors.join(' · ') })}</p>`
             : nothing}
       ${template.tasks.length
-            ? html `<ul tasks>
-            ${template.tasks.map(id => html `<li>${taskName(id)}</li>`)}
-          </ul>`
+            ? html `<section>
+            <h4>${i18next.t('label.tasks view')} <span count>${template.tasks.length}</span></h4>
+            <ul tasks>
+              ${template.tasks.map(id => html `<li>${taskName(id)}</li>`)}
+            </ul>
+          </section>`
             : nothing}
     `;
     }

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

@@ -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'\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  tasks: string[]\n  definitionErrors: string[]\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      [note][attention] {\n        color: var(--md-sys-color-error);\n      }\n\n      /* The seat's work, one per line - the words a person reads first; the modules below are the detail. */\n      ul[tasks] {\n        margin: 0;\n        padding: 0 0 0 1.1em;\n        font-size: 0.92rem;\n        line-height: 1.6;\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            tasks\n            definitionErrors\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.definitionErrors.length\n                      ? html`<span tag warn>${i18next.t('text.template cannot be applied')}</span>`\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.renderTasks(template)} ${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  /**\n   * The work this seat does, by task (ADR-0139 decision 11) — named in the words of the module that declares each.\n   * A template the framework refuses to apply says why here, before anyone presses create.\n   */\n  private renderTasks(template: TemplateView) {\n    return html`\n      ${template.definitionErrors.length\n        ? html`<p note attention>${i18next.t('text.template cannot be applied because', { list: template.definitionErrors.join(' · ') })}</p>`\n        : nothing}\n      ${template.tasks.length\n        ? html`<ul tasks>\n            ${template.tasks.map(id => html`<li>${taskName(id)}</li>`)}\n          </ul>`\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) && !this.selected!.definitionErrors.length))\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\n/** A task's name in the words of the module that declares it; the id when there are none. */\nfunction taskName(id: string): string {\n  return i18next.t(`task.${id}.name`, { defaultValue: id })\n}\n"]}
+{"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'\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  tasks: string[]\n  definitionErrors: string[]\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      /*\n       * 글 크기를 이 창이 정한다(2026-10-28 사용자: 「추가 팝업도 스타일이 벙벙하다」). 팝업 몸통의 기본\n       * 글 크기를 그대로 받아 자리 이름이 제목만 하게 컸고, 줄 사이도 그만큼 벌어졌다.\n       */\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        font-size: var(--fontsize-default, 14px);\n        height: 100%;\n        overflow: hidden;\n      }\n\n      /*\n       * 두 칸은 상자가 아니라 한 면을 가르는 선 하나로 나뉜다(2026-10-28 사용자: 「팝업 내부에서 어설픈 라운드 섹션\n       * 쓰지마라」). 둥근 상자 둘이 팝업 안에 또 떠 있었다.\n       */\n      [body] {\n        display: grid;\n        grid-template-columns: minmax(240px, 320px) 1fr;\n        flex: 1;\n        min-height: 0;\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      [panel] + [panel] {\n        border-left: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 10px);\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\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: 1px;\n        padding: 6px var(--spacing-medium, 10px);\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-size: var(--fontsize-default, 14px);\n        font-weight: 600;\n      }\n\n      li[seat] md-icon {\n        --md-icon-size: 16px;\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-medium, 10px);\n        padding: var(--spacing-medium, 10px) var(--spacing-large, 14px);\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      /*\n       * 이름 · 설명은 한 줄에 하나 — 이름표가 왼쪽 한 열에 서고 칸이 나머지를 채운다(2026-10-28 사용자: 「이름 수정\n       * 부분이 있는데, 그런것은 왜 두줄로 만드냐」). 이름표 열은 가장 긴 이름표만큼이라 두 줄의 칸 머리가 맞는다.\n       */\n      [form] {\n        display: grid;\n        grid-template-columns: max-content 1fr;\n        align-items: center;\n        gap: 6px 12px;\n      }\n\n      /*\n       * 첫 줄이 무엇에서 시작하는지 말한다 — 창 이름이 「역할 추가」뿐이라 고르는 것이 템플릿이라는 것을 알 수\n       * 없었다(2026-10-28 사용자). 이름을 고쳐도 어느 템플릿인지는 이 줄에 남는다.\n       */\n      [form] label,\n      [form] [label] {\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [form] [value] {\n        font-weight: 600;\n      }\n\n      [form] input {\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      [form] [note] {\n        grid-column: 2;\n      }\n\n      /* 업무 · 권한 — 머리말 한 줄이 두 덩어리를 가른다. */\n      section {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        padding-top: var(--spacing-medium, 10px);\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      section > h4 {\n        display: flex;\n        align-items: baseline;\n        gap: 6px;\n        margin: 0;\n        font-size: var(--fontsize-small, 13px);\n        font-weight: 600;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */\n      [note] {\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      [note][attention] {\n        color: var(--md-sys-color-error);\n      }\n\n      /* The seat's work - the words a person reads first, as chips that wrap; the modules below are the detail. */\n      ul[tasks] {\n        flex: none;\n        overflow: visible;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px 6px;\n      }\n\n      ul[tasks] li {\n        padding: 2px 10px;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        background-color: var(--md-sys-color-surface-container-high);\n        font-size: var(--fontsize-small, 13px);\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      .footer [how] {\n        margin: 0 auto 0 0;\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\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            tasks\n            definitionErrors\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    const first = this.templates.find(template => !template.definitionErrors.length)\n    if (first && !this.selected && !this.scratch) this.pick(first)\n  }\n\n  render() {\n    return html`\n      <div body>\n        <div panel>\n          <header>\n            ${i18next.t('field.role templates')}\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.definitionErrors.length\n                      ? html`<span tag warn>${i18next.t('text.template cannot be applied')}</span>`\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('label.no template')}</span>\n              </div>\n              <small>${i18next.t('text.an empty role with no privileges')}</small>\n            </li>\n          </ul>\n        </div>\n\n        <div panel>${this.renderDetail()}</div>\n      </div>\n\n      <div class=\"footer\">\n        ${this.renderHowItStarts()}\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.add')}</button>\n      </div>\n    `\n  }\n\n  /**\n   * 「추가」가 무엇을 하는지 단추 줄에서 말한다. 이 창에서는 업무 · 권한을 고칠 수 없어 사람이 의아해한다 — 템플릿과\n   * 같은 상태로 시작하고, 고치는 것은 목록의 「권한 편집」에서 따로 한다(2026-10-28 사용자).\n   */\n  private renderHowItStarts() {\n    const words = { add: i18next.t('button.add'), edit: i18next.t('button.edit privileges') }\n\n    if (this.scratch) {\n      return html`<p how>${i18next.t('text.add starts an empty role', words)}</p>`\n    }\n\n    if (!this.selected) {\n      return nothing\n    }\n\n    return html`<p how>${i18next.t('text.add starts the role as the template is', words)}</p>`\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    /* 업무로 지은 자리는 업무 수로 — 오른쪽이 먼저 보이는 것이 업무다. */\n    if (template.tasks.length) {\n      return i18next.t('text.x tasks y privileges', { x: template.tasks.length, y: template.privilegeCount })\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        <div detail>\n          <div form>\n            <span label>${i18next.t('field.role template')}</span>\n            <span value>${i18next.t('label.no template')}</span>\n            <label for=\"name\">${i18next.t('field.new role name')}</label>\n            <input id=\"name\" .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n            <label for=\"description\">${i18next.t('field.description')}</label>\n            <input id=\"description\" .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n          </div>\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      <div detail>\n        <div form>\n          <span label>${i18next.t('field.role template')}</span>\n          <span value>${template.name}</span>\n          <label for=\"name\">${i18next.t('field.new role name')}</label>\n          <input id=\"name\" .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\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        </div>\n        ${this.renderTasks(template)}\n        <section>\n          <h4>${i18next.t('field.privileges')} <span count>${template.privilegeCount}</span></h4>\n          ${this.renderOpens(template)}\n        </section>\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  /**\n   * The work this seat does, by task (ADR-0139 decision 11) — named in the words of the module that declares each.\n   * A template the framework refuses to apply says why here, before anyone presses create.\n   */\n  private renderTasks(template: TemplateView) {\n    return html`\n      ${template.definitionErrors.length\n        ? html`<p note attention>${i18next.t('text.template cannot be applied because', { list: template.definitionErrors.join(' · ') })}</p>`\n        : nothing}\n      ${template.tasks.length\n        ? html`<section>\n            <h4>${i18next.t('label.tasks view')} <span count>${template.tasks.length}</span></h4>\n            <ul tasks>\n              ${template.tasks.map(id => html`<li>${taskName(id)}</li>`)}\n            </ul>\n          </section>`\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) && !this.selected!.definitionErrors.length))\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\n/** A task's name in the words of the module that declares it; the id when there are none. */\nfunction taskName(id: string): string {\n  return i18next.t(`task.${id}.name`, { defaultValue: id })\n}\n"]}

package/dist-client/components/role-template-picker.test.d.ts

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

package/dist-client/components/role-template-picker.test.js

@@ -0,0 +1,41 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+/**
+ * The add-role window as one composed panel (the user, 2026-10-28: 「이름 수정 부분이 있는데, 그런것은 왜 두줄로
+ * 만드냐」 · 「짜임새있게」). It needs a DOM, so the test reads its source with comments stripped.
+ */
+const code = readFileSync(path.join(__dirname, 'role-template-picker.ts'), 'utf-8')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+const detail = code.slice(code.indexOf('private renderDetail('), code.indexOf('private renderOpens('));
+describe('the add-role window', () => {
+    it('★ opens with the first template that can be applied already shown - no blank half', () => {
+        expect(code).toMatch(/const first = this\.templates\.find\(template => !template\.definitionErrors\.length\)\s*if \(first && !this\.selected && !this\.scratch\) this\.pick\(first\)/);
+    });
+    it('★ puts each field on one line - its label in a column beside it', () => {
+        expect(code).toMatch(/\[form\] \{\s*display: grid;\s*grid-template-columns: max-content 1fr;/);
+        expect(detail).not.toMatch(/<label field>/);
+        expect(detail.match(/<div form>/g)).toHaveLength(2);
+    });
+    it('★ says it starts from a template - the list is headed so, and the first row names the one picked', () => {
+        expect(code).toMatch(/\$\{i18next\.t\('field\.role templates'\)\}\s*<span count>/);
+        expect(detail).toMatch(/<span label>\$\{i18next\.t\('field\.role template'\)\}<\/span>\s*<span value>\$\{template\.name\}<\/span>\s*<label for="name">\$\{i18next\.t\('field\.new role name'\)\}<\/label>/);
+        expect(detail).toMatch(/<span value>\$\{i18next\.t\('label\.no template'\)\}<\/span>/);
+        const words = JSON.parse(readFileSync(path.join(__dirname, '../../translations/ko.json'), 'utf-8'));
+        expect([words['field.role templates'], words['field.role template'], words['label.no template']]).toEqual(['시작할 템플릿', '선택한 템플릿', '템플릿 없이']);
+        expect(words['field.new role name']).toBe('새 역할 이름');
+    });
+    it('★ the button line says 추가 starts the role as the template is, and changes are made in 권한 편집', () => {
+        const footer = code.slice(code.indexOf('<div class="footer">'), code.indexOf('</div>', code.indexOf('<div class="footer">')));
+        expect(footer).toMatch(/\$\{this\.renderHowItStarts\(\)\}/);
+        const how = code.slice(code.indexOf('private renderHowItStarts('), code.indexOf('private summarize('));
+        expect(how).toMatch(/text\.add starts an empty role/);
+        expect(how).toMatch(/text\.add starts the role as the template is/);
+        const words = JSON.parse(readFileSync(path.join(__dirname, '../../translations/ko.json'), 'utf-8'));
+        expect(words['text.add starts the role as the template is']).toMatch(/\{add\}[\s\S]*\{edit\}/);
+    });
+    it('does not repeat the template name in a bar above the name field', () => {
+        expect(detail).not.toMatch(/<header>/);
+    });
+});
+//# sourceMappingURL=role-template-picker.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"role-template-picker.test.js","sourceRoot":"","sources":["../../client/components/role-template-picker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { readFileSync } from 'fs'\nimport path from 'path'\n\n/**\n * The add-role window as one composed panel (the user, 2026-10-28: 「이름 수정 부분이 있는데, 그런것은 왜 두줄로\n * 만드냐」 · 「짜임새있게」). It needs a DOM, so the test reads its source with comments stripped.\n */\n\nconst code = readFileSync(path.join(__dirname, 'role-template-picker.ts'), 'utf-8')\n  .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')\n  .replace(/^\\s*\\/\\/.*$/gm, '')\nconst detail = code.slice(code.indexOf('private renderDetail('), code.indexOf('private renderOpens('))\n\ndescribe('the add-role window', () => {\n  it('★ opens with the first template that can be applied already shown - no blank half', () => {\n    expect(code).toMatch(/const first = this\\.templates\\.find\\(template => !template\\.definitionErrors\\.length\\)\\s*if \\(first && !this\\.selected && !this\\.scratch\\) this\\.pick\\(first\\)/)\n  })\n\n  it('★ puts each field on one line - its label in a column beside it', () => {\n    expect(code).toMatch(/\\[form\\] \\{\\s*display: grid;\\s*grid-template-columns: max-content 1fr;/)\n    expect(detail).not.toMatch(/<label field>/)\n    expect(detail.match(/<div form>/g)).toHaveLength(2)\n  })\n\n  it('★ says it starts from a template - the list is headed so, and the first row names the one picked', () => {\n    expect(code).toMatch(/\\$\\{i18next\\.t\\('field\\.role templates'\\)\\}\\s*<span count>/)\n    expect(detail).toMatch(/<span label>\\$\\{i18next\\.t\\('field\\.role template'\\)\\}<\\/span>\\s*<span value>\\$\\{template\\.name\\}<\\/span>\\s*<label for=\"name\">\\$\\{i18next\\.t\\('field\\.new role name'\\)\\}<\\/label>/)\n    expect(detail).toMatch(/<span value>\\$\\{i18next\\.t\\('label\\.no template'\\)\\}<\\/span>/)\n    const words = JSON.parse(readFileSync(path.join(__dirname, '../../translations/ko.json'), 'utf-8'))\n    expect([words['field.role templates'], words['field.role template'], words['label.no template']]).toEqual(['시작할 템플릿', '선택한 템플릿', '템플릿 없이'])\n    expect(words['field.new role name']).toBe('새 역할 이름')\n  })\n\n  it('★ the button line says 추가 starts the role as the template is, and changes are made in 권한 편집', () => {\n    const footer = code.slice(code.indexOf('<div class=\"footer\">'), code.indexOf('</div>', code.indexOf('<div class=\"footer\">')))\n    expect(footer).toMatch(/\\$\\{this\\.renderHowItStarts\\(\\)\\}/)\n    const how = code.slice(code.indexOf('private renderHowItStarts('), code.indexOf('private summarize('))\n    expect(how).toMatch(/text\\.add starts an empty role/)\n    expect(how).toMatch(/text\\.add starts the role as the template is/)\n    const words = JSON.parse(readFileSync(path.join(__dirname, '../../translations/ko.json'), 'utf-8'))\n    expect(words['text.add starts the role as the template is']).toMatch(/\\{add\\}[\\s\\S]*\\{edit\\}/)\n  })\n\n  it('does not repeat the template name in a bar above the name field', () => {\n    expect(detail).not.toMatch(/<header>/)\n  })\n})\n"]}

package/dist-client/pages/role/role-add-delete.test.d.ts

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

package/dist-client/pages/role/role-add-delete.test.js

@@ -0,0 +1,61 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+/**
+ * How a role is added and deleted on the role list (the user, 2026-10-28: 「도대체 어떻게 추가하고, 삭제한다는
+ * 말인가」). One way to add - the 「역할 추가」 window, no blank row in the grid - and deleting acts on picked rows,
+ * says first which picked roles people still hold, and deletes none of them. The page needs a DOM, so the test
+ * reads its source with comments stripped.
+ */
+const read = (file) => readFileSync(path.join(__dirname, file), 'utf-8');
+const strip = (source) => source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '').replace(/<!--[\s\S]*?-->/g, '');
+const code = strip(read('role-list-page.ts'));
+const deleting = code.slice(code.indexOf('private async onDeleteGrid('), code.indexOf('private async openCreate('));
+const words = JSON.parse(readFileSync(path.join(__dirname, '../../../translations/ko.json'), 'utf-8'));
+describe('adding a role', () => {
+    it('★ the button says what it adds', () => {
+        expect(code).toMatch(/<button add @click=\$\{\(\) => this\.openCreate\(\)\}>\s*<md-icon>add<\/md-icon>\$\{i18next\.t\('button\.add role'\)\}/);
+        expect(words['button.add role']).toBe('역할 추가');
+    });
+    it('★ the grid draws no blank row to type a role into', () => {
+        expect(code).toMatch(/rows: \{\s*appendable: false,/);
+    });
+    it('the window is titled the same', () => {
+        expect(code).toMatch(/title: i18next\.t\('button\.add role'\)/);
+    });
+});
+describe('deleting a role', () => {
+    it('★ rows can be picked', () => {
+        expect(code).toMatch(/\{ type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true \}/);
+    });
+    it('★ the list asks how many people hold each role and shows it', () => {
+        expect(code).toMatch(/privilegeCount\s+userCount\s+templateGap/);
+        expect(code).toMatch(/name: 'userCount',[\s\S]{0,120}renderer: userCountCell/);
+    });
+    it('★ names the picked roles people hold and stops before asking the server', () => {
+        const held = deleting.indexOf("record.userCount > 0");
+        expect(held).toBeGreaterThan(0);
+        expect(deleting.indexOf('deleteRoles(ids')).toBeGreaterThan(held);
+        expect(deleting.slice(held, deleting.indexOf('deleteRoles(ids'))).toMatch(/text\.roles held by users are not deleted[\s\S]*?return\s*\}/);
+    });
+    it('★ names picked roles inherited from the parent and stops - even mixed with this domain\'s own', () => {
+        const inherited = deleting.indexOf('this.isInherited(record)');
+        expect(inherited).toBeGreaterThan(0);
+        expect(deleting.slice(inherited, deleting.indexOf('deleteRoles(ids'))).toMatch(/if \(inherited\.length\) \{[\s\S]*?text\.inherited roles are not deleted here[\s\S]*?return\s*\}/);
+        expect(deleting).toMatch(/const mine = selected\n/);
+    });
+    it('says to pick rows when none are picked, instead of doing nothing', () => {
+        expect(deleting).toMatch(/if \(!selected\?\.length\) \{\s*await OxPrompt\.open\([\s\S]*?text\.pick the roles to delete/);
+    });
+    it('names what it is about to delete before deleting it', () => {
+        expect(deleting).toMatch(/text\.delete these roles', \{ names: mine\.map/);
+    });
+    it('every sentence has its words in every language', () => {
+        const keys = ['button.add role', 'field.role users', 'text.n people', 'text.pick the roles to delete', 'text.roles held by users are not deleted', 'text.role and its users', 'text.delete these roles', 'text.inherited roles are not deleted here'];
+        for (const language of ['ko', 'en', 'ja', 'zh', 'es', 'ms']) {
+            const all = JSON.parse(readFileSync(path.join(__dirname, `../../../translations/${language}.json`), 'utf-8'));
+            for (const key of keys)
+                expect([language, key, typeof all[key]]).toEqual([language, key, 'string']);
+        }
+    });
+});
+//# sourceMappingURL=role-add-delete.test.js.map