# 📦 NPM PACKAGES - COMPLETE AUDIT

**Project**: Spark Platform Frontend  
**Total Packages**: 73 dependencies + 7 devDependencies = **80 packages**  
**Audit Date**: December 13, 2025

---

## 🎯 PACKAGES BY CATEGORY

### 1. CORE FRAMEWORK (5 packages)

#### **astro** `^4.7.0`
- **Purpose**: Main SSR framework
- **Used For**: Server-side rendering, routing, page generation
- **Where**: Entire application foundation
- **Critical**: ✅ YES

#### **react** `^18.3.1`
- **Purpose**: UI library
- **Used For**: All interactive components
- **Where**: All `.tsx` components
- **Critical**: ✅ YES

#### **react-dom** `^18.3.1`
- **Purpose**: React DOM renderer
- **Used For**: Rendering React to HTML
- **Where**: Client-side hydration
- **Critical**: ✅ YES

#### **typescript** `^5.4.0`
- **Purpose**: Type safety
- **Used For**: Type checking, IntelliSense
- **Where**: All `.ts` and `.tsx` files
- **Critical**: ✅ YES

#### **vite** (via Astro)
- **Purpose**: Build tool
- **Used For**: Fast dev server, bundling
- **Where**: Build process
- **Critical**: ✅ YES

---

### 2. ASTRO INTEGRATIONS (6 packages)

#### **@astrojs/node** `^8.2.6`
- **Purpose**: Node.js SSR adapter
- **Used For**: Server-side rendering in production
- **Where**: Deployment (Coolify)
- **Critical**: ✅ YES

#### **@astrojs/react** `^3.2.0`
- **Purpose**: React integration for Astro
- **Used For**: Using React components in Astro pages
- **Where**: All pages with `client:load` directive
- **Critical**: ✅ YES

#### **@astrojs/tailwind** `^5.1.0`
- **Purpose**: Tailwind CSS integration
- **Used For**: Styling system
- **Where**: All components
- **Critical**: ✅ YES

#### **@astrojs/sitemap** `^3.6.0`
- **Purpose**: Auto-generate sitemap.xml
- **Used For**: SEO, search engine indexing
- **Where**: Build process
- **Critical**: ⚠️ NICE TO HAVE

#### **@astrojs/partytown** `^2.1.4`
- **Purpose**: Web worker for 3rd-party scripts
- **Used For**: Analytics, tracking (off main thread)
- **Where**: Analytics integration
- **Critical**: ⚠️ NICE TO HAVE

#### **@vite-pwa/astro** `^1.2.0`
- **Purpose**: Progressive Web App support
- **Used For**: Offline functionality, service worker
- **Where**: PWA manifest, caching
- **Critical**: ⚠️ NICE TO HAVE

---

### 3. DIRECTUS & BACKEND (2 packages)

#### **@directus/sdk** `^17.0.0`
- **Purpose**: Directus API client
- **Used For**: All backend data operations
- **Where**: `lib/directus/client.ts`, all data fetching
- **Critical**: ✅ YES

#### **ioredis** `^5.8.2`
- **Purpose**: Redis client
- **Used For**: Queue management, caching
- **Where**: BullMQ integration
- **Critical**: ⚠️ IF USING QUEUES

---

### 4. STATE MANAGEMENT (5 packages)

#### **nanostores** `^1.1.0`
- **Purpose**: Lightweight state management
- **Used For**: Global state (sidebar, user prefs)
- **Where**: `lib/stores/`, shared state
- **Critical**: ✅ YES

#### **@nanostores/react** `^1.0.0`
- **Purpose**: React bindings for nanostores
- **Used For**: Using nanostores in React components
- **Where**: Components using `useStore()`
- **Critical**: ✅ YES

#### **zustand** `^5.0.9`
- **Purpose**: Alternative state management
- **Used For**: Complex component state
- **Where**: Editor, assembler components
- **Critical**: ⚠️ IF USING

#### **immer** `^11.0.1`
- **Purpose**: Immutable state updates
- **Used For**: Simplifying state mutations
- **Where**: Used with zustand
- **Critical**: ⚠️ IF USING ZUSTAND

#### **@tanstack/react-query** `^5.90.12`
- **Purpose**: Server state management
- **Used For**: Data fetching, caching, synchronization
- **Where**: API calls, Directus data
- **Critical**: ✅ YES

---

### 5. UI COMPONENTS & STYLING (15 packages)

#### **tailwindcss** `^3.4.0`
- **Purpose**: Utility-first CSS framework
- **Used For**: All styling
- **Where**: Every component
- **Critical**: ✅ YES

