@wipco/sdui 1.3.0 → 1.4.1

package/dist/{chunk-HBBTENSV.js → chunk-44TDRCKR.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-WSLT32Q4.js';
+import { DateRangePicker } from './chunk-RWSH2MBU.js';
 import { SegmentedControl, Select } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useMemo } from 'react';

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

@@ -1,4 +1,4 @@
-import { Text } from './chunk-37SFFW37.js';
+import { Text } from './chunk-WPSK2CB5.js';
 import { Switch, Field, Select, Input } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';
 import React, { useMemo } from 'react';

package/dist/{chunk-B6WMC2AN.js → chunk-CXW6KT6X.js}

@@ -1,4 +1,4 @@
-import { Text } from './chunk-37SFFW37.js';
+import { Text } from './chunk-WPSK2CB5.js';
 import { Field, Input, Select, IconButton, Button } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';
 import { useMemo } from 'react';

package/dist/{chunk-GE6BYNQJ.js → chunk-DKVSM5HX.js}

@@ -1,5 +1,5 @@
 import { TagMultiSelect } from './chunk-I5SD7XRA.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-FLAN7CV3.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-MPT7WJG2.js';
 import { orderCircleStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
 import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
 import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-RNOUXUBO.js';

package/dist/{chunk-N25YP7ID.js → chunk-FNMS7OB7.js}

@@ -1,5 +1,5 @@
 import { ellipsisStyle, unwrapRows } from './chunk-Q4SWUINA.js';
-import { includesLooseSearch } from './chunk-WOYMEEPH.js';
+import { includesLooseSearch } from './chunk-UV6HHFEW.js';
 import { useSduiAdapter, hostFetchOf } from './chunk-KO6OEY3G.js';
 import { Icon, Button, Input, Spinner } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';

package/dist/chunk-GNA6SX2H.js

@@ -0,0 +1,253 @@
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { Tag } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TAG_INPUT_CSS = `
+.wp-taginput{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:32px;width:100%;padding:3px 8px;font-size:13px;color:var(--wp-text-default);background:var(--wp-surface-card);border:1px solid var(--wp-border-default);border-radius:var(--wp-radius-md);cursor:text;transition:border-color .12s,box-shadow .12s;box-sizing:border-box}
+.wp-taginput:focus-within{border-color:var(--wp-border-focus);box-shadow:0 0 0 3px rgba(10,115,201,.15)}
+.wp-taginput--disabled{background:var(--wp-surface-disabled);color:var(--wp-text-disabled);cursor:not-allowed}
+.wp-taginput__input{flex:1 1 80px;min-width:80px;height:24px;border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:0 2px}
+.wp-taginput__input::placeholder{color:var(--wp-text-subtle)}
+.wp-taginput__input:disabled{cursor:not-allowed}
+.wp-taginput__menu{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;max-height:220px;overflow:auto;background:var(--wp-surface-card);border:1px solid var(--wp-border-default);border-radius:var(--wp-radius-md);box-shadow:var(--wp-shadow-md,0 6px 20px rgba(0,0,0,.12))}
+.wp-taginput__option{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-space-2);padding:5px 8px;border-radius:var(--wp-radius-sm);font-size:13px;cursor:pointer}
+.wp-taginput__option:hover,.wp-taginput__option--active{background:var(--wp-surface-hover,var(--wp-slate-100))}
+.wp-taginput__count{font-size:11.5px;color:var(--wp-text-subtle);font-family:var(--wp-font-mono)}
+`;
+function normalizeKeyword(raw, maxLength = 50) {
+  if (raw === null || raw === void 0) return null;
+  const text = String(raw).replace(/^[\s#]+/, "").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > maxLength ? text.slice(0, maxLength) : text;
+}
+function normalizeKeywords(list, options = {}) {
+  const source = Array.isArray(list) ? list : [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const raw of source) {
+    const word = normalizeKeyword(raw, options.maxLength);
+    if (!word) continue;
+    const key = word.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(word);
+    if (options.maxItems !== void 0 && out.length >= options.maxItems) break;
+  }
+  return out;
+}
+function splitKeywordText(text) {
+  return text.split(/[,\n\t]|\s+(?=#)/).map((part) => part.trim()).filter((part) => part.length > 0);
+}
+function foldSuggestions(raw, key = "keyword") {
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const item of raw) {
+    if (typeof item === "string" || typeof item === "number") {
+      const word2 = normalizeKeyword(item);
+      if (word2) out.push({ keyword: word2 });
+      continue;
+    }
+    if (item === null || typeof item !== "object") continue;
+    const row = item;
+    const word = normalizeKeyword(row[key] ?? row.value ?? row.label);
+    if (!word) continue;
+    const count = typeof row.count === "number" ? row.count : void 0;
+    out.push(count === void 0 ? { keyword: word } : { keyword: word, count });
+  }
+  return out;
+}
+function TagInputImpl({
+  value,
+  onChange,
+  placeholder = "\uD0A4\uC6CC\uB4DC \uC785\uB825 \uD6C4 Enter",
+  disabled = false,
+  suggestions,
+  suggestionKey = "keyword",
+  maxItems,
+  maxLength = 50,
+  hash = true,
+  maxSuggestions = 8
+}) {
+  const isControlled = value !== void 0 && typeof onChange === "function";
+  const [internal, setInternal] = useState(() => normalizeKeywords(value));
+  const current = useMemo(
+    () => normalizeKeywords(isControlled ? value : internal, { maxLength }),
+    [isControlled, value, internal, maxLength]
+  );
+  const [draft, setDraft] = useState("");
+  const [focused, setFocused] = useState(false);
+  const [active, setActive] = useState(-1);
+  const inputRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const commit = (next) => {
+    const normalized = normalizeKeywords(next, { maxItems, maxLength });
+    setInternal(normalized);
+    onChangeRef.current?.(normalized);
+  };
+  const folded = useMemo(() => foldSuggestions(suggestions, suggestionKey), [suggestions, suggestionKey]);
+  const visible = useMemo(() => {
+    if (folded.length === 0) return [];
+    const taken = new Set(current.map((word) => word.toLowerCase()));
+    const needle = normalizeKeyword(draft)?.toLowerCase() ?? "";
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const item of folded) {
+      const key = item.keyword.toLowerCase();
+      if (taken.has(key) || seen.has(key)) continue;
+      if (needle && !key.includes(needle)) continue;
+      seen.add(key);
+      out.push(item);
+      if (out.length >= maxSuggestions) break;
+    }
+    return out;
+  }, [folded, current, draft, maxSuggestions]);
+  useEffect(() => {
+    if (active >= visible.length) setActive(visible.length - 1);
+  }, [visible.length, active]);
+  const full = maxItems !== void 0 && current.length >= maxItems;
+  const menuOpen = focused && !disabled && !full && visible.length > 0;
+  const addWords = (words) => {
+    if (disabled) return;
+    const cleaned = words.map((word) => normalizeKeyword(word, maxLength)).filter((w) => !!w);
+    if (cleaned.length === 0) return;
+    commit([...current, ...cleaned]);
+    setDraft("");
+    setActive(-1);
+  };
+  const removeAt = (index) => {
+    if (disabled) return;
+    commit(current.filter((_, i) => i !== index));
+    inputRef.current?.focus();
+  };
+  const commitDraft = () => {
+    const words = splitKeywordText(draft);
+    if (words.length > 0) addWords(words);
+    else if (draft) setDraft("");
+  };
+  const onKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Enter": {
+        event.preventDefault();
+        if (menuOpen && active >= 0 && active < visible.length) {
+          addWords([visible[active].keyword]);
+        } else {
+          commitDraft();
+        }
+        return;
+      }
+      case ",": {
+        event.preventDefault();
+        commitDraft();
+        return;
+      }
+      case "Tab": {
+        if (draft.trim()) {
+          event.preventDefault();
+          commitDraft();
+        }
+        return;
+      }
+      case "Backspace": {
+        if (draft === "" && current.length > 0) {
+          event.preventDefault();
+          removeAt(current.length - 1);
+        }
+        return;
+      }
+      case "ArrowDown": {
+        if (!menuOpen) return;
+        event.preventDefault();
+        setActive((index) => (index + 1) % visible.length);
+        return;
+      }
+      case "ArrowUp": {
+        if (!menuOpen) return;
+        event.preventDefault();
+        setActive((index) => index <= 0 ? visible.length - 1 : index - 1);
+        return;
+      }
+      case "Escape": {
+        if (menuOpen || draft) {
+          event.preventDefault();
+          event.stopPropagation();
+          setActive(-1);
+          setDraft("");
+        }
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const onPaste = (event) => {
+    const text = event.clipboardData.getData("text");
+    if (!/[,\n\t#]/.test(text)) return;
+    event.preventDefault();
+    addWords(splitKeywordText(`${draft}${text}`));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["wp-taginput", disabled && "wp-taginput--disabled"].filter(Boolean).join(" "),
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) {
+          event.preventDefault();
+          inputRef.current?.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-taginput", css: TAG_INPUT_CSS }),
+        current.map((word, index) => /* @__PURE__ */ jsx(Tag, { onRemove: disabled ? void 0 : () => removeAt(index), children: hash ? `#${word}` : word }, `${word}-${index}`)),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "wp-taginput__input",
+            type: "text",
+            role: "combobox",
+            "aria-expanded": menuOpen,
+            "aria-autocomplete": "list",
+            value: draft,
+            disabled: disabled || full,
+            placeholder: current.length === 0 ? placeholder : full ? "" : void 0,
+            onChange: (event) => {
+              setDraft(event.target.value);
+              setActive(-1);
+            },
+            onKeyDown,
+            onPaste,
+            onFocus: () => setFocused(true),
+            onBlur: () => {
+              setFocused(false);
+              commitDraft();
+            }
+          }
+        ),
+        menuOpen ? /* @__PURE__ */ jsx("ul", { className: "wp-taginput__menu", role: "listbox", children: visible.map((item, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            role: "option",
+            "aria-selected": index === active,
+            className: ["wp-taginput__option", index === active && "wp-taginput__option--active"].filter(Boolean).join(" "),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              addWords([item.keyword]);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: hash ? `#${item.keyword}` : item.keyword }),
+              item.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "wp-taginput__count", children: item.count }) : null
+            ]
+          },
+          item.keyword
+        )) }) : null
+      ]
+    }
+  );
+}
+var TagInput = boxed(TagInputImpl, "TagInput");
+
+export { TagInput, foldSuggestions, normalizeKeyword, normalizeKeywords, splitKeywordText };

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

