sellmate-design-system-react 9.0.0-beta.95 → 9.0.0-beta.98

package/dist/index.cjs

@@ -4261,6 +4261,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
   icon,
   rightIcon,
   label,
+  pill = false,
   className,
   style,
   type = "button",
@@ -4291,7 +4292,8 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
     "minHeight": s.height,
     "minWidth": iconOnly ? s.iconOnlyWidth : hasLabel ? s.minWidth : void 0,
     "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
+    // 버튼 전용 pill 반경 토큰이 아직 없어 공용 반경을 쓴다
+    "borderRadius": pill ? "var(--radius-full)" : s.radius,
     "gap": s.gap,
     "fontSize": s.fontSize,
     "fontWeight": s.fontWeight,
@@ -15686,6 +15688,93 @@ function SCalendarBoard({
   );
 }
 
+// src/lib/row-motion.ts
+var EXPAND_MOTION = { duration: 220, easing: "ease-out" };
+var COLLAPSE_MOTION = { duration: 140, easing: "ease-in" };
+function sameKeys(a, b) {
+  return a.size === b.size && [...a].every((key) => b.has(key));
+}
+function motionAllowed() {
+  if (typeof window === "undefined" || typeof Element.prototype.animate !== "function")
+    return false;
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function startRowMotion({
+  scrollEl,
+  isInBlock,
+  blockKeys,
+  from,
+  to
+}) {
+  const spec = to === 1 ? EXPAND_MOTION : COLLAPSE_MOTION;
+  const duration = spec.duration * Math.abs(to - from);
+  if (duration < 1) return null;
+  const trs = [
+    ...scrollEl.querySelectorAll("tr[data-row-index], tr[data-expansion-row]")
+  ].map((tr) => ({ tr, inBlock: isInBlock(tr), height: tr.getBoundingClientRect().height }));
+  const viewBottom = scrollEl.scrollTop + scrollEl.clientHeight;
+  const openAt = (offset) => from + (to - from) * offset;
+  const translate = (shift2, s) => `translateY(${-shift2 * (1 - s)}px)`;
+  const timing = {
+    duration,
+    easing: spec.easing,
+    // 접힘은 남겨 둔 행이 빠질 때까지 끝 위치를 붙잡는다 — 놓으면 그 사이 한 프레임 제자리로 튄다
+    fill: to === 0 ? "forwards" : "none"
+  };
+  const animations = [];
+  let shift = 0;
+  let blockHeight = 0;
+  let y = 0;
+  trs.forEach(({ tr, inBlock, height }, i) => {
+    if (inBlock && !trs[i - 1]?.inBlock) {
+      blockHeight = 0;
+      for (let j = i; j < trs.length && trs[j].inBlock; j++) blockHeight += trs[j].height;
+      shift += blockHeight;
+      y = 0;
+    }
+    if (shift === 0 || tr.offsetTop - shift > viewBottom) return;
+    if (!inBlock) {
+      animations.push(
+        tr.animate(
+          [{ transform: translate(shift, from) }, { transform: translate(shift, to) }],
+          timing
+        )
+      );
+      return;
+    }
+    const rowY = y;
+    const clipAt = (s) => Math.min(height, Math.max(0, blockHeight * (1 - s) - rowY));
+    const bends = [1 - rowY / blockHeight, 1 - (rowY + height) / blockHeight].map((s) => (s - from) / (to - from)).filter((offset) => offset > 0 && offset < 1);
+    const offsets = [0, ...bends, 1].sort((a, b) => a - b);
+    animations.push(
+      tr.animate(
+        offsets.map((offset) => ({
+          offset,
+          transform: translate(shift, openAt(offset)),
+          clipPath: `inset(${clipAt(openAt(offset))}px 0 0 0)`
+        })),
+        timing
+      )
+    );
+    y += height;
+  });
+  if (animations.length === 0) return null;
+  return {
+    keys: blockKeys,
+    to,
+    done: false,
+    finished: Promise.all(animations.map((animation) => animation.finished)).then(
+      () => true,
+      () => false
+    ),
+    openness: () => {
+      const progress = animations[0].effect?.getComputedTiming().progress;
+      return progress == null ? to : openAt(progress);
+    },
+    cancel: () => animations.forEach((animation) => animation.cancel())
+  };
+}
+
 // src/lib/row-metrics.ts
 function createRowMetrics(count, estimate) {
   const safeCount = Math.max(0, Math.floor(count));
@@ -16105,6 +16194,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   onSearchChange,
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
+  ariaLabel,
   labelPosition,
   subLabel,
   labelWidth,
@@ -16807,6 +16897,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       style,
       children: [
         name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected.join(",") }),
+        !label && ariaLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${triggerId}-aria-label`, hidden: true, children: ariaLabel }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -16815,7 +16906,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             role: "combobox",
             tabIndex: effectiveDisabled ? -1 : 0,
             "aria-disabled": effectiveDisabled || void 0,
-            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : triggerId,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : ariaLabel ? `${triggerId}-aria-label ${triggerId}` : triggerId,
             "aria-haspopup": isTree ? "tree" : "listbox",
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
@@ -17423,6 +17514,7 @@ function CheckboxBox({
     }
   );
 }
+var NO_KEYS = /* @__PURE__ */ new Set();
 var DEFAULT_ROW_HEIGHT = 44;
 var DENSE_ROW_HEIGHT = 32;
 var SELECTABLE_COLUMN_WIDTH = 48;
@@ -17453,6 +17545,11 @@ var CONTEXT_MENU_ITEM_CLASS = cn(
   "data-[highlighted]:bg-[var(--sys-color-bg-accent)] data-[highlighted]:text-[color:var(--sys-color-fg-inverse)]"
 );
 var ROW_INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, label, [role="button"], [role="checkbox"], [contenteditable="true"]';
+function rowBlockHeight(tr) {
+  const next = tr.nextElementSibling;
+  const expansion = next instanceof HTMLElement && next.dataset.expansionRow != null ? next.offsetHeight : 0;
+  return tr.offsetHeight + expansion;
+}
 var colWidthFromDef = (c) => {
   if (c.autoWidth) return 0;
   if (c.width == null) return DEFAULT_COLUMN_WIDTH;
@@ -17465,6 +17562,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   rows = [],
   rowKey = "id",
   selectable = false,
+  rowSelectLabel,
+  selectAllLabel = "\uC804\uCCB4 \uC120\uD0DD",
   dragSelectable = false,
   contextMenuItems,
   onContextMenuItemClick,
@@ -17503,6 +17602,11 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   tableId,
   onRowClick,
   onRowDoubleClick,
+  renderExpansion,
+  expansionColumn,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
   className,
   style
 }, ref) {
@@ -17517,6 +17621,44 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     onDenseChange?.(next);
   };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
+  const expansionOn = renderExpansion != null;
+  const [innerExpandedKeys, setInnerExpandedKeys] = react.useState(
+    () => defaultExpandedKeys ?? []
+  );
+  const currentExpandedKeys = expandedKeys ?? innerExpandedKeys;
+  const expandedSet = react.useMemo(() => new Set(currentExpandedKeys), [currentExpandedKeys]);
+  const isRowExpanded = (row) => expansionOn && expandedSet.has(row[rowKey]);
+  const [closingKeys, setClosingKeys] = react.useState(NO_KEYS);
+  const [prevExpandedSet, setPrevExpandedSet] = react.useState(expandedSet);
+  if (prevExpandedSet !== expandedSet) {
+    setPrevExpandedSet(expandedSet);
+    let nextClosing = NO_KEYS;
+    if (expansionOn && motionAllowed()) {
+      const collapsed = [...prevExpandedSet].filter((key) => !expandedSet.has(key));
+      const opened = [...expandedSet].filter((key) => !prevExpandedSet.has(key));
+      if (collapsed.length > 0 && opened.length === 0) nextClosing = new Set(collapsed);
+    }
+    if (nextClosing !== closingKeys) setClosingKeys(nextClosing);
+  }
+  const shownExpansionSet = react.useMemo(
+    () => closingKeys.size === 0 ? expandedSet : /* @__PURE__ */ new Set([...expandedSet, ...closingKeys]),
+    [expandedSet, closingKeys]
+  );
+  const toggleExpanded = (row) => {
+    const key = row[rowKey];
+    const next = expandedSet.has(key) ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
+    if (expandedKeys === void 0) setInnerExpandedKeys(next);
+    onExpandedChange?.(next, row);
+  };
+  const expansionColIndex = !expansionOn ? -1 : expansionColumn == null ? 0 : visibleCols.findIndex((c) => c.name === expansionColumn);
+  if (expansionColIndex >= 0) {
+    const col = visibleCols[expansionColIndex];
+    if (col?.renderCell) {
+      throw new Error(
+        `[STable] \uD3BC\uCE68 \uCEEC\uB7FC(${col.name})\uC5D0\uB294 renderCell \uC744 \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. render \uB97C \uC4F0\uC138\uC694.`
+      );
+    }
+  }
   const headerGroupInfo = react.useMemo(() => {
     if (!headerGroups || headerGroups.length === 0) return null;
     const indexByName = new Map(visibleCols.map((col, index) => [col.name, index]));
@@ -17621,6 +17763,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   metricsRef.current ?? (metricsRef.current = createRowMetrics(0, effectiveRowHeight));
   const metrics = metricsRef.current;
   const measuredKeyRef = react.useRef("");
+  const measuredExpansionRef = react.useRef(shownExpansionSet);
   const pendingRowRef = react.useRef(null);
   const pinnedTopRef = react.useRef(-1);
   const lastEstimateRef = react.useRef(effectiveRowHeight);
@@ -17634,6 +17777,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   }
   const [scrolledLeft, setScrolledLeft] = react.useState(false);
   const [scrolledRight, setScrolledRight] = react.useState(false);
+  const [viewportWidth, setViewportWidth] = react.useState(0);
   const setRowCount = react.useCallback((count) => {
     const safe = Math.max(0, Math.floor(Number.isFinite(count) ? count : 0));
     lastReachEndRef.current = -1;
@@ -17659,6 +17803,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     setHeaderHeight(headerH);
     setScrolledLeft(el.scrollLeft > 0);
     setScrolledRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    setViewportWidth(el.clientWidth);
     if (virtualScroll) {
       const { start, end } = calcRange(el.scrollTop, el.clientHeight - headerH);
       setVsRange((prev) => prev.start === start && prev.end === end ? prev : { start, end });
@@ -17676,6 +17821,13 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   react.useEffect(() => {
     handleScroll();
   }, [handleScroll, rowCount, columnWidths, loading2, height]);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (!expansionOn || !el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => handleScroll());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [expansionOn, handleScroll]);
   const handleScrollRef = react.useRef(handleScroll);
   handleScrollRef.current = handleScroll;
   useIsomorphicLayoutEffect(() => {
@@ -17685,9 +17837,10 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     if (!el || m == null) return;
     const pending2 = pendingRowRef.current;
     const key = `${vsRange.start}:${vsRange.end}:${rowCount}`;
-    const alreadyMeasured = measuredKeyRef.current === key;
+    const alreadyMeasured = measuredKeyRef.current === key && measuredExpansionRef.current === shownExpansionSet;
     if (alreadyMeasured && pending2 == null) return;
     measuredKeyRef.current = key;
+    measuredExpansionRef.current = shownExpansionSet;
     const anchor = vsRange.start;
     const anchorBefore = offsetOf(m, anchor);
     let changed = false;
@@ -17695,7 +17848,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
       for (const tr of el.querySelectorAll("tr[data-row-index]")) {
         const index = Number(tr.dataset.rowIndex);
         if (!Number.isInteger(index)) continue;
-        const h = tr.offsetHeight;
+        const h = rowBlockHeight(tr);
         if (h <= 0) continue;
         if (setRowSize(m, index, h)) changed = true;
       }
@@ -17717,6 +17870,54 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     if (delta !== 0 && el.scrollTop > 0) el.scrollTop += delta;
     handleScrollRef.current();
   });
+  const expansionMotionRef = react.useRef(null);
+  const prevExpansionRef = react.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    if (!expansionOn) return;
+    const prev = prevExpansionRef.current;
+    prevExpansionRef.current = { rows, keys: expandedSet };
+    const running = expansionMotionRef.current;
+    if (running?.done) {
+      running.cancel();
+      expansionMotionRef.current = null;
+    }
+    if (!prev || prev.keys === expandedSet) return;
+    const added = new Set([...expandedSet].filter((key) => !prev.keys.has(key)));
+    const removed = new Set([...prev.keys].filter((key) => !expandedSet.has(key)));
+    if (added.size === 0 && removed.size === 0) return;
+    let from = added.size > 0 ? 0 : 1;
+    if (expansionMotionRef.current) {
+      const current = expansionMotionRef.current;
+      const reversing = current.to === 0 && sameKeys(added, current.keys) || current.to === 1 && sameKeys(removed, current.keys);
+      if (reversing) from = current.openness();
+      current.cancel();
+      expansionMotionRef.current = null;
+    }
+    const scrollEl = scrollRef.current;
+    const keys = added.size > 0 ? added : removed;
+    const keyNames = new Set([...keys].map(String));
+    const canAnimate = scrollEl != null && prev.rows === rows && motionAllowed() && (added.size === 0 || removed.size === 0);
+    const motion = canAnimate ? startRowMotion({
+      scrollEl,
+      isInBlock: (tr) => tr.dataset.expansionRow != null && keyNames.has(tr.dataset.expansionKey ?? ""),
+      blockKeys: keys,
+      from,
+      to: added.size > 0 ? 1 : 0
+    }) : null;
+    if (motion) {
+      expansionMotionRef.current = motion;
+      if (motion.to === 0) {
+        void motion.finished.then((completed) => {
+          if (!completed || expansionMotionRef.current !== motion) return;
+          motion.done = true;
+          setClosingKeys(NO_KEYS);
+        });
+      }
+    } else if (closingKeys.size > 0) {
+      setClosingKeys(NO_KEYS);
+    }
+  }, [expandedSet, closingKeys]);
+  react.useEffect(() => () => expansionMotionRef.current?.cancel(), []);
   react.useEffect(() => {
     if (!virtualScroll) return;
     cbRef.current.onVirtualUpdate?.({ from: vsRange.start, to: vsRange.end });
@@ -17773,7 +17974,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
         if (virtualScroll && m != null) return indexAtOffset(m, el.scrollTop);
         const top = el.scrollTop;
         for (const tr of el.querySelectorAll("tr[data-row-index]")) {
-          if (tr.offsetTop + tr.offsetHeight > top) return Number(tr.dataset.rowIndex) || 0;
+          if (tr.offsetTop + rowBlockHeight(tr) > top) return Number(tr.dataset.rowIndex) || 0;
         }
         return 0;
       },
@@ -18101,7 +18302,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                   {
                     value: headerCheck,
                     disabled: !hasSelectableRow,
-                    onValueChange: toggleAll
+                    onValueChange: toggleAll,
+                    ariaLabel: selectAllLabel
                   }
                 ) })
               }
@@ -18147,7 +18349,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                     {
                       value: headerCheck,
                       disabled: !hasSelectableRow,
-                      onValueChange: toggleAll
+                      onValueChange: toggleAll,
+                      ariaLabel: selectAllLabel
                     }
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -18347,112 +18550,168 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                                 const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
                                 const rowBg = "bg-white";
                                 const rowHover = hoverable && !rowLocked;
-                                return /* @__PURE__ */ jsxRuntime.jsxs(
-                                  "tr",
-                                  {
-                                    "data-row-index": rowIndex,
-                                    onClick: () => onRowClick?.(row),
-                                    onDoubleClick: onRowDoubleClick ? (event) => {
-                                      const target = event.target;
-                                      if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
-                                      onRowDoubleClick(row);
-                                    } : void 0,
-                                    onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
-                                    onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
-                                    onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
-                                    className: cn(
-                                      "group/table-row",
-                                      rowHover && "hover:bg-[var(--color-grey-05)]",
-                                      (onRowClick || onRowDoubleClick) && "cursor-pointer",
-                                      dragSelectOn && "select-none",
-                                      rowClassName?.(row)
-                                    ),
-                                    style: { height: virtualScroll ? effectiveRowHeight : rowH },
-                                    children: [
-                                      selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                                        "td",
-                                        {
-                                          className: cn(
-                                            // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                            "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                const expansionShown = expansionOn && shownExpansionSet.has(row[rowKey]);
+                                return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs(
+                                    "tr",
+                                    {
+                                      "data-row-index": rowIndex,
+                                      onClick: onRowClick ? (event) => {
+                                        const target = event.target;
+                                        if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                        onRowClick(row);
+                                      } : void 0,
+                                      onDoubleClick: onRowDoubleClick ? (event) => {
+                                        const target = event.target;
+                                        if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                        onRowDoubleClick(row);
+                                      } : void 0,
+                                      onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
+                                      onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
+                                      onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
+                                      className: cn(
+                                        "group/table-row",
+                                        rowHover && "hover:bg-[var(--color-grey-05)]",
+                                        (onRowClick || onRowDoubleClick) && "cursor-pointer",
+                                        dragSelectOn && "select-none",
+                                        rowClassName?.(row)
+                                      ),
+                                      style: { height: virtualScroll ? effectiveRowHeight : rowH },
+                                      children: [
+                                        selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                                          "td",
+                                          {
+                                            className: cn(
+                                              // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                              "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                              rowBg,
+                                              rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                              stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                            ),
+                                            style: {
+                                              width: SELECTABLE_COLUMN_WIDTH,
+                                              minWidth: SELECTABLE_COLUMN_WIDTH,
+                                              maxWidth: SELECTABLE_COLUMN_WIDTH,
+                                              // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
+                                              background: rowLocked ? LOCKED_BG : void 0
+                                            },
+                                            onClick: (e) => e.stopPropagation(),
+                                            onDoubleClick: (e) => e.stopPropagation(),
+                                            onClickCapture: (e) => {
+                                              shiftPressedRef.current = e.shiftKey;
+                                              if (e.shiftKey) window.getSelection()?.removeAllRanges();
+                                            },
+                                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                              SCheckbox,
+                                              {
+                                                value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
+                                                disabled: !canSelectRow(row),
+                                                onValueChange: () => toggleRow(row, rowOffset + ri),
+                                                ariaLabel: rowSelectLabel?.(row) ?? "\uD589 \uC120\uD0DD"
+                                              }
+                                            ) })
+                                          }
+                                        ),
+                                        visibleCols.map((col, i) => {
+                                          const tdClassName = cn(
+                                            // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
+                                            // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
+                                            "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                             rowBg,
                                             rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                            stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                          ),
-                                          style: {
-                                            width: SELECTABLE_COLUMN_WIDTH,
-                                            minWidth: SELECTABLE_COLUMN_WIDTH,
-                                            maxWidth: SELECTABLE_COLUMN_WIDTH,
-                                            // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
-                                            background: rowLocked ? LOCKED_BG : void 0
-                                          },
-                                          onClick: (e) => e.stopPropagation(),
-                                          onDoubleClick: (e) => e.stopPropagation(),
-                                          onClickCapture: (e) => {
-                                            shiftPressedRef.current = e.shiftKey;
-                                            if (e.shiftKey) window.getSelection()?.removeAllRanges();
-                                          },
-                                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                            SCheckbox,
+                                            typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
+                                          );
+                                          const tdPadX = cellPadXOf(col);
+                                          const dragEdges = dragSel ? [
+                                            dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
+                                            dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
+                                            i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
+                                            i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
+                                          ].filter(Boolean) : [];
+                                          const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
+                                          const tdStyle = {
+                                            paddingLeft: tdPadX,
+                                            paddingRight: tdPadX,
+                                            paddingTop: cellPadY,
+                                            paddingBottom: cellPadY,
+                                            textAlign: col.align ?? "left",
+                                            // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
+                                            background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
+                                            // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
+                                            // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
+                                            color: rowLocked ? LOCKED_CONTENT : void 0,
+                                            boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
+                                            ...cellStyle(i)
+                                          };
+                                          if (col.renderCell) {
+                                            const cell = col.renderCell({
+                                              row,
+                                              value: cellValue(col, row),
+                                              column: col,
+                                              colIndex: i,
+                                              rowIndex: ri,
+                                              isSelected: isSel,
+                                              className: tdClassName,
+                                              style: tdStyle
+                                            });
+                                            if (cell == null || cell === false) return null;
+                                            return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                          }
+                                          const content = col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row);
+                                          if (i === expansionColIndex) {
+                                            return /* @__PURE__ */ jsxRuntime.jsx(
+                                              "td",
+                                              {
+                                                className: cn(tdClassName, "cursor-pointer"),
+                                                style: tdStyle,
+                                                onClick: (event) => {
+                                                  if (isOwnControl(event.target, event.currentTarget)) return;
+                                                  event.stopPropagation();
+                                                  toggleExpanded(row);
+                                                },
+                                                onDoubleClick: (event) => event.stopPropagation(),
+                                                children: /* @__PURE__ */ jsxRuntime.jsx(ExpansionToggleCell, { expanded: isRowExpanded(row), children: content })
+                                              },
+                                              col.name
+                                            );
+                                          }
+                                          return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: content }, col.name);
+                                        })
+                                      ]
+                                    }
+                                  ),
+                                  expansionShown && // 상세 영역 — 행이 아니므로 data-row-index 를 달지 않는다 (행 수·선택·실측 대상 밖)
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "tr",
+                                    {
+                                      "data-expansion-row": "",
+                                      "data-expansion-key": String(row[rowKey]),
+                                      className: expandedSet.has(row[rowKey]) ? void 0 : "pointer-events-none",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        "td",
+                                        {
+                                          colSpan: totalColSpan,
+                                          className: "whitespace-normal border-b border-solid border-[color:var(--cmp-table-border-color)] bg-white p-0 text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            "div",
                                             {
-                                              value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
-                                              disabled: !canSelectRow(row),
-                                              onValueChange: () => toggleRow(row, rowOffset + ri)
+                                              className: "sticky left-0 box-border min-w-0",
+                                              style: {
+                                                // 가로 스크롤이 있어도 보이는 폭에 머문다. 재기 전(0)에는 표 폭을 따른다
+                                                width: viewportWidth > 0 ? viewportWidth : void 0,
+                                                paddingLeft: "var(--cmp-table-body-paddingX-wide)",
+                                                paddingRight: "var(--cmp-table-body-paddingX-wide)",
+                                                paddingTop: cellPadY,
+                                                paddingBottom: cellPadY
+                                              },
+                                              children: renderExpansion?.(row)
                                             }
-                                          ) })
-                                        }
-                                      ),
-                                      visibleCols.map((col, i) => {
-                                        const tdClassName = cn(
-                                          // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
-                                          // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
-                                          "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                          rowBg,
-                                          rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                          typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                        );
-                                        const tdPadX = cellPadXOf(col);
-                                        const dragEdges = dragSel ? [
-                                          dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
-                                          dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
-                                          i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
-                                          i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
-                                        ].filter(Boolean) : [];
-                                        const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
-                                        const tdStyle = {
-                                          paddingLeft: tdPadX,
-                                          paddingRight: tdPadX,
-                                          paddingTop: cellPadY,
-                                          paddingBottom: cellPadY,
-                                          textAlign: col.align ?? "left",
-                                          // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
-                                          background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
-                                          // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
-                                          // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
-                                          color: rowLocked ? LOCKED_CONTENT : void 0,
-                                          boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
-                                          ...cellStyle(i)
-                                        };
-                                        if (col.renderCell) {
-                                          const cell = col.renderCell({
-                                            row,
-                                            value: cellValue(col, row),
-                                            column: col,
-                                            colIndex: i,
-                                            rowIndex: ri,
-                                            isSelected: isSel,
-                                            className: tdClassName,
-                                            style: tdStyle
-                                          });
-                                          if (cell == null || cell === false) return null;
-                                          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                          )
                                         }
-                                        return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
-                                      })
-                                    ]
-                                  },
-                                  row[rowKey] ?? ri
-                                );
+                                      )
+                                    }
+                                  )
+                                ] }, row[rowKey] ?? ri);
                               }),
                               virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
                             ] })
@@ -18578,6 +18837,26 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   );
 });
 var STable2 = STableImpl;
+function isOwnControl(target, cell) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-expansion-toggle]")) return false;
+  const control = target.closest(ROW_INTERACTIVE_SELECTOR);
+  return control != null && cell.contains(control);
+}
+function ExpansionToggleCell({ expanded, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-(--cmp-tree-item-contentGap)", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-expansion-toggle": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      SGhostButton,
+      {
+        icon: expanded ? "caretDown" : "caretRight",
+        size: "xxs",
+        ariaLabel: expanded ? "collapse row" : "expand row",
+        ariaExpanded: expanded
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children })
+  ] });
+}
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
@@ -18646,9 +18925,7 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, to
     }
   );
 });
-var NO_KEYS = /* @__PURE__ */ new Set();
-var EXPAND_MOTION = { duration: 220, easing: "ease-out" };
-var COLLAPSE_MOTION = { duration: 140, easing: "ease-in" };
+var NO_KEYS2 = /* @__PURE__ */ new Set();
 function STreeTable({
   rows = [],
   columns = [],
@@ -18701,11 +18978,11 @@ function STreeTable({
     [rows, expandedSet, rowKey, childrenKey]
   );
   const tableRef = react.useRef(null);
-  const [closingKeys, setClosingKeys] = react.useState(NO_KEYS);
+  const [closingKeys, setClosingKeys] = react.useState(NO_KEYS2);
   const [prevExpand, setPrevExpand] = react.useState({ rows, expandedSet });
   if (prevExpand.rows !== rows || prevExpand.expandedSet !== expandedSet) {
     setPrevExpand({ rows, expandedSet });
-    let nextClosing = NO_KEYS;
+    let nextClosing = NO_KEYS2;
     if (prevExpand.rows === rows && motionAllowed()) {
       const collapsed = [...prevExpand.expandedSet].filter((key) => !expandedSet.has(key));
       const expanded = [...expandedSet].filter((key) => !prevExpand.expandedSet.has(key));
@@ -18754,11 +19031,15 @@ function STreeTable({
       motionRef.current = null;
     }
     const scrollEl = tableRef.current?.getScrollElement();
+    const rowKeys = renderedRows.map(keyOf);
     const keys = added.size > 0 ? added : removed;
     const canAnimate = scrollEl != null && motionAllowed() && (added.size === 0 || removed.size === 0);
     const motion = canAnimate ? startRowMotion({
       scrollEl,
-      rowKeys: renderedRows.map(keyOf),
+      isInBlock: (tr) => {
+        const key = rowKeys[Number(tr.dataset.rowIndex)];
+        return key !== void 0 && keys.has(key);
+      },
       blockKeys: keys,
       from,
       to: added.size > 0 ? 1 : 0
@@ -18769,11 +19050,11 @@ function STreeTable({
         void motion.finished.then((completed) => {
           if (!completed || motionRef.current !== motion) return;
           motion.done = true;
-          setClosingKeys(NO_KEYS);
+          setClosingKeys(NO_KEYS2);
         });
       }
     } else if (closingKeys.size > 0) {
-      setClosingKeys(NO_KEYS);
+      setClosingKeys(NO_KEYS2);
     }
   }, [renderedRows]);
   react.useEffect(() => () => motionRef.current?.cancel(), []);
@@ -18846,7 +19127,7 @@ function STreeTable({
               className: cn(className, hasChildren && "cursor-pointer"),
               style,
               onClick: hasChildren ? (event) => {
-                if (isOwnControl(event.target, event.currentTarget)) return;
+                if (isOwnControl2(event.target, event.currentTarget)) return;
                 event.stopPropagation();
                 toggleExpanded(row);
               } : void 0,
@@ -18901,96 +19182,8 @@ function flattenRows(nodes, isOpen, childrenOf) {
   walk(nodes);
   return out;
 }
-function sameKeys(a, b) {
-  return a.size === b.size && [...a].every((key) => b.has(key));
-}
-function motionAllowed() {
-  if (typeof window === "undefined" || typeof Element.prototype.animate !== "function")
-    return false;
-  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-}
-function startRowMotion({
-  scrollEl,
-  rowKeys,
-  blockKeys,
-  from,
-  to
-}) {
-  const spec = to === 1 ? EXPAND_MOTION : COLLAPSE_MOTION;
-  const duration = spec.duration * Math.abs(to - from);
-  if (duration < 1) return null;
-  const trs = [...scrollEl.querySelectorAll("tr[data-row-index]")].map((tr) => {
-    const key = rowKeys[Number(tr.dataset.rowIndex)];
-    return {
-      tr,
-      inBlock: key !== void 0 && blockKeys.has(key),
-      height: tr.getBoundingClientRect().height
-    };
-  });
-  const viewBottom = scrollEl.scrollTop + scrollEl.clientHeight;
-  const openAt = (offset) => from + (to - from) * offset;
-  const translate = (shift2, s) => `translateY(${-shift2 * (1 - s)}px)`;
-  const timing = {
-    duration,
-    easing: spec.easing,
-    // 접힘은 남겨 둔 행이 빠질 때까지 끝 위치를 붙잡는다 — 놓으면 그 사이 한 프레임 제자리로 튄다
-    fill: to === 0 ? "forwards" : "none"
-  };
-  const animations = [];
-  let shift = 0;
-  let blockHeight = 0;
-  let y = 0;
-  trs.forEach(({ tr, inBlock, height }, i) => {
-    if (inBlock && !trs[i - 1]?.inBlock) {
-      blockHeight = 0;
-      for (let j = i; j < trs.length && trs[j].inBlock; j++) blockHeight += trs[j].height;
-      shift += blockHeight;
-      y = 0;
-    }
-    if (shift === 0 || tr.offsetTop - shift > viewBottom) return;
-    if (!inBlock) {
-      animations.push(
-        tr.animate(
-          [{ transform: translate(shift, from) }, { transform: translate(shift, to) }],
-          timing
-        )
-      );
-      return;
-    }
-    const rowY = y;
-    const clipAt = (s) => Math.min(height, Math.max(0, blockHeight * (1 - s) - rowY));
-    const bends = [1 - rowY / blockHeight, 1 - (rowY + height) / blockHeight].map((s) => (s - from) / (to - from)).filter((offset) => offset > 0 && offset < 1);
-    const offsets = [0, ...bends, 1].sort((a, b) => a - b);
-    animations.push(
-      tr.animate(
-        offsets.map((offset) => ({
-          offset,
-          transform: translate(shift, openAt(offset)),
-          clipPath: `inset(${clipAt(openAt(offset))}px 0 0 0)`
-        })),
-        timing
-      )
-    );
-    y += height;
-  });
-  if (animations.length === 0) return null;
-  return {
-    keys: blockKeys,
-    to,
-    done: false,
-    finished: Promise.all(animations.map((animation) => animation.finished)).then(
-      () => true,
-      () => false
-    ),
-    openness: () => {
-      const progress = animations[0].effect?.getComputedTiming().progress;
-      return progress == null ? to : openAt(progress);
-    },
-    cancel: () => animations.forEach((animation) => animation.cancel())
-  };
-}
 var OWN_CONTROL_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [role="checkbox"], [contenteditable="true"]';
-function isOwnControl(target, cell) {
+function isOwnControl2(target, cell) {
   if (!(target instanceof Element)) return false;
   if (target.closest("[data-tree-toggle]")) return false;
   const control = target.closest(OWN_CONTROL_SELECTOR);