sellmate-design-system-react 9.0.0-beta.94 → 9.0.0-beta.97

package/dist/index.cjs

@@ -7731,6 +7731,13 @@ var TREE_LABEL_TYPOGRAPHY = {
     rowHeight: "h-[32px]"
   }
 };
+var TREE_BRANCH_MOTION = { duration: 200, easing: "cubic-bezier(0, 0, 0.2, 1)" };
+function canAnimateTreeBranch() {
+  if (typeof window === "undefined" || typeof HTMLElement.prototype.animate !== "function") {
+    return false;
+  }
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
 var TREE_ROW_CLASS = "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)";
 var TREE_ROW_BORDER_CLASS = "border-b-(length:--cmp-tree-item-border-width-default) border-(--cmp-tree-item-border-default)";
 var TREE_ROW_ACTIVE_CLASS = "bg-(--cmp-tree-item-bg-hover)";
@@ -15679,6 +15686,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));
@@ -16098,6 +16192,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   onSearchChange,
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
+  ariaLabel,
   labelPosition,
   subLabel,
   labelWidth,
@@ -16127,6 +16222,21 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
   const [expanded, setExpanded] = react.useState(() => /* @__PURE__ */ new Set());
   const [searchCollapsed, setSearchCollapsed] = react.useState(NO_SEARCH_COLLAPSED);
+  const [treeMotion, setTreeMotion] = react.useState(null);
+  const treeMotionTimerRef = react.useRef(null);
+  const pendingCollapseRef = react.useRef(null);
+  const cancelTreeMotion = () => {
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    pendingCollapseRef.current = null;
+    setTreeMotion(null);
+  };
+  react.useEffect(
+    () => () => {
+      if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    },
+    []
+  );
   const baseId = react.useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
@@ -16194,6 +16304,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
+    cancelTreeMotion();
     if (next) {
       dismissedByPointerRef.current = false;
       alignSelectedTopRef.current = true;
@@ -16264,6 +16375,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     (groupValue) => treeSearching ? !searchCollapsed.has(groupValue) : expanded.has(groupValue),
     [expanded, searchCollapsed, treeSearching]
   );
+  const isGroupShownExpanded = react.useCallback(
+    (groupValue) => isGroupExpanded(groupValue) && !(treeMotion != null && !treeMotion.opening && treeMotion.group === groupValue),
+    [isGroupExpanded, treeMotion]
+  );
   const treeRows = react.useMemo(
     () => isTree ? visibleTreeRows(searched, (row) => isGroupExpanded(row.value)) : null,
     [isGroupExpanded, isTree, searched]
@@ -16553,6 +16668,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const handleSearchChange = (next) => {
     setSearch(next);
     setSearchCollapsed(NO_SEARCH_COLLAPSED);
+    cancelTreeMotion();
   };
   const handleToggleExpand = (groupValue) => {
     rangeAnchorRef.current = null;
@@ -16562,8 +16678,41 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       else next.add(groupValue);
       return next;
     };
-    if (treeSearching) setSearchCollapsed(toggle);
-    else setExpanded(toggle);
+    const applyToggle = treeSearching ? () => setSearchCollapsed(toggle) : () => setExpanded(toggle);
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    const pendingCollapse = pendingCollapseRef.current;
+    pendingCollapseRef.current = null;
+    if (treeMotion?.group === groupValue && !treeMotion.opening) {
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+      return;
+    }
+    pendingCollapse?.();
+    if (!canAnimateTreeBranch()) {
+      setTreeMotion(null);
+      applyToggle();
+      return;
+    }
+    if (isGroupExpanded(groupValue)) {
+      setTreeMotion({ group: groupValue, opening: false });
+      pendingCollapseRef.current = applyToggle;
+      treeMotionTimerRef.current = setTimeout(() => {
+        pendingCollapseRef.current = null;
+        setTreeMotion(null);
+        applyToggle();
+      }, TREE_BRANCH_MOTION.duration);
+    } else {
+      applyToggle();
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+    }
   };
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
@@ -16673,7 +16822,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       const row = rowIndex != null ? filtered[rowIndex] : void 0;
       if (rowIndex == null || row == null) return;
       event.preventDefault();
