@things-factory/worklist 10.1.248 → 10.1.250

package/dist-client/components/state-ribon.js

@@ -0,0 +1,225 @@
+import { css } from 'lit';
+/**
+ * 업무 · 결재 화면의 머리 띠 — **세 화면이 한 모양을 쓴다.**
+ *
+ * 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    중단됐다
+ *
+ * 색만으로 뜻을 전하지 않는다 — 상태 이름을 항상 함께 적는다.
+ */
+/**
+ * The state → colour mapping above, alone - for anything that shows a worklist state, not only the
+ * ribbon. Set on `:host([state=...])`; read `--worklist-state-color`. The activity instance view kept
+ * a fourth copy of the old eight hex colours after the ribbons moved to meanings; three of them were
+ * under 3:1 on a light surface (started 2.62 · rejected 2.73 · ended 2.65, measured on :4000
+ * 2026-09-24) and `unassigned` had none, so it drew tomato.
+ */
+export const WorklistStateColors = css `
+  :host([state='unassigned']),
+  :host([state='assigned']),
+  :host([state='draft']) {
+    --worklist-state-color: var(--ui-muted, #57676f);
+  }
+
+  :host([state='started']),
+  :host([state='issued']),
+  :host([state='posted']) {
+    --worklist-state-color: var(--ui-accent, #00727e);
+  }
+
+  :host([state='submitted']),
+  :host([state='escalated']),
+  :host([state='delegated']),
+  :host([state='pending']) {
+    --worklist-state-color: var(--ui-info, #2b72ad);
+  }
+
+  :host([state='rejected']) {
+    --worklist-state-color: var(--ui-warn, #9f5e02);
+  }
+
+  :host([state='ended']),
+  :host([state='approved']) {
+    --worklist-state-color: var(--ui-good, #297d39);
+  }
+
+  :host([state='aborted']),
+  :host([state='deprecated']) {
+    --worklist-state-color: var(--ui-crit, #d14946);
+  }
+`;
+const StateRibonOwnStyles = css `
+  /*
+   * ── 면을 갖지 않는다 (2026-09-06) ─────────────────────────────────────
+   * 채운 색 띠를 걷어내면서 흰 면(--ui-panel)으로 바꿨는데, 그것이 카드와 **같은 색**이었다.
+   * 그래서 한 화면에 흰 블록이 넷이 되고(머리 띠 · 내용 · 타임라인 · 의견) 위계가 사라졌다.
+   * 실측: 결재 화면의 네 블록이 전부 rgb(255,255,255) 에 1px 테두리였다.
+   *
+   * 이 띠가 말하는 것(상태 · 설명 · 결재선)은 전부 보조다. 사용자가 먼저 묻는 것은 「무엇을
+   * 승인하나」이지 「지금 몇 단계인가」가 아니다.
+   *
+   * 그래서 페이지 바탕이 비치게 두고 아래 구분선도 없앤다. 흰 면은 「읽을 내용」에만 남는다 —
+   * 그 규칙이 서면 카드가 곧 본문이라는 것이 모양만으로 읽힌다.
+   */
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-medium, 8px);
+
+    /* office control height, the same for mouse and finger (WCAG AA target, user decision 2026-09-17) */
+    min-height: 36px;
+    padding: 0 var(--spacing-large, 16px);
+    box-sizing: border-box;
+
+    color: var(--ui-ink, #17242c);
+    font-size: var(--ui-t-body, 13px);
+  }
+
+  /* ── 상태 ────────────────────────────────────────────────────────────── */
+  .state {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  /*
+   * 상태색을 쓰는 자리는 이 점 하나다. 기본값은 --ui-muted — 서버가 아직 모르는 상태 이름이
+   * 오더라도 점이 사라지지 않고 회색으로 남는다(색이 없으면 상태가 없는 것처럼 보인다).
+   */
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--worklist-state-color, var(--ui-muted, #57676f));
+  }
+
+  /* ── 설명 ────────────────────────────────────────────────────────────── */
+  /*
+   * 한 줄로 자른다. 이 자리는 머리 띠라 높이가 고정이고, 설명이 길면 아래 내용을 밀어낸다.
+   * 전체 글은 정보 아이콘이 여는 overlay 가 갖는다.
+   *
+   * ── 늘어나지 않는다 (2026-09-20, :4000 실측) ──────────────────────────
+   * flex: 1 은 남는 자리를 전부 설명이 가져가게 한다. 그러면 그 뒤의 결재선 · 담당자가 띠의
+   * 오른쪽 끝으로 밀린다. 1024px 창의 결재 화면에서 잰 값이다:
+   *
+   *     설명 「화면 발행 승인」   제 너비 75px   →  늘어나서 417px
+   *     결재선 왼쪽 끝           x=407         →  x=750
+   *     본문이 시작하는 자리      x=254
+   *
+   * 결재선은 이 화면에서 「지금 누구 차례인가」를 말하는 유일한 자리인데, 본문을 훑어 내려가는
+   * 눈이 지나는 왼쪽 축에서 496px 떨어져 있었다. 창이 넓어질수록 더 멀어진다 — 설명이 가져가는
+   * 자리가 창 폭을 따라 늘기 때문이다.
+   *
+   * 늘리지 않으면 셋이 왼쪽부터 차례로 선다(상태 · 설명 · 결재선). 긴 설명에서는 여전히 잘린다 —
+   * min-width: 0 과 ellipsis 가 이미 있고, 그때는 결재선이 예전 자리로 돌아간다.
+   */
+  .desc {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ui-muted, #57676f);
+  }
+
+  /* ── 정보 아이콘 ─────────────────────────────────────────────────────── */
+  /*
+   * 상태 바로 뒤에 둔다. 전에는 띠의 오른쪽 끝, 결재선 바로 왼쪽에 있었다 — 그 자리에서는
+   * **결재선의 일부처럼** 읽힌다(결재선을 펴 보는 단추인가 하고 누르게 된다).
+   *
+   * 이 아이콘이 여는 것은 이 건의 기본 정보이고, 그 패널의 첫 줄이 상태다. 상태 옆에 붙여
+   * 두 개가 한 덩어리로 읽히게 한다 — 앞의 gap 만 좁혀서 붙이고 뒤는 띠의 기본 간격을 쓴다.
+   */
+  .info {
+    flex: none;
+    margin-left: calc(var(--spacing-medium, 8px) * -1 + 4px);
+    cursor: pointer;
+    color: var(--ui-muted, #57676f);
+    font-size: 18px;
+  }
+
+  .info:hover {
+    color: var(--ui-ink, #17242c);
+  }
+
+  /* 키보드로 온 것이 보여야 한다 — 이 아이콘은 role=button 이라 탭 순서에 든다. */
+  .info:focus-visible {
+    outline: 2px solid var(--ui-accent, #00727e);
+    outline-offset: 2px;
+    border-radius: 50%;
+    color: var(--ui-ink, #17242c);
+  }
+
+  /* ── 담당자 ──────────────────────────────────────────────────────────── */
+  .who {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 5px;
+    flex: none;
+    white-space: nowrap;
+  }
+
+  .who-label {
+    font-size: var(--ui-t-small, 11.5px);
+    color: var(--ui-muted, #57676f);
+  }
+
+  /* ── 결재선 ──────────────────────────────────────────────────────────── */
+  approval-line-brief {
+    flex: none;
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 좁은 화면 — 결재선과 담당자를 감춘다. 상태와 설명이 먼저다.
+   *
+   * 결재선은 단계마다 44px 이상을 쓴다. 세 단계면 이음선까지 200px 을 넘고, 460px 화면에서는
+   * 설명이 들어갈 자리가 남지 않는다.
+   */
+  @media only screen and (max-width: 460px) {
+    :host {
+      padding: 0 var(--spacing-medium, 8px);
+    }
+
+    .who,
+    approval-line-brief {
+      display: none;
+    }
+  }
+`;
+export const StateRibonStyles = [WorklistStateColors, StateRibonOwnStyles];
+//# sourceMappingURL=state-ribon.js.map

