### Install @cyca/utils Package

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Instructions for installing the @cyca/utils package using npm, pnpm, or bun.

```bash
npm install @cyca/utils
# or
pnpm add @cyca/utils
# or
bun add @cyca/utils
```

--------------------------------

### Prepend Protocol to URL with prependHttp

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Ensures a URL string starts with 'http://' or 'https://'. If no protocol is present, it prepends 'http://' by default, or 'https://' if specified.

```typescript
import { prependHttp } from '@cyca/utils'

prependHttp('example.com') // 'http://example.com'
prependHttp('example.com', { https: true }) // 'https://example.com'
```

--------------------------------

### Jotai Atom Initialization Outside React

Source: https://context7.com/cvpcasada/utils/llms.txt

Initializes Jotai atoms outside React components, providing access to get, set, and store functions. The `init` utility allows setting initial values, subscribing to external events, and performing periodic updates. It returns a cleanup function to unregister listeners and clear intervals.

```typescript
import { atom } from 'jotai';
import { init } from '@cyca/utils/jotai';

const countAtom = atom(0);
const userAtom = atom<User | null>(null);

// Initialize state on app start
const cleanup = init((get, set, store) => {
  // Set initial values
  set(countAtom, 100);

  // Subscribe to external events
  const unsubscribe = externalAPI.subscribe((user) => {
    set(userAtom, user);
  });

  // Periodic updates
  const interval = setInterval(() => {
    const current = get(countAtom);
    set(countAtom, current + 1);
  }, 60000);

  // Return cleanup function
  return () => {
    unsubscribe();
    clearInterval(interval);
  };
});

// Later, when app unmounts
cleanup?.();
```

--------------------------------

### Get Image Dimensions from URL with getUrlImageSize

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Fetches an image from a given URL and returns its dimensions (width and height). This is an asynchronous operation.

```typescript
import { getUrlImageSize } from '@cyca/utils'

const { width, height } = await getUrlImageSize('https://example.com/image.jpg')
```

--------------------------------

### Get Image Dimensions from URL in TypeScript

Source: https://context7.com/cvpcasada/utils/llms.txt

Asynchronously loads an image from a given URL and returns its natural width and height. This function is useful for validating image sizes or aspect ratios before displaying them.

```typescript
import { getUrlImageSize } from '@cyca/utils';

async function validateImageSize(url: string) {
  try {
    const { width, height } = await getUrlImageSize(url);

    if (width > 1920 || height > 1080) {
      console.log('Image is too large!');
      return false;
    }

    const aspectRatio = width / height;
    console.log(`Image: ${width}x${height}, ratio: ${aspectRatio.toFixed(2)}`);
    return true;
  } catch (error) {
    console.error('Failed to load image:', error);
    return false;
  }
}
```

--------------------------------

### Use Effect Once - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Ensures a React effect function runs only a single time, even when React's Strict Mode would normally cause it to run twice during development. This hook is ideal for setup or initialization logic that should only occur once per component lifecycle.

```typescript
import { useEffectOnce } from '@cyca/utils/react'

useEffectOnce(() => {
  console.log('Runs only once')
})
```

--------------------------------

### Mitt: mitt for event emitter creation

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a lightweight event emitter instance. It allows defining typed events and subscribing to them using `on`, emitting them with `emit`, and unsubscribing with `off`.

```typescript
import { mitt } from '@cyca/utils/mitt'

type Events = {
  'user:login': { id: string }
  'user:logout': void
}

const emitter = mitt<Events>()

emitter.on('user:login', (data) => {
  console.log('User logged in:', data.id)
})

emitter.emit('user:login', { id: '123' })
```

--------------------------------

### Jotai: init for store initialization

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Initializes state or side effects when a Jotai store is created. It takes an initialization function that can set atom values and return a cleanup function. An optional store can be provided.

```typescript
import { init } from '@cyca/utils/jotai'

const cleanup = init((get, set, store) => {
  // Initialize something
  set(someAtom, initialValue)
  
  // Return cleanup function
  return () => {
    // Cleanup
  }
})
```

--------------------------------

### Prepend HTTP/HTTPS to URLs with TypeScript

Source: https://context7.com/cvpcasada/utils/llms.txt

Automatically prepends 'http://' or 'https://' to URLs lacking a protocol. It handles localhost and paths appropriately, with an option to force HTTP. Existing protocols and relative paths are preserved.

```typescript
import { prependHttp } from '@cyca/utils';

// Default behavior (HTTPS)
console.log(prependHttp('example.com')); // 'https://example.com'
console.log(prependHttp('google.com/search')); // 'https://google.com/search'

// Use HTTP instead
console.log(prependHttp('example.com', { https: false })); // 'http://example.com'

// Preserves existing protocols and paths
console.log(prependHttp('https://example.com')); // 'https://example.com'
console.log(prependHttp('/relative/path')); // '/relative/path'
console.log(prependHttp('./local/file')); // './local/file'
console.log(prependHttp('localhost:3000')); // 'localhost:3000'
```

