@vuer-ai/vuer-uikit 0.0.73 → 0.0.74

package/dist/{chunk-D6326INV.cjs → chunk-FABHCVYU.cjs}

@@ -241,10 +241,68 @@ var SyncDragSlaveX = ({
     }
   );
 };
+var SyncDragY = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}) => {
+  const ref = chunkG4FJGNY5_cjs.useSyncDrag({ ref: extRef, axis: "vertical" });
+  const [isDragging, setIsDragging] = react.useState(false);
+  const dragStartY = react.useRef(0);
+  const scrollStartTop = react.useRef(0);
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const handleMouseDown = (e) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      scrollStartTop.current = element.scrollTop;
+      e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+      if (!isDragging || !element) return;
+      const deltaY = e.clientY - dragStartY.current;
+      element.scrollTop = scrollStartTop.current - deltaY * 2;
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    element.addEventListener("mousedown", handleMouseDown);
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      className: chunkDWD754BX_cjs.cn(
+        "cursor-grab overflow-x-hidden overflow-y-auto",
+        isDragging && "cursor-grabbing",
+        className
+      ),
+      style: { userSelect: isDragging ? "none" : "auto", ...props.style },
+      ...props,
+      children
+    }
+  );
+};
 
 exports.SyncDrag = SyncDrag;
 exports.SyncDragSlave = SyncDragSlave;
 exports.SyncDragSlaveX = SyncDragSlaveX;
 exports.SyncDragX = SyncDragX;
+exports.SyncDragY = SyncDragY;
 exports.SyncScroll = SyncScroll;
 exports.SyncScrollSlave = SyncScrollSlave;

package/dist/chunk-FCDHXWZT.mjs

