@things-factory/auth-ui 10.1.256 → 10.1.258

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

@@ -3,7 +3,7 @@ import '@material/web/icon/icon.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { client, gqlContext } from '@operato/graphql';
+import { gqlContext, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { axisLabel } from '../utils/privilege-axis.js';
 import { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
@@ -56,11 +56,30 @@ function byName(a, b) {
 let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.templates = [];
         /** `undefined` means "the blank door" — name the seat yourself. */
         this.scratch = false;
         this.name = '';
         this.description = '';
+        this.offered = new QueryController(this, gql `
+      query {
+        roleTemplates {
+          id
+          name
+          description
+          privilegeCount
+          missingCount
+          defaultNameTaken
+          grantsNothingDeliberately
+          tasks
+          definitionErrors
+          grants {
+            category
+            axes
+            missingAxes
+          }
+        }
+      }
+    `, { context: gqlContext() });
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -351,43 +370,14 @@ let RoleTemplatePicker = class RoleTemplatePicker extends localize(i18next)(LitE
       }
     `
     ]; }
-    async connectedCallback() {
-        super.connectedCallback();
-        await this.fetchTemplates();
+    /*
+     * A GraphQL error arrives as `data: null` with `errors` set; it is reported by the GraphQL link, and the list stays
+     * empty - never drawn as "this installation offers nothing" from a refusal.
+     */
+    get templates() {
+        return this.offered.data?.roleTemplates || [];
     }
-    async fetchTemplates() {
-        const response = await client.query({
-            query: gql `
-        query {
-          roleTemplates {
-            id
-            name
-            description
-            privilegeCount
-            missingCount
-            defaultNameTaken
-            grantsNothingDeliberately
-            tasks
-            definitionErrors
-            grants {
-              category
-              axes
-              missingAxes
-            }
-          }
-        }
-      `,
-            context: gqlContext()
-        });
-        /*
-         * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw
-         * that as "this installation offers nothing" — a refusal made to look like an answer.
-         */
-        if (response.errors?.length) {
-            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
-            return;
-        }
-        this.templates = response.data?.roleTemplates || [];
+    updated() {
         /* 처음부터 하나를 보인다 — 아무것도 안 고른 창은 오른쪽 절반이 빈 채로 열렸다. 만드는 것은 여전히 「추가」를 눌러야 한다. */
         const first = this.templates.find(template => !template.definitionErrors.length);
         if (first && !this.selected && !this.scratch)
@@ -599,10 +589,6 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], RoleTemplatePicker.prototype, "page", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], RoleTemplatePicker.prototype, "templates", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

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      /*\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"]}
+{"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 { gqlContext, QueryController } 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 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  private offered = new QueryController(\n    this,\n    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; it is reported by the GraphQL link, and the list stays\n   * empty - never drawn as \"this installation offers nothing\" from a refusal.\n   */\n  private get templates(): TemplateView[] {\n    return this.offered.data?.roleTemplates || []\n  }\n\n  updated() {\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/user-detail.d.ts

@@ -34,10 +34,7 @@ export declare class UserDetail extends UserDetail_base {
     static styles: CSSResultGroup;
     /** 목록이 골라 준 사람. `id` 와 `username`(없으면 `email`)이 있어야 한다. */
     user: any;
-    private availableRoles;
     private selected;
-    private loading;
-    private saving;
     private canManage;
     private canOwn;
     private myEmail;
@@ -47,7 +44,26 @@ export declare class UserDetail extends UserDetail_base {
      * 비밀번호는 계정 하나에 하나다. 다른 도메인에서도 일하는 사람, 어느 도메인이든 오너인 사람
      * (수퍼유저 포함)의 비밀번호는 이 도메인이 거두지 않는다(ADR-0161 결정 4).
      */
-    private setupLinkIssuable;
+    private issuable;
+    private get setupLinkIssuable();
+    /**
+     * 부여할 수 있는 역할을 읽는다.
+     *
+     * **이 사람이 지금 가진 역할은 다시 묻지 않는다** — 목록이 이미 실어 왔다(`user.roles`).
+     * 옛 화면은 email 로 사용자를 다시 찾았는데, 역할 이름과 달리 email 은 유일하긴 해도
+     * 손에 든 `id` 를 두고 다른 열쇠로 같은 사람을 찾는 것이었다. 안 물으면 그 문제가 없다.
+     *
+     * **이 도메인의 역할과 파트너십으로 넘어온 역할을 한 목록으로 합친다.** 옛 화면은 그 둘을
+     * 따로 그리고 저장할 때 화면에서 다시 모았는데, 합치는 자리가 화면이면 화면이 못 그린 것은
+     * 저장에서도 빠진다.
+     */
+    private roles;
+    private saves;
+    private change;
+    private get loading();
+    private get saving();
+    private get domainRoles();
+    private get availableRoles();
     /**
      * 이 도메인(과 부모)의 역할 id.
      *
@@ -55,9 +71,9 @@ export declare class UserDetail extends UserDetail_base {
      * (`transferOwner` 가 상속 역할까지 자격으로 인정하고, 그 밖은 던진다). 파트너십으로 넘어온
      * 역할은 자격이 아니므로 `availableRoles`(합친 것)로는 판정할 수 없다.
      */
-    private domainRoleIds;
+    private get domainRoleIds();
     /** The parent domain's roles this person may not change here - locked, with the reason under the list. */
-    private locked;
+    private get locked();
     private unsubscribe?;
     private get savable();
     render(): import("lit-html").TemplateResult<1>;
@@ -100,22 +116,7 @@ export declare class UserDetail extends UserDetail_base {
     private applyMe;
     /** 서버 지시자에 적힌 인자를 그대로 되묻는다. */
     private checkGates;
-    updated(changes: Map<string, unknown>): void;
-    /** 관리 권한이 없으면 서버가 이 질의를 거절한다 — 그때도 단추는 없다. */
-    private fetchSetupLinkIssuable;
-    /**
-     * 부여할 수 있는 역할을 읽는다.
-     *
-     * **이 사람이 지금 가진 역할은 다시 묻지 않는다** — 목록이 이미 실어 왔다(`user.roles`).
-     * 옛 화면은 email 로 사용자를 다시 찾았는데, 역할 이름과 달리 email 은 유일하긴 해도
-     * 손에 든 `id` 를 두고 다른 열쇠로 같은 사람을 찾는 것이었다. 안 물으면 그 문제가 없다.
-     *
-     * **이 도메인의 역할과 파트너십으로 넘어온 역할을 한 목록으로 합친다.** 옛 화면은 그 둘을
-     * 따로 그리고 저장할 때 화면에서 다시 모았는데, 합치는 자리가 화면이면 화면이 못 그린 것은
-     * 저장에서도 빠진다.
-     */
-    private fetch;
-    /** 잠금 해제와 활성화가 같은 부름이다 — 서버가 `failCount` 도 0 으로 되돌린다. */
+    willUpdate(changes: Map<string, unknown>): void;
     private onActivate;
     private onInactivate;
     /**