@wipco/sdui 0.22.0 → 0.23.0

package/dist/{chunk-PNVOE5VH.js → chunk-36MXPCJP.js}

@@ -1,5 +1,5 @@
 import { useDismiss, usePopoverAnchor, usePortalTo, HoistedStyle, AnchoredPopoverStyles, anchorStyle, focusStaysInside } from './chunk-XKLUCUVA.js';
-import { Icon } from './chunk-WIDDHR7L.js';
+import { Icon, Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -194,5 +194,66 @@ var TP_CSS = `
 .wp-tp-opt--on{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
 `;
 var TimePicker = boxed(TimePickerImpl, "TimePicker");
+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;
+}
+var optionalModuleCache = /* @__PURE__ */ new WeakMap();
+function loadOptionalModule(load, packageName) {
+  const cached = optionalModuleCache.get(load);
+  if (cached) return cached;
+  const pending = load().catch((error) => {
+    console.warn(`[sdui] \uC120\uD0DD \uC758\uC874\uC131 '${packageName}' \uB85C\uB4DC \uC2E4\uD328`, error);
+    optionalModuleCache.delete(load);
+    throw new Error(`${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC124\uCE58\uD574 \uC8FC\uC138\uC694`);
+  });
+  optionalModuleCache.set(load, pending);
+  return pending;
+}
+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."
+      ] })
+    }
+  );
+}
 
-export { TimePicker };
+export { DependencyPlaceholder, TimePicker, loadOptionalModule, useOptionalModule };

package/dist/{chunk-WGRB5UL4.js → chunk-DVOPZFQS.js}

@@ -53,7 +53,8 @@ var defaultAdapter = {
     window.location.assign(to);
   },
   fetch: defaultFetch,
-  rawFetch: (path) => fetch(path, { credentials: "include" }),
+  // init을 반드시 흘린다 — 버리면 드롭인 소비자의 업로드가 본문 없는 GET이 된다.
+  rawFetch: (path, init) => fetch(path, { credentials: "include", ...init }),
   // 항등함수. 계약을 문서화하고, 컴포넌트가 `useSduiAssetResolver()`를 조건 없이
   // 부를 수 있게 하는 것이 전부다. **이 함수 참조 자체가 표식**이기도 하다 —
   // `assetResolverOf`가 이것과 같은지 보고 "주입 없음"을 판정한다.

package/dist/{chunk-WZKDOZL2.js → chunk-OG62LSFH.js}

@@ -1,5 +1,5 @@
 import { includesLooseSearch } from './chunk-U7ZK7WYH.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-WGRB5UL4.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-DVOPZFQS.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';

package/dist/chunk-ZTQEP3TR.js

