@wipco/sdui 0.34.0 → 0.35.0

package/dist/{chunk-QDEZXA34.js → chunk-C7VAWTEP.js}

@@ -1,8 +1,25 @@
+import { useSduiAdapter, hostFetchOf } from './chunk-DKPNFEVU.js';
 import { Badge, Tag } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
-import { useMemo, useState } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+function pickSeedValues(payload, valueKey) {
+  let rows = [];
+  if (Array.isArray(payload)) {
+    rows = payload;
+  } else if (payload !== null && typeof payload === "object") {
+    const body = payload;
+    const arrayKeys = Object.keys(body).filter((key) => Array.isArray(body[key]));
+    if (arrayKeys.length === 1) rows = body[arrayKeys[0]];
+  }
+  return rows.flatMap((row) => {
+    if (typeof row === "string") return row ? [row] : [];
+    if (row === null || typeof row !== "object") return [];
+    const value = row[valueKey];
+    return typeof value === "string" && value ? [value] : [];
+  });
+}
 function foldOptions(options, valueKey, labelKey) {
   if (!Array.isArray(options)) return [];
   return options.flatMap((raw) => {
@@ -15,6 +32,8 @@ function foldOptions(options, valueKey, labelKey) {
   });
 }
 function TagMultiSelectImpl({
+  sourceEndpoint,
+  keepUnknownValues = true,
   options,
   valueKey,
   labelKey,
@@ -23,10 +42,35 @@ function TagMultiSelectImpl({
   disabled = false,
   emptyText = "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
 }) {
-  const safeOptions = useMemo(() => foldOptions(options, valueKey, labelKey), [options, valueKey, labelKey]);
+  const adapter = useSduiAdapter();
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const seededFor = useRef(null);
+  useEffect(() => {
+    if (!sourceEndpoint || seededFor.current === sourceEndpoint) return;
+    seededFor.current = sourceEndpoint;
+    const hostFetch = hostFetchOf(adapter);
+    if (!hostFetch) return;
+    let alive = true;
+    hostFetch(sourceEndpoint, { method: "GET" }).then((payload) => {
+      if (!alive) return;
+      onChangeRef.current?.(pickSeedValues(payload, valueKey ?? "value"));
+    }).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [sourceEndpoint, adapter, valueKey]);
+  const folded = useMemo(() => foldOptions(options, valueKey, labelKey), [options, valueKey, labelKey]);
   const isControlled = values !== void 0 && typeof onChange === "function";
   const [internalValues, setInternalValues] = useState(values ?? []);
   const current = isControlled ? values : internalValues;
+  const safeOptions = useMemo(() => {
+    if (!keepUnknownValues) return folded;
+    const known = new Set(folded.map((option) => option.value));
+    const unknown = (current ?? []).filter((value) => value && !known.has(value)).map((value) => ({ value, label: value }));
+    return unknown.length > 0 ? [...folded, ...unknown] : folded;
+  }, [folded, current, keepUnknownValues]);
   const currentSet = useMemo(() => new Set(current), [current]);
   const toggle = (value) => {
     const set = new Set(currentSet);
@@ -71,4 +115,4 @@ function TagMultiSelectImpl({
 }
 var TagMultiSelect = boxed(TagMultiSelectImpl, "TagMultiSelect");
 
-export { TagMultiSelect };
+export { TagMultiSelect, pickSeedValues };

package/dist/chunk-FS65US2B.js

@@ -0,0 +1,167 @@
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
+import { Spinner, Badge, Icon } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var text = (value) => {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value.trim();
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+};
+var period = (item, fromKey, toKey) => {
+  const from = text(item[fromKey]);
+  const to = text(item[toKey]);
+  if (!from && !to) return "";
+  return `${from || "?"} ~ ${to || "\uD604\uC7AC"}`;
+};
+function summarizeItem(kind, raw) {
+  if (typeof raw !== "object" || raw === null) return "";
+  const item = raw;
+  const parts = [];
+  switch (kind) {
+    case "degrees":
+      parts.push(text(item.institution), text(item.degree), text(item.field_of_study), period(item, "start_date", "end_date"));
+      break;
+    case "certifications":
+      parts.push(text(item.name), text(item.authority), text(item.certification_date));
+      break;
+    case "careers":
+      parts.push(text(item.company), text(item.title) || text(item.duty), period(item, "start_date", "end_date"));
+      break;
+    case "awards":
+      parts.push(text(item.title), text(item.authority), text(item.award_date));
+      break;
+    case "dispatches":
+      parts.push(text(item.destination), text(item.purpose), period(item, "start_date", "end_date"));
+      break;
+    case "licenses":
+      parts.push(text(item.license), text(item.qualification), text(item.grade), text(item.association));
+      break;
+    default: {
+      for (const [key, value] of Object.entries(item)) {
+        if (["id", "employee_id", "created_at", "updated_at", "deleted_at"].includes(key)) continue;
+        const v = text(value);
+        if (v) parts.push(v);
+        if (parts.length >= 3) break;
+      }
+    }
+  }
+  return parts.filter(Boolean).join(" \xB7 ");
+}
+var noticeStyle = {
+  border: "var(--wp-border-w) dashed var(--wp-border-default)",
+  borderRadius: "var(--wp-radius-lg)",
+  padding: "var(--wp-space-4)",
+  textAlign: "center",
+  color: "var(--wp-text-muted)"
+};
+var cellStyle = {
+  flex: 1,
+  minWidth: 0,
+  padding: "var(--wp-space-2)",
+  borderRadius: "var(--wp-radius-md)",
+  background: "var(--wp-surface-sunken)",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere"
+};
+function ListCell({ kind, value }) {
+  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))
+  ] });
+}
+function ProfileEditDiffCardImpl({
+  scalarLabels = {},
+  relationLabels = {},
+  sourceEndpoint
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    if (!sourceEndpoint) return;
+    let alive = true;
+    setLoading(true);
+    setFailed(false);
+    api(sourceEndpoint, { method: "GET" }).then((response) => {
+      if (!alive) return;
+      setDetail(response ?? null);
+      setLoading(false);
+    }).catch(() => {
+      if (!alive) return;
+      setDetail(null);
+      setFailed(true);
+      setLoading(false);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [sourceEndpoint]);
+  if (!sourceEndpoint) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-body-sm", style: noticeStyle, children: "sourceEndpoint \uAC00 \uD544\uC694\uD569\uB2C8\uB2E4." });
+  }
+  if (loading) return /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uBCC0\uACBD \uB0B4\uC6A9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911" });
+  if (failed || !detail) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-body-sm", style: noticeStyle, children: "\uBCC0\uACBD \uB0B4\uC6A9\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 \u2014 \uC774\uB825\uCE74\uB4DC \uC218\uC815 \uACB0\uC7AC\uC5D0\uC11C\uB9CC \uD45C\uC2DC\uB429\uB2C8\uB2E4." });
+  }
+  const payload = detail.request && typeof detail.request.payload === "object" && detail.request.payload !== null ? detail.request.payload : {};
+  const current = typeof detail.current === "object" && detail.current !== null ? detail.current : {};
+  const keys = Object.keys(payload);
+  const applied = Boolean(detail.request?.applied_at);
+  if (keys.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-body-sm", style: noticeStyle, children: "\uC2E0\uCCAD\uB41C \uBCC0\uACBD \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "center", gap: "var(--wp-space-2)" }, children: [
+      /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: [
+        "\uBCC0\uACBD \uD56D\uBAA9 ",
+        keys.length,
+        "\uAC1C \xB7 \uBAA9\uB85D \uD56D\uBAA9(\uD559\uB825\xB7\uC790\uACA9\uC99D \uB4F1)\uC740 \uBAA9\uB85D \uC804\uCCB4\uAC00 \uAD50\uCCB4\uB429\uB2C8\uB2E4"
+      ] }),
+      applied ? /* @__PURE__ */ jsx(Badge, { tone: "success", children: "\uBC18\uC601 \uC644\uB8CC \u2014 \uBCC0\uACBD \uC804\uC740 \uBC18\uC601 \uC9C1\uC804 \uAC12" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "wp-row wp-caption", style: { alignItems: "center", color: "var(--wp-text-muted)" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 120 }, children: "\uD56D\uBAA9" }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "\uBCC0\uACBD \uC804" }),
+      /* @__PURE__ */ jsx("span", { style: { flex: "none", width: 22 } }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "\uBCC0\uACBD \uD6C4" })
+    ] }),
+    keys.map((key) => {
+      const isList = key in relationLabels || Array.isArray(payload[key]);
+      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]) || "-" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              flex: "none",
+              width: 22,
+              display: "inline-flex",
+              justifyContent: "center",
+              paddingTop: "var(--wp-space-2)",
+              color: "var(--wp-text-muted)"
+            },
+            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]) || "-" })
+      ] }, key);
+    })
+  ] });
+}
+var ProfileEditDiffCard = boxed(
+  ProfileEditDiffCardImpl,
+  "ProfileEditDiffCard"
+);
+
+export { ProfileEditDiffCard };

