@things-factory/worklist 10.1.248 → 10.1.250

package/dist-client/components/activity-starter-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ranMutation } from './say-outcome.js'\nimport { notify } from '@operato/layout'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        padding: var(--spacing-medium);\n        gap: var(--spacing-medium);\n        overflow: auto;\n      }\n\n      content > div {\n        display: flex;\n        flex-direction: column;\n      }\n\n      content label {\n        font: var(--label-font);\n      }\n      content input,\n      content textarea {\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        padding: var(--input-padding);\n        margin: var(--input-margin);\n        font: var(--input-font);\n      }\n\n      content [desc] {\n        font-size: 0.9em;\n      }\n\n      #description {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) activityId?: string\n\n  @state() activity: any = {}\n  @state() activityInstance: any = {}\n\n  render() {\n    var { thumbnail, startingType } = this.activity || {}\n    var { name, description } = this.activityInstance\n\n    return html`\n      <content>\n        <div desc>\n          <span>${i18next.t('text.activity-draft-how')}</span>\n          <span\n            >${i18next.t('text.activity-draft-where', {\n              action: i18next.t(startingType == 'issue' ? 'button.issue' : 'button.post')\n            })}</span\n          >\n        </div>\n\n        <md-outlined-text-field\n          id=\"name\"\n          type=\"text\"\n          label=${String(i18next.t('label.title'))}\n          .value=${name || this.activity?.name || ''}\n          @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n        >\n        </md-outlined-text-field>\n\n        <md-filled-text-field\n          id=\"description\"\n          type=\"textarea\"\n          label=${String(i18next.t('label.description'))}\n          resize=\"none\"\n          .value=${description || this.activity?.description || ''}\n          @change=${e => {\n            this.activityInstance.description = e.currentTarget.value\n          }}\n        >\n        </md-filled-text-field>\n      </content>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n        <button @click=${this.draftActivityInstance.bind(this)} done>\n          <md-icon>save</md-icon>${i18next.t('button.draft')}\n        </button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchActivity(this.activityId)\n  }\n\n  async fetchActivity(id) {\n    const response = await client.query({\n      query: gql`\n        query activity($id: String!) {\n          activity(id: $id) {\n            id\n            name\n            description\n            state\n            multiple\n            startingType\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              participation\n              notifyAfter\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            thumbnail\n            model {\n              name\n              description\n              active\n              tag\n              inout\n              type\n              unit\n              options\n              quantifier\n              spec\n            }\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activity = response.data.activity\n  }\n\n  async draftActivityInstance() {\n    var { id: activityId } = this.activity\n    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n      this.activityInstance\n\n    name ||= this.activity.name\n    description ||= this.activity.description\n    assignees ||= this.activity.assignees\n    approvalLine ||= this.activity.approvalLine\n\n    var activityInstance = {\n      id,\n      activityId,\n      name,\n      description,\n      priority,\n      threadsMax,\n      threadsMin,\n      dueAt,\n      input,\n      assignees,\n      approvalLine\n    }\n\n    const outcome = await ranMutation(() => client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: ActivityInstanceDraft!) {\n          draftActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            output\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              participation\n              notifyAfter\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    }))\n\n    if (!outcome.ok) {       return\n }\n\n    this.activityInstance = outcome.data.draftActivityInstance\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n        })\n      })\n\n      this.openActivityInstanceStart(this.activityInstance)\n  }\n\n  openActivityInstanceStart(activityInstance) {\n    navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`, false, this)\n  }\n}\n"]}

package/dist-client/components/activity-thread-ribon.d.ts

@@ -0,0 +1,38 @@
+import '@material/web/button/elevated-button.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@things-factory/organization/dist-client/component/approval-line-brief.js';
+import '../templates/activity-thread-context-template.js';
+import { LitElement } from 'lit';
+declare const ActivityThreadRibon_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**
+ *
+ * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).
+ * 여기서는 이 화면이 무엇을 보일지만 고른다.
+ */
+export declare class ActivityThreadRibon extends ActivityThreadRibon_base {
+    static styles: import("lit").CSSResult[][];
+    activityThread: any;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 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 를 쓸 일이 없었다.
+     */
+    private openInfo;
+    updated(changes: any): void;
+}
+export {};

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

