{"_id":"@allystudio/color-vision-simulator","name":"@allystudio/color-vision-simulator","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@allystudio/color-vision-simulator","version":"0.1.0","description":"Color vision deficiency simulator for accessibility testing and design","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit","test":"vitest","test:watch":"vitest --watch"},"devDependencies":{"@types/node":"^20.0.0","@vitest/browser":"^2.0.0","@vitest/coverage-v8":"2.1.9","playwright":"^1.40.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^2.0.0"},"keywords":["color-blindness","color-vision","accessibility","a11y","protanopia","deuteranopia","tritanopia","achromatopsia","simulator","design-tools"],"license":"MIT","author":{"name":"Allyship.dev"},"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/color-vision-simulator"},"publishConfig":{"access":"public"},"_id":"@allystudio/color-vision-simulator@0.1.0","gitHead":"51a0130ca44790bcfd274dc137c332afe9dde5c1","bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"homepage":"https://github.com/allyship-dev/allyship.dev#readme","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-TkD5byLG/XRF8ZQb+qhfDIJfxHClVojfrFW7+wAZBVZovLAjMFs3QpciT4LP3ZFkPUBeKhVjwvklVAKOBi2u0A==","shasum":"55d4ebca9c13083e3f632829d762f60156a87c22","tarball":"https://registry.npmjs.org/@allystudio/color-vision-simulator/-/color-vision-simulator-0.1.0.tgz","fileCount":5,"unpackedSize":33353,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIECushVnHDh32G2jQTbT7R4DGO1WvvWXPhn02oTPHiPVAiEA6oPYqQDzHhocLuYVmKSf1TJMKDo6mZC0DTR2frqxSDE="}]},"_npmUser":{"name":"allystudio","email":"privat@aleksejdix.com","actor":{"name":"allystudio","email":"privat@aleksejdix.com","type":"user"}},"directories":{},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-vision-simulator_0.1.0_1750397468017_0.2934988565669383"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T05:31:07.923Z","0.1.0":"2025-06-20T05:31:08.204Z","modified":"2025-06-20T05:31:08.480Z"},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"description":"Color vision deficiency simulator for accessibility testing and design","homepage":"https://github.com/allyship-dev/allyship.dev#readme","keywords":["color-blindness","color-vision","accessibility","a11y","protanopia","deuteranopia","tritanopia","achromatopsia","simulator","design-tools"],"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/color-vision-simulator"},"author":{"name":"Allyship.dev"},"bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"license":"MIT","readme":"# @allystudio/color-vision-simulator\n\nA JavaScript library for simulating color vision deficiencies (color blindness) on web pages. Useful for accessibility testing, design validation, and educational purposes.\n\n## Features\n\n- 🎨 **Multiple Color Vision Types**: Protanopia, Deuteranopia, Tritanopia, Achromatopsia\n- ⚡ **High Performance**: Direct HTML filter application with overlay fallback\n- 🔧 **Configurable**: Customizable overlay IDs, z-index, and behavior\n- 📱 **Event-Driven**: Subscribe to state changes with callback system\n- 🧹 **Clean API**: Simple functional interface with closure-based state management\n- 🧪 **Well Tested**: Comprehensive test suite with browser testing\n- 📦 **Zero Dependencies**: Lightweight and self-contained\n\n## Installation\n\n```bash\nnpm install @allystudio/color-vision-simulator\n```\n\n## Quick Start\n\n```typescript\nimport { createColorVisionSimulator, COLOR_VISION_PRESETS } from '@allystudio/color-vision-simulator'\n\n// Create a simulator instance\nconst simulator = createColorVisionSimulator()\n\n// Start simulating protanopia (red-blindness)\nsimulator.start()\n\n// Change to deuteranopia (green-blindness)\nsimulator.setVisionType(COLOR_VISION_PRESETS.DEUTERANOPIA)\n\n// Stop simulation\nsimulator.stop()\n```\n\n## API Reference\n\n### createColorVisionSimulator\n\n#### Factory Function\n\n```typescript\ncreateColorVisionSimulator(options?: SimulatorOptions): ColorVisionSimulator\n```\n\n#### Options\n\n```typescript\ninterface SimulatorOptions {\n  overlayId?: string          // Custom overlay ID (default: \"color-vision-simulator-overlay\")\n  stylesId?: string           // Custom styles ID (default: \"color-vision-simulator-styles\")\n  zIndex?: number             // Custom z-index (default: 2147483647)\n  useDirectFilter?: boolean   // Use direct HTML filter (default: true)\n}\n```\n\n#### Methods\n\n##### State Management\n\n```typescript\n// Start the simulation\nsimulator.start(): void\n\n// Stop the simulation\nsimulator.stop(): void\n\n// Toggle simulation on/off\nsimulator.toggle(): void\n\n// Set vision type\nsimulator.setVisionType(type: ColorVisionType): void\n\n// Configure both vision type and active state\nsimulator.configure(visionType: ColorVisionType, isActive: boolean): void\n```\n\n##### State Queries\n\n```typescript\n// Get current state\nsimulator.getState(): SimulatorState\n\n// Check if active\nsimulator.isActive(): boolean\n\n// Get current vision type\nsimulator.getVisionType(): ColorVisionType\n```\n\n##### Event Handling\n\n```typescript\n// Subscribe to state changes\nconst unsubscribe = simulator.onStateChange((state) => {\n  console.log('State changed:', state)\n})\n\n// Unsubscribe\nunsubscribe()\n```\n\n### Vision Types\n\n```typescript\ntype ColorVisionType = 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia' | 'normal'\n\n// Presets for convenience\nconst COLOR_VISION_PRESETS = {\n  PROTANOPIA: 'protanopia' as const,      // Red-blindness\n  DEUTERANOPIA: 'deuteranopia' as const,  // Green-blindness\n  TRITANOPIA: 'tritanopia' as const,      // Blue-blindness\n  ACHROMATOPSIA: 'achromatopsia' as const, // Total color blindness\n  NORMAL: 'normal' as const               // Normal vision (no simulation)\n}\n```\n\n### Utility Functions\n\n```typescript\nimport {\n  createColorVisionSimulator,\n  formatColorVisionType,\n  getColorVisionDescription\n} from '@allystudio/color-vision-simulator'\n\n// Create a new instance\nconst simulator = createColorVisionSimulator(options)\n\n// Format vision type for display\nconst displayName = formatColorVisionType('protanopia') // \"Protanopia\"\n\n// Get description of vision type\nconst description = getColorVisionDescription('protanopia')\n// \"Difficulty distinguishing between red and green colors, with red appearing darker\"\n```\n\n## Examples\n\n### Basic Usage\n\n```typescript\nimport { createColorVisionSimulator, COLOR_VISION_PRESETS } from '@allystudio/color-vision-simulator'\n\nconst simulator = createColorVisionSimulator()\n\n// Simulate protanopia\nsimulator.setVisionType(COLOR_VISION_PRESETS.PROTANOPIA)\nsimulator.start()\n\n// Later...\nsimulator.stop()\n```\n\n### With State Change Monitoring\n\n```typescript\nconst simulator = createColorVisionSimulator()\n\n// Monitor state changes\nsimulator.onStateChange((state) => {\n  console.log(`Simulation ${state.isActive ? 'started' : 'stopped'}`)\n  console.log(`Vision type: ${state.visionType}`)\n})\n\nsimulator.start()\nsimulator.setVisionType(COLOR_VISION_PRESETS.DEUTERANOPIA)\nsimulator.stop()\n```\n\n### Custom Configuration\n\n```typescript\nconst simulator = createColorVisionSimulator({\n  overlayId: 'my-color-overlay',\n  stylesId: 'my-color-styles',\n  zIndex: 999999,\n  useDirectFilter: false  // Disable direct HTML filtering\n})\n```\n\n### Using Utility Functions\n\n```typescript\nimport { formatColorVisionType, getColorVisionDescription } from '@allystudio/color-vision-simulator'\n\n// Format for UI display\nconst displayName = formatColorVisionType('protanopia') // \"Protanopia\"\n\n// Get user-friendly description\nconst description = getColorVisionDescription('deuteranopia')\n// \"Difficulty distinguishing between red and green colors, with green appearing darker\"\n\n// Use in UI components\nfunction VisionTypeSelector({ currentType, onChange }) {\n  const types = ['protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia', 'normal']\n\n  return (\n    <select value={currentType} onChange={(e) => onChange(e.target.value)}>\n      {types.map(type => (\n        <option key={type} value={type}>\n          {formatColorVisionType(type)}\n        </option>\n      ))}\n    </select>\n  )\n}\n```\n\n### React Integration\n\n```tsx\nimport { useEffect, useState } from 'react'\nimport {\n  createColorVisionSimulator,\n  COLOR_VISION_PRESETS,\n  formatColorVisionType,\n  type ColorVisionType\n} from '@allystudio/color-vision-simulator'\n\nfunction ColorVisionControls() {\n  const [simulator] = useState(() => createColorVisionSimulator())\n  const [isActive, setIsActive] = useState(false)\n  const [visionType, setVisionType] = useState<ColorVisionType>('protanopia')\n\n  useEffect(() => {\n    const unsubscribe = simulator.onStateChange((state) => {\n      setIsActive(state.isActive)\n      setVisionType(state.visionType)\n    })\n\n    return unsubscribe\n  }, [simulator])\n\n  const visionTypes: ColorVisionType[] = [\n    'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia', 'normal'\n  ]\n\n  return (\n    <div>\n      <button onClick={() => simulator.toggle()}>\n        {isActive ? 'Stop' : 'Start'} Simulation\n      </button>\n\n      <select\n        value={visionType}\n        onChange={(e) => simulator.setVisionType(e.target.value as ColorVisionType)}\n      >\n        {visionTypes.map(type => (\n          <option key={type} value={type}>\n            {formatColorVisionType(type)}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\n```\n\n## How It Works\n\nThe simulator uses CSS filters to modify the visual appearance of web pages:\n\n1. **Color Matrix Filters**: For protanopia, deuteranopia, and tritanopia, scientifically accurate color transformation matrices are applied\n2. **Grayscale Filter**: For achromatopsia (total color blindness)\n3. **Direct HTML Filtering**: For better performance, filters are applied directly to the `<html>` element when possible\n4. **Overlay Fallback**: When direct filtering isn't suitable, a full-screen overlay with the filter is used\n\n## Browser Support\n\n- Chrome/Edge: Full support\n- Firefox: Full support\n- Safari: Full support\n- Mobile browsers: Full support\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Related Packages\n\n- `@allystudio/accessibility-utils` - Accessibility analysis utilities\n- `@allystudio/element-inspector` - DOM element inspection tools\n","readmeFilename":"README.md","_rev":"1-dd2ad6f693273a3c3b007e2782815ade"}