@wipco/sdui 0.27.0 → 0.29.0

package/dist/chunk-WLQ7PLHB.js

@@ -0,0 +1,340 @@
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Icon, Badge, Checkbox, Select, Button } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useRef, useEffect, useMemo, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var OPERATIONS = [
+  { key: "read", label: "\uC870\uD68C" },
+  { key: "create", label: "\uC0DD\uC131" },
+  { key: "update", label: "\uC218\uC815" },
+  { key: "delete", label: "\uC0AD\uC81C" }
+];
+var SCOPE_OPTIONS = [
+  { value: "team", label: "\uD300" },
+  { value: "headquarter", label: "\uBCF8\uBD80" },
+  { value: "all", label: "\uC804\uCCB4" }
+];
+var CATEGORY_LABELS = {
+  fi: "\uC7AC\uBB34",
+  asset: "\uC790\uC0B0",
+  hr: "\uC778\uC0AC",
+  core: "\uACF5\uD1B5",
+  rbac: "\uAD8C\uD55C"
+};
+var CATEGORY_ORDER = ["fi", "asset", "hr", "core", "rbac"];
+var entityOf = (code) => {
+  const i = code.lastIndexOf(".");
+  return i > 0 ? code.slice(0, i) : code;
+};
+var operationOf = (code) => {
+  const i = code.lastIndexOf(".");
+  const op = i > 0 ? code.slice(i + 1) : "";
+  return OPERATIONS.some((o) => o.key === op) ? op : null;
+};
+function groupCatalog(catalog) {
+  const categories = /* @__PURE__ */ new Map();
+  for (const entry of catalog) {
+    if (!entry || typeof entry.code !== "string") continue;
+    const category = entry.category?.trim() || "\uAE30\uD0C0";
+    const entity = entityOf(entry.code);
+    const byEntity = categories.get(category) ?? /* @__PURE__ */ new Map();
+    categories.set(category, byEntity);
+    const row = byEntity.get(entity) ?? { entity, label: "", cells: {}, extras: [] };
+    byEntity.set(entity, row);
+    const op = operationOf(entry.code);
+    if (op) {
+      row.cells[op] = entry;
+      if (!row.label) row.label = entry.name.replace(/\s*(조회|생성|수정|삭제)\s*$/, "") || entity;
+    } else {
+      row.extras.push(entry);
+      if (!row.label) row.label = entry.name;
+    }
+  }
+  const order = (c) => {
+    const i = CATEGORY_ORDER.indexOf(c);
+    return i < 0 ? CATEGORY_ORDER.length : i;
+  };
+  return [...categories.entries()].sort((a, b) => order(a[0]) - order(b[0]) || a[0].localeCompare(b[0])).map(([category, byEntity]) => ({
+    category,
+    label: CATEGORY_LABELS[category] ?? category,
+    rows: [...byEntity.values()].sort((a, b) => a.entity.localeCompare(b.entity))
+  }));
+}
+function PermissionMatrixEditorImpl({
+  permissions,
+  value,
+  onChange,
+  sourceEndpoint,
+  disabled = false
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const seededFor = useRef(null);
+  useEffect(() => {
+    if (!sourceEndpoint || seededFor.current === sourceEndpoint) return;
+    seededFor.current = sourceEndpoint;
+    api(sourceEndpoint, { method: "GET" }).then((response) => {
+      if (seededFor.current !== sourceEndpoint) return;
+      const body = response;
+      const rows = Array.isArray(body?.permissions) ? body.permissions : [];
+      onChangeRef.current?.(
+        rows.flatMap((row) => {
+          if (typeof row !== "object" || row === null) return [];
+          const { code, scope } = row;
+          if (typeof code !== "string" || !code) return [];
+          return [{ code, scope: typeof scope === "string" ? scope : "all" }];
+        })
+      );
+    }).catch(() => {
+    });
+  }, [sourceEndpoint]);
+  const grants = useMemo(() => Array.isArray(value) ? value : [], [value]);
+  const catalog = useMemo(
+    () => Array.isArray(permissions) ? permissions : [],
+    [permissions]
+  );
+  const groups = useMemo(() => groupCatalog(catalog), [catalog]);
+  const granted = useMemo(() => new Set(grants.map((g) => g.code)), [grants]);
+  const scopeOf = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const g of grants) {
+      const e = entityOf(g.code);
+      if (!map.has(e) && g.scope) map.set(e, g.scope);
+    }
+    return map;
+  }, [grants]);
+  const [closed, setClosed] = useState(/* @__PURE__ */ new Set());
+  const toggleCategory = (c) => setClosed((prev) => {
+    const next = new Set(prev);
+    if (next.has(c)) next.delete(c);
+    else next.add(c);
+    return next;
+  });
+  const emit = (nextGranted, nextScopes) => {
+    onChange?.(
+      [...nextGranted].sort().map((code) => ({
+        code,
+        scope: nextScopes.get(entityOf(code)) ?? "all"
+      }))
+    );
+  };
+  const toggleCode = (code, on) => {
+    const next = new Set(granted);
+    if (on) next.add(code);
+    else next.delete(code);
+    emit(next, scopeOf);
+  };
+  const setEntityScope = (entity, scope) => {
+    const next = new Map(scopeOf);
+    next.set(entity, scope);
+    emit(granted, next);
+  };
+  const toggleRow = (row, on) => {
+    const next = new Set(granted);
+    for (const op of OPERATIONS) {
+      const cell = row.cells[op.key];
+      if (!cell) continue;
+      if (on) next.add(cell.code);
+      else next.delete(cell.code);
+    }
+    for (const extra of row.extras) {
+      if (on) next.add(extra.code);
+      else next.delete(extra.code);
+    }
+    emit(next, scopeOf);
+  };
+  if (catalog.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          border: "var(--wp-border-w) dashed var(--wp-border-default)",
+          borderRadius: "var(--wp-radius-lg)",
+          padding: "var(--wp-space-4)",
+          textAlign: "center",
+          color: "var(--wp-text-muted)"
+        },
+        children: "\uAD8C\uD55C \uCE74\uD0C8\uB85C\uADF8\uAC00 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uD398\uC774\uC9C0\uC758 data \uC120\uC5B8(/permissions?limit=1000)\uC744 \uD655\uC778\uD558\uC138\uC694."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+    /* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
+      "\uAD8C\uD55C ",
+      catalog.length,
+      "\uC885 \uC911 ",
+      granted.size,
+      "\uAC1C \uBD80\uC5EC\uB428 \xB7 \uBC94\uC704\uB294 \uC5D4\uD2F0\uD2F0 \uB2E8\uC704\uB85C \uC801\uC6A9\uB429\uB2C8\uB2E4 (\uD300 < \uBCF8\uBD80 < \uC804\uCCB4)"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "relative",
+          border: "var(--wp-border-w) solid var(--wp-border-default)",
+          borderRadius: "var(--wp-radius-lg)",
+          overflowY: "auto",
+          maxHeight: "min(46vh, 400px)",
+          minHeight: 160
+        },
+        children: groups.map((group) => {
+          const total = group.rows.reduce(
+            (a, r) => a + Object.keys(r.cells).length + r.extras.length,
+            0
+          );
+          const on = group.rows.reduce(
+            (a, r) => a + OPERATIONS.filter((o) => r.cells[o.key] && granted.has(r.cells[o.key].code)).length + r.extras.filter((x) => granted.has(x.code)).length,
+            0
+          );
+          const isClosed = closed.has(group.category);
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "wp-row",
+                onClick: () => toggleCategory(group.category),
+                style: {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 1,
+                  width: "100%",
+                  alignItems: "center",
+                  padding: "var(--wp-space-2) var(--wp-space-3)",
+                  background: "var(--wp-surface-sunken)",
+                  border: "none",
+                  borderTop: "var(--wp-border-w) solid var(--wp-border-default)",
+                  cursor: "pointer",
+                  textAlign: "left"
+                },
+                "aria-expanded": !isClosed,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: isClosed ? "chevron-right" : "chevron-down", size: 14 }),
+                  /* @__PURE__ */ jsx("span", { className: "wp-label", style: { flex: 1 }, children: group.label }),
+                  /* @__PURE__ */ jsxs(Badge, { tone: on > 0 ? "brand" : "neutral", children: [
+                    on,
+                    "/",
+                    total
+                  ] })
+                ]
+              }
+            ),
+            isClosed ? null : /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: 0 }, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "wp-row wp-caption",
+                  style: {
+                    alignItems: "center",
+                    padding: "var(--wp-space-1) var(--wp-space-3)",
+                    borderTop: "var(--wp-border-w) solid var(--wp-divider)",
+                    color: "var(--wp-text-muted)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { flex: 1.6 }, children: "\uC5D4\uD2F0\uD2F0" }),
+                    OPERATIONS.map((op) => /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 52, textAlign: "center" }, children: op.label }, op.key)),
+                    /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 96, textAlign: "center" }, children: "\uBC94\uC704" }),
+                    /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 60 } })
+                  ]
+                }
+              ),
+              group.rows.map((row) => {
+                const rowCodes = [
+                  ...OPERATIONS.flatMap(
+                    (o) => row.cells[o.key] ? [row.cells[o.key].code] : []
+                  ),
+                  ...row.extras.map((x) => x.code)
+                ];
+                const allOn = rowCodes.length > 0 && rowCodes.every((c) => granted.has(c));
+                const anyOn = rowCodes.some((c) => granted.has(c));
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "wp-row",
+                    style: {
+                      alignItems: "center",
+                      padding: "var(--wp-space-1) var(--wp-space-3)",
+                      borderTop: "var(--wp-border-w) solid var(--wp-divider)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "wp-body-sm", style: { flex: 1.6, minWidth: 0 }, children: [
+                        row.label || row.entity,
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "wp-caption",
+                            style: {
+                              marginLeft: "var(--wp-space-2)",
+                              color: "var(--wp-text-muted)"
+                            },
+                            children: row.entity
+                          }
+                        )
+                      ] }),
+                      OPERATIONS.map((op) => {
+                        const cell = row.cells[op.key];
+                        return /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              flex: "none",
+                              width: 52,
+                              display: "inline-flex",
+                              justifyContent: "center"
+                            },
+                            children: cell ? /* @__PURE__ */ jsx(
+                              Checkbox,
+                              {
+                                "aria-label": `${row.label || row.entity} ${op.label}`,
+                                checked: granted.has(cell.code),
+                                disabled,
+                                onChange: (event) => toggleCode(cell.code, event.target.checked)
+                              }
+                            ) : /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: "\u2013" })
+                          },
+                          op.key
+                        );
+                      }),
+                      /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 96 }, children: /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          "aria-label": `${row.label || row.entity} \uBC94\uC704`,
+                          value: scopeOf.get(row.entity) ?? "all",
+                          options: SCOPE_OPTIONS,
+                          disabled: disabled || !anyOn,
+                          onChange: (event) => setEntityScope(row.entity, event.target.value)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 60, textAlign: "right" }, children: /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          size: "sm",
+                          variant: "ghost",
+                          disabled,
+                          onClick: () => toggleRow(row, !allOn),
+                          children: allOn ? "\uD574\uC81C" : "\uC804\uCCB4"
+                        }
+                      ) })
+                    ]
+                  },
+                  row.entity
+                );
+              })
+            ] })
+          ] }, group.category);
+        })
+      }
+    )
+  ] });
+}
+var PermissionMatrixEditor = boxed(
+  PermissionMatrixEditorImpl,
+  "PermissionMatrixEditor"
+);
+
+export { PermissionMatrixEditor };