package/dist-client/components/state-ribon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-ribon.js","sourceRoot":"","sources":["../../client/components/state-ribon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrC,CAAA;AAED,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6I9B,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * 업무 · 결재 화면의 머리 띠 — **세 화면이 한 모양을 쓴다.**\n *\n * activity-thread-ribon · activity-approval-ribon · activity-instance-ribon 이 같은 자리에 같은\n * 것을 보인다(상태 · 설명 · 결재선 또는 담당자). 그런데 셋이 각자 100여 줄의 CSS 를 갖고 있었고,\n * 상태색 여덟 개가 세 벌로 복사되어 있었다.\n *\n * ── 채운 띠를 걷은 이유 — 글자가 안 읽혔다 ─────────────────────────────────\n * 전에는 상태마다 다른 색으로 띠 전체를 채우고 그 위에 흰 글자를 얹었다. 색은 하드코딩된 hex 여덟\n * 개였고, --md-sys-color-on-primary(대개 흰색)를 글자색으로 썼다. contrast 를 계산하면 12px 글자\n * 기준 AA(4.5:1)에 네 개가 못 미친다.\n *\n *     started    #56af45  2.76   ← 작업자가 가장 오래 보는 상태\n *     ended      #02acae  2.79\n *     rejected   #f27429  2.87\n *     submitted  #428df3  3.31\n *     unassigned #5f7184  5.02   (통과)\n *     escalated  #595de5  5.09   (통과)\n *     aborted    #cb3a33  5.01   (통과)\n *     delegated  #8654b0  5.37   (통과)\n *\n * 색을 여덟 개 다시 고르는 대신 **띠를 채우지 않는다.** SurfaceStyles 가 정한 규칙과 같다 —\n * 흰 면에 1px 선을 두르고, 색은 상태 앞의 점 하나가 말한다. 글자는 --ui-ink 라 어느 상태에서든\n * 읽히고, 점은 UI 요소라 3:1 기준으로 판단한다.\n *\n * ── 색 여덟 개를 뜻 여섯 개로 ──────────────────────────────────────────────\n * 하드코딩된 hex 는 앱 팔레트를 따르지 않는다. worklist 는 framework 패키지라 operato-plant ·\n * operato-gangsters · operato-dataset 이 모두 이 화면을 쓰는데, 어느 앱에서도 그 앱 색이 아니었다.\n * 토큰으로 바꾸면 앱마다 자기 라이트 · 다크 테마를 따라온다.\n *\n *     unassigned · assigned              --ui-muted   아직 시작하지 않았다\n *     started                            --ui-accent  내 손에서 진행 중이다\n *     submitted · escalated · delegated  --ui-info    남의 판단을 기다린다\n *     rejected                           --ui-warn    되돌아왔다. 다시 해야 한다\n *     ended · approved                   --ui-good    끝났다\n *     aborted                            --ui-crit    중단됐다\n *\n * 색만으로 뜻을 전하지 않는다 — 상태 이름을 항상 함께 적는다.\n */\n/**\n * The state → colour mapping above, alone - for anything that shows a worklist state, not only the\n * ribbon. Set on `:host([state=...])`; read `--worklist-state-color`. The activity instance view kept\n * a fourth copy of the old eight hex colours after the ribbons moved to meanings; three of them were\n * under 3:1 on a light surface (started 2.62 · rejected 2.73 · ended 2.65, measured on :4000\n * 2026-09-24) and `unassigned` had none, so it drew tomato.\n */\nexport const WorklistStateColors = css`\n  :host([state='unassigned']),\n  :host([state='assigned']),\n  :host([state='draft']) {\n    --worklist-state-color: var(--ui-muted, #57676f);\n  }\n\n  :host([state='started']),\n  :host([state='issued']),\n  :host([state='posted']) {\n    --worklist-state-color: var(--ui-accent, #00727e);\n  }\n\n  :host([state='submitted']),\n  :host([state='escalated']),\n  :host([state='delegated']),\n  :host([state='pending']) {\n    --worklist-state-color: var(--ui-info, #2b72ad);\n  }\n\n  :host([state='rejected']) {\n    --worklist-state-color: var(--ui-warn, #9f5e02);\n  }\n\n  :host([state='ended']),\n  :host([state='approved']) {\n    --worklist-state-color: var(--ui-good, #297d39);\n  }\n\n  :host([state='aborted']),\n  :host([state='deprecated']) {\n    --worklist-state-color: var(--ui-crit, #d14946);\n  }\n`\n\nconst StateRibonOwnStyles = css`\n  /*\n   * ── 면을 갖지 않는다 (2026-09-06) ─────────────────────────────────────\n   * 채운 색 띠를 걷어내면서 흰 면(--ui-panel)으로 바꿨는데, 그것이 카드와 **같은 색**이었다.\n   * 그래서 한 화면에 흰 블록이 넷이 되고(머리 띠 · 내용 · 타임라인 · 의견) 위계가 사라졌다.\n   * 실측: 결재 화면의 네 블록이 전부 rgb(255,255,255) 에 1px 테두리였다.\n   *\n   * 이 띠가 말하는 것(상태 · 설명 · 결재선)은 전부 보조다. 사용자가 먼저 묻는 것은 「무엇을\n   * 승인하나」이지 「지금 몇 단계인가」가 아니다.\n   *\n   * 그래서 페이지 바탕이 비치게 두고 아래 구분선도 없앤다. 흰 면은 「읽을 내용」에만 남는다 —\n   * 그 규칙이 서면 카드가 곧 본문이라는 것이 모양만으로 읽힌다.\n   */\n  :host {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-medium, 8px);\n\n    /* office control height, the same for mouse and finger (WCAG AA target, user decision 2026-09-17) */\n    min-height: 36px;\n    padding: 0 var(--spacing-large, 16px);\n    box-sizing: border-box;\n\n    color: var(--ui-ink, #17242c);\n    font-size: var(--ui-t-body, 13px);\n  }\n\n  /* ── 상태 ────────────────────────────────────────────────────────────── */\n  .state {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex: none;\n    font-weight: 600;\n    white-space: nowrap;\n  }\n\n  /*\n   * 상태색을 쓰는 자리는 이 점 하나다. 기본값은 --ui-muted — 서버가 아직 모르는 상태 이름이\n   * 오더라도 점이 사라지지 않고 회색으로 남는다(색이 없으면 상태가 없는 것처럼 보인다).\n   */\n  .dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--worklist-state-color, var(--ui-muted, #57676f));\n  }\n\n  /* ── 설명 ────────────────────────────────────────────────────────────── */\n  /*\n   * 한 줄로 자른다. 이 자리는 머리 띠라 높이가 고정이고, 설명이 길면 아래 내용을 밀어낸다.\n   * 전체 글은 정보 아이콘이 여는 overlay 가 갖는다.\n   *\n   * ── 늘어나지 않는다 (2026-09-20, :4000 실측) ──────────────────────────\n   * flex: 1 은 남는 자리를 전부 설명이 가져가게 한다. 그러면 그 뒤의 결재선 · 담당자가 띠의\n   * 오른쪽 끝으로 밀린다. 1024px 창의 결재 화면에서 잰 값이다:\n   *\n   *     설명 「화면 발행 승인」   제 너비 75px   →  늘어나서 417px\n   *     결재선 왼쪽 끝           x=407         →  x=750\n   *     본문이 시작하는 자리      x=254\n   *\n   * 결재선은 이 화면에서 「지금 누구 차례인가」를 말하는 유일한 자리인데, 본문을 훑어 내려가는\n   * 눈이 지나는 왼쪽 축에서 496px 떨어져 있었다. 창이 넓어질수록 더 멀어진다 — 설명이 가져가는\n   * 자리가 창 폭을 따라 늘기 때문이다.\n   *\n   * 늘리지 않으면 셋이 왼쪽부터 차례로 선다(상태 · 설명 · 결재선). 긴 설명에서는 여전히 잘린다 —\n   * min-width: 0 과 ellipsis 가 이미 있고, 그때는 결재선이 예전 자리로 돌아간다.\n   */\n  .desc {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--ui-muted, #57676f);\n  }\n\n  /* ── 정보 아이콘 ─────────────────────────────────────────────────────── */\n  /*\n   * 상태 바로 뒤에 둔다. 전에는 띠의 오른쪽 끝, 결재선 바로 왼쪽에 있었다 — 그 자리에서는\n   * **결재선의 일부처럼** 읽힌다(결재선을 펴 보는 단추인가 하고 누르게 된다).\n   *\n   * 이 아이콘이 여는 것은 이 건의 기본 정보이고, 그 패널의 첫 줄이 상태다. 상태 옆에 붙여\n   * 두 개가 한 덩어리로 읽히게 한다 — 앞의 gap 만 좁혀서 붙이고 뒤는 띠의 기본 간격을 쓴다.\n   */\n  .info {\n    flex: none;\n    margin-left: calc(var(--spacing-medium, 8px) * -1 + 4px);\n    cursor: pointer;\n    color: var(--ui-muted, #57676f);\n    font-size: 18px;\n  }\n\n  .info:hover {\n    color: var(--ui-ink, #17242c);\n  }\n\n  /* 키보드로 온 것이 보여야 한다 — 이 아이콘은 role=button 이라 탭 순서에 든다. */\n  .info:focus-visible {\n    outline: 2px solid var(--ui-accent, #00727e);\n    outline-offset: 2px;\n    border-radius: 50%;\n    color: var(--ui-ink, #17242c);\n  }\n\n  /* ── 담당자 ──────────────────────────────────────────────────────────── */\n  .who {\n    display: inline-flex;\n    align-items: baseline;\n    gap: 5px;\n    flex: none;\n    white-space: nowrap;\n  }\n\n  .who-label {\n    font-size: var(--ui-t-small, 11.5px);\n    color: var(--ui-muted, #57676f);\n  }\n\n  /* ── 결재선 ──────────────────────────────────────────────────────────── */\n  approval-line-brief {\n    flex: none;\n    font-size: var(--ui-t-small, 11.5px);\n  }\n\n  /*\n   * 좁은 화면 — 결재선과 담당자를 감춘다. 상태와 설명이 먼저다.\n   *\n   * 결재선은 단계마다 44px 이상을 쓴다. 세 단계면 이음선까지 200px 을 넘고, 460px 화면에서는\n   * 설명이 들어갈 자리가 남지 않는다.\n   */\n  @media only screen and (max-width: 460px) {\n    :host {\n      padding: 0 var(--spacing-medium, 8px);\n    }\n\n    .who,\n    approval-line-brief {\n      display: none;\n    }\n  }\n`\n\nexport const StateRibonStyles = [WorklistStateColors, StateRibonOwnStyles]\n"]}