--------------------------------

### Subscribe to Media Queries with useMediaQuery Hook (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `useMediaQuery` hook from '@cyca/utils/react' allows components to subscribe to the matching status of CSS media queries. It returns a boolean indicating whether the query is currently active, enabling responsive UI adjustments based on screen size, orientation, or other media features.

```typescript
import { useMediaQuery } from '@cyca/utils/react';

function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isDark = useMediaQuery('(prefers-color-scheme: dark)');
  const isPortrait = useMediaQuery('(orientation: portrait)');

  return (
    <div>
      <p>Device: {isMobile ? 'Mobile' : 'Desktop'}</p>
      <p>Theme: {isDark ? 'Dark' : 'Light'}</p>
      <p>Orientation: {isPortrait ? 'Portrait' : 'Landscape'}</p>
    </div>
  );
}
```

--------------------------------

### useAtomCallback: Stable Callbacks for Jotai Atom Interactions

Source: https://context7.com/cvpcasada/utils/llms.txt

useAtomCallback provides a way to create stable callback functions that can safely read and write Jotai atoms. These callbacks have a consistent identity across re-renders, making them ideal for use in effects, event handlers, or when passing callbacks to child components.

```typescript
import { atom } from 'jotai';
import { useAtomCallback } from '@cyca/utils/jotai';

const countAtom = atom(0);
const userAtom = atom({ name: 'Alice', points: 0 });

function GameComponent() {
  const awardPoints = useAtomCallback((get, set, amount: number) => {
    const currentCount = get(countAtom);
    const user = get(userAtom);

    set(countAtom, currentCount + amount);
    set(userAtom, { ...user, points: user.points + amount });

    console.log(`Awarded ${amount} points to ${user.name}`);
  });

  // Stable reference - won't cause effect to re-run
  useEffect(() => {
    const interval = setInterval(() => {
      awardPoints(10);
    }, 5000);
    return () => clearInterval(interval);
  }, [awardPoints]);

  return <button onClick={() => awardPoints(50)}>Award 50 Points</button>;
}
```

--------------------------------

### Jotai: useAtomCallback with stable identity

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A custom hook for Jotai that provides a stable callback identity, preventing unnecessary re-renders. It takes a callback function and optional Jotai store options as arguments.

```typescript
import { useAtomCallback } from '@cyca/utils/jotai'

const handleClick = useAtomCallback((get, set) => {
  const value = get(someAtom)
  set(anotherAtom, value + 1)
})
```

--------------------------------

### Track Async Callback State with useAsyncCallback (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `useAsyncCallback` hook from '@cyca/utils/react' simplifies the management of asynchronous operations by providing state tracking for pending, success, and error conditions. It returns a `wrapCallback` function to wrap any async function, making it easy to display loading states and handle results or errors.

```typescript
import { useAsyncCallback } from '@cyca/utils/react';

function UserProfile({ userId }: { userId: string }) {
  const [{ pending, success, error }, wrapCallback] = useAsyncCallback();

  const fetchUser = wrapCallback(async (id: string) => {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error('Failed to fetch user');
    return response.json();
  });

  return (
    <div>
      <button onClick={() => fetchUser(userId)} disabled={pending}>
        {pending ? 'Loading...' : 'Fetch User'}
      </button>
      {success && <p>User loaded successfully!</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}
```

--------------------------------

### Delay Execution with Promise in TypeScript

Source: https://context7.com/cvpcasada/utils/llms.txt

Provides a promise-based wrapper around setTimeout for easy integration with async/await syntax. It allows for delays with an optional return value, useful for implementing retry logic or scheduled operations.

```typescript
import { delay } from '@cyca/utils';

async function fetchWithRetry(url: string) {
  try {
    return await fetch(url);
  } catch (error) {
    console.log('Retrying in 2 seconds...');
    await delay(2000);
    return await fetch(url);
  }
}

// With return value
async function delayedValue() {
  const result = await delay(1000, { data: 'loaded' });
  console.log(result); // { data: 'loaded' }
}
```

--------------------------------

### React: useClientLayoutEffect for SSR compatibility

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A hook that uses `useEffect` during SSR and `useLayoutEffect` in the browser. This pattern helps avoid console warnings related to inconsistent rendering between server and client.

```typescript
import { useClientLayoutEffect } from '@cyca/utils/react'

useClientLayoutEffect(() => {
  // Safe to use in SSR
}, [])
```

--------------------------------

### React: useConstant for single initialization

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a value exactly once during the component's lifecycle. Unlike `useMemo`, its initialization is guaranteed, making it suitable for expensive object creation that should not be recomputed.

```typescript
import { useConstant } from '@cyca/utils/react'

const expensiveObject = useConstant(() => createExpensiveObject())
```

--------------------------------

### Jotai: withSnapshotHistory for undo/redo

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Wraps a Jotai atom to provide undo and redo functionality. It allows committing, undoing, redoing, and resetting the history of the atom's state. An optional limit can be set for the history size.

