{"_id":"@acolby/lenz","_rev":"6-5adb3cd5bd64fc7643b92920eaeef5e2","name":"@acolby/lenz","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.1":{"name":"@acolby/lenz","version":"0.0.1","keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","_id":"@acolby/lenz@0.0.1","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"dist":{"shasum":"bbdf59b38c2a8ddadc267602d06bf85d6f8cc22e","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.1.tgz","fileCount":16,"integrity":"sha512-T+01iEId3TwQPVqp3MBV6lg6Phmg+JQ9npFWf6FQ4Sq4AC5X5Ht/VSLwT2tGh5b9CiAyB0LhHFYslr1lRFOnhA==","signatures":[{"sig":"MEUCIDmo3loXdyNupuKPxYADXCiWtKmX6JrK81cVw/pNnDboAiEAumjXLM9CERdEnS5tV5IAlChq2MgRYXfRtdtNhEi1Dfs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27527},"main":"src/index.ts","type":"module","gitHead":"ef5346771a65967a2179f3caa2797a2afd9eb0ff","scripts":{"test":"test"},"_npmUser":{"name":"acolby","email":"acolby@live.com"},"_npmVersion":"10.9.2","description":"Data attribute overlay tool for React Applications","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","@types/react":"^19.1.6"},"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lenz_0.0.1_1748633789391_0.007975836334559894","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@acolby/lenz","version":"0.0.2","keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","_id":"@acolby/lenz@0.0.2","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"dist":{"shasum":"40f7179c18c58bf589d73096d249195bcbc5bf79","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.2.tgz","fileCount":16,"integrity":"sha512-xQbo4PtrvhGOV1/8xYhf5iaEsR+w3RlrBEXp1nDxUr34A4H5IJl4k4gLV2Yi6aH/y30TAB5JFSjJ2HvupHWmfQ==","signatures":[{"sig":"MEQCIAI0P2p1TrJPE8sQQa+zwKu9PHZ9krYBLXKjz9F/ulikAiA+ndsF0XMT8l5bpWmRGdb+pbJ+LKAxikZTtpleDDbToA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27527},"main":"src/index.ts","type":"module","gitHead":"ef5346771a65967a2179f3caa2797a2afd9eb0ff","scripts":{"test":"test"},"_npmUser":{"name":"acolby","email":"acolby@live.com"},"_npmVersion":"10.9.2","description":"Data attribute overlay tool for React Applications","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","@types/react":"^19.1.6"},"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lenz_0.0.2_1748633834762_0.22096384946060033","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@acolby/lenz","version":"0.0.3","keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","_id":"@acolby/lenz@0.0.3","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"homepage":"https://github.com/acolby/lenz#readme","bugs":{"url":"https://github.com/acolby/lenz/issues"},"dist":{"shasum":"178eeeec663ced3d1759106d247d17a6b24dfbab","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.3.tgz","fileCount":16,"integrity":"sha512-7bZhWUg2uDzyWfoMK/TtFLyIKO92jw4z/BeRRp596/+0GDuYFVl7slzLn9W4xBbWIc7itBe8r4yqSnL4QJXgwg==","signatures":[{"sig":"MEQCIE2qskDtY8ldP5Achuaa+hvoRmt+xlmVK5v1giYLDoeyAiAXIPHRSRXvGCpffnwK4kFl85QorZqplt26VYSnAfyUKQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27753},"main":"src/index.ts","type":"module","types":"src/index.ts","exports":{".":{"import":"./src/index.ts"}},"gitHead":"7046d2a724c46a0c48b5f5d792571aaa33cdd5be","scripts":{"test":"test"},"_npmUser":{"name":"acolby","email":"acolby@live.com"},"repository":{"url":"git+https://github.com/acolby/lenz.git","type":"git"},"_npmVersion":"10.9.2","description":"Data attribute overlay tool for React Applications","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","typescript":"^5.4.0","@types/react":"^19.1.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lenz_0.0.3_1748634865134_0.6819701034795282","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@acolby/lenz","version":"0.0.4","keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","_id":"@acolby/lenz@0.0.4","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"homepage":"https://github.com/acolby/lenz#readme","bugs":{"url":"https://github.com/acolby/lenz/issues"},"dist":{"shasum":"1cb717ef338fdab4ae1e61bb089a6d1721267c7a","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.4.tgz","fileCount":16,"integrity":"sha512-iJiymUfM6R6HY6d9P9cOWDm75QjLx/2fb1ba9FzX7vodfFGa70BAJ3AgS/KyrdyASE2ZzeV6tdeh9Oji1o9XUg==","signatures":[{"sig":"MEUCIQCkT33t3I0EjMh/8KG2uQTzXyadP6tdpDK/u6GuZsoXWgIgPJmcx3l9MM+KgnkP0lnpSbvqvgNX69NiyeBkUAvyMFc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27756},"main":"src/index.tsx","type":"module","types":"src/index.tsx","exports":{".":{"import":"./src/index.tsx"}},"gitHead":"0dd0ce1ef8eefe6077ea189759aa763b3ec942bc","scripts":{"test":"test"},"_npmUser":{"name":"acolby","email":"acolby@live.com"},"repository":{"url":"git+https://github.com/acolby/lenz.git","type":"git"},"_npmVersion":"10.9.2","description":"Data attribute overlay tool for React Applications","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","typescript":"^5.4.0","@types/react":"^19.1.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lenz_0.0.4_1748635182112_0.6056917696182407","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@acolby/lenz","version":"0.0.5","keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","_id":"@acolby/lenz@0.0.5","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"homepage":"https://github.com/acolby/lenz#readme","bugs":{"url":"https://github.com/acolby/lenz/issues"},"dist":{"shasum":"bfb9dfc1adcf0e5caf18dce55087652992c81fd0","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.5.tgz","fileCount":30,"integrity":"sha512-zvJiBvNqAvuqBp4ZOil0caarFIa0IVOaztC3za5WI7jHBs0sdnUyPo7EQ5nMuf9AL4c+OtFgq+VpXyOzUpAdXA==","signatures":[{"sig":"MEUCIA4OtQMqgNl4l0gbbibMGJ1Rqz7FmFYns3TyMYuQumLRAiEA0yXdJCi3/ao2YYn6zUxykmyHnhg+Q6ucK0HZhfUCG5E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30318},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"ccfebfc9892742eaa3ff9ab4584e4f734da26f87","scripts":{"build":"tsx ./scripts/build.js && tsc -p tsconfig.json","prepublishOnly":"rm -rf dist && tsc"},"_npmUser":{"name":"acolby","email":"acolby@live.com"},"repository":{"url":"git+https://github.com/acolby/lenz.git","type":"git"},"_npmVersion":"10.9.2","description":"Data attribute overlay tool forReact Applications","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tsx":"^4.19.4","react":"^19.1.0","esbuild":"^0.25.5","typescript":"^5.4.0","@types/react":"^19.1.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lenz_0.0.5_1748635864597_0.060522446179338774","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@acolby/lenz","version":"0.0.6","description":"Data attribute overlay tool forReact Applications","main":"dist/index.js","types":"dist/index.d.ts","type":"module","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/acolby/lenz.git"},"scripts":{"build":"tsx ./scripts/build.js && tsc -p tsconfig.json","prepublishOnly":"rm -rf dist && tsc"},"keywords":["React","Overlay"],"author":{"name":"acolby"},"license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^19.1.6","esbuild":"^0.25.5","react":"^19.1.0","tsc":"^2.0.4","tsx":"^4.19.4","typescript":"^5.4.0"},"_id":"@acolby/lenz@0.0.6","gitHead":"ccfebfc9892742eaa3ff9ab4584e4f734da26f87","bugs":{"url":"https://github.com/acolby/lenz/issues"},"homepage":"https://github.com/acolby/lenz#readme","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-BMhQpj7SK44uvJMimzfPE32yCYPiJDTPK+ndNSZN6pOwL9VOxAe6P3NwB8p2MEtqYqJyrm1cdX6TuZRA0HDXhA==","shasum":"8b7d58faa07f7a7933c98a77a7c95bd10d91e40b","tarball":"https://registry.npmjs.org/@acolby/lenz/-/lenz-0.0.6.tgz","fileCount":30,"unpackedSize":30267,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCaI2v/j15uwFL6TALmma0iJIL61zDigIjPlt43b9FGdgIgb5onejRUrHan0e/97PtlkyOs9cDAiKUC8QScjScOxTg="}]},"_npmUser":{"name":"acolby","email":"acolby@live.com","actor":{"name":"acolby","email":"acolby@live.com","type":"user"}},"directories":{},"maintainers":[{"name":"acolby","email":"acolby@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lenz_0.0.6_1750193347264_0.9317119061959924"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-30T19:36:29.320Z","modified":"2025-06-17T20:49:07.968Z","0.0.1":"2025-05-30T19:36:29.582Z","0.0.2":"2025-05-30T19:37:14.964Z","0.0.3":"2025-05-30T19:54:25.302Z","0.0.4":"2025-05-30T19:59:42.290Z","0.0.5":"2025-05-30T20:11:04.790Z","0.0.6":"2025-06-17T20:49:07.461Z"},"bugs":{"url":"https://github.com/acolby/lenz/issues"},"author":{"name":"acolby"},"license":"MIT","homepage":"https://github.com/acolby/lenz#readme","keywords":["React","Overlay"],"repository":{"type":"git","url":"git+https://github.com/acolby/lenz.git"},"description":"Data attribute overlay tool forReact Applications","maintainers":[{"name":"acolby","email":"acolby@live.com"}],"readme":"# Lenz\n\n**A visual debugging and annotation overlay for React apps.** \nLenz lets you decorate elements in your app with `data-lenz` attributes and view them through an interactive overlay, helping with inspection, debugging, and collaboration.\n\n## โœจ Features\n\n- Overlay to inspect all elements marked with `data-lenz`\n- Custom metadata support via `data-lenz-*` attributes\n- Breadcrumb navigation for selected elements\n- Pluggable UI for rendering metadata (`Comp`)\n- Keyboard shortcuts and custom close behavior\n\n## ๐Ÿš€ Installation\n\n```bash\nnpm install @acolby/lenz\n# or\nyarn add @acolby/lenz\n```\n\n## ๐Ÿง  Usage\n\nIn your React app:\n\n```tsx\nimport { Lenz } from \"@acolby/lenz\";\n\nfunction AppWrapper() {\n const [showLenz, setShowLenz] = useState(false);\n\n return (\n <>\n (\n
\n