@@ -0,0 +1,211 @@
+import { Icon, Badge, Tooltip } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var STATUS_META = {
+  approved: {
+    icon: "check",
+    label: "\uC2B9\uC778",
+    bg: "var(--wp-status-success-bg)",
+    border: "var(--wp-status-success-border)",
+    fg: "var(--wp-status-success-fg)"
+  },
+  rejected: {
+    icon: "x",
+    label: "\uBC18\uB824",
+    bg: "var(--wp-status-danger-bg)",
+    border: "var(--wp-status-danger-border)",
+    fg: "var(--wp-status-danger-fg)"
+  },
+  skipped: {
+    icon: "minus",
+    label: "\uAC74\uB108\uB700",
+    bg: "var(--wp-status-neutral-bg)",
+    border: "var(--wp-status-neutral-border)",
+    fg: "var(--wp-status-neutral-fg)"
+  },
+  current: {
+    icon: "circle-dot",
+    label: "\uC9C4\uD589 \uC911",
+    bg: "var(--wp-surface-brand-tint)",
+    border: "var(--wp-border-brand)",
+    fg: "var(--wp-text-brand)"
+  },
+  pending: {
+    icon: "circle-dot",
+    label: "\uB300\uAE30",
+    bg: "var(--wp-surface-card)",
+    border: "var(--wp-border-subtle)",
+    fg: "var(--wp-text-muted)"
+  }
+};
+function stepTitle(step, index, typeLabels) {
+  const name = step.name?.trim();
+  if (name) return name;
+  if (step.type) return typeLabels?.[step.type] ?? step.type;
+  return `${index + 1}\uB2E8\uACC4`;
+}
+function formatDateTime(value) {
+  const time = Date.parse(value);
+  if (Number.isNaN(time)) return value;
+  const date = new Date(time);
+  const pad = (part) => String(part).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+var circleStyle = (bg, border, fg, ring) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  flex: "none",
+  borderRadius: "var(--wp-radius-pill)",
+  background: bg,
+  border: `var(--wp-border-w) solid ${border}`,
+  color: fg,
+  boxShadow: ring ? "var(--wp-ring-selected)" : void 0
+});
+var nodeStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "var(--wp-space-1)",
+  flex: "none",
+  minWidth: 88,
+  maxWidth: 140,
+  padding: "var(--wp-space-1)"
+};
+var nodeTextStyle = {
+  display: "block",
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  textAlign: "center"
+};
+var connectorStyle = {
+  flex: "none",
+  width: "var(--wp-space-6)",
+  height: 0,
+  borderTop: "var(--wp-border-w) solid var(--wp-divider)",
+  // 원(32px) 세로 중앙에 맞춘다: 노드 padding(space-1) + 16px
+  marginTop: "calc(var(--wp-space-1) + 16px)"
+};
+function stepTooltip(step, index, typeLabels) {
+  const meta = STATUS_META[step.status ?? "pending"];
+  const lines = [`${stepTitle(step, index, typeLabels)} \u2014 ${meta.label}`];
+  if (step.approver) lines.push(`\uCC98\uB9AC\uC790: ${step.approver}`);
+  if (step.processedAt) lines.push(`\uCC98\uB9AC \uC77C\uC2DC: ${formatDateTime(step.processedAt)}`);
+  if (step.candidates && step.candidates.length > 0) {
+    lines.push(`\uACB0\uC7AC \uD6C4\uBCF4: ${step.candidates.join(", ")}`);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line) => /* @__PURE__ */ jsx("span", { style: { display: "block" }, children: line }, line)) });
+}
+function ApprovalStepperImpl({
+  requester,
+  steps,
+  onStepClick,
+  typeLabels
+}) {
+  const safeSteps = steps ?? [];
+  const clickable = typeof onStepClick === "function";
+  const requesterNode = requester ? /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: circleStyle(
+          "var(--wp-surface-sunken)",
+          "var(--wp-border-subtle)",
+          "var(--wp-text-muted)",
+          false
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { name: "user", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { ...nodeTextStyle, color: "var(--wp-text-strong)" }, children: requester.name }),
+    /* @__PURE__ */ jsx("span", { className: "wp-caption", style: nodeTextStyle, children: requester.sub?.trim() || "\uC2E0\uCCAD\uC790" })
+  ] }) : null;
+  if (safeSteps.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { overflowX: "auto", paddingBottom: "var(--wp-space-1)" }, children: [
+      requesterNode,
+      requesterNode ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }) : null,
+      /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
+        /* @__PURE__ */ jsxs(Badge, { tone: "success", size: "lg", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "check-check", size: 14, style: { marginRight: "var(--wp-space-1)" } }),
+          "\uC790\uB3D9 \uC2B9\uC778"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { textAlign: "center", whiteSpace: "nowrap" }, children: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC5B4 \uC790\uB3D9\uC73C\uB85C \uC2B9\uC778\uB429\uB2C8\uB2E4" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "wp-row",
+      role: "list",
+      "aria-label": "\uACB0\uC7AC \uC9C4\uD589 \uB2E8\uACC4",
+      style: {
+        alignItems: "flex-start",
+        gap: 0,
+        overflowX: "auto",
+        paddingBottom: "var(--wp-space-1)"
+      },
+      children: [
+        requesterNode,
+        safeSteps.map((step, index) => {
+          const status = step.status ?? "pending";
+          const meta = STATUS_META[status];
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: circleStyle(meta.bg, meta.border, meta.fg, status === "current"), children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 16 }) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "wp-body-sm",
+                style: {
+                  ...nodeTextStyle,
+                  color: status === "skipped" ? "var(--wp-text-muted)" : "var(--wp-text-strong)"
+                },
+                children: stepTitle(step, index, typeLabels)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "wp-caption",
+                style: {
+                  ...nodeTextStyle,
+                  color: status === "rejected" ? "var(--wp-text-danger)" : status === "current" ? "var(--wp-text-brand)" : void 0
+                },
+                children: step.approver?.trim() || meta.label
+              }
+            )
+          ] });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            (requesterNode || index > 0) && /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }),
+            /* @__PURE__ */ jsx(Tooltip, { label: stepTooltip(step, index, typeLabels), wrap: true, placement: "top", children: clickable ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "listitem",
+                onClick: () => onStepClick?.(step),
+                style: {
+                  ...nodeStyle,
+                  background: "none",
+                  border: 0,
+                  font: "inherit",
+                  cursor: "pointer",
+                  borderRadius: "var(--wp-radius-sm)"
+                },
+                children: body
+              }
+            ) : /* @__PURE__ */ jsx("div", { role: "listitem", style: nodeStyle, children: body }) })
+          ] }, step.id);
+        })
+      ]
+    }
+  );
+}
+var ApprovalStepper = boxed(ApprovalStepperImpl, "ApprovalStepper");
+
+export { ApprovalStepper };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
-import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-BNdv5-jn.js';
-export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-BNdv5-jn.js';
+import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-DmHC7HCN.js';
+export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-DmHC7HCN.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-B1QrIBm6.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-B1QrIBm6.js';
 import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-D2EtpvkQ.js';
