feat(org-chart): add core cards and fixed-layout integration

packages/org-chart/src/core/status-summary.ts

@@ -0,0 +1,45 @@
+import { selectStatusGroups } from '../data/content-selectors.js';
+import { createEmployeeCard } from './employee-card.js';
+import type { RenderContext } from './render.js';
+
+/** `compact` is the read-only composition form: label-only headers and no policy note. */
+export function createStatusSummary(document: Document, context: RenderContext, signal: AbortSignal, { compact = false } = {}): HTMLElement {
+  const section = document.createElement('section');
+  section.className = 'hm-orgchart-status-summary';
+  section.dataset.contentSection = 'status-summary';
+  section.setAttribute('aria-label', '파견 및 휴직 직원');
+  const affiliations = new Map(context.data.affiliations.map(affiliation => [affiliation.id, affiliation.name]));
+  for (const { status, employees, count } of selectStatusGroups(context.data, context.summary)) {
+    const group = document.createElement('section');
+    group.className = 'hm-orgchart-status-group';
+    group.dataset.workStatus = status;
+    const label = status === 'dispatched' ? '파견' : '휴직';
+    group.setAttribute('aria-label', `${label} 직원`);
+    const heading = document.createElement('h3');
+    heading.className = 'hm-orgchart-summary-title';
+    heading.textContent = compact ? label : `${label} · ${count}명`;
+    if (compact) heading.setAttribute('aria-label', `${label} ${count}명`);
+    group.append(heading);
+    const cards = document.createElement('div');
+    cards.className = 'hm-orgchart-status-employees';
+    for (const employee of employees) {
+      cards.append(createEmployeeCard(document, employee, { kind: 'employee', workdeskPresentation: context.readOnly,
+        hideStatusLabel: compact && context.readOnly, affiliationName: affiliations.get(employee.affiliationId) }, signal));
+    }
+    group.append(cards);
+    if (!employees.length) {
+      const empty = document.createElement('p');
+      empty.className = 'hm-orgchart-content-empty';
+      empty.textContent = `${label} 직원이 없습니다.`;
+      group.append(empty);
+    }
+    if (!compact) {
+      const note = document.createElement('p');
+      note.className = 'hm-orgchart-policy';
+      note.textContent = '원본 직원의 상태별 별도 표시입니다. 전체 인원에 중복 합산하지 않습니다.';
+      group.append(note);
+    }
+    section.append(group);
+  }
+  return section;
+}