@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/components/Upload/Upload.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React, { useState } from 'react';
 import { Upload } from './Upload';
 import { SIZES } from '../../lib/constants/components';
@@ -10,8 +11,68 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Upload component provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.',
+        component: `
+# Upload
+
+## Overview
+
+Upload provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.
+
+## Features
+
+- Drag & drop file upload
+- Progress tracking
+- File preview
+- Validation
+- Multiple file support
+- Customizable size limits
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Upload via keyboard navigation
+- Screen reader: File selection and status announced appropriately
+- ARIA support: Proper roles and properties for upload components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Upload 
+  title="Drag and Drop files here" 
+  onFileSelect={(files) => console.log(files)} 
+/>
+\`\`\`
+
+### Multiple Files
+
+\`\`\`tsx
+<Upload 
+  multiple={true}
+  title="Drag and Drop files here" 
+  onFileSelect={(files) => console.log(files)} 
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size variant of the upload component |
+| disabled | boolean | false | Whether the upload component is disabled |
+| maxSizeInMB | number | 5 | Maximum file size in MB |
+| multiple | boolean | false | Whether multiple files can be selected |
+| title | string | 'Drag and Drop files here' | Text for the drag and drop section |
+| supportedFilesText | string | 'Files supported: PDF, XSLS, JPEG, PNG, Scanner' | Text describing supported file types |
+| buttonText | string | 'Choose File' | Text for the upload button |
+| helperText | string | 'Maximum size: 5MB' | Helper text displayed below the button |
+| onFileSelect | (files: File[]) => void | - | Callback when files are selected |
+        `,
       },
     },
   },
@@ -20,43 +81,71 @@ const meta = {
     size: {
       control: { type: 'select' },
       options: SIZES,
-      defaultValue: 'md',
       description: 'Size variant of the upload component',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     disabled: {
       control: { type: 'boolean' },
-      defaultValue: false,
       description: 'Whether the upload component is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     maxSizeInMB: {
       control: { type: 'number' },
-      defaultValue: 5,
       description: 'Maximum file size in MB',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 5 },
+      },
     },
     multiple: {
       control: { type: 'boolean' },
-      defaultValue: false,
       description: 'Whether multiple files can be selected',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     title: {
       control: { type: 'text' },
-      defaultValue: 'Drag and Drop files here',
       description: 'Text for the drag and drop section',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Drag and Drop files here' },
+      },
     },
     supportedFilesText: {
       control: { type: 'text' },
-      defaultValue: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
       description: 'Text describing supported file types',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner' },
+      },
     },
     buttonText: {
       control: { type: 'text' },
-      defaultValue: 'Choose File',
       description: 'Text for the upload button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Choose File' },
+      },
     },
     helperText: {
       control: { type: 'text' },
-      defaultValue: 'Maximum size: 5MB',
       description: 'Helper text displayed below the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Maximum size: 5MB' },
+      },
+    },
+    onFileSelect: {
+      action: 'file selected',
+      description: 'Callback when files are selected',
     },
   },
 } satisfies Meta<typeof Upload>;
@@ -64,8 +153,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default upload component
-export const Default: Story = {
+export const BasicUsage: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
       <Upload {...args} />
@@ -77,6 +165,7 @@ export const Default: Story = {
     supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
     buttonText: 'Choose File',
     helperText: 'Maximum size: 5MB',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
@@ -142,8 +231,7 @@ export const SizeVariants: Story = {
   },
 };
 
-// Disabled state
-export const Disabled: Story = {
+export const DisabledState: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
       <Upload {...args} />
@@ -151,16 +239,17 @@ export const Disabled: Story = {
   ),
   args: {
     size: 'md',
-    title: 'Drag and Drop files here',
-    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
-    buttonText: 'Choose File',
-    helperText: 'Maximum size: 5MB',
     disabled: true,
+    title: 'Upload Disabled',
+    supportedFilesText: 'PDF, JPEG, PNG',
+    buttonText: 'Choose File',
+    helperText: 'This upload component is disabled',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
       description: {
-        story: 'Upload component in disabled state with reduced opacity and no interactions.',
+        story: 'Upload component in disabled state.',
       },
     },
   },
@@ -353,7 +442,6 @@ export const CustomIcon: Story = {
   },
 };
 
