@wipco/sdui 0.28.0 → 0.30.0

package/dist/chunk-WXZDYDXG.js

@@ -0,0 +1,333 @@
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.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 };

package/dist/index.js

@@ -6,11 +6,11 @@ import { ImageViewer } from './chunk-THEP3VWY.js';
 export { ImageViewer } from './chunk-THEP3VWY.js';
 import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-BD75U73S.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-BD75U73S.js';
-import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-DVOPZFQS.js';
-export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-DVOPZFQS.js';
 import { HoistedStyle, DateRangePicker, DatePicker } from './chunk-EFMKWPZ3.js';
 export { DatePicker, DateRangePicker } from './chunk-EFMKWPZ3.js';
 export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
+import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-DKPNFEVU.js';
+export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-DKPNFEVU.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce } from './chunk-WIDDHR7L.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-WIDDHR7L.js';
 import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';

package/dist/meta.d.ts

@@ -428,6 +428,9 @@ declare const RankBoardMeta: SduiComponentMeta;
 declare const ApprovalLineEditorMeta: SduiComponentMeta;
 declare const ApprovalOverridesEditorMeta: SduiComponentMeta;
 declare const OrgChartBoardMeta: SduiComponentMeta;
+declare const PermissionMatrixEditorMeta: SduiComponentMeta;
+declare const RoleMemberPickerMeta: SduiComponentMeta;
+declare const FileDropzoneMeta: SduiComponentMeta;
 declare const AutocompleteFieldMeta: SduiComponentMeta;
 declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
