fix(rsc): add "use client" directive to all client-interactive files

50 .tsx components and 6 .ts hook files use React client APIs
(createContext, useState, useEffect, useRef, useMemo, useCallback,
forwardRef, etc.) but lacked the "use client" directive at the top
of the source file. tsc-emitted dist files therefore also lacked it.

Older Next.js / Turbopack versions traversed the import graph and
implicitly treated the imports as client when their consumer was a
client component. Next.js 16's stricter Turbopack rejects this: any
file that touches client-only React APIs must declare "use client"
explicitly, regardless of where it is imported from.

Symptom in consumers (gscSupport build, 2026-05-17):

  ./templates/limitless-ui/dist/theme/ThemeProvider.js:2:10
  You're importing a module that depends on `createContext` into a
  React Server Component module. This API is only available in
  Client Components. To fix, mark the file (or its parent) with
  the `"use client"` directive.

Adding the directive at source-file level cascades through tsc into
the emitted dist/ — verified gscSupport + gscCRM build cleanly after
this change.

Affected files (50 total):
  src/theme/ThemeProvider.tsx
  src/hooks/useDisclosure.ts
  src/components/{Accordion,Carousel,DualListBox,Form,Wizard,…}.tsx
  src/validation/hooks/{useValidation,useFieldValidation,…}.ts
  src/genui/hooks/{useGenUI,useWebMCP}.ts
  ... and more — every component that touches createContext / a
  React hook now self-declares as client.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/Accordion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useState } from 'react';
 import { Collapse } from './Collapse';
 

src/components/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 
 export type ButtonVariant =

src/components/Calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useMemo, useCallback } from 'react';
 
 export interface CalendarEvent {

src/components/Carousel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 export interface CarouselItem {

src/components/ContextMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 export interface ContextMenuItem {

src/components/DataTable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 import {
   ColumnDef,

src/components/Dropdown.tsx

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

src/components/DualListBox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 import { Button } from './Button';
 

src/components/Embed.tsx

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

src/components/FAB.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 
 export interface FABAction {

src/components/FileUpload.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useCallback, DragEvent, ChangeEvent } from 'react';
 
 export interface UploadFile {

src/components/Form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 
 export type FormGroupProps = {

src/components/Gallery.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback, useEffect } from 'react';
 
 export interface GalleryItem {

src/components/IdleTimeout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 export interface IdleTimeoutProps {

src/components/ImageCropper.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 
 export interface CropArea {

src/components/Modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 

src/components/Notification.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 export type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'default';

src/components/Offcanvas.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useCallback } from 'react';
 
 export interface OffcanvasProps {

src/components/Pills.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 
 export interface PillItem {

src/components/Popover.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react';
 

src/components/Rating.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback } from 'react';
 
 export interface RatingProps {

src/components/Scrollspy.tsx

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

src/components/Slider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 
 export interface SliderProps {

src/components/Sortable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 
 export interface SortableItem {

src/components/Stepper.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 
 export interface StepItem {

src/components/SweetAlert.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useCallback } from 'react';
 
 export type SweetAlertType = 'success' | 'error' | 'warning' | 'info' | 'question';

src/components/SyntaxHighlighter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useMemo, useCallback } from 'react';
 
 export type Language =

src/components/Tabs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from 'react';
 
 export type TabItem = {

src/components/TagInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useCallback, KeyboardEvent } from 'react';
 
 export interface Tag {

src/components/Toast.tsx

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

src/components/Tooltip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react';
 

src/components/TreeView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback } from 'react';
 
 export interface TreeNode {

src/components/Widget/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 
 // ============================================================================

src/components/Wizard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from 'react';
 import { Button } from './Button';
 

src/genui/hooks/useGenUI.ts

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * useGenUI Hook
  *

src/genui/hooks/useWebMCP.ts

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * useWebMCP Hook
  *

src/hooks/useDisclosure.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useState } from 'react';
 
 export function useDisclosure(initial = false) {

src/layout/Sidebar.tsx

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

src/pages/Auth.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 
 // Base Auth Layout

src/pages/Chat.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 // Types

src/pages/Error.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 
 // Base Error Layout

src/pages/Invoice.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 
 // Types

src/pages/Mail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback } from 'react';
 
 // Types

src/pages/Search.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback } from 'react';
 
 // Types

src/pages/TaskManager.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useCallback } from 'react';
 
 // Types

src/pages/UserProfile.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from 'react';
 
 // Types

src/theme/ThemeProvider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 export type LimitlessTheme = 'light' | 'dark' | 'material';

src/validation/hooks/useAddressAutocomplete.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { EuropeanAddress, AddressSuggestion, UseAddressAutocompleteOptions } from '../types';
 

src/validation/hooks/useFieldValidation.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type {
   ValidatorFn,

src/validation/hooks/useValidation.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import type {
   FormSchema,