-      const rowExpanded = row.isGroup && isGroupExpanded(row.value);
+      const rowExpanded = row.isGroup && isGroupShownExpanded(row.value);
       if (event.key === "ArrowRight") {
         if (!row.isGroup) return;
         if (!rowExpanded) {
@@ -16746,6 +16895,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",
           {
@@ -16754,7 +16904,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,
@@ -16918,8 +17068,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       setSize: isDepth || isTree ? void 0 : rowCount,
                       multi,
                       tree: isTree,
-                      isExpanded: isGroupExpanded,
+                      isExpanded: isGroupShownExpanded,
                       onToggleExpand: handleToggleExpand,
+                      treeMotion,
                       treeLines,
                       selected,
                       groupLeafValues,
@@ -16976,6 +17127,7 @@ function ItemList({
   tree,
   isExpanded,
   onToggleExpand,
+  treeMotion,
   treeLines,
   selected,
   groupLeafValues,
@@ -16996,295 +17148,322 @@ function ItemList({
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
   const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
-    showSelectAll && (tree ? (
-      // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TreeAllRow,
-        {
-          "data-select-all-row": true,
-          id: focusedValue === "__select_all__" ? activeOptionId : void 0,
-          "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
-          "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-          tabIndex: -1,
-          label: selectAllLabel,
-          selected: selectAllSelected,
-          active: focusedValue === "__select_all__",
-          className: "select-none",
-          onMouseEnter: () => onHoverValue("__select_all__"),
-          onMouseLeave: () => onHoverValue(null),
-          onToggle: onSelectAll
-        }
-      )
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+  const wrapTreeMotion = (nodes) => {
+    if (!tree || treeMotion == null) return nodes;
+    const start = items.findIndex((o) => o.isGroup && o.value === treeMotion.group);
+    if (start < 0) return nodes;
+    let end = start + 1;
+    while (end < items.length && items[end].depth > items[start].depth) end++;
+    if (end === start + 1) return nodes;
+    return [
+      ...nodes.slice(0, start + 1),
+      /* @__PURE__ */ jsxRuntime.jsx(TreeRowsMotion, { opening: treeMotion.opening, children: nodes.slice(start + 1, end) }, `__motion_${treeMotion.group}__`),
+      ...nodes.slice(end)
+    ];
+  };
+  const selectAllRow = showSelectAll && (tree ? (
+    // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TreeAllRow,
       {
-        type: "button",
         "data-select-all-row": true,
         id: focusedValue === "__select_all__" ? activeOptionId : void 0,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-        className: cn(
-          itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
-        ),
-        style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: LIST_BOX_ITEM_PADDING_LEFT[1] },
+        tabIndex: -1,
+        label: selectAllLabel,
+        selected: selectAllSelected,
+        active: focusedValue === "__select_all__",
+        className: "select-none",
         onMouseEnter: () => onHoverValue("__select_all__"),
         onMouseLeave: () => onHoverValue(null),
-        onClick: onSelectAll,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
-        ]
+        onToggle: onSelectAll
       }
-    )),
-    topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
-    items.map((o, windowIndex) => {
-      const idx = windowIndex + indexOffset;
-      const padLeft = LIST_BOX_ITEM_PADDING_LEFT[o.depth === 1 ? 1 : o.depth === 2 ? 2 : 3];
-      const rowKey = `${o.value}-${idx}`;
-      if (tree) {
-        const togglesLeaves = multi && o.isGroup;
-        const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
-        const total = leafValues.length;
-        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-        const isSelected2 = selectedSet.has(o.value);
-        const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
-        const rowDisabled = o.disabled || togglesLeaves && total === 0;
-        const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
-        const focused = focusedValue === focusKey;
-        const expanded = o.isGroup && isExpanded(o.value);
-        const line = treeLines[idx];
-        const toggle = () => {
-          if (rowDisabled) return;
-          if (togglesLeaves) onToggleGroup(leafValues);
-          else onSelect(o.value, idx, checkboxShiftRef.current);
-        };
-        return (
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              tabIndex: -1,
-              "data-select-row": true,
-              "data-index": idx,
-              id: focused ? activeOptionId : void 0,
-              role: "treeitem",
-              "aria-level": o.depth,
-              "aria-posinset": line?.posInSet,
-              "aria-setsize": line?.setSize,
-              "aria-expanded": o.isGroup ? expanded : void 0,
-              "aria-selected": checkState === true,
-              "aria-disabled": rowDisabled || void 0,
-              "data-select-focused": focused ? "true" : void 0,
-              "data-select-active": focused ? "true" : void 0,
-              className: cn(
-                TREE_ROW_CLASS,
-                TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
-                TREE_ROW_BORDER_CLASS,
-                "select-none",
-                o.isGroup && "cursor-pointer",
-                focused && TREE_ROW_ACTIVE_CLASS
-              ),
-              onMouseEnter: () => onHoverValue(focusKey),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: (event) => {
-                if (isRowControlClick(event)) return;
-                if (isRowSelectClick(event)) {
-                  if (rowDisabled) return;
-                  if (togglesLeaves) onToggleGroup(leafValues);
-                  else onSelect(o.value, idx, event.shiftKey);
-                  return;
-                }
-                if (o.isGroup) onToggleExpand(o.value);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TreeConnector,
-                  {
-                    guideline: true,
-                    size: "sm",
-                    depth: o.depth,
-                    hasChildren: o.isGroup,
-                    isLast: line?.isLast ?? true,
-                    ancestorLast: line?.ancestorLast ?? []
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
-                  o.isGroup ? (
-                    // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
-                    /* @__PURE__ */ jsxRuntime.jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(TreeCaretSpacer, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TreeSelectZone,
-                    {
-                      selectable: true,
-                      disabled: rowDisabled,
-                      control: multi && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "data-tree-control": true,
-                          className: "flex shrink-0",
-                          onPointerDownCapture: (event) => {
-                            checkboxShiftRef.current = event.shiftKey;
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            SCheckbox,
-                            {
-                              value: checkState,
-                              disabled: rowDisabled,
-                              onValueChange: toggle
-                            }
-                          )
-                        }
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        OptionLabel,
-                        {
-                          label: o.label,
-                          className: treeLabelClass("sm", {
-                            // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
-                            emphasized: checkState !== false,
-                            disabled: rowDisabled,
-                            selectable: true
-                          })
-                        }
-                      )
-                    }
-                  )
-                ] })
-              ]
+    )
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-select-all-row": true,
+      id: focusedValue === "__select_all__" ? activeOptionId : void 0,
+      "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
+      "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
+      className: cn(
+        itemBase,
+        focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+      ),
+      style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: LIST_BOX_ITEM_PADDING_LEFT[1] },
+      onMouseEnter: () => onHoverValue("__select_all__"),
+      onMouseLeave: () => onHoverValue(null),
+      onClick: onSelectAll,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
+      ]
+    }
+  ));
+  const rowNodes = items.map((o, windowIndex) => {
+    const idx = windowIndex + indexOffset;
+    const padLeft = LIST_BOX_ITEM_PADDING_LEFT[o.depth === 1 ? 1 : o.depth === 2 ? 2 : 3];
+    const rowKey = `${o.value}-${idx}`;
+    if (tree) {
+      const togglesLeaves = multi && o.isGroup;
+      const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
+      const total = leafValues.length;
+      const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+      const isSelected2 = selectedSet.has(o.value);
+      const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
+      const rowDisabled = o.disabled || togglesLeaves && total === 0;
+      const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
+      const focused = focusedValue === focusKey;
+      const expanded = o.isGroup && isExpanded(o.value);
+      const line = treeLines[idx];
+      const toggle = () => {
+        if (rowDisabled) return;
+        if (togglesLeaves) onToggleGroup(leafValues);
+        else onSelect(o.value, idx, checkboxShiftRef.current);
+      };
+      return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            tabIndex: -1,
+            "data-select-row": true,
+            "data-index": idx,
+            id: focused ? activeOptionId : void 0,
+            role: "treeitem",
+            "aria-level": o.depth,
+            "aria-posinset": line?.posInSet,
+            "aria-setsize": line?.setSize,
+            "aria-expanded": o.isGroup ? expanded : void 0,
+            "aria-selected": checkState === true,
+            "aria-disabled": rowDisabled || void 0,
+            "data-select-focused": focused ? "true" : void 0,
+            "data-select-active": focused ? "true" : void 0,
+            className: cn(
+              TREE_ROW_CLASS,
+              TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
+              TREE_ROW_BORDER_CLASS,
+              "select-none",
+              o.isGroup && "cursor-pointer",
+              focused && TREE_ROW_ACTIVE_CLASS
+            ),
+            onMouseEnter: () => onHoverValue(focusKey),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: (event) => {
+              if (isRowControlClick(event)) return;
+              if (isRowSelectClick(event)) {
+                if (rowDisabled) return;
+                if (togglesLeaves) onToggleGroup(leafValues);
+                else onSelect(o.value, idx, event.shiftKey);
+                return;
+              }
+              if (o.isGroup) onToggleExpand(o.value);
             },
-            rowKey
-          )
-        );
-      }
-      if (o.isGroup) {
-        const isDepth1 = o.depth === 1;
-        const isFirstRow = idx === 0 && !showSelectAll;
-        const groupTone = cn(
-          isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
-          isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
-        );
-        if (multi) {
-          const leafValues = groupLeafValues.get(idx) ?? [];
-          const total = leafValues.length;
-          const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-          const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
-          const groupDisabled = o.disabled || total === 0;
-          const groupFocused = focusedValue === `__group_${idx}__`;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              "data-select-row": true,
-              "data-index": idx,
-              id: groupFocused ? activeOptionId : void 0,
-              role: "option",
-              "aria-selected": groupState === true,
-              disabled: groupDisabled,
-              "data-select-focused": groupFocused ? "true" : void 0,
-              "data-select-active": groupFocused ? "true" : void 0,
-              className: cn(
-                "flex w-full select-none items-center gap-(--cmp-listBoxItem-gap) border-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) text-left typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
-                groupTone,
-                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
-                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
-                // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TreeConnector,
+                {
+                  guideline: true,
+                  size: "sm",
+                  depth: o.depth,
+                  hasChildren: o.isGroup,
+                  isLast: line?.isLast ?? true,
+                  ancestorLast: line?.ancestorLast ?? []
+                }
               ),
-              style: { paddingLeft: padLeft },
-              onMouseEnter: () => onHoverValue(`__group_${idx}__`),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: () => onToggleGroup(leafValues),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
-                /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
-                total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
+                o.isGroup ? (
+                  // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
+                  /* @__PURE__ */ jsxRuntime.jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
+                ) : /* @__PURE__ */ jsxRuntime.jsx(TreeCaretSpacer, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TreeSelectZone,
                   {
-                    className: cn(
-                      "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                    selectable: true,
+                    disabled: rowDisabled,
+                    control: multi && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-tree-control": true,
+                        className: "flex shrink-0",
+                        onPointerDownCapture: (event) => {
+                          checkboxShiftRef.current = event.shiftKey;
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkState, disabled: rowDisabled, onValueChange: toggle })
+                      }
                     ),
-                    children: [
-                      "(",
-                      selectedCount,
-                      "/",
-                      total,
-                      ")"
-                    ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      OptionLabel,
+                      {
+                        label: o.label,
+                        className: treeLabelClass("sm", {
+                          // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
+                          emphasized: checkState !== false,
+                          disabled: rowDisabled,
+                          selectable: true
+                        })
+                      }
+                    )
                   }
                 )
-              ]
-            },
-            rowKey
-          );
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+              ] })
+            ]
+          },
+          rowKey
+        )
+      );
+    }
+    if (o.isGroup) {
+      const isDepth1 = o.depth === 1;
+      const isFirstRow = idx === 0 && !showSelectAll;
+      const groupTone = cn(
+        isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
+        isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
+      );
+      if (multi) {
+        const leafValues = groupLeafValues.get(idx) ?? [];
+        const total = leafValues.length;
+        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+        const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
+        const groupDisabled = o.disabled || total === 0;
+        const groupFocused = focusedValue === `__group_${idx}__`;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
+            type: "button",
             "data-select-row": true,
             "data-index": idx,
+            id: groupFocused ? activeOptionId : void 0,
+            role: "option",
+            "aria-selected": groupState === true,
+            disabled: groupDisabled,
+            "data-select-focused": groupFocused ? "true" : void 0,
+            "data-select-active": groupFocused ? "true" : void 0,
             className: cn(
-              "select-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
+              "flex w-full select-none items-center gap-(--cmp-listBoxItem-gap) border-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) text-left typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
-              // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
-              // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
+              groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+              groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
+              // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
+              groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
             ),
             style: { paddingLeft: padLeft },
-            children: o.label
+            onMouseEnter: () => onHoverValue(`__group_${idx}__`),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: () => onToggleGroup(leafValues),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+              /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
+              total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 font-medium",
+                    groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                  ),
+                  children: [
+                    "(",
+                    selectedCount,
+                    "/",
+                    total,
+                    ")"
+                  ]
+                }
+              )
+            ]
           },
           rowKey
         );
       }
