### Core TypeScript Types Definitions

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Defines the fundamental TypeScript types used throughout the application for data structures like passwords, platforms, and users. These types ensure data integrity and improve code maintainability. The snippet shows examples of how to use these types for variables and in React components.

```typescript
import type {
  PasswordEntry,
  Platform,
  PlatformType,
  User,
  AuthData
} from '@/types';

// Platform types (categories)
const platformType: PlatformType = 'email'; // 'email' | 'social' | 'media' | 'education' | 'finance' | 'other'

// Platform interface
const platform: Platform = {
  id: '1',
  name: 'Email',
  type: 'email',
  color: 'text-blue-500',
  icon: 'mail'
};

// Password entry interface
const entry: PasswordEntry = {
  id: 'abc123',
  platformId: '1',
  label: 'Gmail Account',
  username: 'user@gmail.com',
  password: 'base64-encrypted-password-string',
  note: 'Personal email',
  createdAt: '2025-11-20T10:30:00.000Z',
  updatedAt: '2025-11-20T12:45:00.000Z',
  deletedAt: undefined // Set to ISO string when soft-deleted
};

// User interface
const user: User = {
  id: 'user123',
  email: 'user@example.com',
  fullName: 'John Doe',
  createdAt: '2025-11-20T08:00:00.000Z'
};

// Auth data interface
const authData: AuthData = {
  user: user,
  isAuthenticated: true,
  rememberMe: true
};

// Using types in components
function VaultComponent() {
  const [entries, setEntries] = useState<PasswordEntry[]>([]);
  const [platforms, setPlatforms] = useState<Platform[]>([]);

  const addEntry = (newEntry: Omit<PasswordEntry, 'id' | 'createdAt'>) => {
    // Implementation
  };

  return <div>{/* Component JSX */}</div>;
}

```

--------------------------------

### Manage Password Categories with Platform Store (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

This snippet demonstrates how to manage password categories (platforms) using the `usePlatformStore` hook. It covers adding, updating, deleting, retrieving, and filtering platforms, as well as displaying a list of platforms. Dependencies include the `@/store/usePlatformStore` module.

```typescript
import { usePlatformStore } from '@/store/usePlatformStore';

// Add a custom platform
const addCustomPlatform = () => {
  const { addPlatform } = usePlatformStore.getState();

  addPlatform(
    'Gaming Accounts',
    'other',
    'text-red-500',
    'gamepad'
  );
};

// Update platform details
const updatePlatformName = (platformId: string) => {
  const { updatePlatform } = usePlatformStore.getState();

  updatePlatform(platformId, {
    name: 'Social Networks',
    color: 'text-pink-500'
  });
};

// Delete a platform
const deletePlatform = (platformId: string) => {
  const { deletePlatform } = usePlatformStore.getState();
  deletePlatform(platformId);
};

// Get platform by ID
const getPlatform = (platformId: string) => {
  const { getPlatformById } = usePlatformStore.getState();
  return getPlatformById(platformId);
};

// Filter platforms by type
const getSocialPlatforms = () => {
  const { getPlatformsByType } = usePlatformStore.getState();
  return getPlatformsByType('social');
};

// Access all platforms
function PlatformList() {
  const { platforms } = usePlatformStore();

  return (
    <ul>
      {platforms.map(platform => (
        <li key={platform.id} className={platform.color}>
          {platform.name} ({platform.type})
        </li>
      ))}
    </ul>
  );
}
```

--------------------------------

### Vault Store (Password Management) Operations (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Handles core password entry management, including adding, updating, retrieving, searching, and deleting password entries. It utilizes the `useVaultStore` hook for state management and interacts with encryption/decryption functions. Supports soft deletion to a trash system and retrieval of entries by platform.