@@ -1,4 +1,4 @@
-import { buildCascadingTree } from './chunk-WOYMEEPH.js';
+import { buildCascadingTree } from './chunk-UV6HHFEW.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';

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

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-WOYMEEPH.js';
+import { includesLooseSearch } from './chunk-UV6HHFEW.js';
 import { OverlayLayer } from './chunk-XQPTSEJC.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';

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

@@ -1,5 +1,5 @@
 import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
-import { includesLooseSearch } from './chunk-WOYMEEPH.js';
+import { includesLooseSearch } from './chunk-UV6HHFEW.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';

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

@@ -1,4 +1,4 @@
-import { DatePicker, TimePicker } from './chunk-WSLT32Q4.js';
+import { DatePicker, TimePicker } from './chunk-RWSH2MBU.js';
 import { Field } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';
 import { useState, useRef, useEffect, useMemo } from 'react';

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

@@ -1,4 +1,4 @@
-import { resolveTreeNodes, TreeView } from './chunk-C37U3GCC.js';
+import { resolveTreeNodes, TreeView } from './chunk-GZBY7I4Y.js';
 import { OverlayLayer } from './chunk-XQPTSEJC.js';
 import { Field, Dialog, Icon, Button, Input } from './chunk-RNOUXUBO.js';
 import { boxed } from './chunk-5WW4MBRO.js';

