@wipco/sdui 0.50.1 → 1.0.0

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { b as SduiPropValue, i as SduiNode } from './types-D14eqLpf.js';
+import { b as SduiPropValue, i as SduiNode } from './types-C7y9CpgF.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.
@@ -256,7 +256,7 @@ declare function withSelfAxis(meta: SduiComponentMeta): SduiComponentMeta;
 declare function withSelfAxisAll(catalog: Record<string, SduiComponentMeta>): Record<string, SduiComponentMeta>;
 
 /**
- * 기본 어휘(`defaultRegistry`) 41종의 빌더 메타데이터.
+ * 기본 어휘(`defaultRegistry`) 42종의 빌더 메타데이터.
  *
  * 프롭 목록은 `components.tsx`·`primitives.tsx`·`SduiForm.tsx`·`Can.tsx`·
  * `DatePicker.tsx`·`search/SduiSearchResults.tsx`의 **실제 프롭 인터페이스**와,
@@ -332,7 +332,7 @@ declare const ShowMeta: SduiComponentMeta;
  * 컴파일 시점에 난다 — 둘이 어긋난 채로는 빌드가 통과하지 않는다.
  *
  * 팔레트처럼 전체가 필요한 곳이 아니면 개별 export(`ButtonMeta` 등)를 쓰는 편이
- * 번들에 유리하다 — 이 객체를 참조하는 순간 41종이 전부 따라온다.
+ * 번들에 유리하다 — 이 객체를 참조하는 순간 42종이 전부 따라온다.
  */
 declare const coreComponentMeta: {
     Actions: SduiComponentMeta;
@@ -399,7 +399,7 @@ declare const richComponentMeta: {
 };
 
 /**
- * `@wipco/sdui/widgets` 어휘 21종의 빌더 메타데이터.
+ * `@wipco/sdui/widgets` 어휘 37종의 빌더 메타데이터.
  *
  * core와 파일을 나눈 이유는 `rich.ts`와 같다 — 위젯을 얹지 않은 소비자가 이 데이터를
  * 받지 않게 하려는 것이다. 여기도 값 import는 없다(`import type`만).
@@ -464,11 +464,12 @@ declare const StripMeta: SduiComponentMeta;
  * 위젯 어휘의 메타데이터.
  *
  * 키 타입이 `SduiWidgetComponentName | 'AutocompleteField' | 'FileDropzone' | 'ExcelUploadCard'`인 이유:
- * 앞의 20종은 `widgetComponents`와 키가 어긋나면 컴파일 에러가 나야 하고(core·rich와 같다),
- * `AutocompleteField`는 그 묶음에 **일부러 빠져 있는** 이름이라 union에 직접 적어야 한다.
- * 표시 계층만 라이브러리에 있고 조회는 앱 어댑터가 얹는 구조인데(widgets/index.ts 참고),
- * 스펙과 빌더 입장에서는 엄연히 쓰는 어휘라 메타데이터까지 빼면 속성 패널이 6곳의
- * 프롭을 못 그린다.
+ * 앞의 34종은 `widgetComponents`와 키가 어긋나면 컴파일 에러가 나야 하고(core·rich와 같다),
+ * `AutocompleteField`·`FileDropzone`·`ExcelUploadCard`는 그 묶음에 **일부러 빠져 있는**
+ * 이름들이라 union에 직접 적어야 한다(빠진 사정은 widgets/index.ts 주석 참고 —
+ * AutocompleteField는 조회를 앱 어댑터가 얹고, FileDropzone은 rawFetch 없이는 업로드가
+ * 안 되며, ExcelUploadCard는 rich 진입점이다). 스펙과 빌더 입장에서는 셋 다 엄연히
+ * 쓰는 어휘라 메타데이터까지 빼면 속성 패널이 그 노드들의 프롭을 못 그린다.
  */
 declare const widgetComponentMeta: {
     ApprovalLineEditor: SduiComponentMeta;
@@ -560,7 +561,7 @@ declare const dsComponentMeta: {
  * ForEach는 레지스트리에 없다 — `SduiRenderer`가 노드를 보고 직접 반복 스코프를
  * 만든다. 그래서 core/rich처럼 레지스트리 키와 타입으로 대조할 대상이 없고,
  * 대신 여기 한 곳에 모아 둔다. 렌더러에 내장 어휘가 늘면 여기도 늘려야 한다
- * (`scripts/check-meta.mts`가 `SduiRenderer.tsx`를 훑어 누락을 잡는다).
+ * (`scripts/check-meta.mjs`가 `SduiRenderer.tsx`를 훑어 누락을 잡는다).
  */
 
 declare const ForEachMeta: SduiComponentMeta;
@@ -589,11 +590,11 @@ declare const SDUI_CATEGORIES: ReadonlyArray<{
     label: string;
 }>;
 /**
- * 라이브러리가 아는 어휘 전체 — 기본 42 + rich 2 + 위젯 22 + DS 6 + 렌더러 내장 2 = 74종.
+ * 라이브러리가 아는 어휘 전체 — 기본 42 + rich 2 + 위젯 37 + DS 6 + 렌더러 내장 2 = 89종.
  * 편집기처럼 어휘 전부를 다뤄야 하는 쪽에서 쓴다.
  *
  * **레지스트리와 일대일이 아니다.** `defaultRegistry`에 없는 것도 들어 있다 —
- * rich 2종, 위젯 22종, DS 6종은 소비자가 `createRegistry`로 직접 얹는 어휘라서
+ * rich 2종, 위젯 37종, DS 6종은 소비자가 `createRegistry`로 직접 얹는 어휘라서
  * 여기 있다고 곧바로 렌더되지는 않는다. 이 목록은 "빌더가 프롭을 그릴 줄 아는 이름"이지
  * "지금 렌더할 수 있는 이름"이 아니다.
  *

package/dist/meta.js

@@ -91,6 +91,7 @@ var SIZE_OPTIONS = [
   { value: "full", label: "\uBD80\uBAA8 \uD3ED \uAC00\uB4DD" }
 ];
 var SPACE_OPTIONS = [
+  { value: "0", label: "0px (\uC5EC\uBC31 \uC5C6\uC74C)" },
   { value: "2", label: "2px" },
   { value: "4", label: "4px" },
   { value: "8", label: "8px" },
@@ -457,6 +458,15 @@ var CardMeta = {
   props: [
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
     { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" },
+    {
+      name: "cover",
+      kind: "node",
+      label: "\uD45C\uC9C0",
+      slot: true,
+      description: "\uBA38\uB9AC \uC704\uC5D0 \uAF49 \uCC28\uAC8C \uAE54\uB9AC\uB294 \uD45C\uC9C0 \u2014 \uBAA9\uB85D \uCE74\uB4DC\uC758 \uB300\uD45C \uC0AC\uC9C4 \uC790\uB9AC\uB2E4. \uC548\uCABD \uC5EC\uBC31\uC744 \uBB34\uC2DC\uD558\uACE0 \uC704 \uB450 \uBAA8\uC11C\uB9AC\uB9CC \uCE74\uB4DC \uACE1\uB960\uC744 \uB530\uB978\uB2E4.",
+      group: "content"
+    },
+    // 검색 gridCard 의 imageKey 가 실제로 쓴다(cell-image 테스트가 wp-card__cover 를 확인한다)
     {
       name: "variant",
       kind: "enum",
@@ -636,7 +646,9 @@ var PageHeadMeta = {
   description: "\uD398\uC774\uC9C0 \uC0C1\uB2E8\uC758 \uC81C\uBAA9\xB7\uBD80\uC81C\xB7\uC561\uC158 \uC601\uC5ED.",
   props: [
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
-    { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" }
+    { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" },
+    styleProp,
+    classNameProp
   ],
   slots: [
     { name: "actions", label: "\uC6B0\uCE21 \uC561\uC158", allow: ["Actions", "Button", "IconButton", "Row", "Show", "Can"] }
@@ -2859,7 +2871,10 @@ var RadioMeta = {
     },
     { name: "value", kind: "string", label: "\uAC12", description: "\uC774 \uD56D\uBAA9\uC744 \uACE8\uB790\uC744 \uB54C\uC758 \uAC12.", group: "data" },
     { name: "checked", kind: "boolean", label: "\uC120\uD0DD\uB428", bindable: true, group: "data" },
-    { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC120\uD0DD \uC5EC\uBD80(boolean)", group: "behavior" },
+    // radio 는 checkbox 와 달리 checked(boolean)가 아니라 input 의 value 문자열이 이벤트 값이다
+    // (렌더러의 eventValue 가 checkbox 만 checked 로 꺼낸다). fromEvent 보다는 프리셋처럼
+    // value 리터럴 setState 를 거는 편이 안전하다.
+    { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC774 \uB77C\uB514\uC624\uC758 value \uBB38\uC790\uC5F4(fromEvent \uC0AC\uC6A9 \uC2DC \u2014 value \uBBF8\uC9C0\uC815\uC774\uBA74 'on')", group: "behavior" },
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     styleProp2,
     classNameProp2
@@ -3762,7 +3777,7 @@ var OrgChartBoardMeta = {
       kind: "action",
       label: "\uC0AC\uC6D0 \uCE74\uB4DC \uD074\uB9AD",
       eventArg: "\uC0AC\uC6D0 \uD589(snake_case \uC6D0\uBB38 \u2014 id\xB7name\xB7grade\xB7job_title\xB7department_id \u2026)",
-      description: "\uBE44\uC6B0\uBA74 \uC704\uC82F\uC774 /hr/personal-card/{id}\uB85C \uC9C1\uC811 \uC774\uB3D9\uD55C\uB2E4.",
+      description: '\uBE44\uC6B0\uBA74 \uD074\uB9AD\uD574\uB3C4 \uC544\uBB34 \uC77C\uB3C4 \uD558\uC9C0 \uC54A\uB294\uB2E4 \u2014 \uC0C1\uC138 \uD654\uBA74 \uACBD\uB85C\uB294 \uC18C\uBE44 \uC571\uC758 \uAC83\uC774\uB77C \uC704\uC82F\uC774 \uBAA8\uB978\uB2E4. \uC0C1\uC138\uB85C \uBCF4\uB0B4\uB824\uBA74 setState(fromEvent)\uB85C \uD589\uC744 \uBC1B\uC544 \uB450\uACE0 navigate \uC758 to \uB97C { "$calc": { "op": "concat", "args": ["/\uC571\uC758/\uC0C1\uC138/\uACBD\uB85C/", { "$state": "orgMember.id" }] } } \uCC98\uB7FC \uC787\uB294\uB2E4.',
       group: "behavior"
     },
     {
@@ -3797,25 +3812,69 @@ var OrgChartBoardMeta = {
       description: "\uC11C\uC5F4 \uC815\uB82C\uC5D0 \uC4F4\uB2E4. \uC2E4\uD328\uD574\uB3C4 \uC774\uB984\uC21C\uC73C\uB85C \uB5A8\uC5B4\uC9C4\uB2E4. \uAE30\uBCF8 '/job-positions'.",
       group: "data",
       advanced: true
+    },
+    // 아래 직제 어휘 5종은 전부 "주면 기본값을 통째로 대체"다 — 기본과 주입을 섞으면
+    // 어느 회사의 직제도 아니게 된다(구현의 orgVocabOf 참조).
+    {
+      name: "dutyOrder",
+      kind: "array",
+      label: "\uC9C1\uCC45 \uC11C\uC5F4",
+      description: "\uB192\uC740 \uC21C \uBB38\uC790\uC5F4 \uBAA9\uB85D. \uC8FC\uBA74 \uAE30\uBCF8 \uC11C\uC5F4(\uD68C\uC7A5\u2026\uD30C\uD2B8\uC7A5, v2 \uD558\uB4DC\uCF54\uB529)\uC744 \uD1B5\uC9F8\uB85C \uB300\uCCB4\uD55C\uB2E4. \uBCF5\uD569 \uBA85\uCE6D\uC740 \uAC00\uC7A5 \uAE34 \uD3EC\uD568 \uD56D\uBAA9\uC73C\uB85C \uB9E4\uCE6D\uD55C\uB2E4.",
+      group: "data",
+      advanced: true,
+      item: [],
+      itemKind: "string"
+    },
+    {
+      name: "gradeOrder",
+      kind: "array",
+      label: "\uC9C1\uC704 \uC11C\uC5F4 \uD3F4\uBC31",
+      description: "\uC9C1\uC704 \uB9C8\uC2A4\uD130\uB97C \uBABB \uC77D\uC5C8\uC744 \uB54C\uB9CC \uC4F0\uB294 \uB192\uC740 \uC21C \uBAA9\uB85D. \uC8FC\uBA74 \uAE30\uBCF8\uAC12(\uD68C\uC7A5\u2026\uC778\uD134)\uC744 \uD1B5\uC9F8\uB85C \uB300\uCCB4\uD55C\uB2E4.",
+      group: "data",
+      advanced: true,
+      item: [],
+      itemKind: "string"
+    },
+    {
+      name: "leadershipMatch",
+      kind: "array",
+      label: "\uB9AC\uB354\uC2ED \uD310\uBCC4 \uD3EC\uD568\uC5B4",
+      description: '\uB9AC\uB354\uC2ED \uC2A4\uD0DD(\uC0C1\uB2E8 \uC778\uBB3C \uCE74\uB4DC)\uC73C\uB85C \uBF51\uC744 \uC9C1\uD568 \uD3EC\uD568\uC5B4 \u2014 \uC55E\uC5D0 \uC62C\uC218\uB85D \uC704(\uCD5C\uB300 3\uBA85). \uD56D\uBAA9\uC740 \uBB38\uC790\uC5F4 \uD558\uB098 \uB610\uB294 \uB3D9\uC21C\uC704 \uBB36\uC74C \uBC30\uC5F4(["\uC0AC\uC7A5","CEO"])\uC774\uACE0, \uC8FC\uBA74 \uAE30\uBCF8 \uBAA9\uB85D(\uD68C\uC7A5\xB7\uB300\uD45C\uC774\uC0AC\xB7\uB300\uD45C\xB7\uC0AC\uC7A5=CEO)\uC744 \uD1B5\uC9F8\uB85C \uB300\uCCB4\uD55C\uB2E4.',
+      group: "data",
+      advanced: true,
+      item: [],
+      itemKind: "string"
+    },
+    {
+      name: "unassignedGroupIds",
+      kind: "array",
+      label: "\uBBF8\uC9C0\uC815 \uADF8\uB8F9 id",
+      description: "\uC870\uC9C1\uB3C4\uC5D0\uC11C \uC228\uAE38 \uADF8\uB8F9 id \uBAA9\uB85D. \uC8FC\uBA74 \uAE30\uBCF8 \uC13C\uD2F0\uB110(kc_unassigned_department)\uC744 \uD1B5\uC9F8\uB85C \uB300\uCCB4\uD55C\uB2E4.",
+      group: "data",
+      advanced: true,
+      item: [],
+      itemKind: "string"
+    },
+    {
+      name: "unassignedNames",
+      kind: "array",
+      label: "\uBBF8\uC9C0\uC815 \uADF8\uB8F9 \uC774\uB984",
+      description: "id\uC640 \uBB34\uAD00\uD558\uAC8C \uC228\uAE38 \uADF8\uB8F9 \uC774\uB984 \uBAA9\uB85D. \uC8FC\uBA74 \uAE30\uBCF8\uAC12(['\uBBF8\uC9C0\uC815'])\uC744 \uD1B5\uC9F8\uB85C \uB300\uCCB4\uD55C\uB2E4 \u2014 \uB2E4\uB978 \uC5B8\uC5B4\xB7\uBA85\uCE6D\uC758 \uBC31\uC5D4\uB4DC\uC6A9.",
+      group: "data",
+      advanced: true,
+      item: [],
+      itemKind: "string"
     }
   ],
   children: { accepts: false },
   dom: { element: "div" },
   preset: {
     component: "OrgChartBoard",
+    // navigate 예시는 넣지 않는다 — 상세 화면 경로는 소비 앱의 라우트라서, 어떤 경로를
+    // 박아 둬도 다른 앱에서는 존재하지 않는 곳으로 이동하는 조각이 된다(구현이 같은
+    // 이유로 location.assign 폴백을 버렸다). 잇는 방법은 onMemberClick 설명에 있다.
     props: {
-      onMemberClick: [
-        { action: "setState", key: "orgMember", fromEvent: true },
-        {
-          action: "navigate",
-          to: {
-            $calc: {
-              op: "concat",
-              args: ["/hr/personal-card/", { $state: "orgMember.id", default: "" }]
-            }
-          }
-        }
-      ]
+      onMemberClick: [{ action: "setState", key: "orgMember", fromEvent: true }]
     }
   },
   resize: { kind: "none" }
@@ -4296,8 +4355,17 @@ var QRDisplayMeta = {
       group: "appearance"
     },
     // 실측 2/2 (148, 112)
-    { name: "caption", kind: "string", label: "\uCEA1\uC158", group: "content" }
+    { name: "caption", kind: "string", label: "\uCEA1\uC158", group: "content" },
     // 실측 2/2
+    {
+      name: "endpoint",
+      kind: "string",
+      label: "QR \uB80C\uB354\uB7EC \uACBD\uB85C",
+      description: "QR \uC774\uBBF8\uC9C0\uB97C \uB0B4\uC8FC\uB294 \uC11C\uBC84 \uACBD\uB85C \u2014 ?data=<\uC778\uCF54\uB529\uB41C URL>&size=<px> \uAC00 \uBD99\uB294\uB2E4. \uAE30\uBCF8 '/qr'. API \uAC00 \uB2E4\uB978 \uC624\uB9AC\uC9C4\uC774\uBA74 \uADF8 \uC808\uB300 \uC8FC\uC18C\uB97C \uB118\uAE34\uB2E4.",
+      group: "data",
+      advanced: true
+    }
+    // 스펙 실측 0 — ERP는 레지스트리 래퍼가 넘기지만(registry.tsx의 ErpQRDisplay), 스펙이 덮어쓸 수 있어야 한다
   ],
   children: { accepts: false },
   dom: { element: "figure" },

package/dist/rich/ExcelUploadCard.d.ts

@@ -30,6 +30,13 @@ interface ExcelUploadCardProps {
     summaryLabels?: Record<string, string>;
     /** server: 응답 JSON / preview: 서버 응답(없으면 유효 행 배열) */
     onComplete?: (result: unknown) => void;
+    /**
+     * 503 응답을 "백엔드 미연동(데모 모드)"으로 해석한다 — 미연동 상태를 503으로 알리는
+     * 개발 프록시 호스트 전용 opt-in. 503은 표준 Service Unavailable(재배포·과부하)이기도
+     * 해서, 기본(꺼짐)에서는 일반 오류로 알리고 재시도에 맡긴다 — 일시적 503 한 번에
+     * 업로드 버튼이 잠기면 안 된다.
+     */
+    demoModeOn503?: boolean;
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자기 축(폭·여백)이 닿게 하는 통로. */
 declare const ExcelUploadCard: React__default.FC<ExcelUploadCardProps & SduiBoxProps>;

package/dist/rich/ExcelUploadCard.js

@@ -1,11 +1,12 @@
-import { loadOptionalModule } from '../chunk-EKP6Z3G6.js';
-import { useSduiAdapter, useSduiSandbox, hostFetchOf, defaultAdapter, hostRawFetchOf } from '../chunk-DKPNFEVU.js';
-import { Select, Input, Card, Button, Spinner, Icon, Alert, StatCard, Badge, Table, EmptyState } from '../chunk-TUOG7EEI.js';
-import { boxed } from '../chunk-YQOMSWW5.js';
+import { loadOptionalModule } from '../chunk-YVTV4ZV6.js';
+import { useSduiAdapter, useSduiSandbox, hostFetchOf, defaultAdapter, hostRawFetchOf } from '../chunk-KO6OEY3G.js';
+import { Select, Input, Card, Button, Spinner, Icon, Alert, StatCard, Badge, Table, EmptyState } from '../chunk-RNOUXUBO.js';
+import { boxed } from '../chunk-5WW4MBRO.js';
 import { useRef, useState, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ACCEPT = ".xlsx,.xls";
+var loadXlsx = () => import('xlsx');
 function pickCell(raw, column) {
   const keys = Object.keys(raw);
   const match = keys.find((key) => key.trim() === column.header) ?? keys.find((key) => key.trim() === column.key);
@@ -48,7 +49,8 @@ function ExcelUploadCardImpl({
   templateColumns,
   columns,
   summaryLabels,
-  onComplete
+  onComplete,
+  demoModeOn503 = false
 }) {
   const adapter = useSduiAdapter();
   const sandbox = useSduiSandbox();
@@ -74,6 +76,7 @@ function ExcelUploadCardImpl({
     setResult(null);
     setRows(null);
     setNotice(null);
+    setDemoMode(false);
     setInputKey((key) => key + 1);
   }, []);
   const hasTemplate = (templateColumns?.length ?? 0) > 0 || Boolean(templateEndpoint);
@@ -81,7 +84,7 @@ function ExcelUploadCardImpl({
     setDownloading(true);
     try {
       if (templateColumns && templateColumns.length > 0) {
-        const XLSX = await loadOptionalModule(() => import('xlsx'), "xlsx");
+        const XLSX = await loadOptionalModule(loadXlsx, "xlsx");
         const headers = templateColumns.map((column) => column.header);
         const examples = templateColumns.map((column) => column.example ?? "");
         const sheet = XLSX.utils.aoa_to_sheet([headers, examples]);
@@ -93,7 +96,7 @@ function ExcelUploadCardImpl({
         XLSX.writeFile(workbook, "\uC5D1\uC140_\uC5C5\uB85C\uB4DC_\uD15C\uD50C\uB9BF.xlsx");
       } else if (templateEndpoint) {
         const res = await rawFetch(templateEndpoint, { method: "GET" });
-        if (res.status === 503) {
+        if (res.status === 503 && demoModeOn503) {
           setDemoMode(true);
           setNotice({
             tone: "warning",
@@ -117,7 +120,7 @@ function ExcelUploadCardImpl({
     } finally {
       setDownloading(false);
     }
-  }, [templateColumns, templateEndpoint]);
+  }, [demoModeOn503, rawFetch, templateColumns, templateEndpoint]);
   const handleServerUpload = useCallback(async () => {
     if (!file || !endpoint) return;
     setUploading(true);
@@ -131,7 +134,7 @@ function ExcelUploadCardImpl({
         return;
       }
       const res = await rawFetch(endpoint, { method: "POST", body: formData });
-      if (res.status === 503) {
+      if (res.status === 503 && demoModeOn503) {
         setDemoMode(true);
         return;
       }
@@ -155,7 +158,7 @@ function ExcelUploadCardImpl({
     } finally {
       setUploading(false);
     }
-  }, [endpoint, file, onComplete]);
+  }, [demoModeOn503, endpoint, file, onComplete, rawFetch, sandbox]);
   const validateRow = useCallback(
     (row) => {
       const errors = {};
@@ -174,7 +177,7 @@ function ExcelUploadCardImpl({
       setRows(null);
       try {
         const buffer = await selected.arrayBuffer();
-        const XLSX = await loadOptionalModule(() => import('xlsx'), "xlsx");
+        const XLSX = await loadOptionalModule(loadXlsx, "xlsx");
         const workbook = XLSX.read(buffer, { type: "array" });
         const sheet = workbook.Sheets[workbook.SheetNames[0]];
         if (!sheet) throw new Error("\uC5D1\uC140 \uD30C\uC77C\uC5D0\uC11C \uC2DC\uD2B8\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
@@ -243,7 +246,7 @@ function ExcelUploadCardImpl({
       setFileName(null);
       setInputKey((key) => key + 1);
     } catch (error) {
-      if (error?.status === 503) {
+      if (demoModeOn503 && error?.status === 503) {
         setDemoMode(true);
         setNotice({
           tone: "warning",
@@ -259,7 +262,7 @@ function ExcelUploadCardImpl({
     } finally {
       setImporting(false);
     }
-  }, [endpoint, onComplete, validRows]);
+  }, [api, demoModeOn503, endpoint, onComplete, sandbox, validRows]);
   const previewTableColumns = useMemo(() => {
     const base = [
       {
@@ -339,6 +342,7 @@ function ExcelUploadCardImpl({
   const handleFileChange = (event) => {
     const selected = event.target.files?.[0];
     if (!selected) return;
+    setDemoMode(false);
     if (mode === "preview") {
       void parsePreviewFile(selected);
     } else {

package/dist/rich.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue, e as TimePicker, T as TimePickerProps } from './DatePicker-BK_jsV7i.js';
+export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue, e as TimePicker, T as TimePickerProps } from './DatePicker-C_TT_SOw.js';
 import './layout-C3nRXMwb.js';
 
 /**

package/dist/rich.js

@@ -1,11 +1,10 @@
-import { useOptionalModule, DependencyPlaceholder } from './chunk-EKP6Z3G6.js';
-export { TimePicker } from './chunk-EKVA7T7P.js';
-import { HoistedStyle } from './chunk-I5Z2RVDF.js';
-export { DatePicker, DateRangePicker } from './chunk-I5Z2RVDF.js';
+import { useOptionalModule, DependencyPlaceholder } from './chunk-YVTV4ZV6.js';
+import { HoistedStyle } from './chunk-WSLT32Q4.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-WSLT32Q4.js';
 import './chunk-XQPTSEJC.js';
-import { useSduiAssetResolver } from './chunk-DKPNFEVU.js';
-import { Spinner, EmptyState } from './chunk-TUOG7EEI.js';
-import './chunk-YQOMSWW5.js';
+import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
+import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
+import './chunk-5WW4MBRO.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -25,11 +24,25 @@ function useSeriesPalette(ref) {
   useLayoutEffect(() => {
     const el = ref.current;
     if (el === null) return;
-    const computed = getComputedStyle(el);
-    const next = SERIES_FALLBACK.map(
-      (fallback, i) => computed.getPropertyValue(`--wp-series-${i + 1}`).trim() || fallback
-    );
-    setPalette((prev) => prev.every((color, i) => color === next[i]) ? prev : next);
+    const resolve = () => {
+      const computed = getComputedStyle(el);
+      const next = SERIES_FALLBACK.map(
+        (fallback, i) => computed.getPropertyValue(`--wp-series-${i + 1}`).trim() || fallback
+      );
+      setPalette((prev) => prev.every((color, i) => color === next[i]) ? prev : next);
+    };
+    resolve();
+    const observer = new MutationObserver(resolve);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    media?.addEventListener("change", resolve);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener("change", resolve);
+    };
   }, [ref]);
   return palette;
 }

package/dist/styles.css

@@ -969,10 +969,15 @@
  * ERP는 이 모양을 앱 셸 CSS(src/globals.css의 .erp-popover)로 냈고, 라이브러리에는
  * 클래스가 없어 search/popover.tsx가 같은 값을 인라인 style로 조립하고 있었다.
  * 클래스를 여기로 들여와 AutocompleteField 같은 이관 위젯이 그대로 동작하게 한다.
- * (이름을 erp-*로 둔 이유는 widgets/index.ts 주석과 같다 — 이관 중 두 사본이 겹쳐도
- *  규칙이 한 벌만 남아야 한다.)
+ *
+ * 정본 이름은 wp-popover*다(1.0) — npm 소비자가 겨눌 이름을 erp-*로 얼리면 나중의
+ * 개명이 그들의 CSS·e2e 선택자를 깨는 파괴적 변경이 된다. erp-*는 이관기 하위호환
+ * **별칭**으로 남는다: ERP 앱 셸 CSS와 이관 위젯(AutocompleteField 등)이 아직 이
+ * 이름을 겨누고 있어서다. 별칭 제거는 ERP 쪽 선택자 이관이 끝난 뒤에만 한다.
  */
+.wp-popover-host,
 .erp-popover-host { position: relative; }
+.wp-popover,
 .erp-popover {
   position: absolute; top: calc(100% + var(--wp-space-2)); right: 0; min-width: 100%;
   background: var(--wp-surface-card);
@@ -980,12 +985,15 @@
   border-radius: var(--wp-radius-lg); box-shadow: var(--wp-shadow-lg);
   z-index: var(--wp-z-dropdown);
 }
+.wp-popover--left,
 .erp-popover--left { right: auto; left: 0; }
 /* 내부 스크롤을 두지 않는다 — 낮은 창에서 60vh 캡이 필드 두 줄짜리 패널마저 잘라
    컨트롤이 반쯤 걸친 채 스크롤됐다(실사용 지적, 법인차 관리). 패널은 내용만큼 크고,
    화면보다 길면 페이지가 스크롤된다. 정말 긴 목록(분류 175종)은 목록 자신이
    스크롤한다(SearchToolbar 의 옵션 목록 max-height). */
+.wp-popover__body,
 .erp-popover__body { padding: var(--wp-space-4); }
+.wp-popover__foot,
 .erp-popover__foot {
   display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-2);
   padding: var(--wp-space-3); border-top: var(--wp-border-w) solid var(--wp-divider);

package/dist/{types-D14eqLpf.d.ts → types-C7y9CpgF.d.ts}

@@ -237,27 +237,29 @@ type SduiAction = {
     onError?: SduiAction[];
     /**
      * 실패 상세를 담을 상태 키. 주면 `onError` 체인이 돌기 **직전에**
-     * `{ status, message, body }` 를 여기 심는다.
+     * `{ status, message, body }` 를 여기 심는다. `request` 액션과 같은 계약이다.
      *
      * `onError` 의 이벤트 값은 예전 그대로 **문자열 메시지**다(기존 스펙 불변).
      * 상태 코드나 응답 본문으로 갈라 써야 할 때만 이 키를 준다 — 예컨대 서버가
      * 409 로 거절하며 위반 목록을 실어 보내면, 그것을 화면에 그리는 길이 여기다:
      *
-     *   { "action": "request", "endpoint": "…", "errorKey": "saveError",
+     *   { "action": "submitForm", "form": "f", "endpoint": "…", "errorKey": "saveError",
      *     "onError": [{ "action": "toast", "tone": "danger",
      *                   "message": { "$state": "saveError.message" } }] }
      *   → ForEach source: { "$state": "saveError.body.violations" }
      *
      * `status`·`body` 는 호스트 어댑터가 오류에 얹어 줬을 때만 채워진다
      * (계약은 {@link SduiAdapter.fetch} 참고). 안 얹으면 message 만 남는다.
+     * 검증 실패(규칙 위반·규칙 자체의 오류)에는 심지 않는다 — 그쪽은
+     * `{form}.$errors`와 검증 규칙 오류 토스트의 몫이다.
      */
     errorKey?: string;
     /**
      * 진행 상태를 담을 상태 키. 요청 직전에 `true`, 끝나면(성공·실패 모두) `false`.
      *
-     * `submitForm`이 `{form}.$submitting`을 관리하는 것과 같은 자리다 — 그쪽은 폼이
-     * 있어 이름이 파생되지만 `request`는 폼이 없으므로 키를 받는다. 버튼의
-     * `loading`·`disabled`를 여기 물리면 이중 제출과 무반응이 함께 사라진다.
+     * `{form}.$submitting` 이 이미 있는데 따로 받는 이유: 그쪽은 이름이 폼에서
+     * 파생되는 고정 키라, 폼 밖 버튼·여러 폼을 묶은 화면 조각이 물릴 이름을 스펙이
+     * 정할 수 없다. 검증에 걸려 요청이 안 나가면 켜지 않는다(`$submitting`과 다른 점).
      */
     pendingKey?: string;
 }

package/dist/widgets/ApprovalLineEditor.js

@@ -1,7 +1,8 @@
-export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-STX2AX6Y.js';
-import '../chunk-VDBUXYEB.js';
-import '../chunk-I5Z2RVDF.js';
+export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-FLAN7CV3.js';
+import '../chunk-Q4SWUINA.js';
+import '../chunk-WOYMEEPH.js';
+import '../chunk-WSLT32Q4.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DKPNFEVU.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+import '../chunk-KO6OEY3G.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/ApprovalOverridesEditor.d.ts

@@ -36,7 +36,17 @@ interface ApprovalOverridesEditorProps {
     searchOptions?: CustomApprover[];
     disabled?: boolean;
 }
+/**
+ * `/employees` 응답에서 직책·직급 distinct 추출. 봉투는 공용 규칙(items/data/
+ * results/rows, shared.unwrapRows)으로 풀고, 키는 스네이크(실측 job_title·grade)에
+ * 카멜(jobTitle) 폴백을 더한다 — 응답 모양이 다른 백엔드에서 조용한 무동작이 되지
+ * 않게 하기 위해서다. export 는 DOM 없이 그대로 재기 위한 것.
+ */
+declare function facetsFrom(payload: unknown): {
+    titles: string[];
+    grades: string[];
+};
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자기 축(폭·여백)이 닿게 하는 통로. */
 declare const ApprovalOverridesEditor: React__default.FC<ApprovalOverridesEditorProps & SduiBoxProps>;
 
-export { type ApprovalLineOverride, ApprovalOverridesEditor, type ApprovalOverridesEditorProps };
+export { type ApprovalLineOverride, ApprovalOverridesEditor, type ApprovalOverridesEditorProps, facetsFrom };

package/dist/widgets/ApprovalOverridesEditor.js

@@ -1,9 +1,10 @@
-export { ApprovalOverridesEditor } from '../chunk-IV5YTVHR.js';
-import '../chunk-JBKNIALK.js';
-import '../chunk-STX2AX6Y.js';
-import '../chunk-VDBUXYEB.js';
-import '../chunk-I5Z2RVDF.js';
+export { ApprovalOverridesEditor, facetsFrom } from '../chunk-GE6BYNQJ.js';
+import '../chunk-I5SD7XRA.js';
+import '../chunk-FLAN7CV3.js';
+import '../chunk-Q4SWUINA.js';
+import '../chunk-WOYMEEPH.js';
+import '../chunk-WSLT32Q4.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DKPNFEVU.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+import '../chunk-KO6OEY3G.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/ApprovalStepper.js

@@ -1,3 +1,3 @@
-export { ApprovalStepper } from '../chunk-NYUHSMUU.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+export { ApprovalStepper } from '../chunk-XGFDY43I.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/AutocompleteField.d.ts

@@ -78,6 +78,7 @@ declare function endpointSearchFn(endpoint: string, searchParam: string, hostFet
 /**
  * 응답이 배열이 아니면 items/data/results/rows 래핑까지 풀어 준다.
  * 조회를 앱이 맡게 됐으므로 이 정규화도 함께 내보낸다 — 앱마다 다시 짤 규칙이 아니다.
+ * 구현은 형제 위젯들과 공유한다(shared.unwrapRows) — 봉투 규칙은 한 곳에만 산다.
  */
 declare function toAutocompleteOptions(payload: unknown): AutocompleteOption[];
 /**

package/dist/widgets/AutocompleteField.js

@@ -1,7 +1,8 @@
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-YSSNP6JM.js';
-import '../chunk-VDBUXYEB.js';
-import '../chunk-I5Z2RVDF.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-N25YP7ID.js';
+import '../chunk-Q4SWUINA.js';
+import '../chunk-WOYMEEPH.js';
+import '../chunk-WSLT32Q4.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DKPNFEVU.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+import '../chunk-KO6OEY3G.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/ColumnBoard.js

@@ -1,3 +1,3 @@
-export { ColumnBoard } from '../chunk-6BCWFPNJ.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+export { ColumnBoard } from '../chunk-YWUDBLO6.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/DiffView.js

@@ -1,3 +1,3 @@
-export { DiffView } from '../chunk-M6KM3FJS.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+export { DiffView } from '../chunk-JYAR7D5U.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/Disclosure.js

@@ -1,3 +1,3 @@
-export { Disclosure } from '../chunk-OEWTVLPZ.js';
-import '../chunk-TUOG7EEI.js';
-import '../chunk-YQOMSWW5.js';
+export { Disclosure } from '../chunk-2HLXCKK7.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/EventCalendar.d.ts

@@ -52,13 +52,28 @@ interface EventCalendarProps {
     onDateChange?: (date: string) => void;
     /** 유형 필터 칩. 주어지면 칩 토글로 해당 type 일정을 숨기거나 보인다. */
     types?: EventCalendarTypeOption[];
+    /**
+     * 상태 문자열 → 배지 톤(정확 일치). 기본 판정은 자산 대여 ERP의 상태 어휘
+     * (반납·대여중·수리중·분실 …)를 아는 정규식 폴백이라, 다른 도메인의 상태
+     * ('confirmed'·'휴가' 등)는 여기로 톤을 지정한다. 맵에 없거나 톤 값이 잘못된
+     * 상태는 기본 판정으로 떨어진다 — 프롭 없는 기존 스펙은 이전과 똑같이 렌더된다.
+     */
+    statusTones?: Record<string, EventCalendarStatusTone>;
     onEventClick?: (event: EventCalendarEvent) => void;
     selectedId?: string;
 }
+declare const STATUS_TONES: readonly ["neutral", "info", "success", "warning", "danger"];
+type EventCalendarStatusTone = (typeof STATUS_TONES)[number];
+/**
+ * 상태 → 톤. 주입 맵(`statusTones`, 정확 일치)이 우선이고, 없으면 자산 대여 ERP
+ * 시절의 정규식 판정으로 떨어진다. 스펙은 신뢰할 수 없는 JSON이라 맵의 톤 값이
+ * 다섯 가지 밖이면 버린다 — Badge에 모르는 tone을 흘리지 않는다.
+ */
+declare const statusToneOf: (status: string, overrides?: Record<string, EventCalendarStatusTone>) => EventCalendarStatusTone;
 /**
  * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
  * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
  */
 declare const EventCalendar: React.FC<EventCalendarProps & SduiBoxProps>;
 
-export { EventCalendar, type EventCalendarEvent, type EventCalendarProps, type EventCalendarTypeOption, type EventCalendarView, type EventCalendarViewItem };
+export { EventCalendar, type EventCalendarEvent, type EventCalendarProps, type EventCalendarStatusTone, type EventCalendarTypeOption, type EventCalendarView, type EventCalendarViewItem, statusToneOf };