-      const isSelected = selected.includes(o.value);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          type: "button",
           "data-select-row": true,
           "data-index": idx,
-          id: focusedValue === o.value ? activeOptionId : void 0,
-          disabled: o.disabled,
-          role: "option",
-          "aria-selected": isSelected,
-          "aria-setsize": setSize,
-          "aria-posinset": setSize != null ? idx + 1 : void 0,
-          "data-select-focused": focusedValue === o.value ? "true" : void 0,
-          "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
-            itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
-            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
-            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
-            !o.disabled && activeClass
+            "select-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
+            groupTone,
+            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
           ),
-          style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: padLeft },
-          onMouseEnter: () => onHoverValue(o.value),
-          onMouseLeave: () => onHoverValue(null),
-          onClick: (event) => onSelect(o.value, idx, event.shiftKey),
-          children: [
-            multi && /* @__PURE__ */ jsxRuntime.jsx(
-              CheckboxBox,
-              {
-                state: isSelected,
-                disabled: o.disabled,
-                focused: focusedValue === o.value
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
-          ]
+          style: { paddingLeft: padLeft },
+          children: o.label
         },
         rowKey
       );
-    }),
+    }
+    const isSelected = selected.includes(o.value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-select-row": true,
+        "data-index": idx,
+        id: focusedValue === o.value ? activeOptionId : void 0,
+        disabled: o.disabled,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-setsize": setSize,
+        "aria-posinset": setSize != null ? idx + 1 : void 0,
+        "data-select-focused": focusedValue === o.value ? "true" : void 0,
+        "data-select-active": focusedValue === o.value ? "true" : void 0,
+        className: cn(
+          itemBase,
+          isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+          focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
+          // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+          // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+          !o.disabled && activeClass
+        ),
+        style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: padLeft },
+        onMouseEnter: () => onHoverValue(o.value),
+        onMouseLeave: () => onHoverValue(null),
+        onClick: (event) => onSelect(o.value, idx, event.shiftKey),
+        children: [
+          multi && /* @__PURE__ */ jsxRuntime.jsx(
+            CheckboxBox,
+            {
+              state: isSelected,
+              disabled: o.disabled,
+              focused: focusedValue === o.value
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
+        ]
+      },
+      rowKey
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
+    selectAllRow,
+    topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
+    wrapTreeMotion(rowNodes),
     bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function TreeRowsMotion({ opening, children }) {
+  const ref = react.useRef(null);
+  const animationRef = react.useRef(null);
+  const mountedRef = react.useRef(false);
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    if (el == null || typeof el.animate !== "function") return;
+    const from = !mountedRef.current && opening ? 0 : el.getBoundingClientRect().height;
+    mountedRef.current = true;
+    animationRef.current?.cancel();
+    animationRef.current = el.animate(
+      [{ height: `${from}px` }, { height: opening ? `${el.scrollHeight}px` : "0px" }],
+      // 접힌 뒤 줄이 목록에서 빠질 때까지 0 으로 붙잡아 둔다. 편 뒤에는 제 높이(auto)로 돌아간다
+      { ...TREE_BRANCH_MOTION, fill: opening ? "none" : "forwards" }
+    );
+  }, [opening]);
+  react.useEffect(() => () => animationRef.current?.cancel(), []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "overflow-hidden", "aria-hidden": opening ? void 0 : true, children });
+}
 function OptionLabel({ label, className }) {
   return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: label });
 }
