sellmate-design-system-react 9.0.0-beta.17 → 9.0.0-beta.19

package/dist/index.cjs

@@ -1203,6 +1203,45 @@ var Icon_close = (p) => {
     }
   );
 };
+var Icon_company = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14.25 8.5C14.6642 8.5 15 8.83579 15 9.25C15 9.66421 14.6642 10 14.25 10H9.75C9.33579 10 9 9.66421 9 9.25C9 8.83579 9.33579 8.5 9.75 8.5H14.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14.25 5.5C14.6642 5.5 15 5.83579 15 6.25C15 6.66421 14.6642 7 14.25 7H9.75C9.33579 7 9 6.66421 9 6.25C9 5.83579 9.33579 5.5 9.75 5.5H14.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16 2.25C16.9665 2.25 17.75 3.0335 17.75 4V6.25H20.25C21.2165 6.25 22 7.0335 22 8V20C22 20.9665 21.2165 21.75 20.25 21.75H3.75C2.7835 21.75 2 20.9665 2 20V10C2 9.0335 2.7835 8.25 3.75 8.25H6.25V4C6.25 3.0335 7.0335 2.25 8 2.25H16ZM3.75 9.75C3.61193 9.75 3.5 9.86193 3.5 10V20C3.5 20.1381 3.61193 20.25 3.75 20.25H6.25V9.75H3.75ZM8 3.75C7.86193 3.75 7.75 3.86193 7.75 4V20.25H9.25V16C9.25 15.0335 10.0335 14.25 11 14.25H13C13.9665 14.25 14.75 15.0335 14.75 16V20.25H16.25V4C16.25 3.86193 16.1381 3.75 16 3.75H8ZM11 15.75C10.8619 15.75 10.75 15.8619 10.75 16V20.25H13.25V16C13.25 15.8619 13.1381 15.75 13 15.75H11ZM17.75 20.25H20.25C20.3881 20.25 20.5 20.1381 20.5 20V8C20.5 7.86193 20.3881 7.75 20.25 7.75H17.75V20.25Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_copy = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2426,6 +2465,27 @@ var Icon_row = (p) => {
     }
   );
 };
