@things-factory/auth-ui 10.1.44 → 10.1.47

package/dist-client/bootstrap.js

@@ -9,7 +9,10 @@ import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-edito
 import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist';
 import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 import { ADD_MORENDA } from '@things-factory/more-base/client';
+import { registerPersonKind } from './entity360/person-360.js';
 export default async function bootstrap() {
+    /* the person 360 - a User value anywhere opens it (ADR-0067) */
+    registerPersonKind();
     registerGristEditor('privilege', OxGristEditorPrivilege);
     registerGristRenderer('privilege', OxGristRendererJson5);
     /* add user profile morenda */

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EACL,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EACzC,oBAAoB,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,SAAS;IACrC,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,qCAAqC;YAC/C,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,kCAAkC;YAC5C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC;oBACH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;wBACxC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;wBACrC,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;oBACpC,CAAC;oBAED,CAAC;oBAAA,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;wBACxC,IAAI,CAAC;4BACH,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,mDAAmD,CAAA;wBAC9E,CAAC;wBAAC,OAAO,CAAC,EAAE,CAAC;4BACX,SAAS;wBACX,CAAC;oBACH,CAAC,CAAC,CAAA;gBACJ,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,SAAS;gBACX,CAAC;gBAED,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACpC,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;QAC3C,CAAC;IACH,CAAC,CAAC,CAAA;IAEF;;;;MAIE;IACF,MAAM,IAAI,CAAC,OAAO,EAAE,CAAA;AACtB,CAAC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport { i18next } from '@operato/i18n'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport {\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer,\n  OxGristRendererJson5\n} from '@operato/data-grist'\n\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { ADD_MORENDA } from '@things-factory/more-base/client'\n\nexport default async function bootstrap() {\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>account_circle</md-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>exit_to_app</md-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        try {\n          if (typeof localStorage !== 'undefined') {\n            localStorage.removeItem('i18nextLng')\n            localStorage.removeItem('i18next')\n          }\n\n          ;['i18next', 'i18nextLng'].forEach(name => {\n            try {\n              document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`\n            } catch (e) {\n              // ignore\n            }\n          })\n        } catch (e) {\n          // ignore\n        }\n\n        auth.signout()\n      }\n    }\n  })\n\n  auth.on('profile', ({ credential }) => {\n    if (credential && credential.locale) {\n      i18next.changeLanguage(credential.locale)\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  await auth.profile()\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,iCAAiC,CAAA,CAAC,sDAAsD;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EACL,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EACzC,oBAAoB,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAE9D,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,SAAS;IACrC,gEAAgE;IAChE,kBAAkB,EAAE,CAAA;IAEpB,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACxD,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAExD,8BAA8B;IAC9B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,qCAAqC;YAC/C,IAAI,EAAE,IAAI,CAAA,iDAAiD;YAC3D,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,0BAA0B;IAC1B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE;YACP,IAAI,EAAE,IAAI,CAAA,kCAAkC;YAC5C,IAAI,EAAE,IAAI,CAAA,8CAA8C;YACxD,QAAQ,EAAE,aAAa,CAAC,SAAS;YACjC,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC;oBACH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;wBACxC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;wBACrC,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;oBACpC,CAAC;oBAED,CAAC;oBAAA,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;wBACxC,IAAI,CAAC;4BACH,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,mDAAmD,CAAA;wBAC9E,CAAC;wBAAC,OAAO,CAAC,EAAE,CAAC;4BACX,SAAS;wBACX,CAAC;oBACH,CAAC,CAAC,CAAA;gBACJ,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,SAAS;gBACX,CAAC;gBAED,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;SACF;KACF,CAAC,CAAA;IAEF,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACpC,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;QAC3C,CAAC;IACH,CAAC,CAAC,CAAA;IAEF;;;;MAIE;IACF,MAAM,IAAI,CAAC,OAAO,EAAE,CAAA;AACtB,CAAC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport { i18next } from '@operato/i18n'\nimport '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport {\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer,\n  OxGristRendererJson5\n} from '@operato/data-grist'\n\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { ADD_MORENDA } from '@things-factory/more-base/client'\nimport { registerPersonKind } from './entity360/person-360.js'\n\nexport default async function bootstrap() {\n  /* the person 360 - a User value anywhere opens it (ADR-0067) */\n  registerPersonKind()\n\n  registerGristEditor('privilege', OxGristEditorPrivilege)\n  registerGristRenderer('privilege', OxGristRendererJson5)\n\n  /* add user profile morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>account_circle</md-icon> `,\n      name: html` <ox-i18n msgid=\"text.auth profile\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        navigate('profile')\n      }\n    }\n  })\n\n  /* add sign-out morenda */\n  store.dispatch({\n    type: ADD_MORENDA,\n    morenda: {\n      icon: html` <md-icon>exit_to_app</md-icon> `,\n      name: html` <ox-i18n msgid=\"field.sign out\"></ox-i18n> `,\n      position: TOOL_POSITION.FRONT_END,\n      action: () => {\n        try {\n          if (typeof localStorage !== 'undefined') {\n            localStorage.removeItem('i18nextLng')\n            localStorage.removeItem('i18next')\n          }\n\n          ;['i18next', 'i18nextLng'].forEach(name => {\n            try {\n              document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`\n            } catch (e) {\n              // ignore\n            }\n          })\n        } catch (e) {\n          // ignore\n        }\n\n        auth.signout()\n      }\n    }\n  })\n\n  auth.on('profile', ({ credential }) => {\n    if (credential && credential.locale) {\n      i18next.changeLanguage(credential.locale)\n    }\n  })\n\n  /* \n    Get user profile information from server. \n    As soon as response received, auth.on('profile', ...) handlers start to work.\n    It's very important point to build UI for the user.\n  */\n  await auth.profile()\n}\n"]}

package/dist-client/components/auth-badge.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * A summary badge that carries its own look - for grid cells.
+ *
+ * The role and user lists drew their badges as `<span class="badge">` and styled `.badge` in the
+ * page. A grid cell renders inside the grid field's own shadow root (`ox-grid-field` ·
+ * `ox-list-field`), where page CSS does not reach, so every badge came out as plain text
+ * [확인함 2026-09-24 :3500 role list: background transparent, radius 0, padding 0]. The two that
+ * mattered most were the ones that said something waits on the reader - "grants nothing" and a
+ * locked account - and they looked like any other word in the row.
+ *
+ * Colour only where something waits on the reader (`attention`); the default state is quiet
+ * (`quiet`). Two lists in one package use it, so it lives here.
+ */
+export declare class AuthBadge extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** `attention` when something waits on the reader, `quiet` for the default state, none otherwise. */
+    tone?: 'attention' | 'quiet';
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/components/auth-badge.js

@@ -0,0 +1,50 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A summary badge that carries its own look - for grid cells.
+ *
+ * The role and user lists drew their badges as `<span class="badge">` and styled `.badge` in the
+ * page. A grid cell renders inside the grid field's own shadow root (`ox-grid-field` ·
+ * `ox-list-field`), where page CSS does not reach, so every badge came out as plain text
+ * [확인함 2026-09-24 :3500 role list: background transparent, radius 0, padding 0]. The two that
+ * mattered most were the ones that said something waits on the reader - "grants nothing" and a
+ * locked account - and they looked like any other word in the row.
+ *
+ * Colour only where something waits on the reader (`attention`); the default state is quiet
+ * (`quiet`). Two lists in one package use it, so it lives here.
+ */
+let AuthBadge = class AuthBadge extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: var(--md-sys-shape-corner-small, 6px);
+      font-size: 0.78rem;
+      line-height: 1.4;
+      white-space: nowrap;
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    :host([tone='attention']) {
+      background-color: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
+    }
+    :host([tone='quiet']) {
+      background-color: transparent;
+      color: var(--md-sys-color-outline);
+    }
+  `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], AuthBadge.prototype, "tone", void 0);
+AuthBadge = __decorate([
+    customElement('auth-badge')
+], AuthBadge);
+export { AuthBadge };
+//# sourceMappingURL=auth-badge.js.map

package/dist-client/components/auth-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-badge.js","sourceRoot":"","sources":["../../client/components/auth-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D;;;;;;;;;;;;GAYG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;aAChC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,AAnBY,CAmBZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;;AAJ4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;uCAA6B;AAvB9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4BrB","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * A summary badge that carries its own look - for grid cells.\n *\n * The role and user lists drew their badges as `<span class=\"badge\">` and styled `.badge` in the\n * page. A grid cell renders inside the grid field's own shadow root (`ox-grid-field` ·\n * `ox-list-field`), where page CSS does not reach, so every badge came out as plain text\n * [확인함 2026-09-24 :3500 role list: background transparent, radius 0, padding 0]. The two that\n * mattered most were the ones that said something waits on the reader - \"grants nothing\" and a\n * locked account - and they looked like any other word in the row.\n *\n * Colour only where something waits on the reader (`attention`); the default state is quiet\n * (`quiet`). Two lists in one package use it, so it lives here.\n */\n@customElement('auth-badge')\nexport class AuthBadge extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: var(--md-sys-shape-corner-small, 6px);\n      font-size: 0.78rem;\n      line-height: 1.4;\n      white-space: nowrap;\n      background-color: var(--md-sys-color-surface-variant);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    :host([tone='attention']) {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n    :host([tone='quiet']) {\n      background-color: transparent;\n      color: var(--md-sys-color-outline);\n    }\n  `\n\n  /** `attention` when something waits on the reader, `quiet` for the default state, none otherwise. */\n  @property({ reflect: true }) tone?: 'attention' | 'quiet'\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n"]}