```typescript
import { withSnapshotHistory, COMMIT, UNDO, REDO, RESET } from '@cyca/utils/jotai'

const countAtom = atom(0)
const historyAtom = withSnapshotHistory(countAtom, 10)

// In a component:
const [{ value, previous, canUndo, canRedo }, dispatch] = useAtom(historyAtom)

// Update the value (doesn't create history entry)
dispatch(5)

// Commit to history
dispatch(COMMIT)

// Undo/redo
dispatch(UNDO)
dispatch(REDO)

// Reset history
dispatch(RESET)
```

--------------------------------

### React: useMediaQuery for media query matching

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A React hook that matches media queries. It returns a boolean indicating whether the query is currently matched. Returns `undefined` during Server-Side Rendering (SSR).

```typescript
import { useMediaQuery } from '@cyca/utils/react'

const isMobile = useMediaQuery('(max-width: 768px)')
```

--------------------------------

### Base64 Encode Strings in TypeScript

Source: https://context7.com/cvpcasada/utils/llms.txt

Offers cross-environment base64 encoding that functions seamlessly in both Node.js and browser environments. This utility is helpful for encoding data, such as credentials for authentication headers.

```typescript
import { toBase64 } from '@cyca/utils';

// Works in both browser and Node.js
const encoded = toBase64('Hello, World!');
console.log(encoded); // 'SGVsbG8sIFdvcmxkIQ=='

// Useful for encoding credentials
const credentials = toBase64('username:password');
const headers = {
  Authorization: `Basic ${credentials}`
};
```

--------------------------------

### Server-Side Validation with invariantResponse

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Throws a 400 Response if a condition is falsey, making it suitable for server-side validation logic. Allows for custom messages and response init options.

```typescript
import { invariantResponse } from '@cyca/utils'

invariantResponse(typeof value === 'string', 'value must be a string')
```

--------------------------------

### Bind Multiple Event Listeners to Mitt Emitter (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

Binds multiple event listeners to a 'mitt' emitter instance simultaneously. It returns a single function that, when executed, will unbind all the listeners that were bound. This simplifies the management of multiple event subscriptions. It takes the emitter instance and an object mapping event names to their respective callbacks.

```typescript
import { mitt, bindAll } from '@cyca/utils/mitt';

type Events = {
  connect: void;
  disconnect: void;
  message: { text: string; from: string };
  error: Error;
};

const emitter = mitt<Events>();

// Bind multiple events
const unbindAll = bindAll(emitter, {
  connect: () => console.log('Connected'),
  disconnect: () => console.log('Disconnected'),
  message: (msg) => console.log(`${msg.from}: ${msg.text}`),
  error: (err) => console.error('Error:', err.message)
});

// Use the emitteremitter.emit('connect');
emitter.emit('message', { text: 'Hello!', from: 'Alice' });

// Clean up all listeners at once
unbindAll();
```

--------------------------------

### Highlight Words in Text (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

Highlights specified words within a text string. Supports default HTML mark tags, case-insensitive matching, and custom rendering functions for frameworks like React. It takes the text, words to highlight, and an optional options object.

```typescript
import { higlightWords } from '@cyca/utils';

// Default behavior (HTML marks)
const text = 'The quick brown fox jumps over the lazy dog';
const highlighted = higlightWords(text, 'quick lazy');
console.log(highlighted); // 'The <mark>quick</mark> brown fox jumps over the <mark>lazy</mark> dog'

// Case insensitive
const result = higlightWords(text, 'QUICK', { caseSensitive: false });

// Custom highlighting for React
import type { ReactNode } from 'react';

const reactHighlight = higlightWords<ReactNode[], ReactNode>(
  text,
  'fox',
  {
    mark: (part, matched) => matched ? <strong key={part}>{part}</strong> : part,
    append: (acc, part) => [...acc, part]
  }
);
// Returns: ['The quick brown ', <strong>fox</strong>, ' jumps over the lazy dog']
```

--------------------------------

### String to Base64 Encoding with toBase64

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Converts a given string into its Base64 encoded representation.

```typescript
import { toBase64 } from '@cyca/utils'

const encoded = toBase64('hello world')
```

--------------------------------

### Highlight Search Terms in Text with higlightWords

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Highlights occurrences of a search term within a larger text. Supports case-insensitive matching and custom rendering of matched parts.

```typescript
import { higlightWords } from '@cyca/utils'

const result = higlightWords('Hello world', 'world', {
  caseSensitive: false,
  mark: (part, matched) => matched ? `<mark>${part}</mark>` : part
})
```

--------------------------------

### useSelectAtom: Efficiently Select Derived State from Jotai Atoms

Source: https://context7.com/cvpcasada/utils/llms.txt

useSelectAtom optimizes Jotai state selection by allowing components to subscribe only to specific derived values from an atom. This prevents unnecessary re-renders when other parts of the atom's state change, improving performance.