package/dist/chunk-RIZRM7OO.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/hoisted-style.tsx
+function HoistedStyle({ id, css }) {
+  return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
+}
+
+export { HoistedStyle };

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

@@ -1,13 +1,11 @@
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
 import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-XQPTSEJC.js';
 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';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function HoistedStyle({ id, css }) {
-  return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
-}
 var ANCHOR_GAP = 8;
 var VIEWPORT_EDGE = 8;
 function anchorTo(host, height) {
@@ -993,4 +991,4 @@ var DP_CSS = `
 var DatePicker = boxed(DatePickerImpl, "DatePicker");
 var DateRangePicker = boxed(DateRangePickerImpl, "DateRangePicker");
 
-export { DatePicker, DateRangePicker, HoistedStyle, TimePicker, YMD_RE, parseYmd };
+export { DatePicker, DateRangePicker, TimePicker, YMD_RE, parseYmd };

package/dist/{chunk-WOYMEEPH.js → chunk-UV6HHFEW.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-WSLT32Q4.js';
+import { DateRangePicker } from './chunk-RWSH2MBU.js';
 import { useOverlayLayer } from './chunk-XQPTSEJC.js';
 import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-RNOUXUBO.js';
 import { useRef, useEffect, useState, useMemo } from 'react';

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

@@ -138,7 +138,17 @@ function Text({
 function KeyValueList({ source, items, className, style }) {
   return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
     const raw = item.key ? source?.[item.key] : item.value;
-    const content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+    const scalarList = Array.isArray(raw) && raw.every((entry) => typeof entry === "string" || typeof entry === "number");
+    let content;
+    if (scalarList) {
+      const words = raw.map(String).filter((word) => word !== "");
+      content = words.length === 0 ? "\u2014" : /* @__PURE__ */ jsx("span", { className: "wp-kv__tags", children: words.map((word, wordIndex) => /* @__PURE__ */ jsxs("span", { className: "wp-tag", children: [
+        item.prefix ?? "",
+        word
+      ] }, `${word}-${wordIndex}`)) });
+    } else {
+      content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+    }
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
       /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })

package/dist/index.d.ts

@@ -1004,6 +1004,11 @@ interface SduiTagCell {
     type: 'tag';
     colorMap?: Record<string, string>;
     filled?: boolean;
+    /**
+     * 각 태그 앞에 붙일 글자(예: `#`). 값이 **배열**이면 원소마다 태그 하나씩 그린다 —
+     * 키워드 열(text[])이 그 자리다. 톤 조회 키는 접두어 없는 원래 값이다.
+     */
+    prefix?: string;
 }
 /**
  * 값을 링크로. `to`는 `/assets/{id}` 처럼 행의 필드를 `{키}`로 끼워 넣는 경로 템플릿이고,
@@ -1433,6 +1438,12 @@ interface KeyValueItem {
     key?: string;
     value?: React__default.ReactNode;
     mono?: boolean;
+    /**
+     * 값이 **문자열·숫자 배열**이면 태그(.wp-tag)로 그린다 — 키워드(text[]) 열이 그 자리다.
+     * 그때 각 태그 앞에 붙일 글자(예: `#`). 배열이 비면 다른 빈 값처럼 `—`.
+     * 배열을 그냥 노드로 흘리면 React 가 원소를 구분자 없이 이어 붙여 "ab" 처럼 보인다.
+     */
+    prefix?: string;
 }
 interface KeyValueListProps {
     /** 값의 원천 객체 — 보통 상태 바인딩({ "$state": "selectedOrder" })을 넣는다 */

package/dist/index.js

@@ -1,14 +1,15 @@
 export { loadOptionalModule } from './chunk-YVTV4ZV6.js';
 import { useSduiDispatch, SduiDialog, useSduiCan, SduiDispatchContext, SduiPermissionProvider } from './chunk-TFGNKFL2.js';
 export { SduiDialog, SduiPermissionProvider, useSduiCan, useSduiDispatch } from './chunk-TFGNKFL2.js';
-import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider, Col, Actions } from './chunk-37SFFW37.js';
-export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-37SFFW37.js';
+import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider, Col, Actions } from './chunk-WPSK2CB5.js';
+export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-WPSK2CB5.js';
 import { ImageViewer } from './chunk-SAPBDJJQ.js';
 export { ImageViewer } from './chunk-SAPBDJJQ.js';
