@vuer-ai/vuer-uikit 0.0.72 → 0.0.74

package/dist/{chunk-S4EDLSFB.cjs → chunk-ARO7HIKD.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
+var chunkMDDAL4L5_cjs = require('./chunk-MDDAL4L5.cjs');
 var chunkMKKH4EGP_cjs = require('./chunk-MKKH4EGP.cjs');
 var chunkNQIPNYJK_cjs = require('./chunk-NQIPNYJK.cjs');
 var chunkDDPLVMRO_cjs = require('./chunk-DDPLVMRO.cjs');
-var chunkMDDAL4L5_cjs = require('./chunk-MDDAL4L5.cjs');
+var chunkWVQ4FHYY_cjs = require('./chunk-WVQ4FHYY.cjs');
 var chunkBHC7GX53_cjs = require('./chunk-BHC7GX53.cjs');
-var chunkNFJTF2GL_cjs = require('./chunk-NFJTF2GL.cjs');
 var chunkJR4TVE43_cjs = require('./chunk-JR4TVE43.cjs');
 var chunkDWD754BX_cjs = require('./chunk-DWD754BX.cjs');
 var reactSlot = require('@radix-ui/react-slot');
@@ -251,7 +251,7 @@ function SidebarInset({ className, ...props }) {
 }
 function SidebarInput({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkNFJTF2GL_cjs.InputRoot,
+    chunkWVQ4FHYY_cjs.InputRoot,
     {
       "data-slot": "sidebar-input",
       "data-sidebar": "input",

package/dist/{chunk-QCSP3AI3.cjs → chunk-BMUCXNQH.cjs}

@@ -1,6 +1,7 @@
 'use strict';
 
 var chunkMKKH4EGP_cjs = require('./chunk-MKKH4EGP.cjs');
+var chunkFABHCVYU_cjs = require('./chunk-FABHCVYU.cjs');
 var chunkDWD754BX_cjs = require('./chunk-DWD754BX.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
@@ -17,7 +18,8 @@ function TreeView({
   selectedItemId,
   onSelectChange,
   isSearchable = true,
-  alwaysShowExpand = false
+  alwaysShowExpand = false,
+  useSyncScroll = false
 }) {
   const [expandedItems, setExpandedItems] = react.useState(() => {
     const initial = /* @__PURE__ */ new Set();
@@ -140,6 +142,32 @@ function TreeView({
     });
     return dataWithMeta.filter((item) => matchingAndAncestorIds.has(item.id));
   }, [searchQuery, dataWithMeta, expandedItems, isCaseSensitive, isRegex, isRegexValid, data]);
+  const searchResultsCount = react.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]);
   react.useEffect(() => {
     onVisibleDataChange?.(visibleData);
   }, [visibleData, onVisibleDataChange]);
@@ -158,48 +186,177 @@ function TreeView({
       (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-uk-xs bg-yellow-300 dark:bg-yellow-700", children: part }, i) : part
     ) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkDWD754BX_cjs.cn("border-line-primary flex flex-col", className), children: [
-    isSearchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-primary flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "text-text-secondary size-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Search...",
-          className: chunkDWD754BX_cjs.cn(
-            "text-uk-md w-full bg-transparent focus:outline-none",
-            !isRegexValid && "text-red-500"
-          ),
-          value: searchQuery,
-          onChange: (e) => setSearchQuery(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.TooltipProvider, { delayDuration: 200, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setIsCaseSensitive((prev) => !prev),
-              className: chunkDWD754BX_cjs.cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CaseSensitive, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Case Sensitive" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setIsRegex((prev) => !prev),
-              className: chunkDWD754BX_cjs.cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Regex, { className: "size-4" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Use Regular Expression" }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkDWD754BX_cjs.cn("flex flex-col", className), children: [
+    isSearchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-primary/50 shrink-0 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[32px] items-center gap-1 px-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "text-text-secondary size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            className: chunkDWD754BX_cjs.cn(
+              "text-uk-md w-full bg-transparent focus:outline-none",
+              !isRegexValid && "text-red-500"
+            ),
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.TooltipProvider, { delayDuration: 200, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsCaseSensitive((prev) => !prev),
+                className: chunkDWD754BX_cjs.cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CaseSensitive, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Case Sensitive" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkMKKH4EGP_cjs.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsRegex((prev) => !prev),
+                className: chunkDWD754BX_cjs.cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Regex, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMKKH4EGP_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Use Regular Expression" }) })
+          ] })
         ] })
-      ] })
+      ] }),
+      searchQuery && isRegexValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end px-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-uk-xs text-text-secondary", children: [
+        searchResultsCount,
+        " result",
+        searchResultsCount !== 1 ? "s" : ""
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto", children: visibleData.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    useSyncScroll ? /* @__PURE__ */ jsxRuntime.jsx(chunkFABHCVYU_cjs.SyncScroll, { className: "scrollbar-track-transparent flex-1", children: visibleData.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkDWD754BX_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: chunkDWD754BX_cjs.cn(
+                    "h-full w-[1.25rem]",
+                    parentIsLast ? "" : "border-l",
+                    "border-line-primary"
+                  )
+                },
+                index
+              );
+            }),
+            item.indent > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-[1.24rem]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: chunkDWD754BX_cjs.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__ */ jsxRuntime.jsx("div", { className: "border-line-primary absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  alwaysShowExpand && hasDescendants(item.id) && !expandedItems.has(item.id) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleItem(item.id);
+                        },
+                        className: "flex size-4 cursor-pointer items-center justify-center",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.ChevronDown,
+                          {
+                            className: chunkDWD754BX_cjs.cn(
+                              "size-4 -rotate-90 transition-transform",
+                              item.disable && "text-icon-tertiary"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: chunkDWD754BX_cjs.cn(
+                          "flex size-4 items-center justify-center",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
+                    item.isCollapsible && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                          lucideReact.ChevronDown,
+                          {
+                            className: chunkDWD754BX_cjs.cn(
+                              "size-4 transition-transform",
+                              !expandedItems.has(item.id) && "-rotate-90",
+                              item.disable && "text-icon-tertiary"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: chunkDWD754BX_cjs.cn(
+                          "cursor-pointer transition-opacity",
+                          item.isCollapsible && "group-hover:opacity-0",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkDWD754BX_cjs.cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label) })
+                ] }),
+                item.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
+              ]
+            }
+          )
+        ]
+      },
+      item.id
+    )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: visibleData.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: chunkDWD754BX_cjs.cn(
@@ -245,7 +402,7 @@ function TreeView({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
@@ -262,14 +419,23 @@ function TreeView({
                           lucideReact.ChevronDown,
                           {
                             className: chunkDWD754BX_cjs.cn(
-                              "size-4 transition-transform -rotate-90",
+                              "size-4 -rotate-90 transition-transform",
                               item.disable && "text-icon-tertiary"
                             )
                           }
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkDWD754BX_cjs.cn("flex size-4 items-center justify-center", item.disable && "text-icon-tertiary"), children: getIcon(item) })
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: chunkDWD754BX_cjs.cn(
+                          "flex size-4 items-center justify-center",
+                          item.disable && "text-icon-tertiary"
+                        ),
+                        children: getIcon(item)
+                      }
+                    )
                   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
                     item.isCollapsible && /* @__PURE__ */ jsxRuntime.jsx(
                       "button",

package/dist/chunk-CIPI2V54.mjs

@@ -0,0 +1,66 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/waterfall/WheelZoomContext.tsx
+function WheelZoomContext({
+  ref,
+  className,
+  viewStart,
+  viewDuration,
+  onViewStartChange,
+  onWindowChange,
+  minWindow = 0.01,
+  maxWindow = Infinity,
+  zoomFactor = 1.1,
+  enabled = true,
+  children
+}) {
+  const localRef = useRef(null);
+  const containerRef = ref || localRef;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    container.addEventListener("wheel", preventScroll, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", preventScroll);
+    };
+  }, [enabled]);
+  const handleWheel = useCallback(
+    (e) => {
+      if (!enabled) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (e.shiftKey || e.altKey) {
+        const rect = container.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const cursorRatio = cursorX / container.offsetWidth;
+        const timeAtCursor = viewStart + cursorRatio * viewDuration;
+        const scaleFactor = e.deltaY < 0 ? 1 / zoomFactor : zoomFactor;
+        const newDuration = Math.max(minWindow, Math.min(maxWindow, viewDuration * scaleFactor));
+        if (newDuration === viewDuration) return;
+        const newViewStart = timeAtCursor - cursorRatio * newDuration;
+        onWindowChange(newDuration);
+        onViewStartChange(newViewStart);
+      } else {
+        const panAmount = (e.deltaX + e.deltaY) / container.offsetWidth * viewDuration;
+        onViewStartChange(viewStart + panAmount);
+      }
+    },
+    [
+      enabled,
+      viewStart,
+      viewDuration,
+      onViewStartChange,
+      onWindowChange,
+      minWindow,
+      maxWindow,
+      zoomFactor
+    ]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, onWheel: handleWheel, children });
+}
+
+export { WheelZoomContext };