@@ -17333,6 +17512,7 @@ function CheckboxBox({
     }
   );
 }
+var NO_KEYS = /* @__PURE__ */ new Set();
 var DEFAULT_ROW_HEIGHT = 44;
 var DENSE_ROW_HEIGHT = 32;
 var SELECTABLE_COLUMN_WIDTH = 48;
@@ -17363,6 +17543,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;
@@ -17375,6 +17560,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   rows = [],
   rowKey = "id",
   selectable = false,
+  rowSelectLabel,
+  selectAllLabel = "\uC804\uCCB4 \uC120\uD0DD",
   dragSelectable = false,
   contextMenuItems,
   onContextMenuItemClick,
@@ -17413,6 +17600,11 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   tableId,
   onRowClick,
   onRowDoubleClick,
+  renderExpansion,
+  expansionColumn,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
   className,
   style
 }, ref) {
@@ -17427,6 +17619,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]));
@@ -17531,6 +17761,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);
@@ -17544,6 +17775,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;
@@ -17569,6 +17801,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 });
@@ -17586,6 +17819,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(() => {
@@ -17595,9 +17835,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;
@@ -17605,7 +17846,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;
       }
@@ -17627,6 +17868,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 });
@@ -17683,7 +17972,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;
       },
@@ -18011,7 +18300,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                   {
                     value: headerCheck,
                     disabled: !hasSelectableRow,
-                    onValueChange: toggleAll
+                    onValueChange: toggleAll,
+                    ariaLabel: selectAllLabel
                   }
                 ) })
               }
@@ -18057,7 +18347,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                     {
                       value: headerCheck,
                       disabled: !hasSelectableRow,
-                      onValueChange: toggleAll
+                      onValueChange: toggleAll,
+                      ariaLabel: selectAllLabel
                     }
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -18257,112 +18548,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" }) })
                             ] })
@@ -18488,6 +18835,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;
@@ -18556,9 +18923,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 = [],
@@ -18611,11 +18976,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));
@@ -18664,11 +19029,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
@@ -18679,11 +19048,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(), []);
@@ -18756,7 +19125,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,
@@ -18811,96 +19180,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);