@@ -0,0 +1,95 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@things-factory/organization/dist-client/component/approval-line-brief.js';
+import '../templates/activity-thread-context-template.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { entity360Name, openPopup } from '@operato/layout';
+import { currentApprovalOrder } from '../approval-progress.js';
+import { StateRibonStyles } from './state-ribon.js';
+/**
+ * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**
+ *
+ * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).
+ * 여기서는 이 화면이 무엇을 보일지만 고른다.
+ */
+let ActivityThreadRibon = class ActivityThreadRibon extends localize(i18next)(LitElement) {
+    static { this.styles = [StateRibonStyles]; }
+    render() {
+        const { state, assignee, activityInstance, activityApprovals } = this.activityThread;
+        const { description, approvalLine } = activityInstance || {};
+        return html `
+      <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.thread-info'))}
+        @click=${() => this.openInfo(state)}
+        @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.openInfo(state);
+            }
+        }}
+        >info</md-icon
+      >
+
+      <span class="desc" title=${description || ''}>${description || ''}</span>
+
+
+      ${approvalLine
+            ? html `<approval-line-brief
+            .model=${approvalLine}
+            .current=${currentApprovalOrder(activityApprovals)}
+          ></approval-line-brief>`
+            : assignee
+                ? html `<span class="who"
+              ><span class="who-label">${i18next.t('field.assignee')}</span>${entity360Name(assignee)}</span
+            >`
+                : ''}
+    `;
+    }
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 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-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`, { title: i18next.t('label.thread-info') });
+    }
+    updated(changes) {
+        if (changes.has('activityThread') && this.activityThread) {
+            const { state } = this.activityThread;
+            this.setAttribute('state', state);
+        }
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityThreadRibon.prototype, "activityThread", void 0);
+ActivityThreadRibon = __decorate([
+    customElement('activity-thread-ribon')
+], ActivityThreadRibon);
+export { ActivityThreadRibon };
+//# sourceMappingURL=activity-thread-ribon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACpF,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;iBACrC,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;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,oBAAoB,CAAC,iBAAiB,CAAC;kCAC5B;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;yCACyB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,aAAa,CAAC,QAAQ,CAAC;cACvF;gBACJ,CAAC,CAAC,EAAE;KACT,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,qDAAqD,IAAI,CAAC,cAAc,UAAU,KAAK,sCAAsC,EACjI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAC1C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AA1E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AAHpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA8E/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { entity360Name, openPopup } from '@operato/layout'\n\nimport { currentApprovalOrder } from '../approval-progress.js'\nimport { StateRibonStyles } from './state-ribon.js'\n\n/**\n * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**\n *\n * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).\n * 여기서는 이 화면이 무엇을 보일지만 고른다.\n */\n@customElement('activity-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n  static styles = [StateRibonStyles]\n\n  @property({ type: Object }) activityThread: any\n\n  render() {\n    const { state, assignee, activityInstance, activityApprovals } = this.activityThread\n    const { description, approvalLine } = activityInstance || {}\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.thread-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      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${currentApprovalOrder(activityApprovals)}\n          ></approval-line-brief>`\n        : assignee\n          ? html`<span class=\"who\"\n              ><span class=\"who-label\">${i18next.t('field.assignee')}</span>${entity360Name(assignee)}</span\n            >`\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-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`,\n      { title: i18next.t('label.thread-info') }\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('activityThread') && this.activityThread) {\n      const { state } = this.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}

package/dist-client/components/activity-thread-timeline.d.ts

@@ -0,0 +1,28 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import { LitElement, nothing } from 'lit';
+import { ActivityThread } from '../types/activity-thread.js';
+import { ActivityThreadHistory } from '../types/activity-thread-history.js';
+import { ActivityApproval } from '../types/activity-approval.js';
+export declare class ActivityThreadTimeline extends LitElement {
+    static styles: import("lit").CSSResult[];
+    activityThread?: ActivityThread;
+    subtitle?: string;
+    shortForm?: boolean;
+    /**
+     * 펴 둘 것인가 — **담는 화면이 정한다.**
+     *
+     * 기본은 접는다. 펴는 곳은 둘이다.
+     *   완료 조회      지난 일을 보러 온 화면이라 이력이 곧 본문이다
+     *   보일 항목 없음  화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다
+     */
+    open?: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */
+    lastLine(item: any): string;
+    renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory): import("lit-html").TemplateResult<1>;
+    renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
+    /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */
+    renderSaid(said?: string): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderOutput(output: any): string;
+}

package/dist-client/components/activity-thread-timeline.js

@@ -0,0 +1,339 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { whenText } from '../when.js';
+import { timelineEntries, whenOf } from './timeline-entries.js';
+import { ActivityThread } from '../types/activity-thread.js';
+import { entity360Name } from '@operato/layout';
+let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
+    static { this.styles = [
+        css `
+      /*
+       * 업무 하나가 지나온 자취 — **언제 · 무슨 일이 · 누구에 의해.**
+       *
+       * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────
+       * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라
+       *    누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.
+       * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운
+       *    화면에서 밝은 회색이 그대로 나온다.
+       * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.
+       *
+       * ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────
+       * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·
+       * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.
+       */
+      /*
+       * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」
+       * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.
+       */
+      :host {
+        display: block;
+        padding: 14px;
+        background: var(--ui-panel, #ffffff);
+        border: 1px solid var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r, 10px);
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
+      }
+
+      /* 그릴 것이 없으면 빈 카드를 남기지 않는다. */
+      :host(:not(:has(ol))) {
+        display: none;
+      }
+
+      /*
+       * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────
+       * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이
+       * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.
+       *
+       * 접어 두되 **마지막에 무슨 일이 있었는지 한 줄은 남긴다.** 「이력 4건」만 있으면 펴 볼지
+       * 말지를 정할 수가 없다.
+       *
+       * 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도
+       * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그
+       * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).
+       */
+      h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 15px);
+        font-weight: 600;
+        color: var(--ui-ink, #17242c);
+      }
+
+      summary {
+        display: flex;
+        align-items: baseline;
+        gap: var(--spacing-medium, 8px);
+        cursor: pointer;
+        list-style: none;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      /* 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. */
+      .chevron {
+        flex: none;
+        font-size: 18px;
+        color: var(--ui-muted, #57676f);
+        transition: transform 0.12s ease;
+      }
+
+      details[open] .chevron {
+        transform: rotate(90deg);
+      }
+
+      /* 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. */
+      .last {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-faint, #8a959c);
+      }
+
+      details[open] .last {
+        display: none;
+      }
+
+      .count {
+        flex: none;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+        font-variant-numeric: tabular-nums;
+      }
+
+      ol {
+        list-style: none;
+        margin: var(--spacing-medium, 8px) 0 0;
+        padding: 0;
+      }
+
+      li {
+        display: grid;
+        grid-template-columns: max-content 16px 1fr;
+        align-items: start;
+        column-gap: var(--spacing-small, 4px);
+      }
+
+      /* 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. */
+      [date] {
+        padding-top: 1px;
+        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+        font-size: var(--ui-t-small, 11.5px);
+        font-variant-numeric: tabular-nums;
+        color: var(--ui-faint, #8a959c);
+        white-space: nowrap;
+      }
+
+      /*
+       * 점과 그 아래로 이어지는 세로선.
+       *
+       * 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라
+       * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음
+       * 줄을 지나 카드 아래까지 흘러내렸다.
+       */
+      [status] {
+        position: relative;
+        align-self: stretch;
+        width: 9px;
+        margin-left: 3px;
+      }
+
+      [status]::after {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 0;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        background-color: var(--ui-accent, #00727e);
+      }
+
+      [status]::before {
+        content: '';
+        position: absolute;
+        top: 15px;
+        bottom: 0;
+        left: 3px;
+        width: 2px;
+        background-color: var(--ui-line, #d5dce0);
+      }
+
+      li:last-child [status]::before {
+        display: none;
+      }
+
+      [info] {
+        min-width: 0;
+        padding-bottom: var(--spacing-large, 16px);
+      }
+
+      li:last-child [info] {
+        padding-bottom: 0;
+      }
+
+      /* 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. */
+      [what] {
+        font-weight: 600;
+      }
+
+      /* 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). */
+      [who] {
+        margin-left: var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-faint, #8a959c);
+      }
+
+      /* 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. */
+      p {
+        /* 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. */
+        display: block;
+        width: fit-content;
+        max-width: 100%;
+        margin: 5px 0 0;
+        padding: 7px 10px;
+        background: var(--ui-panel-2, #eef1f3);
+        border-radius: var(--ui-r-small, 6px);
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-small, 11.5px);
+        line-height: 1.5;
+        word-break: keep-all;
+      }
+
+      @media only screen and (max-width: 460px) {
+        li {
+          grid-template-columns: 16px 1fr;
+        }
+
+        /* 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. */
+        [date] {
+          grid-column: 2;
+          grid-row: 2;
+          padding: 0 0 var(--spacing-medium, 8px);
+        }
+      }
+    `
+    ]; }
+    render() {
+        const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {};
+        /*
+         * **정렬 키와 표시 키가 같아야 한다.**
+         *
+         * 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서
+         * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.
+         * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.
+         */
+        /* 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). */
+        const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm });
+        if (!timeline.length) {
+            return nothing;
+        }
+        return html `
+      <details ?open=${this.open}>
+        <summary>
+          <md-icon class="chevron">chevron_right</md-icon>
+          <h2>${this.subtitle || i18next.t('label.timeline')}</h2>
+          <span class="count">${i18next.t('text.timeline-count', { count: timeline.length })}</span>
+          <span class="last">${this.lastLine(timeline[timeline.length - 1])}</span>
+        </summary>
+
+        <ol>
+          ${timeline.map(item => 'reason' in item
+            ? this.renderActivityThreadHistory(item)
+            : this.renderActivityApproval(item))}
+        </ol>
+      </details>
+    `;
+    }
+    /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */
+    lastLine(item) {
+        const what = 'reason' in item
+            ? i18next.t('label.activity-transaction-' + item.transaction)
+            : i18next.t('label.activity-state-' + item.judgment);
+        const who = item?.updater?.name || item?.approver?.name || '';
+        return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ');
+    }
+    renderActivityThreadHistory(activityThreadHistory) {
+        const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory;
+        return html `
+      <li>
+        <span date>${whenText(updatedAt)}</span>
+        <span status></span>
+
+        <span info>
+          <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>
+          ${updater?.name ? html `<span who>${entity360Name(updater)}</span>` : nothing}
+          ${this.renderSaid(reason || (output ? this.renderOutput(output) : ''))}
+        </span>
+      </li>
+    `;
+    }
+    renderActivityApproval(activityApproval) {
+        const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval;
+        return html `
+      <li>
+        <span date>${whenText(terminatedAt ?? createdAt)}</span>
+        <span status></span>
+        <span info>
+          <span what>${i18next.t('label.activity-state-' + judgment)}</span>
+          ${approver?.name ? html `<span who>${entity360Name(approver)}</span>` : nothing}
+          ${this.renderSaid(comment)}
+        </span>
+      </li>
+    `;
+    }
+    /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */
+    renderSaid(said) {
+        return said ? html `<p>${said}</p>` : nothing;
+    }
+    renderOutput(output) {
+        const keys = Object.keys(output);
+        if (keys.length === 0) {
+            return '';
+        }
+        const firstKey = keys[0];
+        let value = output[firstKey];
+        // 값이 객체이거나 긴 문자열인 경우 처리
+        if (typeof value === 'object') {
+            value = Array.isArray(value) ? '[...]' : '{...}';
+        }
+        else if (typeof value === 'string' && value.length > 50) {
+            value = value.substring(0, 47) + '...';
+        }
+        let result = `${firstKey}: ${value}`;
+        // 추가 속성이 있는 경우 표시
+        if (keys.length > 1) {
+            result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 });
+        }
+        return result;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", ActivityThread)
+], ActivityThreadTimeline.prototype, "activityThread", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ActivityThreadTimeline.prototype, "subtitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'short-form' }),
+    __metadata("design:type", Boolean)
+], ActivityThreadTimeline.prototype, "shortForm", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ActivityThreadTimeline.prototype, "open", void 0);
+ActivityThreadTimeline = __decorate([
+    customElement('activity-thread-timeline')
+], ActivityThreadTimeline);
+export { ActivityThreadTimeline };
+//# sourceMappingURL=activity-thread-timeline.js.map

package/dist-client/components/activity-thread-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\nimport { timelineEntries, whenOf } from './timeline-entries.js'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\n\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n  static styles = [\n    css`\n      /*\n       * 업무 하나가 지나온 자취 — **언제 · 무슨 일이 · 누구에 의해.**\n       *\n       * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────\n       * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라\n       *    누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.\n       * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운\n       *    화면에서 밝은 회색이 그대로 나온다.\n       * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.\n       *\n       * ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────\n       * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·\n       * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.\n       */\n      /*\n       * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」\n       * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.\n       */\n      :host {\n        display: block;\n        padding: 14px;\n        background: var(--ui-panel, #ffffff);\n        border: 1px solid var(--ui-line, #d5dce0);\n        border-radius: var(--ui-r, 10px);\n        color: var(--ui-ink, #17242c);\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      /* 그릴 것이 없으면 빈 카드를 남기지 않는다. */\n      :host(:not(:has(ol))) {\n        display: none;\n      }\n\n      /*\n       * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────\n       * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이\n       * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.\n       *\n       * 접어 두되 **마지막에 무슨 일이 있었는지 한 줄은 남긴다.** 「이력 4건」만 있으면 펴 볼지\n       * 말지를 정할 수가 없다.\n       *\n       * 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도\n       * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그\n       * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).\n       */\n      h2 {\n        margin: 0;\n        font-size: var(--ui-t-title, 15px);\n        font-weight: 600;\n        color: var(--ui-ink, #17242c);\n      }\n\n      summary {\n        display: flex;\n        align-items: baseline;\n        gap: var(--spacing-medium, 8px);\n        cursor: pointer;\n        list-style: none;\n      }\n\n      summary::-webkit-details-marker {\n        display: none;\n      }\n\n      /* 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. */\n      .chevron {\n        flex: none;\n        font-size: 18px;\n        color: var(--ui-muted, #57676f);\n        transition: transform 0.12s ease;\n      }\n\n      details[open] .chevron {\n        transform: rotate(90deg);\n      }\n\n      /* 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. */\n      .last {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      details[open] .last {\n        display: none;\n      }\n\n      .count {\n        flex: none;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-muted, #57676f);\n        font-variant-numeric: tabular-nums;\n      }\n\n      ol {\n        list-style: none;\n        margin: var(--spacing-medium, 8px) 0 0;\n        padding: 0;\n      }\n\n      li {\n        display: grid;\n        grid-template-columns: max-content 16px 1fr;\n        align-items: start;\n        column-gap: var(--spacing-small, 4px);\n      }\n\n      /* 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. */\n      [date] {\n        padding-top: 1px;\n        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n        font-size: var(--ui-t-small, 11.5px);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-faint, #8a959c);\n        white-space: nowrap;\n      }\n\n      /*\n       * 점과 그 아래로 이어지는 세로선.\n       *\n       * 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라\n       * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음\n       * 줄을 지나 카드 아래까지 흘러내렸다.\n       */\n      [status] {\n        position: relative;\n        align-self: stretch;\n        width: 9px;\n        margin-left: 3px;\n      }\n\n      [status]::after {\n        content: '';\n        position: absolute;\n        top: 4px;\n        left: 0;\n        width: 9px;\n        height: 9px;\n        border-radius: 50%;\n        background-color: var(--ui-accent, #00727e);\n      }\n\n      [status]::before {\n        content: '';\n        position: absolute;\n        top: 15px;\n        bottom: 0;\n        left: 3px;\n        width: 2px;\n        background-color: var(--ui-line, #d5dce0);\n      }\n\n      li:last-child [status]::before {\n        display: none;\n      }\n\n      [info] {\n        min-width: 0;\n        padding-bottom: var(--spacing-large, 16px);\n      }\n\n      li:last-child [info] {\n        padding-bottom: 0;\n      }\n\n      /* 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. */\n      [what] {\n        font-weight: 600;\n      }\n\n      /* 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). */\n      [who] {\n        margin-left: var(--spacing-small, 4px);\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      /* 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. */\n      p {\n        /* 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. */\n        display: block;\n        width: fit-content;\n        max-width: 100%;\n        margin: 5px 0 0;\n        padding: 7px 10px;\n        background: var(--ui-panel-2, #eef1f3);\n        border-radius: var(--ui-r-small, 6px);\n        color: var(--ui-ink, #17242c);\n        font-size: var(--ui-t-small, 11.5px);\n        line-height: 1.5;\n        word-break: keep-all;\n      }\n\n      @media only screen and (max-width: 460px) {\n        li {\n          grid-template-columns: 16px 1fr;\n        }\n\n        /* 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. */\n        [date] {\n          grid-column: 2;\n          grid-row: 2;\n          padding: 0 0 var(--spacing-medium, 8px);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityThread?: ActivityThread\n  @property({ type: String }) subtitle?: string\n  @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n  /**\n   * 펴 둘 것인가 — **담는 화면이 정한다.**\n   *\n   * 기본은 접는다. 펴는 곳은 둘이다.\n   *   완료 조회      지난 일을 보러 온 화면이라 이력이 곧 본문이다\n   *   보일 항목 없음  화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다\n   */\n  @property({ type: Boolean }) open?: boolean\n\n  render() {\n    const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}\n\n    /*\n     * **정렬 키와 표시 키가 같아야 한다.**\n     *\n     * 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서\n     * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.\n     * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.\n     */\n    /* 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). */\n    const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm })\n\n    if (!timeline.length) {\n      return nothing\n    }\n\n    return html`\n      <details ?open=${this.open}>\n        <summary>\n          <md-icon class=\"chevron\">chevron_right</md-icon>\n          <h2>${this.subtitle || i18next.t('label.timeline')}</h2>\n          <span class=\"count\">${i18next.t('text.timeline-count', { count: timeline.length })}</span>\n          <span class=\"last\">${this.lastLine(timeline[timeline.length - 1])}</span>\n        </summary>\n\n        <ol>\n          ${timeline.map(item =>\n            'reason' in item\n              ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n              : this.renderActivityApproval(item as ActivityApproval)\n          )}\n        </ol>\n      </details>\n    `\n  }\n\n  /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */\n  lastLine(item: any): string {\n    const what =\n      'reason' in item\n        ? i18next.t('label.activity-transaction-' + item.transaction)\n        : i18next.t('label.activity-state-' + item.judgment)\n\n    const who = item?.updater?.name || item?.approver?.name || ''\n\n    return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ')\n  }\n\n  renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n    const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n\n    return html`\n      <li>\n        <span date>${whenText(updatedAt)}</span>\n        <span status></span>\n\n        <span info>\n          <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>\n          ${updater?.name ? html`<span who>${entity360Name(updater)}</span>` : nothing}\n          ${this.renderSaid(reason || (output ? this.renderOutput(output) : ''))}\n        </span>\n      </li>\n    `\n  }\n\n  renderActivityApproval(activityApproval: ActivityApproval) {\n    const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n\n    return html`\n      <li>\n        <span date>${whenText(terminatedAt ?? createdAt)}</span>\n        <span status></span>\n        <span info>\n          <span what>${i18next.t('label.activity-state-' + judgment)}</span>\n          ${approver?.name ? html`<span who>${entity360Name(approver)}</span>` : nothing}\n          ${this.renderSaid(comment)}\n        </span>\n      </li>\n    `\n  }\n\n  /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */\n  renderSaid(said?: string) {\n    return said ? html`<p>${said}</p>` : nothing\n  }\n\n  renderOutput(output: any) {\n    const keys = Object.keys(output)\n    if (keys.length === 0) {\n      return ''\n    }\n\n    const firstKey = keys[0]\n    let value = output[firstKey]\n\n    // 값이 객체이거나 긴 문자열인 경우 처리\n    if (typeof value === 'object') {\n      value = Array.isArray(value) ? '[...]' : '{...}'\n    } else if (typeof value === 'string' && value.length > 50) {\n      value = value.substring(0, 47) + '...'\n    }\n\n    let result = `${firstKey}: ${value}`\n\n    // 추가 속성이 있는 경우 표시\n    if (keys.length > 1) {\n      result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 })\n    }\n\n    return result\n  }\n}\n"]}

package/dist-client/components/can-pick.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Whether the preview offers "pick" - the same condition the server's pick applies.
+ *
+ * The server (controllers/activity-instance/pick.ts) picks when the caller is entitled and the
+ * instance is issued or unassigned. The screen used to compare the instance's thread count with
+ * threadsMax instead: a limit the server never applies, read from the thread list that asks a
+ * management privilege a picker does not hold - and with threadsMax at its default 0, never true.
+ *
+ * Entitlement is not repeated here: the pickable list already lists only what the caller may pick,
+ * and a refusal from the server says why.
+ */
+export declare const PICKABLE_STATES: readonly ["issued", "unassigned"];
+export declare function canPick(instance: {
+    state?: string;
+} | null | undefined, picked: boolean): boolean;

package/dist-client/components/can-pick.js

@@ -0,0 +1,16 @@
+/**
+ * Whether the preview offers "pick" - the same condition the server's pick applies.
+ *
+ * The server (controllers/activity-instance/pick.ts) picks when the caller is entitled and the
+ * instance is issued or unassigned. The screen used to compare the instance's thread count with
+ * threadsMax instead: a limit the server never applies, read from the thread list that asks a
+ * management privilege a picker does not hold - and with threadsMax at its default 0, never true.
+ *
+ * Entitlement is not repeated here: the pickable list already lists only what the caller may pick,
+ * and a refusal from the server says why.
+ */
+export const PICKABLE_STATES = ['issued', 'unassigned'];
+export function canPick(instance, picked) {
+    return !picked && PICKABLE_STATES.includes(String(instance?.state ?? ''));
+}
+//# sourceMappingURL=can-pick.js.map

package/dist-client/components/can-pick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-pick.js","sourceRoot":"","sources":["../../client/components/can-pick.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAU,CAAA;AAEhE,MAAM,UAAU,OAAO,CAAC,QAA+C,EAAE,MAAe;IACtF,OAAO,CAAC,MAAM,IAAK,eAAqC,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,CAAA;AAClG,CAAC","sourcesContent":["/**\n * Whether the preview offers \"pick\" - the same condition the server's pick applies.\n *\n * The server (controllers/activity-instance/pick.ts) picks when the caller is entitled and the\n * instance is issued or unassigned. The screen used to compare the instance's thread count with\n * threadsMax instead: a limit the server never applies, read from the thread list that asks a\n * management privilege a picker does not hold - and with threadsMax at its default 0, never true.\n *\n * Entitlement is not repeated here: the pickable list already lists only what the caller may pick,\n * and a refusal from the server says why.\n */\nexport const PICKABLE_STATES = ['issued', 'unassigned'] as const\n\nexport function canPick(instance: { state?: string } | null | undefined, picked: boolean): boolean {\n  return !picked && (PICKABLE_STATES as readonly string[]).includes(String(instance?.state ?? ''))\n}\n"]}