@@ -0,0 +1,247 @@
+import { useTimelineState } from './chunk-JWKOW2OV.mjs';
+import { useViewport } from './chunk-VPQ5SSY3.mjs';
+import { WheelZoomContext } from './chunk-CIPI2V54.mjs';
+import { CursorOverlay } from './chunk-T4C3YYFC.mjs';
+import { NavigationControls } from './chunk-5EXV5EWF.mjs';
+import { Tick } from './chunk-K22BEXUA.mjs';
+import { TimeRuleEventDot } from './chunk-OC4HRPZU.mjs';
+import { TimelineEvent } from './chunk-UYTWOSZB.mjs';
+import { TimelineProcessBar } from './chunk-T6NE6TOR.mjs';
+import { rightWedgeClasses, leftWedgeClasses, TOTAL_DURATION } from './chunk-4U232QAX.mjs';
+import { LeftWedge, RightWedge } from './chunk-TCPOLLWA.mjs';
+import { TreeView } from './chunk-FOVIOX4K.mjs';
+import { TooltipProvider } from './chunk-XSJ6XVTR.mjs';
+import { SyncDragY, SyncScrollSlave } from './chunk-EEKGYANW.mjs';
+import { SyncScrollProvider } from './chunk-SAGQV2YZ.mjs';
+import { cn } from './chunk-KVFUDYD3.mjs';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Waterfall({
+  logData,
+  temporalCursor,
+  onTemporalCursorChange,
+  getIcon,
+  panelWidth = 300,
+  className,
+  hoveredId: externalHoveredId,
+  onItemHover: externalOnItemHover,
+  minWindow = 0.01,
+  maxWindow,
+  zoomFactor = 1.1,
+  enabled = true,
+  children
+}) {
+  const [visibleLogData, setVisibleLogData] = useState([]);
+  const [temporalMarkers, setTemporalMarkers] = useState([]);
+  const internalTimelineState = useTimelineState(logData);
+  const hoveredId = externalHoveredId ?? internalTimelineState.hoveredId;
+  const setHoveredId = externalOnItemHover ?? internalTimelineState.setHoveredId;
+  const {
+    viewStart,
+    viewDuration,
+    timelineContainerRef,
+    timeToPercent,
+    ticks,
+    eventDots,
+    handlePan,
+    handleZoomDragStart,
+    setViewStart,
+    setViewDuration,
+    cursorVisible,
+    cursorPosition,
+    cursorLabel,
+    showMagnet
+  } = useViewport({
+    visibleLogData,
+    onTemporalCursorChange,
+    temporalCursor
+  });
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SyncScrollProvider, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-bg-primary text-text-primary rounded-uk-md border-line-primary/50 mx-auto flex w-full flex-col overflow-hidden border font-sans shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-row items-stretch", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "border-line-primary/50 relative flex h-full flex-none flex-col border-r",
+            style: { width: panelWidth },
+            children: /* @__PURE__ */ jsx(
+              TreeView,
+              {
+                className: "h-full",
+                alwaysShowExpand: true,
+                isSearchable: true,
+                data: logData,
+                getIcon,
+                onVisibleDataChange: setVisibleLogData,
+                onItemHover: setHoveredId,
+                hoveredId,
+                useSyncScroll: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: timelineContainerRef,
+            className: "overflow-y-none scrollbar-hide relative flex h-full w-full flex-auto cursor-crosshair flex-col overflow-x-hidden pl-px active:cursor-grabbing",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-bg-primary sticky top-0", children: /* @__PURE__ */ jsxs("div", { className: "border-line-primary/50 relative h-8 border-b", children: [
+                ticks.map((marker, ind) => /* @__PURE__ */ jsx(
+                  Tick,
+                  {
+                    time: marker.time,
+                    label: marker.label,
+                    timeToPercent,
+                    zIndex: ind < ticks.length - 1 ? 10 : 0
+                  },
+                  marker.time
+                )),
+                eventDots.map(({ time }, tickIndex) => /* @__PURE__ */ jsx(
+                  TimeRuleEventDot,
+                  {
+                    percent: timeToPercent(time)
+                  },
+                  `snap-${time}-${tickIndex}`
+                ))
+              ] }) }),
+              /* @__PURE__ */ jsxs(
+                WheelZoomContext,
+                {
+                  className: "scrollbar-hide relative h-full max-h-full overflow-auto",
+                  viewStart,
+                  viewDuration,
+                  onViewStartChange: setViewStart,
+                  onWindowChange: setViewDuration,
+                  minWindow,
+                  maxWindow: maxWindow ?? TOTAL_DURATION * 10,
+                  zoomFactor,
+                  enabled,
+                  children: [
+                    /* @__PURE__ */ jsx(SyncDragY, { className: "scrollbar-hide hide-scrollbar relative h-full w-full", children: visibleLogData.map(
+                      (item, index) => item.time === void 0 ? (
+                        // Render TimelineProcessBar for duration events
+                        /* @__PURE__ */ jsx(
+                          TimelineProcessBar,
+                          {
+                            index,
+                            item,
+                            isHovered: hoveredId === item.id,
+                            onMouseEnter: () => setHoveredId(item.id),
+                            onMouseLeave: () => setHoveredId(null),
+                            onClick: (time) => {
+                              setTemporalMarkers((prev) => [...prev, time]);
+                            },
+                            viewStart,
+                            viewWindow: viewDuration,
+                            timeToPercent
+                          },
+                          item.id
+                        )
+                      ) : (
+                        // Render TimelineEvent for instant events (with time property)
+                        /* @__PURE__ */ jsx(
+                          TimelineEvent,
+                          {
+                            item,
+                            isHovered: hoveredId === item.id,
+                            onMouseEnter: () => setHoveredId(item.id),
+                            onMouseLeave: () => setHoveredId(null),
+                            onClick: (time) => {
+                              setTemporalMarkers((prev) => [...prev, time]);
+                            },
+                            timeToPercent,
+                            index
+                          },
+                          item.id
+                        )
+                      )
+                    ) }),
+                    /* @__PURE__ */ jsx(SyncScrollSlave, { className: "scrollbar-hide pointer-events-none absolute top-0 left-0 z-10 h-full w-2", children: visibleLogData.map((item, index) => /* @__PURE__ */ jsx(
+                      LeftWedge,
+                      {
+                        item,
+                        classes: rightWedgeClasses,
+                        viewStart,
+                        index
+                      },
+                      `left-wedge-${item.id}`
+                    )) }),
+                    /* @__PURE__ */ jsx(SyncScrollSlave, { className: "scrollbar-hide pointer-events-none absolute top-0 right-0 z-10 h-full w-2", children: visibleLogData.map((item, index) => /* @__PURE__ */ jsx(
+                      RightWedge,
+                      {
+                        item,
+                        classes: leftWedgeClasses,
+                        viewEnd: viewStart + viewDuration,
+                        index
+                      },
+                      `right-wedge-${item.id}`
+                    )) }),
+                    children,
+                    /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 justify-center pb-4", children: /* @__PURE__ */ jsx(
+                      NavigationControls,
+                      {
+                        viewDuration,
+                        handlePan,
+                        handleZoomDragStart
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              temporalMarkers.map((time, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "pointer-events-none absolute top-0 h-8 w-20 cursor-pointer",
+                  style: {
+                    zIndex: 110,
+                    left: `calc(${timeToPercent(time)}% - 2.5rem)`
+                  },
+                  onClick: () => {
+                    setTemporalMarkers((prev) => prev.filter((_, i) => i !== index));
+                  },
+                  title: "Click to remove marker",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto relative h-full w-full" }),
+                    /* @__PURE__ */ jsx(
+                      CursorOverlay,
+                      {
+                        left: 50,
+                        label: `T${index + 1}`,
+                        color: "#3b82f6",
+                        showReadout: true,
+                        variant: "static",
+                        zIndex: 110
+                      }
+                    )
+                  ]
+                },
+                `marker-${time}-${index}`
+              )),
+              cursorVisible && /* @__PURE__ */ jsx(
+                CursorOverlay,
+                {
+                  left: cursorPosition,
+                  label: cursorLabel,
+                  color: "#ef4444",
+                  showReadout: true,
+                  showMagnet,
+                  className: "transition-opacity duration-150",
+                  zIndex: 100
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) }) });
+}
+
+export { Waterfall };

