{"_id":"@carterduong/p-img","_rev":"6-8b3af1ac6cd1b2ba4c9a29120f6eae9d","name":"@carterduong/p-img","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@carterduong/p-img","version":"0.1.0","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"author":{"name":"carterduong"},"license":"MIT","_id":"@carterduong/p-img@0.1.0","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"homepage":"https://github.com/carterduong/pimg","bugs":{"url":"https://github.com/carterduong/pimg/issues"},"dist":{"shasum":"0168cf4110e540db5299f8667aac07b0d183551d","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.1.0.tgz","fileCount":6,"integrity":"sha512-ACYwgKQv7ixvu9kfvcMC1y14eJ3n5bJdl0ALm89k7ba6vzdN4ce+IGf1lTA6iOw6W/JEBKD1G6Tlw4YMDYu/1g==","signatures":[{"sig":"MEYCIQCimqf7Oiaau+mGJ0qE07UVE2bCUQ6qddYeTydebVX19AIhAPrPKU7lwvvqOm8a2yMTT+MkLFpPHrlozl27+MokEo+x","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13783},"main":"dist/p-img.umd.cjs","type":"module","types":"dist/p-img.d.ts","module":"dist/p-img.js","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"gitHead":"0d374ae005c98a63c0f76c51c9dd6d81f01297a5","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","preview":"vite preview","test:watch":"vitest","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"repository":{"url":"git+https://github.com/carterduong/pimg.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that adds pinch-to-zoom to images on mobile","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","jsdom":"^28.0.0","vitest":"^4.0.18","typescript":"^5.7.0","vite-plugin-dts":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/p-img_0.1.0_1770410391800_0.26515335571662946","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@carterduong/p-img","version":"0.1.1","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"author":{"name":"carterduong"},"license":"MIT","_id":"@carterduong/p-img@0.1.1","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"homepage":"https://github.com/carterduong/p-img","bugs":{"url":"https://github.com/carterduong/p-img/issues"},"dist":{"shasum":"42c705bdfb95989120511f633e673e02f9788ec9","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.1.1.tgz","fileCount":6,"integrity":"sha512-Fhu3wwQG3RcAmQqwFIE+CSW2q4xxuJMBOkC8T6O/aB2Rp2y2s0FoY86TyZ3crsUBZoGuFS+ahHhBVm0Ps8ycTw==","signatures":[{"sig":"MEYCIQCC/b0ZOnTaBAqzRHDj1XjlwCTkW0TWqWkTzX+xa3SP/wIhAJwktIy8pP6P4iL9foQflR/QD6gfo+UDeO2sj78AC8hd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13849},"main":"dist/p-img.umd.cjs","type":"module","types":"dist/p-img.d.ts","module":"dist/p-img.js","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"gitHead":"1bf6245b0f0911ea64a59c7afa51e89b229788b2","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","preview":"vite preview","test:watch":"vitest","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"repository":{"url":"git+https://github.com/carterduong/p-img.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that adds pinch-to-zoom to images on mobile","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","jsdom":"^28.0.0","vitest":"^4.0.18","typescript":"^5.7.0","vite-plugin-dts":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/p-img_0.1.1_1771985994103_0.6409127248389213","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@carterduong/p-img","version":"0.1.2","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"author":{"name":"carterduong"},"license":"MIT","_id":"@carterduong/p-img@0.1.2","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"homepage":"https://github.com/carterduong/p-img","bugs":{"url":"https://github.com/carterduong/p-img/issues"},"dist":{"shasum":"097ed717926b6adad1a4e403df5aac82474c2ce8","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.1.2.tgz","fileCount":6,"integrity":"sha512-6TOZO5aFH21LiSGw2huX4lIzoWdhLdPTNeEs93e5TjkipoAgS0ufBIK6pD5k3nydeQf0N7bLH8pFWnPmwiu3sQ==","signatures":[{"sig":"MEUCIDrpsV0ypUjaQT3w/2XR7fQiJ3F5a2kTvoEBnA9Jn6DGAiEA+dRLcRF6P9WqydnjkgAfkbDEI64JEhrc8N+LT2NZKa8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14149},"main":"dist/p-img.umd.cjs","type":"module","types":"dist/p-img.d.ts","module":"dist/p-img.js","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"gitHead":"3844a529936feee57c56c090146bb37254337314","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","preview":"vite preview","test:watch":"vitest","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"repository":{"url":"git+https://github.com/carterduong/p-img.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that adds pinch-to-zoom to images on mobile","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","jsdom":"^28.0.0","vitest":"^4.0.18","typescript":"^5.7.0","vite-plugin-dts":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/p-img_0.1.2_1772053802180_0.7426655577421009","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@carterduong/p-img","version":"0.1.3","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"author":{"name":"carterduong"},"license":"MIT","_id":"@carterduong/p-img@0.1.3","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"homepage":"https://github.com/carterduong/p-img","bugs":{"url":"https://github.com/carterduong/p-img/issues"},"dist":{"shasum":"7b19b755cba0c2e91e03025fdc4dd260ced413c8","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.1.3.tgz","fileCount":6,"integrity":"sha512-aG87sQO0A4ug7ohUST8besvuWb7fS1cp14Btov0iE1TbpYeTyIXDHRfucYb3wUcfilRp54QL5Pvr91fivxgL6w==","signatures":[{"sig":"MEQCIExkRzwsxtgm/gRVX0j0V6Hmr0DfwQ6Ags9FJVF4g2CHAiAWGx2/ZQSd9n/UlVzcADyqm/EJ81XSywD1ai50CvSCBg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14213},"main":"dist/p-img.umd.cjs","type":"module","types":"dist/p-img.d.ts","module":"dist/p-img.js","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"gitHead":"41101c6fffaa80d54679a92da6696e22ab1a727c","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","preview":"vite preview","test:watch":"vitest","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"repository":{"url":"git+https://github.com/carterduong/p-img.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that adds pinch-to-zoom to images on mobile","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","jsdom":"^28.0.0","vitest":"^4.0.18","typescript":"^5.7.0","vite-plugin-dts":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/p-img_0.1.3_1784846409504_0.01178474370635163","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@carterduong/p-img","version":"0.1.4","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"author":{"name":"carterduong"},"license":"MIT","_id":"@carterduong/p-img@0.1.4","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"homepage":"https://github.com/carterduong/p-img","bugs":{"url":"https://github.com/carterduong/p-img/issues"},"dist":{"shasum":"ecc4bc6dec82a8f697832bc6d8c85e5e030fc380","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.1.4.tgz","fileCount":6,"integrity":"sha512-ShlVqTaQxDzI3WyUFdb87atXZoA9Sa9JjjMfN7yWjQVx55dpVulEJ3A3y5qhL6/5Sw2EPLhZzX234n0+HYwxTg==","signatures":[{"sig":"MEYCIQDxhRC+6VLa34TBN2UKYaSlnwX6sJPTccuqwHZwXq9ytAIhAMNWvDG4VqdVZuPslhWnFnO7ckHp1YoPl2jfWJR0l7gB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15113},"main":"dist/p-img.umd.cjs","type":"module","types":"dist/p-img.d.ts","module":"dist/p-img.js","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"gitHead":"ca5f76f6d50b9724334271430ddd0721d614143b","scripts":{"dev":"vite","test":"vitest run","build":"tsc && vite build","preview":"vite preview","test:watch":"vitest","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"repository":{"url":"git+https://github.com/carterduong/p-img.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that adds pinch-to-zoom to images on mobile","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","jsdom":"^28.0.0","vitest":"^4.0.18","typescript":"^5.7.0","vite-plugin-dts":"^4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/p-img_0.1.4_1784847386520_0.3580429271181369","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@carterduong/p-img","version":"0.2.0","description":"A web component that adds pinch-to-zoom to images on mobile","type":"module","main":"dist/p-img.umd.cjs","module":"dist/p-img.js","types":"dist/p-img.d.ts","exports":{".":{"types":"./dist/p-img.d.ts","import":"./dist/p-img.js","require":"./dist/p-img.umd.cjs"}},"scripts":{"dev":"vite","build":"tsc && vite build","build:pages":"npm run build && cp dist/p-img.js docs/p-img.js","preview":"vite preview","test":"vitest run","test:watch":"vitest","prepublishOnly":"npm test && npm run build"},"keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"license":"MIT","author":{"name":"carterduong"},"repository":{"type":"git","url":"git+https://github.com/carterduong/p-img.git"},"homepage":"https://github.com/carterduong/p-img","bugs":{"url":"https://github.com/carterduong/p-img/issues"},"devDependencies":{"jsdom":"^28.0.0","typescript":"^5.7.0","vite":"^6.1.0","vite-plugin-dts":"^4.5.0","vitest":"^4.0.18"},"gitHead":"71f7792cb70939ab9357b91cb71183932d4f7fdd","_id":"@carterduong/p-img@0.2.0","_nodeVersion":"25.2.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-BbSgtGVjgG1SmV0RC0tYD+5SoPTlGxXUNG1ReWIwuYs6bxl9nnuvdDKsyAotz1kE4xU0o0hqlmRrDIoAYKJkog==","shasum":"d834997d0b29d1c2d1d6efb5b8103b5547fc19e9","tarball":"https://registry.npmjs.org/@carterduong/p-img/-/p-img-0.2.0.tgz","fileCount":6,"unpackedSize":23628,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCZiUvph6uR/BuvWb9ezuf+nOTTvLvAqyRpDiD9KxJu2QIhAKc1+RF75AV8UTdjGXGQWWHc0n1cneyx5N+OEeoY/ZBn"}]},"_npmUser":{"name":"carterduong","email":"info@carterduong.com"},"directories":{},"maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/p-img_0.2.0_1784849753847_0.5158809698541582"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-06T20:39:51.690Z","modified":"2026-07-23T23:35:54.118Z","0.1.0":"2026-02-06T20:39:51.956Z","0.1.1":"2026-02-25T02:19:54.285Z","0.1.2":"2026-02-25T21:10:02.319Z","0.1.3":"2026-07-23T22:40:09.644Z","0.1.4":"2026-07-23T22:56:26.656Z","0.2.0":"2026-07-23T23:35:53.980Z"},"bugs":{"url":"https://github.com/carterduong/p-img/issues"},"author":{"name":"carterduong"},"license":"MIT","homepage":"https://github.com/carterduong/p-img","keywords":["web-component","pinch-to-zoom","image","mobile","touch"],"repository":{"type":"git","url":"git+https://github.com/carterduong/p-img.git"},"description":"A web component that adds pinch-to-zoom to images on mobile","maintainers":[{"name":"carterduong","email":"info@carterduong.com"}],"readme":"# p-img\n\nA lightweight web component that adds pinch-to-zoom to images on mobile.\n\n[Demo](https://carterduong.github.io/p-img/)\n\n## Install\n\n```bash\nnpm install p-img\n```\n\n## Usage\n\n```html\n<script type=\"module\">\n  import \"p-img\";\n</script>\n\n<p-img src=\"photo.jpg\" alt=\"A zoomable photo\"></p-img>\n```\n\nThe `<p-img>` element accepts the same attributes as a standard `<img>`: `src`, `alt`, `srcset`, `sizes`, `loading`, `crossorigin`, and so on. `width` and `height` attributes size the element and reserve aspect-ratio space before the image loads, like a native `<img>`. (`usemap`/`ismap` are the exception — image maps can't cross the shadow DOM boundary.)\n\n## Properties\n\nThe element also mirrors the `HTMLImageElement` property API, so code written against a native `<img>` works unchanged:\n\n```js\nconst el = document.querySelector(\"p-img\");\nel.src = \"photo.jpg\";      // reflects to the attribute\nel.alt = \"A zoomable photo\";\nawait el.decode();\nconsole.log(el.naturalWidth, el.currentSrc, el.complete);\n```\n\nAvailable: `src`, `srcset`, `sizes`, `alt`, `loading`, `decoding`, `crossOrigin`, `referrerPolicy`, `fetchPriority`, `width`, `height`, plus read-only `naturalWidth`, `naturalHeight`, `currentSrc`, `complete`, and `decode()`. Properties assigned before the element is defined are picked up on upgrade.\n\nTypeScript consumers get typed elements automatically — the package augments `HTMLElementTagNameMap`, so `document.querySelector(\"p-img\")` returns a `PImg`.\n\n## Loading state\n\n- The `loaded` attribute is present after a successful load (and removed on error or when `src`/`srcset`/`sizes` change), so you can style loading states with `p-img[loaded]`.\n- `complete` reports whether the current image has loaded.\n- `load` and `error` events are re-dispatched on the element (bubbling), plus composed `p-img-load` / `p-img-error` custom events that also cross shadow DOM boundaries.\n\n## Behavior\n\n- Two-finger pinch scales the image up to 5x\n- The zoomed image overflows its container to the full viewport and renders above all other content\n- Releasing the pinch animates the image back to its original size and position\n- Re-pinching mid-animation picks up from the current state\n\n## Styling\n\nThe internal `<img>` is exposed via a CSS `::part`:\n\n```css\np-img::part(img) {\n  border-radius: 8px;\n}\n```\n\nThe host element has `overflow: hidden` by default and gains a `[zooming]` attribute during a pinch gesture, which you can target:\n\n```css\np-img[zooming] {\n  /* styles applied while zooming */\n}\n```\n\n## Development\n\n```bash\nnpm run dev          # start dev server\nnpm run build        # build the library\nnpm run build:pages  # build and update GitHub Pages demo\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}