```typescript
import { atom } from 'jotai';
import { useSelectAtom } from '@cyca/utils/jotai';

const userAtom = atom({
  id: '123',
  name: 'Alice',
  email: 'alice@example.com',
  preferences: { theme: 'dark', language: 'en' }
});

function UserName() {
  // Only re-renders when name changes, not other fields
  const name = useSelectAtom(userAtom, (user) => user.name);
  return <span>{name}</span>;
}

function ThemeDisplay() {
  // Only re-renders when theme changes
  const theme = useSelectAtom(userAtom, (user) => user.preferences.theme);
  return <div>Theme: {theme}</div>;
}
```

--------------------------------

### Jotai Atom Undo/Redo with Snapshot History

Source: https://context7.com/cvpcasada/utils/llms.txt

Wraps a Jotai atom with undo/redo functionality and manual commit-based history tracking. It allows controlling history through dispatch actions like COMMIT, UNDO, REDO, and RESET. The maximum history entries can be configured, and it's useful for managing form states or canvas drawings.

```typescript
import { atom } from 'jotai';
import { useAtom } from 'jotai';
import { withSnapshotHistory, UNDO, REDO, COMMIT, RESET } from '@cyca/utils/jotai';

const textAtom = atom('');
const textHistoryAtom = withSnapshotHistory(textAtom, 10); // Max 10 history entries

function TextEditor() {
  const [text, setText] = useAtom(textAtom);
  const [history, dispatch] = useAtom(textHistoryAtom);

  const handleSave = () => {
    dispatch(COMMIT); // Save current state to history
  };

  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        onBlur={handleSave} // Commit on blur
      />
      <div>
        <button onClick={() => dispatch(UNDO)} disabled={!history.canUndo}>
          Undo
        </button>
        <button onClick={() => dispatch(REDO)} disabled={!history.canRedo}>
          Redo
        </button>
        <button onClick={() => dispatch(RESET)}>Clear History</button>
      </div>
      <p>Previous saved value: {history.previous ?? 'None'}</p>
    </div>
  );
}

// Canvas example with manual commits
const canvasStateAtom = atom<DrawingData>({ paths: [] });
const canvasHistoryAtom = withSnapshotHistory(canvasStateAtom);

function DrawingCanvas() {
  const [state, setState] = useAtom(canvasStateAtom);
  const [history, dispatch] = useAtom(canvasHistoryAtom);

  const handleMouseUp = () => {
    dispatch(COMMIT); // Commit after each stroke
  };

  return (
    <canvas
      onMouseMove={(e) => {
        // Update state without committing
        setState(prev => ({ paths: [...prev.paths, { x: e.clientX, y: e.clientY }] }));
      }}
      onMouseUp={handleMouseUp}
    />
  );
}
```

--------------------------------

### No-Operation Function with noop

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Provides a function that performs no operation and returns null. Useful as a default callback or placeholder.

```typescript
import { noop } from '@cyca/utils'

const callback = noop()
```

--------------------------------

### Use Counter - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Provides a simple abstraction for managing a counter state. It returns the current count and functions to increment, decrement, reset, or set the counter to a specific value. An initial value can be provided.

```typescript
import { useCounter } from '@cyca/utils/react'

const { count, increment, decrement, reset, setCount } = useCounter(0)
```

--------------------------------

### Debounce with requestAnimationFrame using debounceAnimationFrame

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a debounced function that synchronizes its execution with the browser's animation frame. Ideal for UI updates that should occur smoothly.

```typescript
import { debounceAnimationFrame } from '@cyca/utils'

const debouncedFn = debounceAnimationFrame(() => console.log('called'))
```

--------------------------------

### Use Async Callback - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Provides handlers and state for managing asynchronous operations. It returns an array containing the current asynchronous state (pending, success, error) and a `wrapAsync` function to wrap asynchronous functions, automatically managing their pending and error states.

```typescript
import { useAsyncCallback } from '@cyca/utils/react'

const [{ pending, success, error }, wrapAsync] = useAsyncCallback()

const handleSubmit = wrapAsync(async () => {
  await api.submit()
})

if (pending) return <Spinner />
if (error) return <Error error={error} />
```

--------------------------------

### Convert React Hook to Render Prop Component with `withHook`

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

The `withHook` function transforms a React hook into a render prop component. It takes a hook as an argument and returns a new component that accepts `args` and a render function. The render function receives the hook's return values as props. This is useful for sharing stateful logic across components.

```typescript
import { withHook } from '@cyca/utils/react'

const WithCounter = withHook(useCounter)

<WithCounter args={[0]}>
  {({ count, increment }) => (
    <button onClick={increment}>{count}</button>
  )}
</WithCounter>
```

--------------------------------

### Debounce Function Execution with debounce

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a debounced version of a function that delays its execution until a specified timeout has passed without further calls. Useful for rate-limiting expensive operations.

