ai-design-system 0.1.6 → 0.1.8

package/components/ai-elements/confirmation.tsx

@@ -21,8 +21,8 @@ type ToolUIPart = {
   type: `tool-${string}`;
   state: ToolUIState;
   approval?: ToolApproval;
-  input?: any;
-  output?: any;
+  input?: unknown;
+  output?: unknown;
   errorText?: string;
 };
 import {

package/components/ai-elements/inline-citation.tsx

@@ -163,12 +163,23 @@ export const InlineCitationCarouselIndex = ({
       return;
     }
 
-    setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap() + 1);
+    const updateState = () => {
+      setCount(api.scrollSnapList().length);
+      setCurrent(api.selectedScrollSnap() + 1);
+    };
 
-    api.on("select", () => {
+    const handleSelect = () => {
       setCurrent(api.selectedScrollSnap() + 1);
-    });
+    };
+
+    // Use requestAnimationFrame to defer state updates
+    requestAnimationFrame(updateState);
+
+    api.on("select", handleSelect);
+
+    return () => {
+      api.off("select", handleSelect);
+    };
   }, [api]);
 
   return (

package/components/ai-elements/prompt-input.tsx

@@ -997,13 +997,13 @@ interface SpeechRecognition extends EventTarget {
   lang: string;
   start(): void;
   stop(): void;
-  onstart: ((this: SpeechRecognition, ev: Event) => any) | null;
-  onend: ((this: SpeechRecognition, ev: Event) => any) | null;
+  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
   onresult:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any)
+    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void)
     | null;
   onerror:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any)
+    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void)
     | null;
 }
 
