@wipco/sdui 0.1.0 → 0.3.0

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 {
@@ -270,7 +372,27 @@
 .wp-btn--lg { height: 40px; padding: 0 16px; font-size: 14px; }
 .wp-btn--xl { height: 48px; padding: 0 20px; font-size: 15px; }
 .wp-btn--block { width: 100%; }
-.wp-btn--loading { pointer-events: none; }
+/*
+ * loading 스피너는 **CSS가 그린다**. 컴포넌트는 엘리먼트를 넣지 않는다(components.tsx 주석 참고) —
+ * 그리는 주체가 둘이면 원이 두 개 돈다. 라벨은 투명하게 눕히고 그 위에 원을 얹는다.
+ */
+.wp-btn--loading { pointer-events: none; color: transparent !important; position: relative; }
+.wp-btn--loading::after {
+  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
+  border: 1.5px solid currentColor; border-top-color: transparent;
+  animation: wp-spin 0.7s linear infinite; color: var(--wp-action-primary-fg);
+}
+.wp-btn--primary.wp-btn--loading::after, .wp-btn--danger.wp-btn--loading::after {
+  border-color: rgba(255, 255, 255, 0.85); border-top-color: transparent;
+}
+.wp-btn--secondary.wp-btn--loading::after, .wp-btn--ghost.wp-btn--loading::after {
+  border-color: var(--wp-slate-500); border-top-color: transparent;
+}
+/* as="a"/"span"은 disabled 속성이 없다 — 비활성 표기는 aria-disabled로도 걸린다. */
+.wp-btn[aria-disabled='true']:not(.wp-btn--loading) {
+  cursor: not-allowed; background: var(--wp-action-disabled-bg);
+  border-color: transparent; color: var(--wp-action-disabled-fg);
+}
 
 .wp-iconbtn {
   display: inline-flex; align-items: center; justify-content: center;
@@ -283,8 +405,18 @@
 .wp-iconbtn:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
 .wp-iconbtn--sm { width: 28px; height: 28px; }
 .wp-iconbtn--xs { width: 24px; height: 24px; }
+.wp-iconbtn--lg { width: 40px; height: 40px; }
 .wp-iconbtn--danger { color: var(--wp-text-danger); }
 .wp-iconbtn--danger:hover { background: var(--wp-red-50); }
+/* solid — 주 동작이 아이콘 하나뿐인 자리(뷰어 툴바의 닫기 등). */
+.wp-iconbtn--solid { background: var(--wp-action-primary-bg); color: var(--wp-action-primary-fg); }
+.wp-iconbtn--solid:hover:not(:disabled) { background: var(--wp-action-primary-bg-hover); color: var(--wp-white); }
+/* onchrome — 네이비 사이드바/탑바 위. 밝은 글자에 반투명 호버. */
+.wp-iconbtn--onchrome { color: var(--wp-chrome-fg-muted); }
+.wp-iconbtn--onchrome:hover:not(:disabled) { background: var(--wp-chrome-item-hover); color: var(--wp-chrome-fg); }
+.wp-iconbtn:disabled { cursor: not-allowed; color: var(--wp-text-disabled); background: transparent; }
+/* pressed(토글 켜짐) — 선택 틴트. 클래스가 아니라 aria로 거는 이유는 상태가 곧 접근성 값이라서다. */
+.wp-iconbtn[aria-pressed='true'] { background: var(--wp-surface-selected); color: var(--wp-text-brand); }
 /* outlined — 툴바에서 배경이 같은 표면 위에 놓일 때 눌리는 자리임을 하드라인으로 보인다. */
 .wp-iconbtn--outlined {
   border: 1px solid var(--wp-action-secondary-border);
@@ -295,6 +427,24 @@
 .wp-iconbtn--outlined:hover { background: var(--wp-action-secondary-bg-hover); border-color: var(--wp-border-strong); }
 .wp-iconbtn--outlined:active { background: var(--wp-action-secondary-bg-active); }
 
+/* 세그먼티드 — 배타 뷰 전환(목록/카드, 2D/3D). 항목 2~4개까지, 그 이상은 Select다. */
+.wp-seg {
+  display: inline-flex; padding: 2px; gap: 2px;
+  background: var(--wp-surface-sunken); border: 1px solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-md);
+}
+.wp-seg__item {
+  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
+  height: 24px; padding: 0 10px; border: 0; background: transparent;
+  border-radius: var(--wp-radius-sm);
+  font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
+  color: var(--wp-text-muted); cursor: pointer; transition: background 0.12s, color 0.12s;
+}
+.wp-seg__item:hover { color: var(--wp-text-strong); }
+.wp-seg__item[aria-selected='true'] { background: var(--wp-surface-card); color: var(--wp-text-strong); box-shadow: var(--wp-shadow-sm); }
+.wp-seg__item:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-seg--lg .wp-seg__item { height: 30px; padding: 0 14px; font-size: 13px; }
+
 /* ---------- 입력 ---------- */
 .wp-input, .wp-textarea, .wp-select {
   font-family: inherit; font-size: 13px; color: var(--wp-text-default);
@@ -354,6 +504,8 @@
   display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s;
 }
 .wp-check input:checked + .wp-check__box { background: var(--wp-action-primary-bg); border-color: var(--wp-action-primary-bg); color: var(--wp-white); }
+/* 부분 선택 — 체크와 같은 채움에 글리프만 빼기(컴포넌트가 minus로 바꿔 넣는다). */
+.wp-check input:indeterminate + .wp-check__box { background: var(--wp-navy-600); border-color: var(--wp-navy-600); color: var(--wp-white); }
 .wp-check input:focus-visible + .wp-check__box { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
 .wp-check__text { display: flex; flex-direction: column; gap: 2px; }
 .wp-check__desc { font-size: 12px; color: var(--wp-text-muted); }
@@ -494,6 +646,11 @@
 .wp-tab:hover { color: var(--wp-text-default); }
 .wp-tab[aria-selected='true'] { color: var(--wp-text-brand); border-bottom-color: var(--wp-accent); }
 .wp-tabs--lg .wp-tab { height: 42px; font-size: 14px; }
+/* onchrome — 네이비 탑바 위. 밝은 글자에 빨간 인디케이터. */
+.wp-tabs--onchrome { border-bottom-color: var(--wp-chrome-border); }
+.wp-tabs--onchrome .wp-tab { color: var(--wp-chrome-fg-muted); }
+.wp-tabs--onchrome .wp-tab:hover { color: var(--wp-chrome-fg); }
+.wp-tabs--onchrome .wp-tab[aria-selected='true'] { color: var(--wp-white); border-bottom-color: var(--wp-accent); }
 .wp-tab__count {
   font-size: 11px; font-weight: 700; padding: 1px 6px;
   background: var(--wp-slate-100); border-radius: var(--wp-radius-full); color: var(--wp-text-muted);
@@ -510,6 +667,15 @@
 .wp-table td { padding: 10px 12px; border-bottom: 1px solid var(--wp-border-subtle); vertical-align: middle; }
 .wp-table--dense td { padding: 6px 12px; }
 .wp-table--hover tbody tr:hover { background: var(--wp-surface-hover); }
+.wp-table tbody tr[aria-selected='true'] { background: var(--wp-surface-selected); }
+/* 정렬 헤더 — th의 타이포를 그대로 물려받아 버튼처럼 보이지 않게 한다. */
+.wp-table__sort {
+  display: inline-flex; align-items: center; gap: 3px;
+  border: none; background: none; padding: 0; cursor: pointer;
+  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
+}
+.wp-table__sort:hover { color: var(--wp-text-default); }
+.wp-table--sticky thead th { position: sticky; top: 0; z-index: 1; }
 .wp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 .wp-table__mono { font-family: var(--wp-font-mono); font-size: 12px; }
 .wp-table__strong { font-weight: 600; color: var(--wp-text-strong); }
@@ -548,21 +714,32 @@
 }
 .wp-spinner--sm { width: 12px; height: 12px; border-width: 2px; }
 .wp-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
+/* inverse — 네이비/뷰어 표면 위에서는 밝은 쪽으로 뒤집는다. */
+.wp-spinner--inverse { border-color: rgba(255, 255, 255, 0.28); border-top-color: var(--wp-white); }
 @keyframes wp-spin { to { transform: rotate(360deg); } }
 
-.wp-progress { display: flex; flex-direction: column; gap: 5px; }
-/* showValue를 켜면 라벨 줄이 "라벨 … 값" 두 칸이 된다(라벨이 없으면 값만 오른쪽에). */
-.wp-progress__label { display: flex; align-items: baseline; gap: var(--wp-space-2); font-size: 12px; color: var(--wp-text-muted); }
-/* 값은 라벨과 같은 무게로 흐리게 둔다 — 눈에 먼저 걸려야 하는 것은 막대 자체다. */
-.wp-progress__value { margin-left: auto; flex: none; text-align: right; }
-.wp-progress__track { height: 6px; background: var(--wp-slate-100); border-radius: var(--wp-radius-full); overflow: hidden; }
-.wp-progress__fill { height: 100%; border-radius: var(--wp-radius-full); transition: width 0.25s; }
-.wp-progress__fill--brand { background: var(--wp-navy-600); }
-.wp-progress__fill--success { background: var(--wp-green-600); }
-.wp-progress__fill--warning { background: var(--wp-gold-600); }
-.wp-progress__fill--danger { background: var(--wp-red-600); }
+/*
+ * 진척/용량 막대. 클래스 어휘는 .wp-meter*다 — .wp-progress*가 아니다.
+ * 디자인 시스템 쪽 이름이 meter이고, ProgressBar가 그 마크업을 그대로 낸다.
+ */
+.wp-meter { width: 100%; height: 6px; background: var(--wp-slate-200); border-radius: var(--wp-radius-full); overflow: hidden; }
+.wp-meter--sm { height: 4px; }
+.wp-meter--lg { height: 8px; }
+.wp-meter__fill { height: 100%; background: var(--wp-navy-600); border-radius: var(--wp-radius-full); transition: width 0.25s; }
+.wp-meter__fill--success { background: var(--wp-green-600); }
+.wp-meter__fill--warning { background: var(--wp-gold-600); }
+.wp-meter__fill--danger { background: var(--wp-red-600); }
 /* info — 브랜드 네이비와 헷갈리지 않게 시그널 블루 쪽을 쓴다. */
-.wp-progress__fill--info { background: var(--wp-blue-600); }
+.wp-meter__fill--info { background: var(--wp-blue-500); }
+/* striped — 진행 중인 작업에만. 정지된 값에 쓰면 움직이는 것처럼 읽힌다. */
+.wp-meter__fill--striped {
+  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 25%, transparent 25% 50%,
+    rgba(255, 255, 255, 0.22) 50% 75%, transparent 75%);
+  background-size: 10px 10px;
+}
+/* 라벨 없이 showValue만 켠 모양 — 값이 막대 오른쪽 옆에 붙는다. */
+.wp-meter-row { display: flex; align-items: center; gap: 10px; }
+.wp-meter-row__val { font-size: 12px; color: var(--wp-text-muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
 
 /* ---------- 페이지네이션 ---------- */
 .wp-pager { display: flex; align-items: center; gap: 4px; width: 100%; }
@@ -613,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';

package/dist/widgets/Disclosure.d.ts

@@ -0,0 +1,20 @@
+import React__default from 'react';
+
+/**
+ * Disclosure — 접기/펼치기 행.
+ *
+ * - chevron-right 아이콘이 펼침 상태에서 90도 회전(var(--wp-transition-transform))한다.
+ * - controlled-with-fallback: open이 주어지면 그대로 따르고, 없으면 내부 상태로 동작한다.
+ * - aria-expanded / aria-controls 연결, 내용 영역은 hidden 토글로 상태를 보존한다.
+ */
+
+interface DisclosureProps {
+    summary: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Disclosure({ summary, children, defaultOpen, open, onOpenChange, }: DisclosureProps): React__default.JSX.Element;
+
+export { Disclosure, type DisclosureProps };

package/dist/widgets/Disclosure.js

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