package/dist-client/components/timeline-entries.d.ts

@@ -0,0 +1,38 @@
+/**
+ * What a thread's timeline lists, and in what order - one line per thing a person did.
+ *
+ * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and
+ * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment
+ * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」
+ * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the
+ * approver had put the request up. The approval row is the judgment; the history line is dropped.
+ *
+ * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as
+ * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread
+ * was submitted; a tie in time keeps the order things happen in.
+ *
+ * Kept free of imports so the test runner can hold it.
+ */
+type HistoryLine = {
+    transaction?: string;
+    reason?: any;
+    updatedAt?: any;
+    createdAt?: any;
+    terminatedAt?: any;
+};
+type ApprovalLine = {
+    judgment?: string;
+    updatedAt?: any;
+    createdAt?: any;
+    terminatedAt?: any;
+};
+/** The moment a line shows - and is sorted by. */
+export declare function whenOf(item: any): number;
+/**
+ * `shortForm` is every screen's timeline today. Without it every history line stays - the long form
+ * is the record as stored - and only the order of lines at one moment is set.
+ */
+export declare function timelineEntries<H extends HistoryLine, A extends ApprovalLine>(histories: readonly H[], approvals: readonly A[], { shortForm }?: {
+    shortForm?: boolean;
+}): (H | A)[];
+export {};

