@wipco/sdui 0.2.0 → 0.3.0

package/dist/meta.d.ts

@@ -81,6 +81,14 @@ interface SduiPropMeta {
     eventArg?: string;
     /** kind가 'array'일 때 원소의 필드 정의 */
     item?: readonly SduiPropMeta[];
+    /**
+     * kind가 'array'이고 원소가 **구조체가 아니라 값 하나**일 때 그 값의 종류
+     * (예: `SearchResults.pageSizes`는 number[]다).
+     *
+     * 이때 `item`은 빈 배열로 둔다 — "필드가 없다"가 곧 스칼라라는 뜻이고,
+     * 편집기는 행 편집기 대신 `itemKind` 하나짜리 값 목록 편집기를 그리면 된다.
+     */
+    itemKind?: SduiPropKind;
     /** kind가 'object'일 때 필드 정의. 없으면 자유 형식(JSON 편집기) */
     fields?: readonly SduiPropMeta[];
     group?: SduiPropGroup;

package/dist/meta.js

@@ -1344,6 +1344,86 @@ var TableMeta = {
   },
   resize: { kind: "style", axis: "x" }
 };
+var searchCellFields = [
+  {
+    name: "type",
+    kind: "enum",
+    label: "\uD45C\uD604",
+    default: "text",
+    options: [
+      { value: "text", label: "\uC6D0\uBB38" },
+      { value: "badge", label: "\uBC30\uC9C0" },
+      { value: "tag", label: "\uD0DC\uADF8" },
+      { value: "link", label: "\uB9C1\uD06C" },
+      { value: "progress", label: "\uC9C4\uD589 \uB9C9\uB300" },
+      { value: "icon", label: "\uC544\uC774\uCF58" },
+      { value: "number", label: "\uC22B\uC790" },
+      { value: "date", label: "\uB0A0\uC9DC" }
+    ]
+  },
+  { name: "toneMap", kind: "object", label: "\uAC12 \u2192 \uD1A4", description: "type=badge (\uC5C6\uB294 \uAC12\uC740 neutral)" },
+  { name: "colorMap", kind: "object", label: "\uAC12 \u2192 \uC810 \uC0C9", description: "type=tag" },
+  { name: "filled", kind: "boolean", label: "\uCC44\uC6B4 \uD0DC\uADF8", description: "type=tag" },
+  {
+    name: "to",
+    kind: "string",
+    label: "\uC774\uB3D9 \uACBD\uB85C",
+    description: "type=link. `/assets/{id}`\uCC98\uB7FC \uD589\uC758 \uD544\uB4DC\uB97C {\uD0A4}\uB85C \uB07C\uC6CC \uB123\uB294\uB2E4."
+  },
+  { name: "labelKey", kind: "string", label: "\uB9C1\uD06C \uBB38\uAD6C \uD544\uB4DC", description: "type=link (\uC0DD\uB7B5 \uC2DC \uCEEC\uB7FC \uAC12)" },
+  { name: "max", kind: "number", label: "\uBD84\uBAA8", description: "type=progress (\uAE30\uBCF8 100)" },
+  { name: "maxKey", kind: "string", label: "\uBD84\uBAA8 \uD544\uB4DC", description: "type=progress (max\uBCF4\uB2E4 \uC6B0\uC120)" },
+  {
+    name: "tone",
+    kind: "enum",
+    label: "\uB9C9\uB300 \uD1A4",
+    description: "type=progress",
+    options: [
+      { value: "brand", label: "\uAE30\uBCF8" },
+      { value: "success", label: "\uC815\uC0C1" },
+      { value: "warning", label: "\uC8FC\uC758" },
+      { value: "danger", label: "\uC704\uD5D8" },
+      { value: "info", label: "\uC815\uBCF4" }
+    ]
+  },
+  { name: "showValue", kind: "boolean", label: "\uD37C\uC13C\uD2B8 \uD45C\uAE30", description: "type=progress" },
+  { name: "iconMap", kind: "object", label: "\uAC12 \u2192 \uC544\uC774\uCF58", description: "type=icon" },
+  { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58", description: "type=icon(\uB9E4\uD551\uC5D0 \uC5C6\uB294 \uAC12\uC758 \uAE30\uBCF8) / type=link(\uC120\uD589 \uC544\uC774\uCF58)" },
+  { name: "withLabel", kind: "boolean", label: "\uC544\uC774\uCF58 \uB4A4\uC5D0 \uAC12\uB3C4 \uD45C\uAE30", description: "type=icon" },
+  { name: "digits", kind: "number", label: "\uC18C\uC218 \uC790\uB9BF\uC218", default: 0, description: "type=number" },
+  { name: "prefix", kind: "string", label: "\uC811\uB450", description: "type=number" },
+  { name: "suffix", kind: "string", label: "\uC811\uBBF8", description: 'type=number (\uD1B5\uD654\uB294 "\uC6D0")' },
+  {
+    name: "format",
+    kind: "enum",
+    label: "\uB0A0\uC9DC \uC11C\uC2DD",
+    default: "date",
+    description: "type=date. \uD574\uC11D\uB418\uC9C0 \uC54A\uB294 \uAC12\uC740 \uC6D0\uBB38 \uADF8\uB300\uB85C \uB098\uC628\uB2E4.",
+    options: [
+      { value: "date", label: "\uB0A0\uC9DC" },
+      { value: "datetime", label: "\uB0A0\uC9DC+\uC2DC\uAC01" },
+      { value: "time", label: "\uC2DC\uAC01" }
+    ]
+  }
+];
+var searchCardRowFields = [
+  { name: "valueKey", kind: "string", label: "\uAC12 \uD544\uB4DC", required: true },
+  { name: "label", kind: "string", label: "\uB77C\uBCA8" },
+  { name: "icon", kind: "icon", label: "\uC120\uD589 \uC544\uC774\uCF58" },
+  { name: "cell", kind: "object", label: "\uAC12 \uD45C\uD604", description: "\uCEEC\uB7FC \uC140\uACFC \uAC19\uC740 \uC5B4\uD718", fields: searchCellFields },
+  {
+    name: "showWhen",
+    kind: "object",
+    label: "\uD45C\uC2DC \uC870\uAC74",
+    description: 'key\uB9CC \uC8FC\uBA74 "\uADF8 \uAC12\uC774 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC744 \uB54C". equals\xB7in\xB7notEmpty\uB85C \uC881\uD78C\uB2E4.',
+    fields: [
+      { name: "key", kind: "string", label: "\uD310\uC815\uD560 \uD544\uB4DC", required: true },
+      { name: "equals", kind: "string", label: "\uAC19\uC744 \uB54C" },
+      { name: "in", kind: "array", label: "\uC774 \uC911 \uD558\uB098\uC77C \uB54C" },
+      { name: "notEmpty", kind: "boolean", label: "\uAC12\uC774 \uC788\uC744 \uB54C", default: true }
+    ]
+  }
+];
 var searchCommonProps = [
   { name: "title", kind: "string", label: "\uBAA9\uB85D \uC81C\uBAA9", required: true, group: "content" },
   {
@@ -1364,11 +1444,8 @@ var searchCommonProps = [
         name: "cell",
         kind: "object",
         label: "\uC140 \uD45C\uD604",
-        description: 'type\uC744 "badge"\uB85C \uB450\uBA74 \uAC12\uC774 \uBC30\uC9C0\uB85C \uADF8\uB824\uC9C4\uB2E4.',
-        fields: [
-          { name: "type", kind: "enum", label: "\uD45C\uD604", options: [{ value: "badge", label: "\uBC30\uC9C0" }] },
-          { name: "toneMap", kind: "object", label: "\uAC12 \u2192 \uD1A4" }
-        ]
+        description: "\uC0DD\uB7B5\uD558\uBA74 \uAC12\uC744 \uADF8\uB300\uB85C \uC4F4\uB2E4. \uC720\uD6A8\uD55C \uD544\uB4DC\uB294 type\uC5D0 \uB530\uB77C \uB2E4\uB974\uB2E4.",
+        fields: searchCellFields
       }
     ]
   },
@@ -1435,7 +1512,37 @@ var searchCommonProps = [
       { name: "titleKey", kind: "string", label: "\uC81C\uBAA9 \uD544\uB4DC", required: true },
       { name: "subtitleKey", kind: "string", label: "\uBD80\uC81C \uD544\uB4DC" },
       { name: "badge", kind: "object", label: "\uBC30\uC9C0", description: "{ key, toneMap }" },
-      { name: "rows", kind: "array", label: "\uD589", description: "{ label, valueKey }" }
+      { name: "rows", kind: "array", label: "\uD589", item: searchCardRowFields },
+      {
+        name: "leftRows",
+        kind: "array",
+        label: "\uC88C\uCE21 \uD589",
+        description: "leftRows/rightRows\uB97C \uC8FC\uBA74 \uB450 \uC5F4\uB85C \uBC30\uCE58\uB41C\uB2E4(rows\uB294 \uADF8 \uC544\uB798).",
+        item: searchCardRowFields
+      },
+      { name: "rightRows", kind: "array", label: "\uC6B0\uCE21 \uD589", item: searchCardRowFields },
+      { name: "noteKey", kind: "string", label: "\uD558\uB2E8 \uBCF4\uC870 \uBB38\uAD6C \uD544\uB4DC" },
+      {
+        name: "actions",
+        kind: "array",
+        label: "\uCE74\uB4DC \uC561\uC158",
+        description: "\uCE74\uB4DC \uC6B0\uC0C1\uB2E8 \uBC84\uD2BC. \uC774\uBCA4\uD2B8 \uAC12\uC73C\uB85C \uD589 \uAC1D\uCCB4 \uC804\uCCB4\uAC00 \uC804\uB2EC\uB41C\uB2E4.",
+        item: [
+          { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
+          { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58" },
+          {
+            name: "variant",
+            kind: "enum",
+            label: "\uC885\uB958",
+            options: [
+              { value: "default", label: "\uAE30\uBCF8" },
+              { value: "destructive", label: "\uC704\uD5D8" },
+              { value: "outline", label: "\uC678\uACFD\uC120" }
+            ]
+          },
+          { name: "run", kind: "action", label: "\uC2E4\uD589\uD560 \uC561\uC158", eventArg: "\uD589 \uAC1D\uCCB4 \uC804\uCCB4", required: true }
+        ]
+      }
     ]
   },
   {
@@ -1469,8 +1576,40 @@ var searchCommonProps = [
     ],
     group: "appearance"
   },
-  { name: "disableGrid", kind: "boolean", label: "\uACA9\uC790 \uBCF4\uAE30 \uB044\uAE30", group: "appearance" },
-  { name: "disableList", kind: "boolean", label: "\uBAA9\uB85D \uBCF4\uAE30 \uB044\uAE30", group: "appearance" },
+  {
+    name: "views",
+    kind: "array",
+    label: "\uBCF4\uAE30 \uC804\uD658 \uD56D\uBAA9",
+    description: "\uC804\uD658 \uBC84\uD2BC\uC5D0 \uB178\uCD9C\uD560 \uBCF4\uAE30\uC640 \uADF8 \uB77C\uBCA8\xB7\uC544\uC774\uCF58\xB7\uC21C\uC11C. \uC0DD\uB7B5\uD558\uBA74 \uBAA9\uB85D\xB7\uCE74\uB4DC \uB450 \uCE78\uC774 \uAE30\uBCF8\uC774\uACE0 disableGrid/disableList\uAC00 \uADF8 \uCD95\uC57D\uD615\uC73C\uB85C \uB3D9\uC791\uD55C\uB2E4(\uB458 \uB2E4 \uC624\uBA74 views\uAC00 \uC774\uAE34\uB2E4). \uD55C \uCE78\uB9CC \uB0A8\uC73C\uBA74 \uC804\uD658 \uBC84\uD2BC\uC744 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4. gridCard \uC5C6\uC774 \uCE74\uB4DC \uBCF4\uAE30\uB97C \uB123\uC73C\uBA74 \uAC78\uB7EC\uC9C4\uB2E4.",
+    group: "appearance",
+    item: [
+      {
+        name: "value",
+        kind: "enum",
+        label: "\uBCF4\uAE30",
+        required: true,
+        options: [
+          { value: "list", label: "\uBAA9\uB85D" },
+          { value: "grid", label: "\uCE74\uB4DC" }
+        ]
+      },
+      { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58", description: "\uC0DD\uB7B5 \uC2DC list / layout-grid" },
+      { name: "label", kind: "string", label: "\uB77C\uBCA8", description: "\uC0DD\uB7B5 \uC2DC \uBAA9\uB85D / \uCE74\uB4DC" }
+    ]
+  },
+  {
+    name: "pageSizes",
+    kind: "array",
+    label: "\uD398\uC774\uC9C0\uB2F9 \uAC74\uC218 \uC120\uD0DD\uC9C0",
+    description: "\uC0DD\uB7B5 \uC2DC [10, 20, 50, 100]. \uCCAB \uAC12\uC774 \uAE30\uBCF8 \uD398\uC774\uC9C0 \uD06C\uAE30\uB2E4.",
+    group: "appearance",
+    advanced: true,
+    // 원소가 숫자 하나뿐인 스칼라 배열 — 필드가 없다는 뜻으로 item을 비워 둔다
+    itemKind: "number",
+    item: []
+  },
+  { name: "disableGrid", kind: "boolean", label: "\uACA9\uC790 \uBCF4\uAE30 \uB044\uAE30", description: "views\uC758 \uCD95\uC57D\uD615", group: "appearance" },
+  { name: "disableList", kind: "boolean", label: "\uBAA9\uB85D \uBCF4\uAE30 \uB044\uAE30", description: "views\uC758 \uCD95\uC57D\uD615", group: "appearance" },
   { name: "searchPlaceholder", kind: "string", label: "\uAC80\uC0C9\uCC3D \uC548\uB0B4 \uBB38\uAD6C", group: "content" },
   { name: "rowClick", kind: "action", label: "\uD589 \uD074\uB9AD", eventArg: "\uD589 \uAC1D\uCCB4 \uC804\uCCB4", group: "behavior" },
   {

package/dist/rich.js

@@ -1,5 +1,6 @@
-import { HoistedStyle, Spinner, EmptyState } from './chunk-QJHD6HVQ.js';
-export { DatePicker, DateRangePicker } from './chunk-QJHD6HVQ.js';
+import { HoistedStyle } from './chunk-YJMD6MOE.js';
+export { DatePicker, DateRangePicker } from './chunk-YJMD6MOE.js';
+import { Spinner, EmptyState } from './chunk-ZUCI34QY.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/styles.css

@@ -160,6 +160,108 @@
   --wp-z-toast: 110;
 }
 
+/*
+ * ---------- 토큰: 이관 컴포넌트 호환 셋 ----------
+ *
+ * 이 시트는 원래 값(13px, 600, 0.12s …)을 규칙 안에 직접 적어 왔다. 그런데 0.3.0에서
+ * 옮겨 온 위젯들은 자기 CSS를 `<style>`로 들고 다니고, 그 CSS가 ERP 스타일시트의
+ * **스케일 토큰**(--wp-size-*, --wp-weight-*, --wp-transition-* …)을 참조한다.
+ * 토큰을 풀어 쓰도록 고쳐 옮기면 한 줄 한 줄이 손으로 옮긴 값이 되어 이관 자체가
+ * 위험해지므로, 값은 그대로 두고 **여기서 토큰을 정의**한다. 값은 ERP 토큰 파일
+ * (src/styles/tokens/*.css)과 같다 — 두 곳의 그림이 어긋나지 않게 하려는 것이다.
+ *
+ * 위 :root의 기존 토큰은 하나도 건드리지 않았다. 이미 그 값으로 그려지는 화면이 있다.
+ * (그래서 --wp-space-8이 32px인 채로 남고 --wp-space-7도 32px이 된다. ERP는 7=32·8=40이라
+ *  어긋나지만, 이 시트를 쓰는 소비자와 ERP는 서로 다른 시트를 로드하므로 섞이지 않는다.)
+ */
+:root {
+  /* 타이포 스케일 */
+  --wp-size-2xs: 11px;
+  --wp-size-xs: 12px;
+  --wp-size-sm: 13px;
+  --wp-size-md: 14px;
+  --wp-size-lg: 16px;
+  --wp-size-xl: 18px;
+  --wp-size-2xl: 22px;
+  --wp-weight-regular: 400;
+  --wp-weight-medium: 500;
+  --wp-weight-semibold: 600;
+  --wp-weight-bold: 700;
+  --wp-leading-tight: 1.2;
+  --wp-leading-snug: 1.35;
+  --wp-leading-normal: 1.5;
+  --wp-tracking-caps: 0.07em;
+
+  /* 형태 */
+  --wp-radius-xs: 2px;
+  --wp-radius-pill: 999px;
+  --wp-border-w: 1px;
+  /* 심볼의 육각형 — 아바타·핀·노드 배지가 쓴다 */
+  --wp-hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+
+  /* 간격 — 이관 CSS가 쓰는 것만 */
+  --wp-space-7: 32px;
+  --wp-row-h: 40px;
+  --wp-row-h-dense: 32px;
+  --wp-icon-xs: 14px;
+  --wp-icon-sm: 16px;
+  --wp-icon-md: 18px;
+  --wp-icon-lg: 20px;
+
+  /* 고도 */
+  --wp-shadow-xs: 0 1px 1px rgba(15, 19, 30, 0.04);
+  --wp-ring-focus: 0 0 0 3px rgba(10, 115, 201, 0.28);
+  --wp-ring-focus-inverse: 0 0 0 3px rgba(165, 205, 241, 0.42);
+  --wp-ring-danger: 0 0 0 3px rgba(202, 26, 29, 0.22);
+  /* 위 z-dialog(100)·z-toast(110)와 같은 축에 얹는다 — 툴팁이 가장 위다 */
+  --wp-z-sticky: 40;
+  --wp-z-panel: 60;
+  --wp-z-dropdown: 80;
+  --wp-z-tooltip: 120;
+
+  /* 모션 */
+  --wp-duration-fast: 120ms;
+  --wp-duration-base: 180ms;
+  --wp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --wp-transition-control: background-color var(--wp-duration-fast) var(--wp-ease-standard),
+    border-color var(--wp-duration-fast) var(--wp-ease-standard),
+    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);
+  --wp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* 별칭 — 이관 CSS가 의미 이름으로 참조하는 자리 */
+  --wp-radius-control: var(--wp-radius-md);
+  --wp-radius-card: var(--wp-radius-lg);
+  --wp-space-half: 2px;
+  --wp-border-brand: var(--wp-navy-600);
+  --wp-surface-brand-tint: var(--wp-navy-50);
+  --wp-surface-scrim: linear-gradient(180deg, rgba(10, 34, 58, 0) 0%, rgba(10, 34, 58, 0.72) 100%);
+  --wp-shadow-xl: 0 20px 48px rgba(15, 19, 30, 0.16), 0 4px 12px rgba(15, 19, 30, 0.08);
+  --wp-ring-selected: 0 0 0 1px var(--wp-navy-600);
+  --wp-blur-scrim: blur(2px);
+  --wp-z-overlay: 90;
+
+  /*
+   * 차트/도표 계열 색. Chart(@wipco/sdui/rich)와 StackedMeter·ColumnBoard가 공유한다 —
+   * 같은 화면의 막대와 미터가 다른 팔레트로 그려지면 같은 데이터로 안 읽힌다.
+   */
+  --wp-series-1: #1d2c60;
+  --wp-series-2: #0a73c9;
+  --wp-series-3: #c9aa49;
+  --wp-series-4: #12805a;
+  --wp-series-5: #ca1a1d;
+  --wp-series-6: #8e9bc2;
+  --wp-series-7: #5b6577;
+  --wp-series-8: #a5cdf1;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --wp-duration-fast: 0ms;
+    --wp-duration-base: 0ms;
+  }
+}
+
 /* ---------- 베이스 ---------- */
 .sdui-root,
 .wp-app {
@@ -688,3 +790,147 @@
   display: flex; justify-content: flex-end; gap: var(--wp-space-2);
   padding: 14px 20px; border-top: 1px solid var(--wp-border-subtle);
 }
+
+/* ══════════════════════════════════════════════════════════════
+   ERP에서 이관한 블록 (0.3.0)
+
+   컴포넌트만 옮기고 CSS를 두고 오면 무스타일로 나온다. 아래 다섯 묶음은
+   components.tsx 끝의 DS 6종이 그대로 참조하는 클래스다.
+   (.wp-seg는 0.2.0에 이미 와 있어서 여기 없다 — 컴포넌트만 늦게 온 경우였다.)
+   ══════════════════════════════════════════════════════════════ */
+
+/* ---------- 툴바 ---------- */
+/*
+ * 떠 있는 컨트롤 묶음. search/SearchToolbar가 "라이브러리에 .wp-toolbar가 없다"는
+ * 이유로 인라인 style로 조립하고 있었고 그래서 그림자가 빠져 있었다.
+ */
+.wp-toolbar {
+  display: flex; align-items: center; gap: 6px; padding: 5px;
+  background: var(--wp-surface-card);
+  border: var(--wp-border-w) solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-md); box-shadow: var(--wp-shadow-md);
+}
+.wp-toolbar--vertical { flex-direction: column; }
+.wp-toolbar--floating { position: absolute; z-index: var(--wp-z-panel); }
+.wp-toolbar__sep { width: 1px; height: 20px; background: var(--wp-border-subtle); flex: none; }
+.wp-toolbar--vertical .wp-toolbar__sep { width: 20px; height: 1px; }
+
+/* ---------- 아바타 ---------- */
+.wp-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; background: var(--wp-navy-600); color: var(--wp-white);
+  font-size: var(--wp-size-2xs); font-weight: var(--wp-weight-semibold); letter-spacing: 0.02em;
+  overflow: hidden; flex: none; user-select: none;
+}
+.wp-avatar--hex { clip-path: var(--wp-hex-clip); border-radius: 0; }
+.wp-avatar--round { border-radius: 50%; }
+.wp-avatar--square { border-radius: var(--wp-radius-sm); }
+.wp-avatar--xs { width: 20px; height: 20px; font-size: 9px; }
+.wp-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
+.wp-avatar--lg { width: 36px; height: 36px; font-size: var(--wp-size-xs); }
+.wp-avatar--xl { width: 48px; height: 48px; font-size: var(--wp-size-md); }
+.wp-avatar--muted { background: var(--wp-slate-300); color: var(--wp-slate-700); }
+.wp-avatar--accent { background: var(--wp-red-600); }
+.wp-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.wp-avatar-stack { display: flex; }
+.wp-avatar-stack > * + * { margin-left: -6px; }
+
+/* ---------- 사이드바 내비 ---------- */
+.wp-nav { display: flex; flex-direction: column; gap: 1px; }
+.wp-nav__section {
+  padding: 14px 12px 5px; font-size: var(--wp-size-2xs); font-weight: var(--wp-weight-semibold);
+  letter-spacing: var(--wp-tracking-caps); text-transform: uppercase;
+  color: var(--wp-chrome-fg-muted); opacity: 0.8;
+}
+.wp-nav__item {
+  position: relative; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px;
+  border-radius: var(--wp-radius-md); font-size: var(--wp-size-sm); font-weight: var(--wp-weight-medium);
+  color: var(--wp-chrome-fg-muted); cursor: pointer; transition: var(--wp-transition-control);
+  white-space: nowrap; text-decoration: none;
+}
+.wp-nav__item:hover { background: var(--wp-chrome-item-hover); color: var(--wp-chrome-fg); text-decoration: none; }
+.wp-nav__item[aria-current='page'] { background: var(--wp-chrome-item-active); color: var(--wp-white); }
+/* 활성 표시는 좌측 빨간 에지 — 배경 틴트만으로는 네이비 위에서 잘 안 읽힌다. */
+.wp-nav__item[aria-current='page']::before {
+  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px;
+  border-radius: var(--wp-radius-pill); background: var(--wp-accent);
+}
+.wp-nav__item:focus-visible { outline: none; box-shadow: var(--wp-ring-focus-inverse); }
+.wp-nav__icon { flex: none; display: flex; opacity: 0.9; }
+.wp-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.wp-nav__meta { font-size: var(--wp-size-2xs); color: var(--wp-chrome-fg-muted); font-variant-numeric: tabular-nums; }
+/* light — 흰 표면(설정 하위 내비) 위. 크롬 토큰 대신 본문 토큰으로 뒤집는다. */
+.wp-nav--light .wp-nav__item { color: var(--wp-text-muted); }
+.wp-nav--light .wp-nav__item:hover { background: var(--wp-surface-hover); color: var(--wp-text-strong); }
+.wp-nav--light .wp-nav__item[aria-current='page'] { background: var(--wp-surface-selected); color: var(--wp-text-brand); }
+.wp-nav--light .wp-nav__section { color: var(--wp-text-subtle); }
+.wp-nav--collapsed .wp-nav__item { justify-content: center; padding: 0; }
+.wp-nav--collapsed .wp-nav__label,
+.wp-nav--collapsed .wp-nav__meta,
+.wp-nav--collapsed .wp-nav__section { display: none; }
+
+/* ---------- 빵부스러기 ---------- */
+.wp-crumbs { display: flex; align-items: center; gap: 5px; font-size: var(--wp-size-xs); color: var(--wp-text-subtle); min-width: 0; }
+.wp-crumbs__item {
+  display: inline-flex; align-items: center; gap: 5px; color: var(--wp-text-muted);
+  text-decoration: none; white-space: nowrap;
+  transition: color var(--wp-duration-fast) var(--wp-ease-standard);
+}
+.wp-crumbs__item:hover { color: var(--wp-text-strong); text-decoration: none; }
+.wp-crumbs__sep { color: var(--wp-slate-300); display: flex; }
+.wp-crumbs__current {
+  color: var(--wp-text-strong); font-weight: var(--wp-weight-medium);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* ---------- 툴팁 ---------- */
+.wp-tooltip {
+  position: absolute; display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
+  padding: 5px 8px; background: var(--wp-slate-900); color: var(--wp-white);
+  border-radius: var(--wp-radius-sm); font-size: var(--wp-size-xs); line-height: 1.35;
+  box-shadow: var(--wp-shadow-md); white-space: nowrap;
+  z-index: var(--wp-z-tooltip); pointer-events: none;
+}
+.wp-tooltip--wrap { white-space: normal; }
+.wp-tooltip__key {
+  font-family: var(--wp-font-mono); font-size: 10px; padding: 1px 4px; border-radius: 2px;
+  background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86);
+}
+.wp-tooltip::after { content: ''; position: absolute; width: 6px; height: 6px; background: inherit; transform: rotate(45deg); }
+.wp-tooltip--top::after { bottom: -3px; left: 50%; margin-left: -3px; }
+.wp-tooltip--bottom::after { top: -3px; left: 50%; margin-left: -3px; }
+.wp-tooltip--left::after { right: -3px; top: 50%; margin-top: -3px; }
+.wp-tooltip--right::after { left: -3px; top: 50%; margin-top: -3px; }
+.wp-tooltip-host { position: relative; display: inline-flex; }
+
+/* ---------- 라디오 ---------- */
+/* Checkbox와 .wp-check 마크업을 공유하고 상자 모양만 다르다 — 위 체크박스 절 뒤에 와야 한다. */
+.wp-check__box--radio { border-radius: 50%; }
+.wp-check input:checked + .wp-check__box--radio { background: var(--wp-white); border: 5px solid var(--wp-navy-600); }
+
+/* ---------- 스크롤 상자 ---------- */
+/* TreeView가 목록 높이를 제한할 때 쓴다. min-height:0이 없으면 flex 자식이 안 줄어든다. */
+.wp-scroll { overflow: auto; min-height: 0; }
+
+/* ---------- 드롭다운 패널 ---------- */
+/*
+ * ERP는 이 모양을 앱 셸 CSS(src/globals.css의 .erp-popover)로 냈고, 라이브러리에는
+ * 클래스가 없어 search/popover.tsx가 같은 값을 인라인 style로 조립하고 있었다.
+ * 클래스를 여기로 들여와 AutocompleteField 같은 이관 위젯이 그대로 동작하게 한다.
+ * (이름을 erp-*로 둔 이유는 widgets/index.ts 주석과 같다 — 이관 중 두 사본이 겹쳐도
+ *  규칙이 한 벌만 남아야 한다.)
+ */
+.erp-popover-host { position: relative; }
+.erp-popover {
+  position: absolute; top: calc(100% + var(--wp-space-2)); right: 0; min-width: 100%;
+  background: var(--wp-surface-card);
+  border: var(--wp-border-w) solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-lg); box-shadow: var(--wp-shadow-lg);
+  z-index: var(--wp-z-dropdown);
+}
+.erp-popover--left { right: auto; left: 0; }
+.erp-popover__body { max-height: 60vh; overflow: auto; padding: var(--wp-space-4); }
+.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/widgets/AutocompleteField.d.ts

