@wipco/sdui 0.2.0 → 0.4.0

package/dist/rich.js

@@ -1,5 +1,6 @@
-import { HoistedStyle, Spinner, EmptyState } from './chunk-QJHD6HVQ.js';
-export { DatePicker, DateRangePicker } from './chunk-QJHD6HVQ.js';
+import { useSduiAssetResolver, HoistedStyle } from './chunk-FGRR3ROJ.js';
+export { DatePicker, DateRangePicker } from './chunk-FGRR3ROJ.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';
 
@@ -489,6 +490,7 @@ function MapPreview({
   const [ready, setReady] = useState(false);
   const ol = useOptionalModule(loadOl);
   const olModule = ol.status === "ready" ? ol.module : null;
+  const resolveAsset = useSduiAssetResolver();
   const markersKey = useMemo(() => JSON.stringify(Array.isArray(markers) ? markers : []), [markers]);
   const centerLat = center?.lat;
   const centerLng = center?.lng;
@@ -535,7 +537,20 @@ function MapPreview({
     });
     const map = new OlMap({
       target: container,
-      layers: [new TileLayer({ source: new OSM() }), new VectorLayer({ source: new VectorSource({ features }) })],
+      layers: [
+        new TileLayer({
+          source: new OSM({
+            // OL 기본 구현과 같되 URL만 관문에 태운다. `null`이면 src를 아예 안 넣는다 —
+            // 빈 문자열을 넣으면 브라우저가 현재 문서 URL로 요청을 한 번 더 낸다.
+            tileLoadFunction: (tile, src) => {
+              const next = resolveAsset(src, { component: "MapPreview", prop: "src", kind: "attribute" });
+              if (next === null) return;
+              tile.getImage().src = next;
+            }
+          })
+        }),
+        new VectorLayer({ source: new VectorSource({ features }) })
+      ],
       // OSM 라이선스상 저작자 표기(Attribution)는 항상 유지한다.
       controls: defaultControls({ attribution: true, rotate: false, zoom: interactive }),
       interactions: interactive ? defaultInteractions() : defaultInteractions({
@@ -597,7 +612,7 @@ function MapPreview({
       map.setTarget(void 0);
       setReady(false);
     };
-  }, [olModule, markersKey, centerLat, centerLng, zoom, interactive]);
+  }, [olModule, markersKey, centerLat, centerLng, zoom, interactive, resolveAsset]);
   if (ol.status !== "ready") {
     return /* @__PURE__ */ jsx(
       DependencyPlaceholder,

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';

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';

package/dist/widgets/EventCalendar.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+/**
+ * EventCalendar — 일정 캘린더 위젯 (월 / 주 / 일 / 일정 뷰).
+ *
+ * 여러 날에 걸친 일정은 주 단위로 잘라(lane packing) 막대로 그린다.
+ * 주 경계에서 잘린 쪽은 모서리를 각지게 두어 이어짐을 표현하고,
+ * 월 뷰에서는 최대 3줄까지만 보여준 뒤 '+N' 칩으로 넘김을 알린다.
+ * view/date는 controlled-with-fallback: prop이 오면 그 값을 따르고,
+ * 없으면 내부 상태로 동작한다.
+ */
+interface EventCalendarEvent {
+    id: string;
+    title: string;
+    /** YYYY-MM-DD */
+    start: string;
+    /** YYYY-MM-DD, 포함(inclusive). 없으면 start와 동일. */
+    end?: string;
+    type?: string;
+    status?: string;
+    /** CSS 색상. 없으면 type별로 --wp-series-N을 순환 배정. */
+    color?: string;
+}
+interface EventCalendarTypeOption {
+    value: string;
+    label: string;
+    color?: string;
+}
+type EventCalendarView = 'month' | 'week' | 'day' | 'agenda';
+/** 뷰 전환 버튼 한 칸. `label`을 생략하면 기본 라벨(월/주/일/일정)을 쓴다. */
+interface EventCalendarViewItem {
+    value: EventCalendarView;
+    label?: string;
+    /** 라벨 앞에 붙일 아이콘 이름 */
+    icon?: string;
+}
+interface EventCalendarProps {
+    events: EventCalendarEvent[];
+    view?: EventCalendarView;
+    onViewChange?: (view: EventCalendarView) => void;
+    /**
+     * 노출할 뷰와 그 라벨·아이콘·순서. 생략하면 월/주/일/일정 넷이 그대로 나온다.
+     *
+     * `view`는 **어느 뷰로 시작할지**만 정했지 **어떤 뷰를 고를 수 있는지**는 정하지
+     * 못했다 — 월만 쓰는 화면에도 주/일/일정 버튼이 보였다. 문자열 축약형(`["month"]`)도
+     * 받는다. 모르는 값·중복은 버리고, 전부 걸러지면 기본 넷으로 되돌린다.
+     */
+    views?: Array<EventCalendarViewItem | EventCalendarView>;
+    /** 기준 날짜(YYYY-MM-DD). 기본 오늘. */
+    date?: string;
+    onDateChange?: (date: string) => void;
+    /** 유형 필터 칩. 주어지면 칩 토글로 해당 type 일정을 숨기거나 보인다. */
+    types?: EventCalendarTypeOption[];
+    onEventClick?: (event: EventCalendarEvent) => void;
+    selectedId?: string;
+}
+declare const EventCalendar: ({ events, view, onViewChange, views, date, onDateChange, types, onEventClick, selectedId, }: EventCalendarProps) => React.JSX.Element;
+
+export { EventCalendar, type EventCalendarEvent, type EventCalendarProps, type EventCalendarTypeOption, type EventCalendarView, type EventCalendarViewItem };

package/dist/widgets/EventCalendar.js

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

package/dist/widgets/ImageLightbox.d.ts

@@ -0,0 +1,25 @@
+import React__default from 'react';
+
+/**
+ * ImageLightbox — 이미지 라이트박스 뷰어.
+ * 썸네일(또는 커스텀 트리거) 클릭 → 전체 화면 오버레이:
+ * - 휠 줌 1x–8x (커서 위치 기준 앵커)
+ * - 확대 상태에서 드래그 패닝 (pointer capture, 경계 클램프)
+ * - 툴바: 축소 / 확대 / 원래 크기 / 닫기 + 배율 % 표시
+ * - Escape·배경 클릭으로 닫힘, 트리거 클릭은 stopPropagation (행 클릭과 공존)
+ */
+
+interface ImageLightboxProps {
+    /** 원본 이미지 URL */
+    src: string;
+    alt?: string;
+    /** 기본 썸네일 <img>에 적용할 클래스 */
+    thumbClassName?: string;
+    /** 기본 썸네일 <img>에 적용할 스타일 */
+    thumbStyle?: React__default.CSSProperties;
+    /** 커스텀 트리거 — 주면 기본 썸네일 대신 렌더된다 */
+    children?: React__default.ReactNode;
+}
+declare function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }: ImageLightboxProps): React__default.JSX.Element;
+
+export { ImageLightbox, type ImageLightboxProps };

package/dist/widgets/ImageLightbox.js

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

package/dist/widgets/InlineEdit.d.ts

@@ -0,0 +1,23 @@
+import React__default from 'react';
+
+/**
+ * InlineEdit — 텍스트를 제자리에서 수정하는 위젯.
+ *
+ * - 보기 모드: 값 + 연필 IconButton(hover/focus 시 표시, 터치 기기에서는 항상 표시).
+ * - 편집 모드: DS Input(autoFocus, Enter=저장, Escape=취소) + 확인/취소 IconButton.
+ * - 비동기 onSave 동안 확인 버튼이 로딩(회전 아이콘) 상태가 되고, 실패하면
+ *   편집 모드를 유지한 채 danger 캡션을 보여준다(503은 데모 모드 안내).
+ */
+
+interface InlineEditProps {
+    value: string;
+    onSave: (value: string) => void | Promise<void>;
+    type?: 'text' | 'number';
+    mono?: boolean;
+    disabled?: boolean;
+    /** 값이 비었을 때 표시할 텍스트. 기본 '—' */
+    emptyText?: string;
+}
+declare function InlineEdit({ value, onSave, type, mono, disabled, emptyText, }: InlineEditProps): React__default.JSX.Element;
+
+export { InlineEdit, type InlineEditProps };

package/dist/widgets/InlineEdit.js

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

package/dist/widgets/JsonField.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+/**
+ * JsonField — JSON 편집용 텍스트 영역.
+ *
+ * - 객체가 들어오면 2칸 들여쓰기로 정렬해 보여준다(문자열이면 파싱 시도 후 정렬, 실패 시 원문 유지).
+ * - blur 시 JSON.parse로 검증: 성공하면 정렬 후 onChange(parsed), 실패하면 오류 위치(행/열)를
+ *   danger 캡션으로 보여주고 입력한 원문을 그대로 유지한다.
+ * - controlled-with-fallback: value가 실제로 바뀔 때만 내부 텍스트를 동기화한다
+ *   (편집 중이거나 표현이 같으면 사용자가 입력한 원문을 덮어쓰지 않는다).
+ */
+interface JsonFieldProps {
+    /** 객체 또는 JSON 문자열 */
+    value?: unknown;
+    onChange?: (parsed: unknown) => void;
+    /** 기본 6 */
+    rows?: number;
+    invalid?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+}
+declare function JsonField({ value, onChange, rows, invalid, disabled, placeholder, }: JsonFieldProps): React.JSX.Element;
+
+export { JsonField, type JsonFieldProps };