{"_id":"@shimmer-from-structure/svelte","_rev":"13-a4b25926d8e34d7a2655e754a4d8c848","name":"@shimmer-from-structure/svelte","dist-tags":{"latest":"2.4.6"},"versions":{"1.1.0":{"name":"@shimmer-from-structure/svelte","version":"1.1.0","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@1.1.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"f18a4c656ea6e8e17327561e3cbd8b2c41d4bdc9","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-1.1.0.tgz","fileCount":16,"integrity":"sha512-bw1lf4N5uU60T5A03y4arsMhE2OTDPTRFUUuSq/4Ys7KMOfEpeYexb7JLs8scxozZcBUpoSdx1GR908W5Pin/g==","signatures":[{"sig":"MEQCIHKM8k0f+gu6doJgAxi358rV2j2XKX+2FL8EjtP1JMA1AiBJxJx66CoBWXoclUNqfUyhpoVF1qxrTBD7YrPj2B23/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53810},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"fce683fa234628693356d2823ecdfb72b31f409e","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^4.0.0","typescript":"^5.0.0","svelte-check":"^3.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_1.1.0_1769489651775_0.10587643423389093","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@shimmer-from-structure/svelte","version":"2.0.0","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.0.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"78ea3017d48b0125881a37a5f439193445fc8739","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.0.0.tgz","fileCount":16,"integrity":"sha512-uuPnCDY/gVbHhLlv6wV4WkFOyRg+3FfXbaRJDHFoIfomyq7QZa46ou3cIiRaCatpxpE7ZWTLGZKCTe3GaGKi1w==","signatures":[{"sig":"MEYCIQDUEw39DGsYmAtzFAuuJEWa8taYxrRX27JpHQnacHWueQIhAIim38j98OuN68rOITcjQN0fBTnw9K8cWEKot5Zm7SWf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":102231},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"1ce8213c8d1522cf163605e307ce03bff87ff2c7","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^4.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.0.0_1769639503535_0.20570650785568878","host":"s3://npm-registry-packages-npm-production"}},"2.1.1":{"name":"@shimmer-from-structure/svelte","version":"2.1.1","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.1.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"58a8a0e78a3428fc0c66d806597b3bf85a9193be","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.1.1.tgz","fileCount":16,"integrity":"sha512-Gzp/AzZOZWfAEvbAZzlqY7Ap4Sudc0cauMT8vFTqX078yKWL+pGfzx41hacGDGrbIJQgsL40qFVZgFkrQSDBFQ==","signatures":[{"sig":"MEUCIQDqdI1z1rfJ+Nd6QcMckmzQa0jxEUAzqwVVyo2HLuujKgIgDIv5lYc0gklAuMFOGoZYl/eKQKbGi+0qrgxu/oLPlgs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33345},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"bffd3e4cca88a4134224c9a2b204bb32d3cd0374","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^4.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.1.1_1770175540261_0.6777952924085486","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"@shimmer-from-structure/svelte","version":"2.2.0","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.2.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"808cc9eaf89ae9ed113058ae977db752c1a29a47","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.2.0.tgz","fileCount":12,"integrity":"sha512-q8gDP76pOs1e0rZLCGUaN/clDe9eD3UmSHjVlpiasqMSHgYEj/DZOnE9YMMX24P8WU+1Mx9mE52WwmpdmPRbVA==","signatures":[{"sig":"MEYCIQD2i0sIixTmTV/NhRrpnQrWZJA5EDembu+N7eILd8RJlAIhAJs5vJQa0XvwOt+yTBnzxL0XmqAXOLWHU8JuR54HE8hH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33195},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a9708e969fba414b2d266cae7c55ccd806e26e57","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^4.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.2.0_1770248705863_0.710950418670764","host":"s3://npm-registry-packages-npm-production"}},"2.3.0":{"name":"@shimmer-from-structure/svelte","version":"2.3.0","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.3.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"7ca89896e7cd9a9036c7a304eaebed950ff88b7a","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.3.0.tgz","fileCount":12,"integrity":"sha512-SWotpsThl5Oe+jKJ3gvxovz3HowvJ3Vir6/PGnACm22W8BRL6FoZeIQ3N5x/EmW+wJtnSm7dwGM1cceNDMi3jA==","signatures":[{"sig":"MEUCIQC/LUev17td5shmLBVLNdANI1E23BCKOnbPwReXmI59eAIgNJE6rVJlBOIfqua+meJPD/RQdUxo0Mz5QR7EQhabxK8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39949},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"dabae59fe57d2346dc1ad00bbc163d7259845056","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.3.0_1770576238059_0.5680038433181307","host":"s3://npm-registry-packages-npm-production"}},"2.3.1":{"name":"@shimmer-from-structure/svelte","version":"2.3.1","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.3.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"288ef8a24b1606659e09a2619a53406e2463df96","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.3.1.tgz","fileCount":12,"integrity":"sha512-rgRw2z5FIeZ3/8BzSjLcMwJrYnbgGaSjiKa7ZrsaWX2CcYPqORvgAsgero5YE2B0tNgZD7VAGkpowb/t9LG0Kg==","signatures":[{"sig":"MEQCIE42KGDtWirsMPcIs5RNUdGBBuH/mAQZTUtl4jtE8X5KAiAKFuapylLO2qB95MNcGKpqp3240USl2q+OyoducFZ38g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39949},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"1d27b633ccd1dd2ac336c66738e6af540309e5de","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.3.1_1770751070782_0.5844939952414916","host":"s3://npm-registry-packages-npm-production"}},"2.3.2":{"name":"@shimmer-from-structure/svelte","version":"2.3.2","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.3.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"7115d6bea6ade40a72cd7dfe810e9a396da6e8af","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.3.2.tgz","fileCount":12,"integrity":"sha512-2xPuIUiJNSD6fI094Nz+UHIcyr+XPHj2reCQKtrHRzOwE2xhDzPc7LQP20bZRdjPd81KU0OGXf1u/FNHgdqpJA==","signatures":[{"sig":"MEUCIQCQA4JViOuB/56qGeR0jvXbQIkDvOxlM8g1h3uqO+8aBAIgQTBPgG1GiEIlnkGTgBs8y92Z+fGsKDmxn+steSW9HzQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39891},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"059953641b0590552a7c22e775c68cea45d4a51c","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.0.0","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.3.2_1771661725218_0.03212555406328699","host":"s3://npm-registry-packages-npm-production"}},"2.3.4":{"name":"@shimmer-from-structure/svelte","version":"2.3.4","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.3.4","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"2aec5884331f8152984677a8dbcbbbc10ddef9d9","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.3.4.tgz","fileCount":12,"integrity":"sha512-WfMhPrrUoNbbKyGXM34x42M3N7ZAMD+KYfRKesOIXb72skiCv/O4LVPsDPnyrcd9n6T3TsWazgwz4obT5rzOsg==","signatures":[{"sig":"MEUCIQCzBgR58hUwxQmqjg6aVmVgLqm5Mqc3w7TlSPR3c++hGAIgXEMVrOuYhbkiRrlTKb+VLoblyBj0dQDdMqAjFpNQXbs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39893},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"93a2ed29fbd2037d4759bfacf6e6e6bbf6b86137","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.53.5","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.53.5"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.3.4_1772560137261_0.6262752932383329","host":"s3://npm-registry-packages-npm-production"}},"2.4.0":{"name":"@shimmer-from-structure/svelte","version":"2.4.0","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.4.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"74597422c82878f95b33678ff82297f29eea8547","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.4.0.tgz","fileCount":12,"integrity":"sha512-sBX7GPljw0lRUjZWB93gBIpBGj4nKWlJhz4kt7zBBn6GB45sxunrbqbN1sgf5gRzPkT+2eA5xlVokucb8bYs4w==","signatures":[{"sig":"MEUCIQDNGy3sO2/JJNEivJLt9z0nzle/wHSTETWGJYSzD6b9JwIgONFx2drpt1SZUQ+wc+V2sEwcsyRJdX/C+bPU/qlyIUQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39635},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a812643d0a9dc816c53254e1585f88bfa4aa3912","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.53.5","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.53.5"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.4.0_1773605688808_0.5011171315424072","host":"s3://npm-registry-packages-npm-production"}},"2.4.2":{"name":"@shimmer-from-structure/svelte","version":"2.4.2","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.4.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"d07cd1e8d80da65211b9ea38c413810af804a5eb","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.4.2.tgz","fileCount":12,"integrity":"sha512-wlFrU1mCfEDh9nZ4sHTiY2d4EtHFYfDLird2pBZjf/VnQAiJiLTGUmjdlN/G8wr7T55qPWYOCaYkaUr5dEDIEg==","signatures":[{"sig":"MEUCIQDJWudvRdfbGmKD+AlaxcK9dt9z3tbYYuvyD8Pb8mBsoQIgbFKBmq0nQtgTbZJ7UHbBh0ncJVHHaEnZzh2c39bratc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39300},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs"}},"gitHead":"9feb8f602c9ff2463fe7af262c88faa02a840620","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.53.5","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.53.5"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.4.2_1774089588355_0.26383422440742543","host":"s3://npm-registry-packages-npm-production"}},"2.4.3":{"name":"@shimmer-from-structure/svelte","version":"2.4.3","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.4.3","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"2f271fa6d554bf6b4c1e490ba2d2d8aee185484d","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.4.3.tgz","fileCount":12,"integrity":"sha512-k09AEr3vJk+xebrhSTc/mb4gY1TElw5PnfJTgAzmE3pIuwlCrNueXi50kmQeALXAfRAlIfBZP1WzJeTDTO7ADQ==","signatures":[{"sig":"MEQCIGsLKqWJ3RPrfOq0xihKXTnJNON8EBwE5cb1p0BVKQwLAiBdn+xX8Gxatsk+I0fpiOGxmvJ8I2Rsm3+T1JpF/uTHCw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39547},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs"}},"gitHead":"62f7359bc955c3a7fcae1690f7fe1f852d02f920","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.8.2","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@shimmer-from-structure/core":"2.4.4"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.53.5","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.53.5"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.4.3_1775772322395_0.9839603131424282","host":"s3://npm-registry-packages-npm-production"}},"2.4.5":{"name":"@shimmer-from-structure/svelte","version":"2.4.5","keywords":["svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.4.5","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"be38defcdd51199260dc8f51c637990446ace77e","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.4.5.tgz","fileCount":12,"integrity":"sha512-342b9i7KOZ4E61ttA4kmO/yexSjXa+gPSpP6CspmDex9fQyB2KvJ+sMrq9EHznZyEgBdSfCesQc/NrC79Ur1fg==","signatures":[{"sig":"MEUCIQDz6o7Ijy3i3MjILHxGEzembEWMIzsxy+k4sVFz9x4a+AIgdPJZmouRT2GKQCzbUaQ6Tzj5dyL8k1trAHqAlrYZjMA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39892},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs"}},"gitHead":"d499053f3f6c9eca967e8d338bf020936d9541aa","scripts":{"test":"vitest","build":"svelte-check && vite build","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/svelte"},"_npmVersion":"10.9.7","description":"Svelte adapter for shimmer-from-structure","directories":{},"_nodeVersion":"22.22.2","dependencies":{"@shimmer-from-structure/core":"2.4.5"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^27.4.0","tslib":"^2.0.0","svelte":"^5.53.5","vitefu":"^1.1.1","typescript":"^5.0.0","svelte-check":"^4.0.0","@testing-library/dom":"^10.4.1","@testing-library/svelte":"^5.3.1","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.53.5"},"_npmOperationalInternal":{"tmp":"tmp/svelte_2.4.5_1775909249828_0.6426999711739225","host":"s3://npm-registry-packages-npm-production"}},"2.4.6":{"name":"@shimmer-from-structure/svelte","version":"2.4.6","type":"module","description":"Svelte adapter for shimmer-from-structure","main":"dist/index.cjs","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs"}},"scripts":{"build":"svelte-check && vite build","test":"vitest","check":"svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"peerDependencies":{"svelte":"^5.53.5"},"dependencies":{"@shimmer-from-structure/core":"2.4.6"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^5.0.0","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/svelte":"^5.3.1","jsdom":"^27.4.0","svelte":"^5.53.5","svelte-check":"^4.0.0","tslib":"^2.0.0","typescript":"^5.0.0","vitefu":"^1.1.1"},"keywords":["svelte","shimmer","skeleton","loading"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/svelte"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/svelte@2.4.6","gitHead":"64cda5378c304ecf497d58db2f399d3df4968207","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ULNt9b2i1iPGEf7hyREY/m3jFG7yl3WxXkFSMXVateWWMoQPW06Lj64qWmCRIZG+yjcXd7IKBrR6uGOpE3RDxg==","shasum":"761552ce5bcf27a5a9cdd3ec2a60f35c16d6b84a","tarball":"https://registry.npmjs.org/@shimmer-from-structure/svelte/-/svelte-2.4.6.tgz","fileCount":12,"unpackedSize":39945,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDE9KsuH8rxSYV831zjvz6a9pCQsSSWato15YwpF9AASAIhAL/t+7VGDr2LsG9q9diWL0EtLfxUebnF+YA/+iihS8+j"}]},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"directories":{},"maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte_2.4.6_1778069137263_0.7668842315868096"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-27T04:54:11.662Z","modified":"2026-05-06T12:05:37.541Z","1.1.0":"2026-01-27T04:54:11.943Z","2.0.0":"2026-01-28T22:31:43.697Z","2.1.1":"2026-02-04T03:25:40.427Z","2.2.0":"2026-02-04T23:45:06.019Z","2.3.0":"2026-02-08T18:43:58.205Z","2.3.1":"2026-02-10T19:17:50.931Z","2.3.2":"2026-02-21T08:15:25.379Z","2.3.4":"2026-03-03T17:48:57.415Z","2.4.0":"2026-03-15T20:14:48.959Z","2.4.2":"2026-03-21T10:39:48.500Z","2.4.3":"2026-04-09T22:05:22.530Z","2.4.5":"2026-04-11T12:07:29.969Z","2.4.6":"2026-05-06T12:05:37.435Z"},"bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","keywords":["svelte","shimmer","skeleton","loading"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/svelte"},"description":"Svelte adapter for shimmer-from-structure","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"readme":"# Shimmer From Structure\n\nA structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS.\n\n**Documentation:** Access Full Docs\n\n\n\n\n\n\n\n\n\n## Why This Library?\n\nTraditional shimmer libraries require you to:\n\n- Manually create skeleton components that mirror your real components\n- Maintain two versions of each component (real + skeleton)\n- Update skeletons every time your layout changes\n\n**Shimmer From Structure** eliminates all of that:\n\n- ✅ **Works with React, Vue, Svelte, Angular & SolidJS** - Simple, framework-specific adapters\n- ✅ Automatically measures your component's structure at runtime\n- ✅ Generates shimmer effects that match actual dimensions\n- ✅ Zero maintenance - works with any layout changes\n- ✅ Works with complex nested structures\n- ✅ Supports dynamic data with `templateProps`\n- ✅ Preserves container backgrounds during loading\n- ✅ Auto-detects border-radius from your CSS\n\n## Installation\n\n```bash\nnpm install shimmer-from-structure\n# or\nyarn add shimmer-from-structure\n# or\npnpm add shimmer-from-structure\n```\n\n## 🎯 Framework Support\n\nShimmer From Structure provides dedicated packages for **React and Vue**.\n\n### React\n\nReact support is built into the main package for backward compatibility:\n\n```javascript\n// React projects (or @shimmer-from-structure/react)\nimport { Shimmer } from 'shimmer-from-structure';\n```\n\n### Vue 3\n\nVue support requires importing from the specific adapter:\n\n```javascript\n// Vue 3 projects\nimport { Shimmer } from '@shimmer-from-structure/vue';\n```\n\n### Svelte\n\nSvelte support is provided via its own adapter:\n\n```javascript\n// Svelte projects\nimport { Shimmer } from '@shimmer-from-structure/svelte';\n```\n\n### Angular\n\nAngular support requires importing from the specific adapter:\n\n```typescript\n// Angular projects\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\n```\n\n### SolidJS\n\nSolidJS support requires importing from the specific adapter:\n\n```tsx\n// SolidJS projects\nimport { Shimmer } from '@shimmer-from-structure/solid';\n```\n\n---\n\n# 📖 Basic Usage\n\n## React\n\n### Static Content\n\nFor components with hardcoded/static content:\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\nfunction UserCard() {\n return (\n \n
\n \n );\n}\n```\n\n---\n\n### Dynamic Content with `templateProps`\n\nFor components that receive dynamic data via props, use `templateProps` to provide mock data for skeleton generation:\n\n**React**\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\n// Your component that accepts props\nconst UserCard = ({ user }) => (\n
\n \n
{user.name}
\n
{user.role}
\n
\n);\n\n// Template data for the skeleton\nconst userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n};\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n const [user, setUser] = useState(null);\n\n return (\n \n \n \n );\n}\n```\n\n**Vue**\n\n```vue\n\n\n\n \n \n \n\n```\n\n**Svelte**\n\n```svelte\n\n\n\n \n\n```\n\n**Angular**\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\nimport { UserCardComponent } from './user-card.component';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ShimmerComponent, UserCardComponent],\n template: `\n \n \n \n `,\n})\nexport class AppComponent {\n loading = signal(true);\n user = signal(null);\n\n userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n };\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport { Shimmer } from '@shimmer-from-structure/solid';\nimport { UserCard } from './UserCard';\n\nfunction App() {\n const [loading, setLoading] = createSignal(true);\n const [user, setUser] = createSignal(null);\n\n const userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n };\n\n return (\n \n \n \n );\n}\n```\n\nThe `templateProps` object is spread onto the first child component when loading, allowing it to render with mock data for measurement.\n\n## 🎨 API Reference\n\n### `` Props\n\n| Prop | Type | Default | Description |\n| ---------------------- | ------------------------- | -------------------------- | --------------------------------------------------------- |\n| `loading` | `boolean` | `true` | Whether to show shimmer effect or actual content |\n| `children` | `React.ReactNode` | required | The content to render/measure |\n| `shimmerColor` | `string` | `'rgba(255,255,255,0.15)'` | Color of the shimmer wave |\n| `backgroundColor` | `string` | `'rgba(255,255,255,0.08)'` | Background color of shimmer blocks |\n| `duration` | `number` | `1.5` | Animation duration in seconds |\n| `fallbackBorderRadius` | `number` | `4` | Border radius (px) for elements with no CSS border-radius |\n| `templateProps` | `Record` | - | Props to inject into first child for skeleton rendering |\n\n### Example with All Props\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n**SolidJS**\n\n```tsx\n\n \n\n```\n\n## 🔧 How It Works\n\n1. **Visible Container Rendering**: When `loading={true}`, your component renders with transparent text but **visible container backgrounds**\n2. **Template Props Injection**: If `templateProps` is provided, it's spread onto the first child so dynamic components can render\n3. **DOM Measurement**: Uses `useLayoutEffect` to synchronously measure all leaf elements via `getBoundingClientRect()`\n4. **Border Radius Detection**: Automatically captures each element's computed `border-radius` from CSS\n5. **Shimmer Generation**: Creates absolutely-positioned shimmer blocks matching measured dimensions\n6. **Animation**: Applies smooth gradient animation that sweeps across each block\n\n### Key Features\n\n- **Container backgrounds visible**: Unlike `opacity: 0`, we use `color: transparent` so card backgrounds/borders show during loading\n- **Auto border-radius**: Circular avatars get circular shimmer blocks automatically\n- **Fallback radius**: Text elements (which have `border-radius: 0`) use `fallbackBorderRadius` to avoid sharp rectangles\n- **Dark-mode friendly**: Default colors use semi-transparent whites that work on any background\n\n## Examples\n\n### Dashboard with Multiple Sections\n\nEach section can have its own independent loading state:\n\n**React**\n\n```tsx\nfunction Dashboard() {\n const [loadingUser, setLoadingUser] = useState(true);\n const [loadingStats, setLoadingStats] = useState(true);\n\n return (\n <>\n {/* User profile section */}\n \n \n \n\n {/* Stats section - with custom colors */}\n \n \n \n \n );\n}\n```\n\n**Vue**\n\n```vue\n\n \n \n \n \n\n \n \n \n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n\n\n \n\n```\n\n**Angular**\n\n```typescript\n@Component({\n template: `\n \n \n \n \n\n \n \n \n \n `,\n})\nexport class DashboardComponent {\n loadingUser = signal(true);\n loadingStats = signal(true);\n // ...\n}\n```\n\n### Transactions List\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n### Team Members Grid\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n## 🔄 Using with React Suspense\n\nShimmer works seamlessly as a Suspense fallback. When used this way, `loading` is always `true` because React automatically unmounts the fallback and replaces it with the resolved component.\n\n### Basic Suspense Pattern\n\n```tsx\nimport { Suspense, lazy } from 'react';\nimport { Shimmer } from 'shimmer-from-structure';\n\nconst UserProfile = lazy(() => import('./UserProfile'));\n\nfunction App() {\n return (\n \n \n \n }\n >\n \n \n );\n}\n```\n\n### Why `loading={true}` is Always Set\n\nWhen using Shimmer as a Suspense fallback:\n\n1. **Suspend**: React renders the fallback → Shimmer shows with `loading={true}`\n2. **Resolve**: React **replaces** the entire fallback with the real component\n3. The Shimmer is **unmounted**, not updated — so you never need to toggle `loading`\n\n### Performance Tips for Suspense\n\n**Memoize the fallback** to prevent re-renders:\n\n```tsx\nconst ShimmerFallback = React.memo(() => (\n \n \n \n));\n\n// Usage\n}>\n \n;\n```\n\n**Keep templates lightweight** — the DOM is measured synchronously via `useLayoutEffect`, so avoid complex logic in your template.\n\n## Global Configuration\n\nYou can set default configuration for your entire app (or specific sections) using the context/provider pattern. This is perfect for maintaining consistent themes without repeating props.\n\n### React (Context API)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';\n\nfunction App() {\n return (\n // Set global defaults\n \n \n \n );\n}\n```\n\n### Vue (Provide/Inject)\n\n```vue\n\n\n\n\n \n\n```\n\n### Svelte (setShimmerConfig)\n\n```svelte\n\n\n\n\n```\n\n### Angular (Dependency Injection)\n\n```typescript\n// main.ts or bootstrapApplication\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideShimmerConfig } from '@shimmer-from-structure/angular';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideShimmerConfig({\n shimmerColor: 'rgba(56, 189, 248, 0.4)',\n backgroundColor: 'rgba(56, 189, 248, 0.1)',\n duration: 2.5,\n fallbackBorderRadius: 8,\n }),\n ],\n});\n```\n\n### SolidJS (ShimmerProvider)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';\n\nfunction App() {\n return (\n \n \n \n );\n}\n```\n\n---\n\nComponents inside the provider automatically inherit values. You can still override them locally:\n\n**React**\n\n```tsx\n// Inherits blue theme from provider\n\n\n// Overrides provider settings\n\n```\n\n**Vue**\n\n```vue\n\n\n\n\n\n```\n\n**Svelte**\n\n```svelte\n\n\n\n\n\n```\n\n**Angular**\n\n```typescript\n\n\n\n\n\n```\n\n**SolidJS**\n\n```tsx\n\n\n\n\n\n```\n\n### Accessing Config in Hooks/Composables\n\nIf you need to access the current configuration in your own components:\n\n**React**\n\n```tsx\nimport { useShimmerConfig } from 'shimmer-from-structure';\n\nfunction MyComponent() {\n const config = useShimmerConfig();\n return
...
;\n}\n```\n\n**Vue**\n\n```javascript\nimport { useShimmerConfig } from '@shimmer-from-structure/vue';\n\nconst config = useShimmerConfig();\nconsole.log(config.value.backgroundColor);\n```\n\n**Svelte**\n\n```javascript\nimport { getShimmerConfig } from '@shimmer-from-structure/svelte';\n\nconst config = getShimmerConfig();\nconsole.log(config.backgroundColor);\n```\n\n**Angular**\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { injectShimmerConfig } from '@shimmer-from-structure/angular';\n\n@Component({\n selector: 'app-my-component',\n template: `
...
`,\n})\nexport class MyComponent {\n config = injectShimmerConfig();\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { useShimmerConfig } from '@shimmer-from-structure/solid';\n\nfunction MyComponent() {\n const config = useShimmerConfig();\n return
...
;\n}\n```\n\n## Best Practices\n\n### 1. Use `templateProps` for Dynamic Data\n\nWhen your component receives data via props, always provide `templateProps` with mock data that matches the expected structure.\n\n### 2. Match Template Structure to Real Data\n\nEnsure your template data has the same array length and property structure as real data for accurate shimmer layout.\n\n### 3. Use Individual Shimmer Components\n\nWrap each section in its own Shimmer for independent loading states:\n\n```tsx\n// ✅ Good - independent loading\n\n\n\n// ❌ Avoid - all-or-nothing loading\n\n \n \n\n```\n\n### 4. Consider Element Widths\n\nBlock elements like `
`, `
` take full container width. If you want shimmer to match text width:\n\n```css\n.title {\n width: fit-content;\n}\n```\n\n### 5. Provide Container Dimensions\n\nFor async components (like charts), ensure containers have explicit dimensions so shimmer has something to measure.\n\n## ⚡ Performance Considerations\n\n- Measurement happens only when `loading` changes to `true`\n- Uses `useLayoutEffect` for synchronous measurement (no flicker)\n- Minimal re-renders - only updates when loading state or children change\n- Lightweight DOM measurements using native browser APIs\n\n- Lightweight DOM measurements using native browser APIs\n\n## 🛠️ Development\n\nThis is a monorepo managed with npm workspaces. Each package can be built independently:\n\n```bash\n# Install dependencies\nnpm install\n\n# Build all packages\nnpm run build\n\n# Build individual packages\nnpm run build:core\nnpm run build:react\nnpm run build:vue\nnpm run build:svelte\nnpm run build:main\n\n# Run tests\nnpm test\n```\n\n## 📝 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 🐛 Known Limitations\n\n- **Async components**: Components that render asynchronously (like charts using `ResponsiveContainer`) may need explicit container dimensions\n- **Zero-dimension elements**: Elements with `display: none` or zero dimensions won't be captured\n- **SVG internals**: Only the outer `
![](\"avatar.jpg\")
\n