package/dist-client/components/timeline-entries.js

@@ -0,0 +1,62 @@
+/**
+ * What a thread's timeline lists, and in what order - one line per thing a person did.
+ *
+ * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and
+ * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment
+ * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」
+ * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the
+ * approver had put the request up. The approval row is the judgment; the history line is dropped.
+ *
+ * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as
+ * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread
+ * was submitted; a tie in time keeps the order things happen in.
+ *
+ * Kept free of imports so the test runner can hold it.
+ */
+/** History lines an approval row already says, or that are no step anyone took. */
+const NOT_SHOWN = ['approve', 'reject', 'escalate', 'save'];
+/** The order things happen in on one thread, for lines at the same moment. Approval rows sit at 4; an unknown step with them. */
+const STEP_ORDER = {
+    post: 0,
+    start: 1,
+    restart: 1,
+    delegate: 2,
+    submit: 3,
+    /* the judgment's own lines follow the approval row that made them */
+    approve: 5,
+    reject: 5,
+    escalate: 5,
+    end: 6,
+    abort: 6
+};
+const APPROVAL_ORDER = 4;
+/** The moment a line shows - and is sorted by. */
+export 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;
+}
+function isHistory(item) {
+    return 'reason' in item;
+}
+function stepOf(item) {
+    return isHistory(item) ? STEP_ORDER[String(item.transaction)] ?? APPROVAL_ORDER : APPROVAL_ORDER;
+}
+/**
+ * `shortForm` is every screen's timeline today. Without it every history line stays - the long form
+ * is the record as stored - and only the order of lines at one moment is set.
+ */
+export function timelineEntries(histories, approvals, { shortForm = false } = {}) {
+    const submitted = histories.some(item => item.transaction === 'submit');
+    const shown = (item) => !shortForm ||
+        (!NOT_SHOWN.some(word => String(item.transaction).includes(word)) && !(item.transaction === 'post' && submitted));
+    const lines = [
+        ...histories.filter(item => !!item.transaction && shown(item)),
+        ...approvals.filter(item => item.judgment)
+    ];
+    return lines
+        .map((item, at) => ({ item, at }))
+        .sort((a, b) => whenOf(a.item) - whenOf(b.item) || stepOf(a.item) - stepOf(b.item) || a.at - b.at)
+        .map(({ item }) => item);
+}
+//# sourceMappingURL=timeline-entries.js.map