#### **tailwind-merge** `^2.6.0`
- **Purpose**: Merge Tailwind classes
- **Used For**: Conditional styling
- **Where**: `lib/utils.ts`, components
- **Critical**: ✅ YES

#### **tailwindcss-animate** `^1.0.7`
- **Purpose**: Animation utilities
- **Used For**: Transitions, animations
- **Where**: UI components
- **Critical**: ⚠️ NICE TO HAVE

#### **class-variance-authority** `^0.7.1`
- **Purpose**: Component variants
- **Used For**: Button variants, component states
- **Where**: UI components
- **Critical**: ✅ YES

#### **clsx** `^2.1.1`
- **Purpose**: Conditional class names
- **Used For**: Dynamic styling
- **Where**: All components
- **Critical**: ✅ YES

#### **lucide-react** `^0.346.0`
- **Purpose**: Icon library
- **Used For**: All icons
- **Where**: Buttons, UI elements
- **Critical**: ✅ YES

#### **framer-motion** `^12.23.26`
- **Purpose**: Animation library
- **Used For**: Smooth transitions, animations
- **Where**: Interactive components
- **Critical**: ⚠️ NICE TO HAVE

#### **@radix-ui/*** (8 packages)
- **Packages**: dialog, dropdown-menu, label, select, slot, tabs, toast
- **Purpose**: Headless UI primitives
- **Used For**: Accessible UI components
- **Where**: Modals, dropdowns, forms
- **Critical**: ✅ YES (for accessibility)

#### **sonner** `^2.0.7`
- **Purpose**: Toast notifications
- **Used For**: User feedback, alerts
- **Where**: Success/error messages
- **Critical**: ⚠️ NICE TO HAVE

#### **cmdk** `^1.1.1`
- **Purpose**: Command palette
- **Used For**: Keyboard shortcuts, search
- **Where**: Admin interface
- **Critical**: ⚠️ NICE TO HAVE

---

### 6. FORMS & VALIDATION (3 packages)

#### **react-hook-form** `^7.68.0`
- **Purpose**: Form management
- **Used For**: All forms
- **Where**: Settings, content creation, modals
- **Critical**: ✅ YES

#### **zod** `^3.25.76`
- **Purpose**: Schema validation
- **Used For**: Form validation, API validation
- **Where**: All forms, API endpoints
- **Critical**: ✅ YES

#### **@hookform/resolvers** `^5.2.2`
- **Purpose**: Zod + React Hook Form integration
- **Used For**: Connecting validation to forms
- **Where**: Form components
- **Critical**: ✅ YES

---

### 7. DATA TABLES & VISUALIZATION (4 packages)

#### **@tanstack/react-table** `^8.21.3`
- **Purpose**: Advanced table library
- **Used For**: Sortable, filterable tables
- **Where**: Intelligence Library, data grids
- **Critical**: ✅ YES

#### **@tanstack/react-virtual** `^3.13.13`
- **Purpose**: Virtual scrolling
- **Used For**: Large lists performance
- **Where**: Long tables, lists
- **Critical**: ⚠️ PERFORMANCE

#### **recharts** `^3.5.1`
- **Purpose**: Charts library
- **Used For**: Analytics, dashboards
- **Where**: Analytics pages
- **Critical**: ⚠️ IF USING ANALYTICS

#### **@tremor/react** `^3.18.7`
- **Purpose**: Dashboard components
- **Used For**: Professional dashboards
- **Where**: Analytics, metrics
- **Critical**: ⚠️ IF USING ANALYTICS

---

### 8. CONTENT EDITING (7 packages)

#### **@tiptap/react** `^3.13.0`
- **Purpose**: Rich text editor
- **Used For**: WYSIWYG editing
- **Where**: Content creation
- **Critical**: ⚠️ IF USING RICH TEXT

#### **@tiptap/starter-kit** `^3.13.0`
- **Purpose**: TipTap extensions
- **Used For**: Editor features
- **Where**: Rich text editor
- **Critical**: ⚠️ IF USING RICH TEXT

#### **@tiptap/extension-placeholder** `^3.13.0`
- **Purpose**: Placeholder text
- **Used For**: Editor UX
- **Where**: Rich text editor
- **Critical**: ⚠️ IF USING RICH TEXT

#### **react-contenteditable** `^3.3.7`
- **Purpose**: Editable content
- **Used For**: Inline editing
- **Where**: Content blocks
- **Critical**: ⚠️ IF USING

#### **react-markdown** `^10.1.0`
- **Purpose**: Markdown rendering
- **Used For**: Display markdown content
- **Where**: Content preview
- **Critical**: ⚠️ IF USING MARKDOWN