package/dist/{chunk-OR27SRKL.js → chunk-G7JKDAS5.js}

@@ -1,4 +1,4 @@
-import { TagMultiSelect } from './chunk-QDEZXA34.js';
+import { TagMultiSelect } from './chunk-C7VAWTEP.js';
 import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-S4LOH2TU.js';
 import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-WIDDHR7L.js';

package/dist/meta.d.ts

@@ -437,6 +437,7 @@ declare const OptionValueFieldsMeta: SduiComponentMeta;
 declare const StagePeriodEditorMeta: SduiComponentMeta;
 declare const QRDisplayMeta: SduiComponentMeta;
 declare const PositionSelectMeta: SduiComponentMeta;
+declare const ProfileEditDiffCardMeta: SduiComponentMeta;
 declare const AutocompleteFieldMeta: SduiComponentMeta;
 declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
@@ -473,6 +474,7 @@ declare const widgetComponentMeta: {
     ApprovalLineEditor: SduiComponentMeta;
     ApprovalOverridesEditor: SduiComponentMeta;
     ApprovalStepper: SduiComponentMeta;
+    ProfileEditDiffCard: SduiComponentMeta;
     PositionSelect: SduiComponentMeta;
     QRDisplay: SduiComponentMeta;
     OptionSchemaEditor: SduiComponentMeta;
@@ -616,4 +618,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, ExcelUploadCardMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OptionSchemaEditorMeta, OptionValueFieldsMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PositionSelectMeta, PrintSheetMeta, ProgressBarMeta, QRDisplayMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StagePeriodEditorMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, ExcelUploadCardMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OptionSchemaEditorMeta, OptionValueFieldsMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PositionSelectMeta, PrintSheetMeta, ProfileEditDiffCardMeta, ProgressBarMeta, QRDisplayMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StagePeriodEditorMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -4267,6 +4267,44 @@ var PositionSelectMeta = {
   },
   resize: { kind: "none" }
 };