@@ -19,6 +19,11 @@ interface SduiAdapter {
      * submitForm 등 JSON API 호출. 성공 시 응답 JSON을, 실패 시
      * Error(사용자에게 보여줄 메시지)를 던진다.
      *
+     * 던지는 오류에 **`status`(HTTP 상태)와 `body`(파싱된 응답 본문)를 얹어도 된다.**
+     * 필수는 아니지만, 얹으면 스펙이 상태 코드로 갈라 쓸 수 있다(`request` 액션의
+     * `errorKey` 참고 — 409의 위반 목록을 화면에 그리는 것이 그 자리다). 라이브러리는
+     * 있으면 읽고 없으면 메시지만 쓴다 — 특정 앱의 오류 타입을 알지 않는다.
+     *
      * `signal`은 호출부가 중단할 수 있는 조회(목록 재조회 등)에서만 넘어온다 —
      * 선택 사항이라 무시해도 계약은 성립하지만, 넘겨받은 호스트는 자기 클라이언트에
      * 그대로 흘려 보내면 파라미터가 바뀔 때 이전 요청이 실제로 끊긴다.
@@ -28,8 +33,25 @@ interface SduiAdapter {
         body?: unknown;
         signal?: AbortSignal;
     }) => Promise<unknown>;
-    /** download 액션용 원시 fetch. 기본: fetch(path, { credentials: 'include' }) */
-    rawFetch?: (path: string) => Promise<Response>;
+    /**
+     * 원시 fetch — **직렬화하지 않는 통로**다. `fetch`가 본문을 JSON으로 굳혀 보내는 것과
+     * 정반대이고, 그 차이가 이 항목의 존재 이유다: 업로드의 `FormData`는 경계 문자열
+     * (boundary)을 브라우저가 붙여야 하는데 `JSON.stringify`를 태우면 `"{}"`가 된다.
+     *
+     * `init`을 받는다. 예전에는 경로 하나만 받아 download 액션의 GET만 낼 수 있었고,
+     * multipart POST나 DELETE를 실을 자리가 없었다.
+     *
+     * ⚠ **호스트 구현을 1인자로 남겨 두면 안 된다.** `(path) => myFetch(path)`처럼 쓰면
+     * 타입은 통과하는데 `init`이 조용히 버려져 POST가 본문 없는 GET으로 나간다.
+     * 타입 검사로도 {@link hostRawFetchOf}로도 잡히지 않는 자리라 여기 적어 둔다.
+     */
+    rawFetch?: (path: string, init?: {
+        method?: string;
+        /** 직렬화하지 않고 그대로 흘린다 — FormData·Blob·string 전부 가능. */
+        body?: BodyInit;
+        headers?: Record<string, string>;
+        signal?: AbortSignal;
+    }) => Promise<Response>;
     /** invalidate 액션 — 클라이언트 조회 캐시 무효화 (TanStack Query 등) */
     invalidate?: (prefix: string, exact: boolean) => void;
     /** refresh 액션 — 페이지 스펙 재조회 */
