{"_id":"@allystudio/diopter-simulator","name":"@allystudio/diopter-simulator","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@allystudio/diopter-simulator","version":"0.1.0","description":"Visual acuity and refractive error 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":["visual-acuity","diopter","myopia","hyperopia","astigmatism","presbyopia","accessibility","a11y","simulator","design-tools","vision-impairment"],"license":"MIT","author":{"name":"Allyship.dev"},"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/diopter-simulator"},"publishConfig":{"access":"public"},"_id":"@allystudio/diopter-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-6JtoCTyanAt4lifWfjxcGaMP9e5BwFPUDSxaKloM547HhYd8d107cOtqN7sG7+7ySAWpL3jIj5O2CE2evrGLhw==","shasum":"2334cb32925b636c0e9b5143ab088e0e66498f7b","tarball":"https://registry.npmjs.org/@allystudio/diopter-simulator/-/diopter-simulator-0.1.0.tgz","fileCount":5,"unpackedSize":33255,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDAVvqTZhBwVPD7qawwtr0mIBlIm5/HOfphyDq9z3+2FwIgGyyDnQZWH0br1BJNie5pvYg6HBzFTaQUz5Zbp/NH0to="}]},"_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/diopter-simulator_0.1.0_1750396538603_0.419242348695108"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T05:15:38.526Z","0.1.0":"2025-06-20T05:15:38.771Z","modified":"2025-06-20T05:15:39.017Z"},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"description":"Visual acuity and refractive error simulator for accessibility testing and design","homepage":"https://github.com/allyship-dev/allyship.dev#readme","keywords":["visual-acuity","diopter","myopia","hyperopia","astigmatism","presbyopia","accessibility","a11y","simulator","design-tools","vision-impairment"],"repository":{"type":"git","url":"git+https://github.com/allyship-dev/allyship.dev.git","directory":"packages/diopter-simulator"},"author":{"name":"Allyship.dev"},"bugs":{"url":"https://github.com/allyship-dev/allyship.dev/issues"},"license":"MIT","readme":"# Diopter Simulator\n\nA JavaScript library for simulating visual impairments caused by refractive errors (nearsightedness, farsightedness) by applying realistic blur effects to web elements.\n\n## Features\n\n- 🔬 **Scientific Accuracy**: Real diopter calculations with viewing distance effects\n- ⚡ **High Performance**: CSS filter-based blur rendering\n- 🧹 **Clean API**: Simple functional interface with closure-based state\n- 📱 **Viewing Distance**: Realistic simulation for different devices (phone, laptop, TV)\n- 🧪 **Well Tested**: Comprehensive test suite with 94%+ coverage\n- 📦 **Zero Dependencies**: Lightweight and self-contained\n\n## Installation\n\n```bash\nnpm install @allystudio/diopter-simulator\n```\n\n## Quick Start\n\n```javascript\nimport { createDiopterSimulator } from '@allystudio/diopter-simulator'\n\nconst simulator = createDiopterSimulator()\n\n// Simulate -3.0 diopters (moderate myopia) at laptop distance\nsimulator.configure(-3.0, 0.6)\nsimulator.applyToElement(document.body)\n\n// Remove simulation\nsimulator.reset()\n```\n\n## API\n\n### `createDiopterSimulator()`\n\nCreates a new simulator instance.\n\n```javascript\nconst simulator = createDiopterSimulator()\n```\n\n### Configuration Methods\n\n#### `setDiopters(value: number)`\nSet diopter strength (-8 to +8 range):\n- **Negative values**: Myopia (nearsightedness) - distant objects blurry\n- **Positive values**: Hyperopia (farsightedness) - close objects blurry\n- **Zero**: No refractive error\n\n#### `setViewingDistance(meters: number)`\nSet viewing distance in meters (0.2 to 4.0 range):\n- **0.3m**: Phone/tablet distance\n- **0.6m**: Laptop/desktop distance\n- **2.0m**: TV viewing distance\n\n#### `configure(diopters: number, viewingDistance: number)`\nSet both values at once.\n\n### Simulation Methods\n\n#### `applyToElement(element: HTMLElement)`\nApply blur effect to specified element and all children.\n\n#### `applyToPage()`\nApply blur effect to entire page (document.body).\n\n#### `reset()`\nRemove all blur effects and reset state.\n\n### State Methods\n\n#### `isActive(): boolean`\nCheck if simulation is currently active.\n\n#### `getCurrentConfig()`\nGet current diopter and viewing distance values.\n\n## Presets\n\n### Diopter Presets\n```javascript\nimport { DIOPTER_PRESETS } from '@allystudio/diopter-simulator'\n\n// Common prescription strengths\nDIOPTER_PRESETS.MILD_MYOPIA        // -1.5\nDIOPTER_PRESETS.MODERATE_MYOPIA    // -3.0\nDIOPTER_PRESETS.SEVERE_MYOPIA      // -6.0\nDIOPTER_PRESETS.MILD_HYPEROPIA     // +1.5\nDIOPTER_PRESETS.MODERATE_HYPEROPIA // +3.0\n```\n\n### Viewing Distance Presets\n```javascript\nimport { VIEWING_DISTANCE_PRESETS } from '@allystudio/diopter-simulator'\n\nVIEWING_DISTANCE_PRESETS.PHONE   // 0.3m\nVIEWING_DISTANCE_PRESETS.LAPTOP  // 0.6m\nVIEWING_DISTANCE_PRESETS.DESKTOP // 0.7m\nVIEWING_DISTANCE_PRESETS.TV      // 2.0m\n```\n\n## Examples\n\n### Testing Mobile App Accessibility\n```javascript\nconst simulator = createDiopterSimulator()\n\n// Simulate user with -4D prescription using phone\nsimulator.configure(DIOPTER_PRESETS.MODERATE_MYOPIA, VIEWING_DISTANCE_PRESETS.PHONE)\nsimulator.applyToPage()\n\n// Test if UI is still usable with blur\n// Reset when done\nsimulator.reset()\n```\n\n### Progressive Testing\n```javascript\nconst simulator = createDiopterSimulator()\n\n// Test multiple prescription strengths\nconst testCases = [\n  { diopters: -1.5, distance: 0.6, label: 'Mild myopia at laptop' },\n  { diopters: -3.0, distance: 0.6, label: 'Moderate myopia at laptop' },\n  { diopters: +2.0, distance: 0.3, label: 'Hyperopia reading phone' }\n]\n\ntestCases.forEach(test => {\n  simulator.configure(test.diopters, test.distance)\n  simulator.applyToPage()\n  console.log(`Testing: ${test.label}`)\n  // Perform your accessibility tests here\n  simulator.reset()\n})\n```\n\n### Dynamic Simulation\n```javascript\nconst simulator = createDiopterSimulator()\n\n// Create interactive controls\nconst diopterSlider = document.getElementById('diopter-slider')\nconst distanceSlider = document.getElementById('distance-slider')\n\nfunction updateSimulation() {\n  const diopters = parseFloat(diopterSlider.value)\n  const distance = parseFloat(distanceSlider.value)\n\n  simulator.configure(diopters, distance)\n  simulator.applyToPage()\n}\n\ndiopterSlider.addEventListener('input', updateSimulation)\ndistanceSlider.addEventListener('input', updateSimulation)\n```\n\n## Understanding Diopters\n\n- **-1.5D**: Mild myopia - slight blur at distance\n- **-3.0D**: Moderate myopia - significant blur beyond arm's length\n- **-6.0D**: Severe myopia - only close objects are clear\n- **+1.5D**: Mild hyperopia - slight difficulty with close work\n- **+3.0D**: Moderate hyperopia - reading and close tasks affected\n\n## Viewing Distance Impact\n\nThe same prescription affects vision differently at various distances:\n\n- **Myopia**: More blur at greater distances (TV > laptop > phone)\n- **Hyperopia**: More consistent blur, slightly worse up close\n\n## Browser Support\n\n- Modern browsers with CSS filter support\n- Chrome 53+, Firefox 35+, Safari 9.1+, Edge 12+\n\n## License\n\nMIT License - see LICENSE file for details.\n","readmeFilename":"README.md","_rev":"1-d192070198e7f752cac7598bcefc2150"}