-import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-WOYMEEPH.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-WOYMEEPH.js';
-import { HoistedStyle, parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-WSLT32Q4.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-WSLT32Q4.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-UV6HHFEW.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-UV6HHFEW.js';
+import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-RWSH2MBU.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
 export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
 import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-KO6OEY3G.js';
 export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-KO6OEY3G.js';
@@ -273,9 +274,20 @@ function cellRenderer(cell, key, dispatch) {
       };
     case "tag":
       return (row) => {
-        const value = String(fieldOf(row, key) ?? "");
-        if (!value) return null;
-        return /* @__PURE__ */ jsx(Tag, { color: cell.colorMap?.[value], filled: cell.filled, children: value });
+        const raw = fieldOf(row, key);
+        const values = (Array.isArray(raw) ? raw : [raw]).filter((item) => item !== null && item !== void 0 && item !== "").map(String);
+        if (values.length === 0) return null;
+        const prefix = cell.prefix ?? "";
+        if (values.length === 1 && !Array.isArray(raw)) {
+          return /* @__PURE__ */ jsxs(Tag, { color: cell.colorMap?.[values[0]], filled: cell.filled, children: [
+            prefix,
+            values[0]
+          ] });
+        }
+        return /* @__PURE__ */ jsx("span", { className: "wp-cell-tags", children: values.map((value, index) => /* @__PURE__ */ jsxs(Tag, { color: cell.colorMap?.[value], filled: cell.filled, children: [
+          prefix,
+          value
+        ] }, `${value}-${index}`)) });
       };
     case "link":
       return (row) => {
@@ -584,6 +596,10 @@ function resolveViewItems(views, disableGrid, disableList) {
   }
   return items.length > 0 ? items : [DEFAULT_VIEWS[0]];
 }
+function localSearchText(row) {
+  const scalar = (v) => typeof v === "string" || typeof v === "number";
+  return Object.values(row ?? {}).flatMap((v) => Array.isArray(v) ? v.filter(scalar) : scalar(v) ? [v] : []).join(" ");
+}
 function SearchResults({
   item,
   columns,
@@ -660,12 +676,7 @@ function SearchResults({
     let rows = item.data;
     if (hasAllRows) {
       if (appliedSearch) {
-        rows = rows.filter(
-          (row) => includesLooseSearch(
-            Object.values(row).filter((v) => typeof v === "string" || typeof v === "number").join(" "),
-            appliedSearch
-          )
-        );
+        rows = rows.filter((row) => includesLooseSearch(localSearchText(row), appliedSearch));
       }
       for (const { key, values } of activeFilters) {
         rows = rows.filter((row) => values.includes(String(cell(row, key))));

package/dist/meta.d.ts

@@ -399,7 +399,7 @@ declare const richComponentMeta: {
 };
 
 /**
- * `@wipco/sdui/widgets` 어휘 37종의 빌더 메타데이터.
+ * `@wipco/sdui/widgets` 어휘 38종의 빌더 메타데이터.
  *
  * core와 파일을 나눈 이유는 `rich.ts`와 같다 — 위젯을 얹지 않은 소비자가 이 데이터를
  * 받지 않게 하려는 것이다. 여기도 값 import는 없다(`import type`만).
@@ -443,6 +443,7 @@ declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
 declare const PeriodFilterMeta: SduiComponentMeta;
 declare const SearchableMultiPickerMeta: SduiComponentMeta;
+declare const TagInputMeta: SduiComponentMeta;
 declare const TagMultiSelectMeta: SduiComponentMeta;
 declare const TreePickerMeta: SduiComponentMeta;
 declare const DisclosureMeta: SduiComponentMeta;
@@ -505,6 +506,7 @@ declare const widgetComponentMeta: {
     StackedMeter: SduiComponentMeta;
     Strip: SduiComponentMeta;
     SummaryTable: SduiComponentMeta;
+    TagInput: SduiComponentMeta;
     TagMultiSelect: SduiComponentMeta;
     Timeline: SduiComponentMeta;
     TreePicker: SduiComponentMeta;
@@ -633,4 +635,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, 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, metaSlotNames, 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, TagInputMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, metaSlotNames, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -1654,7 +1654,13 @@ var KeyValueListMeta = {
         { name: "label", kind: "node", label: "\uB77C\uBCA8", required: true },
         { name: "key", kind: "string", label: "source\uC758 \uD544\uB4DC", description: "\uC0DD\uB7B5\uD558\uBA74 value\uB97C \uADF8\uB300\uB85C \uC4F4\uB2E4." },
         { name: "value", kind: "node", label: "\uAC12", bindable: true },
-        { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" }
+        { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" },
+        {
+          name: "prefix",
+          kind: "string",
+          label: "\uD0DC\uADF8 \uC811\uB450\uC5B4",
+          description: "\uAC12\uC774 \uBB38\uC790\uC5F4 \uBC30\uC5F4\uC774\uBA74 \uD0DC\uADF8\uB85C \uADF8\uB9B0\uB2E4 \u2014 \uADF8\uB54C \uAC01 \uC55E\uC5D0 \uBD99\uC77C \uAE00\uC790(\uC608: #). \uBE48 \uBC30\uC5F4\uC740 \u2014."
+        }
       ]
     },
     styleProp,
@@ -1995,6 +2001,12 @@ var searchCellFields = [
       { value: "image", label: "\uC0AC\uC9C4" }
     ]
   },
+  {
+    name: "prefix",
+    kind: "string",
+    label: "\uD0DC\uADF8 \uC811\uB450\uC5B4",
+    description: "type=tag \u2014 \uAC01 \uD0DC\uADF8 \uC55E\uC5D0 \uBD99\uC77C \uAE00\uC790(\uC608: #). \uAC12\uC774 \uBC30\uC5F4\uC774\uBA74 \uC6D0\uC18C\uB9C8\uB2E4 \uD0DC\uADF8 \uD558\uB098\uC529 \uADF8\uB9B0\uB2E4(\uD0A4\uC6CC\uB4DC \uC5F4)."
+  },
   { name: "width", kind: "number", label: "\uC0AC\uC9C4 \uAC00\uB85C(px)", description: "type=image (\uAE30\uBCF8 72)" },
   { name: "height", kind: "number", label: "\uC0AC\uC9C4 \uC138\uB85C(px)", description: "type=image (\uAE30\uBCF8 52)" },
   {
@@ -4813,6 +4825,78 @@ var SearchableMultiPickerMeta = {
   },
   resize: { kind: "none" }
 };
+var TagInputMeta = {
+  name: "TagInput",
+  label: "\uD0A4\uC6CC\uB4DC \uC785\uB825",
+  category: "input",
+  icon: "tag",
+  description: "\uB0B1\uB9D0\uC744 \uC9C1\uC811 \uC801\uC5B4 \uCE69(#\uD0A4\uC6CC\uB4DC)\uC73C\uB85C \uC313\uB294 \uC790\uC720 \uC785\uB825. Enter\xB7\uC27C\uD45C\uAC00 \uD655\uC815\uD558\uACE0, \uCD94\uCC9C \uBAA9\uB85D\uC744 \uC8FC\uBA74 \uC774\uBBF8 \uC4F0\uB294 \uD0A4\uC6CC\uB4DC\uB85C \uD45C\uAE30\uAC00 \uBAA8\uC778\uB2E4.",
+  props: [
+    {
+      name: "value",
+      kind: "array",
+      label: "\uD0A4\uC6CC\uB4DC",
+      required: true,
+      bindable: true,
+      description: '\uBB38\uC790\uC5F4 \uBC30\uC5F4. \uBCF4\uD1B5 { "$state": "form.keywords" }\uB97C \uAC74\uB2E4. \uAC12\uC5D0\uB294 # \uC744 \uB123\uC9C0 \uC54A\uB294\uB2E4(\uC55E\uC758 # \uC740 \uBC97\uAE34\uB2E4).',
+      group: "data",
+      item: [],
+      itemKind: "string"
+    },
+    { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uD0A4\uC6CC\uB4DC \uBB38\uC790\uC5F4 \uBC30\uC5F4", group: "behavior" },
+    { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", default: "\uD0A4\uC6CC\uB4DC \uC785\uB825 \uD6C4 Enter", group: "content" },
+    {
+      name: "suggestions",
+      kind: "array",
+      label: "\uCD94\uCC9C \uD0A4\uC6CC\uB4DC",
+      bindable: true,
+      description: "\uC785\uB825 \uC911\uC5D0 \uC544\uB798\uB85C \uD3BC\uCE60 \uD6C4\uBCF4. \uBB38\uC790\uC5F4 \uBC30\uC5F4\uC774\uAC70\uB098 {keyword, count} \uAC1D\uCCB4 \uBC30\uC5F4(page.data \uB85C /finance/keywords \uAC19\uC740 \uC9D1\uACC4\uB97C \uBB3C\uB9B0\uB2E4). \uC774\uBBF8 \uB2E8 \uAC83\uC740 \uBE7C\uACE0 \uBCF4\uC5EC \uC900\uB2E4.",
+      group: "data",
+      item: [],
+      itemKind: "string"
+    },
+    {
+      name: "suggestionKey",
+      kind: "string",
+      label: "\uCD94\uCC9C \uB0B1\uB9D0 \uD0A4",
+      default: "keyword",
+      description: "\uCD94\uCC9C\uC774 \uAC1D\uCCB4 \uBC30\uC5F4\uC77C \uB54C \uB0B1\uB9D0\uC744 \uC77D\uC744 \uD0A4. \uC5C6\uC73C\uBA74 value \u2192 label \uC21C\uC73C\uB85C \uBCF8\uB2E4.",
+      group: "data",
+      advanced: true
+    },
+    { name: "maxItems", kind: "number", label: "\uCD5C\uB300 \uAC1C\uC218", description: "\uB118\uC73C\uBA74 \uB354 \uBC1B\uC9C0 \uC54A\uB294\uB2E4.", group: "behavior" },
+    {
+      name: "maxLength",
+      kind: "number",
+      label: "\uB0B1\uB9D0 \uCD5C\uB300 \uAE00\uC790",
+      default: 50,
+      description: "\uB118\uB294 \uAE00\uC790\uB294 \uC798\uB77C \uB2F4\uB294\uB2E4.",
+      group: "behavior",
+      advanced: true
+    },
+    { name: "hash", kind: "boolean", label: "# \uD45C\uAE30", default: true, description: "\uCE69 \uC55E\uC5D0 # \uC744 \uADF8\uB9B0\uB2E4. \uAC12 \uC790\uCCB4\uC5D0\uB294 \uB123\uC9C0 \uC54A\uB294\uB2E4.", group: "content" },
+    {
+      name: "maxSuggestions",
+      kind: "number",
+      label: "\uCD94\uCC9C \uCD5C\uB300 \uC904 \uC218",
+      default: 8,
+      group: "behavior",
+      advanced: true
+    },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  preset: {
+    component: "TagInput",
+    props: {
+      value: { $state: "keywords", default: [] },
+      onChange: { action: "setState", key: "keywords", fromEvent: true },
+      placeholder: "\uD0A4\uC6CC\uB4DC \uC785\uB825 \uD6C4 Enter"
+    }
+  },
+  resize: { kind: "none" }
+};
 var TagMultiSelectMeta = {
   name: "TagMultiSelect",
   label: "\uD0DC\uADF8 \uB2E4\uC911 \uC120\uD0DD",
@@ -5968,6 +6052,7 @@ var widgetComponentMeta = {
   StackedMeter: StackedMeterMeta,
   Strip: StripMeta,
   SummaryTable: SummaryTableMeta,
+  TagInput: TagInputMeta,
   TagMultiSelect: TagMultiSelectMeta,
   Timeline: TimelineMeta,
   TreePicker: TreePickerMeta,
@@ -6018,4 +6103,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, 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, metaSlotNames, 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, TagInputMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, metaSlotNames, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/rich.js

@@ -1,6 +1,6 @@
 import { useOptionalModule, DependencyPlaceholder } from './chunk-YVTV4ZV6.js';
-import { HoistedStyle } from './chunk-WSLT32Q4.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-WSLT32Q4.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
 import './chunk-XQPTSEJC.js';
 import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
 import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';

package/dist/styles.css

@@ -361,6 +361,7 @@
 .wp-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 7px var(--wp-space-4); align-items: baseline; }
 .wp-kv__k { font-size: 12px; font-weight: 600; color: var(--wp-text-muted); }
 .wp-kv__v { font-size: 13px; color: var(--wp-text-default); min-width: 0; overflow-wrap: anywhere; }
+.wp-kv__tags, .wp-cell-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
 
 /* ---------- 버튼 ---------- */
 .wp-btn {

package/dist/widgets/ApprovalLineEditor.js

@@ -1,7 +1,8 @@
-export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-FLAN7CV3.js';
+export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-MPT7WJG2.js';
 import '../chunk-Q4SWUINA.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-KO6OEY3G.js';
 import '../chunk-RNOUXUBO.js';

package/dist/widgets/ApprovalOverridesEditor.js

@@ -1,9 +1,10 @@
-export { ApprovalOverridesEditor, facetsFrom } from '../chunk-GE6BYNQJ.js';
+export { ApprovalOverridesEditor, facetsFrom } from '../chunk-DKVSM5HX.js';
 import '../chunk-I5SD7XRA.js';
-import '../chunk-FLAN7CV3.js';
+import '../chunk-MPT7WJG2.js';
 import '../chunk-Q4SWUINA.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-KO6OEY3G.js';
 import '../chunk-RNOUXUBO.js';

package/dist/widgets/AutocompleteField.js

@@ -1,7 +1,8 @@
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-N25YP7ID.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-FNMS7OB7.js';
 import '../chunk-Q4SWUINA.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-KO6OEY3G.js';
 import '../chunk-RNOUXUBO.js';

package/dist/widgets/OptionSchemaEditor.js

@@ -1,4 +1,4 @@
-export { OPTION_TYPES, OptionSchemaEditor } from '../chunk-B6WMC2AN.js';
-import '../chunk-37SFFW37.js';
+export { OPTION_TYPES, OptionSchemaEditor } from '../chunk-CXW6KT6X.js';
+import '../chunk-WPSK2CB5.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/OptionValueFields.js

@@ -1,4 +1,4 @@
-export { OptionValueFields } from '../chunk-7FZTUI6U.js';
-import '../chunk-37SFFW37.js';
+export { OptionValueFields } from '../chunk-BEM2YS7U.js';
+import '../chunk-WPSK2CB5.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/PeriodFilter.js

@@ -1,5 +1,6 @@
-export { PeriodFilter } from '../chunk-HBBTENSV.js';
-import '../chunk-WSLT32Q4.js';
+export { PeriodFilter } from '../chunk-44TDRCKR.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,6 +1,7 @@
-export { SearchableMultiPicker } from '../chunk-AC5TI3BE.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+export { SearchableMultiPicker } from '../chunk-HBIIEYKW.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/StagePeriodEditor.js

@@ -1,5 +1,6 @@
-export { StagePeriodEditor } from '../chunk-5XPZ3RSA.js';
-import '../chunk-WSLT32Q4.js';
+export { StagePeriodEditor } from '../chunk-NIJUVTEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/TagInput.d.ts

@@ -0,0 +1,49 @@
+import { S as SduiBoxProps } from '../layout-C3nRXMwb.js';
+import React__default from 'react';
+
+interface TagInputProps {
+    /** 현재 키워드 목록. 보통 `{ "$state": "form.keywords" }` 를 건다. */
+    value: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /**
+     * 추천 키워드. 문자열 배열이거나 객체 배열 — 객체는 `suggestionKey`(기본 'keyword',
+     * 없으면 value → label 순)로 낱말을 읽고 `count` 가 있으면 옆에 건수를 적는다.
+     */
+    suggestions?: Array<string | number | Record<string, unknown>>;
+    /** 추천 객체에서 낱말을 읽을 키. 기본 'keyword'. */
+    suggestionKey?: string;
+    /** 최대 개수. 넘으면 더 받지 않는다. */
+    maxItems?: number;
+    /** 낱말 하나의 최대 글자 수(기본 50). 넘는 글자는 잘라 담는다. */
+    maxLength?: number;
+    /** 칩 앞에 `#` 을 그린다(기본 켜짐). 값 자체에는 넣지 않는다. */
+    hash?: boolean;
+    /** 포커스 없이도 보이는 추천 최대 줄 수(기본 8). */
+    maxSuggestions?: number;
+}
+interface TagInputSuggestion {
+    keyword: string;
+    count?: number;
+}
+/** 낱말 하나를 다듬는다 — 앞 `#` 제거·공백 정리·길이 제한. 비면 null. */
+declare function normalizeKeyword(raw: unknown, maxLength?: number): string | null;
+/**
+ * 목록을 다듬고 대소문자 무시 중복을 접는다(먼저 온 표기가 남는다).
+ * `maxItems` 가 있으면 그 개수에서 자른다.
+ */
+declare function normalizeKeywords(list: unknown, options?: {
+    maxItems?: number;
+    maxLength?: number;
+}): string[];
+/**
+ * 입력·붙여넣기 문자열을 낱말 목록으로 가른다 — 쉼표·줄바꿈·탭, 그리고 `#` 앞의 공백.
+ * 낱말 안의 공백은 살린다("공공 입찰" 은 하나다). `#a #b` 는 둘이다.
+ */
+declare function splitKeywordText(text: string): string[];
+/** 추천 원소를 `{keyword, count}` 로 접는다. */
+declare function foldSuggestions(raw: unknown, key?: string): TagInputSuggestion[];
+declare const TagInput: React__default.FC<TagInputProps & SduiBoxProps>;
+
+export { TagInput, type TagInputProps, type TagInputSuggestion, foldSuggestions, normalizeKeyword, normalizeKeywords, splitKeywordText };

package/dist/widgets/TagInput.js

@@ -0,0 +1,4 @@
+export { TagInput, foldSuggestions, normalizeKeyword, normalizeKeywords, splitKeywordText } from '../chunk-GNA6SX2H.js';
+import '../chunk-RIZRM7OO.js';
+import '../chunk-RNOUXUBO.js';
+import '../chunk-5WW4MBRO.js';

package/dist/widgets/TreePicker.js

@@ -1,7 +1,8 @@
-export { TreePicker } from '../chunk-7BGDSSAN.js';
-import '../chunk-C37U3GCC.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+export { TreePicker } from '../chunk-OQ52XMGG.js';
+import '../chunk-GZBY7I4Y.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/TreeView.js

@@ -1,6 +1,7 @@
-export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-C37U3GCC.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-GZBY7I4Y.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-RNOUXUBO.js';
 import '../chunk-5WW4MBRO.js';

package/dist/widgets/index.d.ts

@@ -6,6 +6,8 @@ import { TimelineProps } from './Timeline.js';
 export { Timeline, TimelineItem } from './Timeline.js';
 import { TagMultiSelectProps } from './TagMultiSelect.js';
 export { TagMultiSelect, TagMultiSelectOption, pickSeedValues } from './TagMultiSelect.js';
+import { TagInputProps } from './TagInput.js';
+export { TagInput, TagInputSuggestion, foldSuggestions, normalizeKeyword, normalizeKeywords, splitKeywordText } from './TagInput.js';
 import { SummaryTableProps } from './SummaryTable.js';
 export { SummaryTable, SummaryTableColumn } from './SummaryTable.js';
 import { StripProps } from './Strip.js';
@@ -109,6 +111,7 @@ declare const widgetComponents: {
     StagePeriodEditor: React.FC<StagePeriodEditorProps & SduiBoxProps>;
     Strip: React.FC<StripProps & SduiBoxProps>;
     SummaryTable: React.FC<SummaryTableProps & SduiBoxProps>;
+    TagInput: React.FC<TagInputProps & SduiBoxProps>;
     TagMultiSelect: React.FC<TagMultiSelectProps & SduiBoxProps>;
     Timeline: React.FC<TimelineProps & SduiBoxProps>;
     TreePicker: React.FC<TreePickerProps & SduiBoxProps>;
@@ -117,4 +120,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, ProfileEditDiffCardProps, 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, TagInputProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };

package/dist/widgets/index.js

@@ -1,19 +1,21 @@
+import { TreePicker } from '../chunk-OQ52XMGG.js';
+export { TreePicker } from '../chunk-OQ52XMGG.js';
+import { TreeView } from '../chunk-GZBY7I4Y.js';
+export { TreeView, buildTreeNodes } from '../chunk-GZBY7I4Y.js';
 import { SecureScreen } from '../chunk-I45EUZC6.js';
 export { SecureScreen } from '../chunk-I45EUZC6.js';
 import { StackedMeter } from '../chunk-JIV4YHCZ.js';
 export { StackedMeter } from '../chunk-JIV4YHCZ.js';
-import { StagePeriodEditor } from '../chunk-5XPZ3RSA.js';
-export { StagePeriodEditor } from '../chunk-5XPZ3RSA.js';
+import { StagePeriodEditor } from '../chunk-NIJUVTEW.js';
+export { StagePeriodEditor } from '../chunk-NIJUVTEW.js';
 import { Strip } from '../chunk-AXGF4M57.js';
 export { Strip } from '../chunk-AXGF4M57.js';
 import { SummaryTable } from '../chunk-2YP5N4VV.js';
 export { SummaryTable } from '../chunk-2YP5N4VV.js';
+import { TagInput } from '../chunk-GNA6SX2H.js';
+export { TagInput, foldSuggestions, normalizeKeyword, normalizeKeywords, splitKeywordText } from '../chunk-GNA6SX2H.js';
 import { Timeline } from '../chunk-GTGS2QRL.js';
 export { Timeline } from '../chunk-GTGS2QRL.js';
-import { TreePicker } from '../chunk-7BGDSSAN.js';
-export { TreePicker } from '../chunk-7BGDSSAN.js';
-import { TreeView } from '../chunk-C37U3GCC.js';
-export { TreeView, buildTreeNodes } from '../chunk-C37U3GCC.js';
 import { PositionSelect } from '../chunk-DOL57OOP.js';
 export { PositionSelect } from '../chunk-DOL57OOP.js';
 import { PrintSheet } from '../chunk-E6ISNQK3.js';
@@ -28,16 +30,16 @@ import { RecordSheet } from '../chunk-O4IISNE7.js';
 export { RecordSheet } from '../chunk-O4IISNE7.js';
 import { RoleMemberPicker } from '../chunk-A5XQOEVH.js';
 export { RoleMemberPicker } from '../chunk-A5XQOEVH.js';
-import { SearchableMultiPicker } from '../chunk-AC5TI3BE.js';
-export { SearchableMultiPicker } from '../chunk-AC5TI3BE.js';
+import { SearchableMultiPicker } from '../chunk-HBIIEYKW.js';
+export { SearchableMultiPicker } from '../chunk-HBIIEYKW.js';
 import { JsonField } from '../chunk-ZFNFPXPR.js';
 export { JsonField } from '../chunk-ZFNFPXPR.js';
 import { LiveClock } from '../chunk-DMLDKW7K.js';
 export { LiveClock } from '../chunk-DMLDKW7K.js';
-import { OptionSchemaEditor } from '../chunk-B6WMC2AN.js';
-export { OPTION_TYPES, OptionSchemaEditor } from '../chunk-B6WMC2AN.js';
-import { OptionValueFields } from '../chunk-7FZTUI6U.js';
-export { OptionValueFields } from '../chunk-7FZTUI6U.js';
+import { OptionSchemaEditor } from '../chunk-CXW6KT6X.js';
+export { OPTION_TYPES, OptionSchemaEditor } from '../chunk-CXW6KT6X.js';
+import { OptionValueFields } from '../chunk-BEM2YS7U.js';
+export { OptionValueFields } from '../chunk-BEM2YS7U.js';
 import { OrgChart } from '../chunk-A6LAIGUS.js';
 export { OrgChart } from '../chunk-A6LAIGUS.js';
 import { OrgChartBoard } from '../chunk-JZXU22PE.js';
@@ -46,9 +48,9 @@ import '../chunk-XRHR452N.js';
 import '../chunk-MMIGOPO5.js';
 import { PermissionMatrixEditor } from '../chunk-LFEJLOFN.js';
 export { PermissionMatrixEditor } from '../chunk-LFEJLOFN.js';
-import { PeriodFilter } from '../chunk-HBBTENSV.js';
-export { PeriodFilter } from '../chunk-HBBTENSV.js';
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-N25YP7ID.js';
+import { PeriodFilter } from '../chunk-44TDRCKR.js';
+export { PeriodFilter } from '../chunk-44TDRCKR.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-FNMS7OB7.js';
 import { ColumnBoard } from '../chunk-YWUDBLO6.js';
 export { ColumnBoard } from '../chunk-YWUDBLO6.js';
 import { DiffView } from '../chunk-JYAR7D5U.js';
@@ -63,17 +65,18 @@ export { ImageLightbox } from '../chunk-VY7MVBSE.js';
 import { InlineEdit } from '../chunk-7P7N43JV.js';
 export { InlineEdit } from '../chunk-7P7N43JV.js';
 import '../chunk-TFGNKFL2.js';
-import '../chunk-37SFFW37.js';
+import '../chunk-WPSK2CB5.js';
 import '../chunk-SAPBDJJQ.js';
-import { ApprovalOverridesEditor } from '../chunk-GE6BYNQJ.js';
-export { ApprovalOverridesEditor } from '../chunk-GE6BYNQJ.js';
+import { ApprovalOverridesEditor } from '../chunk-DKVSM5HX.js';
+export { ApprovalOverridesEditor } from '../chunk-DKVSM5HX.js';
 import { TagMultiSelect } from '../chunk-I5SD7XRA.js';
 export { TagMultiSelect, pickSeedValues } from '../chunk-I5SD7XRA.js';
-import { ApprovalLineEditor } from '../chunk-FLAN7CV3.js';
-export { ApprovalLineEditor } from '../chunk-FLAN7CV3.js';
+import { ApprovalLineEditor } from '../chunk-MPT7WJG2.js';
+export { ApprovalLineEditor } from '../chunk-MPT7WJG2.js';
 import '../chunk-Q4SWUINA.js';
-import '../chunk-WOYMEEPH.js';
-import '../chunk-WSLT32Q4.js';
+import '../chunk-UV6HHFEW.js';
+import '../chunk-RWSH2MBU.js';
+import '../chunk-RIZRM7OO.js';
 import '../chunk-XQPTSEJC.js';
 import '../chunk-KO6OEY3G.js';
 import { ApprovalStepper } from '../chunk-XGFDY43I.js';
@@ -113,6 +116,7 @@ var widgetComponents = {
   StagePeriodEditor,
   Strip,
   SummaryTable,
+  TagInput,
   TagMultiSelect,
   Timeline,
   TreePicker,

package/package.json

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