```typescript
import { debounce } from '@cyca/utils'

const debouncedFn = debounce(() => console.log('called'), 300)
```

--------------------------------

### Asynchronous Delay with delay Function

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a Promise that resolves after a specified number of milliseconds, optionally with a resolved value. This is a Promise wrapper around setTimeout.

```typescript
import { delay } from '@cyca/utils'

await delay(1000) // wait 1 second
const result = await delay(500, 'value') // wait 500ms and return 'value'
```

--------------------------------

### Mitt: bindAll listeners to events

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Binds multiple event listeners to a Mitt emitter simultaneously. It returns a single unbind function that removes all the bound listeners.

```typescript
import { mitt, bindAll } from '@cyca/utils/mitt'

type Events = {
  'login': { id: string }
  'logout': void
}

const emitter = mitt<Events>()
const unbind = bindAll(emitter, {
  login: (data) => console.log('Login:', data.id),
  logout: () => console.log('Logout')
})

// Later...
unbind()
```

--------------------------------

### Wrap Component with Suspense Boundary using `withSuspense`

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

The `withSuspense` function wraps a given React component with a Suspense boundary. It accepts the component to wrap and an optional fallback component. When the wrapped component triggers a Suspense, the fallback component will be rendered. This simplifies the management of asynchronous operations and loading states.

```typescript
import { withSuspense } from '@cyca/utils/react'

const UserProfile = withSuspense(
  UserProfileComponent,
  () => <Spinner />
)
```

--------------------------------

### Use Lazy Ref - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A wrapper around `useRef` that allows for lazy initialization of the ref's current value. The initialization function is only called the first time `ref.current` is accessed, which can be beneficial for creating expensive objects without impacting initial render performance.

```typescript
import { useLazyRef } from '@cyca/utils/react'

const ref = useLazyRef(() => new ExpensiveClass())
```

--------------------------------

### Use Force Update - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Provides a function that, when called, forces the component to re-render. It returns a tuple containing a unique key that changes on each update and the force update function itself. This is useful for scenarios where a component needs to be explicitly re-rendered outside of normal state or prop changes.

```typescript
import { useForceUpdate } from '@cyca/utils/react'

const [key, forceUpdate] = useForceUpdate()

// Later...
forceUpdate() // Forces re-render
```

--------------------------------

### Use Deep Memo - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Memoizes a computed value using deep equality comparison for its dependencies. This hook is useful for expensive calculations whose results should only be recomputed when their deep-equal dependencies change, preventing unnecessary computation.

```typescript
import { useDeepMemo } from '@cyca/utils/react'

const memoizedValue = useDeepMemo(() => {
  return computeExpensiveValue(obj)
}, [obj])
```

--------------------------------

### Invariant Validation with @cyca/utils

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Implement invariant checks that throw an error if a condition is falsey. Useful for asserting conditions that should always be true at runtime. Inspired by tiny-invariant.

```typescript
import { invariant } from '@cyca/utils'

invariant(typeof value === 'string', 'value must be a string')
```

--------------------------------

### Bind Single Event Listener to Mitt Emitter (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

Binds a specific event listener to a 'mitt' emitter instance. This function returns another function that, when called, will unbind the listener. It's useful for managing event subscriptions and ensuring proper cleanup. It requires the emitter instance, the event name, and the listener callback.

```typescript
import { mitt, bind } from '@cyca/utils/mitt';

type Events = {
  userLogin: { userId: string; timestamp: number };
  userLogout: { userId: string };
  error: Error;
};

const emitter = mitt<Events>();

// Bind single event
const unbind = bind(emitter, 'userLogin', (data) => {
  console.log(`User ${data.userId} logged in at ${data.timestamp}`);
});

// Emit eventemitter.emit('userLogin', { userId: '123', timestamp: Date.now() });

// Clean up
unbind();
```

--------------------------------

### React: usePreviousEffect for dependency history

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Runs an effect hook with access to previous dependency values. This is useful for comparing current and previous states or props within effects.

```typescript
import { usePreviousEffect } from '@cyca/utils/react'

usePreviousEffect(([prevCount]) => {
  console.log(`Count changed from ${prevCount} to ${count}`)
}, [count])
```

--------------------------------

### Track Element Visibility with useInView Hook (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `useInView` hook from '@cyca/utils/react' leverages the IntersectionObserver API to track whether an element is visible within the viewport. It returns a boolean `isInView` and a ref to attach to the target element, with options to control behavior like triggering once or applying margins.

```typescript
import { useInView } from '@cyca/utils/react';

function LazyImage({ src, alt }: { src: string; alt: string }) {
  const [isInView, ref] = useInView({
    once: true, // Only trigger once
    amount: 0.5, // 50% visible
    margin: '100px' // Start loading 100px before visible
  });

  return (
    <img
      ref={ref}
      src={isInView ? src : undefined}
      alt={alt}
      style={{ minHeight: '200px' }}
    />
  );
}

function AnalyticsTracker() {
  const [isVisible, ref] = useInView({
    amount: 'all', // Entire element visible
    once: false // Track every time it enters/exits
  });

  useEffect(() => {
    if (isVisible) {
      analytics.track('section_viewed');
    }
  }, [isVisible]);

  return <section ref={ref}>Content here</section>;
}
```

