{"_id":"@achorde/svguitar-react","_rev":"5-c3d0ae5cf346b1f9623bdefcf58b2f53","name":"@achorde/svguitar-react","dist-tags":{"latest":"3.0.0"},"versions":{"2.5.0":{"name":"@achorde/svguitar-react","version":"2.5.0","keywords":["react","guitar","chord","diagram","svg","music"],"author":{"name":"svguitar-react"},"license":"MIT","_id":"@achorde/svguitar-react@2.5.0","maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"homepage":"https://github.com/achorde/achorde/tree/main/packages/svguitar-react#readme","bugs":{"url":"https://github.com/achorde/achorde/issues"},"dist":{"shasum":"30e3651eb5fc36f41f317d14479588cb8eeea699","tarball":"https://registry.npmjs.org/@achorde/svguitar-react/-/svguitar-react-2.5.0.tgz","fileCount":88,"integrity":"sha512-Q0rvXeXAStWHb5qqfclSPaeoW66ja9D/jrgKrOPIkA0KKJNGGlnTpo5fcHJVISksHRxS6j5VcdrzlVlLL+y7aw==","signatures":[{"sig":"MEUCIQD+nqrSAlX1RbYFm7Wt6qXQB3UuiUUClNXg3w5yv+nQkwIgfbE5S8VTIyrAeyX4BevgN8yD8pGrkgGpHyLce8bmKOs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":291714},"main":"./dist/index.js","type":"module","_from":"file:achorde-svguitar-react-2.5.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.js"}},"private":false,"scripts":{"dev":"vite --config vite.config.app.ts","lint":"eslint .","test":"vitest","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier --write .","preview":"vite preview --config vite.config.app.ts","test:ui":"vitest --ui","test:run":"vitest run","build:app":"vite build --config vite.config.app.ts","storybook":"storybook dev -p 6006","test:watch":"vitest --watch","preview:app":"vite preview --config vite.config.app.ts","format:check":"prettier --check .","storybook:ci":"storybook dev -p 6006 --ci","test:coverage":"vitest run --coverage","test-storybook":"test-storybook","build-storybook":"storybook build","deploy-storybook":"./scripts/deploy-storybook.sh","preview-storybook":"npx serve storybook-static","test:coverage:unit":"vitest run --coverage --project=unit","deploy-storybook:prod":"./scripts/deploy-storybook.sh --production"},"_npmUser":{"name":"saitodisse","email":"saitodisse@gmail.com"},"_resolved":"/tmp/1a961304921beac3f676f0c0e32943da/achorde-svguitar-react-2.5.0.tgz","_integrity":"sha512-Q0rvXeXAStWHb5qqfclSPaeoW66ja9D/jrgKrOPIkA0KKJNGGlnTpo5fcHJVISksHRxS6j5VcdrzlVlLL+y7aw==","repository":{"url":"git+https://github.com/achorde/achorde.git","type":"git","directory":"packages/svguitar-react"},"_npmVersion":"11.13.0","description":"A React component for rendering guitar chord diagrams in SVG format","directories":{},"_nodeVersion":"24.13.1","dependencies":{"nuqs":"^2.7.2","react":"^19.2.0","tonal":"^6.4.2","i18next":"^25.6.0","react-dom":"^19.2.0","react-i18next":"^16.2.1","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@achorde/musical-domain":"0.5.0","@radix-ui/react-radio-group":"^1.3.8","i18next-browser-languagedetector":"^8.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.12","jsdom":"^27.0.1","eslint":"^9.38.0","vitest":"^3.2.4","globals":"^16.4.0","postcss":"^8.5.6","prettier":"^3.6.2","storybook":"9.1.10","@eslint/js":"^9.38.0","playwright":"^1.56.1","typescript":"~5.8.3","@types/node":"^24.9.2","tailwindcss":"^4.1.16","@types/react":"^19.2.2","lucide-react":"^0.544.0","tailwind-merge":"^3.3.1","@vitest/browser":"^3.2.4","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.16","typescript-eslint":"^8.46.2","@vitest/coverage-v8":"^3.2.4","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.1.0","@storybook/addon-a11y":"9.1.10","@storybook/addon-docs":"9.1.10","@storybook/react-vite":"9.1.10","@storybook/test-runner":"^0.23.0","@testing-library/react":"^16.3.0","@storybook/addon-vitest":"9.1.10","eslint-plugin-storybook":"9.1.10","@chromatic-com/storybook":"4.1.1","class-variance-authority":"^0.7.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svguitar-react_2.5.0_1780600519106_0.35367381961301647","host":"s3://npm-registry-packages-npm-production"}},"2.5.1":{"name":"@achorde/svguitar-react","version":"2.5.1","keywords":["react","guitar","chord","diagram","svg","music"],"author":{"name":"svguitar-react"},"license":"MIT","_id":"@achorde/svguitar-react@2.5.1","maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"homepage":"https://github.com/achorde/achorde/tree/main/packages/svguitar-react#readme","bugs":{"url":"https://github.com/achorde/achorde/issues"},"dist":{"shasum":"39be865004c65b5e71478d55b545bb261b035239","tarball":"https://registry.npmjs.org/@achorde/svguitar-react/-/svguitar-react-2.5.1.tgz","fileCount":88,"integrity":"sha512-kjvUGybFCyx4bEtSgmdc24Mrb37EOzQvoJxUfynlzs3sBNlHQ4yug/VyQLxpD/7Xms8zxHmqJdfoNLQvG8i4CQ==","signatures":[{"sig":"MEUCIQD++USuzZtxvKwHggb2DORT/bPAWWJoVL3ic2tXMNcyTwIgL57jV5JA65uqvvbReq11PC0/bvyKP5UlSY1L4szFk0Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":291714},"main":"./dist/index.js","type":"module","_from":"file:achorde-svguitar-react-2.5.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.js"}},"private":false,"scripts":{"dev":"vite --config vite.config.app.ts","lint":"eslint .","test":"vitest","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier --write .","preview":"vite preview --config vite.config.app.ts","test:ui":"vitest --ui","test:run":"vitest run","build:app":"vite build --config vite.config.app.ts","storybook":"storybook dev -p 6006","test:watch":"vitest --watch","preview:app":"vite preview --config vite.config.app.ts","format:check":"prettier --check .","storybook:ci":"storybook dev -p 6006 --ci","test:coverage":"vitest run --coverage","test-storybook":"test-storybook","build-storybook":"storybook build","deploy-storybook":"./scripts/deploy-storybook.sh","preview-storybook":"npx serve storybook-static","test:coverage:unit":"vitest run --coverage --project=unit","deploy-storybook:prod":"./scripts/deploy-storybook.sh --production"},"_npmUser":{"name":"saitodisse","email":"saitodisse@gmail.com"},"_resolved":"/tmp/fd53555941c52525e985d104580a76e6/achorde-svguitar-react-2.5.1.tgz","_integrity":"sha512-kjvUGybFCyx4bEtSgmdc24Mrb37EOzQvoJxUfynlzs3sBNlHQ4yug/VyQLxpD/7Xms8zxHmqJdfoNLQvG8i4CQ==","repository":{"url":"git+https://github.com/achorde/achorde.git","type":"git","directory":"packages/svguitar-react"},"_npmVersion":"11.8.0","description":"A React component for rendering guitar chord diagrams in SVG format","directories":{},"_nodeVersion":"24.13.1","dependencies":{"nuqs":"^2.7.2","react":"^19.2.0","tonal":"^6.4.2","i18next":"^25.6.0","react-dom":"^19.2.0","react-i18next":"^16.2.1","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@achorde/musical-domain":"0.5.1","@radix-ui/react-radio-group":"^1.3.8","i18next-browser-languagedetector":"^8.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.12","jsdom":"^27.0.1","eslint":"^9.38.0","vitest":"^3.2.4","globals":"^16.4.0","postcss":"^8.5.6","prettier":"^3.6.2","storybook":"9.1.10","@eslint/js":"^9.38.0","playwright":"^1.56.1","typescript":"~5.8.3","@types/node":"^24.9.2","tailwindcss":"^4.1.16","@types/react":"^19.2.2","lucide-react":"^0.544.0","tailwind-merge":"^3.3.1","@vitest/browser":"^3.2.4","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.16","typescript-eslint":"^8.46.2","@vitest/coverage-v8":"^3.2.4","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.1.0","@storybook/addon-a11y":"9.1.10","@storybook/addon-docs":"9.1.10","@storybook/react-vite":"9.1.10","@storybook/test-runner":"^0.23.0","@testing-library/react":"^16.3.0","@storybook/addon-vitest":"9.1.10","eslint-plugin-storybook":"9.1.10","@chromatic-com/storybook":"4.1.1","class-variance-authority":"^0.7.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svguitar-react_2.5.1_1780600735357_0.847047534387912","host":"s3://npm-registry-packages-npm-production"}},"2.5.2":{"name":"@achorde/svguitar-react","version":"2.5.2","keywords":["react","guitar","chord","diagram","svg","music"],"author":{"name":"svguitar-react"},"license":"MIT","_id":"@achorde/svguitar-react@2.5.2","maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"homepage":"https://github.com/achorde/achorde/tree/main/packages/svguitar-react#readme","bugs":{"url":"https://github.com/achorde/achorde/issues"},"dist":{"shasum":"6cc791ea6bc92db9c9df1e6d99ebd30042211ca2","tarball":"https://registry.npmjs.org/@achorde/svguitar-react/-/svguitar-react-2.5.2.tgz","fileCount":88,"integrity":"sha512-wT2trmosseskjfslerMurvbMlehZudGWOqDRE1BU/NjQ3dEavgvFmCU2rTw+M6mgDRDtxCaN5ePRXn8YtLlamg==","signatures":[{"sig":"MEYCIQCgV4S+gwH62AZnBcEbGHaP+z1T+DpR/Tpjhn1JVoH7KwIhAMw1E5XEybb55N//nU97/YwGpfzFT6uwRrI2IBRkaK5S","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294592},"main":"./dist/index.js","type":"module","_from":"file:achorde-svguitar-react-2.5.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.js"}},"private":false,"scripts":{"dev":"vite --config vite.config.app.ts","lint":"eslint .","test":"vitest","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier --write .","preview":"vite preview --config vite.config.app.ts","test:ui":"vitest --ui","test:run":"vitest run","build:app":"vite build --config vite.config.app.ts","storybook":"storybook dev -p 6006","test:watch":"vitest --watch","preview:app":"vite preview --config vite.config.app.ts","format:check":"prettier --check .","storybook:ci":"storybook dev -p 6006 --ci","test:coverage":"vitest run --coverage","test-storybook":"test-storybook","build-storybook":"storybook build","deploy-storybook":"./scripts/deploy-storybook.sh","preview-storybook":"npx serve storybook-static","test:coverage:unit":"vitest run --coverage --project=unit","deploy-storybook:prod":"./scripts/deploy-storybook.sh --production"},"_npmUser":{"name":"saitodisse","email":"saitodisse@gmail.com"},"_resolved":"/tmp/62f8efb59d1aa9e011b5fff77c2acff7/achorde-svguitar-react-2.5.2.tgz","_integrity":"sha512-wT2trmosseskjfslerMurvbMlehZudGWOqDRE1BU/NjQ3dEavgvFmCU2rTw+M6mgDRDtxCaN5ePRXn8YtLlamg==","repository":{"url":"git+https://github.com/achorde/achorde.git","type":"git","directory":"packages/svguitar-react"},"_npmVersion":"11.13.0","description":"A React component for rendering guitar chord diagrams in SVG format","directories":{},"_nodeVersion":"24.13.1","dependencies":{"nuqs":"^2.7.2","react":"^19.2.0","tonal":"^6.4.2","i18next":"^25.6.0","react-dom":"^19.2.0","react-i18next":"^16.2.1","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@achorde/musical-domain":"0.5.2","@radix-ui/react-radio-group":"^1.3.8","i18next-browser-languagedetector":"^8.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.12","jsdom":"^27.0.1","eslint":"^9.38.0","vitest":"^3.2.4","globals":"^16.4.0","postcss":"^8.5.6","prettier":"^3.6.2","storybook":"9.1.10","@eslint/js":"^9.38.0","playwright":"^1.56.1","typescript":"~5.8.3","@types/node":"^24.9.2","tailwindcss":"^4.1.16","@types/react":"^19.2.2","lucide-react":"^0.544.0","tailwind-merge":"^3.3.1","@vitest/browser":"^3.2.4","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.16","typescript-eslint":"^8.46.2","@vitest/coverage-v8":"^3.2.4","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.1.0","@storybook/addon-a11y":"9.1.10","@storybook/addon-docs":"9.1.10","@storybook/react-vite":"9.1.10","@storybook/test-runner":"^0.23.0","@testing-library/react":"^16.3.0","@storybook/addon-vitest":"9.1.10","eslint-plugin-storybook":"9.1.10","@chromatic-com/storybook":"4.1.1","class-variance-authority":"^0.7.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svguitar-react_2.5.2_1780639976952_0.43788467320080127","host":"s3://npm-registry-packages-npm-production"}},"2.5.3":{"name":"@achorde/svguitar-react","version":"2.5.3","keywords":["react","guitar","chord","diagram","svg","music"],"author":{"name":"svguitar-react"},"license":"MIT","_id":"@achorde/svguitar-react@2.5.3","maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"homepage":"https://github.com/achorde/achorde/tree/main/packages/svguitar-react#readme","bugs":{"url":"https://github.com/achorde/achorde/issues"},"dist":{"shasum":"37cb25a7c8a5625d658edc2b0d5236dc229a97a9","tarball":"https://registry.npmjs.org/@achorde/svguitar-react/-/svguitar-react-2.5.3.tgz","fileCount":88,"integrity":"sha512-iDSzr2qVgEatJ4S80axrZ/nIBStMUefNhFRqoYhZV3zE7NOnfopUrd7oU35TU9bOUTjxeldYI1daL+9BfucllQ==","signatures":[{"sig":"MEUCIDEjRhHfa+62wRBS24fXqGeD8HeUZDs/OHc+jbjha9+cAiEAoJRcJVo7jeGGAbTf20cFQpwEyleEXxEcfDOjy0vuDZ0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294663},"main":"./dist/index.js","type":"module","_from":"file:achorde-svguitar-react-2.5.3.tgz","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.js"}},"private":false,"scripts":{"dev":"vite --config vite.config.app.ts","lint":"eslint .","test":"vitest","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier --write .","preview":"vite preview --config vite.config.app.ts","test:ui":"vitest --ui","test:run":"vitest run","build:app":"vite build --config vite.config.app.ts","storybook":"storybook dev -p 6006","test:watch":"vitest --watch","preview:app":"vite preview --config vite.config.app.ts","format:check":"prettier --check .","storybook:ci":"storybook dev -p 6006 --ci","test:coverage":"vitest run --coverage","test-storybook":"test-storybook","build-storybook":"storybook build","deploy-storybook":"./scripts/deploy-storybook.sh","preview-storybook":"npx serve storybook-static","test:coverage:unit":"vitest run --coverage --project=unit","deploy-storybook:prod":"./scripts/deploy-storybook.sh --production"},"_npmUser":{"name":"saitodisse","email":"saitodisse@gmail.com"},"_resolved":"/tmp/af19b6bc02b2c4a851270ff861ba732d/achorde-svguitar-react-2.5.3.tgz","_integrity":"sha512-iDSzr2qVgEatJ4S80axrZ/nIBStMUefNhFRqoYhZV3zE7NOnfopUrd7oU35TU9bOUTjxeldYI1daL+9BfucllQ==","repository":{"url":"git+https://github.com/achorde/achorde.git","type":"git","directory":"packages/svguitar-react"},"_npmVersion":"11.13.0","description":"A React component for rendering guitar chord diagrams in SVG format","directories":{},"_nodeVersion":"24.13.1","dependencies":{"nuqs":"^2.7.2","react":"^19.2.0","tonal":"^6.4.2","i18next":"^25.6.0","react-dom":"^19.2.0","react-i18next":"^16.2.1","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@achorde/musical-domain":"0.5.3","@radix-ui/react-radio-group":"^1.3.8","i18next-browser-languagedetector":"^8.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.12","jsdom":"^27.0.1","eslint":"^9.38.0","vitest":"^3.2.4","globals":"^16.4.0","postcss":"^8.5.6","prettier":"^3.6.2","storybook":"9.1.10","@eslint/js":"^9.38.0","playwright":"^1.56.1","typescript":"~5.8.3","@types/node":"^24.9.2","tailwindcss":"^4.1.16","@types/react":"^19.2.2","lucide-react":"^0.544.0","tailwind-merge":"^3.3.1","@vitest/browser":"^3.2.4","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.16","typescript-eslint":"^8.46.2","@vitest/coverage-v8":"^3.2.4","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.1.0","@storybook/addon-a11y":"9.1.10","@storybook/addon-docs":"9.1.10","@storybook/react-vite":"9.1.10","@storybook/test-runner":"^0.23.0","@testing-library/react":"^16.3.0","@storybook/addon-vitest":"9.1.10","eslint-plugin-storybook":"9.1.10","@chromatic-com/storybook":"4.1.1","class-variance-authority":"^0.7.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svguitar-react_2.5.3_1780803641985_0.9425940014934646","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@achorde/svguitar-react","private":false,"version":"3.0.0","type":"module","description":"A React component for rendering guitar chord diagrams in SVG format","keywords":["react","guitar","chord","diagram","svg","music"],"author":{"name":"svguitar-react"},"license":"MIT","main":"./dist/index.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.js"}},"repository":{"type":"git","url":"git+https://github.com/saitodisse/achorde.git","directory":"packages/svguitar-react"},"homepage":"https://svguitar-react.vercel.app/","bugs":{"url":"https://github.com/saitodisse/achorde/issues"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"publishConfig":{"access":"public"},"dependencies":{"@radix-ui/react-label":"^2.1.7","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","i18next":"^25.6.0","i18next-browser-languagedetector":"^8.2.0","nuqs":"^2.7.2","react":"^19.2.0","react-dom":"^19.2.0","react-i18next":"^16.2.1","tonal":"^6.4.2","@achorde/musical-domain":"0.6.0"},"devDependencies":{"@chromatic-com/storybook":"4.1.1","@eslint/js":"^9.38.0","@radix-ui/react-slot":"^1.2.3","@storybook/addon-a11y":"9.1.10","@storybook/addon-docs":"9.1.10","@storybook/addon-vitest":"9.1.10","@storybook/react-vite":"9.1.10","@storybook/test-runner":"^0.23.0","@tailwindcss/postcss":"^4.1.16","@tailwindcss/vite":"^4.1.16","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/node":"^24.9.2","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@vitejs/plugin-react":"^5.1.0","@vitest/browser":"^3.2.4","@vitest/coverage-v8":"^3.2.4","class-variance-authority":"^0.7.1","clsx":"^2.1.1","eslint":"^9.38.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.24","eslint-plugin-storybook":"9.1.10","globals":"^16.4.0","jsdom":"^27.0.1","lucide-react":"^0.544.0","playwright":"^1.56.1","postcss":"^8.5.6","prettier":"^3.6.2","storybook":"9.1.10","tailwind-merge":"^3.3.1","tailwindcss":"^4.1.16","typescript":"~5.8.3","typescript-eslint":"^8.46.2","vite":"^7.1.12","vitest":"^3.2.4"},"scripts":{"dev":"vite --config vite.config.app.ts","build":"tsc -p tsconfig.lib.json && vite build","build:app":"vite build --config vite.config.app.ts","lint":"eslint .","preview":"vite preview --config vite.config.app.ts","preview:app":"vite preview --config vite.config.app.ts","storybook":"storybook dev -p 6006 --no-open","storybook:ci":"storybook dev -p 6006 --ci --no-open","build-storybook":"storybook build","preview-storybook":"npx serve storybook-static","deploy-storybook":"./scripts/deploy-storybook.sh","deploy-storybook:prod":"./scripts/deploy-storybook.sh --production","test-storybook":"test-storybook","test":"vitest","test:run":"vitest run","test:ui":"vitest --ui","test:coverage":"vitest run --coverage","test:coverage:unit":"vitest run --coverage --project=unit","test:watch":"vitest --watch","format":"prettier --write .","format:check":"prettier --check ."},"_id":"@achorde/svguitar-react@3.0.0","_integrity":"sha512-H1ZN7qcnC95S50hc3TtDMSYAxXg+7jAEIs14a9ECxuNdtUckoGhz8mv7MHipn+PiKmc4EST/ZXwIIC85qqhYwg==","_resolved":"/tmp/7da4a896f1544cf36938aea6f8db3af0/achorde-svguitar-react-3.0.0.tgz","_from":"file:achorde-svguitar-react-3.0.0.tgz","_nodeVersion":"24.13.1","_npmVersion":"11.13.0","dist":{"integrity":"sha512-H1ZN7qcnC95S50hc3TtDMSYAxXg+7jAEIs14a9ECxuNdtUckoGhz8mv7MHipn+PiKmc4EST/ZXwIIC85qqhYwg==","shasum":"5a01892103444070cb2f365c6f6ad2e96d4f845d","tarball":"https://registry.npmjs.org/@achorde/svguitar-react/-/svguitar-react-3.0.0.tgz","fileCount":88,"unpackedSize":294518,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVVwUqxj+Ssa1EGk0Bw8g+43IWnLLmhnqww0uTYhDUaAIgTTRTGcJa9sEtFuS/MNrgocqOkXbgH5irXVdm+sVW0+o="}]},"_npmUser":{"name":"saitodisse","email":"saitodisse@gmail.com"},"directories":{},"maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svguitar-react_3.0.0_1782262974798_0.7976329739322723"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T19:15:18.915Z","modified":"2026-06-24T01:02:55.136Z","2.5.0":"2026-06-04T19:15:19.257Z","2.5.1":"2026-06-04T19:18:55.521Z","2.5.2":"2026-06-05T06:12:57.120Z","2.5.3":"2026-06-07T03:40:42.181Z","3.0.0":"2026-06-24T01:02:55.032Z"},"bugs":{"url":"https://github.com/saitodisse/achorde/issues"},"author":{"name":"svguitar-react"},"license":"MIT","homepage":"https://svguitar-react.vercel.app/","keywords":["react","guitar","chord","diagram","svg","music"],"repository":{"type":"git","url":"git+https://github.com/saitodisse/achorde.git","directory":"packages/svguitar-react"},"description":"A React component for rendering guitar chord diagrams in SVG format","maintainers":[{"name":"saitodisse","email":"saitodisse@gmail.com"}],"readme":"# @achorde/svguitar-react\n\nA React component for rendering guitar chord diagrams in SVG format with high performance and full customization.\n\n- 🌐 **Live Demo**: [https://svguitar-react.vercel.app/](https://svguitar-react.vercel.app/)\n- 🌐 **Storybook**: [https://storybook-svguitar-react.vercel.app/](https://storybook-svguitar-react.vercel.app/?path=/docs/components-chorddiagram--docs)\n- 🔗 **NPM Package**: [https://www.npmjs.com/package/@achorde/svguitar-react](https://www.npmjs.com/package/@achorde/svguitar-react) (`latest`: **2.5.3**)\n\n## Features\n\n- 🎸 **Guitar Chord Diagrams**: Render beautiful chord diagrams in SVG format\n- ⚡ **High Performance**: Optimized with React.memo and efficient rendering\n- 🎨 **Fully Customizable**: Complete control over colors, sizes, fonts, spacing and layout strategies\n- 🧭 **Multiple Views**: Horizontal/vertical, right/left-handed presets with consistent label orientation\n- 🧩 **Pluggable Layout Engines**: Swap or inject custom layout logic (Strategy pattern) without touching rendering code\n- 📱 **Responsive**: SVG-based rendering that scales perfectly\n- 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions\n- 🧪 **Well Tested**: Comprehensive test suite with Vitest\n- 📚 **Storybook**: Interactive documentation and examples\n\n## Installation\n\n```bash\npnpm add @achorde/svguitar-react @achorde/musical-domain\n```\n\n## Quick Start\n\n`voicing` follows `@achorde/musical-domain` directly: `stringIndex: 1` is low E, followed by A, D, G, B, and `stringIndex: 6` is high E. The default `vertical-right` view places string 1 on the left.\n\n```tsx\nimport React from \"react\";\nimport { ChordDiagram } from \"@achorde/svguitar-react\";\nimport type { FrettedInstrumentVoicing } from \"@achorde/musical-domain\";\n\nconst App = () => {\n\tconst cMajorVoicing: FrettedInstrumentVoicing = {\n\t\tid: \"voicing-c-major\",\n\t\tinstrumentId: \"guitar\",\n\t\ttuningId: \"guitar-standard\",\n\t\tchordSymbol: \"C\",\n\t\tstrings: [\n\t\t\t{ stringIndex: 1, openNote: \"E\", fret: null, state: \"muted\" },\n\t\t\t{ stringIndex: 2, openNote: \"A\", fret: 3, state: \"fretted\", finger: 3 },\n\t\t\t{ stringIndex: 3, openNote: \"D\", fret: 2, state: \"fretted\", finger: 2 },\n\t\t\t{ stringIndex: 4, openNote: \"G\", fret: 0, state: \"open\" },\n\t\t\t{ stringIndex: 5, openNote: \"B\", fret: 1, state: \"fretted\", finger: 1 },\n\t\t\t{ stringIndex: 6, openNote: \"E\", fret: null, state: \"open\" },\n\t\t],\n\t\tsource: \"manual\",\n\t\tquality: \"recommended\",\n\t};\n\n\treturn <ChordDiagram voicing={cMajorVoicing} view=\"vertical-right\" />;\n};\n```\n\n## Usage Examples\n\n### Basic Chord\n\n```tsx\n<ChordDiagram voicing={cMajorVoicing} />\n```\n\n### Chord with Barre\n\n```tsx\nconst fMajorVoicing: FrettedInstrumentVoicing = {\n\tid: \"voicing-f-major\",\n\tinstrumentId: \"guitar\",\n\ttuningId: \"guitar-standard\",\n\tchordSymbol: \"F\",\n\tstrings: [\n\t\t{ stringIndex: 1, openNote: \"E\", fret: 1, state: \"fretted\", finger: 1 },\n\t\t{ stringIndex: 2, openNote: \"A\", fret: 3, state: \"fretted\", finger: 3 },\n\t\t{ stringIndex: 3, openNote: \"D\", fret: 3, state: \"fretted\", finger: 4 },\n\t\t{ stringIndex: 4, openNote: \"G\", fret: 2, state: \"fretted\", finger: 2 },\n\t\t{ stringIndex: 5, openNote: \"B\", fret: 1, state: \"fretted\", finger: 1 },\n\t\t{ stringIndex: 6, openNote: \"E\", fret: 1, state: \"fretted\", finger: 1 },\n\t],\n\tbarres: [{ fret: 1, fromStringIndex: 1, toStringIndex: 6, finger: 1 }],\n\tsource: \"manual\",\n\tquality: \"recommended\",\n};\n\n<ChordDiagram voicing={fMajorVoicing} />;\n```\n\n### Using Fret Notation\n\n```tsx\n<ChordDiagram\n\tinstrument={{\n\t\ttuning: [\"E2\", \"A2\", \"D3\", \"G3\", \"B3\", \"E4\"],\n\t\tchord: \"x32010\", // C Major\n\t}}\n/>\n```\n\n### Auto First Fret (High Position Chords)\n\nThe `autoFirstFret` feature automatically adjusts the diagram's starting fret position when finger positions are outside the default visible range. This is particularly useful for high-position chords.\n\n```tsx\n// Without autoFirstFret, you'd need to manually set firstFret={5}\n<ChordDiagram\n\tautoFirstFret={true}\n\tfretCount={4}\n\tfingers={[\n\t\t{ fret: 5, string: 1, is_muted: false, text: \"1\" },\n\t\t{ fret: 7, string: 2, is_muted: false, text: \"3\" },\n\t\t{ fret: 8, string: 3, is_muted: false, text: \"4\" },\n\t]}\n\tbarres={[]}\n/>\n// → Automatically starts at fret 5, all fingers visible\n\n// Automatically increases fretCount when needed\n<ChordDiagram\n\tautoFirstFret={true}\n\tfretCount={4}\n\tfingers={[\n\t\t{ fret: 5, string: 1, is_muted: false },\n\t\t{ fret: 10, string: 2, is_muted: false },\n\t]}\n\tbarres={[]}\n/>\n// → firstFret=5, fretCount increased to 6\n// → Console warning: \"[ChordDiagram] Auto-increased fretCount from 4 to 6\"\n```\n\n**Key Features:**\n\n- Automatically calculates `firstFret` based on finger positions\n- Can increase `fretCount` (up to max of 12) to fit all fingers\n- Manual `firstFret` always takes precedence (allows override)\n- Only activates when fingers are outside visible range (1-fretCount)\n- Logs console warnings when adjustments are made\n\n### Custom Styling\n\n````tsx\n<ChordDiagram\n\tchord={chordData}\n\tview=\"horizontal-left\"\n\twidth={200}\n\theight={250}\n\tdotColor=\"#FF5733\"\n\tstringColor=\"#CCCCCC\"\n\tfontFamily=\"Arial, sans-serif\"\n/>\n\n### Selecting Views\n\n```tsx\n<ChordDiagram chord={chordData} view=\"vertical-right\" />\n<ChordDiagram chord={chordData} view=\"vertical-left\" />\n````\n\n### Custom Layout Engine\n\n```tsx\nimport { ChordDiagram, layoutRegistry, type LayoutEngine } from \"svguitar-react\";\n\nconst diagonalEngine: LayoutEngine = {\n\tid: \"horizontal-right\",\n\tmapStringAxis: (stringNumber, frame) =>\n\t\tframe.gridOriginY + (frame.stringCount - stringNumber) * (frame.gridHeight / (frame.stringCount - 1)),\n\tmapFretAxis: (fret, frame) => frame.gridOriginX + (fret - frame.firstFret + 0.5) * frame.style.fretWidth,\n\tfingerPosition: (finger, args) => ({\n\t\tcx: args.frame.gridOriginX + (finger.fret - args.frame.firstFret + 0.5) * args.frame.style.fretWidth,\n\t\tcy:\n\t\t\targs.frame.gridOriginY +\n\t\t\t(args.frame.stringCount - finger.string) *\n\t\t\t\t(args.frame.gridHeight / (args.frame.stringCount - 1)) +\n\t\t\t(finger.fret % 2 === 0 ? -6 : 6),\n\t\tr: args.frame.style.dotSize / 2,\n\t}),\n\tbarreRect: (barre, args) => ({\n\t\tx: args.frame.gridOriginX + (barre.fret - args.frame.firstFret) * args.frame.style.fretWidth,\n\t\ty:\n\t\t\targs.frame.gridOriginY +\n\t\t\t(args.frame.stringCount - barre.toString) *\n\t\t\t\t(args.frame.gridHeight / (args.frame.stringCount - 1)) -\n\t\t\targs.frame.style.barreHeight / 2,\n\t\twidth: args.frame.style.fretWidth,\n\t\theight:\n\t\t\tMath.abs(barre.toString - barre.fromString) *\n\t\t\t\t(args.frame.gridHeight / (args.frame.stringCount - 1)) +\n\t\t\targs.frame.style.barreHeight,\n\t\trx: 4,\n\t}),\n\tindicatorPosition: (stringNumber, kind, args) => ({\n\t\tx: args.frame.gridOriginX - args.frame.style.fretWidth * 0.5,\n\t\ty:\n\t\t\targs.frame.gridOriginY +\n\t\t\t(args.frame.stringCount - stringNumber) * (args.frame.gridHeight / (args.frame.stringCount - 1)) -\n\t\t\targs.frame.style.dotSize,\n\t}),\n};\n\nlayoutRegistry.register(diagonalEngine);\n\n<ChordDiagram chord={chordData} layoutEngine={diagonalEngine} />;\n```\n\n````\n\n## API Reference\n\n### ChordDiagramProps\n\n| Prop             | Type                       | Description                                                                     |\n| ---------------- | -------------------------- | ------------------------------------------------------------------------------- |\n| `voicing`        | `FrettedInstrumentVoicing` | Shared chord voicing contract from `achorde-musical-domain`                     |\n| `chord`          | `Chord`                    | Chord data with fingers and barres                                              |\n| `instrument`     | `Partial<Instrument>`      | Instrument configuration for fret notation                                      |\n| `view`           | `ViewId`                   | Predefined layout view (`vertical-right` by default; `horizontal-right`, `horizontal-left`, `vertical-left` remain supported) |\n| `layoutEngine`   | `LayoutEngine`             | Custom layout strategy (takes precedence over `view`)                           |\n| `autoFirstFret`  | `boolean`                  | Automatically adjusts `firstFret` when fingers are outside visible range (default: `false`) |\n| `width`/`height` | `number`                   | Total width/height of the SVG                                                   |\n| `dotColor`       | `string`                   | Finger dot color                                                                |\n| `fontFamily`     | `string`                   | Font family                                                                     |\n| ...              | `ChordStyle` properties    | All other styling props inline (colors, spacing, fonts, etc.)                   |\n\n### Chord\n\n```typescript\ninterface Chord {\n\tfingers: Finger[];\n\tbarres: Barre[];\n\tfirstFret?: number;\n\tlastFret?: number;\n}\n````\n\n### Finger\n\n```typescript\ninterface Finger {\n\tfret: number; // Fret number (1-based)\n\tstring: number; // String number (1-based, 1 = thickest)\n\tis_muted: boolean; // Whether the string is muted (true => 'X')\n\ttext?: string; // Optional text inside the circle\n}\n```\n\n### Barre\n\n````typescript\ninterface Barre {\n\tfret: number; // Fret number (1-based)\n\tfromString: number; // Starting string\n\ttoString: number; // Ending string\n\ttext?: string; // Optional text on the barre\n}\n\n### LayoutEngine\n\n```typescript\ntype ViewId = \"horizontal-right\" | \"horizontal-left\" | \"vertical-right\" | \"vertical-left\";\n\ninterface LayoutFrame {\n\twidth: number;\n\theight: number;\n\tgridOriginX: number;\n\tgridOriginY: number;\n\tgridWidth: number;\n\tgridHeight: number;\n\tfirstFret: number;\n\tstringCount: number;\n\tfretCount: number;\n\tstyle: ChordStyle;\n}\n\ninterface LayoutEngine {\n\tid: ViewId;\n\tmapStringAxis(stringNumber: number, frame: LayoutFrame): number;\n\tmapFretAxis(fret: number, frame: LayoutFrame): number;\n\tfingerPosition(finger: Finger, args: { frame: LayoutFrame }): { cx: number; cy: number; r: number };\n\tbarreRect(barre: Barre, args: { frame: LayoutFrame }): {\n\t\tx: number;\n\t\ty: number;\n\t\twidth: number;\n\t\theight: number;\n\t\trx?: number;\n\t};\n\tindicatorPosition(stringNumber: number, kind: \"open\" | \"muted\", args: { frame: LayoutFrame }): {\n\t\tx: number;\n\t\ty: number;\n\t};\n}\n\n// Built-in helpers\nimport { layoutRegistry, resolveViewId, getLayoutEngine, DEFAULT_VIEW } from \"svguitar-react\";\n````\n\n````\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm\n\n### Testing\n\nThe project includes comprehensive testing with Vitest:\n\n```bash\n# Run all tests (unit + Storybook integration)\npnpm test:run\n\n# Run tests in watch mode\npnpm test:watch\n\n# Run tests with coverage report\npnpm test:coverage\n\n# Run only unit tests with coverage (faster)\npnpm test:coverage:unit\n\n# Run tests with UI\npnpm test:ui\n```\n\n**Test Coverage**: The project maintains high test coverage focusing on core library components:\n- **Unit Tests**: 25 tests covering components, layouts, and utilities\n- **Storybook Tests**: 15 visual and interaction tests\n- **Coverage**: 77% overall for core ChordDiagram components\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/svguitar/svguitar-react.git\ncd svguitar-react\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Run all tests (unit + Storybook)\npnpm test:run\n\n# Run tests with coverage\npnpm test:coverage\n\n# Run only unit tests with coverage\npnpm test:coverage:unit\n\n# Start Storybook\npnpm storybook\n\n# Build library\npnpm build\n````\n\n### Project Structure\n\n```\nsrc/\n├── components/\n│   └── ChordDiagram/\n│       ├── ChordDiagram.tsx    # Main component\n│       ├── types.ts            # TypeScript interfaces\n│       ├── utils.ts            # Utility functions\n│       ├── constants.ts        # Default values\n│       ├── Fretboard.tsx       # Fretboard rendering\n│       ├── Finger.tsx          # Finger position rendering\n│       ├── Barre.tsx           # Barre rendering\n│       ├── TuningLabels.tsx    # Tuning labels\n│       └── FretNumbers.tsx     # Fret numbers\n├── stories/\n│   └── ChordDiagram.stories.tsx # Storybook stories\n└── index.ts                    # Library entry point\n```\n\n## 📚 Documentation & Storybook\n\n### Interactive Documentation\n\nExplore all components and features in our interactive Storybook documentation:\n\n- 🌐 **Live Storybook**: [https://storybook-svguitar-react.vercel.app/](https://storybook-svguitar-react.vercel.app/?path=/docs/components-chorddiagram--docs)\n\n### Running Storybook Locally\n\n```bash\n# Start Storybook development server\npnpm storybook # port 6006\n\n# Build Storybook for production\npnpm build-storybook\n\n# Preview built Storybook\npnpm preview-storybook\n```\n\n### Deploying Storybook\n\nFor detailed instructions on deploying Storybook to Vercel, see [STORYBOOK_DEPLOY.md](STORYBOOK_DEPLOY.md).\n\nQuick deploy:\n\n```bash\n# Deploy preview\npnpm deploy-storybook\n\n# Deploy to production\npnpm deploy-storybook:prod\n```\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for a list of changes and version history.\n","readmeFilename":"README.md"}