\n {\"Whatever you want to render using the item of interest\"}\n

\n
\n )}\n onKeypress={(e) => {\n if (\n e.key === \"Escape\" ||\n e.key === \"Delete\" ||\n e.key === \"Backspace\"\n ) {\n setShowLenz(false);\n }\n if (e.ctrlKey && e.key === \"l\") {\n setShowLenz((prev) => !prev);\n }\n }}\n onCloseClicked={() => setShowLenz(false)}\n />\n\n setShowLenz((prev) => !prev)} />\n \n );\n}\n```\n\n## ๐Ÿท๏ธ Marking Elements\n\nUse `data-lenz` to annotate elements:\n\n```html\n\n```\n\nThese attributes are detected by Lenz and shown in the overlay when active.\n\n## ๐Ÿงญ Breadcrumbs\n\nWhen an item is selected, Lenz displays a breadcrumb trail in the top-left corner of the page, giving context about where you are in the DOM/data-lenz hierarchy.\n\n## ๐Ÿ›  Customization\n\nYou can supply a custom `Comp` to render info about the selected item. This can be anything from a debug inspector to a design system label.\n\n## โŒจ๏ธ Default Shortcuts\n\n- `Ctrl + L`: Toggle Lenz overlay\n- `Escape`, `Delete`, `Backspace`: Close overlay\n\n## ๐Ÿงช Development Status\n\nLenz is under active development and contributions are welcome! This tool is ideal for developers, designers, and PMs who want better visibility into the structure of a React app.\n\n## ๐Ÿ“„ License\n\nMIT\n","readmeFilename":"Readme.md"}