@@ -1113,7 +1113,11 @@ export const PromptInputSpeechButton = ({
       };
 
       recognitionRef.current = speechRecognition;
-      setRecognition(speechRecognition);
+      
+      // Defer state update to avoid cascading renders
+      requestAnimationFrame(() => {
+        setRecognition(speechRecognition);
+      });
     }
 
     return () => {

package/components/ai-elements/reasoning.tsx

@@ -69,12 +69,22 @@ export const Reasoning = memo(
     useEffect(() => {
       if (isStreaming) {
         if (startTime === null) {
-          setStartTime(Date.now());
+          // Defer state update to avoid cascading renders
+          const timer = setTimeout(() => {
+            setStartTime(Date.now());
+          }, 0);
+          return () => clearTimeout(timer);
         }
       } else if (startTime !== null) {
-        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-        setStartTime(null);
+        const calculatedDuration = Math.ceil((Date.now() - startTime) / MS_IN_S);
+        // Use setTimeout to defer state updates and avoid cascading renders
+        const timer = setTimeout(() => {
+          setDuration(calculatedDuration);
+          setStartTime(null);
+        }, 0);
+        return () => clearTimeout(timer);
       }
+      return undefined;
     }, [isStreaming, startTime, setDuration]);
 
     // Auto-open when streaming starts, auto-close when streaming ends (once only)
@@ -88,6 +98,7 @@ export const Reasoning = memo(
 
         return () => clearTimeout(timer);
       }
+      return undefined;
     }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
 
     const handleOpenChange = (newOpen: boolean) => {

package/components/ai-elements/shimmer.tsx

@@ -4,15 +4,12 @@ import { cn } from "@/lib/utils";
 import { motion } from "motion/react";
 import {
   type CSSProperties,
-  type ElementType,
-  type JSX,
   memo,
   useMemo,
 } from "react";
 
 export type TextShimmerProps = {
   children: string;
-  as?: ElementType;
   className?: string;
   duration?: number;
   spread?: number;
@@ -20,22 +17,17 @@ export type TextShimmerProps = {
 
 const ShimmerComponent = ({
   children,
-  as: Component = "p",
   className,
   duration = 2,
   spread = 2,
 }: TextShimmerProps) => {
-  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements
-  );
-
   const dynamicSpread = useMemo(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
 
   return (
-    <MotionComponent
+    <motion.p
       animate={{ backgroundPosition: "0% center" }}
       className={cn(
         "relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent",
@@ -57,7 +49,7 @@ const ShimmerComponent = ({
       }}
     >
       {children}
-    </MotionComponent>
+    </motion.p>
   );
 };
 

package/components/ai-elements/tool.tsx

@@ -20,8 +20,8 @@ type ToolUIState =
 type ToolUIPart = {
   type: `tool-${string}`;
   state: ToolUIState;
-  input?: any;
-  output?: any;
+  input?: unknown;
+  output?: unknown;
   errorText?: string;
 };
 import {

package/components/ai-elements/web-preview.tsx

@@ -137,7 +137,10 @@ export const WebPreviewUrl = ({
 
   // Sync input value with context URL when it changes externally
   useEffect(() => {
-    setInputValue(url);
+    // Defer state update to avoid cascading renders
+    requestAnimationFrame(() => {
+      setInputValue(url);
+    });
   }, [url]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -157,7 +160,7 @@ export const WebPreviewUrl = ({
     <Input
       className="h-8 flex-1 text-sm"
       onChange={onChange ?? handleChange}
-      onKeyDown={handleKeyDown}
+      onKeyDown={onKeyDown ?? handleKeyDown}
       placeholder="Enter URL..."
       value={value ?? inputValue}
       {...props}

package/components/blocks/FileChangeQueue/FileChangeQueue.tsx

@@ -114,17 +114,17 @@ const transformFileChangesToGroups = (
  */
 export const FileChangeQueue = React.memo<FileChangeQueueProps>(
   ({ changes, title, state, approval, onApprove, onReject, className }) => {
-    // Only display if at least 1 file change exists
-    if (changes.length === 0) {
-      return null;
-    }
-
     // Transform file changes to groups
     const groups = React.useMemo(
       () => transformFileChangesToGroups(changes),
       [changes]
     );
 
+    // Only display if at least 1 file change exists
+    if (changes.length === 0) {
+      return null;
+    }
+
     return (
       <Confirmation
         title={title}

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -42,6 +42,7 @@ export interface WorkflowCanvasProps {
   onConnectStart?: (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
   onConnectEnd?: (event: MouseEvent | TouchEvent) => void;
   onPaneClick?: () => void;
+  onNodeClick?: (event: React.MouseEvent, node: WorkflowNode) => void;
   onEdgeClick?: (event: React.MouseEvent, edge: WorkflowEdge) => void;
   showMinimap?: boolean;
   /** Enable/disable manual drawing of connections and node dragging. Default: false */
@@ -72,6 +73,7 @@ function WorkflowCanvasInner({
   onConnectStart,
   onConnectEnd,
   onPaneClick,
+  onNodeClick,
   onEdgeClick,
   showMinimap = false,
   interactive = false,
@@ -142,6 +144,7 @@ function WorkflowCanvasInner({
         onEdgesChange={interactive ? onEdgesChange : undefined}
         onNodesChange={interactive ? onNodesChange : undefined}
         onPaneClick={onPaneClick}
+        onNodeClick={onNodeClick}
         onEdgeClick={onEdgeClick}
       >
         {topLeft && (

package/components/composites/DocumentEditor/DocumentEditor.tsx

@@ -141,21 +141,23 @@ export const DocumentEditor = React.memo<DocumentEditorProps>(
         
         // Small delay to ensure selection is finalized
         setTimeout(() => {
-          let { from, to, empty } = editor.state.selection
+          const { from, to, empty } = editor.state.selection
           if (!empty) {
             let text = editor.state.doc.textBetween(from, to)
+            let adjustedFrom = from
+            let adjustedTo = to
             
             // Trim leading whitespace and adjust range
             const leadingWhitespace = text.match(/^\s+/)
             if (leadingWhitespace) {
-              from += leadingWhitespace[0].length
+              adjustedFrom += leadingWhitespace[0].length
               text = text.trimStart()
             }
             
             // Trim trailing whitespace and adjust range
             const trailingWhitespace = text.match(/\s+$/)
             if (trailingWhitespace) {
-              to -= trailingWhitespace[0].length
+              adjustedTo -= trailingWhitespace[0].length
               text = text.trimEnd()
             }
             
@@ -164,7 +166,7 @@ export const DocumentEditor = React.memo<DocumentEditorProps>(
             
             // Log selected text for API usage
             console.log('Selected text:', text)
-            console.log('Selection range:', { from, to })
+            console.log('Selection range:', { from: adjustedFrom, to: adjustedTo })
             
             // Calculate position for CommentBox based on selection
             const selection = window.getSelection()
@@ -179,9 +181,9 @@ export const DocumentEditor = React.memo<DocumentEditorProps>(
               // Clear the browser selection
               selection.removeAllRanges()
               
-              onTextSelect({ from, to }, text, position)
+              onTextSelect({ from: adjustedFrom, to: adjustedTo }, text, position)
             } else {
-              onTextSelect({ from, to }, text)
+              onTextSelect({ from: adjustedFrom, to: adjustedTo }, text)
             }
           }
         }, 10)

package/components/composites/InteractiveChart/InteractiveChart.tsx

@@ -7,7 +7,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/primitives/ToggleGrou
 export interface InteractiveChartProps {
   title: string
   description?: string
-  data: any[]
+  data: unknown[]
   config: ChartConfig
   timeRanges?: { label: string; value: string }[]
   defaultTimeRange?: string

package/components/composites/TablePagination/TablePagination.tsx

@@ -26,7 +26,7 @@ export interface TablePaginationProps {
   /**
    * TanStack Table instance
    */
-  table: Table<any>
+  table: Table<unknown>
   /**
    * Available page size options
    */

package/components/composites/TableToolbar/TableToolbar.tsx

@@ -11,7 +11,7 @@ import { Icon } from "@/components/primitives/Icon"
 import type { Table } from "@tanstack/react-table"
 
 export interface TableToolbarProps {
-  table: Table<any>
+  table: Table<unknown>
   searchPlaceholder?: string
   searchColumn?: string
   actions?: React.ReactNode

package/components/features/PageLayout/PageLayout.tsx

@@ -51,8 +51,9 @@ export interface PageLayoutProps {
   header: AppHeaderProps
   /**
    * Page content
+   * Optional when layoutSections is provided
    */
-  children: React.ReactNode
+  children?: React.ReactNode
   /**
    * Additional CSS classes
    */

package/components/features/WorkflowBuilder/WorkflowBuilder.tsx

@@ -20,6 +20,7 @@ export interface WorkflowBuilderProps {
   onNodesChange?: (changes: NodeChange[]) => void;
   onEdgesChange?: (changes: EdgeChange[]) => void;
   onConnect?: (connection: Connection) => void;
+  onNodeClick?: (event: React.MouseEvent, node: WorkflowNode) => void;
   onEdgeClick?: (event: React.MouseEvent, edge: WorkflowEdge) => void;
 
   // Toolbar — right actions
@@ -49,6 +50,7 @@ export function WorkflowBuilder({
   onNodesChange,
   onEdgesChange,
   onConnect,
+  onNodeClick,
   onEdgeClick,
   isSaving = false,
   hasUnsavedChanges = false,
@@ -98,6 +100,7 @@ export function WorkflowBuilder({
         onConnect={onConnect}
         onEdgesChange={onEdgesChange}
         onNodesChange={onNodesChange}
+        onNodeClick={onNodeClick}
         onEdgeClick={onEdgeClick}
       />
     </div>

package/components/ui/carousel.tsx

@@ -95,12 +95,20 @@ function Carousel({
 
   React.useEffect(() => {
     if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
+
+    const handleSelect = () => {
+      onSelect(api)
+    }
+
+    // Initial call
+    handleSelect()
+
+    api.on("reInit", handleSelect)
+    api.on("select", handleSelect)
 
     return () => {
-      api?.off("select", onSelect)
+      api.off("reInit", handleSelect)
+      api.off("select", handleSelect)
     }
   }, [api, onSelect])
 

package/components/ui/chart.tsx

@@ -105,16 +105,16 @@ const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
     active?: boolean
-    payload?: any[]
+    payload?: unknown[]
     label?: string
     hideLabel?: boolean
     hideIndicator?: boolean
     indicator?: "line" | "dot" | "dashed"
     nameKey?: string
     labelKey?: string
-    labelFormatter?: (value: any, payload: any[]) => React.ReactNode
+    labelFormatter?: (value: unknown, payload: unknown[]) => React.ReactNode
     labelClassName?: string
-    formatter?: (value: any, name: any, item: any, index: any, payload: any) => React.ReactNode
+    formatter?: (value: unknown, name: unknown, item: unknown, index: number, payload: unknown) => React.ReactNode
     color?: string
   }
 >(
@@ -143,7 +143,7 @@ const ChartTooltipContent = React.forwardRef<
         return null
       }
 
-      const [item] = payload
+      const [item] = payload as Record<string, unknown>[]
       const key = `${labelKey || item.dataKey || item.name || "value"}`
       const itemConfig = config[key as keyof typeof config]
       const value =
@@ -190,14 +190,14 @@ const ChartTooltipContent = React.forwardRef<
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
-          {payload.map((item, index) => {
+          {(payload as Record<string, unknown>[]).map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`
             const itemConfig = config[key as keyof typeof config]
-            const indicatorColor = color || item.payload.fill || item.color
+            const indicatorColor = color || (item.payload as Record<string, unknown>)?.fill || item.color
 
             return (
               <div
-                key={item.dataKey}
+                key={item.dataKey as string}
                 className={cn(
                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
@@ -245,7 +245,7 @@ const ChartTooltipContent = React.forwardRef<
                       </div>
                       {item.value && (
                         <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
+                          {(item.value as number).toLocaleString()}
                         </span>
                       )}
                     </div>
@@ -266,7 +266,7 @@ const ChartLegend = RechartsPrimitive.Legend
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    payload?: any[]
+    payload?: unknown[]
     verticalAlign?: "top" | "bottom"
     hideIcon?: boolean
     nameKey?: string
@@ -291,13 +291,13 @@ const ChartLegendContent = React.forwardRef<
           className
         )}
       >
-        {payload.map((item) => {
+        {(payload as Record<string, unknown>[]).map((item) => {
           const key = `${nameKey || item.dataKey || "value"}`
           const itemConfig = config[key as keyof typeof config]
 
           return (
             <div
-              key={item.value}
+              key={item.value as string}
               className={cn(
                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
@@ -308,7 +308,7 @@ const ChartLegendContent = React.forwardRef<
                 <div
                   className="h-2 w-2 shrink-0 rounded-[2px]"
                   style={{
-                    backgroundColor: item.color,
+                    backgroundColor: item.color as string,
                   }}
                 />
               )}

package/dist/index.cjs

@@ -823,11 +823,15 @@ function Carousel(_a) {
   }, [api, setApi]);
   React33__namespace.useEffect(() => {
     if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const handleSelect = () => {
+      onSelect(api);
+    };
+    handleSelect();
+    api.on("reInit", handleSelect);
+    api.on("select", handleSelect);
     return () => {
-      api == null ? void 0 : api.off("select", onSelect);
+      api.off("reInit", handleSelect);
+      api.off("select", handleSelect);
     };
   }, [api, onSelect]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1116,9 +1120,10 @@ var ChartTooltipContent = React33__namespace.forwardRef(
         children: [
           !nestLabel ? tooltipLabel : null,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+            var _a;
             const key = `${nameKey || item.name || item.dataKey || "value"}`;
             const itemConfig = config[key];
-            const indicatorColor = color || item.payload.fill || item.color;
+            const indicatorColor = color || ((_a = item.payload) == null ? void 0 : _a.fill) || item.color;
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -4453,14 +4458,10 @@ var UserMessage = React33__namespace.memo(
 UserMessage.displayName = "UserMessage";
 var ShimmerComponent = ({
   children,
-  as: Component = "p",
   className,
   duration = 2,
   spread = 2
 }) => {
-  const MotionComponent = react$1.motion.create(
-    Component
-  );
   const dynamicSpread = React33.useMemo(
     () => {
       var _a;
@@ -4469,7 +4470,7 @@ var ShimmerComponent = ({
     [children, spread]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    MotionComponent,
+    react$1.motion.p,
     {
       animate: { backgroundPosition: "0% center" },
       className: cn(
@@ -6324,22 +6325,24 @@ var DocumentEditor = React33__namespace.default.memo(
           return;
         }
         setTimeout(() => {
-          let { from, to, empty } = editor.state.selection;
+          const { from, to, empty } = editor.state.selection;
           if (!empty) {
             let text = editor.state.doc.textBetween(from, to);
+            let adjustedFrom = from;
+            let adjustedTo = to;
             const leadingWhitespace = text.match(/^\s+/);
             if (leadingWhitespace) {
-              from += leadingWhitespace[0].length;
+              adjustedFrom += leadingWhitespace[0].length;
               text = text.trimStart();
             }
             const trailingWhitespace = text.match(/\s+$/);
             if (trailingWhitespace) {
-              to -= trailingWhitespace[0].length;
+              adjustedTo -= trailingWhitespace[0].length;
               text = text.trimEnd();
             }
             if (!text.trim()) return;
             console.log("Selected text:", text);
-            console.log("Selection range:", { from, to });
+            console.log("Selection range:", { from: adjustedFrom, to: adjustedTo });
             const selection = window.getSelection();
             if (selection && selection.rangeCount > 0) {
               const range = selection.getRangeAt(0);
@@ -6350,9 +6353,9 @@ var DocumentEditor = React33__namespace.default.memo(
                 // 8px below selection
               };
               selection.removeAllRanges();
-              onTextSelect({ from, to }, text, position);
+              onTextSelect({ from: adjustedFrom, to: adjustedTo }, text, position);
             } else {
-              onTextSelect({ from, to }, text);
+              onTextSelect({ from: adjustedFrom, to: adjustedTo }, text);
             }
           }
         }, 10);
@@ -7566,13 +7569,13 @@ var transformFileChangesToGroups = (changes) => {
 };
 var FileChangeQueue = React33__namespace.memo(
   ({ changes, title, state, approval, onApprove, onReject, className }) => {
-    if (changes.length === 0) {
-      return null;
-    }
     const groups = React33__namespace.useMemo(
       () => transformFileChangesToGroups(changes),
       [changes]
     );
+    if (changes.length === 0) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Confirmation2,
       {
@@ -7839,6 +7842,7 @@ function WorkflowCanvasInner({
   onConnectStart,
   onConnectEnd,
   onPaneClick,
+  onNodeClick,
   onEdgeClick,
   showMinimap = false,
   interactive = false,
@@ -7907,6 +7911,7 @@ function WorkflowCanvasInner({
           onEdgesChange: interactive ? onEdgesChange : void 0,
           onNodesChange: interactive ? onNodesChange : void 0,
           onPaneClick,
+          onNodeClick,
           onEdgeClick,
           children: [
             topLeft && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8110,6 +8115,7 @@ function WorkflowBuilder({
   onNodesChange,
   onEdgesChange,
   onConnect,
+  onNodeClick,
   onEdgeClick,
   isSaving = false,
   hasUnsavedChanges = false,
@@ -8154,6 +8160,7 @@ function WorkflowBuilder({
       onConnect,
       onEdgesChange,
       onNodesChange,
+      onNodeClick,
       onEdgeClick
     }
   ) });