{"_id":"@brightblur/bbp-viewer","name":"@brightblur/bbp-viewer","dist-tags":{"next":"0.1.0-alpha.1","latest":"0.1.0-alpha.1"},"versions":{"0.1.0-alpha.1":{"name":"@brightblur/bbp-viewer","version":"0.1.0-alpha.1","description":"Framework-neutral BBP image viewer custom element","license":"Apache-2.0","private":false,"repository":{"type":"git","url":"git+https://github.com/brightblur/brightblur-protocol.git","directory":"packages/bbp-viewer"},"homepage":"https://protocol.brightblur.app/web-component/","bugs":{"url":"https://github.com/brightblur/brightblur-protocol/issues"},"publishConfig":{"access":"public"},"type":"module","main":"./dist/index.mjs","types":"./dist/index.d.mts","sideEffects":true,"exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs"}},"dependencies":{"@brightblur/bbp":"^0.1.0-alpha.1","@brightblur/bbp-compositor":"^0.1.0-alpha.1"},"devDependencies":{"typescript":"^5.9.3","vite-plus":"^0.2.1"},"scripts":{"build":"vp pack src/index.ts --format esm --out-dir dist --dts --sourcemap","check":"tsc --noEmit","test":"vp test"},"_id":"@brightblur/bbp-viewer@0.1.0-alpha.1","_integrity":"sha512-tcDxwuKuX1LDWu7uKl5nL6OTYdEuzqteA7ufJlmbgIRMCFuTUh5V9vgRhqoshzamvmyJDn19H0/YkBEO9zktTw==","_resolved":"/tmp/bbp-release-alpha1.nOaobf/brightblur-bbp-viewer-0.1.0-alpha.1.tgz","_from":"file:/tmp/bbp-release-alpha1.nOaobf/brightblur-bbp-viewer-0.1.0-alpha.1.tgz","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-tcDxwuKuX1LDWu7uKl5nL6OTYdEuzqteA7ufJlmbgIRMCFuTUh5V9vgRhqoshzamvmyJDn19H0/YkBEO9zktTw==","shasum":"8f5d60005fadc94bff8d2a637fe7a3dd9408fa79","tarball":"https://registry.npmjs.org/@brightblur/bbp-viewer/-/bbp-viewer-0.1.0-alpha.1.tgz","fileCount":6,"unpackedSize":64640,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBYF3wTGNP9vI7LI0M6mNBVE30O2303BXk6kdzSlyg6gAiEAsn6R/RSNOVAldawA4MmgUZApuW4s6pbMFHCD/Pvcrg0="}]},"_npmUser":{"name":"joeinnes","email":"joe@joeinn.es"},"directories":{},"maintainers":[{"name":"joeinnes","email":"joe@joeinn.es"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bbp-viewer_0.1.0-alpha.1_1784363489205_0.406634166963153"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-18T08:31:29.057Z","0.1.0-alpha.1":"2026-07-18T08:31:29.345Z","modified":"2026-07-18T08:31:29.584Z"},"maintainers":[{"name":"joeinnes","email":"joe@joeinn.es"}],"description":"Framework-neutral BBP image viewer custom element","homepage":"https://protocol.brightblur.app/web-component/","repository":{"type":"git","url":"git+https://github.com/brightblur/brightblur-protocol.git","directory":"packages/bbp-viewer"},"bugs":{"url":"https://github.com/brightblur/brightblur-protocol/issues"},"license":"Apache-2.0","readme":"# `@brightblur/bbp-viewer`\n\nFramework-neutral `<bbp-viewer>` custom element for rendering BBP images.\n\n## Install\n\n```sh\nnpm install @brightblur/bbp-viewer\n```\n\n## Sources\n\nImport the package once to register the custom element. A same-origin, CDN, S3,\nor presigned URL can then be supplied through `src`:\n\n```html\n<bbp-viewer src=\"https://cdn.example/photos/example.bbp.jpg\"></bbp-viewer>\n\n<script type=\"module\">\n  import '@brightblur/bbp-viewer';\n</script>\n```\n\nCross-origin URLs must allow the page origin through CORS. For an HTML `File`,\n`Blob`, `ArrayBuffer`, or `Uint8Array`, assign the JavaScript property instead:\n\n```html\n<input id=\"file\" type=\"file\" accept=\"image/*\" />\n<bbp-viewer id=\"viewer\"></bbp-viewer>\n\n<script type=\"module\">\n  import '@brightblur/bbp-viewer';\n\n  const input = document.querySelector('#file');\n  const viewer = document.querySelector('#viewer');\n\n  input.addEventListener('change', () => {\n    viewer.src = input.files?.[0] ?? null;\n  });\n</script>\n```\n\n## Private keys\n\nRegister keys once for every current and future viewer created by the same\npackage instance:\n\n```ts\nimport {\n  clearBbpViewerPrivateKeys,\n  setBbpViewerPrivateKeys\n} from '@brightblur/bbp-viewer';\n\nsetBbpViewerPrivateKeys([privateKey]);\n\n// Remove the page-wide keys and update all shared viewers.\nclearBbpViewerPrivateKeys();\n```\n\nAn explicit instance property overrides the shared keyring for that viewer:\n\n```ts\nconst viewer = document.querySelector('bbp-viewer');\n\nviewer.privateKeys = [differentPrivateKey];\nviewer.useSharedPrivateKeys(); // Return to the page-wide keyring.\n```\n\nPrivate keys may also be supplied through the `private-keys` JSON attribute for\nsimple demos. Prefer the property or shared-keyring APIs in real applications so\nkey material is not exposed in the DOM.\n\n## Presentation\n\nBy default the component shows the image recomposed with available keys and the\nundeciphered safe base. Add `compare` to place them in a draggable comparison\nslider, or use `reveal-only` or `mask-only` to show one pane:\n\n```html\n<bbp-viewer src=\"/photo.bbp.jpg\" compare></bbp-viewer>\n```\n","readmeFilename":"README.md","_rev":"1-3944f05a18d96e01bdfcfa031670a328"}