package/dist-client/components/auth-badge.test.d.ts

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

package/dist-client/components/auth-badge.test.js

@@ -0,0 +1,37 @@
+import { readdirSync, readFileSync, statSync } from 'fs';
+import path from 'path';
+/**
+ * Badges in grid cells carry their own look.
+ *
+ * A grid cell renders inside the grid field's shadow root, where page CSS does not reach. The role
+ * and user lists drew `<span class="badge">` and styled `.badge` in the page, so every badge came out
+ * as plain text - "grants nothing" and a locked account looked like any other word
+ * [확인함 2026-09-24 :3500]. `<auth-badge>` styles itself.
+ */
+const CLIENT = path.resolve(__dirname, '..');
+function sources(dir, found = []) {
+    for (const entry of readdirSync(dir)) {
+        const full = path.join(dir, entry);
+        if (statSync(full).isDirectory())
+            sources(full, found);
+        else if (full.endsWith('.ts') && !full.endsWith('.test.ts'))
+            found.push(full);
+    }
+    return found;
+}
+/** Code only - a comment that quotes the old markup is not a use of it. */
+const withoutComments = (text) => text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
+describe('badges in auth-ui', () => {
+    it('★ no screen draws a page-styled badge span that a grid cell would leave unstyled', () => {
+        const offenders = sources(CLIENT)
+            .filter(file => /class="badge"/.test(withoutComments(readFileSync(file, 'utf-8'))))
+            .map(file => path.relative(CLIENT, file));
+        expect(offenders).toEqual([]);
+    });
+    it.each(['pages/role/role-list-page.ts', 'pages/user/user-list-page.ts'])('★ %s loads the badge it draws', file => {
+        const source = readFileSync(path.join(CLIENT, file), 'utf-8');
+        expect(source).toMatch(/<auth-badge/);
+        expect(source).toContain("import '../../components/auth-badge.js'");
+    });
+});
+//# sourceMappingURL=auth-badge.test.js.map