package/dist/{chunk-JVCED76T.mjs → chunk-FOVIOX4K.mjs}

@@ -1,4 +1,5 @@
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-XSJ6XVTR.mjs';
+import { SyncScroll } from './chunk-EEKGYANW.mjs';
 import { cn } from './chunk-KVFUDYD3.mjs';
 import { Search, CaseSensitive, Regex, ChevronDown } from 'lucide-react';
 import { useState, useMemo, useEffect } from 'react';
@@ -15,7 +16,8 @@ function TreeView({
   selectedItemId,
   onSelectChange,
   isSearchable = true,
-  alwaysShowExpand = false
+  alwaysShowExpand = false,
+  useSyncScroll = false
 }) {
   const [expandedItems, setExpandedItems] = useState(() => {
     const initial = /* @__PURE__ */ new Set();
@@ -138,6 +140,32 @@ function TreeView({
     });
     return dataWithMeta.filter((item) => matchingAndAncestorIds.has(item.id));
   }, [searchQuery, dataWithMeta, expandedItems, isCaseSensitive, isRegex, isRegexValid, data]);
+  const searchResultsCount = useMemo(() => {
+    if (!searchQuery || !isRegexValid) return 0;
+    let count = 0;
+    let regex = null;
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+      } catch {
+        return 0;
+      }
+    }
+    data.forEach((item) => {
+      let labelMatches = false;
+      if (regex) {
+        labelMatches = regex.test(item.label);
+      } else {
+        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
+        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
+        labelMatches = source.includes(query);
+      }
+      if (labelMatches) {
+        count++;
+      }
+    });
+    return count;
+  }, [searchQuery, data, isCaseSensitive, isRegex, isRegexValid]);
   useEffect(() => {
     onVisibleDataChange?.(visibleData);
   }, [visibleData, onVisibleDataChange]);