```typescript
import { useVaultStore } from '@/store/useVaultStore';

// Add a new password entry
const addNewPassword = async () => {
  const { addEntry } = useVaultStore.getState();

  try {
    await addEntry({
      platformId: '1', // Email platform
      label: 'Gmail Account',
      username: 'user@gmail.com',
      password: 'MySecurePassword123!',
      note: 'Personal email account'
    });
    console.log('Password added successfully');
  } catch (error) {
    console.error('Failed to add password:', error);
  }
};

// Update existing password entry
const updatePassword = async (entryId: string) => {
  const { updateEntry } = useVaultStore.getState();

  await updateEntry(entryId, {
    label: 'Gmail Work Account',
    password: 'NewSecurePassword456!'
  });
};

// Search passwords by label or username
function SearchPasswords() {
  const { searchEntries } = useVaultStore();
  const [query, setQuery] = useState('');

  const results = searchEntries(query);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search passwords..."
      />
      {results.map(entry => (
        <div key={entry.id}>{entry.label}</div>
      ))}
    </div>
  );
}

// Decrypt and display password
const showPassword = async (entryId: string) => {
  const { getEntryById, decryptPassword } = useVaultStore.getState();
  const entry = getEntryById(entryId);

  if (entry) {
    try {
      const decrypted = await decryptPassword(entry.password);
      console.log('Decrypted password:', decrypted);
      return decrypted;
    } catch (error) {
      console.error('Decryption failed:', error);
    }
  }
};

// Delete password (soft delete to trash)
const deletePassword = (entryId: string) => {
  const { deleteEntry } = useVaultStore.getState();
  deleteEntry(entryId);
};

// Restore from trash
const restorePassword = (entryId: string) => {
  const { restoreEntry } = useVaultStore.getState();
  restoreEntry(entryId);
};

// Get all deleted entries
const getTrash = () => {
  const { getDeletedEntries } = useVaultStore.getState();
  return getDeletedEntries();
};

// Permanently delete entry
const permanentlyDelete = (entryId: string) => {
  const { permanentlyDeleteEntry } = useVaultStore.getState();
  permanentlyDeleteEntry(entryId);
};

// Get passwords by platform
const getEmailPasswords = () => {
  const { getEntriesByPlatform } = useVaultStore.getState();
  return getEntriesByPlatform('1'); // '1' is Email platform ID
};
```

--------------------------------

### Generate Secure Passwords with Strength Analysis (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

This snippet shows how to generate secure passwords using the `generatePassword` function and analyze their strength with `calculatePasswordStrength`. It allows customization of password length, character types, and provides strength scoring with visual feedback. Dependencies include the `@/utils/generator` module. Input is configuration for password generation, output is a password string and its strength analysis.

```typescript
import { generatePassword, calculatePasswordStrength } from '@/utils/generator';

// Generate a password with all character types
const strongPassword = generatePassword(
  20,     // length
  true,   // lowercase letters
  true,   // uppercase letters
  true,   // digits
  true,   // special characters (@$#%&!)
  4       // number of enabled character types
);
console.log('Generated password:', strongPassword);
// Example output: "aB3$cD5%eF7&gH9!"

// Generate password with only letters and numbers
const simplePassword = generatePassword(
  16,     // length
  true,   // lowercase
  true,   // uppercase
  true,   // digits
  false,  // no special chars
  3       // 3 types enabled
);
console.log('Simple password:', simplePassword);
// Example output: "Kj8mNp2QrStU4vWx"

// Calculate password strength
const checkStrength = (password: string) => {
  const strength = calculatePasswordStrength(password);
  console.log(`Strength: ${strength.label} (${strength.score}/7)`);
  console.log(`Color class: ${strength.color}`);
  return strength;
};

// Examples of password strength scoring
checkStrength('pass');          // { score: 1, label: 'Weak', color: 'bg-destructive' }
checkStrength('password123');   // { score: 3, label: 'Fair', color: 'bg-warning' }
checkStrength('MyPass123');     // { score: 5, label: 'Good', color: 'bg-primary' }
checkStrength('MyP@ss123!XyZ'); // { score: 7, label: 'Strong', color: 'bg-success' }

// Use in a React component
function PasswordGenerator() {
  const [password, setPassword] = useState('');

  const handleGenerate = () => {
    const newPassword = generatePassword(20, true, true, true, true, 4);
    setPassword(newPassword);
  };

  const strength = password ? calculatePasswordStrength(password) : null;

  return (
    <div>
      <button onClick={handleGenerate}>Generate Password</button>
      <input type="text" value={password} readOnly />
      {strength && (
        <div>
          <span>Strength: {strength.label}</span>
          <div className={`h-2 ${strength.color}`}
               style={{ width: `${(strength.score / 7) * 100}%` }} />
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### Internationalization (i18n) with react-i18next (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Enables multi-language support within the application using the react-i18next library. It provides functions to translate text and switch between languages. This snippet demonstrates accessing translations, changing the current language, and using interpolation for dynamic content.

```typescript
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  // Access translations
  const title = t('vault.title');                    // "Password Vault"
  const addButton = t('vault.addPassword');          // "Add Password"
  const searchPlaceholder = t('vault.search');       // "Search passwords..."

  // Change language
  const switchLanguage = (lang: 'en' | 'fr') => {
    i18n.changeLanguage(lang);
  };

  // Translations with interpolation
  const deleteConfirm = t('platforms.deleteConfirm', { count: 5 });
  // "This will affect 5 passwords. Continue?"

  return (
    <div>
      <h1>{t('vault.title')}</h1>
      <button onClick={() => switchLanguage('en')}>English</button>
      <button onClick={() => switchLanguage('fr')}>Français</button>
      <p>{t('vault.passwordsStored')}</p>
    </div>
  );
}