package/dist/chunk-CLGNOISX.mjs

@@ -0,0 +1,18 @@
+import { InputNumbers } from './chunk-ZNY7VYIN.mjs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TimeInput = forwardRef(function TimeInput2({ value = 0, onChange, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    InputNumbers,
+    {
+      ref,
+      value: [value],
+      onValuesChange: (values) => onChange?.(values[0]),
+      suffix: ["s"],
+      ...props
+    }
+  );
+});
+
+export { TimeInput };

package/dist/{chunk-PABIHEC7.mjs → chunk-CXD4LN7V.mjs}

@@ -1,4 +1,4 @@
-import { VectorInput } from './chunk-SIU54HGH.mjs';
+import { VectorInput } from './chunk-J3ZWVQT7.mjs';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-D2DMH5WY.mjs

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/icons/MouseCursorIcons.tsx
+var MouseCursorIcon = ({ strokeWidth = 2.25 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2",
+      children: /* @__PURE__ */ jsx("path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" })
+    }
+  );
+};
+var MouseCursorAltIcon = ({ strokeWidth = 2.25 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      "stroke-width": strokeWidth / 2,
+      className: "lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2",
+      children: /* @__PURE__ */ jsx("path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" })
+    }
+  );
+};
+
+export { MouseCursorAltIcon, MouseCursorIcon };