-// Multiple file upload
 export const MultipleFiles: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
@@ -363,15 +451,16 @@ export const MultipleFiles: Story = {
   args: {
     size: 'md',
     multiple: true,
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'PDF, JPEG, PNG, DOCX',
     buttonText: 'Choose Files',
-    title: 'Upload multiple files',
-    supportedFilesText: 'Select multiple files at once',
-    helperText: 'Maximum size: 5MB per file',
+    helperText: 'Multiple files supported, max size: 5MB each',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
       description: {
-        story: 'Upload component configured to accept multiple files at once.',
+        story: 'Upload component configured to allow multiple file selections.',
       },
     },
   },

package/src/lib/README.md

@@ -42,10 +42,10 @@ src/
 Composables are reusable pieces of component logic that can be shared across components.
 
 ```typescript
-import { useButton } from '../lib/composables/useButton';
+import { useAccordion } from '../lib/composables/useAccordion';
 
 // In your component
-const { generateButtonClass, handleClick } = useButton();
+const { generateAccordionClass, handleToggle } = useAccordion();
 ```
 
 ### Component Interactions

package/src/lib/__tests__/theme-tools.test.ts

@@ -0,0 +1,193 @@
+import { describe, it, expect } from 'vitest';
+import {
+  importTheme,
+  exportTheme,
+  quickTheme,
+  createDarkVariant,
+  validateTheme,
+  themeToCSS,
+  getThemeMetadata,
+  supportsDarkMode
+} from '../theme-tools';
+import { Theme } from '../theme/types';
+
+describe('theme-tools', () => {
+  const mockTheme: Theme = {
+    name: 'Test Theme',
+    palette: {
+      primary: { main: '#7AFFD7' },
+      secondary: { main: '#FF5733' },
+      error: { main: '#FF0000' },
+      warning: { main: '#FFA500' },
+      info: { main: '#0000FF' },
+      success: { main: '#00FF00' },
+      background: {
+        default: '#ffffff',
+        paper: '#f5f5f5',
+        subtle: '#fafafa',
+      },
+      text: {
+        primary: '#000000',
+        secondary: '#666666',
+        disabled: '#999999',
+      },
+    },
+    typography: {
+      fontFamily: 'Arial',
+      fontSize: 16,
+      fontWeightLight: 300,
+      fontWeightRegular: 400,
+      fontWeightMedium: 500,
+      fontWeightSemiBold: 600,
+      fontWeightBold: 700,
+      h1: { fontSize: '2rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h2: { fontSize: '1.5rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h3: { fontSize: '1.25rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h4: { fontSize: '1.1rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h5: { fontSize: '1rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h6: { fontSize: '0.9rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      body1: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.5 },
+      body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5 },
+    },
+    spacing: (v: number) => `${v * 8}px`,
+    breakpoints: {
+      values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },
+      unit: 'px',
+      up: (k: any) => `@media (min-width: ${k}px)`,
+      down: (k: any) => `@media (max-width: ${k}px)`,
+      between: (s: any, e: any) => `@media (min-width: ${s}px) and (max-width: ${e}px)`,
+    },
+    shadows: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
+    transitions: {
+      duration: { shortest: 150, shorter: 200, short: 250, standard: 300, complex: 375, enteringScreen: 225, leavingScreen: 195 },
+      easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' }
+    },
+    zIndex: { mobileStepper: 1000, speedDial: 1050, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },
+    borderRadius: { base: 4, sm: 2, md: 4, lg: 8, xl: 12, xxl: 16, '3xl': 24, '4xl': 32, pill: 9999 },
+    custom: {},
+    __isJSTheme: true
+  };
+
+  describe('quickTheme', () => {
+    it('should create a theme with primary color', () => {
+      const theme = quickTheme('My Theme', '#ff0000');
+      expect(theme.name).toBe('My Theme');
+      expect(theme.palette.primary.main).toBe('#ff0000');
+    });
+
+    it('should create a theme with primary and secondary color', () => {
+      const theme = quickTheme('My Theme', '#ff0000', '#00ff00');
+      expect(theme.palette.secondary.main).toBe('#00ff00');
+    });
+  });
+
+  describe('createDarkVariant', () => {
+    it('should create a dark variant of a theme', () => {
+      const darkTheme = createDarkVariant(mockTheme);
+      expect(darkTheme.name).toBe('Test Theme Dark');
+      expect(darkTheme.palette.mode).toBe('dark');
+      expect(darkTheme.palette.background.default).toBe('#121212');
+      expect(darkTheme.palette.text.primary).toBe('#ffffff');
+    });
+  });
+
+  describe('validateTheme', () => {
+    it('should return valid for a correct theme', () => {
+      const result = validateTheme(mockTheme);
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should return errors for a theme missing name', () => {
+      const invalidTheme = { ...mockTheme, name: '' };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme must have a name');
+    });
+
+    it('should return errors for a theme missing palette', () => {
+      const invalidTheme = { ...mockTheme, palette: undefined };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme must have a palette');
+    });
+
+    it('should return errors for a theme missing primary color', () => {
+      const invalidTheme = { ...mockTheme, palette: { ...mockTheme.palette, primary: undefined } };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme palette must have a primary color');
+    });
+  });
+
+  describe('themeToCSS', () => {
+    it('should generate CSS variables', () => {
+      const css = themeToCSS(mockTheme);
+      expect(css).toContain(':root');
+      expect(css).toContain('--atomix-');
+    });
+
+    it('should use custom selector', () => {
+      const css = themeToCSS(mockTheme, '.custom-theme');
+      expect(css).toContain('.custom-theme');
+    });
+  });
+
+  describe('getThemeMetadata', () => {
+    it('should extract metadata correctly', () => {
+      const metadata = getThemeMetadata(mockTheme);
+      expect(metadata.name).toBe('Test Theme');
+      expect(metadata.color).toBe('#7AFFD7');
+      expect(metadata.supportsDarkMode).toBe(false);
+    });
+
+    it('should identify dark mode support from palette mode', () => {
+      const darkTheme = { ...mockTheme, palette: { ...mockTheme.palette, mode: 'dark' } };
+      const metadata = getThemeMetadata(darkTheme as any);
+      expect(metadata.supportsDarkMode).toBe(true);
+    });
+  });
+
+  describe('supportsDarkMode', () => {
+    it('should return true if palette mode is dark', () => {
+      const theme = { ...mockTheme, palette: { ...mockTheme.palette, mode: 'dark' } };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return true if supportsDarkMode property is true', () => {
+      const theme = { ...mockTheme, supportsDarkMode: true };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return true if a11y modes includes dark', () => {
+      const theme = { ...mockTheme, a11y: { modes: ['dark'] } };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return false otherwise', () => {
+      expect(supportsDarkMode(mockTheme)).toBe(false);
+    });
+  });
+
+  describe('exportTheme', () => {
+    it('should export theme to JSON string', () => {
+      const json = exportTheme(mockTheme);
+      const parsed = JSON.parse(json);
+      expect(parsed.name).toBe('Test Theme');
+    });
+  });
+
+  describe('importTheme', () => {
+    it('should import a valid theme JSON', () => {
+      const theme = { name: 'Imported Theme' };
+      const json = JSON.stringify(theme);
+      const result = importTheme(json);
+      expect(result.name).toBe('Imported Theme');
+    });
+
+    it('should throw an error for invalid JSON', () => {
+      const invalidJson = '{ invalid: json }';
+      expect(() => importTheme(invalidJson)).toThrow('Invalid theme JSON');
+    });
+  });
+});