package/dist-client/components/timeline-entries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-entries.js","sourceRoot":"","sources":["../../client/components/timeline-entries.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * What a thread's timeline lists, and in what order - one line per thing a person did.\n *\n * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and\n * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment\n * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」\n * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the\n * approver had put the request up. The approval row is the judgment; the history line is dropped.\n *\n * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as\n * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread\n * was submitted; a tie in time keeps the order things happen in.\n *\n * Kept free of imports so the test runner can hold it.\n */\n\n/** History lines an approval row already says, or that are no step anyone took. */\nconst NOT_SHOWN = ['approve', 'reject', 'escalate', 'save']\n\n/** The order things happen in on one thread, for lines at the same moment. Approval rows sit at 4; an unknown step with them. */\nconst STEP_ORDER: Record<string, number> = {\n  post: 0,\n  start: 1,\n  restart: 1,\n  delegate: 2,\n  submit: 3,\n  /* the judgment's own lines follow the approval row that made them */\n  approve: 5,\n  reject: 5,\n  escalate: 5,\n  end: 6,\n  abort: 6\n}\nconst APPROVAL_ORDER = 4\n\ntype HistoryLine = { transaction?: string; reason?: any; updatedAt?: any; createdAt?: any; terminatedAt?: any }\ntype ApprovalLine = { judgment?: string; updatedAt?: any; createdAt?: any; terminatedAt?: any }\n\n/** The moment a line shows - and is sorted by. */\nexport function 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\nfunction isHistory(item: any): item is HistoryLine {\n  return 'reason' in item\n}\n\nfunction stepOf(item: HistoryLine | ApprovalLine): number {\n  return isHistory(item) ? STEP_ORDER[String(item.transaction)] ?? APPROVAL_ORDER : APPROVAL_ORDER\n}\n\n/**\n * `shortForm` is every screen's timeline today. Without it every history line stays - the long form\n * is the record as stored - and only the order of lines at one moment is set.\n */\nexport function timelineEntries<H extends HistoryLine, A extends ApprovalLine>(\n  histories: readonly H[],\n  approvals: readonly A[],\n  { shortForm = false }: { shortForm?: boolean } = {}\n): (H | A)[] {\n  const submitted = histories.some(item => item.transaction === 'submit')\n  const shown = (item: H) =>\n    !shortForm ||\n    (!NOT_SHOWN.some(word => String(item.transaction).includes(word)) && !(item.transaction === 'post' && submitted))\n\n  const lines = [\n    ...histories.filter(item => !!item.transaction && shown(item)),\n    ...approvals.filter(item => item.judgment)\n  ]\n\n  return lines\n    .map((item, at) => ({ item, at }))\n    .sort((a, b) => whenOf(a.item) - whenOf(b.item) || stepOf(a.item) - stepOf(b.item) || a.at - b.at)\n    .map(({ item }) => item)\n}\n"]}

package/dist-client/components/work-box-groups.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+export type WorkBoxGroupTab = {
+    key: string;
+    /** Translation key of the tab's name. */
+    label: string;
+    /** Translation key of what the group is, shown on hover. */
+    hint: string;
+    /** Undefined draws no number - a count that could not be read is not zero. */
+    count?: number;
+};
+/**
+ * The groups of a work box, drawn the one way all three boxes draw them (pages/todo/work-box.ts).
+ *
+ * It sits above the list, outside the grid's headroom. In the headroom it would fold away with the
+ * filters, and with it the only way to the other groups. Filters may fold - unfolding gives the
+ * whole list back - but this must not.
+ *
+ * Choosing fires `select` with the group's key; the page changes its address.
+ */
+export declare class WorkBoxGroups extends LitElement {
+    static styles: import("lit").CSSResult;
+    groups: WorkBoxGroupTab[];
+    selected: string;
+    render(): import("lit-html").TemplateResult<1>[];
+}

package/dist-client/components/work-box-groups.js

@@ -0,0 +1,98 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+/**
+ * The groups of a work box, drawn the one way all three boxes draw them (pages/todo/work-box.ts).
+ *
+ * It sits above the list, outside the grid's headroom. In the headroom it would fold away with the
+ * filters, and with it the only way to the other groups. Filters may fold - unfolding gives the
+ * whole list back - but this must not.
+ *
+ * Choosing fires `select` with the group's key; the page changes its address.
+ */
+let WorkBoxGroups = class WorkBoxGroups extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.selected = '';
+    }
+    static { this.styles = css `
+    :host {
+      flex: none;
+      display: flex;
+      gap: var(--spacing-large);
+      padding: 0 var(--spacing-medium);
+      border-bottom: 1px solid var(--ui-line, #d5dce0);
+    }
+
+    button {
+      border: none;
+      background: none;
+      padding: var(--spacing-medium) 2px calc(var(--spacing-medium) - 2px);
+      border-bottom: 2px solid transparent;
+      font: inherit;
+      font-size: 14px;
+      color: var(--ui-muted, #57676f);
+      cursor: pointer;
+    }
+
+    button:hover:not([data-selected]) {
+      color: var(--ui-ink, #17272f);
+    }
+
+    /*
+     * ── 색은 밑줄이 말하고, 글자는 읽히는 색으로 ──────────────────────────────
+     * 고른 탭의 글자를 --ui-accent 로 두었는데, 그 토큰이 브랜드 초록(#0e8a56)이 되면서 14px
+     * 글자로는 안 읽히게 됐다.
+     *
+     * [확인함] 초록 #0e8a56 · 배경 rgb(240 242 244) → 대비 3.91. 본문 글자 기준 4.5 미달이다.
+     * 흰 바탕 기준으로는 4.39 인데, **이 앱 배경은 흰색이 아니라** 더 나쁘다.
+     *
+     *   --ui-ink     15.1   고른 탭 글자
+     *   --ui-muted    5.52  안 고른 탭 글자
+     *   --ui-accent   3.91  밑줄 — UI 요소는 3.0 기준이라 통과한다
+     *
+     * 밑줄은 선택을 가장 강하게 표시하는 자리다. 브랜드색이 거기 남으면 잃는 것이 없다.
+     */
+    button[data-selected] {
+      font-weight: 600;
+      color: var(--ui-ink, #17272f);
+      border-bottom-color: var(--ui-accent, #262e38);
+    }
+
+    .n {
+      margin-left: 4px;
+      color: var(--ui-faint, #8a959c);
+    }
+
+    button[data-selected] .n {
+      color: inherit;
+    }
+  `; }
+    render() {
+        return this.groups.map(({ key, label, hint, count }) => html `
+        <button
+          ?data-selected=${this.selected === key}
+          title=${i18next.t(hint)}
+          @click=${() => this.dispatchEvent(new CustomEvent('select', { detail: key }))}
+        >
+          ${i18next.t(label)}
+          ${count !== undefined ? html `<span class="n">${count.toLocaleString(i18next.language || undefined)}</span>` : ''}
+        </button>
+      `);
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], WorkBoxGroups.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], WorkBoxGroups.prototype, "selected", void 0);
+WorkBoxGroups = __decorate([
+    customElement('work-box-groups')
+], WorkBoxGroups);
+export { WorkBoxGroups };
+//# sourceMappingURL=work-box-groups.js.map

