sp80/.planning/codebase/STACK.md

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