fix(core,agent,hooks,theme): add 'use client' directives for RSC compatibility

.changeset/use-client-directives.md

@@ -0,0 +1,8 @@
+---
+'@surf-kit/core': patch
+'@surf-kit/agent': patch
+'@surf-kit/hooks': patch
+'@surf-kit/theme': patch
+---
+
+Add 'use client' directives for React Server Components compatibility

packages/agent/src/chat/MessageComposer/MessageComposer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback } from 'react'
 

packages/agent/src/chat/MessageThread/MessageThread.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useEffect, useRef } from 'react'
 import type { ChatMessage } from '../../types/chat'

packages/agent/src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { ConfidenceBreakdown as ConfidenceBreakdownType } from '../../types/agent'
 import { ConfidenceBadge } from '../ConfidenceBadge'

packages/agent/src/confidence/VerificationDetail/VerificationDetail.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { VerificationResult } from '../../types/agent'
 import { VerificationBadge } from '../VerificationBadge'

packages/agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { Dialog, Button, TextArea } from '@surf-kit/core'
 

packages/agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 
 type FeedbackRating = 'positive' | 'negative'

packages/agent/src/hooks/useAgentChat.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useReducer, useCallback, useRef } from 'react'
 import type { ChatMessage, ChatError } from '../types/chat'
 import type { AgentResponse } from '../types/agent'

packages/agent/src/hooks/useAgentTheme.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useMemo } from 'react'
 import type { AgentInfo } from '../types/agent'
 

packages/agent/src/hooks/useCharacterDrain.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useRef, useEffect } from 'react'
 
 export interface CharacterDrainResult {

packages/agent/src/hooks/useConversation.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback } from 'react'
 import type { ChatMessage } from '../types/chat'
 import type { ConversationSummary } from '../types/chat'

packages/agent/src/hooks/useFeedback.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef } from 'react'
 
 export type FeedbackState = 'idle' | 'submitting' | 'submitted' | 'error'

packages/agent/src/hooks/useStreaming.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef, useEffect } from 'react'
 import type { StreamEvent, StreamState } from '../types/streaming'
 import type { Source } from '../types/agent'

packages/agent/src/layouts/AgentFullPage/AgentFullPage.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useCallback } from 'react'
 import { AgentChat } from '../../chat/AgentChat'

packages/agent/src/layouts/AgentPanel/AgentPanel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'
 import { AgentChat } from '../../chat/AgentChat'

packages/agent/src/layouts/AgentWidget/AgentWidget.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useCallback } from 'react'
 import { AgentChat } from '../../chat/AgentChat'

packages/agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useRef, useEffect } from 'react'
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'

packages/agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'

packages/agent/src/sources/SourceList/SourceList.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { Source } from '../../types/agent'
 import { SourceCard } from '../SourceCard'

packages/agent/src/streaming/StreamingMessage/StreamingMessage.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useRef } from 'react'
 import { Spinner } from '@surf-kit/core'
 import type { StreamState } from '../../types/streaming'

packages/agent/src/streaming/TypewriterText/TypewriterText.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 
 export type TypewriterTextProps = {

packages/agent/tsup.config.ts

@@ -19,4 +19,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react', 'react-dom', /^@surf-kit\//],
+  banner: { js: "'use client';" },
 }))

packages/core/src/data/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback } from 'react'
 

packages/core/src/data/Carousel/Carousel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useRef, useCallback, useEffect, Children } from 'react'
 import { twMerge } from 'tailwind-merge'
 

packages/core/src/data/Collapsible/Collapsible.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { createContext, useCallback, useContext, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 

packages/core/src/data/Table/Table.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React from 'react'
 

packages/core/src/feedback/Avatar/Avatar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useState } from 'react'

packages/core/src/feedback/Toast/Toast.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   createContext,
   useContext,

packages/core/src/inputs/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'

packages/core/src/inputs/Calendar/Calendar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useCalendar, useCalendarGrid, useCalendarCell, useButton, useLocale } from 'react-aria'

packages/core/src/inputs/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useCheckbox } from 'react-aria'

packages/core/src/inputs/IconButton/IconButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'

packages/core/src/inputs/RadioGroup/RadioGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { createContext, useContext, useRef } from 'react'
 import { useRadioGroup, useRadio } from 'react-aria'

packages/core/src/inputs/SearchInput/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSearchField, useButton } from 'react-aria'

packages/core/src/inputs/Select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSelect, useListBox, useOption, useButton, HiddenSelect } from 'react-aria'

packages/core/src/inputs/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSlider, useSliderThumb, VisuallyHidden } from 'react-aria'

packages/core/src/inputs/Switch/Switch.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSwitch } from 'react-aria'

packages/core/src/inputs/TextArea/TextArea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTextField } from 'react-aria'

packages/core/src/inputs/TextInput/TextInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTextField } from 'react-aria'

packages/core/src/inputs/Toggle/Toggle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { createContext, useContext, useRef } from 'react'

packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useCallback, useState } from 'react'
 import { ToggleGroupCtx } from '../Toggle'

packages/core/src/layout/Resizable/Resizable.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 

packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useBreadcrumbs, useBreadcrumbItem } from 'react-aria'

packages/core/src/navigation/Menubar/Menubar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react'
 

packages/core/src/navigation/NavigationMenu/NavigationMenu.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 

packages/core/src/navigation/Pagination/Pagination.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'

packages/core/src/navigation/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTabList, useTab, useTabPanel } from 'react-aria'

packages/core/src/overlay/Command/Command.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, {
   useState,

packages/core/src/overlay/ContextMenu/ContextMenu.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 

packages/core/src/overlay/Dialog/Dialog.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'

packages/core/src/overlay/Drawer/Drawer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'

packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useMenuTrigger, useMenu, useMenuItem, useButton } from 'react-aria'

packages/core/src/overlay/HoverCard/HoverCard.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 

packages/core/src/overlay/Popover/Popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useOverlay, DismissButton, FocusScope } from 'react-aria'

packages/core/src/overlay/Sheet/Sheet.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'

packages/core/src/overlay/Tooltip/Tooltip.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, cloneElement } from 'react'
 import { useTooltip, useTooltipTrigger, mergeProps } from 'react-aria'

packages/core/tsup.config.ts

@@ -16,4 +16,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react', 'react-dom', /^@surf-kit\//],
+  banner: { js: "'use client';" },
 }))

packages/hooks/src/useAnnounce.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useRef } from 'react'
 
 type Priority = 'polite' | 'assertive'

packages/hooks/src/useClipboard.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef } from 'react'
 
 export function useClipboard(): { copy: (text: string) => Promise<void>; copied: boolean } {

packages/hooks/src/useFocusTrap.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useRef, type RefObject } from 'react'
 
 const FOCUSABLE_SELECTOR =

packages/hooks/src/useKeyboardShortcut.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 
 interface ShortcutOptions {

packages/hooks/src/useLocalStorage.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback } from 'react'
 
 type SetValue<T> = T | ((prev: T) => T)

packages/hooks/src/useMediaQuery.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 
 export function useMediaQuery(query: string): boolean {

packages/hooks/tsup.config.ts

@@ -8,4 +8,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react'],
+  banner: { js: "'use client';" },
 }))

packages/theme/src/ThemeProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   createContext,
   useCallback,

packages/theme/src/useColorMode.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useState } from 'react'
 import { useTheme } from './useTheme'
 import type { ColorMode, ColorModePreference } from './types'