package/dist-client/components/work-box-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"work-box-groups.js","sourceRoot":"","sources":["../../client/components/work-box-groups.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAYvC;;;;;;;;GAQG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAuDsB,WAAM,GAAsB,EAAE,CAAA;QAC7B,aAAQ,GAAG,EAAE,CAAA;IAgB3C,CAAC;aAvEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,AApDY,CAoDZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CACpB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;2BAEhB,IAAI,CAAC,QAAQ,KAAK,GAAG;kBAC9B,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;mBACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;;YAE3E,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;YAChB,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;OAEnH,CACF,CAAA;IACH,CAAC;;AAhB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAc;AAxD9B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAwEzB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nexport type WorkBoxGroupTab = {\n  key: string\n  /** Translation key of the tab's name. */\n  label: string\n  /** Translation key of what the group is, shown on hover. */\n  hint: string\n  /** Undefined draws no number - a count that could not be read is not zero. */\n  count?: number\n}\n\n/**\n * The groups of a work box, drawn the one way all three boxes draw them (pages/todo/work-box.ts).\n *\n * It sits above the list, outside the grid's headroom. In the headroom it would fold away with the\n * filters, and with it the only way to the other groups. Filters may fold - unfolding gives the\n * whole list back - but this must not.\n *\n * Choosing fires `select` with the group's key; the page changes its address.\n */\n@customElement('work-box-groups')\nexport class WorkBoxGroups extends LitElement {\n  static styles = css`\n    :host {\n      flex: none;\n      display: flex;\n      gap: var(--spacing-large);\n      padding: 0 var(--spacing-medium);\n      border-bottom: 1px solid var(--ui-line, #d5dce0);\n    }\n\n    button {\n      border: none;\n      background: none;\n      padding: var(--spacing-medium) 2px calc(var(--spacing-medium) - 2px);\n      border-bottom: 2px solid transparent;\n      font: inherit;\n      font-size: 14px;\n      color: var(--ui-muted, #57676f);\n      cursor: pointer;\n    }\n\n    button:hover:not([data-selected]) {\n      color: var(--ui-ink, #17272f);\n    }\n\n    /*\n     * ── 색은 밑줄이 말하고, 글자는 읽히는 색으로 ──────────────────────────────\n     * 고른 탭의 글자를 --ui-accent 로 두었는데, 그 토큰이 브랜드 초록(#0e8a56)이 되면서 14px\n     * 글자로는 안 읽히게 됐다.\n     *\n     * [확인함] 초록 #0e8a56 · 배경 rgb(240 242 244) → 대비 3.91. 본문 글자 기준 4.5 미달이다.\n     * 흰 바탕 기준으로는 4.39 인데, **이 앱 배경은 흰색이 아니라** 더 나쁘다.\n     *\n     *   --ui-ink     15.1   고른 탭 글자\n     *   --ui-muted    5.52  안 고른 탭 글자\n     *   --ui-accent   3.91  밑줄 — UI 요소는 3.0 기준이라 통과한다\n     *\n     * 밑줄은 선택을 가장 강하게 표시하는 자리다. 브랜드색이 거기 남으면 잃는 것이 없다.\n     */\n    button[data-selected] {\n      font-weight: 600;\n      color: var(--ui-ink, #17272f);\n      border-bottom-color: var(--ui-accent, #262e38);\n    }\n\n    .n {\n      margin-left: 4px;\n      color: var(--ui-faint, #8a959c);\n    }\n\n    button[data-selected] .n {\n      color: inherit;\n    }\n  `\n\n  @property({ type: Array }) groups: WorkBoxGroupTab[] = []\n  @property({ type: String }) selected = ''\n\n  render() {\n    return this.groups.map(\n      ({ key, label, hint, count }) => html`\n        <button\n          ?data-selected=${this.selected === key}\n          title=${i18next.t(hint)}\n          @click=${() => this.dispatchEvent(new CustomEvent('select', { detail: key }))}\n        >\n          ${i18next.t(label)}\n          ${count !== undefined ? html`<span class=\"n\">${count.toLocaleString(i18next.language || undefined)}</span>` : ''}\n        </button>\n      `\n    )\n  }\n}\n"]}