package/src/lib/composables/index.ts

@@ -1,5 +1,5 @@
 // Button composables
-export * from './useButton';
+// export * from './useButton';
 
 // Accordion composables
 export * from './useAccordion';
@@ -29,7 +29,7 @@ export * from './useEdgePanel';
 export * from './useTodo';
 
 // Form composables
-export * from './useCheckbox';
+// export * from './useCheckbox';
 export * from './useForm';
 export * from './useFormGroup';
 

package/src/lib/composables/useAtomixGlass.ts

@@ -235,18 +235,12 @@ export function useAtomixGlass({
   const effectiveCornerRadius = useMemo(() => {
     if (cornerRadius !== undefined) {
       const result = Math.max(0, cornerRadius);
-      // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-      //   console.log('[AtomixGlass] Using manual cornerRadius prop:', result);
-      // }
       return result;
     }
 
     const result = Math.max(0, dynamicCornerRadius);
-    // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-    //   console.log('[AtomixGlass] Using dynamic cornerRadius:', result);
-    // }
     return result;
-  }, [cornerRadius, dynamicCornerRadius, debugCornerRadius]);
+  }, [cornerRadius, dynamicCornerRadius]);
 
   const effectiveReducedMotion = useMemo(
     () => reducedMotion || userPrefersReducedMotion,
@@ -278,7 +272,6 @@ export function useAtomixGlass({
     const extractRadius = () => {
       try {
         let extractedRadius: number | null = null;
-        let extractionSource = 'default';
 
         if (contentRef.current) {
           const firstChild = contentRef.current.firstElementChild as HTMLElement;
@@ -286,7 +279,6 @@ export function useAtomixGlass({
             const domRadius = extractBorderRadiusFromDOMElement(firstChild);
             if (domRadius !== null && domRadius > 0) {
               extractedRadius = domRadius;
-              extractionSource = 'DOM element';
             }
           }
         }
@@ -295,25 +287,11 @@ export function useAtomixGlass({
           const childRadius = extractBorderRadiusFromChildren(children);
           if (childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS) {
             extractedRadius = childRadius;
-            extractionSource = 'React children';
           }
         }
 
         if (extractedRadius !== null && extractedRadius > 0) {
           setDynamicCornerRadius(extractedRadius);
-
-          // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-          //   console.log('[AtomixGlass] Corner radius extracted:', {
-          //     value: extractedRadius,
-          //     source: extractionSource,
-          //     timestamp: new Date().toISOString(),
-          //   });
-          // }
-        } else if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
-          //   console.log(
-          //     '[AtomixGlass] No corner radius found, using default:',
-          //     CONSTANTS.DEFAULT_CORNER_RADIUS
-          //   );
         }
       } catch (error) {
         if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
@@ -451,19 +429,6 @@ export function useAtomixGlass({
               setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold);
 
               setDetectedOverLight(isOverLightDetected);
-
-              // Debug logging
-              // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-              //   console.log('[AtomixGlass] OverLight Detection:', {
-              //     avgLuminance: avgLuminance.toFixed(3),
-              //     threshold: threshold.toFixed(3),
-              //     detected: isOverLightDetected,
-              //     validSamples,
-              //     totalLuminance: totalLuminance.toFixed(3),
-              //     configType: typeof overLight === 'object' ? 'object' : typeof overLight,
-              //     timestamp: new Date().toISOString(),
-              //   });
-              // }
             } else {
               // Invalid luminance calculation, default to false
               const result = false;
@@ -501,17 +466,7 @@ export function useAtomixGlass({
       return () => clearTimeout(timeoutId);
     } else if (typeof overLight === 'boolean') {
       // For boolean values, disable auto-detection
-      // Cache is automatically managed by WeakMap (no manual clearing needed)
       setDetectedOverLight(false);
-
-      // Debug logging for boolean mode
-      // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-      //   console.log('[AtomixGlass] OverLight Mode: boolean', {
-      //     value: overLight,
-      //     autoDetection: false,
-      //     timestamp: new Date().toISOString(),
-      //   });
-      // }
     }
 
     if (typeof window.matchMedia !== 'function') {
@@ -609,7 +564,7 @@ export function useAtomixGlass({
 
       if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
         const endTime = performance.now();
-        const duration = endTime - startTime;
+        // const duration = endTime - startTime;
         // if (duration > 5) {
         //   console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
         // }
@@ -684,6 +639,16 @@ export function useAtomixGlass({
 
   // Transform calculations
   const calculateDirectionalScale = useCallback(() => {
+    // Disable directional scaling if overLight is active (to prevent zooming/distorting the premium glass effect)
+    const isOverLightActive =
+      overLight === true ||
+      (overLight === 'auto' && detectedOverLight) ||
+      (typeof overLight === 'object' && overLight !== null && detectedOverLight);
+
+    if (isOverLightActive) {
+      return 'scale(1)';
+    }
+
     if (
       !globalMousePosition.x ||
       !globalMousePosition.y ||
@@ -727,7 +692,14 @@ export function useAtomixGlass({
       Math.abs(normalizedX) * stretchIntensity * 0.15;
 
     return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
-  }, [globalMousePosition, elasticity, glassSize, glassRef]);
+  }, [
+    globalMousePosition,
+    elasticity,
+    glassSize,
+    glassRef,
+    overLight,
+    detectedOverLight,
+  ]);
 
   const calculateFadeInFactor = useCallback(() => {
     if (
@@ -937,11 +909,11 @@ export function useAtomixGlass({
       isOverLight,
       threshold: 0.7,
       opacity: baseOpacity,
-      contrast: Math.min(1.8, Math.max(1.0, 1.4 + mouseInfluence * 0.3)),
-      brightness: Math.min(1.2, Math.max(0.7, 0.85 + mouseInfluence * 0.15)),
-      saturationBoost: Math.min(2.0, Math.max(1.0, 1.3 + mouseInfluence * 0.4)),
-      shadowIntensity: Math.min(1.5, Math.max(0.5, 0.9 + mouseInfluence * 0.5)),
-      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.3)),
+      contrast: Math.min(1.6, Math.max(1.0, 1.4 + mouseInfluence * 0.1)),
+      brightness: Math.min(1.1, Math.max(0.8, 0.9 + mouseInfluence * 0.05)),
+      saturationBoost: 1.3, // Fixed value — dynamic saturation amplifies perceived displacement
+      shadowIntensity: Math.min(1.2, Math.max(0.5, 0.9 + mouseInfluence * 0.2)),
+      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.1)),
     };
 
     if (typeof overLight === 'object' && overLight !== null) {
@@ -958,9 +930,9 @@ export function useAtomixGlass({
         ...baseConfig,
         threshold: validatedThreshold,
         opacity: validatedOpacity * hoverIntensity * activeIntensity,
-        contrast: validatedContrast + mouseInfluence * 0.3,
-        brightness: validatedBrightness + mouseInfluence * 0.15,
-        saturationBoost: validatedSaturationBoost + mouseInfluence * 0.4,
+        contrast: Math.min(1.6, validatedContrast + mouseInfluence * 0.1),
+        brightness: Math.min(1.1, validatedBrightness + mouseInfluence * 0.05),
+        saturationBoost: validatedSaturationBoost, // Use validated value directly, no mouse influence
       };
 
       // Debug logging

package/src/lib/composables/useChartExport.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+import { sanitizeCSVCell } from '../utils/csv';
 
 export interface ExportOptions {
   /**
@@ -180,13 +181,7 @@ export function useChartExport() {
 
     // Convert to CSV string with sanitization
     const csvContent = rows
-      .map(row => row.map(cell => {
-        // Sanitize cell content to prevent CSV injection
-        const sanitized = String(cell).replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
-        // Prevent formula injection by prefixing dangerous characters
-        const dangerous = /^[=+\-@]/;
-        return `"${dangerous.test(sanitized) ? `'${sanitized}` : sanitized}"`;
-      }).join(','))
+      .map(row => row.map(cell => `"${sanitizeCSVCell(cell)}"`).join(','))
       .join('\n');
 
     // Download