// Available translation keys (partial list):
// - vault.title, vault.addPassword, vault.search, vault.delete
// - generator.title, generator.generatePassword, generator.strength
// - platforms.title, platforms.addPlatform, platforms.platformDeleted
// - passwordForm.savePassword, passwordForm.labelPlaceholder
// - common.cancel, common.save, common.delete

```

--------------------------------

### Authentication Store Management (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Manages user authentication and session state using Zustand. Handles user registration, login, and logout operations. Provides access to authentication status and user information within React components. It relies on the `useAuthStore` hook for state access.

```typescript
import { useAuthStore } from '@/store/useAuthStore';

// Register a new user
const handleRegister = async () => {
  try {
    await useAuthStore.getState().register(
      'user@example.com',
      'SecurePass123!',
      'John Doe'
    );
    console.log('Registration successful');
  } catch (error) {
    console.error('Registration failed:', error);
  }
};

// Login existing user
const handleLogin = async () => {
  try {
    await useAuthStore.getState().login(
      'user@example.com',
      'SecurePass123!',
      true // rememberMe
    );
    console.log('Login successful');
  } catch (error) {
    console.error('Login failed:', error);
  }
};

// Access auth state in components
function MyComponent() {
  const { user, isAuthenticated, logout } = useAuthStore();

  if (!isAuthenticated) {
    return <div>Please log in</div>;
  }

  return (
    <div>
      <p>Welcome, {user?.fullName}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}
```

--------------------------------

### Encryption/Decryption Workflow with LocalStorage - TypeScript

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Demonstrates a complete workflow for securely storing and retrieving passwords using AES-GCM encryption. Data is encrypted before storage and decrypted upon retrieval, providing end-to-end encryption for sensitive information stored in localStorage or databases.

```typescript
// Full encryption/decryption workflow
const secureWorkflow = async () => {
  const originalPassword = 'MyPassword123!';
  const masterKey = 'user-vault-secret';

  // Step 1: Encrypt before storing
  const encrypted = await encrypt(originalPassword, masterKey);
  console.log('Storing encrypted:', encrypted);

  // Store encrypted in localStorage/database
  localStorage.setItem('password', encrypted);

  // Step 2: Retrieve and decrypt when needed
  const stored = localStorage.getItem('password');
  if (stored) {
    const decrypted = await decrypt(stored, masterKey);
    console.log('Retrieved password:', decrypted);
    // Output: "MyPassword123!"
  }
};
```

--------------------------------

### Key Derivation Security Verification - TypeScript

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Validates PBKDF2 key derivation security by demonstrating that different secrets produce different ciphertexts for the same plaintext, and that decryption fails with incorrect passwords. This ensures cryptographic security and prevents unauthorized access.

```typescript
// Encryption with different secrets produces different outputs
const demonstrateKeyDerivation = async () => {
  const data = 'secret data';

  const encrypted1 = await encrypt(data, 'password1');
  const encrypted2 = await encrypt(data, 'password2');

  console.log('Different secrets produce different ciphertexts:');
  console.log(encrypted1 !== encrypted2); // true

  // Wrong secret cannot decrypt
  try {
    await decrypt(encrypted1, 'wrong-password');
  } catch (error) {
    console.log('Decryption with wrong password fails'); // Will throw error
  }
};
```

--------------------------------

### Toast Notifications System (TypeScript)

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Implements a custom toast notification system for providing user feedback. It utilizes a hook to manage toast states and offers success, error, and info message types. The system requires a ToastContainer component to be mounted in the application's root.

```typescript
import { useToast } from '@/hooks/useToast';

function MyComponent() {
  const toast = useToast();

  const handleSuccess = () => {
    toast.success('Password saved successfully!');
  };

  const handleError = () => {
    toast.error('Failed to save password. Please try again.');
  };

  const handleInfo = () => {
    toast.info('Password copied to clipboard');
  };

  const savePassword = async () => {
    try {
      // Save logic here
      await saveToDatabase();
      toast.success('Password saved successfully!');
    } catch (error) {
      toast.error('Failed to save password');
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={handleSuccess}>Show Success</button>
      <button onClick={handleError}>Show Error</button>
      <button onClick={handleInfo}>Show Info</button>
      <button onClick={savePassword}>Save Password</button>
    </div>
  );
}

// Toast container is mounted in App.tsx
import { ToastContainer } from '@/hooks/useToast';

function App() {
  return (
    <div>
      <ToastContainer />
      {/* Your app content */}
    </div>
  );
}

```

--------------------------------

### AES-GCM Encryption with PBKDF2 Key Derivation - TypeScript

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Implements password encryption and decryption using AES-GCM algorithm with PBKDF2 key derivation. The encrypt function returns a base64-encoded string containing salt, IV, and ciphertext, while decrypt reverses this process. Includes error handling for corrupted data or incorrect passwords.

```typescript
import { encrypt, decrypt } from '@/utils/crypto';

// Encrypt sensitive data
const encryptPassword = async () => {
  const plaintext = 'MySuperSecretPassword123!';
  const secret = 'user-master-password';

  try {
    const encrypted = await encrypt(plaintext, secret);
    console.log('Encrypted (base64):', encrypted);
    // Returns: base64 string containing salt + iv + ciphertext
    // Example: "kJ8mNp2QrStU4vWx...long base64 string..."

    return encrypted;
  } catch (error) {
    console.error('Encryption failed:', error);
  }
};

// Decrypt encrypted data
const decryptPassword = async (encryptedData: string) => {
  const secret = 'user-master-password';

  try {
    const decrypted = await decrypt(encryptedData, secret);
    console.log('Decrypted password:', decrypted);
    // Returns: "MySuperSecretPassword123!"

    return decrypted;
  } catch (error) {
    console.error('Decryption failed - wrong password or corrupted data:', error);
    throw error;
  }
};
```

--------------------------------

### Password Generator Popover Component - React TSX

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Interactive UI component for password generation with customizable options including length (8-64 characters), character types (lowercase, uppercase, numbers, symbols), real-time strength indicator, copy functionality, and password visibility toggle. Supports both standalone usage and form integration via callback.

```typescript
import { GeneratorPopover } from '@/components/GeneratorPopover';

// Use as standalone generator
function GeneratorPage() {
  return (
    <div>
      <h1>Password Generator</h1>
      <GeneratorPopover />
    </div>
  );
}

// Use with callback to integrate with forms
function PasswordForm() {
  const [password, setPassword] = useState('');

  const handleUsePassword = (generatedPassword: string) => {
    setPassword(generatedPassword);
    console.log('Using password:', generatedPassword);
  };

  return (
    <form>
      <label>Password</label>
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />

      <GeneratorPopover onUsePassword={handleUsePassword} />

      <button type="submit">Save</button>
    </form>
  );
}
```

--------------------------------

### Password Form Component with Modal Integration - React TSX

Source: https://context7.com/mohammed-ben-seghir/secure-vault-zen/llms.txt

Form component for adding and editing password entries with Zod validation, auto-encryption, and modal integration. Supports platform/category selection, username input, password field with show/hide toggle, integrated password generator, optional notes, and seamless add/edit workflows.

```typescript
import { PasswordForm } from '@/components/PasswordForm';
import { Modal } from '@/components/ui/Modal';

// Add new password
function AddPasswordModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Add Password</button>

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Add Password">
        <PasswordForm onClose={() => setIsOpen(false)} />
      </Modal>
    </>
  );
}

// Edit existing password
function EditPasswordModal() {
  const [editingId, setEditingId] = useState<string | null>(null);

  return (
    <>
      <button onClick={() => setEditingId('entry-id-123')}>Edit Password</button>

      {editingId && (
        <Modal
          isOpen={!!editingId}
          onClose={() => setEditingId(null)}
          title="Edit Password"
        >
          <PasswordForm
            entryId={editingId}
            onClose={() => setEditingId(null)}
          />
        </Modal>
      )}
    </>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.