@wipco/sdui 0.50.0 → 1.0.0

package/dist/{DatePicker-BK_jsV7i.d.ts → DatePicker-C_TT_SOw.d.ts}

@@ -15,10 +15,31 @@ interface TimePickerProps {
     invalid?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * 목록(listbox)의 낭독 라벨. 값 계약(HH:MM)은 로캘과 무관하고 이 문구만 한국어라,
+     * 한국어권 밖 소비 프로젝트가 여기 하나만 갈아 끼우면 된다.
+     */
+    listLabel?: string;
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const TimePicker: React__default.FC<TimePickerProps & SduiBoxProps>;
 
+interface DatePickerLocale {
+    /** 요일 머리글 — **일요일부터** 7개. 주 시작이 달라도 이 순서로 주면 내부에서 돌린다. */
+    weekdays?: readonly string[];
+    /** 주 시작 요일 (0=일 … 6=토). */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** 달력 위 연월 캡션 (month는 1–12). */
+    formatCaption?: (year: number, month: number) => string;
+    /** 이전/다음 달 버튼의 낭독 라벨 */
+    prevMonthLabel?: string;
+    nextMonthLabel?: string;
+    /** 달력 패널의 낭독 라벨 */
+    calendarLabel?: string;
+    /** 기간 달력에서 시작·종료 칸의 낭독 라벨 (DateRangePicker) */
+    startLabel?: string;
+    endLabel?: string;
+}
 interface DatePickerProps {
     /** 선택된 날짜 (YYYY-MM-DD, `withTime`이면 YYYY-MM-DDTHH:mm). 주어지면 controlled로 동작. */
     value?: string;
@@ -36,6 +57,8 @@ interface DatePickerProps {
      * 같은 모양이라 서버로 가는 문자열은 그대로다). 칸에는 `2026-08-18 14:30`으로 보인다.
      */
     withTime?: boolean;
+    /** 표시 로캘(요일·캡션·낭독 라벨·주 시작 요일). 기본 한국어·일요일 시작. 값 계약은 불변. */
+    locale?: DatePickerLocale;
 }
 interface DateRangeValue {
     from?: string;
@@ -57,6 +80,8 @@ interface DateRangePickerProps {
     invalid?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /** 표시 로캘(요일·캡션·낭독 라벨·주 시작 요일). 기본 한국어·일요일 시작. 값 계약은 불변. */
+    locale?: DatePickerLocale;
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const DatePicker: React__default.FC<DatePickerProps & SduiBoxProps>;

package/dist/{chunk-OEWTVLPZ.js → chunk-2HLXCKK7.js}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { Icon } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PWVHAUJC.js → chunk-2YP5N4VV.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-YQOMSWW5.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SUMMARY_TABLE_CSS = `
@@ -18,11 +18,13 @@ function cellClass(column) {
   return classes.length > 0 ? classes.join(" ") : void 0;
 }
 function SummaryTableImpl({ columns, rows, footer, dense = false }) {
+  const safeColumns = Array.isArray(columns) ? columns : [];
+  const safeRows = Array.isArray(rows) ? rows : [];
   const tableClass = dense ? "wp-table wp-table--dense erp-sumtable" : "wp-table erp-sumtable";
   return /* @__PURE__ */ jsxs("div", { className: "erp-sumtable__scroll", children: [
     /* @__PURE__ */ jsx(SummaryTableStyles, {}),
     /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: safeColumns.map((column) => /* @__PURE__ */ jsx(
         "th",
         {
           style: column.align === "right" ? { textAlign: "right" } : void 0,
@@ -30,8 +32,8 @@ function SummaryTableImpl({ columns, rows, footer, dense = false }) {
         },
         column.key
       )) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-sumtable__empty", colSpan: Math.max(columns.length, 1), children: "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: row[column.key] }, column.key)) }, rowIndex)) }),
-      footer !== void 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: footer[column.key] }, column.key)) }) }) : null
+      /* @__PURE__ */ jsx("tbody", { children: safeRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-sumtable__empty", colSpan: Math.max(safeColumns.length, 1), children: "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) : safeRows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: safeColumns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: row[column.key] }, column.key)) }, rowIndex)) }),
+      footer !== void 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: safeColumns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: footer[column.key] }, column.key)) }) }) : null
     ] })
   ] });
 }

package/dist/{chunk-QTHYLNJW.js → chunk-37SFFW37.js}

@@ -1,22 +1,11 @@
-import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle } from './chunk-YQOMSWW5.js';
+import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-5WW4MBRO.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function paddingStyle(padding) {
-  const value = padding === void 0 ? void 0 : PADDING_CSS[padding];
+  const value = padding === void 0 ? void 0 : GAP_CSS[padding];
   return value === void 0 ? {} : { padding: value };
 }
-var PADDING_CSS = {
-  "0": "0px",
-  "2": "2px",
-  "4": "4px",
-  "8": "8px",
-  "12": "12px",
-  "16": "16px",
-  "20": "20px",
-  "24": "24px",
-  "32": "32px"
-};
 function Grid({
   columns = 3,
   template,

package/dist/{chunk-YQOMSWW5.js → chunk-5WW4MBRO.js}

@@ -171,4 +171,4 @@ function boxed(Inner, displayName) {
   return Wrapped;
 }
 
-export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle };
+export { CHILD_LAYOUT_PROPS, GAP_CSS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle };

package/dist/{chunk-LIOS3PF2.js → chunk-5XPZ3RSA.js}

@@ -1,7 +1,6 @@
-import { TimePicker } from './chunk-EKVA7T7P.js';
-import { DatePicker } from './chunk-I5Z2RVDF.js';
-import { Field } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { DatePicker, TimePicker } from './chunk-WSLT32Q4.js';
+import { Field } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZD3VNVRF.js → chunk-7BGDSSAN.js}

@@ -1,8 +1,8 @@
-import { resolveTreeNodes, TreeView } from './chunk-C6ZV4VBN.js';
+import { resolveTreeNodes, TreeView } from './chunk-C37U3GCC.js';
 import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Field, Dialog, Icon, Button, Input } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import { useState, useMemo, useEffect } from 'react';
+import { Field, Dialog, Icon, Button, Input } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var PICKER_CSS = `
@@ -55,14 +55,6 @@ function TreePickerImpl({
     onChange?.(pendingId, node);
     setOpen(false);
   };
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open]);
   const commitDisabled = !allowEmpty && pendingId == null;
   const noneSelected = pendingId == null;
   const trigger = /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "var(--wp-space-2)", minWidth: 0 }, children: [
@@ -98,7 +90,7 @@ function TreePickerImpl({
     )
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "erp-treepicker", style: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx("style", { children: PICKER_CSS }),
+    /* @__PURE__ */ jsx("style", { href: "erp-treepicker", precedence: "medium", children: PICKER_CSS }),
     label ? /* @__PURE__ */ jsx(Field, { label, children: trigger }) : trigger,
     open ? /* @__PURE__ */ jsx(OverlayLayer, { onClose: closeDialog, children: /* @__PURE__ */ jsx(
       Dialog,

package/dist/{chunk-Y2LIEWQX.js → chunk-7FZTUI6U.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-QTHYLNJW.js';
-import { Switch, Field, Select, Input } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { Text } from './chunk-37SFFW37.js';
+import { Switch, Field, Select, Input } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -13,7 +13,8 @@ function OptionValueFieldsImpl({
   value,
   onChange,
   disabled = false,
-  readOnly = false
+  readOnly = false,
+  emptySchemaText = "\uC774 \uC7A5\uBE44\uC5D0 \uC815\uD574 \uB454 \uC635\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC7A5\uBE44 \uC0C1\uC138\uC758 \uC218\uC815 \u2192 \uC635\uC158 \uD0ED\uC5D0\uC11C \uBA3C\uC800 \uC11C\uC2DD\uC744 \uC815\uD558\uC138\uC694."
 }) {
   const fields = useMemo(() => normalizeSchema(schema), [schema]);
   const current = useMemo(
@@ -48,7 +49,7 @@ function OptionValueFieldsImpl({
     }) });
   }
   if (fields.length === 0) {
-    return /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { color: "var(--wp-text-muted)" }, children: "\uC774 \uC7A5\uBE44\uC5D0 \uC815\uD574 \uB454 \uC635\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC7A5\uBE44 \uC0C1\uC138\uC758 \uC218\uC815 \u2192 \uC635\uC158 \uD0ED\uC5D0\uC11C \uBA3C\uC800 \uC11C\uC2DD\uC744 \uC815\uD558\uC138\uC694." });
+    return /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { color: "var(--wp-text-muted)" }, children: emptySchemaText });
   }
   return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
     fields.map((field) => {

package/dist/{chunk-HJ5VSXR4.js → chunk-7P7N43JV.js}

@@ -1,5 +1,5 @@
-import { IconButton, Input } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { IconButton, Input } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-55VB6SDU.js → chunk-A5XQOEVH.js}

@@ -1,7 +1,8 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
-import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { fetchAllPages } from './chunk-Q4SWUINA.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
+import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var deptOf = (row) => row.department_name ?? row.department?.name ?? null;
@@ -24,10 +25,13 @@ function RoleMemberPickerImpl({
   catalogEndpoint = "/employees",
   employees,
   sourceEndpoint,
-  disabled = false
+  disabled = false,
+  silentStatuses
 }) {
   const adapter = useSduiAdapter();
   const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const apiRef = useRef(api);
+  apiRef.current = api;
   const base = useMemo(() => sourceEndpoint ? sourceEndpoint.split("?")[0] : null, [sourceEndpoint]);
   const [members, setMembers] = useState(null);
   const [membersLoading, setMembersLoading] = useState(false);
@@ -38,16 +42,20 @@ function RoleMemberPickerImpl({
   const [saving, setSaving] = useState(false);
   const [removingId, setRemovingId] = useState(null);
   const requestSeq = useRef(0);
+  const silentStatusesRef = useRef(silentStatuses);
+  silentStatusesRef.current = silentStatuses;
   const fetchMembers = useCallback((endpoint) => {
     const seq = ++requestSeq.current;
     setMembersLoading(true);
-    api(endpoint, { method: "GET" }).then((response) => {
+    apiRef.current(endpoint, { method: "GET" }).then((response) => {
       if (requestSeq.current !== seq) return;
       setMembers(parseMembers(response));
     }).catch((err) => {
       if (requestSeq.current !== seq) return;
       setMembers((prev) => prev ?? []);
-      if (!(err?.status === 503)) {
+      const status = err?.status;
+      const silent = typeof status === "number" && (silentStatusesRef.current ?? []).includes(status);
+      if (!silent) {
         setError(messageOf(err, "\uC5ED\uD560\uC5D0 \uBD80\uC5EC\uB41C \uC0AC\uC6A9\uC790\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."));
       }
     }).finally(() => {
@@ -72,25 +80,20 @@ function RoleMemberPickerImpl({
   useEffect(() => {
     if (givenCatalog.length > 0 || fetchedCatalog !== null) return;
     let alive = true;
-    (async () => {
-      const rows = [];
-      for (let page = 0; page < 10; page += 1) {
-        const response = await api(`${catalogEndpoint}?limit=500&offset=${rows.length}`, {
-          method: "GET"
-        });
-        const batch = Array.isArray(response?.data) ? response.data : [];
-        rows.push(...batch.filter((row) => row && typeof row.id === "string"));
-        const total = typeof response?.total === "number" ? response.total : rows.length;
-        if (batch.length === 0 || rows.length >= total) break;
-      }
+    fetchAllPages(apiRef.current, catalogEndpoint, (body) => {
+      const batch = Array.isArray(body.data) ? body.data : [];
+      return batch.filter(
+        (row) => typeof row === "object" && row !== null && typeof row.id === "string"
+      );
+    }).then((rows) => {
       if (alive) setFetchedCatalog(rows);
-    })().catch(() => {
+    }).catch(() => {
       if (alive) setFetchedCatalog([]);
     });
     return () => {
       alive = false;
     };
-  }, [givenCatalog, fetchedCatalog, api, catalogEndpoint]);
+  }, [givenCatalog, fetchedCatalog, catalogEndpoint]);
   const catalog = givenCatalog.length > 0 ? givenCatalog : fetchedCatalog ?? [];
   const catalogLoading = givenCatalog.length === 0 && fetchedCatalog === null;
   const memberIds = useMemo(() => new Set((members ?? []).map((row) => row.id)), [members]);

package/dist/{chunk-77LKJCMM.js → chunk-A6LAIGUS.js}

@@ -1,6 +1,7 @@
-import { IconButton, Badge } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-MMIGOPO5.js';
+import { IconButton, Badge } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var NODE_W = 176;
@@ -8,10 +9,7 @@ var NODE_H = 64;
 var SIBLING_GAP = 24;
 var LEVEL_GAP = 48;
 var CANVAS_PADDING = 48;
-var MIN_ZOOM = 0.35;
-var MAX_ZOOM = 1.8;
 var ZOOM_STEP = 1.2;
-var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 function buildBlock(node) {
   const childBlocks = (node.children ?? []).map(buildBlock);
   const childAreaWidth = childBlocks.reduce(
@@ -108,11 +106,20 @@ function OrgChartImpl({
   selectedId,
   height = 520
 }) {
-  const viewportRef = useRef(null);
-  const dragRef = useRef(null);
-  const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
-  const [dragging, setDragging] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const {
+    viewportRef,
+    view,
+    setView,
+    dragging,
+    isFullscreen,
+    viewportCenter,
+    zoomAt,
+    toggleFullscreen,
+    pointerHandlers
+  } = usePanZoomCanvas({
+    stopSelector: "[data-orgchart-stop]",
+    initialView: { scale: 1, x: 0, y: 0 }
+  });
   const [internalSelected, setInternalSelected] = useState(
     void 0
   );
@@ -128,103 +135,11 @@ function OrgChartImpl({
         y: 0
       });
     },
-    [layout.width]
+    [layout.width, setView, viewportRef]
   );
   useEffect(() => {
     centerView(1);
   }, [centerView]);
-  useEffect(() => {
-    const handleChange = () => {
-      setIsFullscreen(document.fullscreenElement === viewportRef.current);
-    };
-    document.addEventListener("fullscreenchange", handleChange);
-    return () => document.removeEventListener("fullscreenchange", handleChange);
-  }, []);
-  const zoomAt = useCallback(
-    (nextScale, focal) => {
-      setView((current) => {
-        const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
-        return {
-          scale,
-          x: focal.x - (focal.x - current.x) / current.scale * scale,
-          y: focal.y - (focal.y - current.y) / current.scale * scale
-        };
-      });
-    },
-    []
-  );
-  useEffect(() => {
-    const el = viewportRef.current;
-    if (!el) return;
-    const handleWheel = (event) => {
-      event.preventDefault();
-      const rect = el.getBoundingClientRect();
-      const focal = {
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top
-      };
-      setView((current) => {
-        const scale = clamp(
-          current.scale * (event.deltaY > 0 ? 0.9 : 1.1),
-          MIN_ZOOM,
-          MAX_ZOOM
-        );
-        return {
-          scale,
-          x: focal.x - (focal.x - current.x) / current.scale * scale,
-          y: focal.y - (focal.y - current.y) / current.scale * scale
-        };
-      });
-    };
-    el.addEventListener("wheel", handleWheel, { passive: false });
-    return () => el.removeEventListener("wheel", handleWheel);
-  }, []);
-  const viewportCenter = useCallback(() => {
-    const rect = viewportRef.current?.getBoundingClientRect();
-    if (!rect) return { x: 0, y: 0 };
-    return { x: rect.width / 2, y: rect.height / 2 };
-  }, []);
-  const handlePointerDown = (event) => {
-    if (event.target.closest("[data-orgchart-stop]")) return;
-    dragRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-      originX: view.x,
-      originY: view.y
-    };
-    setDragging(true);
-    event.currentTarget.setPointerCapture(event.pointerId);
-  };
-  const handlePointerMove = (event) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    setView((current) => ({
-      ...current,
-      x: drag.originX + event.clientX - drag.startX,
-      y: drag.originY + event.clientY - drag.startY
-    }));
-  };
-  const handlePointerUp = (event) => {
-    if (dragRef.current?.pointerId !== event.pointerId) return;
-    dragRef.current = null;
-    setDragging(false);
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-  };
-  const toggleFullscreen = async () => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    try {
-      if (document.fullscreenElement === viewport) {
-        await document.exitFullscreen();
-      } else {
-        await viewport.requestFullscreen();
-      }
-    } catch {
-    }
-  };
   const handleNodeClick = (node) => {
     if (selectedId === void 0) setInternalSelected(node.id);
     onNodeClick?.(node);
@@ -235,10 +150,7 @@ function OrgChartImpl({
       ref: viewportRef,
       role: "application",
       "aria-label": "\uC870\uC9C1\uB3C4 \uCE94\uBC84\uC2A4",
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
+      ...pointerHandlers,
       style: {
         position: "relative",
         height: isFullscreen ? "100vh" : height,

package/dist/{chunk-YXS5FXVS.js → chunk-AC5TI3BE.js}

@@ -1,8 +1,8 @@
-import { includesLooseSearch } from './chunk-VDBUXYEB.js';
+import { includesLooseSearch } from './chunk-WOYMEEPH.js';
 import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import React, { useMemo, useState, useEffect } from 'react';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import React, { useMemo, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function SearchableMultiPickerImpl({
@@ -16,7 +16,7 @@ function SearchableMultiPickerImpl({
   const safeOptions = useMemo(() => options ?? [], [options]);
   const isControlled = values !== void 0 && typeof onChange === "function";
   const [internalValues, setInternalValues] = useState(values ?? []);
-  const committed = isControlled ? values : internalValues;
+  const committed = (isControlled ? values : internalValues) ?? [];
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [draft, setDraft] = useState([]);
@@ -33,9 +33,8 @@ function SearchableMultiPickerImpl({
   };
   const openDialog = () => {
     if (disabled) return;
-    const current = committed ?? [];
-    setDraft(sortByOptionOrder(current));
-    setSelectedAtOpen(new Set(current));
+    setDraft(sortByOptionOrder(committed));
+    setSelectedAtOpen(new Set(committed));
     setQuery("");
     setOpen(true);
   };
@@ -51,14 +50,6 @@ function SearchableMultiPickerImpl({
       (current) => sortByOptionOrder(checked ? [...current, value] : current.filter((item) => item !== value))
     );
   };
-  useEffect(() => {
-    if (!open) return;
-    const closeOnEscape = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", closeOnEscape);
-    return () => document.removeEventListener("keydown", closeOnEscape);
-  }, [open]);
   const visibleOptions = useMemo(() => {
     const selectedFirst = [
       ...safeOptions.filter((option) => selectedAtOpen.has(option.value)),

package/dist/{chunk-AIOJYVJ2.js → chunk-AXGF4M57.js}

@@ -1,4 +1,4 @@
-import { boxed, containerLayoutStyle } from './chunk-YQOMSWW5.js';
+import { boxed, containerLayoutStyle } from './chunk-5WW4MBRO.js';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-5MPK3NZK.js → chunk-B6WMC2AN.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-QTHYLNJW.js';
-import { Field, Input, Select, IconButton, Button } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { Text } from './chunk-37SFFW37.js';
+import { Field, Input, Select, IconButton, Button } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-C6ZV4VBN.js → chunk-C37U3GCC.js}

@@ -1,6 +1,6 @@
-import { buildCascadingTree } from './chunk-VDBUXYEB.js';
-import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { buildCascadingTree } from './chunk-WOYMEEPH.js';
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -239,7 +239,7 @@ function TreeViewImpl({
       className: "erp-treeview",
       style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", minWidth: 0 },
       children: [
-        /* @__PURE__ */ jsx("style", { children: TREE_CSS }),
+        /* @__PURE__ */ jsx("style", { href: "erp-treeview", precedence: "medium", children: TREE_CSS }),
         searchable ? /* @__PURE__ */ jsx(
           Input,
           {

package/dist/{chunk-265YPW4W.js → chunk-DMLDKW7K.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-YQOMSWW5.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useSyncExternalStore } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-FZ72IDVF.js → chunk-E6ISNQK3.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { Button } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-STX2AX6Y.js → chunk-FLAN7CV3.js}

@@ -1,7 +1,8 @@
-import { includesLooseSearch } from './chunk-VDBUXYEB.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
-import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
+import { includesLooseSearch } from './chunk-WOYMEEPH.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
+import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import React, { useState, useId, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -47,29 +48,13 @@ var stepLabel = (step) => {
   }
 };
 var renumber = (steps) => steps.map((step, index) => ({ ...step, order: index + 1 }));
-var uidCounter = 0;
-var uid = (prefix) => `${prefix}-${Date.now()}-${++uidCounter}`;
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
 function toSearchResults(payload) {
-  let rows = [];
-  if (Array.isArray(payload)) rows = payload;
-  else if (isRecord(payload)) {
-    for (const key of ["items", "data", "results", "rows"]) {
-      const inner = payload[key];
-      if (Array.isArray(inner)) {
-        rows = inner;
-        break;
-      }
-    }
-  }
-  return rows.filter(isRecord).flatMap((row) => {
+  return unwrapRows(payload).flatMap((row) => {
     const id = row.id;
     const name = row.name ?? row.label;
     if (id === null || id === void 0 || name === null || name === void 0) return [];
     const subRaw = row.sub ?? row.email ?? row.workEmail ?? row.department;
-    const sub = isRecord(subRaw) ? subRaw.name : subRaw;
+    const sub = isPlainObject(subRaw) ? subRaw.name : subRaw;
     return [
       {
         id: String(id),
@@ -80,23 +65,6 @@ function toSearchResults(payload) {
     ];
   });
 }
-var ellipsisStyle = {
-  display: "block",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-var orderCircleStyle = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 28,
-  height: 28,
-  flex: "none",
-  borderRadius: "var(--wp-radius-pill)",
-  background: "var(--wp-surface-brand-tint)",
-  color: "var(--wp-text-brand)"
-};
 var dashedEmptyStyle = {
   border: "var(--wp-border-w) dashed var(--wp-border-default)",
   borderRadius: "var(--wp-radius-lg)",