@dust-tt/sparkle 0.2.615 → 0.2.617-rc-1

package/src/components/DataTable.tsx

@@ -15,7 +15,13 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React, { ReactNode, useEffect, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 
 import {
   Avatar,
@@ -339,6 +345,24 @@ export interface ScrollableDataTableProps<TData extends TBaseData>
 const COLUMN_HEIGHT = 48;
 const MIN_COLUMN_WIDTH = 40;
 
+// Helper function to compare column sizing objects
+function shallowEqualSizing(
+  a: Record<string, number>,
+  b: Record<string, number>
+) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  for (const k of aKeys) {
+    if (a[k] !== b[k]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export function ScrollableDataTable<TData extends TBaseData>({
   data,
   totalRowCount,
@@ -360,7 +384,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [tableWidth, setTableWidth] = useState(0);
 
-  // Monitor table width changes
+  // Monitor table width changes with guard against tiny changes
   useEffect(() => {
     if (!tableContainerRef.current) {
       return;
@@ -368,7 +392,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        setTableWidth(entry.contentRect.width);
+        const w = Math.round(entry.contentRect.width);
+        setTableWidth((prev) => (prev !== w ? w : prev)); // update only on real change
       }
     });
 
@@ -405,12 +430,20 @@ export function ScrollableDataTable<TData extends TBaseData>({
     getRowId,
   });
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!tableContainerRef.current || !table || !tableWidth) {
       return;
     }
     const columns = table.getAllColumns();
 
+    // Skip sizing if no columns have ratios defined
+    const hasRatios = columns.some(
+      (c) => (c.columnDef.meta?.sizeRatio ?? 0) > 0
+    );
+    if (!hasRatios) {
+      return;
+    }
+
     // Calculate ideal widths and handle minimums
     const idealSizing = columns.reduce(
       (acc, column) => {
@@ -419,7 +452,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
           Math.floor((ratio / 100) * tableWidth),
           MIN_COLUMN_WIDTH
         );
-        return { ...acc, [column.id]: calculated };
+        acc[column.id] = calculated;
+        return acc;
       },
       {} as Record<string, number>
     );
@@ -439,8 +473,13 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
       idealSizing[adjustColumnId] += widthDifference;
     }
-    table.setColumnSizing(idealSizing);
-  }, [table, tableWidth]);
+
+    // Only set when sizing actually changes
+    const currentSizing = table.getState().columnSizing;
+    if (!shallowEqualSizing(idealSizing, currentSizing)) {
+      table.setColumnSizing(idealSizing);
+    }
+  }, [tableWidth]); // intentionally remove `table` from deps
 
   // Get the current column sizing from the table for rendering
   const columnSizing = table.getState().columnSizing;

package/src/components/NavigationList.tsx

@@ -41,18 +41,13 @@ const NavigationListItemStyles = cva(
   }
 );
 
-interface NavigationListProps {
-  viewportRef?: React.RefObject<HTMLDivElement>;
-}
 const NavigationList = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
