@vuer-ai/vuer-uikit 0.0.120 → 0.0.121

package/src/ui/tabs.tsx

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { type ComponentProps, createContext, useContext } from "react";
 
 import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 interface TabsContextType {
   size?: "sm" | "base" | "lg";
@@ -29,7 +29,7 @@ interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
  * @param props -
  * @param className -
  * @param size - Control size ("sm" | "base" | "lg"), defaults to "base" */
-function TabsRoot({ className, size = "base", ...props }: TabsProps) {
+function Tabs({ className, size = "base", ...props }: TabsProps) {
   return (
     <TabsContext.Provider value={{ size }}>
       <TabsPrimitive.Root
@@ -41,16 +41,6 @@ function TabsRoot({ className, size = "base", ...props }: TabsProps) {
   );
 }
 
-function TabsFallback({ className, size = "base", ...props }: TabsProps & ComponentProps<"div">) {
-  return (
-    <TabsContext.Provider value={{ size }}>
-      <div data-slot="tabs" className={cn("flex w-full flex-col", className)} {...props} />
-    </TabsContext.Provider>
-  );
-}
-
-const Tabs = createClientOnlyComponent(TabsRoot, TabsFallback);
-
 const tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
   variants: {
     size: {
@@ -69,36 +59,38 @@ type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 /**
  * Container for tab triggers. Emits cursor interactions for visual effects.
  */
-function TabsListRoot({ className, ...props }: TabsListProps) {
-  const { setCursorTarget } = useTabsCursor();
+function TabsList({ className, onMouseLeave, ...props }: TabsListProps) {
   const { size } = useTabsContext();
   return (
     <TabsCursorProvider>
-      <TabsPrimitive.List
-        onMouseLeave={() => setCursorTarget(null)}
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
+      <TabsListInner className={className} size={size} onMouseLeave={onMouseLeave} {...props} />
     </TabsCursorProvider>
   );
 }
 
-function TabsListFallback({ className, ...props }: TabsListProps & ComponentProps<"div">) {
-  const { size } = useTabsContext();
+function TabsListInner({
+  className,
+  size,
+  onMouseLeave,
+  ...props
+}: TabsListProps & { size?: "sm" | "base" | "lg" }) {
+  const { setCursorTarget } = useTabsCursor();
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    setCursorTarget(null);
+    onMouseLeave?.(e);
+  };
+
   return (
-    <TabsCursorProvider>
-      <div
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
-    </TabsCursorProvider>
+    <TabsPrimitive.List
+      onMouseLeave={handleMouseLeave}
+      data-slot="tabs-list"
+      className={cn(tabsListVariants({ size }), "justify-start", className)}
+      {...props}
+    />
   );
 }
 
-const TabsList = createClientOnlyComponent(TabsListRoot, TabsListFallback);
-
 const tabsTriggerVariants = cva(
   [
     "inline-flex",
@@ -114,8 +106,9 @@ const tabsTriggerVariants = cva(
     "shrink-0",
     "[&_svg]:shrink-0",
     "outline-none",
-    "text-text-primary",
+    "text-text-secondary",
     "data-[state=active]:bg-bg-secondary",
+    "data-[state=active]:text-text-primary",
     "data-[state=active]:font-medium",
   ],
   {
@@ -137,7 +130,7 @@ type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
 /**
  * Single tab trigger button.
  */
-function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
+function TabsTrigger({ className, ...props }: TabsTriggerProps) {
   const { setCursorTarget } = useTabsCursor();
   const { size } = useTabsContext();
   return (
@@ -150,27 +143,12 @@ function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
   );
 }
 
-function TabsTriggerFallback({ className, ...props }: TabsTriggerProps & ComponentProps<"button">) {
-  const { setCursorTarget } = useTabsCursor();
-  const { size } = useTabsContext();
-  return (
-    <button
-      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
-      data-slot="tabs-trigger"
-      className={cn(tabsTriggerVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-const TabsTrigger = createClientOnlyComponent(TabsTriggerRoot, TabsTriggerFallback);
-
 type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
 
 /**
  * Content area for a tab panel.
  */
-function TabsContentRoot({ className, ...props }: TabsContentProps) {
+function TabsContent({ className, ...props }: TabsContentProps) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
@@ -180,13 +158,5 @@ function TabsContentRoot({ className, ...props }: TabsContentProps) {
   );
 }
 
-function TabsContentFallback({ className, ...props }: TabsContentProps & ComponentProps<"div">) {
-  return (
-    <div data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
-  );
-}
-
-const TabsContent = createClientOnlyComponent(TabsContentRoot, TabsContentFallback);
-
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/src/ui/toast.tsx

@@ -1,27 +1,26 @@
-import { useEffect, useState } from "react";
-import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+import { CSSProperties } from "react";
+import { toast, Toaster as Sonner, type ToasterProps } from "sonner";
+
+import { useTheme } from "./theme";
 
 /**
  * Client-only Toaster wrapper applying default classes.
  */
-const Toaster = ({ ...props }: ToasterProps) => {
-  const [isClient, setIsClient] = useState(false);
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // Don't render anything during SSR
-  if (!isClient) {
-    return null;
-  }
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { baseTheme = "system" } = useTheme();
 
   return (
     <Sonner
-      toastOptions={{
-        className: "vk-toast liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg",
-        descriptionClassName: "vk-toast-description",
-      }}
+      theme={baseTheme}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--bg-primary)",
+          "--normal-text": "var(--text-primary)",
+          "--normal-border": "var(--bg-secondary)",
+        } as CSSProperties
+      }
       {...props}
     />
   );

package/src/ui/tooltip.tsx

@@ -8,7 +8,6 @@ import { cn } from "../hooks";
  */
 function TooltipProvider({
   delayDuration = 0,
-  children,
   ...props
 }: ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
@@ -16,32 +15,17 @@ function TooltipProvider({
       data-slot="tooltip-provider"
       delayDuration={delayDuration}
       {...props}
-    >
-      {children}
-    </TooltipPrimitive.Provider>
+    />
   );
 }
 
 /**
  * Wrapper root for a tooltip. Skips tooltip logic during SSR.
  */
-function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // During SSR, just render children without tooltip functionality
-  if (!isClient) {
-    return <>{children}</>;
-  }
-
+function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
-        {children}
-      </TooltipPrimitive.Root>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
   );
 }
@@ -50,17 +34,6 @@ function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.
  * Element that triggers the tooltip.
  */
 function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // During SSR, just render children without tooltip functionality
-  if (!isClient) {
-    return <>{props.children}</>;
-  }
-
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 

package/src/ui/tree-view/TreeView.tsx

@@ -1,8 +1,15 @@
 import { ChevronDown } from "lucide-react";
-import { type ReactNode } from "react";
+import React, { type ReactNode, useState } from "react";
 
+import {
+  getMultiSelectState,
+  getRangeIds,
+  cleanIndirectSelectedNodes,
+  getAdjacentSelectionState,
+} from "./hooks";
 import { TreeDataItem, TreeDataItemWithMeta } from "./types";
 import { cn } from "../../hooks";
+import { ContextMenu, ContextMenuTrigger } from "../context-menu";
 
 /**
  * Props for the view-only tree component
@@ -15,12 +22,14 @@ export type TreeViewProps<T extends TreeDataItem> = {
   onItemHover?: (id: string | null) => void;
   hoveredId?: string | null;
   isSelectable?: boolean;
-  selectedItemId?: string | null;
-  onSelectChange?: (id: string | null) => void;
+  selectedItemIds?: Set<string>;
+  onSelectionChange?: (ids: Set<string>) => void;
   hideExpand?: boolean;
   hasDescendants?: (id: string) => boolean;
   renderLabel?: (label: string, itemId: string) => ReactNode;
   className?: string;
+  renderContextMenu?: (item: T) => ReactNode;
+  selectionMode?: "single" | "multi";
 };
 
 /**
@@ -36,13 +45,17 @@ export function TreeView<T extends TreeDataItem>({
   onItemHover,
   hoveredId,
   isSelectable = false,
-  selectedItemId,
-  onSelectChange,
+  selectedItemIds,
+  onSelectionChange,
   hideExpand = false,
   hasDescendants = () => false,
   renderLabel = (label) => label,
   className,
+  renderContextMenu,
+  selectionMode = "multi",
 }: TreeViewProps<T>) {
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
+
   return (
     <div className={cn("flex-1 overflow-y-auto", className)}>
       {data.map((item) => (
@@ -52,8 +65,10 @@ export function TreeView<T extends TreeDataItem>({
           hoveredId={hoveredId}
           onItemHover={onItemHover}
           isSelectable={isSelectable}
-          selectedItemId={selectedItemId}
-          onSelectChange={onSelectChange}
+          selectedItemIds={selectedItemIds}
+          onSelectionChange={onSelectionChange}
+          lastSelectedId={lastSelectedId}
+          setLastSelectedId={setLastSelectedId}
           expandedItems={expandedItems}
           toggleItem={onToggleItem}
           hideExpand={hideExpand}
@@ -61,6 +76,8 @@ export function TreeView<T extends TreeDataItem>({
           getIcon={getIcon}
           renderLabel={renderLabel}
           dataWithMeta={data}
+          renderContextMenu={renderContextMenu}
+          selectionMode={selectionMode}
         />
       ))}
     </div>
@@ -75,8 +92,10 @@ export function TreeEntryItem<T extends TreeDataItem>({
   hoveredId,
   onItemHover,
   isSelectable,
-  selectedItemId,
-  onSelectChange,
+  selectedItemIds,
+  onSelectionChange,
+  lastSelectedId,
+  setLastSelectedId,
   expandedItems,
   toggleItem = () => {},
   hideExpand = false,
@@ -84,13 +103,17 @@ export function TreeEntryItem<T extends TreeDataItem>({
   getIcon = () => null,
   renderLabel = (label) => label,
   dataWithMeta = [],
+  renderContextMenu,
+  selectionMode = "multi",
 }: {
   item: TreeDataItemWithMeta<T>;
   hoveredId?: string | null;
   onItemHover?: (id: string | null) => void;
   isSelectable?: boolean;
-  selectedItemId?: string | null;
-  onSelectChange?: (id: string | null) => void;
+  selectedItemIds?: Set<string>;
+  onSelectionChange?: (ids: Set<string>) => void;
+  lastSelectedId?: string | null;
+  setLastSelectedId?: (id: string | null) => void;
   expandedItems?: Set<string>;
   toggleItem?: (id: string) => void;
   hideExpand?: boolean;
@@ -98,10 +121,58 @@ export function TreeEntryItem<T extends TreeDataItem>({
   getIcon?: (item: T, expanded?: boolean) => ReactNode;
   renderLabel?: (label: string, itemId: string) => ReactNode;
   dataWithMeta?: TreeDataItemWithMeta<T>[];
+  renderContextMenu?: (item: T) => ReactNode;
+  selectionMode?: "single" | "multi";
 }) {
-  const handleItemSelect = () => {
-    if (!item.disable && isSelectable && onSelectChange) {
-      onSelectChange(selectedItemId === item.id ? null : item.id);
+  const handleItemSelect = (event: React.MouseEvent) => {
+    if (!item.disable && isSelectable) {
+      const isMultiSelectMode = selectionMode === "multi" && (event.ctrlKey || event.metaKey);
+      const isRangeSelectMode = selectionMode === "multi" && event.shiftKey;
+
+      if (isMultiSelectMode) {
+        const selectState = getMultiSelectState(
+          item.id,
+          selectedItemIds || new Set(),
+          dataWithMeta,
+        );
+        // prevent selection of indirectly selected nodes in multi-select mode
+        if (selectState === "indirect") {
+          return;
+        }
+      }
+
+      let newSelectedIds: Set<string>;
+
+      if (isRangeSelectMode && lastSelectedId) {
+        if (selectedItemIds) {
+          newSelectedIds = new Set(selectedItemIds);
+          const rangeIds = getRangeIds(lastSelectedId, item.id, dataWithMeta);
+          rangeIds.forEach((id) => newSelectedIds.add(id));
+        } else {
+          newSelectedIds = new Set([item.id]);
+        }
+      } else if (isMultiSelectMode) {
+        if (selectedItemIds) {
+          newSelectedIds = new Set(selectedItemIds);
+          if (newSelectedIds.has(item.id)) {
+            newSelectedIds.delete(item.id);
+          } else {
+            newSelectedIds.add(item.id);
+          }
+        } else {
+          newSelectedIds = new Set([item.id]);
+        }
+      } else {
+        // Single select mode: clear other selections and select only current item
+        newSelectedIds = new Set([item.id]);
+      }
+
+      const cleanedSelectedIds = cleanIndirectSelectedNodes(newSelectedIds, dataWithMeta);
+
+      if (onSelectionChange) {
+        onSelectionChange(cleanedSelectedIds);
+        setLastSelectedId?.(item.id);
+      }
     }
   };
 
@@ -110,18 +181,65 @@ export function TreeEntryItem<T extends TreeDataItem>({
   const indent = item.indent || 0;
   const isLast = item.isLast !== undefined ? item.isLast : false;
 
-  return (
+  const getSelectState = () => {
+    if (selectedItemIds) {
+      return getMultiSelectState(item.id, selectedItemIds, dataWithMeta);
+    }
+    return "unselected";
+  };
+
+  const selectState = getSelectState();
+  const isSelected = selectState === "selected";
+  const isIndirectlySelected = selectState === "indirect";
+
+  const { hasPrevSelected, hasNextSelected } = getAdjacentSelectionState(
+    item.id,
+    selectedItemIds || new Set(),
+    dataWithMeta,
+  );
+
+  // Calculate border radius classes based on adjacent selection
+  const getBorderRadiusClass = () => {
+    if (!isSelectable || (!isSelected && !isIndirectlySelected)) {
+      return "rounded-uk-md";
+    }
+
+    // Remove top radius if previous item is selected, remove bottom radius if next item is selected
+    if (hasPrevSelected && hasNextSelected) {
+      return "";
+    } else if (hasPrevSelected) {
+      return "rounded-b-uk-md";
+    } else if (hasNextSelected) {
+      return "rounded-t-uk-md";
+    }
+
+    return "rounded-uk-md";
+  };
+
+  const handleContextMenuOpenChange = (open: boolean) => {
+    // If item is not selected when opening context menu, select it first
+    if (open && isSelectable && !isSelected && !isIndirectlySelected && onSelectionChange) {
+      onSelectionChange(new Set([item.id]));
+    }
+  };
+
+  const treeItemContent = (
     <div
       className={cn(
         "group relative flex h-[32px] items-center",
-        isSelectable && "rounded-uk-md",
-        !item.disable && "cursor-pointer",
+        getBorderRadiusClass(),
         hoveredId === item.id && !item.disable && "bg-bg-secondary",
-        isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg",
+        isSelectable && isSelected && "bg-brand-primary text-text-withbg",
+        isSelectable && isIndirectlySelected && "bg-shadow-secondary text-text-primary",
       )}
       onMouseEnter={() => onItemHover?.(item.id)}
       onMouseLeave={() => onItemHover?.(null)}
       onClick={handleItemSelect}
+      onMouseDown={(e) => {
+        if (e.shiftKey || e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+        }
+      }}
     >
       {/* Guidelines */}
       <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
@@ -229,4 +347,15 @@ export function TreeEntryItem<T extends TreeDataItem>({
       </div>
     </div>
   );
+
+  if (renderContextMenu) {
+    return (
+      <ContextMenu onOpenChange={handleContextMenuOpenChange}>
+        <ContextMenuTrigger asChild>{treeItemContent}</ContextMenuTrigger>
+        {renderContextMenu(item)}
+      </ContextMenu>
+    );
+  }
+
+  return treeItemContent;
 }

package/src/ui/tree-view/hooks.tsx

@@ -2,6 +2,154 @@ import { useCallback, useMemo, useState } from "react";
 
 import { TreeDataItem, TreeDataItemWithMeta } from "./types";
 
+/**
+ * Get all descendant node IDs of a node
+ */
+export function getDescendantIds<T extends TreeDataItem>(
+  itemId: string,
+  data: TreeDataItemWithMeta<T>[],
+  childrenMap: Map<string | null, T[]>,
+): string[] {
+  const descendants: string[] = [];
+  const children = childrenMap.get(itemId) || [];
+
+  children.forEach((child) => {
+    descendants.push(child.id);
+    descendants.push(...getDescendantIds(child.id, data, childrenMap));
+  });
+
+  return descendants;
+}
+
+/**
+ * Get all ancestor node IDs of a node
+ */
+export function getAncestorIds<T extends TreeDataItem>(
+  itemId: string,
+  data: TreeDataItemWithMeta<T>[],
+): string[] {
+  const ancestors: string[] = [];
+  const dataMap = new Map(data.map((item) => [item.id, item]));
+  let current = dataMap.get(itemId)?.parentId;
+
+  while (current) {
+    ancestors.push(current);
+    current = dataMap.get(current)?.parentId;
+  }
+
+  return ancestors;
+}
+
+/**
+ * Check if a node is indirectly selected (parent node is selected)
+ */
+export function isIndirectlySelected<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): boolean {
+  const ancestors = getAncestorIds(itemId, data);
+  return ancestors.some((ancestorId) => selectedIds.has(ancestorId));
+}
+
+/**
+ * Get multi-select state: selected, indirect, or unselected
+ */
+export function getMultiSelectState<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): "selected" | "indirect" | "unselected" {
+  if (isIndirectlySelected(itemId, selectedIds, data)) {
+    return "indirect";
+  }
+  if (selectedIds.has(itemId)) {
+    return "selected";
+  }
+  return "unselected";
+}
+
+/**
+ * Get all node IDs for range selection (from lastSelectedId to currentId)
+ */
+export function getRangeIds<T extends TreeDataItem>(
+  lastSelectedId: string | null,
+  currentId: string,
+  data: TreeDataItemWithMeta<T>[],
+): string[] {
+  if (!lastSelectedId) {
+    return [currentId];
+  }
+
+  // Find the indices of both nodes in the data
+  const lastIndex = data.findIndex((item) => item.id === lastSelectedId);
+  const currentIndex = data.findIndex((item) => item.id === currentId);
+
+  if (lastIndex === -1 || currentIndex === -1) {
+    return [currentId];
+  }
+
+  // Get all node IDs within the range
+  const startIndex = Math.min(lastIndex, currentIndex);
+  const endIndex = Math.max(lastIndex, currentIndex);
+  const rangeIds: string[] = [];
+
+  for (let i = startIndex; i <= endIndex; i++) {
+    rangeIds.push(data[i].id);
+  }
+
+  return rangeIds;
+}
+
+/**
+ * Clean up indirectly selected child nodes, keep only directly selected nodes
+ */
+export function cleanIndirectSelectedNodes<T extends TreeDataItem>(
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): Set<string> {
+  const cleanedIds = new Set<string>();
+
+  for (const id of selectedIds) {
+    // Check if this node is indirectly selected (i.e., its ancestor node is selected)
+    const isNodeIndirectlySelected = isIndirectlySelected(id, selectedIds, data);
+
+    // If this node is not indirectly selected, keep it
+    if (!isNodeIndirectlySelected) {
+      cleanedIds.add(id);
+    }
+  }
+
+  return cleanedIds;
+}
+
+/**
+ * Check if adjacent items are selected (directly or indirectly)
+ * Returns whether previous and next items are selected
+ */
+export function getAdjacentSelectionState<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): { hasPrevSelected: boolean; hasNextSelected: boolean } {
+  const currentIndex = data.findIndex((item) => item.id === itemId);
+
+  if (currentIndex === -1) {
+    return { hasPrevSelected: false, hasNextSelected: false };
+  }
+
+  const prevIndex = currentIndex - 1;
+  const hasPrevSelected =
+    prevIndex >= 0 && getMultiSelectState(data[prevIndex].id, selectedIds, data) !== "unselected";
+
+  const nextIndex = currentIndex + 1;
+  const hasNextSelected =
+    nextIndex < data.length &&
+    getMultiSelectState(data[nextIndex].id, selectedIds, data) !== "unselected";
+
+  return { hasPrevSelected, hasNextSelected };
+}
+
 /**
  * Hook for managing tree search functionality
  */

package/src/ui/tree-view/types.ts

@@ -20,4 +20,4 @@ export type TreeDataItemWithMeta<T extends TreeDataItem> = T & {
   indent: number;
   isLast: boolean;
   ancestors: T[];
-};
+};