package/dist-client/due.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 남은 시간을 사람의 말로 — 값을 알 수 없으면 **빈 문자열이 아니라 모른다고 말한다.**
+ *
+ * 기한이 지난 것은 「지남」을 붙인다. 전에는 `- ` 를 앞에 붙였는데, 그 하이픈이 「값이 없다」와
+ * 구별되지 않았다.
+ */
+export declare function dueText(dueAt: unknown, asOf?: number): string;
+/**
+ * 화면에 살아 있는 남은 시간 — 1분마다 다시 낸다.
+ *
+ * `isActive` 를 받는 이유는 화면이 뒤로 간 뒤에도 도는 것을 막기 위해서다. 예전에는 각 화면이
+ * `this.active` 를 직접 봤다.
+ */
+export declare function dueTimer(dueAt: unknown, isActive?: () => boolean): AsyncGenerator<string, void, unknown>;
+/** 기한이 지났나 — 줄을 강조할지 정하는 자리가 쓴다. */
+export declare function isOverdue(dueAt: unknown, asOf?: number): boolean;

package/dist-client/due.js

@@ -0,0 +1,78 @@
+import { i18next } from '@operato/i18n';
+import { sleep } from '@operato/utils';
+/*
+ * 기한까지 얼마나 남았나 — **한 곳에서만 계산한다.**
+ *
+ * ── 왜 모았나 (2026-09-01) ─────────────────────────────────────────────────
+ * 같은 함수가 세 화면에 복사되어 있었고 구현이 갈려 있었다.
+ *
+ *   activity-instance-list-page.ts   Date.parse(exp)   맞음
+ *   todo-list-page.ts                Date.parse(exp)   맞음
+ *   approval-pending-list-page.ts    Number(exp)       틀림
+ *
+ * `dueAt` 은 ISO 문자열이다(`"2026-09-02T03:48:27.289Z"`). 그것을 `Number()` 로 읽으면 NaN 이고,
+ * 그러면 날·시·분이 모두 NaN 이라 falsy 가 되어 전부 빠지고 `positive` 도 거짓이 된다. 남는 것은
+ * 접두사 `- ` 하나다.
+ *
+ * 그래서 **내 결재함의 「남은 시간」 칸은 기한이 있어도 하이픈 하나만 나왔다.** 오류는 나지 않는다.
+ * 실측: Number("2026-09-02T03:48:27.289Z") = NaN, Date.parse(같은 값) = 1788320907289.
+ *
+ * 복사본이 셋이면 한 곳을 고쳐도 나머지 둘은 그대로다. 그래서 옮기지 않고 모았다.
+ */
+const MIN = 60;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+/**
+ * 남은 시간을 사람의 말로 — 값을 알 수 없으면 **빈 문자열이 아니라 모른다고 말한다.**
+ *
+ * 기한이 지난 것은 「지남」을 붙인다. 전에는 `- ` 를 앞에 붙였는데, 그 하이픈이 「값이 없다」와
+ * 구별되지 않았다.
+ */
+export function dueText(dueAt, asOf = Date.now()) {
+    const at = dueAt === null || dueAt === undefined || dueAt === '' ? NaN : Date.parse(String(dueAt));
+    if (!Number.isFinite(at)) {
+        return i18next.t('text.no-due');
+    }
+    let secs = Math.round((at - asOf) / 1000);
+    const overdue = secs < 0;
+    secs = Math.abs(secs);
+    const days = Math.floor(secs / DAY);
+    secs -= days * DAY;
+    const hours = Math.floor(secs / HOUR);
+    secs -= hours * HOUR;
+    const minutes = Math.floor(secs / MIN);
+    const parts = [
+        days ? `${days}${i18next.t('label.days')}` : '',
+        hours ? `${hours}${i18next.t('label.hours')}` : '',
+        /* 날이 있으면 분까지 적지 않는다 — 「3일 5시간 12분」은 읽는 사람이 쓰지 않는 정밀도다. */
+        !days && minutes ? `${minutes}${i18next.t('label.minutes')}` : ''
+    ].filter(Boolean);
+    /* 1분도 안 남은 것은 0 으로 적지 않는다. 곧이라는 뜻이다. */
+    if (!parts.length) {
+        return i18next.t(overdue ? 'text.due-just-passed' : 'text.due-within-a-minute');
+    }
+    return i18next.t(overdue ? 'text.due-overdue-by' : 'text.due-left-in', { span: parts.join(' ') });
+}
+/**
+ * 화면에 살아 있는 남은 시간 — 1분마다 다시 낸다.
+ *
+ * `isActive` 를 받는 이유는 화면이 뒤로 간 뒤에도 도는 것을 막기 위해서다. 예전에는 각 화면이
+ * `this.active` 를 직접 봤다.
+ */
+export async function* dueTimer(dueAt, isActive = () => true) {
+    /* 기한이 없으면 한 번만 말하고 끝낸다 — 1분마다 같은 말을 다시 낼 일이 없다. */
+    if (dueAt === null || dueAt === undefined || dueAt === '') {
+        yield dueText(dueAt);
+        return;
+    }
+    while (isActive()) {
+        yield dueText(dueAt);
+        await sleep(60 * 1000);
+    }
+}
+/** 기한이 지났나 — 줄을 강조할지 정하는 자리가 쓴다. */
+export function isOverdue(dueAt, asOf = Date.now()) {
+    const at = dueAt === null || dueAt === undefined || dueAt === '' ? NaN : Date.parse(String(dueAt));
+    return Number.isFinite(at) && at < asOf;
+}
+//# sourceMappingURL=due.js.map