--------------------------------

### Use Suspend After Mount - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Defers the execution of a suspense-triggering function until after the component has mounted. This hook is useful for initiating data fetching or other asynchronous operations that might cause a component to suspend, ensuring the initial render is not blocked by these operations.

```typescript
import { useSuspendAfterMount } from '@cyca/utils/react'

const data = useSuspendAfterMount(() => fetchData())
```

--------------------------------

### Use Animation Frame - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Executes a callback function on every animation frame, synchronized with the browser's rendering cycle. This hook is ideal for animations and other frame-dependent updates, providing access to the current time and delta time. Dependencies can be passed to control re-registration.

```typescript
import { useAnimationFrame } from '@cyca/utils/react'

useAnimationFrame(({ time, delta }) => {
  // Animation logic
}, [])
```

--------------------------------

### useDeepMemo: Memoize with Deep Equality in React

Source: https://context7.com/cvpcasada/utils/llms.txt

The useDeepMemo hook memoizes a value by performing a deep equality comparison, ensuring that recomputations only occur when the dependencies have truly changed, not just their references. This is useful for optimizing components that rely on complex object or array props.

```typescript
import { useDeepMemo } from '@cyca/utils/react';

function UserList({ filters }: { filters: { status: string; role: string } }) {
  // Only recomputes when filters deeply change
  const filteredUsers = useDeepMemo(
    () => users.filter(u => u.status === filters.status && u.role === filters.role),
    filters
  );

  return <ul>{filteredUsers.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// Won't cause re-computation even though filters is a new object
<UserList filters={{ status: 'active', role: 'admin' }} />
<UserList filters={{ status: 'active', role: 'admin' }} />
```

--------------------------------

### Debounce Function Execution (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

Creates a debounced function that delays invoking a function until after a specified timeout period has elapsed since the last time the debounced function was invoked. Useful for rate-limiting event handlers like search inputs or window resizing. It takes the function to debounce and the delay in milliseconds.

```typescript
import { debounce } from '@cyca/utils';

// Search input debouncing
const searchAPI = async (query: string) => {
  const response = await fetch(`/api/search?q=${query}`);
  return response.json();
};

const debouncedSearch = debounce(searchAPI, 500);

// Only the last call within 500ms will execute
input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

// Window resize handler
const handleResize = debounce(() => {
  console.log('Window resized to:', window.innerWidth);
}, 300);

window.addEventListener('resize', handleResize);
```

--------------------------------

### Create Stable Callback Reference with useEvent Hook (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `useEvent` hook from '@cyca/utils/react' creates a stable callback reference that always calls the latest version of a provided function. This is useful for optimizing performance by preventing unnecessary re-renders, especially when passing callbacks to child components or using them in effects.

```typescript
import { useEvent } from '@cyca/utils/react';

function SearchComponent({ onSearch }: { onSearch: (query: string) => void }) {
  const [query, setQuery] = useState('');

  // Stable reference, but always calls latest onSearch
  const handleSearch = useEvent(onSearch);

  // Can be safely used in useEffect without causing re-runs
  useEffect(() => {
    const timer = setTimeout(() => {
      handleSearch(query);
    }, 500);
    return () => clearTimeout(timer);
  }, [query]); // No need to include handleSearch

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}
```

--------------------------------

### Use Event - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Creates a stable function identity for a callback, simplifying its usage with dependencies that might change. It ensures that the callback always has access to the latest props and state without needing to be included in dependency arrays of other hooks like `useEffect` or `useCallback`.

```typescript
import { useEvent } from '@cyca/utils/react'

const handleClick = useEvent(() => {
  console.log(count) // Always has latest value
})
```

--------------------------------

### Use Interval - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Manages a repeating timer that executes a callback function at a specified delay interval. This hook simplifies the implementation of recurring tasks in React components, ensuring proper cleanup of the interval when the component unmounts.

```typescript
import { useInterval } from '@cyca/utils/react'

useInterval(() => {
  console.log('Tick')
}, 1000)
```

--------------------------------

### useCounter: Manage Simple Counter State in React

Source: https://context7.com/cvpcasada/utils/llms.txt

The useCounter hook simplifies managing integer state within a React component. It provides methods to increment, decrement, reset, and directly set the counter's value, along with the current count.

```typescript
import { useCounter } from '@cyca/utils/react';

function CounterComponent() {
  const { count, increment, decrement, reset, setCount } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={() => setCount(10)}>Set to 10</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
```

--------------------------------

### Use Focus Element On Visible - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Automatically focuses an input element when it becomes visible in the viewport. This hook returns a ref that should be attached to the target element, simplifying the implementation of focus-on-visibility behavior.

