@things-factory/worklist 10.0.19 → 10.1.0

package/dist-client/components/activity-approval-ribon.js

@@ -2,149 +2,73 @@ import { __decorate, __metadata } from "tslib";
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@things-factory/organization/dist-client/component/approval-line-brief.js';
 import '../templates/activity-approval-context-template.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { toggleOverlay } from '@operato/layout';
+import { openPopup } from '@operato/layout';
+import { StateRibonStyles } from './state-ribon.js';
 let ActivityApprovalRibon = class ActivityApprovalRibon extends localize(i18next)(LitElement) {
-    static { this.styles = [
-        css `
-      :host {
-        display: flex;
-        background-color: var(--worklist-status-color);
-        color: var(--md-sys-color-on-primary);
-        align-items: center;
-        min-height: 44px;
-        --fontsize-small: 12px;
-      }
-
-      div {
-        border-left: var(--border-dim-color);
-        padding: var(--spacing-small) var(--spacing-medium);
-        align-self: center;
-      }
-
-      :host([state='assigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='delegated']) {
-        --worklist-status-color: #8654b0;
-      }
-
-      :host([state='submitted']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='escalated']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='rejected']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-
-      md-icon {
-        font-size: 24px;
-      }
-
-      [desc] {
-        flex: 2;
-        font-size: var(--fontsize-small);
-      }
-
-      [desc] * {
-        vertical-align: middle;
-      }
-
-      [assignee] {
-        text-align: center;
-        font-size: var(--fontsize-small);
-        line-height: 1.3;
-      }
-
-      [assignee] span {
-        display: block;
-        font-size: var(--fontsize-large);
-        font-weight: bold;
-      }
-
-      approval-line-brief {
-        background-color: var(--worklist-status-color);
-        font-size: var(--fontsize-small);
-      }
-
-      [state] {
-        text-align: right;
-        font-size: var(--fontsize-small);
-      }
-
-      @media only screen and (max-width: 460px) {
-        div {
-          border-left: none;
-        }
-
-        [assignee] {
-          display: none;
-        }
-        md-icon {
-          padding: 0;
-        }
-        approval-line-brief {
-          display: none;
-        }
-      }
-    `
-    ]; }
+    static { this.styles = [StateRibonStyles]; }
     render() {
         const { activityInstance, state } = this.activityApproval?.activityThread || {};
         const { description, assignee, approvalLine, activity } = activityInstance || {};
         const { startingType } = activity || {};
         return html `
-      <div desc>
-        <md-icon
-          @click=${() => {
-            toggleOverlay('activity-info-overlay', {
-                template: html `<activity-approval-context-template
-                .activityApproval=${this.activityApproval}
-                state=${state}
-              ></activity-approval-context-template>`
-            });
+      <span class="state">
+        <i class="dot"></i>
+        ${i18next.t('label.activity-state-' + state)}
+      </span>
+
+      <md-icon
+        class="info"
+        role="button"
+        tabindex="0"
+        title=${String(i18next.t('label.approval-info'))}
+        @click=${() => this.openInfo(state)}
+        @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.openInfo(state);
+            }
         }}
-          >description</md-icon
-        >
-        ${description}
-      </div>
+        >info</md-icon
+      >
+
+      <span class="desc" title=${description || ''}>${description || ''}</span>
+
+
       ${startingType == 'issue' && assignee
-            ? html `
-            <div assignee>
-              ${i18next.t('field.assignee')}
-              <span>${assignee?.name}&nbsp;</span>
-            </div>
-          `
-            : html ``}
+            ? html `<span class="who"><span class="who-label">${i18next.t('field.assignee')}</span>${assignee?.name}</span>`
+            : ''}
       ${approvalLine
             ? html `<approval-line-brief
             .model=${approvalLine}
             .current=${this.activityApproval.order}
           ></approval-line-brief>`
-            : html ``}
-
-      <div state>${i18next.t('label.activity-state-' + state)}</div>
+            : ''}
     `;
     }
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────
+     * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.
+     *
+     *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다
+     *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.
+     *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가
+     *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),
+     *                  이 판을 열면 그중 열려 있던 것이 닫힌다.
+     *
+     * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이
+     * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에
+     * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.
+     *
+     * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.
+     */
+    openInfo(state) {
+        openPopup(html `<activity-approval-context-template .activityApproval=${this.activityApproval} state=${state}></activity-approval-context-template>`, { title: i18next.t('label.approval-info') });
+    }
     updated(changes) {
         if (changes.has('activityApproval') && this.activityApproval) {
             const { state } = this.activityApproval.activityThread;

package/dist-client/components/activity-approval-ribon.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC/D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;KACF,AApGY,CAoGZ;IAID,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,cAAc,IAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,EAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEG,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AA/C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAvGtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAuJjC","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--worklist-status-color);\n        color: var(--md-sys-color-on-primary);\n        align-items: center;\n        min-height: 44px;\n        --fontsize-small: 12px;\n      }\n\n      div {\n        border-left: var(--border-dim-color);\n        padding: var(--spacing-small) var(--spacing-medium);\n        align-self: center;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='delegated']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='submitted']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='escalated']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='rejected']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      md-icon {\n        font-size: 24px;\n      }\n\n      [desc] {\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [desc] * {\n        vertical-align: middle;\n      }\n\n      [assignee] {\n        text-align: center;\n        font-size: var(--fontsize-small);\n        line-height: 1.3;\n      }\n\n      [assignee] span {\n        display: block;\n        font-size: var(--fontsize-large);\n        font-weight: bold;\n      }\n\n      approval-line-brief {\n        background-color: var(--worklist-status-color);\n        font-size: var(--fontsize-small);\n      }\n\n      [state] {\n        text-align: right;\n        font-size: var(--fontsize-small);\n      }\n\n      @media only screen and (max-width: 460px) {\n        div {\n          border-left: none;\n        }\n\n        [assignee] {\n          display: none;\n        }\n        md-icon {\n          padding: 0;\n        }\n        approval-line-brief {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityApproval: any\n\n  render() {\n    const { activityInstance, state } = this.activityApproval?.activityThread || {}\n    const { description, assignee, approvalLine, activity } = activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <div desc>\n        <md-icon\n          @click=${() => {\n            toggleOverlay('activity-info-overlay', {\n              template: html`<activity-approval-context-template\n                .activityApproval=${this.activityApproval}\n                state=${state}\n              ></activity-approval-context-template>`\n            })\n          }}\n          >description</md-icon\n        >\n        ${description}\n      </div>\n      ${startingType == 'issue' && assignee\n        ? html`\n            <div assignee>\n              ${i18next.t('field.assignee')}\n              <span>${assignee?.name}&nbsp;</span>\n            </div>\n          `\n        : html``}\n      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${this.activityApproval.order}\n          ></approval-line-brief>`\n        : html``}\n\n      <div state>${i18next.t('label.activity-state-' + state)}</div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityApproval') && this.activityApproval) {\n      const { state } = this.activityApproval.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC/D,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,cAAc,IAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;iBACvC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;mBACxB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;;;;iCAIwB,WAAW,IAAI,EAAE,IAAI,WAAW,IAAI,EAAE;;;QAG/D,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA,6CAA6C,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,QAAQ,EAAE,IAAI,SAAS;YAC/G,CAAC,CAAC,EAAE;QACJ,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,EAAE;KACP,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,yDAAyD,IAAI,CAAC,gBAAgB,UAAU,KAAK,wCAAwC,EACzI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAC5C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AA1E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAHtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA8EjC","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-context-template.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport { StateRibonStyles } from './state-ribon.js'\n\n@customElement('activity-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n  static styles = [StateRibonStyles]\n\n  @property({ type: Object }) activityApproval: any\n\n  render() {\n    const { activityInstance, state } = this.activityApproval?.activityThread || {}\n    const { description, assignee, approvalLine, activity } = activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <span class=\"state\">\n        <i class=\"dot\"></i>\n        ${i18next.t('label.activity-state-' + state)}\n      </span>\n\n      <md-icon\n        class=\"info\"\n        role=\"button\"\n        tabindex=\"0\"\n        title=${String(i18next.t('label.approval-info'))}\n        @click=${() => this.openInfo(state)}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            this.openInfo(state)\n          }\n        }}\n        >info</md-icon\n      >\n\n      <span class=\"desc\" title=${description || ''}>${description || ''}</span>\n\n\n      ${startingType == 'issue' && assignee\n        ? html`<span class=\"who\"><span class=\"who-label\">${i18next.t('field.assignee')}</span>${assignee?.name}</span>`\n        : ''}\n      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${this.activityApproval.order}\n          ></approval-line-brief>`\n        : ''}\n    `\n  }\n\n  /**\n   * 이 건의 기본 정보 — **팝업으로 연다.**\n   *\n   * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────\n   * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.\n   *\n   *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다\n   *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.\n   *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가\n   *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),\n   *                  이 판을 열면 그중 열려 있던 것이 닫힌다.\n   *\n   * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이\n   * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에\n   * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.\n   *\n   * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.\n   */\n  private openInfo(state: string) {\n    openPopup(\n      html`<activity-approval-context-template .activityApproval=${this.activityApproval} state=${state}></activity-approval-context-template>`,\n      { title: i18next.t('label.approval-info') }\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('activityApproval') && this.activityApproval) {\n      const { state } = this.activityApproval.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}

package/dist-client/components/activity-fields.d.ts

@@ -0,0 +1,50 @@
+import '@material/web/icon/icon.js';
+/**
+ * 업무 항목을 화면에 내는 방식 — **두 화면이 한 벌을 쓴다.**
+ *
+ * 업무 상세(activity-thread-page)와 결재 상세(activity-approval-page)는 거의 복사본이다. 항목을
+ * 고르는 함수, 화면 종류에 따라 그리는 분기, 절을 그리는 부분이 두 파일에 같은 코드로 있었다.
+ * 그래서 한쪽만 고치면 나머지가 그대로 남는다 — 실제로 그랬다(2026-09-06, 상세 화면의
+ * Input · Output 영문 legend 를 고쳤는데 결재 화면에는 그대로 있었다).
+ *
+ * 화면마다 다른 것은 남긴다 — 상세는 결과를 적고, 결재는 읽기만 한다.
+ */
+/** 절과 값 표의 모양. 카드 값은 SurfaceStyles 의 .ui-card 와 같다. */
+export declare const ActivityFieldsStyles: import("lit").CSSResult;
+/** 받은 값 — 업무를 시작할 때 함께 온 것. */
+export declare function inputSpecOf(model: any[] | null | undefined): any[];
+/** 적어 낼 값 — 수행자가 채우는 것. */
+export declare function outputSpecOf(model: any[] | null | undefined): any[];
+/**
+ * 값을 **표로** 보인다. 입력칸으로 그리지 않는다.
+ *
+ * 전에는 읽기만 하는 절도 ox-properties-dynamic-view 로 그렸다. 그러면 값마다 흰 입력 상자가
+ * 생기고 사용자는 고쳐 쓸 수 있는 것으로 읽는다. 그런데 그 절에는 변경을 받는 자리가 없다 —
+ * 결재 화면은 아예 output 을 mutation 에 싣지 않는다(approveActivityApproval 은 id 와 comment 만
+ * 보낸다). 「적을 수 있게 보이는데 적히지 않는 칸」이라 가장 나쁜 쪽이다.
+ */
+export declare function renderGiven(specs: any[], values: any): import("lit-html").TemplateResult<1>;
+/**
+ * 항목 이름 — ox-property-editor 와 같은 규칙으로 찾는다(그쪽은 label. 접두사를 스스로 붙인다).
+ *
+ * 번역이 없으면 **키를 그대로 보이지 않는다.** 전에는 label.because 가 없어서 화면에
+ * Label.Because 가 나왔다. 사용자에게 뜻이 없는 글자다.
+ *
+ * description 으로 물러나지도 않는다 — 액티비티의 description 은 개발자가 영어로 적어 둔 설명이다
+ * (예: "The disposition waiting for approval"). 한국어 화면에 영어 문장이 나오는 것보다 항목
+ * 이름이 낫다.
+ */
+export declare function fieldLabel(spec: any): string;
+/**
+ * 값 한 칸.
+ *
+ * ── 오브젝트를 한 줄 JSON 으로 내지 않는다 (2026-09-07) ─────────────────────
+ * `JSON.stringify` 한 줄이었다. 트윈의 작동 명령을 열면 그 한 줄이 700자가 넘어서, 「업무 내용」이
+ * 읽을 수 없는 글자 덩어리 하나가 됐다. 값은 다 있는데 아무것도 읽히지 않는다.
+ *
+ * 화면은 이미 이름과 값을 두 칸으로 보이는 말을 갖고 있다(dl.given). 오브젝트도 그 말로 편다 —
+ * 새 표현을 만들지 않고, 안쪽이든 바깥쪽이든 같은 모양으로 읽힌다.
+ *
+ * 값이 없으면 빈 칸으로 두지 않는다 — 빈 칸은 값이 없는 것인지 화면이 못 낸 것인지 모른다.
+ */
+export declare function fieldValue(value: any, depth?: number): unknown;

package/dist-client/components/activity-fields.js

@@ -0,0 +1,393 @@
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { i18next } from '@operato/i18n';
+/**
+ * 업무 항목을 화면에 내는 방식 — **두 화면이 한 벌을 쓴다.**
+ *
+ * 업무 상세(activity-thread-page)와 결재 상세(activity-approval-page)는 거의 복사본이다. 항목을
+ * 고르는 함수, 화면 종류에 따라 그리는 분기, 절을 그리는 부분이 두 파일에 같은 코드로 있었다.
+ * 그래서 한쪽만 고치면 나머지가 그대로 남는다 — 실제로 그랬다(2026-09-06, 상세 화면의
+ * Input · Output 영문 legend 를 고쳤는데 결재 화면에는 그대로 있었다).
+ *
+ * 화면마다 다른 것은 남긴다 — 상세는 결과를 적고, 결재는 읽기만 한다.
+ */
+/** 절과 값 표의 모양. 카드 값은 SurfaceStyles 의 .ui-card 와 같다. */
+export const ActivityFieldsStyles = css `
+  section {
+    margin: var(--spacing-large, 16px) var(--spacing-large, 16px) 0;
+    padding: 14px;
+    background: var(--ui-panel, #ffffff);
+    border: 1px solid var(--ui-line, #d5dce0);
+    border-radius: var(--ui-r, 10px);
+  }
+
+  section > h2 {
+    margin: 0 0 10px;
+    font-size: var(--ui-t-title, 15px);
+    font-weight: 600;
+    color: var(--ui-ink, #17242c);
+  }
+
+  /* 읽기만 하는 절 — 값을 바꿀 수 없다는 것이 보여야 한다. */
+  section[readonly] > h2 {
+    color: var(--ui-muted, #57676f);
+  }
+
+  /* 받은 값 — 이름과 값을 두 칸으로. 이름은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 선다. */
+  dl.given {
+    display: grid;
+    grid-template-columns: minmax(80px, max-content) 1fr;
+    gap: 7px var(--spacing-large, 16px);
+    margin: 0;
+  }
+
+  dl.given dt {
+    text-align: right;
+    color: var(--ui-muted, #57676f);
+    word-break: keep-all;
+  }
+
+  dl.given dd {
+    margin: 0;
+    color: var(--ui-ink, #17242c);
+    word-break: break-word;
+  }
+
+  dl.given .none {
+    color: var(--ui-faint, #8a959c);
+  }
+
+  dl.given code {
+    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 안쪽으로 펼친 오브젝트 · 배열.
+   *
+   * 바깥과 같은 두 칸 구조를 쓰되 **한 단 들여쓰고 왼쪽에 선을 긋는다.** 선이 없으면 세 단이 겹칠 때
+   * 어느 이름이 어느 값에 딸린 것인지 눈으로 못 가른다.
+   *
+   * 안쪽 이름은 왼쪽 정렬이다. 바깥은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 서는데(dl.given dt),
+   * 안쪽까지 그러면 단이 깊어질수록 이름이 값 쪽으로 밀려 붙는다.
+   */
+  dl.given .nested {
+    margin: 2px 0 0;
+    padding-left: 10px;
+    border-left: 1px solid var(--ui-line, #d5dce0);
+  }
+
+  dl.given dl.nested {
+    display: grid;
+    grid-template-columns: minmax(60px, max-content) 1fr;
+    gap: 4px var(--spacing-medium, 8px);
+  }
+
+  dl.given dl.nested dt {
+    text-align: left;
+    color: var(--ui-faint, #8a959c);
+    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 페이로드를 그대로 가져가는 자리.
+   *
+   * 화면은 값을 읽기 좋게 펴 놓지만, 이 값을 **다른 도구에 넣어 볼 일**이 있다 — 트윈 명령 하나가
+   * 네 단짜리 오브젝트이고, 그것을 손으로 옮겨 적을 수는 없다. 화면이 편 글자가 아니라 원문 JSON 을
+   * 준다. 붙여 넣는 쪽이 기대하는 것은 원문이다.
+   *
+   * 값 위에 얹지 않고 오른쪽 위 구석에 둔다 — 값이 한 줄일 때도 두 단 깊을 때도 자리가 같다.
+   */
+  dl.given dd:has(> .payload) {
+    position: relative;
+  }
+
+  .copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 1px 5px;
+    border: 1px solid var(--ui-line, #d5dce0);
+    border-radius: 999px;
+    background: var(--ui-panel, #ffffff);
+    color: var(--ui-muted, #57676f);
+    font-size: var(--ui-t-micro, 11px);
+    line-height: 16px;
+    cursor: pointer;
+  }
+
+  .copy md-icon {
+    font-size: 13px;
+    width: 13px;
+    height: 13px;
+  }
+
+  .copy:hover {
+    color: var(--ui-ink, #17242c);
+    border-color: var(--ui-muted, #57676f);
+  }
+
+  .copy:focus-visible {
+    outline: 2px solid var(--ui-accent, #00727e);
+    outline-offset: 1px;
+  }
+
+  /* 복사한 직후 — 눌린 것이 보여야 한다. 소리도 움직임도 없는 조작이라 이 표시가 유일한 대답이다. */
+  .copy[done] {
+    border-color: var(--ui-good, #297d39);
+    color: var(--ui-good, #297d39);
+  }
+
+  /*
+   * 못 했을 때도 **같은 크기로** 말한다.
+   *
+   * 처음에는 실패를 title 로만 적었다. 그러면 누른 사람 눈에는 아무 일도 안 일어난 것과 같고,
+   * 이유를 알려면 그 자리에 마우스를 올려 두어야 한다 — 손가락으로 쓰는 화면에는 그 길이 없다.
+   * 클립보드는 브라우저가 막을 수 있는 자리라(보안 컨텍스트가 아니거나 권한이 없으면) 실제로 나는 일이다.
+   */
+  .copy[failed] {
+    border-color: var(--ui-crit, #d14946);
+    color: var(--ui-crit, #d14946);
+  }
+
+  /* 배열 — 번호로 몇 번째인지 말한다. 순서가 뜻을 갖는 값이 온다(주의 목록 · 권장 조치). */
+  dl.given ol.nested {
+    list-style: decimal;
+    padding-left: 24px;
+  }
+
+  dl.given ol.nested li {
+    margin: 2px 0;
+  }
+
+  dl.given ol.nested li::marker {
+    color: var(--ui-faint, #8a959c);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 빈 화면은 가장 중요한 자리다. 없다고만 하지 않고 왜 비어 있는지 적는다.
+   *
+   * 두 가지가 있다. 화면 전체가 비는 것(건을 못 읽었다)은 세로로 늘려 가운데에 두고, 절 자리가
+   * 비는 것(항목이 정의되지 않았다)은 **다른 절과 같은 카드**로 둔다. 절 하나가 없다고 해서
+   * 화면 높이를 다 쓰면 그 아래의 타임라인이 화면 밖으로 밀린다.
+   */
+  section[empty] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 28px 14px;
+    text-align: center;
+    color: var(--ui-muted, #57676f);
+  }
+
+  div[empty] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: var(--spacing-large, 16px);
+    text-align: center;
+    color: var(--ui-muted, #57676f);
+  }
+
+  [empty] .title {
+    font-size: var(--ui-t-title, 15px);
+    font-weight: 600;
+    color: var(--ui-ink, #17242c);
+  }
+
+  [empty] .why {
+    max-width: 40em;
+    font-size: var(--ui-t-body, 13px);
+    color: var(--ui-faint, #8a959c);
+    word-break: keep-all;
+  }
+`;
+/**
+ * 화면에 낼 항목을 고른다.
+ *
+ * hidden 을 지킨다. 전에는 이 선언을 보지 않았다 — 액티비티가 「이 항목은 보이지 않는다」고 적어
+ * 두어도 화면에 나왔다. 편집기가 없는 타입(object 등)이라 조용히 빠졌을 뿐이고, 편집기가 있는
+ * 타입이면 그대로 보였다. 값을 표로 그리기 시작하면서 실제로 드러났다 — 처분 승인 화면에
+ * disposition 객체의 JSON 원문이 나왔다.
+ */
+function specsOf(model, inouts) {
+    return (model || [])
+        .filter(item => !item.hidden)
+        .filter(item => inouts.includes(item.inout))
+        .map(item => ({
+        ...item,
+        name: item.tag,
+        label: item.tKey || item.name,
+        property: item.options
+    }));
+}
+/** 받은 값 — 업무를 시작할 때 함께 온 것. */
+export function inputSpecOf(model) {
+    return specsOf(model, ['in', 'inout']);
+}
+/** 적어 낼 값 — 수행자가 채우는 것. */
+export function outputSpecOf(model) {
+    return specsOf(model, ['out', 'inout']);
+}
+/**
+ * 값을 **표로** 보인다. 입력칸으로 그리지 않는다.
+ *
+ * 전에는 읽기만 하는 절도 ox-properties-dynamic-view 로 그렸다. 그러면 값마다 흰 입력 상자가
+ * 생기고 사용자는 고쳐 쓸 수 있는 것으로 읽는다. 그런데 그 절에는 변경을 받는 자리가 없다 —
+ * 결재 화면은 아예 output 을 mutation 에 싣지 않는다(approveActivityApproval 은 id 와 comment 만
+ * 보낸다). 「적을 수 있게 보이는데 적히지 않는 칸」이라 가장 나쁜 쪽이다.
+ */
+export function renderGiven(specs, values) {
+    return html `
+    <dl class="given">
+      ${specs.map(spec => html `
+          <dt>${fieldLabel(spec)}</dt>
+          <dd>${fieldValue(values?.[spec.name])}</dd>
+        `)}
+    </dl>
+  `;
+}
+/**
+ * 항목 이름 — ox-property-editor 와 같은 규칙으로 찾는다(그쪽은 label. 접두사를 스스로 붙인다).
+ *
+ * 번역이 없으면 **키를 그대로 보이지 않는다.** 전에는 label.because 가 없어서 화면에
+ * Label.Because 가 나왔다. 사용자에게 뜻이 없는 글자다.
+ *
+ * description 으로 물러나지도 않는다 — 액티비티의 description 은 개발자가 영어로 적어 둔 설명이다
+ * (예: "The disposition waiting for approval"). 한국어 화면에 영어 문장이 나오는 것보다 항목
+ * 이름이 낫다.
+ */
+export function fieldLabel(spec) {
+    const key = String(spec?.label ?? spec?.name ?? '');
+    const full = key.indexOf('label.') >= 0 ? key : 'label.' + key;
+    return i18next.t(full, { defaultValue: spec?.name || key });
+}
+/**
+ * 얼마나 깊이 펼치나.
+ *
+ * 이 화면들이 받는 값은 액티비티가 정하므로 얼마나 깊을지 알 수 없다. 트윈의 작동 명령은 네 단이다
+ * (twinNow → attentions[0] → params → 값). 끝없이 펼치면 어떤 페이로드에서 화면이 통째로 페이로드가
+ * 되므로, 이 깊이를 넘으면 원문을 그대로 보인다 — 접는 것이 아니라 **다른 방식으로 보이는 것**이다.
+ */
+const MAX_DEPTH = 4;
+/**
+ * 값 한 칸.
+ *
+ * ── 오브젝트를 한 줄 JSON 으로 내지 않는다 (2026-09-07) ─────────────────────
+ * `JSON.stringify` 한 줄이었다. 트윈의 작동 명령을 열면 그 한 줄이 700자가 넘어서, 「업무 내용」이
+ * 읽을 수 없는 글자 덩어리 하나가 됐다. 값은 다 있는데 아무것도 읽히지 않는다.
+ *
+ * 화면은 이미 이름과 값을 두 칸으로 보이는 말을 갖고 있다(dl.given). 오브젝트도 그 말로 편다 —
+ * 새 표현을 만들지 않고, 안쪽이든 바깥쪽이든 같은 모양으로 읽힌다.
+ *
+ * 값이 없으면 빈 칸으로 두지 않는다 — 빈 칸은 값이 없는 것인지 화면이 못 낸 것인지 모른다.
+ */
+export function fieldValue(value, depth = 0) {
+    if (value === null || value === undefined || value === '') {
+        return html `<span class="none">${i18next.t('text.no-value')}</span>`;
+    }
+    if (typeof value === 'boolean') {
+        return i18next.t(value ? 'label.yes' : 'label.no', { defaultValue: String(value) });
+    }
+    if (typeof value !== 'object') {
+        return String(value);
+    }
+    /* 너무 깊으면 펼치기를 그만두고 원문을 보인다 — 없는 척하지 않는다. */
+    if (depth >= MAX_DEPTH) {
+        return html `<code>${JSON.stringify(value)}</code>`;
+    }
+    const laid = layOut(value, depth);
+    /*
+     * 맨 바깥 값에만 복사를 붙인다.
+     *
+     * 안쪽 단마다 달면 네 단짜리 페이로드에 단추가 열 개 넘게 붙어, 정작 읽으라고 편 값이 단추에
+     * 묻힌다. 사람이 가져가려는 것은 「이 항목」이다.
+     */
+    return depth === 0 ? html `<span class="payload">${copyButton(value)}${laid}</span>` : laid;
+}
+/**
+ * 이 값을 원문 그대로 가져간다.
+ *
+ * 화면이 편 글자가 아니라 JSON 을 준다 — 붙여 넣는 쪽(질의 · 로그 검색 · 문의 글)이 기대하는 것은
+ * 원문이다. 들여쓰기를 넣어 그대로 읽을 수 있게 한다.
+ *
+ * 눌러도 화면이 안 바뀌면 눌린 줄을 모른다. 그래서 잠깐 표시를 남긴다 — 이 조작에는 그것 말고
+ * 대답이 없다.
+ */
+function copyButton(value) {
+    const onCopy = async (e) => {
+        const button = e.currentTarget;
+        const mark = (attr) => {
+            button.toggleAttribute(attr, true);
+            setTimeout(() => button.toggleAttribute(attr, false), 1500);
+        };
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+        }
+        catch {
+            /*
+             * 클립보드는 브라우저가 막을 수 있다(보안 컨텍스트가 아니거나 권한이 없으면). 안 된 것을 된
+             * 것처럼 말하지 않고, 성공과 같은 크기로 보인다 — title 만 바꾸면 누른 사람 눈에는 아무 일도
+             * 안 일어난 것과 같다.
+             */
+            button.setAttribute('title', String(i18next.t('text.copy-failed')));
+            mark('failed');
+            return;
+        }
+        mark('done');
+    };
+    return html `
+    <button class="copy" type="button" title=${String(i18next.t('text.copy-payload'))} @click=${onCopy}>
+      <md-icon>content_copy</md-icon>${i18next.t('button.copy')}
+    </button>
+  `;
+}
+/** 값을 이름·값 두 칸으로 편다. 복사 단추는 여기 끼지 않는다 — 편 결과만 만든다. */
+function layOut(value, depth) {
+    if (Array.isArray(value)) {
+        /* 빈 배열은 「값 없음」이 아니다 — 「비어 있다」는 그 자체로 사실이다. */
+        if (value.length === 0) {
+            return html `<span class="none">${i18next.t('text.empty-list')}</span>`;
+        }
+        /*
+         * 배열은 깊이를 먹지 않는다 — **같은 것이 여러 개**이지 새로운 단이 아니다.
+         *
+         * 배열도 한 단으로 세었더니 트윈 작동 명령의 마지막 줄이 잘렸다: twinNow → attentions →
+         * attentions[0] → recommendedActions → { code } 에서 recommendedActions 의 항목이 다섯 번째가
+         * 되어, 정작 가장 단순한 { code: 'advice.raise-priority' } 하나가 JSON 원문으로 남았다.
+         * 사람이 세는 단은 넷이다.
+         */
+        return html `
+      <ol class="nested">
+        ${value.map(item => html `<li>${fieldValue(item, depth)}</li>`)}
+      </ol>
+    `;
+    }
+    const keys = Object.keys(value);
+    if (keys.length === 0) {
+        return html `<span class="none">${i18next.t('text.empty-object')}</span>`;
+    }
+    /*
+     * 안쪽 이름은 번역하지 않는다. 액티비티가 정한 키라 번역이 있을 리 없고, 없는 번역을 찾으면
+     * 「Label.MaterialDefinitionId」 같은 글자가 나온다 — 사용자에게 뜻이 없는 글자다.
+     */
+    return html `
+    <dl class="given nested">
+      ${keys.map(key => html `
+          <dt>${key}</dt>
+          <dd>${fieldValue(value[key], depth + 1)}</dd>
+        `)}
+    </dl>
+  `;
+}
+//# sourceMappingURL=activity-fields.js.map