@@ -1683,6 +1705,17 @@ declare function SduiRenderer({ page, registry, adapter, syncUrlState, initialSt
  */
 declare const CALC_OPS: ReadonlySet<string>;
 
+/**
+ * 선택적 peer 의존성(recharts · ol)을 런타임에 끌어오는 공용 장치.
+ *
+ * 이 진입점(@wipco/sdui/rich)의 위젯은 무거운 라이브러리를 쓰지만, 그 라이브러리는
+ * optional peerDependency다 — 안 깔려 있어도 렌더가 죽으면 안 된다. 그래서
+ * 모듈은 동적 import로만 만지고, 로드에 실패하면 예외를 그대로 흘리지 않고
+ * "무엇을 설치해야 하는지" 알려주는 플레이스홀더로 떨어진다.
+ */
+
+declare function loadOptionalModule<T>(load: () => Promise<T>, packageName: string): Promise<T>;
+
 /**
  * 스펙 구조 검증기 — 서버(또는 편집기)가 만든 스펙의 형태 오류를 렌더 전에 찾아낸다.
  * 렌더러는 개발 모드에서 이 결과를 콘솔에 경고하고, 관리자 편집기는
@@ -1837,4 +1870,4 @@ interface ImageViewerProps {
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, loadOptionalModule, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };

package/dist/index.js

@@ -1,11 +1,11 @@
-import { TimePicker } from './chunk-PNVOE5VH.js';
-export { TimePicker } from './chunk-PNVOE5VH.js';
+import { TimePicker } from './chunk-36MXPCJP.js';
+export { TimePicker, loadOptionalModule } from './chunk-36MXPCJP.js';
 import { ImageViewer } from './chunk-THEP3VWY.js';
 export { ImageViewer } from './chunk-THEP3VWY.js';
 import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-U7ZK7WYH.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-U7ZK7WYH.js';
-import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-WGRB5UL4.js';
-export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-WGRB5UL4.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, OverlayLayer } from './chunk-XKLUCUVA.js';
 export { DatePicker, DateRangePicker, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XKLUCUVA.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, Dialog } from './chunk-WIDDHR7L.js';
@@ -2108,6 +2108,17 @@ async function runRequestAction(action, deps) {
     (action.onSuccess ?? []).forEach((a) => deps.dispatch(a, response));
   } catch (error) {
     const message = error instanceof Error ? error.message : "\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4";
+    if (typeof action.errorKey === "string" && action.errorKey !== "") {
+      const detail = error;
+      const value = { message };
+      if (typeof detail?.status === "number") value.status = detail.status;
+      if (detail?.body !== void 0) value.body = detail.body;
+      deps.dispatch({
+        action: "setState",
+        key: action.errorKey,
+        value
+      });
+    }
     if (action.onError?.length) {
       action.onError.forEach((a) => deps.dispatch(a, message));
     } else {

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { b as SduiPropValue, i as SduiNode } from './types-BNdv5-jn.js';
+import { b as SduiPropValue, i as SduiNode } from './types-DmHC7HCN.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.
@@ -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,6 +3293,106 @@ 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",
@@ -4710,6 +4810,7 @@ var StripMeta = {
   resize: { kind: "none" }
 };
 var widgetComponentMeta = {
+  ApprovalStepper: ApprovalStepperMeta,
   AutocompleteField: AutocompleteFieldMeta,
   ColumnBoard: ColumnBoardMeta,
   DiffView: DiffViewMeta,
@@ -4767,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 @@
-export { TimePicker } from './chunk-PNVOE5VH.js';
-import { useSduiAssetResolver } from './chunk-WGRB5UL4.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-BNdv5-jn.d.ts → types-DmHC7HCN.d.ts}

@@ -202,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단계 커밋 계약
@@ -218,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.js

@@ -1,6 +1,6 @@
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-WZKDOZL2.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-OG62LSFH.js';
 import '../chunk-U7ZK7WYH.js';
-import '../chunk-WGRB5UL4.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,24 +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-WZKDOZL2.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-WGRB5UL4.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.22.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": {