#### **remark-gfm** `^4.0.1`
- **Purpose**: GitHub-flavored markdown
- **Used For**: Extended markdown features
- **Where**: Markdown rendering
- **Critical**: ⚠️ IF USING MARKDOWN

#### **react-syntax-highlighter** `^16.1.0`
- **Purpose**: Code highlighting
- **Used For**: Display code blocks
- **Where**: Documentation, examples
- **Critical**: ⚠️ IF USING CODE BLOCKS

---

### 9. VISUAL EDITOR & DRAG-DROP (6 packages)

#### **@craftjs/core** `^0.2.12`
- **Purpose**: Visual page builder
- **Used For**: Drag-drop page editor
- **Where**: Block editor (future)
- **Critical**: ⚠️ FUTURE FEATURE

#### **@craftjs/utils** `^0.2.5`
- **Purpose**: CraftJS utilities
- **Used For**: Editor helpers
- **Where**: Block editor
- **Critical**: ⚠️ FUTURE FEATURE

#### **@dnd-kit/core** `^6.3.1`
- **Purpose**: Drag and drop
- **Used For**: Kanban, reordering
- **Where**: Factory Kanban board
- **Critical**: ✅ YES (for Kanban)

#### **@dnd-kit/sortable** `^10.0.0`
- **Purpose**: Sortable lists
- **Used For**: Reorderable items
- **Where**: Kanban, lists
- **Critical**: ✅ YES (for Kanban)

#### **reactflow** `^11.11.4`
- **Purpose**: Flow diagrams
- **Used For**: Workflow visualization
- **Where**: Automation builder (future)
- **Critical**: ⚠️ FUTURE FEATURE

#### **react-flow-renderer** `^10.3.17`
- **Purpose**: Flow renderer
- **Used For**: Render flow diagrams
- **Where**: Automation builder
- **Critical**: ⚠️ FUTURE FEATURE

---

### 10. MAPS & GEO (4 packages)

#### **leaflet** `^1.9.4`
- **Purpose**: Interactive maps
- **Used For**: Geo intelligence visualization
- **Where**: Geo targeting pages
- **Critical**: ⚠️ IF USING MAPS

#### **react-leaflet** `^4.2.1`
- **Purpose**: React wrapper for Leaflet
- **Used For**: Maps in React
- **Where**: Geo components
- **Critical**: ⚠️ IF USING MAPS

#### **@types/leaflet** `^1.9.21`
- **Purpose**: TypeScript types for Leaflet
- **Used For**: Type safety
- **Where**: Map components
- **Critical**: ⚠️ IF USING MAPS

#### **@turf/turf** `^7.3.1`
- **Purpose**: Geospatial analysis
- **Used For**: Distance, area calculations
- **Where**: Geo intelligence
- **Critical**: ⚠️ IF USING GEO ANALYSIS

---

### 11. UTILITIES & HELPERS (10 packages)

#### **lodash-es** `^4.17.21`
- **Purpose**: Utility functions
- **Used For**: Array/object manipulation
- **Where**: Throughout app
- **Critical**: ✅ YES

#### **date-fns** `^4.1.0`
- **Purpose**: Date manipulation
- **Used For**: Formatting dates
- **Where**: Timestamps, schedules
- **Critical**: ✅ YES

#### **nanoid** `^5.0.5`
- **Purpose**: Unique ID generation
- **Used For**: Generate IDs
- **Where**: Client-side ID creation
- **Critical**: ⚠️ NICE TO HAVE

#### **lzutf8** `^0.6.3`
- **Purpose**: Compression
- **Used For**: Compress data
- **Where**: Storage optimization
- **Critical**: ⚠️ OPTIMIZATION

#### **papaparse** `^5.5.3`
- **Purpose**: CSV parsing
- **Used For**: Import/export CSV
- **Where**: Data import/export
- **Critical**: ⚠️ IF USING CSV

#### **pdfmake** `^0.2.20`
- **Purpose**: PDF generation
- **Used For**: Export to PDF
- **Where**: Reports, exports
- **Critical**: ⚠️ IF USING PDF

#### **html-to-image** `^1.11.13`
- **Purpose**: Screenshot generation
- **Used For**: Export as image
- **Where**: Preview exports
- **Critical**: ⚠️ IF USING EXPORTS

#### **react-dropzone** `^14.3.8`
- **Purpose**: File upload
- **Used For**: Drag-drop file uploads
- **Where**: Media upload
- **Critical**: ⚠️ IF USING UPLOADS

#### **react-diff-viewer-continued** `^3.4.0`
- **Purpose**: Diff viewer
- **Used For**: Compare versions
- **Where**: Content comparison
- **Critical**: ⚠️ IF USING DIFF

#### **@types/*** (5 packages)
- **Purpose**: TypeScript type definitions
- **Used For**: Type safety
- **Where**: Development
- **Critical**: ✅ YES (dev)

