{"_id":"@ambicuity/dimension-sentinel","name":"@ambicuity/dimension-sentinel","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambicuity/dimension-sentinel","version":"1.0.0","description":"A Dimension Sentinel polyfill for observing changes to element dimensions with support for box size options from the latest spec","main":"lib/dimension-sentinel.umd.js","module":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"rm -rf lib && npm run build:esm && npm run build:umd","build:esm":"tsc","build:umd":"rollup -c","build:docs":"echo 'no longer building docs for this version'","ci-tests":"npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls","test":"npm run lint && jest --coverage --runInBand","lint":"eslint '{src,test}/**/*.ts'","preversion":"npm run build:docs","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/ambicuity/dimension-sentinel.git"},"keywords":["DimensionSentinel","polyfill","ponyfill","event","resize","observer","sentinel","typescript","javascript","element","component","container","queries","web components","front-end","html","Angular","React","Vue"],"author":{"name":"Ritesh Rana","email":"contact@riteshrana.engineer"},"license":"MIT","bugs":{"url":"https://github.com/ambicuity/dimension-sentinel/issues"},"homepage":"https://github.com/ambicuity/dimension-sentinel#readme","devDependencies":{"@types/jest":"^28.1.7","@typescript-eslint/eslint-plugin":"^5.33.1","@typescript-eslint/parser":"^5.33.1","core-js":"^3.24.1","coveralls":"^3.1.1","cssnano":"^5.1.13","eslint":"^8.22.0","jest":"^28.1.3","jest-cli":"^28.1.3","jest-environment-jsdom":"^28.1.3","jest-junit":"^14.0.0","jsdom":"^20.0.0","rollup":"^2.78.0","ts-jest":"^28.0.8","typescript":"^4.7.4"},"gitHead":"071ffd8d143d70339f64e434fd560d128afb8ce3","_id":"@ambicuity/dimension-sentinel@1.0.0","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-ksF14P7DgyAeYDMa0Tssjlf0oGUBQDOSLifBOYsIEsyO/lPCH9vSGn57p2s0tSQU0BYFTTlzLtp8sR256KgONw==","shasum":"71b210c1e5454a28b69795884256282fea83d20c","tarball":"https://registry.npmjs.org/@ambicuity/dimension-sentinel/-/dimension-sentinel-1.0.0.tgz","fileCount":74,"unpackedSize":74161,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDj0jKF5ns/pEdJfRXzB8uDYCsFVazzkLE5tkt9KuwuhAiEAx+NSOs9N8MZqU+EljRBp9Y0pHYHoN6XRL1HHgDYz+jI="}]},"_npmUser":{"name":"ambicuity","email":"riteshrana36@gmail.com"},"directories":{},"maintainers":[{"name":"ambicuity","email":"riteshrana36@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dimension-sentinel_1.0.0_1778713414759_0.053674898808287574"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-13T23:03:34.684Z","1.0.0":"2026-05-13T23:03:34.913Z","modified":"2026-05-13T23:03:35.147Z"},"maintainers":[{"name":"ambicuity","email":"riteshrana36@gmail.com"}],"description":"A Dimension Sentinel polyfill for observing changes to element dimensions with support for box size options from the latest spec","homepage":"https://github.com/ambicuity/dimension-sentinel#readme","keywords":["DimensionSentinel","polyfill","ponyfill","event","resize","observer","sentinel","typescript","javascript","element","component","container","queries","web components","front-end","html","Angular","React","Vue"],"repository":{"type":"git","url":"git+https://github.com/ambicuity/dimension-sentinel.git"},"author":{"name":"Ritesh Rana","email":"contact@riteshrana.engineer"},"bugs":{"url":"https://github.com/ambicuity/dimension-sentinel/issues"},"license":"MIT","readme":"# Dimension Sentinel\n\n[![npm downloads/month](https://img.shields.io/npm/dm/%40ambicuity%2Fdimension-sentinel.svg)](https://www.npmjs.com/package/%40ambicuity%2Fdimension-sentinel)\n\nDimension Sentinel helps you detect when an element’s size changes.\n\n## 1) Install\n\n```bash\nnpm i @ambicuity/dimension-sentinel\n```\n\n## 2) Use\n\n```ts\nimport { DimensionSentinel } from '@ambicuity/dimension-sentinel';\n\nconst sentinel = new DimensionSentinel((entries) => {\n  for (const entry of entries) {\n    const size = entry.contentBoxSize[0]; // { inlineSize, blockSize }\n    console.log(size.inlineSize, size.blockSize);\n  }\n});\n\nsentinel.observe(document.querySelector('#panel')!);\n```\n\n## 3) Main Methods\n\n- `new DimensionSentinel(callback)`\n- `observe(target, options?)`\n- `unobserve(target)`\n- `disconnect()`\n\n## 4) Box Options\n\n- `content-box` (default)\n- `border-box`\n- `device-pixel-content-box`\n\nExample:\n\n```ts\nsentinel.observe(element, { box: 'border-box' });\n```\n\n## 5) Docs\n\n- Quick guide: `docs/getting-started/quickstart.md`\n- API: `docs/api/reference.md`\n- Architecture: `docs/architecture/runtime-architecture.md`\n\n## 6) Development\n\n```bash\nnpm run lint\nnpm test\nnpm run build\n```\n\n## License\n\nMIT\n\n## Author\n\nAuthor: Ritesh Rana  \nEmail: contact@riteshrana.engineer\n","readmeFilename":"README.md","_rev":"1-17e001e32f7575da14e59fa543255862"}