@wipco/sdui 0.21.0 → 0.23.0

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { b as SduiPropValue, i as SduiNode } from './types-opTPYysN.js';
+import { b as SduiPropValue, i as SduiNode } from './types-DmHC7HCN.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.
@@ -405,9 +405,9 @@ declare const richComponentMeta: {
  * 받지 않게 하려는 것이다. 여기도 값 import는 없다(`import type`만).
  *
  * 프롭 목록은 `src/widgets/*.tsx`의 **실제 프롭 인터페이스**와, ERP 스펙 84개를 훑어
- * 뽑은 **실사용 프롭 집합**의 합집합이다. 대조 결과 이 21종에서 스펙이 쓰는 프롭 중
- * 구현에 없는 것은 `AutocompleteField.endpoint` 하나뿐이고(아래 `legacy` 주석 참고),
- * 나머지는 전부 구현에 존재한다.
+ * 뽑은 **실사용 프롭 집합**의 합집합이다. 스펙이 쓰는데 구현에 없는 프롭은 이제
+ * **한 개도 없다** — 마지막 하나였던 `AutocompleteField.endpoint`가 0.22.0에서
+ * 구현으로 들어왔다(소비 앱이 들고 있던 어댑터가 그만큼 사라진다).
  *
  * ## 함수 프롭을 메타데이터에 넣지 않은 자리
  *
@@ -423,6 +423,7 @@ declare const richComponentMeta: {
  * 그리지 않는 편이 낫다고 보고 'none'으로 뒀다.
  */
 
+declare const ApprovalStepperMeta: SduiComponentMeta;
 declare const AutocompleteFieldMeta: SduiComponentMeta;
 declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
@@ -456,6 +457,7 @@ declare const StripMeta: SduiComponentMeta;
  * 프롭을 못 그린다.
  */
 declare const widgetComponentMeta: {
+    ApprovalStepper: SduiComponentMeta;
     AutocompleteField: SduiComponentMeta;
     ColumnBoard: SduiComponentMeta;
     DiffView: SduiComponentMeta;
@@ -588,4 +590,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, 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, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, 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, 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, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, 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 };

package/dist/meta.js

@@ -3293,12 +3293,112 @@ var treeNodeItem = [
     itemKind: "object"
   }
 ];
+var ApprovalStepperMeta = {
+  name: "ApprovalStepper",
+  label: "\uACB0\uC7AC \uC9C4\uD589 \uC2A4\uD14C\uD37C",
+  category: "display",
+  icon: "workflow",
+  description: '\uC2E0\uCCAD\uC790 \u2192 \uACB0\uC7AC \uB2E8\uACC4\uB97C \uAC00\uB85C\uB85C \uB098\uC5F4\uD558\uB294 \uC77D\uAE30 \uC804\uC6A9 \uC2A4\uD14C\uD37C. \uB2E8\uACC4\uAC00 \uD558\uB098\uB3C4 \uC5C6\uC73C\uBA74 "\uC790\uB3D9 \uC2B9\uC778"\uC73C\uB85C \uD45C\uC2DC\uD55C\uB2E4.',
+  props: [
+    {
+      name: "steps",
+      kind: "array",
+      label: "\uACB0\uC7AC \uB2E8\uACC4",
+      required: true,
+      bindable: true,
+      description: "\uBE48 \uBC30\uC5F4\uC774\uBA74 \uC790\uB3D9 \uC2B9\uC778\uC73C\uB85C \uADF8\uB9B0\uB2E4(\uBC31\uC5D4\uB4DC \uD574\uC11D\uAE30\uC640 \uAC19\uC740 \uC758\uBBF8).",
+      group: "data",
+      item: [
+        { name: "id", kind: "string", label: "\uB2E8\uACC4 id", required: true },
+        { name: "name", kind: "string", label: "\uB2E8\uACC4\uBA85" },
+        {
+          name: "type",
+          kind: "string",
+          label: "\uC720\uD615",
+          description: "`typeLabels`\uC5D0\uC11C \uD45C\uC2DC\uBA85\uC744 \uCC3E\uB294 \uD0A4. \uB2E8\uACC4\uBA85\uC774 \uC5C6\uC744 \uB54C\uB9CC \uC4F0\uC778\uB2E4 \u2014 \uC870\uC9C1\uB9C8\uB2E4 \uC5B4\uD718\uAC00 \uB2EC\uB77C \uC5F4\uB9B0 \uBB38\uC790\uC5F4\uC774\uB2E4(\uC608: 'team_leader')."
+        },
+        {
+          name: "status",
+          kind: "enum",
+          label: "\uC0C1\uD0DC",
+          description: "\uBBF8\uC9C0\uC815\uC774\uBA74 \uB300\uAE30\uB85C \uBCF8\uB2E4.",
+          // 스펙에는 approved·current·pending만 등장하지만(각 4·4·1), rejected·skipped도
+          // 구현이 실제로 그리는 상태다(STATUS_META 5종). 값 후보는 구현 기준으로 적는다 —
+          // 실사용이 없다는 이유로 빼면 편집기가 반려 상태를 만들 수단을 잃는다.
+          options: [
+            { value: "pending", label: "\uB300\uAE30" },
+            { value: "current", label: "\uC9C4\uD589 \uC911" },
+            { value: "approved", label: "\uC2B9\uC778" },
+            { value: "rejected", label: "\uBC18\uB824" },
+            { value: "skipped", label: "\uAC74\uB108\uB700" }
+          ]
+        },
+        { name: "approver", kind: "string", label: "\uCC98\uB9AC\uC790", description: "\uC2B9\uC778\xB7\uBC18\uB824\uB41C \uB2E8\uACC4\uC5D0\uC11C \uD234\uD301\uC5D0 \uBCF4\uC778\uB2E4." },
+        {
+          name: "processedAt",
+          kind: "string",
+          label: "\uCC98\uB9AC \uC77C\uC2DC",
+          description: "ISO \uBB38\uC790\uC5F4 \uAD8C\uC7A5 \u2014 \uD30C\uC2F1\uC5D0 \uC2E4\uD328\uD558\uBA74 \uC6D0\uBB38\uC744 \uADF8\uB300\uB85C \uBCF4\uC5EC\uC900\uB2E4."
+        },
+        { name: "candidates", kind: "array", label: "\uACB0\uC7AC \uD6C4\uBCF4", item: [], itemKind: "string" }
+      ]
+    },
+    {
+      name: "requester",
+      kind: "object",
+      label: "\uC2E0\uCCAD\uC790",
+      bindable: true,
+      description: "\uC788\uC73C\uBA74 \uB9E8 \uC55E\uC5D0 \uC2E0\uCCAD\uC790 \uB178\uB4DC\uB97C \uADF8\uB9B0\uB2E4.",
+      group: "data",
+      fields: [
+        { name: "name", kind: "string", label: "\uC774\uB984", required: true },
+        { name: "sub", kind: "string", label: "\uC18C\uC18D\xB7\uC9C1\uAE09", description: '\uBE44\uBA74 "\uC2E0\uCCAD\uC790"\uB85C \uB300\uC2E0 \uD45C\uC2DC\uD55C\uB2E4.' }
+      ]
+    },
+    {
+      name: "typeLabels",
+      kind: "object",
+      label: "\uC720\uD615 \uD45C\uC2DC\uBA85",
+      bindable: true,
+      description: '\uC720\uD615 \uCF54\uB4DC \u2192 \uD45C\uC2DC\uBA85. \uC548 \uC8FC\uBA74 \uCF54\uB4DC\uB97C \uADF8\uB300\uB85C \uBCF4\uC5EC\uC8FC\uACE0, \uC720\uD615\uB3C4 \uC5C6\uC73C\uBA74 "N\uB2E8\uACC4"\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.',
+      group: "content",
+      advanced: true
+    },
+    {
+      name: "onStepClick",
+      kind: "action",
+      label: "\uB2E8\uACC4 \uD074\uB9AD",
+      eventArg: "\uD074\uB9AD\uD55C \uB2E8\uACC4 \uAC1D\uCCB4",
+      description: "\uD578\uB4E4\uB7EC\uB97C \uC8FC\uBA74 \uB2E8\uACC4 \uB178\uB4DC\uAC00 \uD074\uB9AD \uAC00\uB2A5\uD574\uC9C4\uB2E4.",
+      group: "behavior",
+      advanced: true
+    }
+    // 실측 0/6 — 구현에는 있다
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  // 실측: 자동 승인 분기·일반 분기 모두 <div class="wp-row">
+  // 순수 렌더라 프리셋에 위험이 없다. 세 가지 상태가 한눈에 보이게 골랐다.
+  preset: {
+    component: "ApprovalStepper",
+    props: {
+      requester: { name: "\uAE40\uB3C4\uD604", sub: "\uACBD\uC601\uC9C0\uC6D0\uD300 \xB7 \uB300\uB9AC" },
+      typeLabels: { team_leader: "\uD300\uC7A5", division_head: "\uBCF8\uBD80\uC7A5\xB7\uC2E4\uC7A5", custom: "\uC0AC\uC6A9\uC790 \uC9C0\uC815" },
+      steps: [
+        { id: "step-1", type: "team_leader", status: "approved", approver: "\uC774\uC11C\uC5F0" },
+        { id: "step-2", name: "\uBCF8\uBD80\uC7A5", type: "division_head", status: "current" },
+        { id: "step-3", name: "\uACBD\uC601\uC9C0\uC6D0 \uD655\uC778", type: "custom", status: "pending" }
+      ]
+    }
+  },
+  resize: { kind: "none" }
+};
 var AutocompleteFieldMeta = {
   name: "AutocompleteField",
   label: "\uC790\uB3D9\uC644\uC131",
   category: "input",
   icon: "search",
-  description: "\uAC80\uC0C9\uD574\uC11C \uD558\uB098\uB97C \uACE0\uB974\uB294 \uC785\uB825. \uACE0\uB978 \uB4A4\uC5D0\uB294 \uC120\uD0DD \uCE74\uB4DC\uB85C \uC811\uD78C\uB2E4. \uC6D0\uACA9 \uC870\uD68C\uB294 \uC571\uC774 \uC5B9\uC740 \uC5B4\uB311\uD130\uAC00 \uB2F4\uB2F9\uD55C\uB2E4.",
+  description: "\uAC80\uC0C9\uD574\uC11C \uD558\uB098\uB97C \uACE0\uB974\uB294 \uC785\uB825. \uACE0\uB978 \uB4A4\uC5D0\uB294 \uC120\uD0DD \uCE74\uB4DC\uB85C \uC811\uD78C\uB2E4. \uAC80\uC0C9 \uACBD\uB85C\uB97C \uC8FC\uBA74 \uC6D0\uACA9 \uC870\uD68C\uAE4C\uC9C0 \uD55C\uB2E4.",
   props: [
     {
       name: "options",
@@ -3316,9 +3416,15 @@ var AutocompleteFieldMeta = {
     {
       name: "endpoint",
       kind: "string",
-      legacy: true,
       label: "\uAC80\uC0C9 \uACBD\uB85C",
-      description: "\uB77C\uC774\uBE0C\uB7EC\uB9AC \uAD6C\uD604\uC5D0\uB294 \uC5C6\uB2E4 \u2014 \uC774 \uC790\uB9AC\uC758 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uD504\uB86D\uC740 `search`(\uD568\uC218)\uB77C JSON\uC73C\uB85C \uD45C\uD604\uD560 \uC218 \uC5C6\uC5B4\uC11C, \uC18C\uBE44 \uC571\uC774 \uC5B4\uB311\uD130\uB97C \uC50C\uC6CC endpoint\uB97C search\uB85C \uBC14\uAFD4 \uB4F1\uB85D\uD55C\uB2E4(ERP\uC758 `@/components/widgets/AutocompleteField`). \uC2A4\uD399 \uC5B4\uD718\uB294 endpoint \uCABD\uC774\uBBC0\uB85C \uC9C0\uC6B0\uC9C0 \uC54A\uB294\uB2E4.",
+      description: "\uC8FC\uBA74 \uC5B4\uB311\uD130\uC758 fetch\uB85C \uC9C1\uC811 \uC870\uD68C\uD55C\uB2E4(`GET {\uACBD\uB85C}?q={\uD0A4\uC6CC\uB4DC}`). 0.22.0 \uC804\uC5D0\uB294 \uC774 \uD504\uB86D\uC774 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uAD6C\uD604\uC5D0 \uC5C6\uC5B4\uC11C \uC18C\uBE44 \uC571\uC774 \uC5B4\uB311\uD130\uB97C \uC50C\uC6CC endpoint\uB97C search \uD568\uC218\uB85C \uBC14\uAFD4 \uB4F1\uB85D\uD588\uB2E4 \u2014 \uC774\uC81C \uD544\uC694 \uC5C6\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "searchParam",
+      kind: "string",
+      label: "\uD0A4\uC6CC\uB4DC \uD30C\uB77C\uBBF8\uD130",
+      description: "endpoint \uC870\uD68C\uC5D0 \uBD99\uB294 \uD0A4\uC6CC\uB4DC \uCFFC\uB9AC \uC774\uB984. \uAE30\uBCF8 'q'.",
       group: "data"
     },
     {
@@ -4704,6 +4810,7 @@ var StripMeta = {
   resize: { kind: "none" }
 };
 var widgetComponentMeta = {
+  ApprovalStepper: ApprovalStepperMeta,
   AutocompleteField: AutocompleteFieldMeta,
   ColumnBoard: ColumnBoardMeta,
   DiffView: DiffViewMeta,
@@ -4761,4 +4868,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, 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, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, 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, 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, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, 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 };

package/dist/rich.js

@@ -1,5 +1,6 @@
-import { useSduiAssetResolver } from './chunk-HPZTFZZN.js';
-export { TimePicker } from './chunk-HPZTFZZN.js';
+import { useOptionalModule, DependencyPlaceholder } from './chunk-36MXPCJP.js';
+export { TimePicker } from './chunk-36MXPCJP.js';
+import { useSduiAssetResolver } from './chunk-DVOPZFQS.js';
 import { HoistedStyle } from './chunk-XKLUCUVA.js';
 export { DatePicker, DateRangePicker } from './chunk-XKLUCUVA.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
@@ -7,55 +8,6 @@ import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function useOptionalModule(load) {
-  const [state, setState] = useState({ status: "loading" });
-  useEffect(() => {
-    let alive = true;
-    load().then(
-      (module) => {
-        if (alive) setState({ status: "ready", module });
-      },
-      (error) => {
-        if (!alive) return;
-        console.warn("[sdui] \uC120\uD0DD \uC758\uC874\uC131 \uB85C\uB4DC \uC2E4\uD328 \u2014 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4", error);
-        setState({ status: "missing" });
-      }
-    );
-    return () => {
-      alive = false;
-    };
-  }, [load]);
-  return state;
-}
-function DependencyPlaceholder({
-  packageName,
-  purpose,
-  height,
-  loading = false
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        minHeight: height,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        border: "1px solid var(--wp-border-subtle)",
-        borderRadius: "var(--wp-radius-md)",
-        background: "var(--wp-surface-sunken)"
-      },
-      children: loading ? /* @__PURE__ */ jsx(Spinner, { label: `${purpose} \uC900\uBE44 \uC911` }) : /* @__PURE__ */ jsxs(EmptyState, { tight: true, icon: "box", title: `${purpose}\uB97C \uADF8\uB9AC\uB824\uBA74 ${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4`, children: [
-        "\uC120\uD0DD \uC758\uC874\uC131\uC774\uB77C \uAE30\uBCF8 \uC124\uCE58\uC5D0\uB294 \uD3EC\uD568\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 \u2014 ",
-        /* @__PURE__ */ jsxs("code", { children: [
-          "pnpm add ",
-          packageName
-        ] }),
-        " \uD6C4 \uB2E4\uC2DC \uC5F4\uC5B4 \uC8FC\uC138\uC694."
-      ] })
-    }
-  );
-}
 var loadRecharts = () => import('recharts');
 var SERIES_FALLBACK = [
   "#1d2c60",

package/dist/styles.css

@@ -228,6 +228,9 @@
     color var(--wp-duration-fast) var(--wp-ease-standard),
     box-shadow var(--wp-duration-fast) var(--wp-ease-standard);
   --wp-transition-transform: transform var(--wp-duration-base) var(--wp-ease-standard);
+  /* 면(surface)의 강조 전이 — 드롭 영역·카드처럼 배경과 그림자가 함께 바뀌는 자리. */
+  --wp-transition-surface: background-color var(--wp-duration-base) var(--wp-ease-standard),
+    box-shadow var(--wp-duration-base) var(--wp-ease-standard);
   --wp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 
   /* 별칭 — 이관 CSS가 의미 이름으로 참조하는 자리 */

package/dist/{types-opTPYysN.d.ts → types-DmHC7HCN.d.ts}

@@ -64,11 +64,67 @@ interface SduiIndexRef {
 interface SduiCalcRef {
     $calc: {
         op: 'sum' | 'sub' | 'mul' | 'div' | 'percent' | 'count' | 'concat' | 'encode'
-        /** 비교·논리 — Show의 when, Button의 disabled 등에 바인딩한다 */
-         | 'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'not';
+        /**
+         * 비교·논리 — Show의 when, Button의 disabled 등에 바인딩한다.
+         * 순서 비교(gt/gte/lt/lte)는 숫자로 재되, **양쪽이 모두 숫자가 아닌 문자열일
+         * 때만** 사전순으로 본다 — ISO 날짜·시각 문자열의 대소가 이 규칙으로 성립한다.
+         */
+         | 'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'not' | 'and' | 'or'
+        /**
+         * 값 고르기. `if`는 `then`/`else`, `match`는 `cases`(+`default`)를 쓴다 —
+         * 둘 다 **고른 가지만** 해석되므로 안 고른 가지의 조회는 나가지 않는다.
+         * `coalesce`는 args에서 처음으로 비지 않은 값(null·undefined·'' 제외)을 준다.
+         */
+         | 'if' | 'match' | 'coalesce'
+        /**
+         * 목록·객체. JSON에는 람다가 없으므로 술어는 `where` 객체로 쓴다
+         * (Prisma의 where와 같은 모양 — 아래 필드 설명 참고).
+         *
+         * - `get`     args[0]에서 args[1] 키/인덱스로 꺼낸다(런타임 값이 키가 될 수 있다)
+         * - `pluck`   객체 배열에서 `field` 값만 뽑아 값 배열로 만든다(빈 값은 떨어뜨린다)
+         * - `filter`  `where`에 맞는 행만 남긴다
+         * - `some`/`every`  `where`에 맞는 행이 있는지 / 전부인지
+         * - `includes` 목록(또는 문자열)이 args[1]을 담고 있는지
+         * - `distinct` `field`(없으면 값 자체) 기준 중복 제거
+         * - `except`  args[0]에서 args[1]에 있는 것을 뺀다(`field`로 맞춘다)
+         * - `entries` 객체를 `{key, value}` 배열로 편다 — ForEach가 돌 수 있는 모양
+         * - `length`  배열·문자열의 길이
+         * - `join`    `sep`(기본 ',')으로 잇는다
+         * - `split`   `sep`(기본 ',')으로 가른다. `take`를 주면 그 조각 하나(음수는 뒤에서)
+         * - `sortBy`  `field` 기준 정렬(`desc: true`면 내림차순). 원본은 건드리지 않는다
+         */
+         | 'get' | 'pluck' | 'filter' | 'some' | 'every' | 'includes' | 'distinct' | 'except' | 'entries' | 'length' | 'join' | 'split' | 'sortBy';
         args: SduiPropValue[];
-        /** sum/count에서 객체 배열의 필드를 지정 */
+        /** sum/count·목록 연산에서 객체 배열의 필드를 지정 */
         field?: string;
+        /**
+         * `filter`·`some`·`every`의 술어. 키가 필드, 값이 연산 객체다.
+         *
+         *   { "deptId": { "eq": { "$state": "sel" } },
+         *     "level":  { "gte": 3 },
+         *     "OR": [ { "status": "open" }, { "owner": { "isNull": true } } ] }
+         *
+         * 필드 연산: eq · ne · gt · gte · lt · lte · in · notIn · contains ·
+         * startsWith · endsWith · isNull. 값이 연산 객체가 아니면 `eq`로 읽는다.
+         * 같은 객체의 키들은 AND이고, `AND`/`OR`는 술어 배열, `NOT`은 술어 하나다.
+         * 술어 안의 값에도 참조를 쓸 수 있는데, 이때 `$item`은 거르고 있는 행이 아니라
+         * **바깥 ForEach의 행**을 가리킨다(거르는 행은 필드 이름으로 지목한다).
+         */
+        where?: SduiPropValue;
+        /** `if`가 참일 때의 값 (고를 때만 해석된다) */
+        then?: SduiPropValue;
+        /** `if`가 거짓일 때의 값 (고를 때만 해석된다) */
+        else?: SduiPropValue;
+        /** `match`의 대응표 — 키는 args[0]을 문자열로 눕힌 값 */
+        cases?: Record<string, SduiPropValue>;
+        /** `match`에서 어느 case에도 안 맞을 때의 값 */
+        default?: SduiPropValue;
+        /** `join`/`split`의 구분자 (기본 ',') */
+        sep?: string;
+        /** `split`에서 꺼낼 조각의 인덱스. 음수는 뒤에서부터 센다 */
+        take?: number;
+        /** `sortBy`를 내림차순으로 */
+        desc?: boolean;
     };
 }
 /** 폼 필드 검증 규칙. */
@@ -146,6 +202,23 @@ type SduiAction = {
     onSuccess?: SduiAction[];
     /** 실패 시 순차 실행 (이벤트 값 = 에러 메시지). 생략하면 danger 토스트 */
     onError?: SduiAction[];
+    /**
+     * 실패 상세를 담을 상태 키. 주면 `onError` 체인이 돌기 **직전에**
+     * `{ status, message, body }` 를 여기 심는다.
+     *
+     * `onError` 의 이벤트 값은 예전 그대로 **문자열 메시지**다(기존 스펙 불변).
+     * 상태 코드나 응답 본문으로 갈라 써야 할 때만 이 키를 준다 — 예컨대 서버가
+     * 409 로 거절하며 위반 목록을 실어 보내면, 그것을 화면에 그리는 길이 여기다:
+     *
+     *   { "action": "request", "endpoint": "…", "errorKey": "saveError",
+     *     "onError": [{ "action": "toast", "tone": "danger",
+     *                   "message": { "$state": "saveError.message" } }] }
+     *   → ForEach source: { "$state": "saveError.body.violations" }
+     *
+     * `status`·`body` 는 호스트 어댑터가 오류에 얹어 줬을 때만 채워진다
+     * (계약은 {@link SduiAdapter.fetch} 참고). 안 얹으면 message 만 남는다.
+     */
+    errorKey?: string;
 }
 /**
  * 단발 API 호출 — submitForm에서 폼 수집·검증을 뺀 것. 서버의 2단계 커밋 계약
@@ -162,6 +235,23 @@ type SduiAction = {
     onSuccess?: SduiAction[];
     /** 실패 시 순차 실행 (이벤트 값 = 에러 메시지). 생략하면 danger 토스트 */
     onError?: SduiAction[];
+    /**
+     * 실패 상세를 담을 상태 키. 주면 `onError` 체인이 돌기 **직전에**
+     * `{ status, message, body }` 를 여기 심는다.
+     *
+     * `onError` 의 이벤트 값은 예전 그대로 **문자열 메시지**다(기존 스펙 불변).
+     * 상태 코드나 응답 본문으로 갈라 써야 할 때만 이 키를 준다 — 예컨대 서버가
+     * 409 로 거절하며 위반 목록을 실어 보내면, 그것을 화면에 그리는 길이 여기다:
+     *
+     *   { "action": "request", "endpoint": "…", "errorKey": "saveError",
+     *     "onError": [{ "action": "toast", "tone": "danger",
+     *                   "message": { "$state": "saveError.message" } }] }
+     *   → ForEach source: { "$state": "saveError.body.violations" }
+     *
+     * `status`·`body` 는 호스트 어댑터가 오류에 얹어 줬을 때만 채워진다
+     * (계약은 {@link SduiAdapter.fetch} 참고). 안 얹으면 message 만 남는다.
+     */
+    errorKey?: string;
     /** 성공 시 무효화할 조회 prefix — onSuccess의 invalidate 액션 단축 */
     invalidate?: string;
 }

package/dist/widgets/ApprovalStepper.d.ts

@@ -0,0 +1,41 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+import React__default from 'react';
+
+interface ApprovalStepperStep {
+    id: string;
+    name?: string;
+    /**
+     * 단계 유형. `typeLabels`에서 표시명을 찾는 키다 — 열린 문자열이라 조직마다
+     * 자기 어휘를 쓴다. 이름(`name`)이 있으면 그쪽이 이긴다.
+     */
+    type?: string;
+    status?: 'pending' | 'current' | 'approved' | 'rejected' | 'skipped';
+    /** 처리한 결재자 이름(승인/반려된 단계). */
+    approver?: string;
+    /** 처리 일시(ISO 문자열 권장 — 파싱 실패 시 원문 그대로 표시). */
+    processedAt?: string;
+    /** 이 단계에서 결재할 수 있는 후보자 이름들. */
+    candidates?: string[];
+}
+interface ApprovalStepperProps {
+    /** 결재를 올린 사람. 있으면 맨 앞에 신청자 노드를 그린다. */
+    requester?: {
+        name: string;
+        sub?: string;
+    };
+    steps: ApprovalStepperStep[];
+    /** 단계 클릭 핸들러 — 첫 인자(step 객체)가 SDUI 이벤트 값으로 저장된다. */
+    onStepClick?: (step: ApprovalStepperStep) => void;
+    /**
+     * 유형 코드 → 표시명. 단계에 `name`이 없을 때만 쓰인다.
+     *
+     * 결재선의 유형 어휘는 조직마다 다르므로(팀장/본부장은 한 회사의 직제다) 여기서
+     * 받는다. 안 주면 유형 코드를 그대로 보여주고, 유형도 없으면 `N단계`로 떨어진다 —
+     * 어느 쪽이든 화면이 서고, 라이브러리가 특정 회사의 직제를 알지 않는다.
+     */
+    typeLabels?: Record<string, string>;
+}
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자기 축(폭·여백)이 닿게 하는 통로. */
+declare const ApprovalStepper: React__default.FC<ApprovalStepperProps & SduiBoxProps>;
+
+export { ApprovalStepper, type ApprovalStepperProps, type ApprovalStepperStep };

package/dist/widgets/ApprovalStepper.js

@@ -0,0 +1,3 @@
+export { ApprovalStepper } from '../chunk-ZTQEP3TR.js';
+import '../chunk-WIDDHR7L.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/AutocompleteField.d.ts

@@ -26,7 +26,20 @@ interface AutocompleteFieldProps {
      * ERP의 `endpoint` 프롭은 이 함수를 만드는 앱 쪽 어댑터가 계속 소유한다(위 주석 참고).
      */
     search?: AutocompleteSearchFn;
-    /** 정적 옵션(데모/폴백) — `search`가 없을 때 로컬 검색 대상. */
+    /**
+     * 조회 경로. 주면 **어댑터의 `fetch`로 직접 조회한다** — 소비 앱이 `search`를
+     * 만들어 넘기지 않아도 된다(`GET {endpoint}?{searchParam}={키워드}`).
+     *
+     * `search`가 함께 오면 그쪽이 이긴다 — 응답 모양이나 오류 분기가 특수한 화면은
+     * 여전히 자기 함수를 넘길 수 있다.
+     *
+     * 어댑터가 없거나 `fetch`를 안 준 환경(편집기 캔버스 등)에서는 조회하지 않고
+     * `options` 로컬 검색으로 떨어진다 — 미리보기에서 실요청이 나가면 안 된다.
+     */
+    endpoint?: string;
+    /** `endpoint` 조회의 키워드 파라미터 이름. 기본 'q'. */
+    searchParam?: string;
+    /** 정적 옵션(데모/폴백) — `search`·`endpoint`가 없을 때 로컬 검색 대상. */
     options?: AutocompleteOption[];
     /** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
     labelKey?: string;
@@ -48,6 +61,20 @@ interface AutocompleteFieldProps {
     invalid?: boolean;
     disabled?: boolean;
 }
+type HostFetch = (path: string, init: {
+    method: string;
+    signal?: AbortSignal;
+}) => Promise<unknown>;
+/**
+ * `endpoint` → 검색 함수. 컴포넌트 밖에 두어 DOM 없이 그대로 잰다
+ * (`page-data.ts`·`calc.ts`와 같은 이유).
+ *
+ * 503만 별도로 본다. 어댑터 계약상 실패는 Error 하나라 상태 코드가 사라지지만,
+ * 503은 "서비스가 아직 없다"는 표준 의미라 "불러왔는데 없다"와 사용자에게 다른
+ * 말을 해야 한다. 호스트 오류 객체에 `status`가 있으면 읽고, 없으면 평소대로
+ * 던진다 — 특정 앱의 오류 타입을 알지 않는다.
+ */
+declare function endpointSearchFn(endpoint: string, searchParam: string, hostFetch: HostFetch): AutocompleteSearchFn;
 /**
  * 응답이 배열이 아니면 items/data/results/rows 래핑까지 풀어 준다.
  * 조회를 앱이 맡게 됐으므로 이 정규화도 함께 내보낸다 — 앱마다 다시 짤 규칙이 아니다.
@@ -59,4 +86,4 @@ declare function toAutocompleteOptions(payload: unknown): AutocompleteOption[];
  */
 declare const AutocompleteField: React__default.FC<AutocompleteFieldProps & SduiBoxProps>;
 
-export { AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompleteSearchFn, type AutocompleteSearchResult, toAutocompleteOptions };
+export { AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompleteSearchFn, type AutocompleteSearchResult, endpointSearchFn, toAutocompleteOptions };

package/dist/widgets/AutocompleteField.js

@@ -1,5 +1,6 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-SRGXODY2.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-OG62LSFH.js';
 import '../chunk-U7ZK7WYH.js';
+import '../chunk-DVOPZFQS.js';
 import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.d.ts

@@ -38,10 +38,12 @@ import { DisclosureProps } from './Disclosure.js';
 export { Disclosure } from './Disclosure.js';
 import { DiffViewProps } from './DiffView.js';
 export { DiffField, DiffList, DiffView } from './DiffView.js';
-import * as React from 'react';
-import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import { ColumnBoardProps } from './ColumnBoard.js';
 export { ColumnBoard, ColumnBoardColumn, ColumnBoardItem, ColumnBoardTone } from './ColumnBoard.js';
+import * as React from 'react';
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+import { ApprovalStepperProps } from './ApprovalStepper.js';
+export { ApprovalStepper, ApprovalStepperStep } from './ApprovalStepper.js';
 export { AutocompleteField, AutocompleteFieldProps, AutocompleteOption, AutocompleteSearchFn, AutocompleteSearchResult, toAutocompleteOptions } from './AutocompleteField.js';
 
 /**
@@ -52,6 +54,7 @@ export { AutocompleteField, AutocompleteFieldProps, AutocompleteOption, Autocomp
  * `SduiWidgetComponentName`이 어휘 목록이 되게 한다.
  */
 declare const widgetComponents: {
+    ApprovalStepper: React.FC<ApprovalStepperProps & SduiBoxProps>;
     ColumnBoard: React.FC<ColumnBoardProps & SduiBoxProps>;
     DiffView: React.FC<DiffViewProps & SduiBoxProps>;
     Disclosure: React.FC<DisclosureProps & SduiBoxProps>;
@@ -77,4 +80,4 @@ declare const widgetComponents: {
 /** 위젯 어휘의 컴포넌트 이름 union — 메타데이터 대조에 쓴다(`@wipco/sdui/meta`). */
 type SduiWidgetComponentName = keyof typeof widgetComponents;
 
-export { ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OrgChartProps, PeriodFilterProps, PrintSheetProps, RecordSheetProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };
+export { ApprovalStepperProps, ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OrgChartProps, PeriodFilterProps, PrintSheetProps, RecordSheetProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };

package/dist/widgets/index.js

@@ -1,7 +1,11 @@
+import { Timeline } from '../chunk-EFYEOT47.js';
+export { Timeline } from '../chunk-EFYEOT47.js';
 import { TreePicker } from '../chunk-EQW24SJC.js';
 export { TreePicker } from '../chunk-EQW24SJC.js';
 import { TreeView } from '../chunk-IDUN2ESE.js';
 export { TreeView, buildTreeNodes } from '../chunk-IDUN2ESE.js';
+import { PrintSheet } from '../chunk-MYJ2KEIP.js';
+export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import { RecordSheet } from '../chunk-K3JBSWFI.js';
 export { RecordSheet } from '../chunk-K3JBSWFI.js';
 import { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
@@ -16,8 +20,8 @@ import { SummaryTable } from '../chunk-O4U7Y3XL.js';
 export { SummaryTable } from '../chunk-O4U7Y3XL.js';
 import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
-import { Timeline } from '../chunk-EFYEOT47.js';
-export { Timeline } from '../chunk-EFYEOT47.js';
+import { Disclosure } from '../chunk-HIZ2OVJA.js';
+export { Disclosure } from '../chunk-HIZ2OVJA.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
 export { EventCalendar } from '../chunk-C3JY6GA3.js';
 import { ImageLightbox } from '../chunk-XPBZMECW.js';
@@ -32,23 +36,23 @@ import { OrgChart } from '../chunk-QWJ3OBBL.js';
 export { OrgChart } from '../chunk-QWJ3OBBL.js';
 import { PeriodFilter } from '../chunk-PFUULIZ2.js';
 export { PeriodFilter } from '../chunk-PFUULIZ2.js';
-import { PrintSheet } from '../chunk-MYJ2KEIP.js';
-export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import '../chunk-THEP3VWY.js';
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-SRGXODY2.js';
+import { ApprovalStepper } from '../chunk-ZTQEP3TR.js';
+export { ApprovalStepper } from '../chunk-ZTQEP3TR.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-OG62LSFH.js';
 import '../chunk-U7ZK7WYH.js';
+import '../chunk-DVOPZFQS.js';
 import '../chunk-XKLUCUVA.js';
 import { ColumnBoard } from '../chunk-C4JRSZGS.js';
 export { ColumnBoard } from '../chunk-C4JRSZGS.js';
 import { DiffView } from '../chunk-LDJ2CFFH.js';
 export { DiffView } from '../chunk-LDJ2CFFH.js';
-import { Disclosure } from '../chunk-HIZ2OVJA.js';
-export { Disclosure } from '../chunk-HIZ2OVJA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';
 
 // src/widgets/index.ts
 var widgetComponents = {
+  ApprovalStepper,
   ColumnBoard,
   DiffView,
   Disclosure,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -36,6 +36,10 @@
       "types": "./dist/widgets/index.d.ts",
       "default": "./dist/widgets/index.js"
     },
+    "./widgets/ApprovalStepper": {
+      "types": "./dist/widgets/ApprovalStepper.d.ts",
+      "default": "./dist/widgets/ApprovalStepper.js"
+    },
     "./widgets/AutocompleteField": {
       "types": "./dist/widgets/AutocompleteField.d.ts",
       "default": "./dist/widgets/AutocompleteField.js"
@@ -155,7 +159,8 @@
     "ol": ">=9",
     "react": ">=18",
     "react-dom": ">=18",
-    "recharts": ">=3"
+    "recharts": ">=3",
+    "xlsx": ">=0.18"
   },
   "peerDependenciesMeta": {
     "ol": {
@@ -163,6 +168,9 @@
     },
     "recharts": {
       "optional": true
+    },
+    "xlsx": {
+      "optional": true
     }
   },
   "devDependencies": {