# Technology Stack

**Analysis Date:** 2026-03-13

## Languages

**Primary:**
- TypeScript (React) - All application logic and components
- CSS - Styling via Tailwind CSS with custom theme variables

**Secondary:**
- JavaScript - Build tool configuration

## Runtime

**Environment:**
- Node.js (latest LTS recommended)

**Package Manager:**
- pnpm (evidenced by `pnpm.overrides` in `package.json`)
- Lockfile: Not committed to repository

## Frameworks

**Core:**
- **React 18.3.1** - UI library with hooks and functional components
  - Peer dependency (optional, for compatibility with Figma Make)
- **React Router 7.13.0** - Client-side routing with Data API mode
  - Router configuration in `src/app/routes.ts`
  - Uses `createBrowserRouter` for SPA navigation

**UI Component Framework:**
- **Radix UI** - Headless accessible UI primitives
  - 23 Radix primitives including: accordion, dialog, dropdown-menu, select, tabs, tooltip, etc.
  - Provides accessibility and keyboard navigation out of the box

**Styling:**
- **Tailwind CSS 4.1.12** - Utility-first CSS framework
  - Integrated via `@tailwindcss/vite` plugin
  - Custom theme configuration in `src/styles/theme.css`
  - Uses CSS variables for theming with light/dark mode support
  - Animation support via `tw-animate-css`

**Animation:**
- **Framer Motion ("motion" package 12.23.24)** - React animation library

## Build Tools

**Build System:**
- **Vite 6.3.5** - Fast development server and production bundler
  - Config: `vite.config.ts`
  - Uses `@vitejs/plugin-react` for React support
  - Path alias `@` configured to `./src`
  - Asset support: `.svg`, `.csv` files

**CSS Processing:**
- **PostCSS** - CSS transformation (via Vite plugin)
  - Config: `postcss.config.mjs` (empty - Tailwind v4 handles this automatically)

## Key Dependencies

**Critical UI Components:**
- `@radix-ui/react-*` (23 packages) - Accessible UI primitives
- `class-variance-authority` 0.7.1 - Type-safe Tailwind variant generation
- `clsx` 2.1.1 - Conditional class name joining
- `tailwind-merge` 3.2.0 - Tailwind class deduplication
- `lucide-react` 0.487.0 - Icon library

**Form & Input:**
- `react-hook-form` 7.55.0 - Form state management and validation
- `cmdk` 1.1.1 - Command palette/Combobox component
- `input-otp` 1.4.2 - OTP input component

**Data Visualization:**
- `recharts` 2.15.2 - React charting library

**Date Handling:**
- `date-fns` 3.6.0 - Date formatting and manipulation
- `react-day-picker` 8.10.1 - Date picker component

**Theming:**
- `next-themes` 0.4.6 - Theme switching (dark/light mode)

**Notifications:**
- `sonner` 2.0.3 - Toast notifications

**Carousels & Layout:**
- `embla-carousel-react` 8.6.0 - Touch carousel
- `react-resizable-panels` 2.1.7 - Resizable panel layouts
- `react-responsive-masonry` 2.7.1 - Masonry grid layout

**Drag & Drop:**
- `react-dnd` 16.0.1 + `react-dnd-html5-backend` 16.0.1 - Drag and drop functionality

**Drawer/Modal:**
- `vaul` 1.1.2 - Drawer component for mobile

**Slider:**
- `react-slick` 0.31.0 - Image/content carousel

**Optional/Peer Dependencies:**
- `@emotion/react` / `@emotion/styled` - CSS-in-JS (for MUI compatibility)
- `@mui/material` / `@mui/icons-material` - Material UI (peer dependency for Figma Make)

## Configuration

**Environment:**
- No `.env` file detected in repository
- Configuration appears to be hardcoded or passed at build time
- No environment-specific configs visible

**Build:**
- `vite.config.ts` - Vite configuration with React and Tailwind plugins
- `postcss.config.mjs` - Empty config (Tailwind v4 handles PostCSS internally)
- `tsconfig.json` - Not present in repository (TypeScript handled by Vite)

## Platform Requirements

**Development:**
- Node.js (latest LTS)
- pnpm package manager
- Modern browser with ES2020+ support

**Production:**
- Static file hosting (SPA)
- Target: 7-inch industrial touchscreen displays (800x480 to 1024x600)
- Optimized for landscape orientation
- Touch-friendly interface design

**Browser Support:**
- Modern Chromium-based browsers (Chrome, Edge)
- WebKit (Safari)
- Firefox (ESR)

## Notable Architecture Decisions

**Design System:**
- Uses shadcn/ui pattern (Radix + Tailwind + CVA)
- Custom theme tokens defined in CSS variables
- Dark theme by default for industrial use
- Touch-optimized sizing (minimum 44x44px touch targets)

**Component Organization:**
- UI components: `src/app/components/ui/`
- View components: `src/app/components/views/`
- Layout components: `src/app/components/` (root level)

---

*Stack analysis: 2026-03-13*