package/dist/chunk-XSCFMCLH.js

@@ -0,0 +1,333 @@
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var deptOf = (row) => row.department_name ?? row.department?.name ?? null;
+function parseMembers(json) {
+  if (typeof json !== "object" || json === null) return [];
+  const obj = json;
+  const rows = Array.isArray(obj.employees) ? obj.employees : Array.isArray(obj.data) ? obj.data : [];
+  return rows.filter(
+    (row) => typeof row === "object" && row !== null && typeof row.id === "string"
+  );
+}
+var messageOf = (err, fallback) => err instanceof Error && err.message ? err.message : fallback;
+var searchTextOf = (row) => [row.name, row.employee_number, deptOf(row), row.job_title, row.work_email].filter(Boolean).join(" ").toLowerCase();
+var boxStyle = {
+  border: "var(--wp-border-w) solid var(--wp-border-default)",
+  borderRadius: "var(--wp-radius-lg)",
+  overflow: "hidden"
+};
+function RoleMemberPickerImpl({
+  catalogEndpoint = "/employees",
+  employees,
+  sourceEndpoint,
+  disabled = false
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const base = useMemo(() => sourceEndpoint ? sourceEndpoint.split("?")[0] : null, [sourceEndpoint]);
+  const [members, setMembers] = useState(null);
+  const [membersLoading, setMembersLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [adding, setAdding] = useState(false);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [removingId, setRemovingId] = useState(null);
+  const requestSeq = useRef(0);
+  const fetchMembers = useCallback((endpoint) => {
+    const seq = ++requestSeq.current;
+    setMembersLoading(true);
+    api(endpoint, { method: "GET" }).then((response) => {
+      if (requestSeq.current !== seq) return;
+      setMembers(parseMembers(response));
+    }).catch((err) => {
+      if (requestSeq.current !== seq) return;
+      setMembers((prev) => prev ?? []);
+      if (!(err?.status === 503)) {
+        setError(messageOf(err, "\uC5ED\uD560\uC5D0 \uBD80\uC5EC\uB41C \uC0AC\uC6A9\uC790\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."));
+      }
+    }).finally(() => {
+      if (requestSeq.current === seq) setMembersLoading(false);
+    });
+  }, []);
+  const seededFor = useRef(null);
+  useEffect(() => {
+    if (!sourceEndpoint || seededFor.current === sourceEndpoint) return;
+    seededFor.current = sourceEndpoint;
+    setAdding(false);
+    setSearch("");
+    setSelected([]);
+    setError(null);
+    fetchMembers(sourceEndpoint);
+  }, [sourceEndpoint, fetchMembers]);
+  const givenCatalog = useMemo(
+    () => Array.isArray(employees) ? employees.filter((row) => row && typeof row.id === "string") : [],
+    [employees]
+  );
+  const [fetchedCatalog, setFetchedCatalog] = useState(null);
+  useEffect(() => {
+    if (givenCatalog.length > 0 || fetchedCatalog !== null) return;
+    let alive = true;
+    (async () => {
+      const rows = [];
+      for (let page = 0; page < 10; page += 1) {
+        const response = await api(`${catalogEndpoint}?limit=500&offset=${rows.length}`, {
+          method: "GET"
+        });
+        const batch = Array.isArray(response?.data) ? response.data : [];
+        rows.push(...batch.filter((row) => row && typeof row.id === "string"));
+        const total = typeof response?.total === "number" ? response.total : rows.length;
+        if (batch.length === 0 || rows.length >= total) break;
+      }
+      if (alive) setFetchedCatalog(rows);
+    })().catch(() => {
+      if (alive) setFetchedCatalog([]);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [givenCatalog, fetchedCatalog, api, catalogEndpoint]);
+  const catalog = givenCatalog.length > 0 ? givenCatalog : fetchedCatalog ?? [];
+  const catalogLoading = givenCatalog.length === 0 && fetchedCatalog === null;
+  const memberIds = useMemo(() => new Set((members ?? []).map((row) => row.id)), [members]);
+  const candidates = useMemo(() => {
+    const available = catalog.filter((row) => !memberIds.has(row.id));
+    const keyword = search.trim().toLowerCase();
+    if (!keyword) return available;
+    return available.filter((row) => searchTextOf(row).includes(keyword));
+  }, [catalog, memberIds, search]);
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
+  const toggleSelected = (id, on) => {
+    setSelected(
+      (current) => on ? current.includes(id) ? current : [...current, id] : current.filter((item) => item !== id)
+    );
+  };
+  const addSelected = () => {
+    if (!base || selected.length === 0 || saving) return;
+    setSaving(true);
+    setError(null);
+    api(base, { method: "POST", body: { employees: selected } }).then((response) => {
+      setMembers(parseMembers(response));
+      setSelected([]);
+      setSearch("");
+      setAdding(false);
+    }).catch((err) => setError(messageOf(err, "\uC5ED\uD560 \uBD80\uC5EC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."))).finally(() => setSaving(false));
+  };
+  const removeMember = (id) => {
+    if (!base || removingId) return;
+    setRemovingId(id);
+    setError(null);
+    api(`${base}/${encodeURIComponent(id)}`, { method: "DELETE" }).then((response) => setMembers(parseMembers(response))).catch((err) => setError(messageOf(err, "\uC5ED\uD560 \uD574\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."))).finally(() => setRemovingId(null));
+  };
+  const memberRows = members ?? [];
+  const busy = disabled || membersLoading;
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", onClose: () => setError(null), children: error }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "center", gap: "var(--wp-space-2)" }, children: [
+      /* @__PURE__ */ jsxs(Badge, { tone: memberRows.length > 0 ? "brand" : "neutral", children: [
+        memberRows.length,
+        "\uBA85"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "wp-body-sm", style: { flex: 1 }, children: [
+        "\uC5D0\uAC8C \uBD80\uC5EC\uB428",
+        membersLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uBD88\uB7EC\uC624\uB294 \uC911", style: { marginLeft: "var(--wp-space-2)" } }) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "secondary",
+          icon: "refresh-ccw",
+          disabled: !sourceEndpoint || membersLoading,
+          onClick: () => sourceEndpoint && fetchMembers(sourceEndpoint),
+          children: "\uC0C8\uB85C\uACE0\uCE68"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "primary",
+          icon: "user-plus",
+          disabled: busy || !base,
+          onClick: () => {
+            setSearch("");
+            setSelected([]);
+            setAdding((current) => !current);
+          },
+          children: "\uC0AC\uC6A9\uC790 \uCD94\uAC00"
+        }
+      )
+    ] }),
+    adding ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "wp-col",
+        style: {
+          gap: "var(--wp-space-2)",
+          border: "var(--wp-border-w) solid var(--wp-border-brand)",
+          borderRadius: "var(--wp-radius-lg)",
+          padding: "var(--wp-space-3)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              icon: "search",
+              size: "sm",
+              value: search,
+              placeholder: "\uC774\uB984, \uC0AC\uBC88, \uBD80\uC11C, \uC9C1\uCC45, \uC774\uBA54\uC77C \uAC80\uC0C9",
+              onChange: (event) => setSearch(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { ...boxStyle, maxHeight: 280, overflowY: "auto" }, children: catalogLoading ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { justifyContent: "center", padding: "var(--wp-space-4)" }, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uC9C1\uC6D0\uC744 \uBD88\uB7EC\uC624\uB294 \uC911" }) }) : candidates.length === 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "wp-body-sm",
+              style: { padding: "var(--wp-space-4)", textAlign: "center", color: "var(--wp-text-muted)" },
+              children: "\uCD94\uAC00\uD560 \uC218 \uC788\uB294 \uC0AC\uC6A9\uC790\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+            }
+          ) : candidates.map((row, index) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "wp-row",
+              style: {
+                alignItems: "center",
+                gap: "var(--wp-space-2)",
+                padding: "var(--wp-space-2) var(--wp-space-3)",
+                borderTop: index > 0 ? "var(--wp-border-w) solid var(--wp-divider)" : void 0,
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selectedSet.has(row.id),
+                    disabled: busy || saving,
+                    onChange: (event) => toggleSelected(row.id, event.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "wp-col", style: { gap: 0, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxs("span", { className: "wp-body-sm", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    row.name || row.id,
+                    row.job_title ? ` \xB7 ${row.job_title}` : ""
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    deptOf(row) || "-",
+                    row.employee_number ? ` \xB7 ${row.employee_number}` : "",
+                    row.work_email ? ` \xB7 ${row.work_email}` : ""
+                  ] })
+                ] })
+              ]
+            },
+            row.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "center", gap: "var(--wp-space-2)" }, children: [
+            /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { flex: 1, color: "var(--wp-text-muted)" }, children: [
+              selected.length,
+              "\uBA85 \uC120\uD0DD\uB428"
+            ] }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: saving, onClick: () => setAdding(false), children: "\uCDE8\uC18C" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "primary",
+                icon: "user-plus",
+                loading: saving,
+                disabled: busy || selected.length === 0,
+                onClick: addSelected,
+                children: "\uCD94\uAC00"
+              }
+            )
+          ] })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { style: boxStyle, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "wp-row wp-caption",
+          style: {
+            alignItems: "center",
+            padding: "var(--wp-space-1) var(--wp-space-3)",
+            background: "var(--wp-surface-sunken)",
+            color: "var(--wp-text-muted)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { flex: 1.4 }, children: "\uC0AC\uC6A9\uC790" }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "\uBD80\uC11C" }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1.4 }, children: "\uC774\uBA54\uC77C" }),
+            /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 64 } })
+          ]
+        }
+      ),
+      memberRows.length === 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "wp-body-sm",
+          style: {
+            padding: "var(--wp-space-5) var(--wp-space-3)",
+            textAlign: "center",
+            color: "var(--wp-text-muted)",
+            borderTop: "var(--wp-border-w) solid var(--wp-divider)"
+          },
+          children: membersLoading ? "\uBD88\uB7EC\uC624\uB294 \uC911..." : "\uC774 \uC5ED\uD560\uC744 \uBD80\uC5EC\uBC1B\uC740 \uC0AC\uC6A9\uC790\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+        }
+      ) : memberRows.map((row) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "wp-row",
+          style: {
+            alignItems: "center",
+            padding: "var(--wp-space-2) var(--wp-space-3)",
+            borderTop: "var(--wp-border-w) solid var(--wp-divider)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "wp-col", style: { flex: 1.4, gap: 0, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("span", { className: "wp-body-sm", children: row.name || row.id }),
+              /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: [
+                row.employee_number || "-",
+                row.job_title ? ` \xB7 ${row.job_title}` : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { flex: 1, minWidth: 0, color: "var(--wp-text-muted)" }, children: deptOf(row) || "-" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "wp-body-sm",
+                style: { flex: 1.4, minWidth: 0, color: "var(--wp-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: row.work_email || "-"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 64, textAlign: "right" }, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "ghost",
+                icon: "trash-2",
+                loading: removingId === row.id,
+                disabled: busy || removingId !== null && removingId !== row.id,
+                onClick: () => removeMember(row.id),
+                children: "\uD574\uC81C"
+              }
+            ) })
+          ]
+        },
+        row.id
+      ))
+    ] })
+  ] });
+}
+var RoleMemberPicker = boxed(RoleMemberPickerImpl, "RoleMemberPicker");
+
+export { RoleMemberPicker };