# Dependencies Overview

- **Package management**: Use `bun` as the package manager for this codebase.
- **@hugeicons/core-free-icons**: Purpose: Free Hugeicons core icon asset package for TypeScript/JavaScript apps. It provides 5,100+ Stroke Rounded icons and is intended to be used with framework packages like @hugeicons/react, @hugeicons/vue, and others.
- **@hugeicons/react**: Purpose: React integration package for Hugeicons. It provides the HugeiconsIcon component for rendering icons from Hugeicons icon packages in React apps, with support for free and Pro icon sets.
- **@mdxeditor/editor**: Purpose: Open-source React component for authoring markdown documents in a WYSIWYG editor. It accepts and emits markdown as a string, with additional capabilities enabled through plugins such as headings, links, tables, and code blocks.
- **@playwright/test**: Purpose: Playwright Test provides a test function to declare tests and expect for assertions. It is an end-to-end test framework for modern web apps with built-in runner, isolation, parallelization, and rich tooling.
- **@tailwindcss/typography**: Purpose: Provides the official Tailwind CSS Typography plugin, adding prose classes for beautiful typographic defaults on vanilla HTML content you don’t control, such as Markdown or CMS-rendered content. Source: https://github.com/tailwindlabs/tailwindcss-typography
- **@tanstack/electric-db-collection**: Purpose: TanStack DB collection adapter for ElectricSQL. It lets you create collections that sync Postgres data through Electric shapes and support optimistic updates, rollback, and custom mutation handlers.
- **@tanstack/query-db-collection**: Purpose: TanStack Query DB Collection provides seamless integration between TanStack DB and TanStack Query, enabling automatic synchronization between local collections and remote data sources. It supports remote fetching, optimistic updates, customizable mutation handlers, and direct writes to the sync store.
- **@tanstack/react-db**: Purpose: TanStack DB’s React adapter for building live, reactive data-driven UIs. It provides hooks like useLiveQuery, useLiveSuspenseQuery, and usePacedMutations for querying collections and handling mutations in React.
- **@tanstack/react-form**: Purpose: A headless form library for React that provides TypeScript-first APIs for form and field state. It supports built-in synchronous and asynchronous validation for building complex, interactive forms.
- **@tanstack/react-query**: Purpose: A TypeScript-first React library for fetching, caching, synchronizing, and updating server state. It provides type-safe hooks and helpers such as useQuery, useMutation, and queryOptions with strong type inference.
- **@tanstack/react-query-devtools**: Purpose: React Query Devtools is the separate TanStack package for visualizing and debugging TanStack Query state in React. It supports a floating toggle or embedded panel, and is excluded from production bundles by default.
- **@tanstack/react-router**: Purpose: A type-safe router for React applications. It offers fully inferred TypeScript APIs, typesafe navigation, first-class search params, nested routing, and built-in data loading/caching.
- **@tanstack/react-table**: Purpose: The React adapter for TanStack Table; a wrapper around the core table logic that manages state the React way and provides types plus cell/header/footer rendering templates. Use useReactTable to create a table instance from your data and column definitions.
- **@tanstack/react-virtual**: Purpose: React adapter for TanStack Virtual; a wrapper around the core virtual logic that provides hooks like useVirtualizer and useWindowVirtualizer for virtualizing long lists and windows.
- **@tanstack/zod-adapter**: Purpose: Adapter for using Zod v3 schemas with TanStack Router validation, including helpers like zodValidator and fallback for search params. Official docs note that Zod v4 works natively, so this adapter is mainly for Zod v3.
- **@tanstack/zod-form-adapter**: Purpose: Adapter package for using Zod with TanStack Form. It plugs Zod schemas into TanStack Form validation in TypeScript.
- **axios**: Purpose: Promise-based HTTP client for the browser and Node.js. Provides a simple API for making requests such as axios.get, axios.post, and axios.request, with TypeScript support and examples in the official docs.
- **canvas-confetti**: Purpose: Browser-side confetti animation library for celebratory particle effects on an HTML canvas. It exposes a confetti([options]) API with customizable colors, shapes, motion, and reduced-motion support.
- **class-variance-authority**: Purpose: A tiny TypeScript utility for defining type-safe class name variants and compound variants for UI components. It helps map props to CSS classes, especially in SSR/SSG setups and styling systems like Tailwind or plain CSS.
- **clsx**: Purpose: A tiny utility for conditionally constructing className strings. It accepts strings, objects, arrays, and booleans, discarding falsey values; it also serves as a smaller, faster drop-in replacement for classnames.
- **cmdk**: Purpose: A command menu React component that can also be used as an accessible combobox. It renders items, filters and sorts them automatically, with a fully composable API.
- **date-fns**: Purpose: A modern JavaScript date utility library for manipulating dates in the browser and Node.js. Modular, immutable, pure, and written in TypeScript with handcrafted types.
- **dnd kit**: Purpose: dnd kit is a modern toolkit for building drag-and-drop interfaces. Its core package provides the main building blocks like context providers, draggable/droppable hooks, DragOverlay, and sensors; the sortable package adds sortable context and hooks, and utilities includes helpers such as CSS transform conversion.
- **flyonui**: Purpose: Open-source Tailwind CSS component library that adds semantic classes, prebuilt UI components, blocks/templates, and JS plugins for building responsive web apps. Installed as an npm dev dependency and designed to work with Tailwind CSS across frameworks.
- **json2md**: Purpose: Converts JSON input into Markdown. Supports common Markdown elements like headings, paragraphs, lists, tables, images, code blocks, and custom converters via json2md.converters.
- **lucide-react**: Purpose: A Lucide icon library package for React applications. Each icon is available as a standalone component that renders an optimized inline SVG.
- **motion**: Purpose: Motion is a production-grade animation library for the web. It provides smooth animations for React, JavaScript, and Vue, including transforms, gestures, scroll, and layout animations.
- **nanoid**: Purpose: Generates tiny, secure, URL-friendly unique string IDs for JavaScript/TypeScript using hardware-backed randomness. It also supports custom alphabets/sizes and TypeScript opaque-string branding.
- **next-themes**: Purpose: An abstraction for themes in your React app, with a ThemeProvider and useTheme hook for dark mode, system preference support, and syncing theme changes without flashing on load. It works with Next.js pages/ and app/ routers by updating HTML attributes for styling. Source: https://github.com/pacocoursey/next-themes
- **nuqs**: Purpose: Type-safe search params state manager for React frameworks. Like useState, but stored in the URL query string.
- **Radix UI React Primitives**: Purpose: Headless, unstyled React UI primitives for building accessible design systems and web apps. They follow WAI-ARIA patterns, emphasize customization, and support incremental adoption.
- **react**: Purpose: A library for web and native user interfaces. React lets you build user interfaces from reusable components and update the UI in response to changing data.
- **react-day-picker**: Purpose: React component for creating date pickers, calendars, and date inputs for web applications. It is written in TypeScript and supports single, multiple, range, and custom selections with localization.
- **react-dom**: Purpose: React DOM provides web-only APIs for rendering React in browser DOM environments, plus client/server entry points and resource-preloading helpers. Official docs: https://react.dev/reference/react-dom
- **react-icons**: Purpose: React Icons provides popular icon packs as React SVG components, with ES6 imports so you can import only the icons your project uses. TypeScript support is built in, so you do not need separate @types packages.
- **react-markdown**: Purpose: React component that takes a string of markdown and safely renders it to React elements. Supports remark/rehype plugins and component overrides to customize how markdown is transformed and displayed.
- **shadcn-ui**: Purpose: shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. It’s an open-code approach for building your own component library with composable UI primitives and a CLI for distributing components.
- **sonner**: Purpose: An opinionated toast component for React. Render in your app and call toast() from anywhere to show notifications. Sources: https://sonner.emilkowal.ski/ ; https://github.com/emilkowalski/sonner
- **tailwind-merge**: Purpose: A TypeScript utility for merging Tailwind CSS class strings without style conflicts. It exposes helpers like twMerge and extendTailwindMerge to resolve conflicting classes and customize merge behavior.
- **vaul**: Purpose: A drawer component for React. Vaul is an unstyled drawer that can act as a Dialog replacement on tablet and mobile devices.
- **wicg-inert**: Purpose: Polyfill for the inert attribute/property, letting you mark parts of the DOM as inert so they don’t receive user interaction and should be hidden from assistive technology. Import it as a side effect in your app (import "wicg-inert";).
- **zod**: Purpose: TypeScript-first validation library for defining schemas. Usage: parse and validate data with static type inference and reusable schemas.
- **zustand**: Purpose: A small, fast, scalable bearbones state-management solution with a hook-based API for React. It supports TypeScript with typed stores, actions, selectors, and middleware such as persist and devtools.