---

### 12. QUEUE & BACKGROUND JOBS (2 packages)

#### **bullmq** `^5.66.0`
- **Purpose**: Job queue
- **Used For**: Background processing
- **Where**: Content generation queue
- **Critical**: ⚠️ IF USING QUEUES

#### **@bull-board/*** (2 packages)
- **Purpose**: Queue dashboard
- **Used For**: Monitor jobs
- **Where**: Admin interface
- **Critical**: ⚠️ IF USING QUEUES

---

### 13. BUILD & DEV TOOLS (7 packages)

#### **autoprefixer** `^10.4.18`
- **Purpose**: CSS vendor prefixes
- **Used For**: Browser compatibility
- **Where**: Build process
- **Critical**: ✅ YES

#### **postcss** `^8.4.35`
- **Purpose**: CSS processing
- **Used For**: Transform CSS
- **Where**: Build process
- **Critical**: ✅ YES

#### **sharp** `^0.33.3`
- **Purpose**: Image optimization
- **Used For**: Resize, optimize images
- **Where**: Build process
- **Critical**: ✅ YES

#### **rollup-plugin-visualizer** `^6.0.5`
- **Purpose**: Bundle analysis
- **Used For**: Analyze bundle size
- **Where**: Development
- **Critical**: ⚠️ DEV TOOL

#### **vite-plugin-compression** `^0.5.1`
- **Purpose**: Brotli compression
- **Used For**: Pre-compress assets
- **Where**: Build process
- **Critical**: ⚠️ OPTIMIZATION

#### **vite-plugin-inspect** `^11.3.3`
- **Purpose**: Vite debugging
- **Used For**: Debug transformations
- **Where**: Development
- **Critical**: ⚠️ DEV TOOL

#### **astro-imagetools** `^0.9.0`
- **Purpose**: Image optimization
- **Used For**: Responsive images
- **Where**: Image components
- **Critical**: ⚠️ OPTIMIZATION

---

### 14. QUERY & DEBUGGING (2 packages)

#### **@tanstack/react-query-devtools** `^5.91.1`
- **Purpose**: React Query debugging
- **Used For**: Debug API calls
- **Where**: Development
- **Critical**: ⚠️ DEV TOOL

---

## 📊 SUMMARY BY CRITICALITY

| Criticality | Count | Action |
|-------------|-------|--------|
| ✅ **CRITICAL** (Must Have) | 35 | Keep all |
| ⚠️ **NICE TO HAVE** (Optional) | 30 | Keep if using feature |
| ⚠️ **FUTURE** (Not Used Yet) | 8 | Can remove if not planning |
| ⚠️ **DEV TOOLS** (Development) | 7 | Keep for development |

---

## 🎯 PACKAGES ACTUALLY USED TODAY

### In Intelligence Library Fix:
- `@directus/sdk` - API calls
- `@tanstack/react-table` - Data tables
- `@tanstack/react-query` - Data fetching
- `react-hook-form` - Forms
- `zod` - Validation
- `@hookform/resolvers` - Form validation

### In Send to Factory:
- `@directus/sdk` - API calls
- `react` - Components
- `react-dom` - Rendering
- UI components (button, dialog, select, label)

### In Jumpstart Fix:
- `@directus/sdk` - Job creation
- WordPress integration
- State management

---

## 🗑️ PACKAGES TO CONSIDER REMOVING

If you're NOT using these features, you can remove:

### Maps (if not using geo visualization):
- `leaflet`
- `react-leaflet`
- `@types/leaflet`
- `@turf/turf`

### Charts (if not using analytics):
- `recharts`
- `@tremor/react`

### Visual Editor (if not building yet):
- `@craftjs/core`
- `@craftjs/utils`
- `reactflow`
- `react-flow-renderer`

### Rich Text Editor (if using simple inputs):
- `@tiptap/react`
- `@tiptap/starter-kit`
- `@tiptap/extension-placeholder`

### Queues (if not using background jobs):
- `bullmq`
- `@bull-board/api`
- `@bull-board/express`
- `ioredis`

**Potential Savings**: ~15-20 packages if not using these features

---

## ✅ RECOMMENDED PACKAGES TO ADD

### For Better DX:
- `eslint` - Code linting
- `prettier` - Code formatting
- `husky` - Git hooks
- `lint-staged` - Pre-commit linting

### For Testing:
- `vitest` - Unit testing
- `@testing-library/react` - Component testing
- `playwright` - E2E testing

---

**Total Package Size**: ~500MB (node_modules)  
**Build Size**: ~2-3MB (optimized)  
**Critical Packages**: 35/80 (44%)