@things-factory/auth-ui 10.1.6 → 10.1.13

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

@@ -0,0 +1,487 @@
+import { __decorate, __metadata } from "tslib";
+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 { i18next, localize } from '@operato/i18n';
+import { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+const AXIS_LABEL = {
+    query: 'label.read',
+    mutation: 'label.write',
+    execute: 'label.execute'
+};
+/**
+ * The module, in words people use.
+ *
+ * Same rule as the role privilege page (`moduleLabel` there): use
+ * `privilege.category.<category>` when it exists and **fall back to the code word**. Not
+ * inventing one is the point — a made-up name would read as product vocabulary and hide
+ * from the UX lane that the sentence is still missing.
+ */
+function moduleLabel(category) {
+    return i18next.t(`privilege.category.${category}`, { defaultValue: category });
+}
+function axisLabel(axis) {
+    return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis;
+}
+/** Stable order inside a group, by the name a person actually reads. */
+function byName(a, b) {
+    return moduleLabel(a.category).localeCompare(moduleLabel(b.category));
+}
+/**
+ * Starting a role.
+ *
+ * ── Why this stands where the blank row used to ──────────────────────────────
+ * A new plant has no roles, and the old answer to "make one" was an empty line waiting for
+ * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a
+ * quality inspector, and that is a judgement the product has made and the plant has not.
+ *
+ * miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven
+ * approval doors standing empty because there is nothing to route them to. Read from
+ * inside, that looks like a plant that has not decided. It is a plant with nothing to
+ * decide from.
+ *
+ * ── Both doors, in one place ─────────────────────────────────────────────────
+ * The templates come first and the blank name last, because the order is what teaches: a
+ * plant that sees "quality inspector, 7 privileges" learns what a seat looks like before
+ * it is asked to invent one. Hiding the blank door would be worse, though — the seats a
+ * factory actually has ("night shift lead", "outside inspector") are its own, and the
+ * product does not know them.
+ *
+ * ── Why the name is editable ─────────────────────────────────────────────────
+ * The template knows the seat exists; it does not know what the people there call it. And
+ * because a role is also what an approval line points at, the same seat is sometimes
+ * needed twice — a day and a night inspector hold the same privileges and take different
+ * approvals. A fixed name would allow each template exactly once per domain.
+ */
+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 = '';
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        /*
+         * Native controls, styled by the shared block.
+         *
+         * This used `md-filled-text-field` and the Material buttons until the user looked at it
+         * (2026-09-11): "too big, and the style does not fit." They are right — a filled field
+         * with a floating label is a form control from a different density than the pills,
+         * chips and 30px rows this product uses everywhere else.
+         *
+         * `FormFieldStyles` exists precisely for this: a component draws its input inside its
+         * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to
+         * be declared per component. It goes first so local rules below can override it.
+         */
+        FormFieldStyles,
+        /* The popup footer already has a convention — plain buttons, pill on pointer devices. */
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        height: 100%;
+        overflow: hidden;
+      }
+
+      [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;
+      }
+
+      [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] > header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);
+        font-size: var(--fontsize-small, 13px);
+        color: var(--md-sys-color-on-surface-variant);
+        background-color: var(--md-sys-color-surface-container);
+      }
+
+      [count] {
+        color: var(--md-sys-color-primary);
+        font-weight: 600;
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      li[seat] {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        cursor: pointer;
+      }
+
+      li[seat]:hover {
+        background-color: var(--md-sys-color-surface-container-high);
+      }
+
+      li[seat][selected] {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      li[seat] [title-row] {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      li[seat] [name] {
+        font-weight: 600;
+      }
+
+      li[seat] small {
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--fontsize-small, 12px);
+      }
+
+      li[seat][selected] small {
+        color: inherit;
+      }
+
+      [tag] {
+        font-size: var(--fontsize-smaller, 11px);
+        padding: 0 6px;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        background-color: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [tag][warn] {
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+
+      [detail] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large, 14px);
+        padding: var(--spacing-large, 14px);
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */
+      [note],
+      label[field] small {
+        margin: 0;
+        font-size: var(--fontsize-small, 12px);
+        color: var(--md-sys-color-on-surface-variant);
+        line-height: 1.5;
+      }
+
+      dl[grants] {
+        display: grid;
+        grid-template-columns: minmax(8em, max-content) 1fr;
+        /* 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. */
+        gap: 6px var(--spacing-large, 14px);
+        margin: 0;
+        align-items: baseline;
+      }
+
+      /*
+       * 모듈 이름이 **기준선**이다 — 굵기로 두 칸이 저절로 갈린다.
+       *
+       * 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이
+       * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은
+       * 「이 자리가 **어느 모듈**을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.
+       */
+      dl[grants] dt {
+        color: var(--md-sys-color-on-surface);
+        font-size: var(--fontsize-small, 13px);
+        font-weight: 600;
+      }
+
+      dl[grants] dd {
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        /* 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. */
+        gap: 0 6px;
+      }
+
+      dl[grants] dd [axis] + [axis]::before {
+        content: '·';
+        margin-right: 6px;
+        color: var(--md-sys-color-outline);
+      }
+
+      [axis] {
+        font-size: var(--fontsize-small, 12px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [axis][missing] {
+        text-decoration: line-through;
+        color: var(--md-sys-color-outline);
+      }
+
+      [empty] {
+        margin: auto;
+        text-align: center;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--fontsize-small, 13px);
+        padding: var(--spacing-large, 16px);
+      }
+
+      /* 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. */
+      .footer {
+        justify-content: flex-end;
+      }
+    `
+    ]; }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.fetchTemplates();
+    }
+    async fetchTemplates() {
+        const response = await client.query({
+            query: gql `
+        query {
+          roleTemplates {
+            id
+            name
+            description
+            privilegeCount
+            missingCount
+            defaultNameTaken
+            grantsNothingDeliberately
+            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 || [];
+    }
+    render() {
+        return html `
+      <div body>
+        <div panel>
+          <header>
+            ${i18next.t('field.seat')}
+            <span count>${this.templates.length}</span>
+          </header>
+          <ul>
+            ${this.templates.map(template => html `
+                <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>
+                  <div title-row>
+                    <span name>${template.name}</span>
+                    ${template.defaultNameTaken
+            ? html `<span tag>${i18next.t('text.already in this domain')}</span>`
+            : nothing}
+                    ${template.missingCount
+            ? html `<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`
+            : nothing}
+                  </div>
+                  <small>${this.summarize(template)}</small>
+                </li>
+              `)}
+            <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>
+              </div>
+              <small>${i18next.t('text.start from a blank seat')}</small>
+            </li>
+          </ul>
+        </div>
+
+        <div panel>${this.renderDetail()}</div>
+      </div>
+
+      <div class="footer">
+        <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>
+      </div>
+    `;
+    }
+    /**
+     * What the seat opens, in one line — **counted, not interpreted.**
+     *
+     * This briefly said "changes 6 · only sees 8", which read well and was not something the
+     * data supports: the privilege axis is an unconstrained string and its name does not
+     * determine what the resolver behind it does. Counting is safe; grouping by meaning was
+     * not. See `renderOpens`.
+     *
+     * "0 privileges" is still two different facts and must not be merged: granting nothing
+     * on purpose is an approval seat, and a template whose grants are all missing here is a
+     * defect (`missingCount`).
+     */
+    summarize(template) {
+        if (template.grantsNothingDeliberately) {
+            return i18next.t('text.opens nothing, receives approvals');
+        }
+        return i18next.t('text.x modules y privileges', {
+            x: template.grants.filter(grant => grant.axes.length).length,
+            y: template.privilegeCount
+        });
+    }
+    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>
+      `;
+        }
+        if (!this.selected) {
+            return html `<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`;
+        }
+        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
+            ? html `<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`
+            : nothing}
+        ${this.renderOpens(template)}
+      </div>
+    `;
+    }
+    /**
+     * 이 자리가 무엇을 여나 — **선언된 것만.**
+     *
+     * ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):
+     * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」
+     *
+     * 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.
+     *
+     *  ① `@privilege(privilege:)` 는 **제약 없는 문자열**이다(지시자 선언이 `privilege: String`
+     *     이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 **오늘
+     *     그렇게 쓴 것**이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,
+     *     처음 보는 값은 **알아서가 아니라 query 가 아니라서** 「바꿀 수 있는 것」으로 떨어졌다.
+     *  ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,
+     *     그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 **읽는** 질의에
+     *     `privilege: "mutation"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가
+     *     아니라 **어느 문을 지나야 하나**의 이름이다.
+     *
+     * 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것
+     * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.
+     */
+    renderOpens(template) {
+        if (template.grantsNothingDeliberately) {
+            return html `<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`;
+        }
+        return html `
+      <dl grants>
+        ${[...template.grants].sort(byName).map(grant => html `
+            <dt>${moduleLabel(grant.category)}</dt>
+            <dd>
+              ${grant.axes.map(axis => html `<span axis>${axisLabel(axis)}</span>`)}
+              ${grant.missingAxes.map(axis => html `<span axis missing>${axisLabel(axis)}</span>`)}
+            </dd>
+          `)}
+      </dl>
+      ${template.missingCount
+            ? html `<p note>${i18next.t('text.struck through are not installed here')}</p>`
+            : nothing}
+    `;
+    }
+    pick(template) {
+        this.scratch = false;
+        this.selected = template;
+        this.name = template.name;
+    }
+    pickScratch() {
+        this.scratch = true;
+        this.selected = undefined;
+        this.name = '';
+    }
+    canCreate() {
+        return Boolean(this.name.trim()) && (this.scratch || Boolean(this.selected));
+    }
+    async create() {
+        const created = this.scratch
+            ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())
+            : await this.page?.createFromTemplate?.(this.selected.id, this.name.trim());
+        if (created) {
+            this.dispatchEvent(new CustomEvent('close'));
+        }
+    }
+};
+__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)
+], RoleTemplatePicker.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RoleTemplatePicker.prototype, "scratch", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RoleTemplatePicker.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RoleTemplatePicker.prototype, "description", void 0);
+RoleTemplatePicker = __decorate([
+    customElement('role-template-picker')
+], RoleTemplatePicker);
+export { RoleTemplatePicker };
+//# sourceMappingURL=role-template-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"role-template-picker.js","sourceRoot":"","sources":["../../client/components/role-template-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { CSSResultGroup } from 'lit'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonHeaderStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\ntype GrantView = { category: string; axes: string[]; missingAxes: string[] }\ntype TemplateView = {\n  id: string\n  name: string\n  description?: string\n  grants: GrantView[]\n  privilegeCount: number\n  missingCount: number\n  defaultNameTaken: boolean\n  grantsNothingDeliberately: boolean\n}\n\nconst AXIS_LABEL: Record<string, string> = {\n  query: 'label.read',\n  mutation: 'label.write',\n  execute: 'label.execute'\n}\n\n/**\n * The module, in words people use.\n *\n * Same rule as the role privilege page (`moduleLabel` there): use\n * `privilege.category.<category>` when it exists and **fall back to the code word**. Not\n * inventing one is the point — a made-up name would read as product vocabulary and hide\n * from the UX lane that the sentence is still missing.\n */\nfunction moduleLabel(category: string): string {\n  return i18next.t(`privilege.category.${category}`, { defaultValue: category })\n}\n\nfunction axisLabel(axis: string): string {\n  return AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis\n}\n\n/** Stable order inside a group, by the name a person actually reads. */\nfunction byName(a: GrantView, b: GrantView): number {\n  return moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n}\n\n/**\n * Starting a role.\n *\n * ── Why this stands where the blank row used to ──────────────────────────────\n * A new plant has no roles, and the old answer to \"make one\" was an empty line waiting for\n * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a\n * quality inspector, and that is a judgement the product has made and the plant has not.\n *\n * miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven\n * approval doors standing empty because there is nothing to route them to. Read from\n * inside, that looks like a plant that has not decided. It is a plant with nothing to\n * decide from.\n *\n * ── Both doors, in one place ─────────────────────────────────────────────────\n * The templates come first and the blank name last, because the order is what teaches: a\n * plant that sees \"quality inspector, 7 privileges\" learns what a seat looks like before\n * it is asked to invent one. Hiding the blank door would be worse, though — the seats a\n * factory actually has (\"night shift lead\", \"outside inspector\") are its own, and the\n * product does not know them.\n *\n * ── Why the name is editable ─────────────────────────────────────────────────\n * The template knows the seat exists; it does not know what the people there call it. And\n * because a role is also what an approval line points at, the same seat is sometimes\n * needed twice — a day and a night inspector hold the same privileges and take different\n * approvals. A fixed name would allow each template exactly once per domain.\n */\n@customElement('role-template-picker')\nexport class RoleTemplatePicker extends localize(i18next)(LitElement) {\n  static styles: CSSResultGroup = [\n    ScrollbarStyles,\n    /*\n     * Native controls, styled by the shared block.\n     *\n     * This used `md-filled-text-field` and the Material buttons until the user looked at it\n     * (2026-09-11): \"too big, and the style does not fit.\" They are right — a filled field\n     * with a floating label is a form control from a different density than the pills,\n     * chips and 30px rows this product uses everywhere else.\n     *\n     * `FormFieldStyles` exists precisely for this: a component draws its input inside its\n     * own shadow root, where the theme stylesheet cannot reach, so the token wiring has to\n     * be declared per component. It goes first so local rules below can override it.\n     */\n    FormFieldStyles,\n    /* The popup footer already has a convention — plain buttons, pill on pointer devices. */\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        color: var(--md-sys-color-on-surface);\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [body] {\n        display: grid;\n        grid-template-columns: minmax(240px, 320px) 1fr;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px);\n        flex: 1;\n        min-height: 0;\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--md-sys-shape-corner-medium, 8px);\n        overflow: hidden;\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        font-size: var(--fontsize-small, 13px);\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: var(--md-sys-color-surface-container);\n      }\n\n      [count] {\n        color: var(--md-sys-color-primary);\n        font-weight: 600;\n      }\n\n      ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      li[seat] {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        padding: var(--spacing-small, 6px) var(--spacing-medium, 8px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        cursor: pointer;\n      }\n\n      li[seat]:hover {\n        background-color: var(--md-sys-color-surface-container-high);\n      }\n\n      li[seat][selected] {\n        background-color: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      li[seat] [title-row] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      li[seat] [name] {\n        font-weight: 600;\n      }\n\n      li[seat] small {\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 12px);\n      }\n\n      li[seat][selected] small {\n        color: inherit;\n      }\n\n      [tag] {\n        font-size: var(--fontsize-smaller, 11px);\n        padding: 0 6px;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        background-color: var(--md-sys-color-surface-container-highest);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [tag][warn] {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      [detail] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-large, 14px);\n        padding: var(--spacing-large, 14px);\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      /* 곁말 — 필드 밑에 붙거나 혼자 선다. 본문과 같은 무게로 두면 읽는 순서가 흐려진다. */\n      [note],\n      label[field] small {\n        margin: 0;\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n        line-height: 1.5;\n      }\n\n      dl[grants] {\n        display: grid;\n        grid-template-columns: minmax(8em, max-content) 1fr;\n        /* 줄 사이가 2px 이었다. 이름이 위아래로 붙어 한 덩어리로 읽혔다. */\n        gap: 6px var(--spacing-large, 14px);\n        margin: 0;\n        align-items: baseline;\n      }\n\n      /*\n       * 모듈 이름이 **기준선**이다 — 굵기로 두 칸이 저절로 갈린다.\n       *\n       * 처음엔 거꾸로였다: 이름을 흐리게 두고 「쓰기」를 굵게 했더니, 눈이 먼저 닿는 것이\n       * 오른쪽 칸이 되어 왼쪽이 뭘 말하는지 훑어지지 않았다. 사람이 이 표에서 찾는 것은\n       * 「이 자리가 **어느 모듈**을 여나」이고, 읽기냐 쓰기냐는 그 다음이다.\n       */\n      dl[grants] dt {\n        color: var(--md-sys-color-on-surface);\n        font-size: var(--fontsize-small, 13px);\n        font-weight: 600;\n      }\n\n      dl[grants] dd {\n        margin: 0;\n        display: flex;\n        flex-wrap: wrap;\n        /* 낱말 사이 가운뎃점 — 「읽기 쓰기」가 한 낱말로 붙어 보이던 것을 가른다. */\n        gap: 0 6px;\n      }\n\n      dl[grants] dd [axis] + [axis]::before {\n        content: '·';\n        margin-right: 6px;\n        color: var(--md-sys-color-outline);\n      }\n\n      [axis] {\n        font-size: var(--fontsize-small, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [axis][missing] {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      [empty] {\n        margin: auto;\n        text-align: center;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--fontsize-small, 13px);\n        padding: var(--spacing-large, 16px);\n      }\n\n      /* 자리 배치만 더한다 — 모양은 CommonHeaderStyles 의 .footer 가 갖는다. */\n      .footer {\n        justify-content: flex-end;\n      }\n    `\n  ]\n\n  @property({ type: Object }) page?: any\n\n  @state() private templates: TemplateView[] = []\n  @state() private selected?: TemplateView\n  /** `undefined` means \"the blank door\" — name the seat yourself. */\n  @state() private scratch = false\n  @state() private name = ''\n  @state() private description = ''\n\n  async connectedCallback() {\n    super.connectedCallback()\n    await this.fetchTemplates()\n  }\n\n  private async fetchTemplates() {\n    const response = await client.query({\n      query: gql`\n        query {\n          roleTemplates {\n            id\n            name\n            description\n            privilegeCount\n            missingCount\n            defaultNameTaken\n            grantsNothingDeliberately\n            grants {\n              category\n              axes\n              missingAxes\n            }\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    /*\n     * A GraphQL error arrives as `data: null` with `errors` set, and `?? []` would draw\n     * that as \"this installation offers nothing\" — a refusal made to look like an answer.\n     */\n    if (response.errors?.length) {\n      document.dispatchEvent(\n        new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n      )\n      return\n    }\n\n    this.templates = response.data?.roleTemplates || []\n  }\n\n  render() {\n    return html`\n      <div body>\n        <div panel>\n          <header>\n            ${i18next.t('field.seat')}\n            <span count>${this.templates.length}</span>\n          </header>\n          <ul>\n            ${this.templates.map(\n              template => html`\n                <li seat ?selected=${!this.scratch && this.selected?.id === template.id} @click=${() => this.pick(template)}>\n                  <div title-row>\n                    <span name>${template.name}</span>\n                    ${template.defaultNameTaken\n                      ? html`<span tag>${i18next.t('text.already in this domain')}</span>`\n                      : nothing}\n                    ${template.missingCount\n                      ? html`<span tag warn>${i18next.t('text.x not here', { x: template.missingCount })}</span>`\n                      : nothing}\n                  </div>\n                  <small>${this.summarize(template)}</small>\n                </li>\n              `\n            )}\n            <li seat ?selected=${this.scratch} @click=${() => this.pickScratch()}>\n              <div title-row>\n                <md-icon>edit</md-icon>\n                <span name>${i18next.t('button.name it yourself')}</span>\n              </div>\n              <small>${i18next.t('text.start from a blank seat')}</small>\n            </li>\n          </ul>\n        </div>\n\n        <div panel>${this.renderDetail()}</div>\n      </div>\n\n      <div class=\"footer\">\n        <button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</button>\n        <button ok ?disabled=${!this.canCreate()} @click=${() => this.create()}>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  /**\n   * What the seat opens, in one line — **counted, not interpreted.**\n   *\n   * This briefly said \"changes 6 · only sees 8\", which read well and was not something the\n   * data supports: the privilege axis is an unconstrained string and its name does not\n   * determine what the resolver behind it does. Counting is safe; grouping by meaning was\n   * not. See `renderOpens`.\n   *\n   * \"0 privileges\" is still two different facts and must not be merged: granting nothing\n   * on purpose is an approval seat, and a template whose grants are all missing here is a\n   * defect (`missingCount`).\n   */\n  private summarize(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return i18next.t('text.opens nothing, receives approvals')\n    }\n\n    return i18next.t('text.x modules y privileges', {\n      x: template.grants.filter(grant => grant.axes.length).length,\n      y: template.privilegeCount\n    })\n  }\n\n  private renderDetail() {\n    if (this.scratch) {\n      return html`\n        <header>${i18next.t('button.name it yourself')}</header>\n        <div detail>\n          <label field>\n            ${i18next.t('field.name')}\n            <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          </label>\n          <label field>\n            ${i18next.t('field.description')}\n            <input .value=${this.description} @input=${(e: any) => (this.description = e.target.value)} />\n          </label>\n          <small>${i18next.t('text.a blank seat opens nothing until you give it privileges')}</small>\n        </div>\n      `\n    }\n\n    if (!this.selected) {\n      return html`<div empty>${i18next.t('text.pick a seat to see what it opens')}</div>`\n    }\n\n    const template = this.selected\n\n    return html`\n      <header>${template.name}</header>\n      <div detail>\n        <label field>\n          ${i18next.t('field.name')}\n          <input .value=${this.name} @input=${(e: any) => (this.name = e.target.value)} />\n          <small>${i18next.t('text.this plant may call the seat what it likes')}</small>\n        </label>\n        ${template.defaultNameTaken && this.name === template.name\n          ? html`<p note>${i18next.t('text.a role of this name exists and will be added to')}</p>`\n          : nothing}\n        ${this.renderOpens(template)}\n      </div>\n    `\n  }\n\n  /**\n   * 이 자리가 무엇을 여나 — **선언된 것만.**\n   *\n   * ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):\n   * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」\n   *\n   * 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.\n   *\n   *  ① `@privilege(privilege:)` 는 **제약 없는 문자열**이다(지시자 선언이 `privilege: String`\n   *     이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 **오늘\n   *     그렇게 쓴 것**이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,\n   *     처음 보는 값은 **알아서가 아니라 query 가 아니라서** 「바꿀 수 있는 것」으로 떨어졌다.\n   *  ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,\n   *     그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 **읽는** 질의에\n   *     `privilege: \"mutation\"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가\n   *     아니라 **어느 문을 지나야 하나**의 이름이다.\n   *\n   * 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것\n   * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.\n   */\n  private renderOpens(template: TemplateView) {\n    if (template.grantsNothingDeliberately) {\n      return html`<p note>${i18next.t('text.opens nothing, receives approvals')}</p>`\n    }\n\n    return html`\n      <dl grants>\n        ${[...template.grants].sort(byName).map(\n          grant => html`\n            <dt>${moduleLabel(grant.category)}</dt>\n            <dd>\n              ${grant.axes.map(axis => html`<span axis>${axisLabel(axis)}</span>`)}\n              ${grant.missingAxes.map(axis => html`<span axis missing>${axisLabel(axis)}</span>`)}\n            </dd>\n          `\n        )}\n      </dl>\n      ${template.missingCount\n        ? html`<p note>${i18next.t('text.struck through are not installed here')}</p>`\n        : nothing}\n    `\n  }\n\n  private pick(template: TemplateView) {\n    this.scratch = false\n    this.selected = template\n    this.name = template.name\n  }\n\n  private pickScratch() {\n    this.scratch = true\n    this.selected = undefined\n    this.name = ''\n  }\n\n  private canCreate() {\n    return Boolean(this.name.trim()) && (this.scratch || Boolean(this.selected))\n  }\n\n  private async create() {\n    const created = this.scratch\n      ? await this.page?.createBlankRole?.(this.name.trim(), this.description.trim())\n      : await this.page?.createFromTemplate?.(this.selected!.id, this.name.trim())\n\n    if (created) {\n      this.dispatchEvent(new CustomEvent('close'))\n    }\n  }\n}\n"]}