+var ProfileEditDiffCardMeta = {
+  name: "ProfileEditDiffCard",
+  label: "\uC774\uB825\uCE74\uB4DC \uBCC0\uACBD \uBE44\uAD50",
+  category: "display",
+  icon: "files",
+  description: "\uC774\uB825\uCE74\uB4DC \uC218\uC815 \uC2E0\uCCAD\uC758 \uBCC0\uACBD \uC804/\uD6C4 \uBE44\uAD50 \uCE74\uB4DC(\uD45C\uC2DC \uC804\uC6A9). sourceEndpoint(/employee-profile-edit-requests/{approvalId} \u2014 \uC2E0\uCCAD id \uB610\uB294 \uACB0\uC7AC id)\uB97C \uC2A4\uC2A4\uB85C \uC870\uD68C\uD574 payload\uC640 current\uB97C \uC9DD\uC9C0\uC5B4 \uADF8\uB9B0\uB2E4. \uBAA9\uB85D \uD56D\uBAA9(\uD559\uB825\xB7\uC790\uACA9\uC99D \uB4F1)\uC740 \uC885\uB958 \uB2E8\uC704 \uC804\uCCB4 \uAD50\uCCB4\uB85C \uD45C\uC2DC\uD55C\uB2E4.",
+  props: [
+    { name: "sourceEndpoint", kind: "string", label: "\uC2E0\uCCAD \uC0C1\uC138 \uACBD\uB85C", description: "/employee-profile-edit-requests/{approvalId} \u2014 \uACBD\uB85C\uAC00 \uBC14\uB014 \uB54C\uB9C8\uB2E4 \uC7AC\uC870\uD68C\uD55C\uB2E4(\uC0C1\uD0DC\uB97C \uCFFC\uB9AC\uB85C \uBD99\uC774\uBA74 \uCC98\uB9AC \uC9C1\uD6C4 \uC7AC\uC870\uD68C\uB97C \uC720\uB3C4\uD560 \uC218 \uC788\uB2E4).", group: "data" },
+    {
+      name: "scalarLabels",
+      kind: "object",
+      label: "\uD56D\uBAA9 \uD45C\uC2DC\uBA85",
+      bindable: true,
+      description: "{\uD0A4: \uB77C\uBCA8}. \uC548 \uC8FC\uBA74 \uC11C\uBC84\uAC00 \uC900 \uD0A4\uB97C \uADF8\uB300\uB85C \uBCF4\uC5EC\uC900\uB2E4.",
+      group: "content",
+      advanced: true
+    },
+    {
+      name: "relationLabels",
+      kind: "object",
+      label: "\uBAA9\uB85D \uD56D\uBAA9 \uD45C\uC2DC\uBA85",
+      bindable: true,
+      description: "\uC5EC\uAE30 \uB4F1\uC7A5\uD558\uB294 \uD0A4\uB294 \uC885\uB958 \uB2E8\uC704 \uC804\uCCB4 \uAD50\uCCB4\uB85C \uADF8\uB9B0\uB2E4.",
+      group: "content",
+      advanced: true
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  // 루트 <div class="wp-col"> (비교 행 목록) 또는 안내문 <div>
+  // 마운트 즉시 GET sourceEndpoint 1회 — 캔버스 샌드박스에서는 조용히 실패하고 안내문만 남는다(RoleTagPicker와 같은 결).
+  preset: {
+    component: "ProfileEditDiffCard",
+    // 빈 props 는 저장 왕복에서 사라진다(편집기 계약) — 프리셋은 실제로 채운다.
+    props: { sourceEndpoint: "" }
+  },
+  resize: { kind: "none" }
+};
 var AutocompleteFieldMeta = {
   name: "AutocompleteField",
   label: "\uC790\uB3D9\uC644\uC131",
@@ -4638,7 +4676,25 @@ var TagMultiSelectMeta = {
     },
     { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC120\uD0DD\uB41C \uAC12 \uBC30\uC5F4", group: "behavior" },
     { name: "emptyText", kind: "string", label: "\uC635\uC158 \uC5C6\uC74C \uBB38\uAD6C", default: "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4", group: "content" },
-    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" }
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
+    {
+      name: "sourceEndpoint",
+      kind: "string",
+      label: "\uD604\uC7AC \uAC12 \uC2DC\uB529 \uACBD\uB85C",
+      bindable: true,
+      description: "\uC8FC\uBA74 \uADF8 \uACBD\uB85C\uB97C \uC77D\uC5B4 \uD604\uC7AC \uAC12\uC744 onChange \uB85C \uD55C \uBC88 \uD758\uB9B0\uB2E4. \uACBD\uB85C\uAC00 \uBC14\uB014 \uB54C\uB9C8\uB2E4 \uB2E4\uC2DC \uC2DC\uB529\uD558\uBBC0\uB85C, \uC5EC\uB294 \uCABD\uC774 \uC5EC\uB294 \uD69F\uC218\uB97C \uBD99\uC774\uBA74 \uC7AC\uC5F4\uB9BC\uC5D0\uB3C4 \uCD08\uAE30\uD654\uB41C\uB2E4.",
+      group: "data",
+      advanced: true
+    },
+    {
+      name: "keepUnknownValues",
+      kind: "boolean",
+      label: "\uBAA9\uB85D \uBC16 \uAC12 \uC720\uC9C0",
+      default: true,
+      description: "\uC800\uC7A5\uB3FC \uC788\uB294\uB370 \uC635\uC158\uC5D0 \uC5C6\uB294 \uAC12\uB3C4 \uD0DC\uADF8\uB85C \uB0A8\uAE34\uB2E4 \u2014 \uB044\uBA74 \uC800\uC7A5 \uC2DC \uC870\uC6A9\uD788 \uC0AC\uB77C\uC9C4\uB2E4.",
+      group: "behavior",
+      advanced: true
+    }
   ],
   children: { accepts: false },
   dom: { element: "div" },
@@ -5696,6 +5752,7 @@ var widgetComponentMeta = {
   ApprovalLineEditor: ApprovalLineEditorMeta,
   ApprovalOverridesEditor: ApprovalOverridesEditorMeta,
   ApprovalStepper: ApprovalStepperMeta,
+  ProfileEditDiffCard: ProfileEditDiffCardMeta,
   PositionSelect: PositionSelectMeta,
   QRDisplay: QRDisplayMeta,
   OptionSchemaEditor: OptionSchemaEditorMeta,
@@ -5764,4 +5821,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, ExcelUploadCardMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OptionSchemaEditorMeta, OptionValueFieldsMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PositionSelectMeta, PrintSheetMeta, ProgressBarMeta, QRDisplayMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StagePeriodEditorMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, ExcelUploadCardMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OptionSchemaEditorMeta, OptionValueFieldsMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PositionSelectMeta, PrintSheetMeta, ProfileEditDiffCardMeta, ProgressBarMeta, QRDisplayMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StagePeriodEditorMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/widgets/ApprovalOverridesEditor.js

@@ -1,5 +1,5 @@
-export { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
-import '../chunk-QDEZXA34.js';
+export { ApprovalOverridesEditor } from '../chunk-G7JKDAS5.js';
+import '../chunk-C7VAWTEP.js';
 import '../chunk-S4LOH2TU.js';
 import '../chunk-BD75U73S.js';
 import '../chunk-EFMKWPZ3.js';

package/dist/widgets/ProfileEditDiffCard.d.ts

@@ -0,0 +1,24 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+import React__default from 'react';
+
+interface ProfileEditDiffCardProps {
+    /**
+     * 신청 상세 경로 — `/employee-profile-edit-requests/{approvalId}`.
+     * 경로가 바뀔 때마다 다시 조회한다.
+     */
+    sourceEndpoint?: string;
+    /**
+     * 스칼라 항목의 표시명(`{키: 라벨}`). 안 주면 **키를 그대로 보여준다** —
+     * 어떤 키가 오는지는 서버가 정하므로 라이브러리가 미리 알 수 없다.
+     */
+    scalarLabels?: Record<string, string>;
+    /**
+     * 목록 항목의 표시명. 여기 등장하는 키는 **종류 단위 전체 교체**로 그린다
+     * (`DiffView.lists` 의 before/after 축). 안 주면 값이 배열인 키를 목록으로 본다.
+     */
+    relationLabels?: Record<string, string>;
+}
+/** 바깥 style·className 을 뿌리에 얹는다 — 자기 축(폭·여백) 통로. */
+declare const ProfileEditDiffCard: React__default.FC<ProfileEditDiffCardProps & SduiBoxProps>;
+
+export { ProfileEditDiffCard, type ProfileEditDiffCardProps };

package/dist/widgets/ProfileEditDiffCard.js

@@ -0,0 +1,4 @@
+export { ProfileEditDiffCard } from '../chunk-FS65US2B.js';
+import '../chunk-DKPNFEVU.js';
+import '../chunk-WIDDHR7L.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/TagMultiSelect.d.ts

@@ -28,11 +28,39 @@ interface TagMultiSelectProps {
     disabled?: boolean;
     /** 옵션이 하나도 없을 때 보여줄 안내 문구. */
     emptyText?: string;
+    /**
+     * 현재 값을 읽어 와 `onChange` 로 **한 번** 흘리는 시딩 경로.
+     *
+     * 다이얼로그가 열릴 때 "지금 배정된 것"을 폼 상태로 채우는 자리다 — 선언으로는
+     * 표현할 수 없어(폼의 initial 은 마운트 1회라 늦게 온 값을 못 받는다) 여기서 받는다.
+     * 경로가 **바뀔 때마다** 다시 시딩하므로, 여는 쪽이 경로에 여는 횟수를 붙이면
+     * 재열림에도 초기화된다.
+     *
+     * 응답은 배열이거나 `{data|items|results|rows: 배열}` 봉투다. 원소가 객체면
+     * `valueKey`(기본 'value')로 값을 뽑는다 — 문자열 배열이면 그대로 쓴다.
+     */
+    sourceEndpoint?: string;
+    /**
+     * 옵션 목록에 없는 값도 태그로 남긴다(해제할 수 있게). 기본 켜짐 —
+     * 저장돼 있는데 목록에서 사라진 값이 조용히 지워지면 저장 시 유실된다.
+     */
+    keepUnknownValues?: boolean;
 }
+/** valueKey/labelKey 계약으로 임의 행을 {value,label}로 접는다 — `normalizeSearchOptions`와 같은 규칙. */
+/**
+ * 시딩 응답에서 값 배열을 뽑는다.
+ *
+ * 봉투는 **이름이 아니라 모양으로** 벗긴다 — 배열 값을 가진 키가 정확히 하나면 그것이
+ * 목록이다. 이름 허용목록(`data`·`items`…)을 두면 `{roles:[…]}`·`{members:[…]}` 처럼
+ * 자원 이름을 쓰는 서버가 전부 빈 목록이 되고, 결국 소비 앱이 위젯을 하나 더 만들게
+ * 된다(FileDropzone 의 업로드 봉투와 같은 판단).
+ * 키가 둘 이상이면 벗기지 않는다 — 엉뚱한 배열을 집는 것보다 비는 편이 낫다.
+ */
+declare function pickSeedValues(payload: unknown, valueKey: string): string[];
 /**
  * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
  * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
  */
 declare const TagMultiSelect: React.FC<TagMultiSelectProps & SduiBoxProps>;
 
-export { TagMultiSelect, type TagMultiSelectOption, type TagMultiSelectProps };
+export { TagMultiSelect, type TagMultiSelectOption, type TagMultiSelectProps, pickSeedValues };

package/dist/widgets/TagMultiSelect.js

@@ -1,3 +1,4 @@
-export { TagMultiSelect } from '../chunk-QDEZXA34.js';
+export { TagMultiSelect, pickSeedValues } from '../chunk-C7VAWTEP.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.d.ts

@@ -5,7 +5,7 @@ export { TreePicker } from './TreePicker.js';
 import { TimelineProps } from './Timeline.js';
 export { Timeline, TimelineItem } from './Timeline.js';
 import { TagMultiSelectProps } from './TagMultiSelect.js';
-export { TagMultiSelect, TagMultiSelectOption } from './TagMultiSelect.js';
+export { TagMultiSelect, TagMultiSelectOption, pickSeedValues } from './TagMultiSelect.js';
 import { SummaryTableProps } from './SummaryTable.js';
 export { SummaryTable, SummaryTableColumn } from './SummaryTable.js';
 import { StripProps } from './Strip.js';
@@ -26,6 +26,8 @@ import { RankBoardProps } from './RankBoard.js';
 export { RankBoard } from './RankBoard.js';
 import { QRDisplayProps } from './QRDisplay.js';
 export { QRDisplay } from './QRDisplay.js';
+import { ProfileEditDiffCardProps } from './ProfileEditDiffCard.js';
+export { ProfileEditDiffCard } from './ProfileEditDiffCard.js';
 import { PrintSheetProps } from './PrintSheet.js';
 export { PrintSheet } from './PrintSheet.js';
 import { PositionSelectProps } from './PositionSelect.js';
@@ -96,6 +98,7 @@ declare const widgetComponents: {
     PeriodFilter: React.FC<PeriodFilterProps & SduiBoxProps>;
     PositionSelect: React.FC<PositionSelectProps & SduiBoxProps>;
     PrintSheet: React.FC<PrintSheetProps & SduiBoxProps>;
+    ProfileEditDiffCard: React.FC<ProfileEditDiffCardProps & SduiBoxProps>;
     QRDisplay: React.FC<QRDisplayProps & SduiBoxProps>;
     RankBoard: React.FC<RankBoardProps & SduiBoxProps>;
     RecordSheet: React.FC<RecordSheetProps & SduiBoxProps>;
@@ -114,4 +117,4 @@ declare const widgetComponents: {
 /** 위젯 어휘의 컴포넌트 이름 union — 메타데이터 대조에 쓴다(`@wipco/sdui/meta`). */
 type SduiWidgetComponentName = keyof typeof widgetComponents;
 
-export { ApprovalLineEditorProps, ApprovalOverridesEditorProps, ApprovalStepperProps, ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OptionSchemaEditorProps, OptionValueFieldsProps, OrgChartBoardProps, OrgChartProps, PeriodFilterProps, PermissionMatrixEditorProps, PositionSelectProps, PrintSheetProps, QRDisplayProps, RankBoardProps, RecordSheetProps, RoleMemberPickerProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StagePeriodEditorProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };
+export { ApprovalLineEditorProps, ApprovalOverridesEditorProps, ApprovalStepperProps, ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OptionSchemaEditorProps, OptionValueFieldsProps, OrgChartBoardProps, OrgChartProps, PeriodFilterProps, PermissionMatrixEditorProps, PositionSelectProps, PrintSheetProps, ProfileEditDiffCardProps, QRDisplayProps, RankBoardProps, RecordSheetProps, RoleMemberPickerProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StagePeriodEditorProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };

package/dist/widgets/index.js

@@ -1,3 +1,5 @@
+import { SecureScreen } from '../chunk-IIRENCDS.js';
+export { SecureScreen } from '../chunk-IIRENCDS.js';
 import { StackedMeter } from '../chunk-BMZKZGJF.js';
 export { StackedMeter } from '../chunk-BMZKZGJF.js';
 import { StagePeriodEditor } from '../chunk-KVFHPBAY.js';
@@ -18,6 +20,8 @@ import { PrintSheet } from '../chunk-MYJ2KEIP.js';
 export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import { QRDisplay } from '../chunk-PCMJE2GO.js';
 export { QRDisplay } from '../chunk-PCMJE2GO.js';
+import { ProfileEditDiffCard } from '../chunk-FS65US2B.js';
+export { ProfileEditDiffCard } from '../chunk-FS65US2B.js';
 import { RankBoard } from '../chunk-U6H7YN4I.js';
 export { RankBoard } from '../chunk-U6H7YN4I.js';
 import { RecordSheet } from '../chunk-K3JBSWFI.js';
@@ -26,8 +30,6 @@ import { RoleMemberPicker } from '../chunk-WXZDYDXG.js';
 export { RoleMemberPicker } from '../chunk-WXZDYDXG.js';
 import { SearchableMultiPicker } from '../chunk-C53NGSA3.js';
 export { SearchableMultiPicker } from '../chunk-C53NGSA3.js';
-import { SecureScreen } from '../chunk-IIRENCDS.js';
-export { SecureScreen } from '../chunk-IIRENCDS.js';
 import { JsonField } from '../chunk-JVBZRDC2.js';
 export { JsonField } from '../chunk-JVBZRDC2.js';
 import { LiveClock } from '../chunk-Z3WGIFJP.js';
@@ -62,10 +64,10 @@ import '../chunk-QU7YVMFA.js';
 import '../chunk-QO6UJAQN.js';
 import '../chunk-THEP3VWY.js';
 import '../chunk-SNRKPEWT.js';
-import { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
-export { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
-import { TagMultiSelect } from '../chunk-QDEZXA34.js';
-export { TagMultiSelect } from '../chunk-QDEZXA34.js';
+import { ApprovalOverridesEditor } from '../chunk-G7JKDAS5.js';
+export { ApprovalOverridesEditor } from '../chunk-G7JKDAS5.js';
+import { TagMultiSelect } from '../chunk-C7VAWTEP.js';
+export { TagMultiSelect, pickSeedValues } from '../chunk-C7VAWTEP.js';
 import { ApprovalLineEditor } from '../chunk-S4LOH2TU.js';
 export { ApprovalLineEditor } from '../chunk-S4LOH2TU.js';
 import '../chunk-BD75U73S.js';
@@ -98,6 +100,7 @@ var widgetComponents = {
   PeriodFilter,
   PositionSelect,
   PrintSheet,
+  ProfileEditDiffCard,
   QRDisplay,
   RankBoard,
   RecordSheet,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -128,6 +128,10 @@
       "types": "./dist/widgets/QRDisplay.d.ts",
       "default": "./dist/widgets/QRDisplay.js"
     },
+    "./widgets/ProfileEditDiffCard": {
+      "types": "./dist/widgets/ProfileEditDiffCard.d.ts",
+      "default": "./dist/widgets/ProfileEditDiffCard.js"
+    },
     "./widgets/RankBoard": {
       "types": "./dist/widgets/RankBoard.d.ts",
       "default": "./dist/widgets/RankBoard.js"