@things-factory/worklist 10.0.18 → 10.1.0

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

@@ -4,159 +4,281 @@ 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 { ActivityThread } from '../types/activity-thread.js';
-function getSafeFormatter(locale, options) {
-    try {
-        const safeLocale = locale || 'en-US';
-        return new Intl.DateTimeFormat(safeLocale, options);
-    }
-    catch (e) {
-        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
-        return new Intl.DateTimeFormat('en-US', options);
-    }
+/** 그 줄이 화면에 내보이는 시각. 정렬도 이 값으로 한다. */
+function whenOf(item) {
+    const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt;
+    const ms = at === null || at === undefined || at === '' ? NaN : Date.parse(String(at));
+    return Number.isFinite(ms) ? ms : 0;
 }
-const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 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);
       }
 
-      [subtitle] {
-        padding: var(--spacing-small) var(--spacing-medium);
-        background-color: var(--md-sys-color-surface-variant);
-        border: 2px solid var(--md-sys-color-outline);
-        border-radius: 15px;
-        color: var(--md-sys-color-on-surface);
-        font-weight: bold;
+      /* 그릴 것이 없으면 빈 카드를 남기지 않는다. */
+      :host(:not(:has(ol))) {
+        display: none;
       }
 
-      ol {
-        list-style: none;
-        margin: var(--spacing-medium) 0 0 var(--spacing-small);
-        padding: 0;
+      /*
+       * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────
+       * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이
+       * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.
+       *
+       * 접어 두되 **마지막에 무슨 일이 있었는지 한 줄은 남긴다.** 「이력 4건」만 있으면 펴 볼지
+       * 말지를 정할 수가 없다.
+       *
+       * 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도
+       * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그
+       * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).
+       */
+      h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 15px);
+        font-weight: 600;
+        color: var(--ui-ink, #17242c);
       }
 
-      li {
+      summary {
         display: flex;
-        border: none;
+        align-items: baseline;
+        gap: var(--spacing-medium, 8px);
+        cursor: pointer;
+        list-style: none;
       }
 
-      [info] {
-        flex: 1;
-        color: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface);
+      summary::-webkit-details-marker {
+        display: none;
+      }
 
-        div {
-          float: right;
-          opacity: 0.7;
-        }
+      /* 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. */
+      .chevron {
+        flex: none;
+        font-size: 18px;
+        color: var(--ui-muted, #57676f);
+        transition: transform 0.12s ease;
+      }
 
-        md-icon {
-          position: relative;
-          top: 3px;
-          font-size: var(--fontsize-large);
-        }
+      details[open] .chevron {
+        transform: rotate(90deg);
+      }
 
-        p {
-          color: var(--md-sys-color-on-surface);
-          background: var(--md-sys-color-surface-variant);
+      /* 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. */
+      .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);
+      }
 
-          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
-          padding: var(--spacing-small) var(--spacing-medium);
-          font-size: var(--fontsize-small);
-          text-align: justify;
-          min-height: 20px;
-        }
+      details[open] .last {
+        display: none;
+      }
 
-        p::before {
-          content: '';
-          float: right;
-          margin-top: -10px;
-          margin-right: 20px;
-          border: 7px solid transparent;
-          border-bottom-color: #f4f4f4;
-          border-top: 0;
-        }
+      .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] {
-        opacity: 0.7;
-        flex: initial;
-        width: 200px;
-        max-width: 30%;
-        font-size: var(--fontsize-small);
+        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] {
-        margin: 0 var(--spacing-small);
-        display: block;
-        border-radius: 50%;
-        flex: initial;
-        width: 12px;
-        height: 12px;
         position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-        color: var(--primary-text-color);
+        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: '';
-        height: 60px;
+        position: absolute;
+        top: 15px;
+        bottom: 0;
+        left: 3px;
         width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
+        background-color: var(--ui-line, #d5dce0);
       }
 
-      table,
-      th,
-      td {
-        border: 1px solid lightgray;
-        border-collapse: collapse;
+      li:last-child [status]::before {
+        display: none;
       }
 
-      th,
-      td {
-        padding: 10px;
+      [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 상신.
+         * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.
+         */
         const timeline = [
             ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
             ...activityApprovals.filter(item => item.judgment)
-        ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1));
-        return html ` ${timeline.length > 0
-            ? html `
-          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>
-
-          <ol>
-            ${timeline.map(item => 'reason' in item
-                ? this.renderActivityThreadHistory(item)
-                : this.renderActivityApproval(item))}
-          </ol>
-        `
-            : nothing}`;
+        ].sort((a, b) => (whenOf(a) > whenOf(b) ? 1 : -1));
+        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;
         const { name } = updater || {};
         return html `
       <li>
-        <span date>${formatter.format(new Date(updatedAt))}</span>
+        <span date>${whenText(updatedAt)}</span>
         <span status></span>
 
         <span info>
-          ${i18next.t('label.activity-transaction-' + transaction)}
-          <div><md-icon>account_circle</md-icon>${name}</div>
-          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
+          <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>
+          ${name ? html `<span who>${name}</span>` : nothing}
+          ${this.renderSaid(reason || (output ? this.renderOutput(output) : ''))}
         </span>
       </li>
     `;
@@ -166,16 +288,20 @@ let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
         const { name } = approver || {};
         return html `
       <li>
-        <span date>${formatter.format(new Date(terminatedAt || createdAt))}</span>
+        <span date>${whenText(terminatedAt ?? createdAt)}</span>
         <span status></span>
         <span info>
-          ${i18next.t('label.activity-state-' + judgment)}
-          <div><md-icon>account_circle</md-icon>${name}</div>
-          <p>${comment}</p>
+          <span what>${i18next.t('label.activity-state-' + judgment)}</span>
+          ${name ? html `<span who>${name}</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) {
@@ -193,7 +319,7 @@ let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
         let result = `${firstKey}: ${value}`;
         // 추가 속성이 있는 경우 표시
         if (keys.length > 1) {
-            result += ` (외 ${keys.length - 1}개 항목)`;
+            result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 });
         }
         return result;
     }
