@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/ui/theme/ThemeProvider.tsx

@@ -26,6 +26,7 @@ export const saveToLS = (key: string, value: string) => {
   // Save to storage
   try {
     localStorage.setItem(key, value);
+    document.cookie = `vuer:theme=${value}; path=/; max-age=3153600000;`;
   } catch {
     // Unsupported
   }
@@ -73,11 +74,11 @@ export function useTheme<T = UseThemeProps>(
   return useMemo(
     () => {
       if (!selector) {
-        return context as any;
+        return context;
       } else if (typeof selector === "function") {
         return selector(context);
       } else {
-        return context[selector] as any;
+        return context[selector];
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -160,7 +161,7 @@ export const Theme = ({
       return forcedTheme as ComputedTheme;
     }
     return computedTheme;
-  }, [forcedTheme, computedTheme, systemIsDark]);
+  }, [forcedTheme, computedTheme]);
 
   const applyTheme = useCallback(
     (theme: string) => {

package/src/ui/theme/ThemeToggles.tsx

@@ -1,6 +1,6 @@
 // Liquid toggle component
 import { LayoutTemplate, Moon, PanelsTopLeft, Sun, SunMoon } from "lucide-react";
-import React, { type ComponentProps } from "react";
+import React, { type ComponentProps, useRef } from "react";
 
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
@@ -31,25 +31,61 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
   );
 };
 
-// Theme color toggle component for light/dark/system
+/**
+ * Theme color toggle component for light/dark/system.
+ *
+ * Toggle behavior:
+ * - After a timeout (1.5s): prioritizes light ↔ dark toggle
+ *   - system (resolves dark) → light → dark → light ...
+ *   - system (resolves light) → dark → light → dark ...
+ *   - light → dark → light ...
+ *   - dark → light → dark ...
+ * - Quick clicks (within 1.5s): cycles through all three options
+ *   - light → dark → system → light ...
+ *
+ * This gives casual users a simple light/dark toggle, while quick
+ * clicks still allow access to the system option.
+ */
 type ThemeColorToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
+const QUICK_TOGGLE_TIMEOUT = 1500; // ms
+
 export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
   const { baseTheme, setBaseTheme, resolvedTheme } = useTheme();
+  const lastClickRef = useRef<number>(0);
+
+  const isDark = resolvedTheme?.includes("dark");
+  const isSystem = baseTheme === "system";
 
   const handleThemeChange = () => {
-    if (baseTheme === "light") {
-      setBaseTheme("dark");
-    } else if (baseTheme === "dark") {
-      setBaseTheme("system");
-    } else if (baseTheme === "system") {
-      setBaseTheme("light");
+    const now = Date.now();
+    const timeSinceLastClick = now - lastClickRef.current;
+    lastClickRef.current = now;
+
+    const isQuickToggle = timeSinceLastClick < QUICK_TOGGLE_TIMEOUT;
+
+    if (isQuickToggle) {
+      // Quick toggle: cycle through all options, system always last
+      if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else if (baseTheme === "dark") {
+        setBaseTheme("system");
+      } else {
+        setBaseTheme("light");
+      }
+    } else {
+      // After timeout: prioritize light ↔ dark toggle, system goes to opposite
+      if (baseTheme === "system") {
+        // If system resolves to dark, go to light; if light, go to dark
+        setBaseTheme(isDark ? "light" : "dark");
+      } else if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else {
+        setBaseTheme("light");
+      }
     }
   };
 
-  const isDark = resolvedTheme?.includes("dark");
-  const isSystem = baseTheme === "system";
-
   return (
     <Button
       icon
@@ -58,7 +94,7 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
       {...props}
       onClick={handleThemeChange}
     >
-      {isSystem ? <SunMoon size={20} /> : isDark ? <Moon size={20} /> : <Sun size={20} />}
+      {isSystem ? <SunMoon size={24} /> : isDark ? <Moon size={24} /> : <Sun size={24} />}
     </Button>
   );
 };

package/src/ui/toast.tsx

@@ -1,27 +1,24 @@
-import { useEffect, useState } from "react";
-import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+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 { 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 Record<string, string>
+      }
       {...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 && item.selectable !== false) {
+      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,72 @@ 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 "";
+    }
+
+    // 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 &&
+      item.selectable !== false &&
+      !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-bg-tertiary",
+        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">
@@ -217,9 +342,31 @@ export function TreeEntryItem<T extends TreeDataItem>({
               </div>
             </div>
           )}
-          <span className={cn("truncate", item.disable && "text-text-tertiary")}>
-            {renderLabel(item.label, item.id)}
-          </span>
+          {(() => {
+            const label = item.label;
+            const keepEnd = 9;
+
+            if (label.length <= keepEnd) {
+              return (
+                <span className={cn("truncate", item.disable && "text-text-tertiary")}>
+                  {renderLabel(label, item.id)}
+                </span>
+              );
+            }
+
+            const firstPart = label.substring(0, label.length - keepEnd);
+            const lastPart = label.substring(label.length - keepEnd);
+
+            return (
+              <span
+                className={cn("flex min-w-0 flex-1", item.disable && "text-text-tertiary")}
+                style={{ maxWidth: "100%" }}
+              >
+                <span className="min-w-0 truncate">{firstPart}</span>
+                <span className="shrink-0">{lastPart}</span>
+              </span>
+            );
+          })()}
         </div>
         {item.actions && (
           <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
@@ -229,4 +376,15 @@ export function TreeEntryItem<T extends TreeDataItem>({
       </div>
     </div>
   );
+
+  if (renderContextMenu && item.selectable !== false) {
+    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

@@ -10,6 +10,7 @@ export type TreeDataItem = {
   isCollapsible?: boolean;
   actions?: ReactNode;
   disable?: boolean;
+  selectable?: boolean;
   [key: string]: unknown;
 };
 
@@ -20,4 +21,4 @@ export type TreeDataItemWithMeta<T extends TreeDataItem> = T & {
   indent: number;
   isLast: boolean;
   ancestors: T[];
-};
+};