```typescript
import { useFocusElementOnVisible } from '@cyca/utils/react'

const ref = useFocusElementOnVisible()

return <input ref={ref} />
```

--------------------------------

### Jotai: useSelectAtom for derived state

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Selects a derived value from a Jotai atom using a provided selector function. This hook is useful for extracting specific pieces of data from complex atoms.

```typescript
import { useSelectAtom } from '@cyca/utils/jotai'

const userName = useSelectAtom(userAtom, (user) => user.name)
```

--------------------------------

### Mitt: bind listener to event

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Binds a single listener function to a specific event on a Mitt emitter. It returns an unbind function that can be called to remove the listener.

```typescript
import { mitt, bind } from '@cyca/utils/mitt'

const emitter = mitt()
const unbind = bind(emitter, 'event', (data) => {
  console.log(data)
})

// Later...
unbind()
```

--------------------------------

### Use Deep Memo Effect - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A variation of `useEffect` that performs a deep equality comparison on its dependencies. This hook ensures that the effect callback runs only when the contents of the dependency objects or arrays have deeply changed, rather than just their references.

```typescript
import { useDeepMemoEffect } from '@cyca/utils/react'

useDeepMemoEffect(() => {
  console.log('Object deeply changed')
}, [complexObject])
```

--------------------------------

### Validate HTTP/HTTPS URLs with TypeScript

Source: https://context7.com/cvpcasada/utils/llms.txt

Validates if a given string is a valid HTTP or HTTPS URL using the native URL constructor. It returns true for valid URLs and false otherwise, including for other protocols or non-URL strings.

```typescript
import { isValidHttpUrl } from '@cyca/utils';

// Valid URLs
console.log(isValidHttpUrl('https://example.com')); // true
console.log(isValidHttpUrl('http://localhost:3000')); // true

// Invalid URLs
console.log(isValidHttpUrl('ftp://example.com')); // false
console.log(isValidHttpUrl('not a url')); // false
console.log(isValidHttpUrl('example.com')); // false
```

--------------------------------

### Use Constant Hook for Single Initialization (React TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

A React hook that ensures a value is computed and initialized exactly once during the component's lifecycle. Unlike `useMemo`, `useConstant` guarantees single initialization even in React's Strict Mode. It's useful for expensive calculations or values that should not change across re-renders. It takes a factory function or a direct value.

```typescript
import { useConstant } from '@cyca/utils/react';

function ExpensiveComponent() {
  // Value computed only once, even in strict mode
  const expensiveValue = useConstant(() => {
    console.log('Computing expensive value...');
    return computeExpensiveValue();
  });

  // Direct value
  const id = useConstant(crypto.randomUUID());

  return <div>{expensiveValue}</div>;
}
```

--------------------------------

### Validate HTTP URL String with isValidHttpUrl

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Checks if a given string represents a valid HTTP or HTTPS URL. Returns a boolean indicating validity.

```typescript
import { isValidHttpUrl } from '@cyca/utils'

if (isValidHttpUrl('https://example.com')) {
  // valid URL
}
```

--------------------------------

### Use Intersection Callback - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Integrates with the browser's Intersection Observer API to detect when an element becomes visible within the viewport. It returns a ref to attach to the target element and a callback function that receives intersection entries. Optional configuration options for the observer can be provided.

```typescript
import { useIntersectionCallback } from '@cyca/utils/react'

const ref = useIntersectionCallback((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible')
    }
  })
}, { threshold: 0.5 })

return <div ref={ref}>Content</div>
```

--------------------------------

### useForceUpdate: Trigger React Component Re-renders

Source: https://context7.com/cvpcasada/utils/llms.txt

The useForceUpdate hook provides a function to manually trigger a re-render of a React component. It returns a stable identity for the update function, making it safe to use in effects and callbacks without causing unnecessary re-renders of other components.

```typescript
import { useForceUpdate } from '@cyca/utils/react';

function ComponentWithExternalState() {
  const [key, forceUpdate] = useForceUpdate();

  const data = useRef(externalStore.getData());

  useEffect(() => {
    const unsubscribe = externalStore.subscribe(() => {
      data.current = externalStore.getData();
      forceUpdate(); // Force re-render with new data
    });
    return unsubscribe;
  }, [forceUpdate]);

  return <div key={key}>{JSON.stringify(data.current)}</div>;
}
```

--------------------------------

### Use Is Intersecting - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

A hook that returns a boolean indicating whether an element is currently intersecting with the viewport and a ref callback to attach to the observed element. It simplifies the process of tracking element visibility using the Intersection Observer API.

```typescript
import { useIsIntersecting } from '@cyca/utils/react'

const [isVisible, ref] = useIsIntersecting({ threshold: 0.5 })

return <div ref={ref}>{isVisible ? 'Visible' : 'Hidden'}</div>
```

--------------------------------