@@ -156,48 +184,177 @@ function TreeView({
       (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsx("span", { className: "rounded-uk-xs bg-yellow-300 dark:bg-yellow-700", children: part }, i) : part
     ) });
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-line-primary flex flex-col", className), children: [
-    isSearchable && /* @__PURE__ */ jsxs("div", { className: "border-line-primary flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
-      /* @__PURE__ */ jsx(Search, { className: "text-text-secondary size-4" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Search...",
-          className: cn(
-            "text-uk-md w-full bg-transparent focus:outline-none",
-            !isRegexValid && "text-red-500"
-          ),
-          value: searchQuery,
-          onChange: (e) => setSearchQuery(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setIsCaseSensitive((prev) => !prev),
-              className: cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary"),
-              children: /* @__PURE__ */ jsx(CaseSensitive, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Case Sensitive" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setIsRegex((prev) => !prev),
-              className: cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary"),
-              children: /* @__PURE__ */ jsx(Regex, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Use Regular Expression" }) })
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+    isSearchable && /* @__PURE__ */ jsxs("div", { className: "border-line-primary/50 shrink-0 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-[32px] items-center gap-1 px-2", children: [
+        /* @__PURE__ */ jsx(Search, { className: "text-text-secondary size-4" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            className: cn(
+              "text-uk-md w-full bg-transparent focus:outline-none",
+              !isRegexValid && "text-red-500"
+            ),
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsCaseSensitive((prev) => !prev),
+                className: cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary"),
+                children: /* @__PURE__ */ jsx(CaseSensitive, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Case Sensitive" }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsRegex((prev) => !prev),
+                className: cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary"),
+                children: /* @__PURE__ */ jsx(Regex, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Use Regular Expression" }) })
+          ] })
         ] })
-      ] })
+      ] }),
+      searchQuery && isRegexValid && /* @__PURE__ */ jsx("div", { className: "flex justify-end px-2 pb-1", children: /* @__PURE__ */ jsxs("span", { className: "text-uk-xs text-text-secondary", children: [
+        searchResultsCount,
+        " result",
+        searchResultsCount !== 1 ? "s" : ""
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", children: visibleData.map((item) => /* @__PURE__ */ jsxs(
+    useSyncScroll ? /* @__PURE__ */ jsx(SyncScroll, { className: "scrollbar-track-transparent flex-1", children: visibleData.map((item) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative flex h-[32px] items-center",
+          isSelectable && "rounded-uk-md",
+          !item.disable && "cursor-pointer",
+          hoveredId === item.id && !item.disable && "bg-bg-secondary",
+          isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
+        ),
+        onMouseEnter: () => onItemHover?.(item.id),
+        onMouseLeave: () => onItemHover?.(null),
+        onClick: () => !item.disable && handleItemSelect(item.id),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
+            item.ancestors.map((ancestor, index) => {
+              const parentIsLast = dataWithMeta.find((d) => d.id === ancestor.id)?.isLast;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-full w-[1.25rem]",
+                    parentIsLast ? "" : "border-l",
+                    "border-line-primary"
+                  )
+                },
+                index
+              );
+            }),
+            item.indent > 0 && /* @__PURE__ */ jsxs("div", { className: "relative h-full w-[1.24rem]", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
+                    item.isLast ? "rounded-bl-md" : "",
+                    "border-line-primary"
+                  )
+                }
+              ),
+              !item.isLast && /* @__PURE__ */ jsx("div", { className: "border-line-primary absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "text-uk-md z-10 flex w-full items-center justify-between gap-2 px-2 whitespace-nowrap",
+              style: { paddingLeft: `${item.indent * 1.25 + 0.5}rem` },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  alwaysShowExpand && hasDescendants(item.id) && !expandedItems.has(item.id) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleItem(item.id);
+                        },
+                        className: "flex size-4 cursor-pointer items-center justify-center",
+                        children: /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            className: cn(
+                              "size-4 -rotate-90 transition-transform",
+                              item.disable && "text-icon-tertiary"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex size-4 items-center justify-center",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
+                    item.isCollapsible && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleItem(item.id);
+                        },
+                        className: "absolute z-20 flex cursor-pointer items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                        children: /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            className: cn(
+                              "size-4 transition-transform",
+                              !expandedItems.has(item.id) && "-rotate-90",
+                              item.disable && "text-icon-tertiary"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "cursor-pointer transition-opacity",
+                          item.isCollapsible && "group-hover:opacity-0",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label) })
+                ] }),
+                item.actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
+              ]
+            }
+          )
+        ]
+      },
+      item.id
+    )) }) : /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: visibleData.map((item) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
@@ -243,7 +400,7 @@ function TreeView({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "text-uk-md z-10 flex w-full items-center justify-between px-2 whitespace-nowrap",
+              className: "text-uk-md z-10 flex w-full items-center justify-between gap-2 px-2 whitespace-nowrap",
               style: { paddingLeft: `${item.indent * 1.25 + 0.5}rem` },
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
@@ -260,14 +417,23 @@ function TreeView({
                           ChevronDown,
                           {
                             className: cn(
-                              "size-4 transition-transform -rotate-90",
+                              "size-4 -rotate-90 transition-transform",
                               item.disable && "text-icon-tertiary"
                             )
                           }
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: cn("flex size-4 items-center justify-center", item.disable && "text-icon-tertiary"), children: getIcon(item) })
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex size-4 items-center justify-center",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
                   ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
                     item.isCollapsible && /* @__PURE__ */ jsx(
                       "button",