+var Icon_rowDense = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M7.25 2C7.66421 2 8 2.33579 8 2.75V21.25C8 21.6642 7.66421 22 7.25 22H5.75C5.33579 22 5 21.6642 5 21.25V2.75C5 2.33579 5.33579 2 5.75 2H7.25ZM12.75 2C13.1642 2 13.5 2.33579 13.5 2.75V21.25C13.5 21.6642 13.1642 22 12.75 22H11.25C10.8358 22 10.5 21.6642 10.5 21.25V2.75C10.5 2.33579 10.8358 2 11.25 2H12.75ZM18.25 2C18.6642 2 19 2.33579 19 2.75V21.25C19 21.6642 18.6642 22 18.25 22H16.75C16.3358 22 16 21.6642 16 21.25V2.75C16 2.33579 16.3358 2 16.75 2H18.25Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_save = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3074,6 +3134,7 @@ var ICONS = {
   clockFill: Icon_clockFill,
   clockOutline: Icon_clockOutline,
   close: Icon_close,
+  company: Icon_company,
   copy: Icon_copy,
   coupon: Icon_coupon,
   dashboard: Icon_dashboard,
@@ -3111,6 +3172,7 @@ var ICONS = {
   reset: Icon_reset,
   robot: Icon_robot,
   row: Icon_row,
+  rowDense: Icon_rowDense,
   save: Icon_save,
   search: Icon_search,
   send: Icon_send,
@@ -3429,6 +3491,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     supportingText,
     supportingTextPosition,
     trailing,
+    depth,
     accentStripe,
     bordered,
     selected,
@@ -3440,6 +3503,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     dragHandleProps,
     onDragHandleMouseDown,
     className,
+    style,
     ...rest
   }, ref) {
     const renderState = { hovered, dragging, disabled };
@@ -3449,12 +3513,19 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     const trailingNode = renderSlot(trailing, renderState);
     const titleTypo = size === "sm" ? selected ? "typo-item-sm-selected" : "typo-item-sm-default" : selected ? "typo-item-md-selected" : "typo-item-md-default";
     const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
+    const normalizedDepth = Math.max(1, Math.floor(depth));
+    const depthOffset = (normalizedDepth - 1) * 20;
+    const depthStyle = depthOffset === 0 ? style : {
+      ...style,
+      paddingLeft: `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "aria-disabled": disabled || void 0,
         "data-dragging": dragging || void 0,
+        style: depthStyle,
         className: cn(
           "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
           titleTypo,
@@ -3543,6 +3614,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   supportingText,
   supportingTextPosition = "right",
   trailing,
+  depth = 1,
   accentStripe = false,
   bordered = false,
   selected = false,
@@ -3616,6 +3688,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
         supportingText,
         supportingTextPosition,
         trailing,
+        depth,
         accentStripe,
         bordered,
         selected,
@@ -3651,6 +3724,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
               supportingText,
               supportingTextPosition,
               trailing,
+              depth,
               accentStripe,
               bordered,
               selected,
@@ -3900,6 +3974,42 @@ function reorder(items, fromIndex, toIndex) {
   nextItems.splice(toIndex, 0, movedItem);
   return nextItems;
 }
+function clampDepth(depth, maxDepth) {
+  return Math.max(1, Math.min(maxDepth, Math.floor(depth)));
+}
+function getSubtreeEnd(items, startIndex, getDepth) {
+  const startDepth = getDepth(items[startIndex], startIndex);
+  let endIndex = startIndex + 1;
+  while (endIndex < items.length && getDepth(items[endIndex], endIndex) > startDepth) {
+    endIndex += 1;
+  }
+  return endIndex;
+}
+function getInsertionIndex(items, target, getDepth) {
+  if (target.intent === "before") return target.index;
+  if (target.intent === "inside") return target.index + 1;
+  return getSubtreeEnd(items, target.index, getDepth);
+}
+function moveWithDepth(items, fromIndex, target, getDepth, setDepth, maxDepth) {
+  const fromEndIndex = getSubtreeEnd(items, fromIndex, getDepth);
+  if (target.index >= fromIndex && target.index < fromEndIndex) return items;
+  const movedItems = items.slice(fromIndex, fromEndIndex);
+  const remainingItems = [...items.slice(0, fromIndex), ...items.slice(fromEndIndex)];
+  const rawInsertionIndex = getInsertionIndex(items, target, getDepth);
+  const insertionIndex = rawInsertionIndex > fromIndex ? rawInsertionIndex - movedItems.length : rawInsertionIndex;
+  const sourceDepth = getDepth(items[fromIndex], fromIndex);
+  const targetDepth = getDepth(items[target.index], target.index);
+  const nextDepth = target.intent === "inside" ? targetDepth + 1 : targetDepth;
+  const depthDelta = clampDepth(nextDepth, maxDepth) - sourceDepth;
+  const nextMovedItems = setDepth && depthDelta !== 0 ? movedItems.map(
+    (item, index) => setDepth(item, clampDepth(getDepth(item, fromIndex + index) + depthDelta, maxDepth))
+  ) : movedItems;
+  return [
+    ...remainingItems.slice(0, insertionIndex),
+    ...nextMovedItems,
+    ...remainingItems.slice(insertionIndex)
+  ];
+}
 function SDraggableListInner({
   items,
   getKey,
@@ -3909,6 +4019,10 @@ function SDraggableListInner({
   defaultSelectedKey,
   onSelectedKeyChange,
   getDisabled,
+  getDepth,
+  setDepth,
+  getCanHaveChildren,
+  maxDepth = 3,
   listId,
   group: groupName,
   useGap,
@@ -3918,19 +4032,24 @@ function SDraggableListInner({
   const dragContext = useSDraggableGroup();
   const dragGroup = groupName ?? dragContext?.defaultGroup;
   const [draggingIndex, setDraggingIndex] = react.useState(null);
-  const [dropIndex, setDropIndex] = react.useState(null);
+  const [dropTarget, setDropTarget] = react.useState(null);
   const [internalSelectedKey, setInternalSelectedKey] = react.useState(
     defaultSelectedKey
   );
   const listRef = react.useRef(null);
   const fromIndexRef = react.useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const usesDepth = getDepth != null;
   const startDrag = react.useCallback((event, index) => {
     event.preventDefault();
     fromIndexRef.current = index;
     setDraggingIndex(index);
-    setDropIndex(index);
+    setDropTarget({ index, intent: "before" });
   }, []);
+  const readDepth = react.useCallback(
+    (item, index) => clampDepth(getDepth?.(item, index) ?? 1, maxDepth),
+    [getDepth, maxDepth]
+  );
   react.useEffect(() => {
     if (dragContext || draggingIndex == null) return void 0;
     const handleMouseMove = (event) => {
@@ -3938,25 +4057,65 @@ function SDraggableListInner({
         "[data-draggable-list-item]"
       );
       if (!itemElements) return;
-      let nextDropIndex = items.length;
-      itemElements.forEach((itemElement, index) => {
+      let nextDropTarget = items.length === 0 ? { index: 0, intent: "before" } : { index: items.length - 1, intent: "after" };
+      const draggingEndIndex = usesDepth && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
+      let previousDropIndex = null;
+      for (let index = 0; index < itemElements.length; index += 1) {
+        const itemElement = itemElements[index];
         const rect = itemElement.getBoundingClientRect();
-        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {
-          nextDropIndex = index;
+        if (index >= draggingIndex && index < draggingEndIndex) {
+          if (event.clientY <= rect.bottom) {
+            if (previousDropIndex != null) {
+              nextDropTarget = { index: previousDropIndex, intent: "after" };
+            } else {
+              nextDropTarget = { index: draggingIndex, intent: "before" };
+            }
+            break;
+          }
+          continue;
         }
-      });
-      setDropIndex(nextDropIndex);
+        if (event.clientY < rect.top) {
+          nextDropTarget = { index, intent: "before" };
+          break;
+        }
+        if (event.clientY > rect.bottom) {
+          previousDropIndex = index;
+          nextDropTarget = { index, intent: "after" };
+          continue;
+        }
+        const ratio = (event.clientY - rect.top) / rect.height;
+        if (!usesDepth) {
+          nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
+          break;
+        }
+        const item = items[index];
+        const canHaveChildren = (getCanHaveChildren?.(item, index) ?? true) && readDepth(item, index) < maxDepth;
+        if (ratio < 0.25) {
+          nextDropTarget = { index, intent: "before" };
+        } else if (ratio > 0.75 || !canHaveChildren) {
+          nextDropTarget = { index, intent: "after" };
+        } else {
+          nextDropTarget = { index, intent: "inside" };
+        }
+        break;
+      }
+      setDropTarget(nextDropTarget);
     };
     const handleMouseUp = () => {
       const fromIndex = fromIndexRef.current;
-      const nextDropIndex = dropIndex;
-      if (fromIndex != null && nextDropIndex != null) {
-        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;
-        if (fromIndex !== toIndex) onChange?.(reorder(items, fromIndex, toIndex));
+      const nextDropTarget = dropTarget;
+      if (fromIndex != null && nextDropTarget != null && items[nextDropTarget.index]) {
+        const insertionIndex = getInsertionIndex(items, nextDropTarget, () => 1);
+        const nextItems = usesDepth ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
+          items,
+          fromIndex,
+          insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex
+        );
+        if (nextItems !== items) onChange?.(nextItems);
       }
       fromIndexRef.current = null;
       setDraggingIndex(null);
-      setDropIndex(null);
+      setDropTarget(null);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -3964,12 +4123,25 @@ function SDraggableListInner({
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [draggingIndex, dropIndex, items, onChange, dragContext]);
+  }, [
+    draggingIndex,
+    dropTarget,
+    items,
+    onChange,
+    dragContext,
+    getDepth,
+    usesDepth,
+    readDepth,
+    setDepth,
+    maxDepth,
+    getCanHaveChildren
+  ]);
   if (dragContext && (!listId || !dragGroup)) {
     throw new Error("SDraggableList: Provider \uC548\uC5D0\uC11C\uB294 group\uACFC listId\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4.");
   }
   const groupDrop = dragContext?.drop;
-  const currentDropIndex = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId ? groupDrop?.index ?? null : null : dropIndex;
+  const currentDropIndex = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId ? groupDrop?.index ?? null : null : dropTarget?.index;
+  const currentDropIntent = dragContext ? void 0 : dropTarget?.intent;
   const isDropTarget = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId : draggingIndex != null;
   const showEmptyDrop = Boolean(dragContext && isDropTarget && items.length === 0);
   const beforeIndicatorPosition = useGap ? "before:top-[-5px]" : "before:top-0";
@@ -4000,19 +4172,30 @@ function SDraggableListInner({
       children: items.map((item, index) => {
         const itemKey = getKey(item, index);
         const disabled = getDisabled?.(item, index) ?? false;
-        const showBefore = isDropTarget && currentDropIndex === index;
-        const showAfter = isDropTarget && currentDropIndex === items.length && index === items.length - 1;
+        const depth = readDepth(item, index);
+        const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
+        const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
+        const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
+        const selectItem = () => {
+          if (disabled) return;
+          setInternalSelectedKey(itemKey);
+          onSelectedKeyChange?.(itemKey);
+        };
+        const handleItemKeyDown = (event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          selectItem();
+        };
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-draggable-list-item": true,
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
             "aria-disabled": disabled || void 0,
-            onClick: () => {
-              if (disabled) return;
-              setInternalSelectedKey(itemKey);
-              onSelectedKeyChange?.(itemKey);
-            },
-            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""}`,
+            onClick: selectItem,
+            onKeyDown: handleItemKeyDown,
+            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""} ${showInside ? "outline outline-2 outline-offset-[-2px] outline-(--sys-color-border-accent)" : ""}`,
             children: renderItem(item, index, {
               onDragHandleMouseDown: (event) => {
                 if (disabled) return;
@@ -4020,7 +4203,8 @@ function SDraggableListInner({
                   dragContext.startDrag(event, dragGroup, listId, index, itemKey);
                 } else startDrag(event, index);
               },
-              selected: currentSelectedKey === itemKey
+              selected: currentSelectedKey === itemKey,
+              depth
             })
           },
           itemKey
@@ -6104,6 +6288,7 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
   label = "",
   icon,
   iconColor,
+  iconRotate,
   labelClass,
   rightArrow = "none",
   underline = false,
@@ -6146,7 +6331,7 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
       style: { gap: s.gap, color: contentColor, ...style },
       ...rest,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor, rotate: iconRotate }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -11124,11 +11309,13 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   noDataSlot,
   isLoading = false,
   dense = false,
+  onDenseChange,
   noHover = false,
   pagination,
   onPageChange,
   useInternalPagination = false,
   useRowsPerPageSelect = false,
+  useDensityToggle = false,
   rowsPerPageOption = DEFAULT_ROWS_PER_PAGE_OPTION,
   onRowsPerPageChange,
   useVirtualScroll = false,
@@ -11524,21 +11711,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                         col.align === "right" && "justify-end"
                                       ),
                                       children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                        col.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: col.icon, size: 16, color: col.iconColor }),
                                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
-                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
-                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
-                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          SGhostButton,
-                                          {
-                                            size: "xxs",
-                                            intent: sortDir ? "action" : "default",
-                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
-                                            ariaLabel: `${col.label} \uC815\uB82C`,
-                                            onClick: () => toggleSort(col)
-                                          }
-                                        ) }),
                                         col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
                                         // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
                                         // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
@@ -11552,6 +11725,50 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                             placement: "top",
                                             message: col.helpText
                                           }
+                                        ) }),
+                                        col.editable && /* @__PURE__ */ jsxRuntime.jsx(
+                                          SIcon,
+                                          {
+                                            name: "pageEdit",
+                                            size: 12,
+                                            color: "var(--sys-color-link-accent)",
+                                            label: "\uC218\uC815 \uAC00\uB2A5",
+                                            className: "shrink-0"
+                                          }
+                                        ),
+                                        col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
+                                          SIcon,
+                                          {
+                                            name: "pageMove",
+                                            size: 12,
+                                            color: "var(--sys-color-link-accent)",
+                                            label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
+                                            className: "shrink-0"
+                                          }
+                                        ),
+                                        col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
+                                        // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
+                                        /* @__PURE__ */ jsxRuntime.jsx(
+                                          SIcon,
+                                          {
+                                            name: "asterisk",
+                                            size: 12,
+                                            color: "var(--sys-color-fg-accent)",
+                                            className: "shrink-0"
+                                          }
+                                        ),
+                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                          SGhostButton,
+                                          {
+                                            size: "xxs",
+                                            intent: sortDir ? "action" : "default",
+                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                                            ariaLabel: `${col.label} \uC815\uB82C`,
+                                            onClick: () => toggleSort(col)
+                                          }
                                         ) })
                                       ] })
                                     }
@@ -11709,16 +11926,32 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                SSelect2,
-                {
-                  options: rowsPerPageOption,
-                  value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-                  emitValue: true,
-                  onValueChange: (v) => changeRowsPerPage(Number(v)),
-                  width: 128
-                }
-              ) })
+              (useDensityToggle || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+                useDensityToggle && // 라벨·아이콘은 현재 밀도가 아니라 **누르면 되는 상태**를 가리킨다 (dense 면 "넓게 보기").
+                // row·rowDense 는 세로 막대라 90도 돌려 가로 행으로 쓴다.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  STextLink,
+                  {
+                    size: "sm",
+                    icon: dense ? "row" : "rowDense",
+                    iconRotate: 90,
+                    iconColor: "var(--sys-color-fg-quaternary)",
+                    label: dense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
+                    onClick: () => onDenseChange?.(!dense)
+                  }
+                ),
+                useDensityToggle && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(
+                  SSelect2,
+                  {
+                    options: rowsPerPageOption,
+                    value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                    emitValue: true,
+                    onValueChange: (v) => changeRowsPerPage(Number(v)),
+                    width: 128
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -12814,6 +13047,11 @@ function SCalendar({
     }
   );
 }
+var MODE_NOUN = {
+  date: "\uB0A0\uC9DC",
+  month: "\uC6D4",
+  year: "\uC5F0\uB3C4"
+};
 var DATEPICKER_MODE_LIST_HEIGHT = 240;
 var DATEPICKER_MODE_ITEM_HEIGHT = 28;
 var YEAR_LIST_EDGE_BUFFER = 24;
@@ -13085,7 +13323,9 @@ function SDatePicker({
   placeholder,
   selectable,
   disabled = false,
+  clearable = false,
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -13128,7 +13368,8 @@ function SDatePicker({
     fieldMinW: 168,
     // 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도 행 전체로
     // 늘어나지 않게 상한을 건다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다).
-    // px 가 아니라 등급이라 --cmp-field-width-* 가 바뀌면 함께 따라간다
+    // px 가 아니라 등급이라 --cmp-field-width-* 가 바뀌면 함께 따라간다.
+    // 이 기본 상한이 걸리적거리는 자리(폭이 이미 좁게 정해진 팝오버 등)는 maxWidth prop 으로 덮는다
     fieldMaxW: "lg",
     fontSize: 14,
     lineHeight: 24,
@@ -13149,6 +13390,10 @@ function SDatePicker({
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const clear = () => {
+    onValueChange?.(null);
+    if (rules && rules.length > 0) setRuleError(runRules(null, rules));
+  };
   const selectListboxValue = (nextValue) => {
     onValueChange?.(nextValue);
     if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
@@ -13172,20 +13417,31 @@ function SDatePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
-      maxWidth: dims.fieldMaxW,
+      maxWidth: maxWidth ?? dims.fieldMaxW,
       disabled,
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
         /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                setOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -13209,6 +13465,18 @@ function SDatePicker({
                   },
                   children: hasValue ? value : resolvedPlaceholder
                 }
+              ),
+              clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "close",
+                  size: "xxs",
+                  ariaLabel: `${MODE_NOUN[mode]} \uC9C0\uC6B0\uAE30`,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    clear();
+                  }
+                }
               )
             ]
           }
@@ -13588,6 +13856,7 @@ function SDateRangePicker({
   maxRange,
   useTimePicker = false,
   disabled = false,
+  clearable = false,
   width,
   name,
   rules,
@@ -13655,6 +13924,11 @@ function SDateRangePicker({
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
     if (!useTimePicker) setOpen(false);
   };
+  const clear = () => {
+    setPendingStart(null);
+    onValueChange?.(null);
+    if (rules && rules.length > 0) setRuleError(runRules(null, rules));
+  };
   const resolvedPlaceholder = useTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
@@ -13690,12 +13964,23 @@ function SDateRangePicker({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
+              "div",
               {
-                type: "button",
-                name,
-                disabled,
-                className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+                role: "button",
+                "aria-disabled": disabled,
+                tabIndex: disabled ? -1 : 0,
+                "data-name": name,
+                onKeyDown: (event) => {
+                  if (disabled) return;
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setOpen(!open);
+                  }
+                },
+                className: cn(
+                  "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+                  disabled ? "cursor-not-allowed" : "cursor-pointer"
+                ),
                 style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -13726,6 +14011,18 @@ function SDateRangePicker({
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: endText })
                       ] }) : resolvedPlaceholder
                     }
+                  ),
+                  clearable && hasDisplay && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                    SGhostButton,
+                    {
+                      icon: "close",
+                      size: "xxs",
+                      ariaLabel: "\uAE30\uAC04 \uC9C0\uC6B0\uAE30",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        clear();
+                      }
+                    }
                   )
                 ]
               }
@@ -14990,6 +15287,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   );
   const [openKey, setOpenKey] = react.useState(null);
   const [addOpen, setAddOpen] = react.useState(false);
+  const pendingOpenKeyRef = react.useRef(null);
   const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
   const prevOpenKeyRef = react.useRef(null);
@@ -15065,6 +15363,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const hasAddButton = fields.some(isAddableField);
   const hasRightActions = hasAddButton || showReset;
   const currentOpenField = fields.find((field) => field.key === openKey);
+  const menuOpen = openKey != null || addOpen;
   const editorPopoverStyle = react.useMemo(() => {
     if (currentOpenField?.type === "keyword") {
       return { width: CHIPFILTER_LISTBOX_WIDTH };
@@ -15123,7 +15422,13 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     onAddFilter?.(key);
     setAddOpen(false);
     const field = fields.find((f) => f.key === key);
-    if (field && !isInlineField(field)) requestAnimationFrame(() => setOpenKey(key));
+    if (field && !isInlineField(field)) {
+      pendingOpenKeyRef.current = key;
+      requestAnimationFrame(() => {
+        triggerRefs.current.get(key)?.focus();
+        setOpenKey(key);
+      });
+    }
   };
   const rootStyle = react.useMemo(
     () => ({
@@ -15166,6 +15471,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                     {
                       message,
                       open: invalidGroups.has(runGroupIndex),
+                      placement: menuOpen ? "top" : "bottom",
                       children: runBuffer
                     },
                     `group-${runGroupIndex}`
@@ -15179,14 +15485,16 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
             activeFields.forEach((field, index) => {
               const inline = isInlineField(field);
               const groupIndex = groupIndexByKey.get(field.key) ?? 0;
-              const warning = field.warning || invalidGroups.has(groupIndex);
+              const warning = invalidGroups.has(groupIndex);
               const prevField = index > 0 ? activeFields[index - 1] : null;
               const prevGroupIndex = prevField ? groupIndexByKey.get(prevField.key) ?? 0 : null;
               const needsLeadingDivider = index === 0 ? false : inline || prevField != null && isInlineField(prevField) || groupIndex !== prevGroupIndex && groups[groupIndex]?.divider === true;
+              const hoistDivider = needsLeadingDivider && groupIndex !== runGroupIndex;
               if (groupIndex !== runGroupIndex) {
                 flushRun();
                 runGroupIndex = groupIndex;
               }
+              if (hoistDivider) nodes.push(/* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }, `${field.key}-divider`));
               const addable = isAddableField(field);
               const showClear = addable || !isAtDefaultValue(field, values[field.key]);
               const handleClear = () => {
@@ -15250,7 +15558,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 field.key
               );
               runBuffer.push(
-                needsLeadingDivider ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                needsLeadingDivider && !hoistDivider ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
                   node
                 ] }, `${field.key}-wrap`) : node
@@ -15298,6 +15606,11 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   side: "bottom",
                   align: "start",
                   sideOffset: 4,
+                  onCloseAutoFocus: (event) => {
+                    if (pendingOpenKeyRef.current == null) return;
+                    pendingOpenKeyRef.current = null;
+                    event.preventDefault();
+                  },
                   className: cn("z-50 min-w-[180px]", FLOATING_SLIDE_ANIM),
                   children: /* @__PURE__ */ jsxRuntime.jsx(ListBox, { children: inactiveFields.length > 0 ? inactiveFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: () => addField(field.key), children: field.label }, field.key)) : /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uCD94\uAC00\uD560 \uD544\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) })
                 }
@@ -15348,6 +15661,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   value: values[currentOpenField.key],
                   disabled: disabled || currentOpenField.disabled,
                   onValueChange: (next) => emitValue(currentOpenField.key, next),
+                  onValueCommit: (next) => emitValueAndSearch(currentOpenField.key, next),
                   onClose: () => setOpenKey(null)
                 }
               )
@@ -15375,9 +15689,20 @@ function Divider({ inset, top } = {}) {
 function GroupTooltip({
   message,
   open,
+  placement,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(STooltip2, { trigger: "none", open, placement: "top", tooltipType: "warning", message: [message], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    STooltip2,
+    {
+      trigger: "none",
+      open,
+      placement,
+      tooltipType: "warning",
+      message: [message],
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children })
+    }
+  );
 }
 function FilterChip({
   field,
@@ -15487,6 +15812,7 @@ function EditorPanel({
   value,
   disabled,
   onValueChange,
+  onValueCommit,
   onClose
 }) {
   const wrapsInPaddedTop = field.type === "date" || field.type === "period";
@@ -15506,7 +15832,8 @@ function EditorPanel({
         field,
         value,
         disabled,
-        onValueChange
+        onValueChange,
+        onValueCommit
       }
     ) }) : /* @__PURE__ */ jsxRuntime.jsx(
       FilterEditor,
@@ -15514,7 +15841,8 @@ function EditorPanel({
         field,
         value,
         disabled,
-        onValueChange
+        onValueChange,
+        onValueCommit
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15566,7 +15894,8 @@ function FilterEditor({
   field,
   value,
   disabled,
-  onValueChange
+  onValueChange,
+  onValueCommit
 }) {
   if (field.type === "period") {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15597,7 +15926,8 @@ function FilterEditor({
         field,
         value: isKeywordValue(value) ? value : keywordEntries(value),
         disabled,
-        onValueChange
+        onValueChange,
+        onValueCommit
       }
     );
   }
@@ -15639,7 +15969,9 @@ function DatePresetEditor({
         onValueChange,
         selectable: field.selectable,
         disabled,
-        placeholder: field.placeholder
+        placeholder: field.placeholder,
+        width: "100%",
+        maxWidth: "100%"
       }
     );
   }
@@ -15699,7 +16031,8 @@ function PeriodPresetEditor({
           onValueChange: updateInputValue,
           selectable: field.selectable,
           disabled,
-          width: "100%"
+          width: "100%",
+          maxWidth: "100%"
         }
       );
     }
@@ -15712,19 +16045,18 @@ function PeriodPresetEditor({
           onValueChange: updateInputValue,
           selectable: field.selectable,
           disabled,
-          width: "100%"
+          width: "100%",
+          maxWidth: "100%"
         }
       );
     }
     if (selectedUnit === "quarter") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        SSelect2,
+        SRadioButton,
         {
           value: typeof periodValue.value === "number" ? periodValue.value : 1,
           onValueChange: updateInputValue,
-          emitValue: true,
           disabled,
-          width: "100%",
           options: [
             { value: 1, label: "1\uBD84\uAE30" },
             { value: 2, label: "2\uBD84\uAE30" },
@@ -15736,13 +16068,11 @@ function PeriodPresetEditor({
     }
     if (selectedUnit === "half") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        SSelect2,
+        SRadioButton,
         {
           value: typeof periodValue.value === "string" ? periodValue.value : "first",
           onValueChange: updateInputValue,
-          emitValue: true,
           disabled,
-          width: "100%",
           options: [
             { value: "first", label: "\uC0C1\uBC18\uAE30" },
             { value: "second", label: "\uD558\uBC18\uAE30" }
@@ -15759,7 +16089,8 @@ function PeriodPresetEditor({
           onValueChange: updateInputValue,
           selectable: field.selectable,
           disabled,
-          width: "100%"
+          width: "100%",
+          maxWidth: "100%"
         }
       );
     }
@@ -15787,7 +16118,6 @@ function PeriodPresetEditor({
       },
       preset.value
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
   ] });
 }
@@ -15909,6 +16239,7 @@ function InlineDatePresetFilter({
     ) : badge)
   ] });
 }
+var CSV_PASTE_SEPARATOR = /[,\r\n\t]+/;
 var MATCH_MODE_OPTIONS = [
   { value: "contains", label: "\uD3EC\uD568" },
   { value: "exact", label: "\uC77C\uCE58" }
@@ -15921,20 +16252,61 @@ function KeywordEditor({
   field,
   value,
   disabled,
-  onValueChange
+  onValueChange,
+  onValueCommit
 }) {
   const entries3 = keywordEntries(value);
   const [draft, setDraft] = react.useState("");
   const [mode, setMode] = react.useState(
     isKeywordValue(value) ? value.mode : "contains"
   );
-  const emit3 = (nextEntries) => {
-    onValueChange(field.matchModes ? { keywords: nextEntries, mode } : nextEntries);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  }, [disabled]);
+  const emit3 = (nextEntries, nextMode = mode) => {
+    onValueChange(field.matchModes ? { keywords: nextEntries, mode: nextMode } : nextEntries);
   };
-  const addEntry = (raw) => {
+  const commit = (nextEntries) => {
+    onValueCommit(field.matchModes ? { keywords: nextEntries, mode } : nextEntries);
+  };
+  const changeMode = (next) => {
+    setMode(next);
+    emit3(entries3, next);
+  };
+  const newEntries = (candidates) => candidates.reduce((acc, raw) => {
     const next = raw.trim();
-    if (next === "" || entries3.includes(next)) return;
-    emit3([...entries3, next]);
+    if (next === "" || entries3.includes(next) || acc.includes(next)) return acc;
+    return [...acc, next];
+  }, []);
+  const addEntry = (raw) => {
+    const added = newEntries([raw]);
+    if (added.length === 0) {
+      setDraft("");
+      return;
+    }
+    commit([...entries3, ...added]);
+    setDraft("");
+  };
+  const changeDraft = (next) => {
+    if (field.input !== "csv" || !next.includes(",")) {
+      setDraft(next);
+      return;
+    }
+    const parts = next.split(",");
+    const tail = parts.pop() ?? "";
+    const added = newEntries(parts);
+    if (added.length > 0) commit([...entries3, ...added]);
+    setDraft(tail);
+  };
+  const onPaste = (event) => {
+    if (field.input !== "csv") return;
+    const text = event.clipboardData.getData("text");
+    if (!CSV_PASTE_SEPARATOR.test(text)) return;
+    event.preventDefault();
+    const added = newEntries((draft + text).split(CSV_PASTE_SEPARATOR));
+    if (added.length > 0) commit([...entries3, ...added]);
     setDraft("");
   };
   const removeEntry = (entry) => {
@@ -15966,7 +16338,7 @@ function KeywordEditor({
             options: field.excludeMode ? [...MATCH_MODE_OPTIONS, EXCLUDE_MATCH_MODE_OPTION] : MATCH_MODE_OPTIONS,
             value: mode,
             disabled,
-            onValueChange: (next) => setMode(next)
+            onValueChange: (next) => changeMode(next)
           }
         )
       ] }),
@@ -15975,10 +16347,12 @@ function KeywordEditor({
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
+            ref: inputRef,
             value: draft,
             disabled,
-            placeholder: field.placeholder ?? "\uC785\uB825 \uD6C4 Enter\uB85C \uCD94\uAC00",
-            onChange: (event) => setDraft(event.target.value),
+            placeholder: field.placeholder ?? (field.input === "csv" ? "\uB2E4\uC911 \uD0A4\uC6CC\uB4DC\uB294 \uCF64\uB9C8(,)\uB85C \uAD6C\uBD84" : "\uC785\uB825 \uD6C4 Enter\uB85C \uCD94\uAC00"),
+            onChange: (event) => changeDraft(event.target.value),
+            onPaste,
             onKeyDown,
             className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
           }