@wipco/sdui 0.50.6 → 1.0.1

package/dist/{chunk-I5Z2RVDF.js → chunk-WSLT32Q4.js}

@@ -1,7 +1,7 @@
 import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-XQPTSEJC.js';
-import { Icon } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import React, { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
+import { Icon } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import React, { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -87,8 +87,208 @@ function useDismiss(open, hostRef, popRef, onDismiss) {
 function focusStaysInside(next, hostRef, popRef) {
   return next instanceof Node && Boolean(hostRef.current?.contains(next) || popRef.current?.contains(next));
 }
-var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
 var HM_RE = /^\d{2}:\d{2}$/;
+var LIST_HEIGHT = 260;
+var MINUTES_PER_DAY = 24 * 60;
+function maskHm(text) {
+  const digits = text.replace(/\D/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+function parseHm(value) {
+  if (typeof value !== "string" || !HM_RE.test(value)) return void 0;
+  const h = Number(value.slice(0, 2));
+  const m = Number(value.slice(3, 5));
+  if (h > 23 || m > 59) return void 0;
+  return h * 60 + m;
+}
+function formatHm(minutes) {
+  const h = Math.floor(minutes / 60) % 24;
+  const m = minutes % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function buildOptions(step, min, max) {
+  const safeStep = Number.isFinite(step) && step >= 1 ? Math.min(Math.floor(step), 720) : 30;
+  const from = min ?? 0;
+  const to = max ?? MINUTES_PER_DAY - 1;
+  const out = [];
+  for (let m = Math.ceil(from / safeStep) * safeStep; m <= to; m += safeStep) out.push(formatHm(m));
+  return out;
+}
+function TimePickerImpl({
+  value,
+  onChange,
+  min,
+  max,
+  step = 30,
+  placeholder,
+  invalid = false,
+  disabled = false,
+  size = "md",
+  listLabel = "\uC2DC\uAC01 \uC120\uD0DD"
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerValue, setInnerValue] = useState("");
+  const [grabFocus, setGrabFocus] = useState(false);
+  const hostRef = useRef(null);
+  const popRef = useRef(null);
+  const inputRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentValue = (isControlled ? value : innerValue) ?? "";
+  const [text, setText] = useState(currentValue);
+  useEffect(() => {
+    setText(currentValue);
+  }, [currentValue]);
+  const minMinutes = useMemo(() => parseHm(min), [min]);
+  const maxMinutes = useMemo(() => parseHm(max), [max]);
+  const options = useMemo(() => buildOptions(step, minMinutes, maxMinutes), [step, minMinutes, maxMinutes]);
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") inputRef.current?.focus();
+  }, []);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, LIST_HEIGHT);
+  const portal = usePortalTo();
+  const isInvalid = Boolean(invalid);
+  const commit = (next) => {
+    if (!isControlled) setInnerValue(next);
+    onChange?.(next);
+  };
+  const handleTextChange = (raw) => {
+    const masked = maskHm(raw);
+    setText(masked);
+    if (masked === "") {
+      commit("");
+      return;
+    }
+    const minutes = parseHm(masked);
+    if (minutes === void 0) return;
+    if (minMinutes !== void 0 && minutes < minMinutes) return;
+    if (maxMinutes !== void 0 && minutes > maxMinutes) return;
+    commit(masked);
+  };
+  const focusList = () => {
+    const list = popRef.current;
+    if (!list) return;
+    (list.querySelector('[aria-selected="true"]') ?? list.querySelector('[role="option"]'))?.focus();
+  };
+  const openList = (claimFocus) => {
+    setGrabFocus(claimFocus);
+    setOpen(true);
+  };
+  useLayoutEffect(() => {
+    if (!open || !grabFocus || !popRef.current) return;
+    focusList();
+    setGrabFocus(false);
+  }, [open, grabFocus, anchor]);
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (open) focusList();
+      else openList(true);
+      return;
+    }
+    if (event.key === "Enter" && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const handleOptionKeyDown = (index) => (event) => {
+    const step2 = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+    if (step2 !== 0) {
+      event.preventDefault();
+      const next = Math.min(Math.max(index + step2, 0), options.length - 1);
+      popRef.current?.querySelectorAll('[role="option"]')[next]?.focus();
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const target = event.key === "Home" ? 0 : options.length - 1;
+      popRef.current?.querySelectorAll('[role="option"]')[target]?.focus();
+    }
+  };
+  const pick = (option) => {
+    setText(option);
+    commit(option);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
+    if (text !== currentValue) setText(currentValue);
+    setOpen(false);
+  };
+  const classes = ["wp-input", "wp-input--mono", "wp-tp-input"];
+  if (size !== "md") classes.push(`wp-input--${size}`);
+  if (isInvalid) classes.push("wp-input--invalid");
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-tp-host", onBlur: handleBlur, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-timepicker", css: TP_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
+    /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-inputwrap__lead", children: /* @__PURE__ */ jsx(Icon, { name: "clock", size: size === "lg" ? 16 : 15 }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: classes.join(" "),
+          inputMode: "numeric",
+          autoComplete: "off",
+          spellCheck: false,
+          maxLength: 5,
+          placeholder: placeholder ?? "HH:MM",
+          value: text,
+          disabled,
+          "aria-invalid": isInvalid || void 0,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          onChange: (event) => handleTextChange(event.target.value),
+          onKeyDown: handleKeyDown,
+          onPointerDown: () => {
+            if (!disabled && !open) openList(false);
+          }
+        }
+      )
+    ] }),
+    portal(
+      anchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-anchored-pop wp-tp-pop",
+          style: anchorStyle(anchor),
+          role: "listbox",
+          "aria-label": listLabel,
+          children: options.map((option, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": option === currentValue,
+              className: option === currentValue ? "wp-tp-opt wp-tp-opt--on" : "wp-tp-opt",
+              onKeyDown: handleOptionKeyDown(index),
+              onClick: () => pick(option),
+              children: option
+            },
+            option
+          ))
+        }
+      )
+    )
+  ] });
+}
+var TP_CSS = `
+.wp-tp-host{position:relative}
+.wp-tp-input{padding-right:6px;min-width:calc(5ch + 36px)}
+.wp-tp-pop{padding:var(--wp-space-1);max-height:260px;overflow-y:auto;overscroll-behavior:contain}
+.wp-tp-opt{display:block;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-family:var(--wp-font-mono);font-size:12.5px;color:var(--wp-text-default);text-align:left;cursor:pointer}
+.wp-tp-opt:hover{background:var(--wp-surface-hover)}
+.wp-tp-opt:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-2px}
+.wp-tp-opt--on{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+`;
+var TimePicker = boxed(TimePickerImpl, "TimePicker");
+var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
 function parseYmd(value) {
   if (typeof value !== "string" || !YMD_RE.test(value)) return void 0;
   const y = Number(value.slice(0, 4));
@@ -152,12 +352,10 @@ function maskYmdHm(text) {
   const digits = text.replace(/\D/g, "").slice(0, 12);
   const date = maskYmd(digits.slice(0, 8));
   if (digits.length <= 8) return date;
-  const time = digits.slice(8);
-  return time.length <= 2 ? `${date} ${time}` : `${date} ${time.slice(0, 2)}:${time.slice(2)}`;
+  return `${date} ${maskHm(digits.slice(8))}`;
 }
 function isValidHm(text) {
-  if (!HM_RE.test(text)) return false;
-  return Number(text.slice(0, 2)) <= 23 && Number(text.slice(3, 5)) <= 59;
+  return parseHm(text) !== void 0;
 }
 function splitDateTime(value) {
   if (!value) return ["", ""];
@@ -176,11 +374,32 @@ function toFieldValue(text, withTime) {
   if (!parseYmd(date) || !isValidHm(time)) return void 0;
   return `${date}T${time}`;
 }
-var WEEKDAYS_KO = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var KO_LOCALE = {
+  weekdays: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"],
+  weekStartsOn: 0,
+  formatCaption: (year, month) => `${year}\uB144 ${month}\uC6D4`,
+  prevMonthLabel: "\uC774\uC804 \uB2EC",
+  nextMonthLabel: "\uB2E4\uC74C \uB2EC",
+  calendarLabel: "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825",
+  startLabel: "\uC2DC\uC791\uC77C",
+  endLabel: "\uC885\uB8CC\uC77C"
+};
+function resolveLocale(locale, calendarLabel) {
+  return {
+    weekdays: locale?.weekdays ?? KO_LOCALE.weekdays,
+    weekStartsOn: locale?.weekStartsOn ?? KO_LOCALE.weekStartsOn,
+    formatCaption: locale?.formatCaption ?? KO_LOCALE.formatCaption,
+    prevMonthLabel: locale?.prevMonthLabel ?? KO_LOCALE.prevMonthLabel,
+    nextMonthLabel: locale?.nextMonthLabel ?? KO_LOCALE.nextMonthLabel,
+    calendarLabel: locale?.calendarLabel ?? calendarLabel,
+    startLabel: locale?.startLabel ?? KO_LOCALE.startLabel,
+    endLabel: locale?.endLabel ?? KO_LOCALE.endLabel
+  };
+}
 var WEEKS_PER_MONTH = 6;
-function buildMonthCells(index, min, max) {
+function buildMonthCells(index, min, max, weekStartsOn = 0) {
   const first = monthStart(index);
-  const gridStart = addDays(first, -first.getDay());
+  const gridStart = addDays(first, -((first.getDay() - weekStartsOn + 7) % 7));
   const weeks = [];
   for (let w = 0; w < WEEKS_PER_MONTH; w += 1) {
     const row = [];
@@ -197,6 +416,9 @@ function buildMonthCells(index, min, max) {
   }
   return weeks;
 }
+function clampViewToFocus(focusIdx, viewIdx, monthCount) {
+  return focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
+}
 function Calendar({
   monthCount,
   minDate,
@@ -205,19 +427,21 @@ function Calendar({
   onPick,
   focusDate,
   onFocusDateChange,
-  autoFocus = false
+  autoFocus = false,
+  locale
 }) {
   const focusIdx = monthIndex(focusDate);
   const [viewIdx, setViewIdx] = useState(focusIdx);
   const gridRef = useRef(null);
   const focusYmd = formatYmd(focusDate);
-  const visibleIdx = focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
+  const visibleIdx = clampViewToFocus(focusIdx, viewIdx, monthCount);
   if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
   const claimFocusRef = useRef(autoFocus);
   useLayoutEffect(() => {
     const grid = gridRef.current;
     if (!grid) return;
-    const holdsFocus = document.activeElement instanceof Node && grid.contains(document.activeElement);
+    const active = document.activeElement;
+    const holdsFocus = active instanceof HTMLElement && grid.contains(active) && active.classList.contains("wp-dp__day-btn");
     const claim = claimFocusRef.current || holdsFocus;
     claimFocusRef.current = false;
     if (claim) grid.querySelector('[tabindex="0"]')?.focus();
@@ -230,6 +454,10 @@ function Calendar({
   const moveFocus = (next) => {
     onFocusDateChange(clampDate(next, minDate, maxDate));
   };
+  const moveView = (delta) => {
+    setViewIdx(visibleIdx + delta);
+    moveFocus(addMonths(focusDate, delta));
+  };
   const handleKeyDown = (event) => {
     const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
     if (deltaDays !== 0) {
@@ -239,7 +467,8 @@ function Calendar({
     }
     if (event.key === "Home" || event.key === "End") {
       event.preventDefault();
-      const offset = event.key === "Home" ? -focusDate.getDay() : 6 - focusDate.getDay();
+      const inWeek = (focusDate.getDay() - locale.weekStartsOn + 7) % 7;
+      const offset = event.key === "Home" ? -inWeek : 6 - inWeek;
       moveFocus(addDays(focusDate, offset));
       return;
     }
@@ -255,10 +484,10 @@ function Calendar({
         {
           type: "button",
           className: "wp-dp__navbtn",
-          "aria-label": "\uC774\uC804 \uB2EC",
+          "aria-label": locale.prevMonthLabel,
           "aria-disabled": prevDisabled || void 0,
           disabled: prevDisabled,
-          onClick: () => setViewIdx(visibleIdx - 1),
+          onClick: () => moveView(-1),
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
         }
       ),
@@ -267,10 +496,10 @@ function Calendar({
         {
           type: "button",
           className: "wp-dp__navbtn",
-          "aria-label": "\uB2E4\uC74C \uB2EC",
+          "aria-label": locale.nextMonthLabel,
           "aria-disabled": nextDisabled || void 0,
           disabled: nextDisabled,
-          onClick: () => setViewIdx(visibleIdx + 1),
+          onClick: () => moveView(1),
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
         }
       )
@@ -278,12 +507,25 @@ function Calendar({
     Array.from({ length: monthCount }, (_, offset) => {
       const idx = visibleIdx + offset;
       const first = monthStart(idx);
-      const weeks = buildMonthCells(idx, minDate, maxDate);
-      const caption = `${first.getFullYear()}\uB144 ${first.getMonth() + 1}\uC6D4`;
+      const weeks = buildMonthCells(idx, minDate, maxDate, locale.weekStartsOn);
+      const caption = locale.formatCaption(first.getFullYear(), first.getMonth() + 1);
       return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
         /* @__PURE__ */ jsx("div", { className: "wp-dp__caption", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__caption-label", children: caption }) }),
         /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: WEEKDAYS_KO.map((name) => /* @__PURE__ */ jsx("th", { scope: "col", className: "wp-dp__weekday", abbr: name, children: name }, name)) }) }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: Array.from({ length: 7 }, (_2, col) => {
+            const day = (locale.weekStartsOn + col) % 7;
+            const name = locale.weekdays[day] ?? "";
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                className: day === 0 ? "wp-dp__weekday wp-dp__weekday--sun" : "wp-dp__weekday",
+                abbr: name,
+                children: name
+              },
+              day
+            );
+          }) }) }),
           /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
             const state = cell.disabled ? {} : dayState(cell.date);
             const classes = ["wp-dp__day"];
@@ -376,8 +618,10 @@ function DatePickerImpl({
   invalid = false,
   disabled = false,
   size = "md",
-  withTime = false
+  withTime = false,
+  locale
 }) {
+  const loc = resolveLocale(locale, KO_LOCALE.calendarLabel);
   const [open, setOpen] = useState(false);
   const [innerValue, setInnerValue] = useState("");
   const hostRef = useRef(null);
@@ -474,7 +718,7 @@ function DatePickerImpl({
           className: "wp-anchored-pop wp-dp-pop",
           style: anchorStyle(anchor),
           role: "dialog",
-          "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825",
+          "aria-label": loc.calendarLabel,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
@@ -484,6 +728,7 @@ function DatePickerImpl({
               focusDate,
               onFocusDateChange: setFocusDate,
               autoFocus: grabFocus,
+              locale: loc,
               dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
               onPick: (date) => {
                 const ymd = formatYmd(date);
@@ -508,8 +753,10 @@ function DateRangePickerImpl({
   max,
   invalid = false,
   disabled = false,
-  size = "md"
+  size = "md",
+  locale
 }) {
+  const loc = resolveLocale(locale, "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825");
   const [open, setOpen] = useState(false);
   const [innerRange, setInnerRange] = useState({});
   const hostRef = useRef(null);
@@ -632,7 +879,7 @@ function DateRangePickerImpl({
           maxLength: 10,
           lead: true,
           expanded: open,
-          ariaLabel: "\uC2DC\uC791\uC77C",
+          ariaLabel: loc.startLabel,
           onValueChange: (raw) => handleTextChange("from", raw),
           onKeyDown: handleKeyDown("from"),
           onFocus: () => setEnd("from"),
@@ -654,7 +901,7 @@ function DateRangePickerImpl({
           maxLength: 10,
           lead: false,
           expanded: open,
-          ariaLabel: "\uC885\uB8CC\uC77C",
+          ariaLabel: loc.endLabel,
           onValueChange: (raw) => handleTextChange("to", raw),
           onKeyDown: handleKeyDown("to"),
           onFocus: () => setEnd("to"),
@@ -673,7 +920,7 @@ function DateRangePickerImpl({
           className: "wp-anchored-pop wp-dp-pop wp-dp-pop--wide",
           style: anchorStyle(anchor),
           role: "dialog",
-          "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825",
+          "aria-label": loc.calendarLabel,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
@@ -683,6 +930,7 @@ function DateRangePickerImpl({
               focusDate,
               onFocusDateChange: setFocusDate,
               autoFocus: grabFocus,
+              locale: loc,
               dayState: (date) => {
                 const t = date.getTime();
                 const start = fromDate?.getTime();
@@ -727,7 +975,7 @@ var DP_CSS = `
 .wp-dp__caption-label{font-size:13px;font-weight:600;color:var(--wp-text-strong)}
 .wp-dp__grid{border-collapse:collapse}
 .wp-dp__weekday{width:32px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--wp-text-muted);text-align:center}
-.wp-dp__weekday:first-child{color:var(--wp-text-danger)}
+.wp-dp__weekday--sun{color:var(--wp-text-danger)}
 .wp-dp__day{padding:0;text-align:center}
 .wp-dp__day-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;transition:background 0.12s,color 0.12s}
 .wp-dp__day:not(.wp-dp__day--selected):not(.wp-dp__day--disabled) .wp-dp__day-btn:hover{background:var(--wp-surface-hover)}
@@ -745,4 +993,4 @@ var DP_CSS = `
 var DatePicker = boxed(DatePickerImpl, "DatePicker");
 var DateRangePicker = boxed(DateRangePickerImpl, "DateRangePicker");
 
-export { AnchoredPopoverStyles, DatePicker, DateRangePicker, HoistedStyle, anchorStyle, focusStaysInside, useDismiss, usePopoverAnchor, usePortalTo };
+export { DatePicker, DateRangePicker, HoistedStyle, TimePicker, YMD_RE, parseYmd };

package/dist/{chunk-NYUHSMUU.js → chunk-XGFDY43I.js}

@@ -1,5 +1,5 @@
-import { Icon, Badge, Tooltip } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { Icon, Badge, Tooltip } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-ODKZF4IT.js → chunk-YOZN35HD.js}

@@ -1,6 +1,6 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
-import { Spinner, Badge, Icon } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
+import { Spinner, Badge, Icon } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -16,10 +16,17 @@ var period = (item, fromKey, toKey) => {
   if (!from && !to) return "";
   return `${from || "?"} ~ ${to || "\uD604\uC7AC"}`;
 };
-function summarizeItem(kind, raw) {
+function summarizeItem(kind, raw, fields) {
   if (typeof raw !== "object" || raw === null) return "";
   const item = raw;
   const parts = [];
+  if (fields) {
+    for (const key of fields) {
+      const v = text(item[key]);
+      if (v) parts.push(v);
+    }
+    return parts.join(" \xB7 ");
+  }
   switch (kind) {
     case "degrees":
       parts.push(text(item.institution), text(item.degree), text(item.field_of_study), period(item, "start_date", "end_date"));
@@ -66,25 +73,26 @@ var cellStyle = {
   whiteSpace: "pre-wrap",
   overflowWrap: "anywhere"
 };
-function ListCell({ kind, value }) {
+function ListCell({ kind, value, fields }) {
   const items = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsxs("div", { style: cellStyle, className: "wp-body-sm", children: [
     /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: [
       items.length,
       "\uAC74"
     ] }),
-    items.map((item, index) => /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--wp-space-1)" }, children: summarizeItem(kind, item) || "(\uB0B4\uC6A9 \uC5C6\uC74C)" }, index))
+    items.map((item, index) => /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--wp-space-1)" }, children: summarizeItem(kind, item, fields) || "(\uB0B4\uC6A9 \uC5C6\uC74C)" }, index))
   ] });
 }
 function ProfileEditDiffCardImpl({
   scalarLabels = {},
   relationLabels = {},
+  relationSummaryFields = {},
   sourceEndpoint
 }) {
   const adapter = useSduiAdapter();
   const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
   const [detail, setDetail] = useState(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(() => Boolean(sourceEndpoint));
   const [failed, setFailed] = useState(false);
   useEffect(() => {
     if (!sourceEndpoint) return;
@@ -139,7 +147,7 @@ function ProfileEditDiffCardImpl({
       const label = scalarLabels[key] ?? relationLabels[key] ?? key;
       return /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "flex-start", gap: "var(--wp-space-2)" }, children: [
         /* @__PURE__ */ jsx("span", { className: "wp-label", style: { flex: "none", width: 120, paddingTop: "var(--wp-space-2)" }, children: label }),
-        isList ? /* @__PURE__ */ jsx(ListCell, { kind: key, value: current[key] }) : /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: cellStyle, children: text(current[key]) || "-" }),
+        isList ? /* @__PURE__ */ jsx(ListCell, { kind: key, value: current[key], fields: relationSummaryFields[key] }) : /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: cellStyle, children: text(current[key]) || "-" }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -154,7 +162,7 @@ function ProfileEditDiffCardImpl({
             children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 14 })
           }
         ),
-        isList ? /* @__PURE__ */ jsx(ListCell, { kind: key, value: payload[key] }) : /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { ...cellStyle, background: "var(--wp-surface-brand-tint)" }, children: text(payload[key]) || "-" })
+        isList ? /* @__PURE__ */ jsx(ListCell, { kind: key, value: payload[key], fields: relationSummaryFields[key] }) : /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { ...cellStyle, background: "var(--wp-surface-brand-tint)" }, children: text(payload[key]) || "-" })
       ] }, key);
     })
   ] });

package/dist/{chunk-EKP6Z3G6.js → chunk-YVTV4ZV6.js}

@@ -1,4 +1,4 @@
-import { Spinner, EmptyState } from './chunk-TUOG7EEI.js';
+import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-6BCWFPNJ.js → chunk-YWUDBLO6.js}

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

package/dist/chunk-Z4PYMTTS.js

@@ -0,0 +1,41 @@
+// src/widgets/job-position-fetch.ts
+var LIMIT = 500;
+var MAX_PAGES = 10;
+var num = (a, b) => {
+  if (typeof a === "number" && Number.isFinite(a)) return a;
+  if (typeof b === "number" && Number.isFinite(b)) return b;
+  return 0;
+};
+function parseJobPositionRow(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const row = raw;
+  if (typeof row.name !== "string") return null;
+  const active = row.is_active ?? row.isActive;
+  return {
+    ...typeof row.id === "string" ? { id: row.id } : null,
+    name: row.name,
+    rankOrder: num(row.rank_order, row.rankOrder),
+    sortOrder: num(row.sort_order, row.sortOrder),
+    // is_active 결측을 false로 단정하면 목록이 전부 사라져 보인다 — true 폴백(v2와 동일).
+    isActive: typeof active === "boolean" ? active : true
+  };
+}
+async function fetchAllJobPositions(api, endpoint) {
+  const rows = [];
+  for (let page = 0; page < MAX_PAGES; page += 1) {
+    const sep = endpoint.includes("?") ? "&" : "?";
+    const res = await api(`${endpoint}${sep}limit=${LIMIT}&offset=${page * LIMIT}`, {
+      method: "GET"
+    });
+    const data = Array.isArray(res?.data) ? res.data : [];
+    for (const raw of data) {
+      const parsed = parseJobPositionRow(raw);
+      if (parsed) rows.push(parsed);
+    }
+    const total = typeof res?.total === "number" ? res.total : rows.length;
+    if (data.length === 0 || rows.length >= total) break;
+  }
+  return rows;
+}
+
+export { fetchAllJobPositions, parseJobPositionRow };

package/dist/{chunk-WXIQLWIX.js → chunk-ZFNFPXPR.js}

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

package/dist/{chunk-7GOWOSX6.js → chunk-ZORQPB6B.js}

@@ -1,5 +1,5 @@
-import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -100,7 +100,12 @@ var packWeek = (events, weekStart) => {
   }
   return { segments, lanes };
 };
-var statusTone = (status) => {
+var STATUS_TONES = ["neutral", "info", "success", "warning", "danger"];
+var statusToneOf = (status, overrides) => {
+  const injected = overrides?.[status];
+  if (typeof injected === "string" && STATUS_TONES.includes(injected)) {
+    return injected;
+  }
   if (/완료|반납|승인됨/.test(status)) return "success";
   if (/진행|수리중|대기/.test(status)) return "warning";
   if (/연체|반려|취소|분실/.test(status)) return "danger";
@@ -201,6 +206,7 @@ var EventCalendarImpl = ({
   date,
   onDateChange,
   types,
+  statusTones,
   onEventClick,
   selectedId
 }) => {
@@ -416,7 +422,7 @@ var EventCalendarImpl = ({
             }
           ),
           event.typeLabel && /* @__PURE__ */ jsx(Tag, { color: event.color, className: "wp-caption", children: event.typeLabel }),
-          event.status && /* @__PURE__ */ jsx(Badge, { tone: statusTone(event.status), children: event.status }),
+          event.status && /* @__PURE__ */ jsx(Badge, { tone: statusToneOf(event.status, statusTones), children: event.status }),
           /* @__PURE__ */ jsx("span", { style: { flex: "none", fontSize: 13, color: "var(--wp-text-muted)" }, children: fmtRange(event.dayStart, event.dayEnd) })
         ]
       },
@@ -766,4 +772,4 @@ var EventCalendarImpl = ({
 };
 var EventCalendar = boxed(EventCalendarImpl, "EventCalendar");
 
-export { EventCalendar };
+export { EventCalendar, statusToneOf };