### Retrieve Previous Value with usePreviousValue Hook (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `usePreviousValue` hook from '@cyca/utils/react' provides access to the value of a state or prop from the immediately preceding render. This is invaluable for comparing current and previous states, calculating differences, or implementing logic that depends on historical data.

```typescript
import { usePreviousValue } from '@cyca/utils/react';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePreviousValue(count);

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {prevCount ?? 'N/A'}</p>
      <p>Changed by: {prevCount !== null ? count - prevCount : 0}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}
```

--------------------------------

### useInterval: Reliable Intervals with Auto-Cleanup in React

Source: https://context7.com/cvpcasada/utils/llms.txt

The useInterval hook sets up a JavaScript interval that automatically cleans itself up when the component unmounts or when the interval duration changes. It ensures that the latest callback is always used, preventing potential stale closures.

```typescript
import { useInterval } from '@cyca/utils/react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useInterval(() => {
    setSeconds(s => s + 1);
  }, 1000);

  return <p>Elapsed: {seconds}s</p>;
}

function DynamicPolling({ interval }: { interval: number }) {
  useInterval(() => {
    fetchLatestData();
  }, interval); // Updates when interval changes

  return <div>Polling...</div>;
}
```

--------------------------------

### Maintain Latest Value with useLatest Hook (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

The `useLatest` hook from '@cyca/utils/react' keeps track of the latest value of a prop or state, updating its ref after each render. This is beneficial for accessing the most current values within effects or event handlers without causing the effect to re-run.

```typescript
import { useLatest } from '@cyca/utils/react';

function Component({ callback, data }: { callback: Function; data: any }) {
  const latestCallback = useLatest(callback);
  const latestData = useLatest(data);

  useEffect(() => {
    const interval = setInterval(() => {
      // Always uses the latest callback and data
      latestCallback.current(latestData.current);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Empty deps - interval never recreated

  return null;
}
```

--------------------------------

### useIntersectionCallback: React Hook for IntersectionObserver

Source: https://context7.com/cvpcasada/utils/llms.txt

This hook simplifies the integration of the IntersectionObserver API into React components. It creates a ref callback that automatically sets up the observer on the referenced element, making it easy to implement features like lazy loading.

```typescript
import { useIntersectionCallback } from '@cyca/utils/react';

function LazyLoadComponent() {
  const ref = useIntersectionCallback<HTMLDivElement>(
    ([entry]) => {
      if (entry?.isIntersecting) {
        console.log('Element is visible!');
        loadContent();
      } else {
        console.log('Element is hidden');
        pauseContent();
      }
    },
    { threshold: 0.5, rootMargin: '50px' }
  );

  return <div ref={ref}>Content</div>;
}
```

--------------------------------

### Escape RegExp Special Characters with escapeRegExp

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Escapes characters in a string that have special meaning in regular expressions, ensuring they are treated as literal characters.

```typescript
import { escapeRegExp } from '@cyca/utils'

const escaped = escapeRegExp('hello.world')
```

--------------------------------

### No-Operation Function (TypeScript)

Source: https://context7.com/cvpcasada/utils/llms.txt

A utility function that performs no operation and returns null. It is commonly used as a default or fallback callback function, particularly for optional event handlers in component props, ensuring that calling the function has no side effects when not provided. It takes no arguments.

```typescript
import { noop } from '@cyca/utils';

// Default prop
interface ButtonProps {
  onClick?: () => void;
}

function Button({ onClick = noop }: ButtonProps) {
  return <button onClick={onClick}>Click me</button>;
}

// Optional callback handling
function processData(data: any[], onComplete = noop) {
  // Process data...
  onComplete();
}
```

--------------------------------

### Deeply Omit Property from Object with deepOmit

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Removes a property from an object at a specified nested path. The path is provided as an array of keys. This function is type-safe.

```typescript
import { deepOmit } from '@cyca/utils/deep-omit'

const obj = { a: { b: { c: 1, d: 2 } } }
const result = deepOmit(obj, ['a', 'b', 'c'])
// result: { a: { b: { d: 2 } } }

const omitPath = deepOmit(['a', 'b', 'c'])
const result = omitPath(obj)
```

--------------------------------

### Use Has Changed Effect - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Runs a React effect only when a specified dependency has changed since the last render. It accepts an effect function, an array of dependencies, and an optional custom equality comparison function. This hook is useful for optimizing effect execution by preventing unnecessary runs.

```typescript
import { useHasChangedEffect } from '@cyca/utils/react'

useHasChangedEffect(() => {
  console.log('User changed')
}, [user], (a, b) => a.id === b.id)
```

--------------------------------

### Use Previous Value - React Hook

Source: https://github.com/cvpcasada/utils/blob/main/readme.md

Returns the value of a prop or state from the previous render cycle. This hook is useful for comparing current and previous values, implementing logic that depends on historical state, or performing side effects based on value changes between renders.

```typescript
import { usePreviousValue } from '@cyca/utils/react'

const previousCount = usePreviousValue(count)
```