-    NavigationListProps
->(({ className, children, viewportRef, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => {
   return (
     <ScrollArea
       ref={ref}
-      viewportRef={viewportRef}
       className={cn(className, "s-transition-all s-duration-300")}
       {...props}
     >

package/src/components/ScrollArea.tsx

@@ -14,7 +14,6 @@ interface ScrollAreaProps
     active?: string;
     inactive?: string;
   };
-  viewportRef?: React.RefObject<HTMLDivElement>;
 }
 
 const ScrollArea = React.forwardRef<
@@ -30,12 +29,11 @@ const ScrollArea = React.forwardRef<
       scrollBarClassName,
       viewportClassName,
       scrollStyles,
-      viewportRef,
       ...props
     },
     ref
   ) => {
-    const localViewportRef = React.useRef<HTMLDivElement>(null);
+    const viewportRef = React.useRef<HTMLDivElement>(null);
     const [isScrolled, setIsScrolled] = React.useState(false);
 
     const hasCustomScrollBar = useMemo(
@@ -52,13 +50,9 @@ const ScrollArea = React.forwardRef<
     const shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
 
     const handleScroll = React.useCallback(() => {
-      if (viewportRef && viewportRef.current) {
+      if (viewportRef.current) {
         setIsScrolled(viewportRef.current.scrollTop > 0);
       }
-
-      if (localViewportRef.current) {
-        setIsScrolled(localViewportRef.current.scrollTop > 0);
-      }
     }, []);
 
     return (
@@ -72,7 +66,7 @@ const ScrollArea = React.forwardRef<
         {...props}
       >
         <ScrollAreaPrimitive.Viewport
-          ref={viewportRef || localViewportRef}
+          ref={viewportRef}
           onScroll={handleScroll}
           className={cn(
             "s-h-full s-w-full s-rounded-[inherit]",

package/src/components/Spinner.tsx

@@ -13,7 +13,7 @@ import animLightLG from "@sparkle/lottie/spinnerLightLG";
 import animLightXS from "@sparkle/lottie/spinnerLightXS";
 
 type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
-const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
 
 type SpinnerVariant =
   | "mono"
@@ -43,7 +43,7 @@ const pxSizeClasses: Record<SpinnerSizeType, string> = {
   md: "24",
   lg: "32",
   xl: "128",
-  "2xl": "192",
+  xxl: "192",
 };
 
 type LottieColorType = [number, number, number, number];
@@ -111,7 +111,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animLightLG;
         break;
       default:
@@ -139,7 +139,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animColorXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animColorLG;
         break;
       default:
@@ -162,7 +162,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animLightLG;
         break;
       default:
@@ -185,7 +185,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animDarkXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animDarkLG;
         break;
       default:
@@ -210,7 +210,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
       darkAnim = animDarkXS;
       break;
     case "xl":
-    case "2xl":
+    case "xxl":
       lightAnim = animLightLG;
       darkAnim = animDarkLG;
       break;

package/src/components/ToolCard.tsx

@@ -15,13 +15,10 @@ export interface ToolCardProps {
   isSelected: boolean;
   canAdd: boolean;
   cantAddReason?: string;
-  toolInfo?: { label: string; onClick: () => void };
   onClick?: () => void;
   className?: string;
-  cardContainerClassName?: string;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
-  descriptionLineClamp?: number;
 }
 
 export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
@@ -33,13 +30,10 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
       isSelected,
       canAdd,
       cantAddReason,
-      toolInfo,
       onClick,
       className,
-      cardContainerClassName,
       mountPortal,
       mountPortalContainer,
-      descriptionLineClamp = 2,
     },
     ref
   ) => {
@@ -49,63 +43,44 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
         variant={isSelected ? "secondary" : "primary"}
         onClick={onClick}
         disabled={!canAdd}
-        containerClassName={cardContainerClassName}
-        className={cn("s-p-3", className)}
+        className={cn("s-h-24 s-p-3", className)}
       >
-        <div className="s-flex s-h-full s-w-full s-flex-col s-justify-between">
-          <div className="s-flex s-flex-col">
-            <div className="s-mb-2 s-flex s-items-center s-justify-between s-gap-2">
-              <div className="s-flex s-items-center s-gap-2">
-                <Avatar icon={icon} size="sm" />
-                <span className="s-text-sm s-font-medium">{label}</span>
-                {isSelected && (
-                  <Chip
-                    size="xs"
-                    color="green"
-                    label="ADDED"
-                    className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
-                  />
-                )}
-              </div>
-              <div className="s-flex s-flex-shrink-0 s-items-center s-gap-2">
-                {canAdd && (
-                  <Button
-                    size="xs"
-                    variant="outline"
-                    icon={PlusIcon}
-                    label="Add"
-                    className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
-                  />
-                )}
-                {cantAddReason && (
-                  <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
-                    {cantAddReason}
-                  </div>
-                )}
-              </div>
+        <div className="s-flex s-w-full s-flex-col">
+          <div className="s-mb-2 s-flex s-items-start s-justify-between s-gap-2">
+            <div className="s-flex s-items-center s-gap-2">
+              <Avatar icon={icon} size="sm" />
+              <span className="s-text-sm s-font-medium">{label}</span>
+              {isSelected && (
+                <Chip
+                  size="xs"
+                  color="green"
+                  label="ADDED"
+                  className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
+                />
+              )}
             </div>
-            <TruncatedText
-              className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
-              mountPortal={mountPortal}
-              mountPortalContainer={mountPortalContainer}
-              lineClamp={descriptionLineClamp}
-            >
-              {description}
-            </TruncatedText>
+            {canAdd && (
+              <Button
+                size="xs"
+                variant="outline"
+                icon={PlusIcon}
+                label="Add"
+                className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
+              />
+            )}
+            {cantAddReason && (
+              <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
+                {cantAddReason}
+              </div>
+            )}
           </div>
-          {toolInfo && (
-            <div>
-              <a
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toolInfo.onClick();
-                }}
-                className="hover:s-underline-offset-2 dark:s-text-muted-foreground-night s-cursor-pointer s-text-sm s-font-semibold s-text-muted-foreground hover:s-text-highlight-light hover:s-underline dark:hover:s-text-highlight-light-night"
-              >
-                {toolInfo.label}
-              </a>
-            </div>
-          )}
+          <TruncatedText 
+            className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
+            mountPortal={mountPortal}
+            mountPortalContainer={mountPortalContainer}
+          >
+            {description}
+          </TruncatedText>
         </div>
       </Card>
     );

package/src/components/Tooltip.tsx

@@ -20,58 +20,47 @@ interface TooltipContentProps
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
->(
-  (
-    {
-      className,
-      sideOffset = 4,
-      mountPortal = true,
-      mountPortalContainer,
-      ...props
-    },
-    ref
-  ) => {
-    const content = (
-      <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={classNames(
-          "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
-          "s-bg-background dark:s-bg-background-night",
-          "s-text-foreground dark:s-text-foreground-night",
-          "s-border-border dark:s-border-border-night",
-          "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
-          "s-animate-in s-fade-in-0 s-zoom-in-95",
-          "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
-          className || ""
-        )}
-        {...props}
-      />
-    );
+>(({ className, sideOffset = 4, mountPortal = true, mountPortalContainer, ...props }, ref) => {
+  const content = (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
+        "s-bg-background dark:s-bg-background-night",
+        "s-text-foreground dark:s-text-foreground-night",
+        "s-border-border dark:s-border-border-night",
+        "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+        "s-animate-in s-fade-in-0 s-zoom-in-95",
+        "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
+        className || ""
+      )}
+      {...props}
+    />
+  );
 
-    const [container, setContainer] = useState<Element | undefined>(
-      mountPortalContainer
-    );
+  const [container, setContainer] = useState<Element | undefined>(
+    mountPortalContainer
+  );
 
-    useEffect(() => {
-      if (mountPortal && !container) {
-        const dialogElements = document.querySelectorAll(
-          ".s-sheet[role=dialog][data-state=open]"
-        );
-        const defaultContainer = dialogElements[dialogElements.length - 1];
-        setContainer(defaultContainer);
-      }
-    }, [mountPortal, container]);
+  useEffect(() => {
+    if (mountPortal && !container) {
+      const dialogElements = document.querySelectorAll(
+        ".s-sheet[role=dialog][data-state=open]"
+      );
+      const defaultContainer = dialogElements[dialogElements.length - 1];
+      setContainer(defaultContainer);
+    }
+  }, [mountPortal, container]);
 
-    return mountPortal ? (
-      <TooltipPrimitive.Portal container={container}>
-        {content}
-      </TooltipPrimitive.Portal>
-    ) : (
-      content
-    );
-  }
-);
+  return mountPortal ? (
+    <TooltipPrimitive.Portal container={container}>
+      {content}
+    </TooltipPrimitive.Portal>
+  ) : (
+    content
+  );
+});
 
 interface TooltipProps extends TooltipContentProps {
   trigger: React.ReactNode;

package/src/components/WindowUtility.tsx

@@ -2,25 +2,30 @@ import { useEffect, useState } from "react";
 
 // Define breakpoints
 export const breakpoints = {
-  xxs: 0,
-  xs: 512,
+  xs: 0,
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
-  "2xl": 1536,
+  xxl: 1536,
 };
 
 // Helper function to determine active breakpoint
 function getActiveBreakpoint(width: number): keyof typeof breakpoints {
-  const breakpointEntries = Object.entries(breakpoints) as [keyof typeof breakpoints, number][];
-  // Sort breakpoints from largest to smallest
-  const sortedBreakpoints = breakpointEntries.sort(([, a], [, b]) => b - a);
-  
-  for (const [breakpoint, minWidth] of sortedBreakpoints) {
-    if (width >= minWidth) {
-      return breakpoint;
-    }
+  if (width >= breakpoints.xxl) {
+    return "xxl";
+  }
+  if (width >= breakpoints.xl) {
+    return "xl";
+  }
+  if (width >= breakpoints.lg) {
+    return "lg";
+  }
+  if (width >= breakpoints.md) {
+    return "md";
+  }
+  if (width >= breakpoints.sm) {
+    return "sm";
   }
   return "xs";
 }
@@ -57,3 +62,5 @@ export function useWindowSize() {
 
   return windowSize;
 }
+
+export default useWindowSize;

package/src/components/markdown/CodeBlock.tsx

@@ -34,7 +34,6 @@ type CodeBlockProps = {
   inline?: boolean;
   variant?: "surface";
   wrapLongLines?: boolean;
-  showLineNumber?: boolean;
 };
 
 export function CodeBlock({
@@ -43,7 +42,6 @@ export function CodeBlock({
   inline,
   variant = "surface",
   wrapLongLines = false,
-  showLineNumber = false,
 }: CodeBlockProps): JSX.Element {
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : "text";
@@ -65,13 +63,6 @@ export function CodeBlock({
       backgroundColor: "transparent",
       fontSize: "0.875rem",
     },
-    "hljs-ln": {
-      color: "var(--s-muted-foreground)",
-      fontSize: "0.75rem",
-      paddingRight: "1em",
-      textAlign: "right",
-      userSelect: "none",
-    },
     "hljs-keyword": {
       // function, const, let, if, return
       color: violet[500],
@@ -157,7 +148,6 @@ export function CodeBlock({
       <div className="s-text-foreground dark:s-text-foreground-night">
         <SyntaxHighlighter
           wrapLongLines={wrapLongLines}
-          showLineNumbers={showLineNumber}
           style={codeStyle}
           language={languageToUse}
           PreTag="div"

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./components";
-export * from "./components/WindowUtility";
 export { SparkleContext } from "./context";
 export * from "./hooks";
 export * from "./icons";

package/src/stories/Avatar.stories.tsx

@@ -44,7 +44,7 @@ export const AvatarExample = () => (
       <Avatar size="md" />
       <Avatar size="lg" />
       <Avatar size="xl" />
-      <Avatar size="2xl" />
+      <Avatar size="xxl" />
     </div>
     <div>With name</div>
     <div className="s-flex s-gap-4">
@@ -53,7 +53,7 @@ export const AvatarExample = () => (
       <Avatar size="md" name="Aria Doe" />
       <Avatar size="lg" name="Omar Doe" />
       <Avatar size="xl" name="Omar Doe" />
-      <Avatar size="2xl" name="Omar Doe" />
+      <Avatar size="xxl" name="Omar Doe" />
     </div>
     <div>With emoji url</div>
     <div className="s-flex s-gap-4">
@@ -69,7 +69,7 @@ export const AvatarExample = () => (
       <Avatar size="md" emoji="😂" backgroundColor="s-bg-info-200" />
       <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-gray-200" />
       <Avatar size="xl" emoji="👕" backgroundColor="s-bg-blue-200" />
-      <Avatar size="2xl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-blue-200" />
     </div>
     <div className="s-flex s-gap-4">
       <Avatar size="sm" name="Eleanor Wright" />
@@ -126,7 +126,7 @@ export const AvatarExample = () => (
       <Avatar size="lg" icon={ActionFlagIcon} />
       <Avatar size="lg" icon={SlackLogo} hexBgColor="#421D51" />
       <Avatar size="xl" icon={ActionShirtIcon} />
-      <Avatar size="2xl" icon={StarStrokeIcon} />
+      <Avatar size="xxl" icon={StarStrokeIcon} />
     </div>
     <div className="heading-2xl">Tools example</div>
     <div>Remote MCP Servers</div>

package/src/stories/MultiPageDialog.stories.tsx

@@ -912,7 +912,7 @@ export const ActionValidation: Story = {
         content: (
           <div className="s-space-y-6 s-pt-4">
             <div>
-              <p className="s-mb-6 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground">
                 Allow{" "}
                 <span className="s-font-semibold">@Marketing Assistant</span> to
                 use the tool <span className="s-font-semibold">Send Email</span>{" "}

package/src/stories/Spinner.stories.tsx

@@ -89,13 +89,13 @@ export const SpinnerExample = () => {
       </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
-          <Spinner variant="color" size="2xl" />
+          <Spinner variant="color" size="xxl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="mono" size="2xl" />
+          <Spinner variant="mono" size="xxl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="rose300" size="2xl" />
+          <Spinner variant="rose300" size="xxl" />
         </div>
       </div>
     </div>