package/dist/{chunk-RXQGFPLP.cjs → chunk-DLHTCOQO.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQCSP3AI3_cjs = require('./chunk-QCSP3AI3.cjs');
+var chunkBMUCXNQH_cjs = require('./chunk-BMUCXNQH.cjs');
 var chunkMKKH4EGP_cjs = require('./chunk-MKKH4EGP.cjs');
 var chunkDWD754BX_cjs = require('./chunk-DWD754BX.cjs');
 var lucideReact = require('lucide-react');
@@ -55,7 +55,7 @@ var borderColorClasses = {
   green: "border-green-500/85",
   orange: "border-orange-500/85",
   purple: "border-purple-500/85",
-  "gray-light": "border-line-secondary/20",
+  "gray-light": "border-line-primary/50",
   "gray-medium": "border-slate-500/85"
 };
 var colorClasses = {
@@ -505,9 +505,9 @@ function Timeline({
       animationFrameRef.current = requestAnimationFrame(updateCursor);
     }
   }, [viewStart, viewDuration, updateCursor]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary text-text-primary border-line-secondary/20 rounded-uk-md mx-auto w-full max-w-7xl overflow-hidden border font-sans shadow-[0_4px_16px_0_var(--color-shadow-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary text-text-primary border-line-primary/50 rounded-uk-md mx-auto w-full overflow-hidden border font-sans shadow-[0_4px_16px_0_var(--color-shadow-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkQCSP3AI3_cjs.TreeView,
+      chunkBMUCXNQH_cjs.TreeView,
       {
         data,
         getIcon,
@@ -520,17 +520,17 @@ function Timeline({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "border-line-secondary/20 scrollbar-hide relative cursor-crosshair overflow-x-auto border-l active:cursor-grabbing",
+          className: "border-line-primary/50 scrollbar-hide relative cursor-crosshair overflow-x-auto border-l active:cursor-grabbing",
           ref: timelineContainerRef,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-secondary/20 relative h-8 border-b", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-primary/50 relative h-8 border-b", children: [
               keyEventTimes.map(({ time }, tickIndex) => {
                 const percent = timeToPercent(time);
                 if (percent < 0 || percent > 100) return null;
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "bg-line-secondary/20 absolute top-1/2 z-0 h-1 w-1 -translate-y-1/2 rounded-full",
+                    className: "bg-bg-tertiary absolute top-1/2 z-0 h-1 w-1 -translate-y-1/2 rounded-full",
                     style: { left: `${percent}%` }
                   },
                   `snap-${time}-${tickIndex}`
@@ -551,7 +551,7 @@ function Timeline({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "bg-border bg-line-secondary/20 absolute top-0 h-full w-px",
+                      className: "bg-line-primary absolute top-0 h-full w-px",
                       style: { left: `${naturalCenterPercent}%` }
                     }
                   ),
@@ -805,7 +805,7 @@ function Timeline({
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
-                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+                      className: "bg-bg-primary border-line-primary/50 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
                       style: {
                         left: "var(--cursor-left)",
                         transform: "translateX(-50%)",

package/dist/{chunk-MZVZSSOH.cjs → chunk-DR5AQ3WH.cjs}

@@ -4,9 +4,9 @@ var chunkDWD754BX_cjs = require('./chunk-DWD754BX.cjs');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.72" ;
+var PACKAGE_VERSION = "0.0.74" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
-var GIT_HASH = "f80572c" ;
+var GIT_HASH = "15b30a4" ;
 function PackageBadge({
   className,
   packageName,
@@ -70,7 +70,7 @@ function PackageBadge({
     }
   );
 }
-function VersionBadge({
+function UIKitBadge({
   className,
   package: showPackage = false,
   prefix = false,
@@ -78,7 +78,7 @@ function VersionBadge({
   version = false,
   hash = false
 }) {
-  const packageShortName = PACKAGE_NAME.includes("vuer") ? "vuer" : PACKAGE_NAME.split("/").pop() || PACKAGE_NAME;
+  const packageShortName = PACKAGE_NAME.split("/").pop() || PACKAGE_NAME;
   const versionText = version ? prefix ? `v${PACKAGE_VERSION}` : PACKAGE_VERSION : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     PackageBadge,
@@ -96,4 +96,4 @@ function VersionBadge({
 exports.GIT_HASH = GIT_HASH;
 exports.PACKAGE_VERSION = PACKAGE_VERSION;
 exports.PackageBadge = PackageBadge;
-exports.VersionBadge = VersionBadge;
+exports.UIKitBadge = UIKitBadge;

package/dist/{chunk-X46KNBED.mjs → chunk-EDLK6SIA.mjs}

@@ -1,4 +1,4 @@
-import { InputRoot, InputSlot } from './chunk-IWPVLQSF.mjs';
+import { InputRoot, InputSlot } from './chunk-TNARVKPU.mjs';
 import { cn } from './chunk-KVFUDYD3.mjs';
 import { forwardRef, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-CGFJLQRG.mjs → chunk-EEKGYANW.mjs}

@@ -239,5 +239,62 @@ var SyncDragSlaveX = ({
     }
   );
 };
+var SyncDragY = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}) => {
+  const ref = useSyncDrag({ ref: extRef, axis: "vertical" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef(0);
+  const scrollStartTop = useRef(0);
+  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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        "cursor-grab overflow-x-hidden overflow-y-auto",
+        isDragging && "cursor-grabbing",
+        className
+      ),
+      style: { userSelect: isDragging ? "none" : "auto", ...props.style },
+      ...props,
+      children
+    }
+  );
+};
 
-export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncScroll, SyncScrollSlave };
+export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncDragY, SyncScroll, SyncScrollSlave };

package/dist/{chunk-JUFXAXIV.cjs → chunk-F6KFLIZX.cjs}

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkSN46OY24_cjs = require('./chunk-SN46OY24.cjs');
+var chunkME6B5H7U_cjs = require('./chunk-ME6B5H7U.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var EulerDegInput = react.forwardRef(
   function EulerDegInput2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkSN46OY24_cjs.EulerInput, { ref, unit: "deg", ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkME6B5H7U_cjs.EulerInput, { ref, unit: "deg", ...props });
   }
 );