@wipco/sdui 0.27.0 → 0.28.0

package/dist/chunk-KBLFOC37.js

@@ -0,0 +1,1242 @@
+import { ImageLightbox } from './chunk-XPBZMECW.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Badge, Button, IconButton, Icon } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PAGE_SIZE = 500;
+var MAX_PAGES = 20;
+var UNASSIGNED_GROUP_ID = "kc_unassigned_department";
+var BOARD_COLORS = [
+  "var(--wp-series-1)",
+  "var(--wp-series-2)",
+  "var(--wp-series-4)",
+  "var(--wp-series-5)",
+  "var(--wp-series-3)",
+  "var(--wp-series-4)",
+  "var(--wp-series-1)",
+  "var(--wp-series-3)"
+];
+var CANVAS_PADDING = 80;
+var GROUP_WIDTH = 230;
+var GROUP_HEIGHT = 36;
+var EMPLOYEE_WIDTH = 118;
+var EMPLOYEE_HEIGHT = 46;
+var EMPLOYEE_GAP = 8;
+var ROOT_GAP = 48;
+var CHILD_GAP = 22;
+var TEAM_BOX_WIDTH = 44;
+var TEAM_BOX_PAD = 54;
+var TEAM_BOX_CHAR = 19;
+var TEAM_ROW_INDENT = 28;
+var TEAM_TRUNK_X = 12;
+var TEAM_MEMBER_GAP = 12;
+var TEAM_ROW_GAP = 18;
+var MEMBER_COLUMNS = 2;
+var LEADER_WIDTH = 230;
+var LEADER_HEIGHT = 62;
+var TOP_GAP = 58;
+var ROOT_ROW_GAP = 70;
+var MIN_ZOOM = 0.35;
+var MAX_ZOOM = 1.8;
+var DEFAULT_VIEW = { scale: 0.82, x: 48, y: 48 };
+var DUTY_ORDER = [
+  "\uD68C\uC7A5",
+  "\uBD80\uD68C\uC7A5",
+  "\uB300\uD45C\uC774\uC0AC",
+  "\uB300\uD45C",
+  "\uC0AC\uC7A5",
+  "\uBD80\uC0AC\uC7A5",
+  "\uC804\uBB34",
+  "\uC0C1\uBB34",
+  "\uBCF8\uBD80\uC7A5",
+  "\uC2E4\uC7A5",
+  "\uD300\uC7A5",
+  "\uD30C\uD2B8\uC7A5"
+];
+var GRADE_ORDER = [
+  "\uD68C\uC7A5",
+  "\uBD80\uD68C\uC7A5",
+  "\uB300\uD45C\uC774\uC0AC",
+  "\uB300\uD45C",
+  "\uC0AC\uC7A5",
+  "\uBD80\uC0AC\uC7A5",
+  "\uC804\uBB34",
+  "\uC0C1\uBB34",
+  "\uC774\uC0AC",
+  "\uC218\uC11D",
+  "\uBD80\uC7A5",
+  "\uCC28\uC7A5",
+  "\uACFC\uC7A5",
+  "\uB300\uB9AC",
+  "\uC8FC\uC784",
+  "\uC0AC\uC6D0",
+  "\uC778\uD134"
+];
+var OCB_CSS = `
+.erp-ocb-member { transition: border-color .15s ease, background-color .15s ease; }
+.erp-ocb-member:hover { border-color: var(--wp-border-brand); background: var(--wp-surface-hover); }
+.erp-ocb-group { transition: opacity .15s ease; }
+.erp-ocb-group:hover { opacity: .9; }
+`;
+async function fetchAllPages(api, endpoint, pick) {
+  const all = [];
+  const sep = endpoint.includes("?") ? "&" : "?";
+  for (let page = 0; page < MAX_PAGES; page += 1) {
+    const body = await api(`${endpoint}${sep}limit=${PAGE_SIZE}&offset=${page * PAGE_SIZE}`, {
+      method: "GET"
+    });
+    const rows = pick(body ?? {});
+    all.push(...rows);
+    const total = typeof body?.total === "number" ? body.total : null;
+    if (rows.length === 0) break;
+    if (total !== null ? all.length >= total : rows.length < PAGE_SIZE) break;
+  }
+  return all;
+}
+function rowsOf(body, keys) {
+  for (const key of keys) {
+    const value = body[key];
+    if (Array.isArray(value)) return value;
+  }
+  return [];
+}
+function pickEmployees(body) {
+  return rowsOf(body, ["data", "employees"]).flatMap((row) => {
+    if (typeof row !== "object" || row === null) return [];
+    const record = row;
+    if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    return [record];
+  });
+}
+function pickGroups(body) {
+  return rowsOf(body, ["data", "groups", "groupsWithPaths"]).flatMap((row) => {
+    if (typeof row !== "object" || row === null) return [];
+    const record = row;
+    if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    return [
+      {
+        id: record.id,
+        name: record.name,
+        parent_id: typeof record.parent_id === "string" ? record.parent_id : null,
+        path: typeof record.path === "string" ? record.path : null
+      }
+    ];
+  });
+}
+function pickPositions(body) {
+  return rowsOf(body, ["data"]).flatMap((row) => {
+    if (typeof row !== "object" || row === null) return [];
+    const record = row;
+    if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    return [
+      {
+        id: record.id,
+        name: record.name,
+        rank_order: typeof record.rank_order === "number" ? record.rank_order : 0,
+        is_active: typeof record.is_active === "boolean" ? record.is_active : true
+      }
+    ];
+  });
+}
+function jobPositionRankMap(positions) {
+  const map = /* @__PURE__ */ new Map();
+  for (const position of positions) {
+    const name = position.name.trim();
+    if (name === "" || map.has(name)) continue;
+    map.set(name, position.rank_order ?? 0);
+  }
+  return map;
+}
+function jobPositionRankOf(map, value) {
+  const text = (value ?? "").trim();
+  if (text === "") return null;
+  const exact = map.get(text);
+  if (exact !== void 0) return exact;
+  let best = null;
+  let bestLength = 0;
+  for (const [name, rank] of map) {
+    if (text.includes(name) && name.length > bestLength) {
+      best = rank;
+      bestLength = name.length;
+    }
+  }
+  return best;
+}
+function rankIn(order, value) {
+  const text = (value ?? "").trim();
+  if (!text) return order.length + 1;
+  const exact = order.indexOf(text);
+  if (exact >= 0) return exact;
+  let best = order.length;
+  let bestLength = 0;
+  order.forEach((entry, index) => {
+    if (text.includes(entry) && entry.length > bestLength) {
+      best = index;
+      bestLength = entry.length;
+    }
+  });
+  return best;
+}
+function compareGrades(a, b, positionRanks) {
+  const rankA = jobPositionRankOf(positionRanks, a);
+  const rankB = jobPositionRankOf(positionRanks, b);
+  if (rankA !== null || rankB !== null) {
+    if (rankA === null) return 1;
+    if (rankB === null) return -1;
+    return rankA - rankB;
+  }
+  return rankIn(GRADE_ORDER, a) - rankIn(GRADE_ORDER, b);
+}
+function compareMembers(a, b, positionRanks) {
+  const dutyDiff = rankIn(DUTY_ORDER, a.job_title) - rankIn(DUTY_ORDER, b.job_title);
+  if (dutyDiff !== 0) return dutyDiff;
+  const gradeDiff = compareGrades(a.grade, b.grade, positionRanks);
+  if (gradeDiff !== 0) return gradeDiff;
+  const levelDiff = (b.level ?? 0) - (a.level ?? 0);
+  if (levelDiff !== 0) return levelDiff;
+  return a.name.localeCompare(b.name, "ko");
+}
+function positionText(employee) {
+  return (employee.grade ?? "").trim() || (employee.job_title ?? "").trim() || "-";
+}
+function isUnassignedGroup(group) {
+  return group.id === UNASSIGNED_GROUP_ID || (group.name ?? "").trim() === "\uBBF8\uC9C0\uC815" || group.id.trim() === "\uBBF8\uC9C0\uC815";
+}
+function employeeGroupId(employee) {
+  return employee.department_id ?? employee.department?.id ?? "";
+}
+function groupsFromEmployees(employees) {
+  const groupsById = /* @__PURE__ */ new Map();
+  for (const employee of employees) {
+    const ref = employee.department;
+    const id = employee.department_id ?? ref?.id ?? "";
+    if (!id || groupsById.has(id)) continue;
+    const name = (ref?.name ?? "").trim() || "\uBBF8\uC9C0\uC815";
+    if (isUnassignedGroup({ id, name })) continue;
+    groupsById.set(id, { id, name, parent_id: ref?.parent_id ?? null });
+  }
+  return Array.from(groupsById.values());
+}
+function mergeEmployeeGroups(groups, employees) {
+  const groupsById = new Map(
+    groups.filter((group) => !isUnassignedGroup(group)).map((group) => [group.id, group])
+  );
+  for (const employee of employees) {
+    const ref = employee.department;
+    const id = employee.department_id ?? ref?.id ?? "";
+    if (!id || groupsById.has(id)) continue;
+    const name = (ref?.name ?? "").trim() || "\uBBF8\uC9C0\uC815";
+    if (isUnassignedGroup({ id, name })) continue;
+    groupsById.set(id, { id, name, parent_id: ref?.parent_id ?? null });
+  }
+  return Array.from(groupsById.values());
+}
+function buildModel(groups, employees, positionRanks) {
+  const visibleGroups = groups.filter((group) => !isUnassignedGroup(group));
+  const groupsById = new Map(visibleGroups.map((group) => [group.id, group]));
+  const employeesByGroupId = /* @__PURE__ */ new Map();
+  for (const employee of employees) {
+    const groupId = employeeGroupId(employee);
+    if (!groupId || !groupsById.has(groupId)) continue;
+    const list = employeesByGroupId.get(groupId) ?? [];
+    list.push(employee);
+    employeesByGroupId.set(groupId, list);
+  }
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const group of visibleGroups) {
+    const parentId = group.parent_id && group.parent_id !== group.id && groupsById.has(group.parent_id) ? group.parent_id : null;
+    const list = childrenByParent.get(parentId) ?? [];
+    list.push(group);
+    childrenByParent.set(parentId, list);
+  }
+  childrenByParent.forEach(
+    (items) => items.sort((a, b) => a.name.localeCompare(b.name, "ko"))
+  );
+  employeesByGroupId.forEach(
+    (items) => items.sort((a, b) => compareMembers(a, b, positionRanks))
+  );
+  return {
+    childrenByParent,
+    employeesByGroupId,
+    visibleRoots: childrenByParent.get(null) ?? []
+  };
+}
+function employeesInGroup(groupId, model) {
+  const result = [...model.employeesByGroupId.get(groupId) ?? []];
+  for (const child of model.childrenByParent.get(groupId) ?? []) {
+    result.push(...employeesInGroup(child.id, model));
+  }
+  return result;
+}
+function groupEmployees(groupId, model, excludedIds) {
+  return (model.employeesByGroupId.get(groupId) ?? []).filter(
+    (employee) => !excludedIds.has(employee.id)
+  );
+}
+function leadershipEmployees(employees) {
+  return employees.filter((employee) => {
+    const title = `${employee.grade ?? ""} ${employee.job_title ?? ""}`;
+    return /회장|대표|CEO|사장/.test(title);
+  }).sort((a, b) => leadershipRank(a) - leadershipRank(b)).slice(0, 3);
+}
+function leadershipRank(employee) {
+  const title = `${employee.grade ?? ""} ${employee.job_title ?? ""}`;
+  if (title.includes("\uD68C\uC7A5")) return 0;
+  if (title.includes("\uB300\uD45C\uC774\uC0AC")) return 1;
+  if (title.includes("\uB300\uD45C")) return 2;
+  if (title.includes("\uC0AC\uC7A5") || title.includes("CEO")) return 3;
+  return 9;
+}
+function buildCanvasLayout(model, employees) {
+  const leadership = leadershipEmployees(employees);
+  const leadershipIds = new Set(leadership.map((employee) => employee.id));
+  const topGroup = model.visibleRoots.length === 1 ? model.visibleRoots[0] : null;
+  const topChildren = topGroup ? model.childrenByParent.get(topGroup.id) ?? [] : [];
+  const hasCompanyRoot = !!topGroup && topChildren.length > 1;
+  const boardRoots = hasCompanyRoot ? topChildren : model.visibleRoots;
+  const rootBlocks = boardRoots.map(
+    (group, index) => buildRootBlock(group, model, leadershipIds, index)
+  );
+  const rootsWidth = Math.max(
+    GROUP_WIDTH,
+    rootBlocks.reduce(
+      (total, block, index) => total + block.width + (index > 0 ? ROOT_GAP : 0),
+      0
+    )
+  );
+  const leaderStackHeight = leadership.length * LEADER_HEIGHT + Math.max(0, leadership.length - 1) * EMPLOYEE_GAP;
+  const hasTopArea = leadership.length > 0 || hasCompanyRoot;
+  const topAreaHeight = (leadership.length > 0 ? leaderStackHeight : 0) + (leadership.length > 0 && hasCompanyRoot ? TOP_GAP : 0) + (hasCompanyRoot ? GROUP_HEIGHT : 0);
+  const rootY = CANVAS_PADDING + (hasTopArea ? topAreaHeight + ROOT_ROW_GAP : 0);
+  const width = rootsWidth + CANVAS_PADDING * 2;
+  const centerX = CANVAS_PADDING + rootsWidth / 2;
+  const placedGroups = [];
+  const placedEmployees = [];
+  const connectors = [];
+  let topAnchor = null;
+  if (leadership.length > 0) {
+    const leaderX = centerX - LEADER_WIDTH / 2;
+    leadership.forEach((employee, index) => {
+      placedEmployees.push({
+        employee,
+        x: leaderX,
+        y: CANVAS_PADDING + index * (LEADER_HEIGHT + EMPLOYEE_GAP),
+        featured: true
+      });
+    });
+    topAnchor = { x: centerX, y: CANVAS_PADDING + leaderStackHeight };
+  }
+  if (hasCompanyRoot && topGroup) {
+    const companyY = CANVAS_PADDING + (leadership.length > 0 ? leaderStackHeight + TOP_GAP : 0);
+    placedGroups.push({
+      group: topGroup,
+      x: centerX - GROUP_WIDTH / 2,
+      y: companyY,
+      width: GROUP_WIDTH,
+      color: BOARD_COLORS[0],
+      depth: 0,
+      totalMembers: employeesInGroup(topGroup.id, model).length
+    });
+    if (topAnchor) {
+      connectors.push({ fromX: topAnchor.x, fromY: topAnchor.y, toX: centerX, toY: companyY });
+    }
+    topAnchor = { x: centerX, y: companyY + GROUP_HEIGHT };
+  }
+  let cursorX = CANVAS_PADDING;
+  let maxBottom = rootY;
+  for (const block of rootBlocks) {
+    placedGroups.push(
+      ...block.groups.map((item) => ({ ...item, x: item.x + cursorX, y: item.y + rootY }))
+    );
+    placedEmployees.push(
+      ...block.employees.map((item) => ({ ...item, x: item.x + cursorX, y: item.y + rootY }))
+    );
+    connectors.push(
+      ...block.connectors.map((item) => ({
+        fromX: item.fromX + cursorX,
+        fromY: item.fromY + rootY,
+        toX: item.toX + cursorX,
+        toY: item.toY + rootY
+      }))
+    );
+    if (topAnchor) {
+      connectors.push({
+        fromX: topAnchor.x,
+        fromY: topAnchor.y,
+        toX: block.topAnchor.x + cursorX,
+        toY: block.topAnchor.y + rootY
+      });
+    }
+    maxBottom = Math.max(maxBottom, rootY + block.height);
+    cursorX += block.width + ROOT_GAP;
+  }
+  return {
+    width,
+    height: maxBottom + CANVAS_PADDING,
+    groups: placedGroups,
+    employees: placedEmployees,
+    connectors
+  };
+}
+function buildRootBlock(group, model, leadershipIds, siblingIndex) {
+  const teams = model.childrenByParent.get(group.id) ?? [];
+  const directEmployees = groupEmployees(group.id, model, leadershipIds);
+  const teamRows = teams.map((team, index) => buildTeamRow(team, model, leadershipIds, index));
+  const employeeColumns = Math.min(2, Math.max(1, directEmployees.length));
+  const employeeRows = directEmployees.length > 0 ? Math.ceil(directEmployees.length / employeeColumns) : 0;
+  const employeeGridWidth = directEmployees.length > 0 ? employeeColumns * EMPLOYEE_WIDTH + Math.max(0, employeeColumns - 1) * EMPLOYEE_GAP : 0;
+  const employeeGridHeight = directEmployees.length > 0 ? employeeRows * EMPLOYEE_HEIGHT + Math.max(0, employeeRows - 1) * EMPLOYEE_GAP : 0;
+  const teamsWidth = teamRows.reduce((max, row) => Math.max(max, TEAM_ROW_INDENT + row.width), 0);
+  const width = Math.max(GROUP_WIDTH, employeeGridWidth, teamsWidth);
+  const color = BOARD_COLORS[siblingIndex % BOARD_COLORS.length];
+  const groups = [
+    {
+      group,
+      x: 0,
+      y: 0,
+      width,
+      color,
+      depth: 0,
+      totalMembers: employeesInGroup(group.id, model).length
+    }
+  ];
+  const employees = [];
+  const connectors = [];
+  let cursorY = GROUP_HEIGHT;
+  if (directEmployees.length > 0) {
+    cursorY += 10;
+    const startX = (width - employeeGridWidth) / 2;
+    directEmployees.forEach((employee, index) => {
+      const column = index % employeeColumns;
+      const row = Math.floor(index / employeeColumns);
+      employees.push({
+        employee,
+        x: startX + column * (EMPLOYEE_WIDTH + EMPLOYEE_GAP),
+        y: cursorY + row * (EMPLOYEE_HEIGHT + EMPLOYEE_GAP)
+      });
+    });
+    cursorY += employeeGridHeight;
+  }
+  if (teamRows.length > 0) {
+    const trunkTopY = cursorY;
+    const dropY = trunkTopY + CHILD_GAP / 2;
+    cursorY += CHILD_GAP;
+    let lastElbowY = dropY;
+    for (const row of teamRows) {
+      const rowY = cursorY;
+      groups.push(
+        ...row.groups.map((item) => ({ ...item, x: item.x + TEAM_ROW_INDENT, y: item.y + rowY }))
+      );
+      employees.push(
+        ...row.employees.map((item) => ({
+          ...item,
+          x: item.x + TEAM_ROW_INDENT,
+          y: item.y + rowY
+        }))
+      );
+      connectors.push(
+        ...row.connectors.map((item) => ({
+          fromX: item.fromX + TEAM_ROW_INDENT,
+          fromY: item.fromY + rowY,
+          toX: item.toX + TEAM_ROW_INDENT,
+          toY: item.toY + rowY
+        }))
+      );
+      const elbowY = rowY + row.boxCenterY;
+      connectors.push({ fromX: TEAM_TRUNK_X, fromY: elbowY, toX: TEAM_ROW_INDENT, toY: elbowY });
+      lastElbowY = elbowY;
+      cursorY += row.height + TEAM_ROW_GAP;
+    }
+    cursorY -= TEAM_ROW_GAP;
+    connectors.push({ fromX: width / 2, fromY: trunkTopY, toX: width / 2, toY: dropY });
+    connectors.push({ fromX: width / 2, fromY: dropY, toX: TEAM_TRUNK_X, toY: dropY });
+    connectors.push({ fromX: TEAM_TRUNK_X, fromY: dropY, toX: TEAM_TRUNK_X, toY: lastElbowY });
+  }
+  return {
+    width,
+    height: cursorY,
+    groups,
+    employees,
+    connectors,
+    topAnchor: { x: width / 2, y: 0 }
+  };
+}
+function buildTeamRow(group, model, leadershipIds, siblingIndex, depth = 1) {
+  const children = model.childrenByParent.get(group.id) ?? [];
+  const members = groupEmployees(group.id, model, leadershipIds);
+  const childBlocks = children.map(
+    (child, index) => buildGroupBlock(child, model, leadershipIds, depth + 1, index)
+  );
+  const labelMinHeight = TEAM_BOX_PAD + group.name.length * TEAM_BOX_CHAR;
+  const memberColumns = Math.min(MEMBER_COLUMNS, Math.max(1, members.length));
+  const memberRowCount = members.length > 0 ? Math.ceil(members.length / memberColumns) : 0;
+  const membersWidth = members.length > 0 ? memberColumns * EMPLOYEE_WIDTH + Math.max(0, memberColumns - 1) * EMPLOYEE_GAP : 0;
+  const membersHeight = memberRowCount > 0 ? memberRowCount * EMPLOYEE_HEIGHT + Math.max(0, memberRowCount - 1) * EMPLOYEE_GAP : 0;
+  const childAreaWidth = childBlocks.reduce((max, block) => Math.max(max, block.width), 0);
+  const contentX = TEAM_BOX_WIDTH + TEAM_MEMBER_GAP;
+  const contentWidth = Math.max(membersWidth, childAreaWidth);
+  const width = contentWidth > 0 ? contentX + contentWidth : TEAM_BOX_WIDTH;
+  const totalMembers = employeesInGroup(group.id, model).length;
+  const color = BOARD_COLORS[(depth + siblingIndex) % BOARD_COLORS.length];
+  const groups = [];
+  const employees = [];
+  const connectors = [];
+  members.forEach((employee, index) => {
+    const column = index % memberColumns;
+    const row = Math.floor(index / memberColumns);
+    employees.push({
+      employee,
+      x: contentX + column * (EMPLOYEE_WIDTH + EMPLOYEE_GAP),
+      y: row * (EMPLOYEE_HEIGHT + EMPLOYEE_GAP)
+    });
+  });
+  let height = Math.max(GROUP_HEIGHT, membersHeight);
+  if (childBlocks.length > 0) {
+    let childY = height + CHILD_GAP;
+    for (const block of childBlocks) {
+      groups.push(
+        ...block.groups.map((item) => ({ ...item, x: item.x + contentX, y: item.y + childY }))
+      );
+      employees.push(
+        ...block.employees.map((item) => ({ ...item, x: item.x + contentX, y: item.y + childY }))
+      );
+      connectors.push(
+        ...block.connectors.map((item) => ({
+          fromX: item.fromX + contentX,
+          fromY: item.fromY + childY,
+          toX: item.toX + contentX,
+          toY: item.toY + childY
+        }))
+      );
+      connectors.push({
+        fromX: TEAM_BOX_WIDTH,
+        fromY: childY + GROUP_HEIGHT / 2,
+        toX: contentX,
+        toY: childY + GROUP_HEIGHT / 2
+      });
+      childY += block.height + TEAM_ROW_GAP;
+    }
+    height = childY - TEAM_ROW_GAP;
+  }
+  height = Math.max(height, labelMinHeight);
+  if (childBlocks.length === 0 && members.length > 0) {
+    const offsetY = Math.max(0, (height - membersHeight) / 2);
+    for (const item of employees) item.y += offsetY;
+  }
+  groups.unshift({
+    group,
+    x: 0,
+    y: 0,
+    width: TEAM_BOX_WIDTH,
+    height,
+    vertical: true,
+    color,
+    depth,
+    totalMembers
+  });
+  return { width, height, groups, employees, connectors, boxCenterY: height / 2 };
+}
+function buildGroupBlock(group, model, leadershipIds, depth, siblingIndex) {
+  const children = model.childrenByParent.get(group.id) ?? [];
+  const directEmployees = groupEmployees(group.id, model, leadershipIds);
+  const childRows = children.map(
+    (child, index) => buildTeamRow(child, model, leadershipIds, index, depth + 1)
+  );
+  const employeeColumns = Math.min(2, Math.max(1, directEmployees.length));
+  const employeeRows = directEmployees.length > 0 ? Math.ceil(directEmployees.length / employeeColumns) : 0;
+  const employeeGridWidth = directEmployees.length > 0 ? employeeColumns * EMPLOYEE_WIDTH + Math.max(0, employeeColumns - 1) * EMPLOYEE_GAP : 0;
+  const employeeGridHeight = directEmployees.length > 0 ? employeeRows * EMPLOYEE_HEIGHT + Math.max(0, employeeRows - 1) * EMPLOYEE_GAP : 0;
+  const rowsWidth = childRows.reduce((max, row) => Math.max(max, TEAM_ROW_INDENT + row.width), 0);
+  const width = Math.max(GROUP_WIDTH, employeeGridWidth, rowsWidth);
+  const color = BOARD_COLORS[(depth + siblingIndex) % BOARD_COLORS.length];
+  const groups = [
+    {
+      group,
+      x: 0,
+      y: 0,
+      width,
+      color,
+      depth,
+      totalMembers: employeesInGroup(group.id, model).length
+    }
+  ];
+  const employees = [];
+  const connectors = [];
+  let cursorY = GROUP_HEIGHT;
+  if (directEmployees.length > 0) {
+    cursorY += 10;
+    const startX = (width - employeeGridWidth) / 2;
+    directEmployees.forEach((employee, index) => {
+      const column = index % employeeColumns;
+      const row = Math.floor(index / employeeColumns);
+      employees.push({
+        employee,
+        x: startX + column * (EMPLOYEE_WIDTH + EMPLOYEE_GAP),
+        y: cursorY + row * (EMPLOYEE_HEIGHT + EMPLOYEE_GAP)
+      });
+    });
+    cursorY += employeeGridHeight;
+  }
+  if (childRows.length > 0) {
+    const trunkTopY = cursorY;
+    const dropY = trunkTopY + CHILD_GAP / 2;
+    cursorY += CHILD_GAP;
+    let lastElbowY = dropY;
+    for (const row of childRows) {
+      const rowY = cursorY;
+      groups.push(
+        ...row.groups.map((item) => ({ ...item, x: item.x + TEAM_ROW_INDENT, y: item.y + rowY }))
+      );
+      employees.push(
+        ...row.employees.map((item) => ({
+          ...item,
+          x: item.x + TEAM_ROW_INDENT,
+          y: item.y + rowY
+        }))
+      );
+      connectors.push(
+        ...row.connectors.map((item) => ({
+          fromX: item.fromX + TEAM_ROW_INDENT,
+          fromY: item.fromY + rowY,
+          toX: item.toX + TEAM_ROW_INDENT,
+          toY: item.toY + rowY
+        }))
+      );
+      const elbowY = rowY + row.boxCenterY;
+      connectors.push({ fromX: TEAM_TRUNK_X, fromY: elbowY, toX: TEAM_ROW_INDENT, toY: elbowY });
+      lastElbowY = elbowY;
+      cursorY += row.height + TEAM_ROW_GAP;
+    }
+    cursorY -= TEAM_ROW_GAP;
+    connectors.push(
+      { fromX: width / 2, fromY: trunkTopY, toX: width / 2, toY: dropY },
+      { fromX: width / 2, fromY: dropY, toX: TEAM_TRUNK_X, toY: dropY },
+      { fromX: TEAM_TRUNK_X, fromY: dropY, toX: TEAM_TRUNK_X, toY: lastElbowY }
+    );
+  }
+  return {
+    width,
+    height: cursorY,
+    groups,
+    employees,
+    connectors,
+    topAnchor: { x: width / 2, y: 0 }
+  };
+}
+function connectorPath(connector) {
+  const dx = Math.abs(connector.toX - connector.fromX);
+  const dy = Math.abs(connector.toY - connector.fromY);
+  if (dx > dy) {
+    const midX = connector.fromX + (connector.toX - connector.fromX) / 2;
+    return [
+      `M ${connector.fromX} ${connector.fromY}`,
+      `H ${midX}`,
+      `V ${connector.toY}`,
+      `H ${connector.toX}`
+    ].join(" ");
+  }
+  const midY = connector.fromY + (connector.toY - connector.fromY) / 2;
+  return [
+    `M ${connector.fromX} ${connector.fromY}`,
+    `V ${midY}`,
+    `H ${connector.toX}`,
+    `V ${connector.toY}`
+  ].join(" ");
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function applyZoom(current, nextScale, focal) {
+  const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
+  return {
+    scale,
+    x: focal.x - (focal.x - current.x) / current.scale * scale,
+    y: focal.y - (focal.y - current.y) / current.scale * scale
+  };
+}
+function EmployeeAvatar({ employee, featured }) {
+  const size = featured ? 40 : 32;
+  if (employee.image) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: { flexShrink: 0, display: "inline-flex" },
+        onDragStart: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          ImageLightbox,
+          {
+            src: employee.image,
+            alt: employee.name,
+            thumbStyle: {
+              width: size,
+              height: size,
+              borderRadius: "var(--wp-radius-xs)",
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: size,
+        height: size,
+        flexShrink: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "var(--wp-radius-xs)",
+        background: "var(--wp-surface-sunken)",
+        color: "var(--wp-text-muted)"
+      },
+      children: /* @__PURE__ */ jsx(Icon, { name: "user", size: featured ? 20 : 16 })
+    }
+  );
+}
+var SELECTED_RING = "0 0 0 2px var(--wp-surface-card), 0 0 0 4px var(--wp-accent)";
+function CanvasGroupNode({
+  item,
+  selected,
+  onSelect
+}) {
+  const height = item.height ?? GROUP_HEIGHT;
+  if (item.vertical) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-org-card": true,
+        type: "button",
+        className: "erp-ocb-group",
+        style: {
+          position: "absolute",
+          left: item.x,
+          top: item.y,
+          width: item.width,
+          height,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 6,
+          overflow: "hidden",
+          borderRadius: "var(--wp-radius-xs)",
+          border: `1px solid ${item.color}`,
+          padding: "8px 4px",
+          color: "#fff",
+          backgroundColor: item.color,
+          boxShadow: selected ? SELECTED_RING : "var(--wp-shadow-xs)",
+          cursor: "pointer"
+        },
+        onClick: () => onSelect(item.group.id),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "building-2", size: 16, style: { flexShrink: 0 } }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                minHeight: 0,
+                flex: 1,
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                fontSize: 14,
+                fontWeight: 600,
+                writingMode: "vertical-rl",
+                textOrientation: "upright"
+              },
+              children: item.group.name
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, fontSize: 10, fontWeight: 500, lineHeight: 1, opacity: 0.9 }, children: item.totalMembers })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-org-card": true,
+      type: "button",
+      className: "erp-ocb-group",
+      style: {
+        position: "absolute",
+        left: item.x,
+        top: item.y,
+        width: item.width,
+        height,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderRadius: "var(--wp-radius-xs)",
+        border: `1px solid ${item.color}`,
+        padding: "0 12px",
+        textAlign: "left",
+        color: "#fff",
+        backgroundColor: item.color,
+        boxShadow: selected ? SELECTED_RING : "var(--wp-shadow-xs)",
+        cursor: "pointer"
+      },
+      onClick: () => onSelect(item.group.id),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "building-2", size: 16, style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              minWidth: 0,
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: 14,
+              fontWeight: 600
+            },
+            children: [
+              item.group.name,
+              "(",
+              item.totalMembers,
+              ")"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CanvasEmployeeNode({
+  item,
+  onOpenCard
+}) {
+  const width = item.featured ? LEADER_WIDTH : EMPLOYEE_WIDTH;
+  const height = item.featured ? LEADER_HEIGHT : EMPLOYEE_HEIGHT;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-org-card": true,
+      type: "button",
+      className: "erp-ocb-member",
+      style: {
+        position: "absolute",
+        left: item.x,
+        top: item.y,
+        width,
+        height,
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderRadius: "var(--wp-radius-xs)",
+        border: "var(--wp-border-w) solid var(--wp-border-default)",
+        background: "var(--wp-surface-card)",
+        padding: "0 8px",
+        textAlign: "left",
+        boxShadow: "var(--wp-shadow-xs)",
+        cursor: "pointer"
+      },
+      onClick: () => onOpenCard(item.employee),
+      children: [
+        /* @__PURE__ */ jsx(EmployeeAvatar, { employee: item.employee, featured: !!item.featured }),
+        /* @__PURE__ */ jsxs("span", { style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "block",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontWeight: 600,
+                fontSize: item.featured ? 14 : 11,
+                color: "var(--wp-text-default)"
+              },
+              children: item.employee.name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "block",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontSize: item.featured ? 12 : 10,
+                color: "var(--wp-text-muted)"
+              },
+              children: positionText(item.employee)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function OrganizationCanvas({
+  model,
+  employees,
+  selectedGroupId,
+  onSelect,
+  onOpenCard,
+  height
+}) {
+  const viewportRef = useRef(null);
+  const dragRef = useRef(null);
+  const [view, setView] = useState(DEFAULT_VIEW);
+  const [dragging, setDragging] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const layout = useMemo(() => buildCanvasLayout(model, employees), [model, employees]);
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === viewportRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  useEffect(() => {
+    setView(DEFAULT_VIEW);
+  }, [layout.width, layout.height]);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      const rect = viewport.getBoundingClientRect();
+      const focal = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      setView(
+        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal)
+      );
+    };
+    viewport.addEventListener("wheel", onWheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", onWheel);
+  }, []);
+  const viewportCenter = useCallback(() => {
+    const rect = viewportRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }, []);
+  const zoomStep = (delta) => {
+    const focal = viewportCenter();
+    setView((current) => applyZoom(current, current.scale + delta, focal));
+  };
+  const handlePointerDown = (event) => {
+    const target = event.target;
+    if (target.closest("[data-org-card]")) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: view.x,
+      originY: view.y
+    };
+    setDragging(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setView((current) => ({
+      ...current,
+      x: drag.originX + event.clientX - drag.startX,
+      y: drag.originY + event.clientY - drag.startY
+    }));
+  };
+  const handlePointerUp = (event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const toggleFullscreen = async () => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    try {
+      if (document.fullscreenElement === viewport) {
+        await document.exitFullscreen();
+        return;
+      }
+      await viewport.requestFullscreen();
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: viewportRef,
+      style: {
+        position: "relative",
+        height,
+        minHeight: 620,
+        overflow: "hidden",
+        borderTop: "var(--wp-border-w) solid var(--wp-border-default)",
+        background: "var(--wp-surface-page)",
+        userSelect: "none",
+        cursor: dragging ? "grabbing" : "grab",
+        touchAction: "none"
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-org-card": true,
+            style: {
+              position: "absolute",
+              right: 12,
+              top: 12,
+              zIndex: 30,
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              borderRadius: "var(--wp-radius-md)",
+              border: "var(--wp-border-w) solid var(--wp-border-default)",
+              background: "var(--wp-surface-card)",
+              padding: 4,
+              boxShadow: "var(--wp-shadow-sm)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconButton, { icon: "minus", label: "\uCD95\uC18C", size: "sm", onClick: () => zoomStep(-0.1) }),
+              /* @__PURE__ */ jsxs("div", { style: { width: 48, textAlign: "center", fontSize: 12, fontWeight: 500 }, children: [
+                Math.round(view.scale * 100),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(IconButton, { icon: "plus", label: "\uD655\uB300", size: "sm", onClick: () => zoomStep(0.1) }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: isFullscreen ? "minimize" : "maximize",
+                  label: isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uD574\uC81C" : "\uC804\uCCB4\uD654\uBA74",
+                  size: "sm",
+                  onClick: () => void toggleFullscreen()
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: layout.width,
+              height: layout.height,
+              transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+              transformOrigin: "0 0"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
+                  width: layout.width,
+                  height: layout.height,
+                  children: layout.connectors.map((connector, index) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: connectorPath(connector),
+                      fill: "none",
+                      stroke: "var(--wp-border-default)",
+                      strokeWidth: 2
+                    },
+                    index
+                  ))
+                }
+              ),
+              layout.groups.map((item) => /* @__PURE__ */ jsx(
+                CanvasGroupNode,
+                {
+                  item,
+                  selected: selectedGroupId === item.group.id,
+                  onSelect
+                },
+                item.group.id
+              )),
+              layout.employees.map((item) => /* @__PURE__ */ jsx(
+                CanvasEmployeeNode,
+                {
+                  item,
+                  onOpenCard
+                },
+                `${item.featured ? "leader" : "employee"}-${item.employee.id}`
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function OrgChartBoardImpl({
+  onMemberClick,
+  height = "72vh",
+  employeesEndpoint = "/employees",
+  departmentsEndpoint = "/departments?include=paths",
+  positionsEndpoint = "/job-positions"
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const [groups, setGroups] = useState([]);
+  const [employees, setEmployees] = useState([]);
+  const [positions, setPositions] = useState([]);
+  const [state, setState] = useState("idle");
+  const [offline, setOffline] = useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState("");
+  const load = useCallback(async () => {
+    setState("loading");
+    setOffline(false);
+    try {
+      const [nextEmployees, fetchedGroups, nextPositions] = await Promise.all([
+        fetchAllPages(api, employeesEndpoint, pickEmployees),
+        // 부서 조회가 죽어도 조직도는 떠야 한다 — 사원 데이터에서 합성한다.
+        fetchAllPages(api, departmentsEndpoint, pickGroups).catch(
+          () => []
+        ),
+        // 직위 마스터는 정렬 보조라 못 불러와도 조직도는 떠야 한다.
+        fetchAllPages(api, positionsEndpoint, pickPositions).catch(
+          () => []
+        )
+      ]);
+      let nextGroups = fetchedGroups.length > 0 ? fetchedGroups : groupsFromEmployees(nextEmployees);
+      nextGroups = mergeEmployeeGroups(nextGroups, nextEmployees);
+      const model2 = buildModel(nextGroups, nextEmployees, jobPositionRankMap(nextPositions));
+      const firstGroupId = model2.visibleRoots[0]?.id ?? (nextEmployees[0] ? employeeGroupId(nextEmployees[0]) : "");
+      setEmployees(nextEmployees);
+      setGroups(nextGroups);
+      setPositions(nextPositions);
+      setSelectedGroupId(firstGroupId);
+      setState("ready");
+    } catch (error) {
+      setOffline(error?.status === 503);
+      setState("error");
+    }
+  }, []);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const model = useMemo(
+    () => buildModel(groups, employees, jobPositionRankMap(positions)),
+    [groups, employees, positions]
+  );
+  const openCard = useCallback(
+    (employee) => {
+      onMemberClick?.(employee);
+    },
+    [onMemberClick]
+  );
+  let content;
+  if (state === "idle" || state === "loading") {
+    content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: { padding: "48px 0", textAlign: "center", color: "var(--wp-text-muted)" },
+        children: "\uC870\uC9C1\uB3C4 \uC815\uBCF4\uB97C \uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4..."
+      }
+    );
+  } else if (state === "error") {
+    content = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "wp-col",
+        style: { alignItems: "center", gap: "var(--wp-space-3)", padding: "48px 0" },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-muted)" }, children: offline ? "\uBC31\uC5D4\uB4DC\uAC00 \uC5F0\uACB0\uB418\uC9C0 \uC54A\uC544 \uC870\uC9C1\uB3C4\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." : "\uC870\uC9C1\uB3C4 \uC815\uBCF4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4." }),
+          offline ? null : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void load(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })
+        ]
+      }
+    );
+  } else if (model.visibleRoots.length === 0) {
+    content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          minHeight: 288,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--wp-text-muted)"
+        },
+        children: "\uD45C\uC2DC\uD560 \uC870\uC9C1\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ jsx(
+      OrganizationCanvas,
+      {
+        model,
+        employees,
+        selectedGroupId,
+        onSelect: setSelectedGroupId,
+        onOpenCard: openCard,
+        height
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: "var(--wp-border-w) solid var(--wp-border-default)",
+        borderRadius: "var(--wp-radius-card)",
+        background: "var(--wp-surface-card)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: OCB_CSS }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "wp-row",
+            style: {
+              alignItems: "center",
+              justifyContent: "space-between",
+              flexWrap: "wrap",
+              gap: "var(--wp-space-2)",
+              padding: "var(--wp-space-3) var(--wp-space-4)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "wp-label", children: "\uC870\uC9C1\uB3C4" }),
+              /* @__PURE__ */ jsxs("span", { className: "wp-row", style: { alignItems: "center", gap: "var(--wp-space-2)" }, children: [
+                state === "ready" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Badge, { children: [
+                    model.visibleRoots.length,
+                    "\uAC1C \uB8E8\uD2B8"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Badge, { children: [
+                    employees.length,
+                    "\uBA85"
+                  ] })
+                ] }) : null,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "secondary",
+                    icon: "refresh-cw",
+                    disabled: state === "loading",
+                    onClick: () => void load(),
+                    children: "\uC0C8\uB85C\uACE0\uCE68"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        content
+      ]
+    }
+  );
+}
+var OrgChartBoard = boxed(OrgChartBoardImpl, "OrgChartBoard");
+
+export { OrgChartBoard };