@@ -0,0 +1,96 @@
+import React__default from 'react';
+
+/**
+ * AutocompleteField — 디바운스 원격/정적 자동완성 검색 필드.
+ *
+ * - `search`가 주어지면 그 함수로 원격 검색하고, 없으면 options 배열을
+ *   includesLooseSearch로 로컬 필터링한다(데모/폴백).
+ * - 입력만으로는 절대 값이 확정되지 않는다 — 목록에서 선택해야 onChange(value, option),
+ *   선택 해제 시에만 onChange(null)이 호출된다.
+ * - 선택되면 입력창 대신 "선택됨 카드"(circle-check + 라벨 + 부가정보 + 변경 버튼)를 보여준다.
+ *
+ * ## 조회를 왜 주입으로 받나
+ *
+ * ERP판은 `endpoint` 프롭을 받아 `erpFetch(endpoint?q=…)`를 직접 부르고, 503을
+ * `ErpApiError`로 알아보아 "백엔드 미연동" 안내로 떨어뜨렸다. 그 셋(API_BASE 규약,
+ * 웹 쿠키/데스크톱 Bearer 이중 세션, 503=데모 모드 강등)은 전부 **호스트 앱의 계약**이라
+ * 라이브러리가 알 수 없다. 그래서 여기는 "키워드를 주면 옵션 목록을 돌려주는 함수"
+ * 하나만 요구하고, `endpoint`를 그 함수로 바꾸는 어댑터는 소비 앱에 남는다:
+ *
+ * ```tsx
+ * <AutocompleteField
+ *   search={async (keyword, signal) => {
+ *     const sep = endpoint.includes('?') ? '&' : '?';
+ *     try {
+ *       return toAutocompleteOptions(
+ *         await erpFetch(`${endpoint}${sep}q=${encodeURIComponent(keyword)}`, { signal }),
+ *       );
+ *     } catch (error) {
+ *       if (error instanceof ErpApiError && error.status === 503) {
+ *         return { options: [], status: 'offline' };
+ *       }
+ *       throw error;
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * 응답 모양 정규화(`toAutocompleteOptions`)는 여기서 함께 내보낸다 — 배열/`items`/`data`/
+ * `results`/`rows` 래핑을 푸는 규칙까지 앱마다 다시 짜게 할 이유가 없다.
+ */
+
+type AutocompleteOption = Record<string, unknown>;
+/**
+ * 원격 검색 결과.
+ *
+ * 배열만 돌려주면 정상 결과로 본다. "백엔드가 아직 없어 못 불러온 것"과 "불러왔는데
+ * 없는 것"은 사용자에게 다른 말을 해야 하므로, 전자는 `status: 'offline'`으로 구분해
+ * 돌려준다(ERP의 503→데모 모드 강등이 이 자리로 들어온다). 던진 예외는 전부 'error'다.
+ */
+interface AutocompleteSearchResult {
+    options: AutocompleteOption[];
+    status?: 'ready' | 'offline';
+}
+/**
+ * 원격 검색 주입점. 키워드를 받아 옵션 목록을 돌려준다.
+ *
+ * 낡은 응답을 버리는 일은 호출자가 신경 쓰지 않아도 된다 — 컴포넌트가 요청 순번으로
+ * 걸러낸다. 조회 자체를 중단하고 싶으면 `signal`을 fetch에 그대로 넘기면 된다.
+ */
+type AutocompleteSearchFn = (keyword: string, signal: AbortSignal) => Promise<AutocompleteOption[] | AutocompleteSearchResult>;
+interface AutocompleteFieldProps {
+    /**
+     * 원격 검색 함수. 생략하면 `options` 로컬 필터링만 한다.
+     * ERP의 `endpoint` 프롭은 이 함수를 만드는 앱 쪽 어댑터가 계속 소유한다(위 주석 참고).
+     */
+    search?: AutocompleteSearchFn;
+    /** 정적 옵션(데모/폴백) — `search`가 없을 때 로컬 검색 대상. */
+    options?: AutocompleteOption[];
+    /** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
+    labelKey?: string;
+    /** 옵션에서 값을 읽을 키. 기본 'value'. */
+    valueKey?: string;
+    /** 두 번째 줄(부가 정보)을 읽을 키. */
+    subKey?: string;
+    /** 확정된 값(제어 모드). 빈 문자열이면 미선택으로 본다. */
+    value?: string;
+    /** 제어 모드에서 카드에 보여줄 라벨(원격 값 등 로컬에서 라벨을 알 수 없을 때). */
+    selectedLabel?: string;
+    /** 목록에서 선택 시 (value, option), 선택 해제 시 (null). */
+    onChange?: (value: string | null, option?: AutocompleteOption) => void;
+    placeholder?: string;
+    /** 검색을 시작하는 최소 글자 수. 기본 1. */
+    minChars?: number;
+    /** 디바운스(ms). 기본 300. */
+    debounceMs?: number;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+/**
+ * 응답이 배열이 아니면 items/data/results/rows 래핑까지 풀어 준다.
+ * 조회를 앱이 맡게 됐으므로 이 정규화도 함께 내보낸다 — 앱마다 다시 짤 규칙이 아니다.
+ */
+declare function toAutocompleteOptions(payload: unknown): AutocompleteOption[];
+declare function AutocompleteField({ search, options, labelKey, valueKey, subKey, value, selectedLabel, onChange, placeholder, minChars, debounceMs, invalid, disabled, }: AutocompleteFieldProps): React__default.JSX.Element;
+
+export { AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompleteSearchFn, type AutocompleteSearchResult, toAutocompleteOptions };

package/dist/widgets/AutocompleteField.js

@@ -0,0 +1,3 @@
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-MOIU7MUA.js';
+import '../chunk-KADFN76X.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/ColumnBoard.d.ts

@@ -0,0 +1,47 @@
+import React__default from 'react';
+
+/**
+ * ColumnBoard — 칸반식 분류 보드 (버튼 이동, 드래그 없음).
+ *
+ * - 컬럼 헤더: 라벨 + 건수 Badge, tone에 따라 상태 틴트(--wp-status-*-bg/border/fg).
+ * - 항목 카드: 제목/부제/뱃지, onItemClick이 있으면 본문이 버튼이 된다.
+ * - 이동: 카드 우측 chevron 메뉴(erp-popover)에서 다른 컬럼을 골라 onMove({ id, toColumn }).
+ *   (SDUI 액션은 첫 콜백 인자만 이벤트 값으로 받으므로 단일 객체로 전달한다)
+ *   onMove 미연결 시 버튼은 비활성 + 사유 title.
+ * - 선택: selectable이면 카드마다 Checkbox. selectedIds가 주어지면 제어 모드,
+ *   아니면 내부 상태로 동작하며 변경 시 onSelectChange(ids).
+ * - 정의되지 않은 컬럼 키를 가진 항목은 보드 아래 미분류 안내로 집계한다.
+ */
+
+type ColumnBoardTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface ColumnBoardColumn {
+    key: string;
+    label: string;
+    tone?: ColumnBoardTone;
+}
+interface ColumnBoardItem {
+    id: string;
+    /** 소속 컬럼 key */
+    column: string;
+    title: string;
+    sub?: string;
+    badge?: string;
+}
+interface ColumnBoardProps {
+    columns: ColumnBoardColumn[];
+    items: ColumnBoardItem[];
+    /** 이동 확정 시 { id, toColumn } 단일 객체 — SDUI 이벤트 값으로 그대로 저장 가능. 미연결이면 이동 버튼 비활성. */
+    onMove?: (move: {
+        id: string;
+        toColumn: string;
+    }) => void;
+    /** 카드 본문 클릭 시 (item). 미연결이면 본문은 클릭 불가 표시 없음. */
+    onItemClick?: (item: ColumnBoardItem) => void;
+    selectable?: boolean;
+    /** 제어 모드 선택 목록 — 없으면 내부 상태로 동작 */
+    selectedIds?: string[];
+    onSelectChange?: (ids: string[]) => void;
+}
+declare function ColumnBoard({ columns, items, onMove, onItemClick, selectable, selectedIds, onSelectChange, }: ColumnBoardProps): React__default.JSX.Element;
+
+export { ColumnBoard, type ColumnBoardColumn, type ColumnBoardItem, type ColumnBoardProps, type ColumnBoardTone };

package/dist/widgets/ColumnBoard.js

@@ -0,0 +1,2 @@
+export { ColumnBoard } from '../chunk-Q6SBH63R.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/DiffView.d.ts

@@ -0,0 +1,30 @@
+import React__default from 'react';
+
+/**
+ * DiffView — 변경 전/후 비교 뷰.
+ *
+ * - fields: 스칼라 값 비교. 라벨(wp-kv 스타일) + 이전 값(취소선, subtle)
+ *   + arrow-right 아이콘 + 이후 값(strong, success 틴트 배경).
+ * - lists: 목록 비교. 추가 항목 success Badge '+', 제거 danger Badge '−',
+ *   유지 neutral Badge.
+ * - 값이 없는 쪽은 '—'로 표시한다(취소선/틴트 없음).
+ */
+
+interface DiffField {
+    label: string;
+    before?: React__default.ReactNode;
+    after?: React__default.ReactNode;
+}
+interface DiffList {
+    label: string;
+    added?: string[];
+    removed?: string[];
+    kept?: string[];
+}
+interface DiffViewProps {
+    fields?: DiffField[];
+    lists?: DiffList[];
+}
+declare function DiffView({ fields, lists }: DiffViewProps): React__default.JSX.Element;
+
+export { type DiffField, type DiffList, DiffView, type DiffViewProps };

package/dist/widgets/DiffView.js

@@ -0,0 +1,2 @@
+export { DiffView } from '../chunk-WVRCIVAD.js';
+import '../chunk-ZUCI34QY.js';