@@ -453,7 +456,7 @@ declare const StripMeta: SduiComponentMeta;
 /**
  * 위젯 어휘의 메타데이터.
  *
- * 키 타입이 `SduiWidgetComponentName | 'AutocompleteField'`인 이유:
+ * 키 타입이 `SduiWidgetComponentName | 'AutocompleteField' | 'FileDropzone'`인 이유:
  * 앞의 20종은 `widgetComponents`와 키가 어긋나면 컴파일 에러가 나야 하고(core·rich와 같다),
  * `AutocompleteField`는 그 묶음에 **일부러 빠져 있는** 이름이라 union에 직접 적어야 한다.
  * 표시 계층만 라이브러리에 있고 조회는 앱 어댑터가 얹는 구조인데(widgets/index.ts 참고),
@@ -464,6 +467,9 @@ declare const widgetComponentMeta: {
     ApprovalLineEditor: SduiComponentMeta;
     ApprovalOverridesEditor: SduiComponentMeta;
     ApprovalStepper: SduiComponentMeta;
+    FileDropzone: SduiComponentMeta;
+    PermissionMatrixEditor: SduiComponentMeta;
+    RoleMemberPicker: SduiComponentMeta;
     OrgChartBoard: SduiComponentMeta;
     RankBoard: SduiComponentMeta;
     AutocompleteField: SduiComponentMeta;
@@ -598,4 +604,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -3736,6 +3736,219 @@ var OrgChartBoardMeta = {
   },
   resize: { kind: "none" }
 };
+var PermissionMatrixEditorMeta = {
+  name: "PermissionMatrixEditor",
+  label: "\uAD8C\uD55C \uD589\uB82C \uD3B8\uC9D1\uAE30",
+  category: "input",
+  icon: "shield-check",
+  description: "\uC5ED\uD560\uC758 \uAD8C\uD55C 216\uC885\uC744 \uCE74\uD14C\uACE0\uB9AC\u2192\uC5D4\uD2F0\uD2F0\uB85C \uC811\uC5B4 4\uC5F0\uC0B0 \uCCB4\uD06C + \uC5D4\uD2F0\uD2F0\uBCC4 \uBC94\uC704(\uD300\xB7\uBCF8\uBD80\xB7\uC804\uCCB4)\uB85C \uD3B8\uC9D1\uD55C\uB2E4. \uAC12\uC740 PUT /roles/{id}/permissions \uC758 permissions \uBC30\uC5F4({code, scope}) \uADF8\uB300\uB85C\uB2E4.",
+  props: [
+    {
+      name: "permissions",
+      kind: "array",
+      label: "\uAD8C\uD55C \uCE74\uD0C8\uB85C\uADF8",
+      required: true,
+      bindable: true,
+      item: [
+        { name: "code", kind: "string", label: "\uAD8C\uD55C \uCF54\uB4DC" },
+        { name: "name", kind: "string", label: "\uAD8C\uD55C\uBA85" },
+        { name: "category", kind: "string", label: "\uCE74\uD14C\uACE0\uB9AC" }
+      ],
+      description: "\uC804\uCCB4 \uAD8C\uD55C \uBAA9\uB85D(GET /permissions?limit=1000 \uC758 data). \uB300\uAC1C page.data \uAC00 \uCC44\uC6B4 \uC0C1\uD0DC\uB97C \uBC14\uC778\uB529\uD55C\uB2E4 \u2014 \uAE30\uBCF8 100\uAC74\uB9CC \uC624\uB294 \uD568\uC815\uC774 \uC788\uC73C\uB2C8 limit \uC744 \uAF2D \uC900\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "value",
+      kind: "array",
+      label: "\uBD80\uC5EC \uBAA9\uB85D",
+      required: true,
+      item: [
+        { name: "code", kind: "string", label: "\uAD8C\uD55C \uCF54\uB4DC" },
+        { name: "scope", kind: "string", label: "\uBC94\uC704(team\xB7headquarter\xB7all)" }
+      ],
+      bindable: true,
+      description: "[{code, scope}] \u2014 \uC11C\uBC84 PUT \uACC4\uC57D \uADF8\uB300\uB85C.",
+      group: "data"
+    },
+    {
+      name: "onChange",
+      kind: "action",
+      label: "\uBD80\uC5EC \uBCC0\uACBD",
+      required: true,
+      eventArg: "{code, scope} \uBC30\uC5F4 (scope \uB294 team\xB7headquarter\xB7all)",
+      group: "behavior"
+    },
+    {
+      name: "sourceEndpoint",
+      kind: "string",
+      label: "\uD604\uC7AC \uBD80\uC5EC \uC2DC\uB529 \uACBD\uB85C",
+      description: "/roles/{id}/permissions \u2014 \uACBD\uB85C\uAC00 \uBC14\uB014 \uB54C\uB9C8\uB2E4 \uC11C\uBC84 \uAC12\uC744 onChange \uB85C \uD55C \uBC88 \uD758\uB9B0\uB2E4.",
+      group: "data",
+      advanced: true
+    },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  preset: {
+    component: "PermissionMatrixEditor",
+    props: {
+      permissions: [
+        { code: "asset.read", name: "\uC7A5\uBE44 \uC870\uD68C", category: "asset" },
+        { code: "asset.update", name: "\uC7A5\uBE44 \uC218\uC815", category: "asset" }
+      ],
+      value: { $state: "grantsForm.permissions", default: [{ code: "asset.read", scope: "all" }] },
+      onChange: { action: "setState", key: "grantsForm.permissions", fromEvent: true }
+    }
+  },
+  resize: { kind: "none" }
+};
+var RoleMemberPickerMeta = {
+  name: "RoleMemberPicker",
+  label: "\uC5ED\uD560 \uBA64\uBC84 \uAD00\uB9AC\uAE30",
+  category: "input",
+  icon: "users",
+  description: "\uC5ED\uD560\uC744 \uBD80\uC5EC\uBC1B\uC740 \uC0AC\uC6A9\uC790\uB97C \uBCF4\uC5EC\uC8FC\uACE0 \uAC1C\uBCC4 \uD574\uC81C(DELETE /roles/{id}/employees/{employee_id})\uC640 \uBBF8\uBC30\uC815 \uC9C1\uC6D0 \uAC80\uC0C9\xB7\uB2E4\uC911 \uC120\uD0DD \uCD94\uAC00(POST \uBCF8\uBB38 {employees:[ids]})\uB97C \uC218\uD589\uD55C\uB2E4. sourceEndpoint \uB85C \uD604\uC7AC \uBA64\uBC84\uB97C \uC2DC\uB529\uD55C\uB2E4.",
+  props: [
+    { name: "employees", kind: "array", label: "\uC9C1\uC6D0 \uCE74\uD0C8\uB85C\uADF8", bindable: true, item: [
+      { name: "id", kind: "string", label: "\uC9C1\uC6D0 id" },
+      { name: "name", kind: "string", label: "\uC774\uB984" },
+      { name: "employee_number", kind: "string", label: "\uC0AC\uBC88" },
+      { name: "department_name", kind: "string", label: "\uBD80\uC11C" },
+      { name: "work_email", kind: "string", label: "\uC774\uBA54\uC77C" },
+      { name: "job_title", kind: "string", label: "\uC9C1\uCC45" }
+    ], description: "/employees?limit=500 \uC758 data \u2014 page.data \uB85C \uCC44\uC6B4\uB2E4. \uBE44\uBA74 \uC704\uC82F\uC774 offset \uD398\uC774\uC9C0\uB85C \uC790\uCCB4 \uC218\uC9D1\uD55C\uB2E4.", group: "data" },
+    { name: "sourceEndpoint", kind: "string", label: "\uBA64\uBC84\uC2ED \uACBD\uB85C", description: "/roles/{id}/employees?_=seq \u2014 \uACBD\uB85C\uAC00 \uBC14\uB014 \uB54C\uB9C8\uB2E4 \uD604\uC7AC \uBA64\uBC84\uB97C \uC7AC\uC2DC\uB529\uD558\uACE0, \uCD94\uAC00\xB7\uD574\uC81C\uB294 \uCFFC\uB9AC\uB97C \uB5C0 \uAC19\uC740 \uACBD\uB85C\uB85C \uBCF4\uB0B8\uB2E4.", group: "data" },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
+    {
+      name: "catalogEndpoint",
+      kind: "string",
+      label: "\uD6C4\uBCF4 \uBAA9\uB85D \uACBD\uB85C",
+      description: "\uC751\uB2F5 {data:[{id,name,\u2026}], total} \uC744 500\uAC74\uC529 \uC218\uC9D1\uD55C\uB2E4. \uAE30\uBCF8 '/employees'.",
+      group: "data",
+      advanced: true
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  preset: {
+    component: "RoleMemberPicker",
+    props: {
+      employees: [{ id: "emp-1", name: "\uAE40\uC704\uD504", employee_number: "1001", department_name: "\uACBD\uC601\uC9C0\uC6D0\uD300", work_email: "kim@wipco.co.kr" }]
+    }
+  },
+  resize: { kind: "none" }
+};
+var FileDropzoneMeta = {
+  name: "FileDropzone",
+  label: "\uD30C\uC77C \uCCA8\uBD80",
+  category: "input",
+  icon: "paperclip",
+  description: "\uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D \uB2E4\uC911 \uCCA8\uBD80. \uC5C5\uB85C\uB4DC \uACBD\uB85C\uAC00 \uC5C6\uAC70\uB098 \uBC31\uC5D4\uB4DC\uAC00 503\uC774\uBA74 object URL \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.",
+  props: [
+    {
+      name: "value",
+      kind: "array",
+      label: "\uCCA8\uBD80 \uBAA9\uB85D",
+      bindable: true,
+      description: "\uC8FC\uBA74 controlled. \uC2E4\uCE21 6/7\uC774 \uC804\uBD80 $state \uBC14\uC778\uB529\uC774\uACE0 default\uAC00 \uBE48 \uBC30\uC5F4\uC774\uB2E4.",
+      group: "data",
+      // 실측 6/7. 원소 리터럴은 스펙에 한 건도 없어(전부 빈 배열) 형태의 근거는 타입뿐이다.
+      item: [
+        { name: "id", kind: "string", label: "\uC2DD\uBCC4\uC790", required: true },
+        { name: "url", kind: "string", label: "URL", required: true },
+        { name: "name", kind: "string", label: "\uD30C\uC77C\uBA85" }
+      ]
+    },
+    {
+      name: "onChange",
+      kind: "action",
+      label: "\uCCA8\uBD80 \uBCC0\uACBD",
+      eventArg: "\uBCC0\uACBD\uB41C \uCCA8\uBD80 \uBAA9\uB85D \uBC30\uC5F4",
+      group: "behavior"
+    },
+    // 실측 6/7 — 전부 setState + fromEvent
+    {
+      name: "endpoint",
+      kind: "string",
+      label: "\uC5C5\uB85C\uB4DC \uACBD\uB85C",
+      description: '\uD30C\uC77C\uB9C8\uB2E4 FormData("file")\uB97C POST\uD558\uACE0 {id,url} \uC751\uB2F5\uC744 \uAE30\uB300\uD55C\uB2E4. \uC5C6\uC73C\uBA74 \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30 \uBAA8\uB4DC\uB85C\uB9CC \uB3D9\uC791\uD55C\uB2E4.',
+      group: "data"
+    },
+    // 실측 1/7 ("/asset/attachments")
+    { name: "maxCount", kind: "number", label: "\uCD5C\uB300 \uCCA8\uBD80 \uC218", group: "behavior" },
+    // 실측 7/7 (5×4, 8×3)
+    {
+      name: "accept",
+      kind: "string",
+      label: "\uD5C8\uC6A9 \uD615\uC2DD",
+      default: "image/*",
+      description: "input accept \uBB38\uBC95. \uB9DE\uC9C0 \uC54A\uB294 \uD30C\uC77C\uC740 \uC81C\uC678\uD558\uACE0 \uC778\uB77C\uC778 \uACBD\uACE0\uB85C \uC548\uB0B4\uD55C\uB2E4.",
+      group: "behavior"
+    },
+    // 실측 7/7 ("image/*,.pdf"×4, "image/*"×3)
+    { name: "hint", kind: "string", label: "\uBCF4\uC870 \uBB38\uAD6C", description: "\uB4DC\uB86D \uC601\uC5ED \uC544\uB798\uC5D0 \uBD99\uB294\uB2E4.", group: "content" },
+    // 실측 7/7
+    {
+      name: "deleteEndpoint",
+      kind: "string",
+      label: "\uC0AD\uC81C \uACBD\uB85C \uAE30\uC900",
+      description: "\uC8FC\uBA74 \uC378\uB124\uC77C \uC0AD\uC81C\uAC00 DELETE {\uC774 \uAC12}/{id}\uAE4C\uC9C0 \uBCF4\uB0B8\uB2E4(\uC608: /attachments). \uC774\uBBF8 \uC62C\uB77C\uAC04 \uC0AC\uC9C4\uC744 \uC774 \uCE78\uC5D0 \uCC44\uC6CC \uB458 \uB54C \uD544\uC218 \u2014 \uC5C6\uC73C\uBA74 \uC9C0\uC6B4 \uAC83\uCC98\uB7FC \uBCF4\uC774\uB294\uB370 \uC11C\uBC84\uC5D0\uB294 \uB0A8\uB294\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "onRemove",
+      kind: "action",
+      label: "\uC0AD\uC81C \uD6C4",
+      description: "\uC11C\uBC84\uC5D0\uC11C \uC2E4\uC81C\uB85C \uC9C0\uC6B4 \uB4A4 \uD55C \uBC88. \uBCF4\uD1B5 \uBAA9\uB85D\xB7\uC0C1\uC138\uB97C \uB2E4\uC2DC \uC77D\uB294 invalidate\uB97C \uAC74\uB2E4.",
+      group: "behavior"
+    },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
+    // 실측 0/7 — 구현에는 있다
+    {
+      name: "onBusyChange",
+      kind: "action",
+      label: "\uC5C5\uB85C\uB4DC \uC9C4\uD589 \uC54C\uB9BC",
+      eventArg: "\uC5C5\uB85C\uB4DC \uD050\uAC00 \uB3C4\uB294 \uB3D9\uC548 true, \uB05D\uB098\uBA74 false",
+      description: "\uCCA8\uBD80\uAC00 \uC62C\uB77C\uAC00\uB294 \uB3D9\uC548 \uC800\uC7A5 \uBC84\uD2BC\uC744 \uC7A0\uAE00 \uB54C \uC4F4\uB2E4.",
+      group: "behavior",
+      advanced: true
+    },
+    // 실측 0/7 — 구현에는 있다
+    {
+      name: "fileField",
+      kind: "string",
+      label: "multipart \uD544\uB4DC \uC774\uB984",
+      description: "\uAE30\uBCF8 'file'. \uC11C\uBC84\uAC00 \uB2E4\uB978 \uC774\uB984\uC744 \uBC1B\uC73C\uBA74 \uBC14\uAFBC\uB2E4.",
+      group: "data",
+      advanced: true
+    },
+    {
+      name: "localFallbackOn503",
+      kind: "boolean",
+      label: "503\uC774\uBA74 \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30",
+      description: '503\uC744 "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9"\uC73C\uB85C \uC77D\uC5B4 \uAC15\uB4F1\uD55C\uB2E4. \uAE30\uBCF8 \uAEBC\uC9D0 \u2014 \uC77C\uBC18 \uC11C\uBC84\uC758 \uACFC\uBD80\uD558 503\uC5D0\uC11C "\uC62C\uB9B0 \uAC83 \uAC19\uC740\uB370 \uC0C8\uB85C\uACE0\uCE68\uD558\uBA74 \uC5C6\uB294" \uD56D\uBAA9\uC744 \uB9CC\uB4E4\uBA74 \uC548 \uB418\uAE30 \uB54C\uBB38\uC774\uB2E4.',
+      group: "behavior",
+      advanced: true
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  // 실측: 루트가 <div class="wp-col">
+  // 프리셋에 endpoint를 넣지 않는다 — 넣으면 캔버스에서 파일을 놓는 순간 실제 업로드가 나간다.
+  // 없으면 업로드 큐가 object URL로만 돌아 바깥으로 나가는 요청이 0건이다.
+  preset: {
+    component: "FileDropzone",
+    props: {
+      value: { $state: "form.attachments", default: [] },
+      onChange: { action: "setState", key: "form.attachments", fromEvent: true },
+      accept: "image/*",
+      maxCount: 5,
+      hint: "\uC774\uBBF8\uC9C0 \uD30C\uC77C\uC744 \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574 \uC120\uD0DD\uD558\uC138\uC694"
+    }
+  },
+  resize: { kind: "none" }
+};
 var AutocompleteFieldMeta = {
   name: "AutocompleteField",
   label: "\uC790\uB3D9\uC644\uC131",
@@ -5156,6 +5369,9 @@ var widgetComponentMeta = {
   ApprovalLineEditor: ApprovalLineEditorMeta,
   ApprovalOverridesEditor: ApprovalOverridesEditorMeta,
   ApprovalStepper: ApprovalStepperMeta,
+  FileDropzone: FileDropzoneMeta,
+  PermissionMatrixEditor: PermissionMatrixEditorMeta,
+  RoleMemberPicker: RoleMemberPickerMeta,
   OrgChartBoard: OrgChartBoardMeta,
   RankBoard: RankBoardMeta,
   AutocompleteField: AutocompleteFieldMeta,
@@ -5215,4 +5431,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/rich.js

@@ -1,9 +1,9 @@
 import { useOptionalModule, DependencyPlaceholder } from './chunk-WXOU7QTN.js';
 export { TimePicker } from './chunk-WXOU7QTN.js';
-import { useSduiAssetResolver } from './chunk-DVOPZFQS.js';
 import { HoistedStyle } from './chunk-EFMKWPZ3.js';
 export { DatePicker, DateRangePicker } from './chunk-EFMKWPZ3.js';
 import './chunk-XQPTSEJC.js';
+import { useSduiAssetResolver } from './chunk-DKPNFEVU.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';

package/dist/widgets/ApprovalLineEditor.js

@@ -1,7 +1,7 @@
-export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-SAPJVLZM.js';
+export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-S4LOH2TU.js';
 import '../chunk-BD75U73S.js';
-import '../chunk-DVOPZFQS.js';
 import '../chunk-EFMKWPZ3.js';
 import '../chunk-XQPTSEJC.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';