@@ -210,6 +336,10 @@ __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);

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

@@ -1 +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 { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      [subtitle] {\n        padding: var(--spacing-small) var(--spacing-medium);\n        background-color: var(--md-sys-color-surface-variant);\n        border: 2px solid var(--md-sys-color-outline);\n        border-radius: 15px;\n        color: var(--md-sys-color-on-surface);\n        font-weight: bold;\n      }\n\n      ol {\n        list-style: none;\n        margin: var(--spacing-medium) 0 0 var(--spacing-small);\n        padding: 0;\n      }\n\n      li {\n        display: flex;\n        border: none;\n      }\n\n      [info] {\n        flex: 1;\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface);\n\n        div {\n          float: right;\n          opacity: 0.7;\n        }\n\n        md-icon {\n          position: relative;\n          top: 3px;\n          font-size: var(--fontsize-large);\n        }\n\n        p {\n          color: var(--md-sys-color-on-surface);\n          background: var(--md-sys-color-surface-variant);\n\n          margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n          padding: var(--spacing-small) var(--spacing-medium);\n          font-size: var(--fontsize-small);\n          text-align: justify;\n          min-height: 20px;\n        }\n\n        p::before {\n          content: '';\n          float: right;\n          margin-top: -10px;\n          margin-right: 20px;\n          border: 7px solid transparent;\n          border-bottom-color: #f4f4f4;\n          border-top: 0;\n        }\n      }\n\n      [date] {\n        opacity: 0.7;\n        flex: initial;\n        width: 200px;\n        max-width: 30%;\n        font-size: var(--fontsize-small);\n      }\n\n      [status] {\n        margin: 0 var(--spacing-small);\n        display: block;\n        border-radius: 50%;\n        flex: initial;\n        width: 12px;\n        height: 12px;\n        position: relative;\n        top: 3px;\n        border: 2px solid #fff;\n        background-color: var(--worklist-status-color, tomato);\n        color: var(--primary-text-color);\n      }\n\n      [status]::before {\n        content: '';\n        height: 60px;\n        width: 2px;\n        display: block;\n        position: relative;\n        margin-left: 5px;\n        background-color: var(--worklist-status-color, tomato);\n        opacity: 0.2;\n      }\n\n      table,\n      th,\n      td {\n        border: 1px solid lightgray;\n        border-collapse: collapse;\n      }\n\n      th,\n      td {\n        padding: 10px;\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  render() {\n    const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}\n\n    const timeline = [\n      ...activityThreadHistories.filter(\n        item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))\n      ),\n      ...activityApprovals.filter(item => item.judgment)\n    ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1))\n\n    return html` ${timeline.length > 0\n      ? html`\n          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>\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        `\n      : nothing}`\n  }\n\n  renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n    const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n    const { name } = updater || {}\n\n    return html`\n      <li>\n        <span date>${formatter.format(new Date(updatedAt!))}</span>\n        <span status></span>\n\n        <span info>\n          ${i18next.t('label.activity-transaction-' + transaction)}\n          <div><md-icon>account_circle</md-icon>${name}</div>\n          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>\n        </span>\n      </li>\n    `\n  }\n\n  renderActivityApproval(activityApproval: ActivityApproval) {\n    const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n    const { name } = approver || {}\n\n    return html`\n      <li>\n        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>\n        <span status></span>\n        <span info>\n          ${i18next.t('label.activity-state-' + judgment)}\n          <div><md-icon>account_circle</md-icon>${name}</div>\n          <p>${comment}</p>\n        </span>\n      </li>\n    `\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 += ` (외 ${keys.length - 1}개 항목)`\n    }\n\n    return result\n  }\n}\n"]}
+{"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'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\n\n\n/** 그 줄이 화면에 내보이는 시각. 정렬도 이 값으로 한다. */\nfunction whenOf(item: any): number {\n  const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt\n\n  const ms = at === null || at === undefined || at === '' ? NaN : Date.parse(String(at))\n\n  return Number.isFinite(ms) ? ms : 0\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    const timeline = [\n      ...activityThreadHistories.filter(\n        item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))\n      ),\n      ...activityApprovals.filter(item => item.judgment)\n    ].sort((a, b) => (whenOf(a) > whenOf(b) ? 1 : -1))\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    const { name } = updater || {}\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          ${name ? html`<span who>${name}</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    const { name } = approver || {}\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          ${name ? html`<span who>${name}</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/state-ribon.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 업무 · 결재 화면의 머리 띠 — **세 화면이 한 모양을 쓴다.**
+ *
+ * activity-thread-ribon · activity-approval-ribon · activity-instance-ribon 이 같은 자리에 같은
+ * 것을 보인다(상태 · 설명 · 결재선 또는 담당자). 그런데 셋이 각자 100여 줄의 CSS 를 갖고 있었고,
+ * 상태색 여덟 개가 세 벌로 복사되어 있었다.
+ *
+ * ── 채운 띠를 걷은 이유 — 글자가 안 읽혔다 ─────────────────────────────────
+ * 전에는 상태마다 다른 색으로 띠 전체를 채우고 그 위에 흰 글자를 얹었다. 색은 하드코딩된 hex 여덟
+ * 개였고, --md-sys-color-on-primary(대개 흰색)를 글자색으로 썼다. contrast 를 계산하면 12px 글자
+ * 기준 AA(4.5:1)에 네 개가 못 미친다.
+ *
+ *     started    #56af45  2.76   ← 작업자가 가장 오래 보는 상태
+ *     ended      #02acae  2.79
+ *     rejected   #f27429  2.87
+ *     submitted  #428df3  3.31
+ *     unassigned #5f7184  5.02   (통과)
+ *     escalated  #595de5  5.09   (통과)
+ *     aborted    #cb3a33  5.01   (통과)
+ *     delegated  #8654b0  5.37   (통과)
+ *
+ * 색을 여덟 개 다시 고르는 대신 **띠를 채우지 않는다.** SurfaceStyles 가 정한 규칙과 같다 —
+ * 흰 면에 1px 선을 두르고, 색은 상태 앞의 점 하나가 말한다. 글자는 --ui-ink 라 어느 상태에서든
+ * 읽히고, 점은 UI 요소라 3:1 기준으로 판단한다.
+ *
+ * ── 색 여덟 개를 뜻 여섯 개로 ──────────────────────────────────────────────
+ * 하드코딩된 hex 는 앱 팔레트를 따르지 않는다. worklist 는 framework 패키지라 operato-plant ·
+ * operato-gangsters · operato-dataset 이 모두 이 화면을 쓰는데, 어느 앱에서도 그 앱 색이 아니었다.
+ * 토큰으로 바꾸면 앱마다 자기 라이트 · 다크 테마를 따라온다.
+ *
+ *     unassigned · assigned              --ui-muted   아직 시작하지 않았다
+ *     started                            --ui-accent  내 손에서 진행 중이다
+ *     submitted · escalated · delegated  --ui-info    남의 판단을 기다린다
+ *     rejected                           --ui-warn    되돌아왔다. 다시 해야 한다
+ *     ended · approved                   --ui-good    끝났다
+ *     aborted                            --ui-crit    중단됐다
+ *
+ * 색만으로 뜻을 전하지 않는다 — 상태 이름을 항상 함께 적는다.
+ */
+export declare const StateRibonStyles: import("lit").CSSResult;