package/dist-client/due.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"due.js","sourceRoot":"","sources":["../client/due.ts"],"names":[],"mappings":"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","sourcesContent":["import { i18next } from '@operato/i18n'\nimport { sleep } from '@operato/utils'\n\n/*\n * 기한까지 얼마나 남았나 — **한 곳에서만 계산한다.**\n *\n * ── 왜 모았나 (2026-09-01) ─────────────────────────────────────────────────\n * 같은 함수가 세 화면에 복사되어 있었고 구현이 갈려 있었다.\n *\n *   activity-instance-list-page.ts   Date.parse(exp)   맞음\n *   todo-list-page.ts                Date.parse(exp)   맞음\n *   approval-pending-list-page.ts    Number(exp)       틀림\n *\n * `dueAt` 은 ISO 문자열이다(`\"2026-09-02T03:48:27.289Z\"`). 그것을 `Number()` 로 읽으면 NaN 이고,\n * 그러면 날·시·분이 모두 NaN 이라 falsy 가 되어 전부 빠지고 `positive` 도 거짓이 된다. 남는 것은\n * 접두사 `- ` 하나다.\n *\n * 그래서 **내 결재함의 「남은 시간」 칸은 기한이 있어도 하이픈 하나만 나왔다.** 오류는 나지 않는다.\n * 실측: Number(\"2026-09-02T03:48:27.289Z\") = NaN, Date.parse(같은 값) = 1788320907289.\n *\n * 복사본이 셋이면 한 곳을 고쳐도 나머지 둘은 그대로다. 그래서 옮기지 않고 모았다.\n */\n\nconst MIN = 60\nconst HOUR = 60 * MIN\nconst DAY = 24 * HOUR\n\n/**\n * 남은 시간을 사람의 말로 — 값을 알 수 없으면 **빈 문자열이 아니라 모른다고 말한다.**\n *\n * 기한이 지난 것은 「지남」을 붙인다. 전에는 `- ` 를 앞에 붙였는데, 그 하이픈이 「값이 없다」와\n * 구별되지 않았다.\n */\nexport function dueText(dueAt: unknown, asOf: number = Date.now()): string {\n  const at = dueAt === null || dueAt === undefined || dueAt === '' ? NaN : Date.parse(String(dueAt))\n\n  if (!Number.isFinite(at)) {\n    return i18next.t('text.no-due')\n  }\n\n  let secs = Math.round((at - asOf) / 1000)\n  const overdue = secs < 0\n\n  secs = Math.abs(secs)\n  const days = Math.floor(secs / DAY)\n  secs -= days * DAY\n  const hours = Math.floor(secs / HOUR)\n  secs -= hours * HOUR\n  const minutes = Math.floor(secs / MIN)\n\n  const parts = [\n    days ? `${days}${i18next.t('label.days')}` : '',\n    hours ? `${hours}${i18next.t('label.hours')}` : '',\n    /* 날이 있으면 분까지 적지 않는다 — 「3일 5시간 12분」은 읽는 사람이 쓰지 않는 정밀도다. */\n    !days && minutes ? `${minutes}${i18next.t('label.minutes')}` : ''\n  ].filter(Boolean)\n\n  /* 1분도 안 남은 것은 0 으로 적지 않는다. 곧이라는 뜻이다. */\n  if (!parts.length) {\n    return i18next.t(overdue ? 'text.due-just-passed' : 'text.due-within-a-minute')\n  }\n\n  return i18next.t(overdue ? 'text.due-overdue-by' : 'text.due-left-in', { span: parts.join(' ') })\n}\n\n/**\n * 화면에 살아 있는 남은 시간 — 1분마다 다시 낸다.\n *\n * `isActive` 를 받는 이유는 화면이 뒤로 간 뒤에도 도는 것을 막기 위해서다. 예전에는 각 화면이\n * `this.active` 를 직접 봤다.\n */\nexport async function* dueTimer(dueAt: unknown, isActive: () => boolean = () => true) {\n  /* 기한이 없으면 한 번만 말하고 끝낸다 — 1분마다 같은 말을 다시 낼 일이 없다. */\n  if (dueAt === null || dueAt === undefined || dueAt === '') {\n    yield dueText(dueAt)\n    return\n  }\n\n  while (isActive()) {\n    yield dueText(dueAt)\n    await sleep(60 * 1000)\n  }\n}\n\n/** 기한이 지났나 — 줄을 강조할지 정하는 자리가 쓴다. */\nexport function isOverdue(dueAt: unknown, asOf: number = Date.now()): boolean {\n  const at = dueAt === null || dueAt === undefined || dueAt === '' ? NaN : Date.parse(String(dueAt))\n\n  return Number.isFinite(at) && at < asOf\n}\n"]}

package/dist-client/entity360/person-open-work-section.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+/**
+ * The person 360's open-work section (ADR-0067 person 360 ruling, ADR-0091): how many to-dos are
+ * assigned to the person and how many approvals are waiting on them - counts only. The items stay
+ * with the person and the site owner; this section never lists them.
+ *
+ * `personOpenWork` answers null for someone who is not on this site - 「없음」, not zero.
+ */
+type OpenWork = {
+    toDos: number;
+    approvalsPending: number;
+};
+export declare function registerPersonOpenWorkSection(): void;
+export declare class PersonOpenWorkSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    subject?: Entity360Subject;
+    answer?: Entity360DoorAnswer<OpenWork | null>;
+    updated(changed: Map<string, unknown>): void;
+    private read;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};