package/dist-client/components/auth-badge.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-badge.test.js","sourceRoot":"","sources":["../../client/components/auth-badge.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAA;AACxD,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB;;;;;;;GAOG;AAEH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;AAE5C,SAAS,OAAO,CAAC,GAAW,EAAE,QAAkB,EAAE;IAChD,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAClC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;YAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;aACjD,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC/E,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,2EAA2E;AAC3E,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;AAE5G,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,kFAAkF,EAAE,GAAG,EAAE;QAC1F,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC;aAC9B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;aAClF,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;QAC3C,MAAM,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,IAAI,CAAC,CAAC,8BAA8B,EAAE,8BAA8B,CAAC,CAAC,CAAC,+BAA+B,EAAE,IAAI,CAAC,EAAE;QAChH,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAA;QAC7D,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;QACrC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,yCAAyC,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { readdirSync, readFileSync, statSync } from 'fs'\nimport path from 'path'\n\n/**\n * Badges in grid cells carry their own look.\n *\n * A grid cell renders inside the grid field's shadow root, where page CSS does not reach. The role\n * and user lists drew `<span class=\"badge\">` and styled `.badge` in the page, so every badge came out\n * as plain text - \"grants nothing\" and a locked account looked like any other word\n * [확인함 2026-09-24 :3500]. `<auth-badge>` styles itself.\n */\n\nconst CLIENT = path.resolve(__dirname, '..')\n\nfunction sources(dir: string, found: string[] = []): string[] {\n  for (const entry of readdirSync(dir)) {\n    const full = path.join(dir, entry)\n    if (statSync(full).isDirectory()) sources(full, found)\n    else if (full.endsWith('.ts') && !full.endsWith('.test.ts')) found.push(full)\n  }\n  return found\n}\n\n/** Code only - a comment that quotes the old markup is not a use of it. */\nconst withoutComments = (text: string) => text.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '').replace(/^\\s*\\/\\/.*$/gm, '')\n\ndescribe('badges in auth-ui', () => {\n  it('★ no screen draws a page-styled badge span that a grid cell would leave unstyled', () => {\n    const offenders = sources(CLIENT)\n      .filter(file => /class=\"badge\"/.test(withoutComments(readFileSync(file, 'utf-8'))))\n      .map(file => path.relative(CLIENT, file))\n    expect(offenders).toEqual([])\n  })\n\n  it.each(['pages/role/role-list-page.ts', 'pages/user/user-list-page.ts'])('★ %s loads the badge it draws', file => {\n    const source = readFileSync(path.join(CLIENT, file), 'utf-8')\n    expect(source).toMatch(/<auth-badge/)\n    expect(source).toContain(\"import '../../components/auth-badge.js'\")\n  })\n})\n"]}

package/dist-client/components/create-domain-popup-theme.test.d.ts

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

package/dist-client/components/create-domain-popup-theme.test.js

@@ -0,0 +1,16 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+/**
+ * The create-domain popup marks an invalid name in the theme's error colours. It used a fixed
+ * #fce6e6 behind text that follows the theme, which in the dark theme was light text on pink.
+ */
+const source = readFileSync(path.join(__dirname, 'create-domain-popup.ts'), 'utf-8');
+describe('the invalid-name mark in create-domain-popup', () => {
+    it('★ uses the error container pair, not a fixed colour', () => {
+        const rule = source.slice(source.indexOf('input.checkValidName {'), source.indexOf('}', source.indexOf('input.checkValidName {')));
+        expect(rule).toMatch(/background-color:\s*var\(--md-sys-color-error-container\)/);
+        expect(rule).toMatch(/color:\s*var\(--md-sys-color-on-error-container\)/);
+        expect(rule).not.toMatch(/#[0-9a-f]{3,6}/i);
+    });
+});
+//# sourceMappingURL=create-domain-popup-theme.test.js.map

package/dist-client/components/create-domain-popup-theme.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-domain-popup-theme.test.js","sourceRoot":"","sources":["../../client/components/create-domain-popup-theme.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAA;AACjC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB;;;GAGG;AACH,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,wBAAwB,CAAC,EAAE,OAAO,CAAC,CAAA;AAEpF,QAAQ,CAAC,8CAA8C,EAAE,GAAG,EAAE;IAC5D,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;QAClI,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,2DAA2D,CAAC,CAAA;QACjF,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,mDAAmD,CAAC,CAAA;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;IAC7C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { readFileSync } from 'fs'\nimport path from 'path'\n\n/**\n * The create-domain popup marks an invalid name in the theme's error colours. It used a fixed\n * #fce6e6 behind text that follows the theme, which in the dark theme was light text on pink.\n */\nconst source = readFileSync(path.join(__dirname, 'create-domain-popup.ts'), 'utf-8')\n\ndescribe('the invalid-name mark in create-domain-popup', () => {\n  it('★ uses the error container pair, not a fixed colour', () => {\n    const rule = source.slice(source.indexOf('input.checkValidName {'), source.indexOf('}', source.indexOf('input.checkValidName {')))\n    expect(rule).toMatch(/background-color:\\s*var\\(--md-sys-color-error-container\\)/)\n    expect(rule).toMatch(/color:\\s*var\\(--md-sys-color-on-error-container\\)/)\n    expect(rule).not.toMatch(/#[0-9a-f]{3,6}/i)\n  })\n})\n"]}

package/dist-client/components/create-domain-popup.js

@@ -24,8 +24,10 @@ let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitEle
         padding: var(--spacing-large);
       }
 
+      /* A name that is not valid - the theme's error pair, so the text stays readable in the dark theme. */
       input.checkValidName {
-        background-color: #fce6e6;
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
       }
 
       label {

package/dist-client/components/create-domain-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        overflow: auto;\n      }\n\n      form {\n        flex: 1;\n        padding: var(--spacing-large);\n      }\n\n      input.checkValidName {\n        background-color: #fce6e6;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--md-sys-color-surface);\n        font: var(--input-font);\n      }\n\n      [field] {\n        grid-column: span 2;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <form>\n        <div field grid-span>\n          <label\n            >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n              type=\"text\"\n              name=\"name\"\n              @input=${this.checkValidation}\n              autofocus\n          /></label>\n        </div>\n\n        <div field grid-span>\n          <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n        </div>\n      </form>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => this.onCreateDomain()} done><md-icon>add</md-icon>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}
+{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        overflow: auto;\n      }\n\n      form {\n        flex: 1;\n        padding: var(--spacing-large);\n      }\n\n      /* A name that is not valid - the theme's error pair, so the text stays readable in the dark theme. */\n      input.checkValidName {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--md-sys-color-surface);\n        font: var(--input-font);\n      }\n\n      [field] {\n        grid-column: span 2;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <form>\n        <div field grid-span>\n          <label\n            >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n              type=\"text\"\n              name=\"name\"\n              @input=${this.checkValidation}\n              autofocus\n          /></label>\n        </div>\n\n        <div field grid-span>\n          <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n        </div>\n      </form>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => this.onCreateDomain()} done><md-icon>add</md-icon>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/entity360/person-360.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+/**
+ * The person 360 (ADR-0067, design/ui/entity360-person.md): a `User` value anywhere - a grid's
+ * `updater`, a request's author - opens it. auth-ui declares the kind because the account is its
+ * fact; organization and worklist hang their own sections on it with their own doors.
+ *
+ * This section is identity and the roles held on this site. `userRoles` answers this domain's roles
+ * only (and its parent's) - `User.roles` answers every domain's and must not be used here.
+ */
+export declare function registerPersonKind(): void;
+export declare class PersonRolesSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    subject?: Entity360Subject;
+    answer?: Entity360DoorAnswer<{
+        id: string;
+        name: string;
+    }[]>;
+    updated(changed: Map<string, unknown>): void;
+    private read;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/entity360/person-360.js

@@ -0,0 +1,98 @@
+import { __decorate, __metadata } from "tslib";
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { readEntity360Door, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
+/**
+ * The person 360 (ADR-0067, design/ui/entity360-person.md): a `User` value anywhere - a grid's
+ * `updater`, a request's author - opens it. auth-ui declares the kind because the account is its
+ * fact; organization and worklist hang their own sections on it with their own doors.
+ *
+ * This section is identity and the roles held on this site. `userRoles` answers this domain's roles
+ * only (and its parent's) - `User.roles` answers every domain's and must not be used here.
+ */
+export function registerPersonKind() {
+    registerEntity360Kind({
+        kind: 'person',
+        typenames: ['User'],
+        title: ({ value }) => value.name || value.email || '',
+        context: ({ value }) => (value.name && value.email ? value.email : '')
+    });
+    registerEntity360Section('person', {
+        name: 'roles',
+        order: 30,
+        render: subject => html `<person-roles-section .subject=${subject}></person-roles-section>`
+    });
+}
+let PersonRolesSection = class PersonRolesSection extends LitElement {
+    static { this.styles = css `
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    li {
+      padding: 2px 8px;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background: var(--md-sys-color-surface-container-high);
+      color: var(--md-sys-color-on-surface);
+      font: 13px/1.5 sans-serif;
+    }
+  `; }
+    updated(changed) {
+        if (changed.has('subject'))
+            this.read();
+    }
+    async read() {
+        const id = this.subject?.id;
+        this.answer = undefined;
+        if (!id)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($userId: String!) {
+          userRoles(userId: $userId) {
+            id
+            name
+            assigned
+          }
+        }
+      `,
+            variables: { userId: id }
+        });
+        /* A later subject may have arrived while this one was being read. */
+        if (this.subject?.id !== id)
+            return;
+        this.answer = readEntity360Door(response, data => (data?.userRoles || []).filter((role) => role.assigned));
+    }
+    render() {
+        const answer = this.answer;
+        return html `<ox-entity360-section
+      .heading=${i18next.t('field.roles', { defaultValue: 'roles' })}
+      .state=${answer?.state ?? 'loading'}
+      .message=${answer?.message ?? ''}
+    >
+      <ul>
+        ${(answer?.data || []).map(role => html `<li>${role.name}</li>`)}
+      </ul>
+    </ox-entity360-section>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], PersonRolesSection.prototype, "subject", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PersonRolesSection.prototype, "answer", void 0);
+PersonRolesSection = __decorate([
+    customElement('person-roles-section')
+], PersonRolesSection);
+export { PersonRolesSection };
+//# sourceMappingURL=person-360.js.map

package/dist-client/entity360/person-360.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"person-360.js","sourceRoot":"","sources":["../../client/entity360/person-360.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EAGzB,MAAM,iBAAiB,CAAA;AAExB;;;;;;;GAOG;AAEH,MAAM,UAAU,kBAAkB;IAChC,qBAAqB,CAAC;QACpB,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,CAAC,MAAM,CAAC;QACnB,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE;QACrD,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;KACvE,CAAC,CAAA;IAEF,wBAAwB,CAAC,QAAQ,EAAE;QACjC,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA,kCAAkC,OAAO,0BAA0B;KAC3F,CAAC,CAAA;AACJ,CAAC;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;aACzC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;IAKD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;IACzC,CAAC;IAEO,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACvB,IAAI,CAAC,EAAE;YAAE,OAAM;QAEf,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQT;YACD,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;SAC1B,CAAC,CAAA;QAEF,qEAAqE;QACrE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE;YAAE,OAAM;QACnC,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;IACjH,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAC1B,OAAO,IAAI,CAAA;iBACE,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;eACrD,MAAM,EAAE,KAAK,IAAI,SAAS;iBACxB,MAAM,EAAE,OAAO,IAAI,EAAE;;;UAG5B,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,IAAI,OAAO,CAAC;;4BAE3C,CAAA;IAC1B,CAAC;;AAzC+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;mDAA2B;AACjD;IAAR,KAAK,EAAE;;kDAA6D;AApB1D,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA6D9B","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport {\n  readEntity360Door,\n  registerEntity360Kind,\n  registerEntity360Section,\n  type Entity360DoorAnswer,\n  type Entity360Subject\n} from '@operato/layout'\n\n/**\n * The person 360 (ADR-0067, design/ui/entity360-person.md): a `User` value anywhere - a grid's\n * `updater`, a request's author - opens it. auth-ui declares the kind because the account is its\n * fact; organization and worklist hang their own sections on it with their own doors.\n *\n * This section is identity and the roles held on this site. `userRoles` answers this domain's roles\n * only (and its parent's) - `User.roles` answers every domain's and must not be used here.\n */\n\nexport function registerPersonKind() {\n  registerEntity360Kind({\n    kind: 'person',\n    typenames: ['User'],\n    title: ({ value }) => value.name || value.email || '',\n    context: ({ value }) => (value.name && value.email ? value.email : '')\n  })\n\n  registerEntity360Section('person', {\n    name: 'roles',\n    order: 30,\n    render: subject => html`<person-roles-section .subject=${subject}></person-roles-section>`\n  })\n}\n\n@customElement('person-roles-section')\nexport class PersonRolesSection extends LitElement {\n  static styles = css`\n    ul {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n    li {\n      padding: 2px 8px;\n      border-radius: var(--md-sys-shape-corner-small, 8px);\n      background: var(--md-sys-color-surface-container-high);\n      color: var(--md-sys-color-on-surface);\n      font: 13px/1.5 sans-serif;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n  @state() answer?: Entity360DoorAnswer<{ id: string; name: string }[]>\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('subject')) this.read()\n  }\n\n  private async read() {\n    const id = this.subject?.id\n    this.answer = undefined\n    if (!id) return\n\n    const response = await client.query({\n      query: gql`\n        query ($userId: String!) {\n          userRoles(userId: $userId) {\n            id\n            name\n            assigned\n          }\n        }\n      `,\n      variables: { userId: id }\n    })\n\n    /* A later subject may have arrived while this one was being read. */\n    if (this.subject?.id !== id) return\n    this.answer = readEntity360Door(response, data => (data?.userRoles || []).filter((role: any) => role.assigned))\n  }\n\n  render() {\n    const answer = this.answer\n    return html`<ox-entity360-section\n      .heading=${i18next.t('field.roles', { defaultValue: 'roles' })}\n      .state=${answer?.state ?? 'loading'}\n      .message=${answer?.message ?? ''}\n    >\n      <ul>\n        ${(answer?.data || []).map(role => html`<li>${role.name}</li>`)}\n      </ul>\n    </ox-entity360-section>`\n  }\n}\n"]}

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

@@ -1,4 +1,6 @@
+import '@material/web/button/text-button.js';
 import '@material/web/icon/icon.js';
+import '../../components/auth-badge.js';
 import '@operato/data-grist';
 import '@operato/oops/ox-oops-note.js';
 import type { CSSResultGroup } from 'lit';
@@ -211,6 +213,12 @@ export declare class RoleListPage extends RoleListPageBase {
     /** 템플릿에서 — 이름은 이 공장이 정한 것을 그대로 보낸다. */
     createFromTemplate(templateId: string, name: string, separately?: boolean): any;
     private confirmStandingSeparately;
+    private templateGapCell;
+    /**
+     * 빠진 권한을 더한다 — **무엇을 더하는지 먼저 보인다.** 권한을 여는 일이라 그 목록을 읽고 누른다.
+     * 더하는 길은 템플릿 고르개와 같다(`createRoleFromTemplate` 가 같은 이름의 역할을 채운다).
+     */
+    private addFromTemplate;
     /** 백지에서 — 권한 없이 선다. 목록의 권한 수 칸이 0 을 빨갛게 말하므로 다음 걸음이 보인다. */
     createBlankRole(name: string, description: string): Promise<any>;
     /**

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

@@ -1,5 +1,7 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/button/text-button.js';
 import '@material/web/icon/icon.js';
+import '../../components/auth-badge.js';
 import '@operato/data-grist';
 import '@operato/oops/ox-oops-note.js';
 import gql from 'graphql-tag';
@@ -100,25 +102,6 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         position: relative;
       }
 
-      /* 요약 배지 — 색은 짝으로, 그리고 「무엇이 나를 기다리나」에만 쓴다. */
-      .badge {
-        display: inline-block;
-        padding: 2px 8px;
-        border-radius: var(--md-sys-shape-corner-small, 6px);
-        font-size: 0.78rem;
-        white-space: nowrap;
-        background-color: var(--md-sys-color-surface-variant);
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      .badge[attention] {
-        background-color: var(--md-sys-color-error-container);
-        color: var(--md-sys-color-on-error-container);
-      }
-      /* 「우리」는 기본 상태다 — 색을 쓰면 색이 아무것도 말하지 않게 된다. */
-      .badge[quiet] {
-        background-color: transparent;
-        color: var(--md-sys-color-outline);
-      }
 
       /*
         ── 세 묶음 ────────────────────────────────────────────────────────────
@@ -422,11 +405,11 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
      */
     sourceCell(record) {
         if (!this.isInherited(record)) {
-            return html `<span class="badge" quiet>${i18next.t('label.ours')}</span>`;
+            return html `<auth-badge tone="quiet">${i18next.t('label.ours')}</auth-badge>`;
         }
         const from = record?.domain?.name || record?.domain?.subdomain || '';
-        return html `<span class="badge" title=${i18next.t('text.role belongs to x domain and is edited there', { x: from })}
-      >${i18next.t('label.inherited')}${from ? ` · ${from}` : ''}</span
+        return html `<auth-badge title=${i18next.t('text.role belongs to x domain and is edited there', { x: from })}
+      >${i18next.t('label.inherited')}${from ? ` · ${from}` : ''}</auth-badge
     >`;
     }
     async pageInitialized() {
@@ -550,6 +533,24 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
                     record: { align: 'center', renderer: privilegeCountCell },
                     width: 110
                 },
+                {
+                    /*
+                     * **템플릿이 그 뒤로 더 얻은 것** (ADR-0075 결정 1).
+                     *
+                     * 템플릿은 씨앗이라, 역할이 선 뒤에 템플릿이 얻은 권한은 그 역할에 들어가지 않는다 — plant 의
+                     * 템플릿이 ai-assistant 를 얻었을 때 miratek 의 역할은 그대로였고, 그것을 본 것은 plant 의 보안
+                     * 러너뿐이었다. 여기서 수를 말하고, 더하는 것은 관리자가 누른다. 자동으로 더하지 않는다.
+                     *
+                     * 우리 역할에만 그린다 — 상속 역할은 그 도메인의 관리자 것이다. 뒤처지지 않은 역할에는 아무것도
+                     * 그리지 않는다(「최신」을 줄마다 적으면 읽을 것이 는다). 누르는 자리는 보이는 단추다 — 수를
+                     * 누르게 하지 않는다(옆 칸의 주석).
+                     */
+                    type: 'string',
+                    name: 'templateGap',
+                    header: i18next.t('field.vs template'),
+                    record: { align: 'center', renderer: (_v, _c, record) => this.templateGapCell(record) },
+                    width: 150
+                },
                 {
                     /*
                      * **출처 — 여기가 「보이는 것과 고칠 수 있는 것」을 가른다.**
@@ -635,6 +636,15 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
                     subdomain
                   }
                   privilegeCount
+                  templateGap {
+                    templateId
+                    templateName
+                    missingCount
+                    missing {
+                      category
+                      axes
+                    }
+                  }
                   updatedAt
                 }
                 total
@@ -826,6 +836,45 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
             cancelButton: { text: i18next.t('button.cancel') }
         }));
     }
+    templateGapCell(record) {
+        const gap = record?.templateGap;
+        if (!gap || !gap.missingCount || this.isInherited(record)) {
+            return nothing;
+        }
+        /*
+         * 격자 칸은 칸 요소의 shadow 안에 그려져 이 화면의 CSS 가 닿지 않는다. 그래서 스스로 모양을 갖는
+         * Material 단추를 쓰고, 높이만 칸의 단추 높이(--cell-action-height)에 맞춘다.
+         */
+        return html `${i18next.t('text.missing against template', { count: gap.missingCount })}
+      <md-text-button
+        style="--md-text-button-container-height: var(--cell-action-height, 26px)"
+        @click=${(event) => {
+            event.stopPropagation();
+            this.addFromTemplate(record);
+        }}
+        >${i18next.t('button.add')}</md-text-button
+      >`;
+    }
+    /**
+     * 빠진 권한을 더한다 — **무엇을 더하는지 먼저 보인다.** 권한을 여는 일이라 그 목록을 읽고 누른다.
+     * 더하는 길은 템플릿 고르개와 같다(`createRoleFromTemplate` 가 같은 이름의 역할을 채운다).
+     */
+    async addFromTemplate(record) {
+        const gap = record.templateGap;
+        const list = gap.missing
+            .map((grant) => `${i18next.t(`privilege.category.${grant.category}`, { defaultValue: grant.category })} (${grant.axes.join(', ')})`)
+            .join(', ');
+        const confirmed = await OxPrompt.open({
+            type: 'info',
+            title: i18next.t('title.add template privileges'),
+            text: i18next.t('text.add template privileges', { template: gap.templateName, count: gap.missingCount, list }),
+            confirmButton: { text: i18next.t('button.add') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (confirmed) {
+            await this.createFromTemplate(gap.templateId, record.name);
+        }
+    }
     /** 백지에서 — 권한 없이 선다. 목록의 권한 수 칸이 0 을 빨갛게 말하므로 다음 걸음이 보인다. */
     async createBlankRole(name, description) {
         return await this.onCreateRole({ name, description });
@@ -916,7 +965,7 @@ function privilegeCountCell(_value, _column, record) {
         return html ``;
     }
     return count === 0
-        ? html `<span class="badge" attention>${i18next.t('text.no privilege granted')}</span>`
-        : html `<span class="badge">${count}</span>`;
+        ? html `<auth-badge tone="attention">${i18next.t('text.no privilege granted')}</auth-badge>`
+        : html `<auth-badge>${count}</auth-badge>`;
 }
 //# sourceMappingURL=role-list-page.js.map