{"_rev":"3-c398b2eb4dcc9ce9472d01a9ae6ed9b0","time":{"created":"2026-01-08T11:48:30.377Z","modified":"2026-01-08T11:48:31.223Z","1.0.0":"2026-01-08T10:20:20.639Z","1.0.1":"2026-01-08T11:48:30.683Z"},"_id":"@3lens/overlay","name":"@3lens/overlay","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@3lens/overlay","version":"1.0.1","description":"In-app overlay UI for 3Lens devtool","keywords":["three.js","threejs","devtools","overlay"],"homepage":"https://github.com/adriandarian/3Lens","repository":{"type":"git","url":"git+https://github.com/adriandarian/3Lens.git","directory":"packages/overlay"},"license":"MIT","author":{"name":"Adrian Darian","email":"adrian.the.hactus@gmail.com","url":"https://github.com/adriandarian"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"main":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"@3lens/core":"1.0.1","@3lens/ui":"1.0.1"},"devDependencies":{"three":"^0.160.0","vite-plugin-dts":"^3.7.0"},"peerDependencies":{"three":">=0.150.0"},"scripts":{"build":"vite build","dev":"vite build --watch","typecheck":"tsc --noEmit","clean":"rm -rf dist"},"_id":"@3lens/overlay@1.0.1","bugs":{"url":"https://github.com/adriandarian/3Lens/issues"},"_integrity":"sha512-7IRrXlQMH3fhgh/4fQlBD0ZH9VX00PmR3t3tMldSUFXnB4rT7y2BtAcuqnnwGWl5vHJ29jeHen+HMFkduhpO3g==","_resolved":"/tmp/5d019f7f95bac1d1056bc825a361a411/3lens-overlay-1.0.1.tgz","_from":"file:3lens-overlay-1.0.1.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-7IRrXlQMH3fhgh/4fQlBD0ZH9VX00PmR3t3tMldSUFXnB4rT7y2BtAcuqnnwGWl5vHJ29jeHen+HMFkduhpO3g==","shasum":"d8f24005ce1ecb8193c7a5d02049cce19825a24f","tarball":"https://registry.npmjs.org/@3lens/overlay/-/overlay-1.0.1.tgz","fileCount":37,"unpackedSize":2189646,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@3lens%2foverlay@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDMlSGqMpZqCV4mxGKp10wyc6FH+t9ILe+j4HEPfemBqgIhAOC6B4fCU447nTvjHyFsA44/rR6T0ar1REXYBvlInmZJ"}]},"_npmUser":{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"},"directories":{},"maintainers":[{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/overlay_1.0.1_1767872910481_0.2462694972035362"},"_hasShrinkwrap":false}},"maintainers":[{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"}],"description":"In-app overlay UI for 3Lens devtool","homepage":"https://github.com/adriandarian/3Lens","keywords":["three.js","threejs","devtools","overlay"],"repository":{"type":"git","url":"git+https://github.com/adriandarian/3Lens.git","directory":"packages/overlay"},"author":{"name":"Adrian Darian","email":"adrian.the.hactus@gmail.com","url":"https://github.com/adriandarian"},"bugs":{"url":"https://github.com/adriandarian/3Lens/issues"},"license":"MIT","readme":"# @3lens/overlay\n\nIn-app overlay UI for 3Lens — a floating panel for inspecting three.js scenes.\n\n## Installation\n\n```bash\nnpm install @3lens/core @3lens/overlay\n```\n\n> **Note:** Currently in alpha, not yet published to npm.\n\n## Usage\n\n### With Existing Probe\n\n```typescript\nimport { createProbe } from '@3lens/core';\nimport { createOverlay } from '@3lens/overlay';\n\nconst probe = createProbe({ appName: 'My App' });\nprobe.observeRenderer(renderer);\nprobe.observeScene(scene);\n\n// Create and mount the overlay\nconst overlay = createOverlay(probe, {\n  position: 'right',\n});\n```\n\n### One-Line Bootstrap\n\n```typescript\nimport { bootstrapOverlay } from '@3lens/overlay';\n\nconst { probe, overlay } = bootstrapOverlay({\n  renderer,\n  scene,\n  appName: 'My App',\n  three: THREE, // Enables selection highlighting\n});\n```\n\n## API\n\n### `createOverlay(probe, options?): ThreeLensOverlay`\n\nCreates and mounts the overlay panel.\n\n**Options:**\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `position` | `'left' \\| 'right'` | `'right'` | Panel position |\n| `collapsed` | `boolean` | `false` | Start collapsed |\n\n### `bootstrapOverlay(options): { probe, overlay }`\n\nOne-call setup for probe + overlay.\n\n**Options:**\n\n| Option | Type | Required | Description |\n|--------|------|----------|-------------|\n| `renderer` | `WebGLRenderer` | Yes | The renderer |\n| `scene` | `Scene` | Yes | The scene to observe |\n| `appName` | `string` | No | Application name |\n| `probeConfig` | `Partial<ProbeConfig>` | No | Probe configuration |\n| `overlay` | `Partial<OverlayOptions>` | No | Overlay options |\n| `three` | `typeof THREE` | No | THREE reference for helpers |\n\n### `ThreeLensOverlay`\n\n| Method | Description |\n|--------|-------------|\n| `show()` | Show the panel |\n| `hide()` | Hide the panel |\n| `toggle()` | Toggle visibility |\n| `isVisible` | Whether the panel is visible |\n| `destroy()` | Remove from DOM |\n\n## Features\n\n- **Scene Tree** — Expandable tree view of all objects\n- **Object Inspector** — View transform, visibility, materials\n- **Performance Stats** — FPS, draw calls, triangles\n- **Frame Time Chart** — Visual performance history\n- **Resizable Panel** — Drag to resize\n- **Keyboard Shortcut** — `Ctrl+Shift+D` to toggle\n\n## Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl+Shift+D` | Toggle overlay |\n\n## Conditional Loading\n\nOnly load in development:\n\n```typescript\nif (import.meta.env.DEV) {\n  const { bootstrapOverlay } = await import('@3lens/overlay');\n  bootstrapOverlay({ renderer, scene });\n}\n```\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}