{"_id":"@dorsk/kakehashi","_rev":"3-c142be6ddd46ebecb83944a5c8fb38b6","name":"@dorsk/kakehashi","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@dorsk/kakehashi","version":"0.1.0","keywords":["svelte","svelte5","react","interop","bridge","wrapper"],"author":{"name":"Dorsk","email":"dorsk.dev@gmail.com"},"license":"MIT","_id":"@dorsk/kakehashi@0.1.0","maintainers":[{"name":"dorsk","email":"dorsk.dev@gmail.com"}],"homepage":"https://github.com/DorskFR/kakehashi","bugs":{"url":"https://github.com/DorskFR/kakehashi/issues"},"dist":{"shasum":"d3512005fce2a54019d714ce685f3967aebcfc96","tarball":"https://registry.npmjs.org/@dorsk/kakehashi/-/kakehashi-0.1.0.tgz","fileCount":7,"integrity":"sha512-1ESABrPat8t5RyL6upkV04iNk0gtxWBYmnQXaypkI3jo6kzFb8xIzAb0iTNPDUBbRdPjyw9w7xVWYOlo4D1YBA==","signatures":[{"sig":"MEYCIQDGrECUebfb63L/8JfEhaMBNwUWvmSQ/YEMAy0fOX4WfwIhANQ/tIuSa6GbHz8G3fy+VyYGGPfKCkW/1QMSlxwAZz8/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9289},"type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./internal/props.svelte.js":"./dist/props.svelte.js"},"gitHead":"1885cd36b46d7030315a18c84b117e6cefb23b38","scripts":{"lint":"biome check .","test":"vitest run","build":"tsc -p tsconfig.build.json && cp src/props.svelte.js dist/props.svelte.js","check":"tsc -p tsconfig.json","format":"biome check --write .","prepare":"lefthook install || true","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"dorsk","email":"dorsk.dev@gmail.com"},"repository":{"url":"git+https://github.com/DorskFR/kakehashi.git","type":"git"},"_npmVersion":"10.9.8","description":"Use real Svelte 5 components inside React. A thin bridge — mounts the actual compiled component, keeps its scoped CSS, passes React children through.","directories":{},"_nodeVersion":"22.23.1","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","jsdom":"^30.0.1","react":"^19.2.8","svelte":"^5.57.0","vitest":"^5.0.0","lefthook":"^2.1.12","react-dom":"^19.2.8","typescript":"^7.0.2","@types/react":"^19.2.18","@biomejs/biome":"^2.5.12","@types/react-dom":"^19.2.7","@sveltejs/vite-plugin-svelte":"^7.3.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","svelte":"^5.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/kakehashi_0.1.0_1788562844133_0.45194551452171283","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dorsk/kakehashi","version":"0.1.1","keywords":["svelte","svelte5","react","interop","bridge","wrapper"],"author":{"name":"Dorsk","email":"dorsk.dev@gmail.com"},"license":"MIT","_id":"@dorsk/kakehashi@0.1.1","maintainers":[{"name":"dorsk","email":"dorsk.dev@gmail.com"}],"homepage":"https://github.com/DorskFR/kakehashi","bugs":{"url":"https://github.com/DorskFR/kakehashi/issues"},"dist":{"shasum":"5c842848c41f3843e0e0f9ee58eaea1afd68af53","tarball":"https://registry.npmjs.org/@dorsk/kakehashi/-/kakehashi-0.1.1.tgz","fileCount":7,"integrity":"sha512-sdJHvNtLLbs5VVACpIwdJKy5vTLO2oOWBJoUV6e/YjwkCcR0rM9/a+XkZ91zdseDYkTTOBXoR6DRgt5fAzPfbA==","signatures":[{"sig":"MEQCIHUEvumaD7WaE1xVoHzgcmmun6NuZ8ZO/oqQH/RQVXOLAiBXk1uFX4nOAfExfB54x7rz32/NbDgcPTKF2f2JkH9AAw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@dorsk%2fkakehashi@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":9794},"type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./internal/props.svelte.js":"./dist/props.svelte.js"},"gitHead":"417efff53743a8234377c838289af004f70f7cea","scripts":{"lint":"biome check .","test":"vitest run","build":"tsc -p tsconfig.build.json && cp src/props.svelte.js dist/props.svelte.js","check":"tsc -p tsconfig.json","format":"biome check --write .","prepare":"lefthook install || true","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:241fde64-a547-4fc0-b373-788b7ec5724a"}},"repository":{"url":"git+https://github.com/DorskFR/kakehashi.git","type":"git"},"_npmVersion":"11.19.0","description":"Use real Svelte 5 components inside React. A thin bridge — mounts the actual compiled component, keeps its scoped CSS, passes React children through.","directories":{},"_nodeVersion":"24.20.0","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","jsdom":"^30.0.1","react":"^19.2.8","svelte":"^5.57.0","vitest":"^5.0.0","lefthook":"^2.1.12","react-dom":"^19.2.8","typescript":"^7.0.2","@types/react":"^19.2.18","@biomejs/biome":"^2.5.12","@types/react-dom":"^19.2.7","@sveltejs/vite-plugin-svelte":"^7.3.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","svelte":"^5.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/kakehashi_0.1.1_1788563189803_0.456885004112509","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@dorsk/kakehashi","version":"0.2.0","description":"Use real Svelte 5 components inside React. A thin bridge — mounts the actual compiled component, keeps its scoped CSS, passes React children through.","type":"module","license":"MIT","author":{"name":"Dorsk","email":"dorsk.dev@gmail.com"},"homepage":"https://github.com/DorskFR/kakehashi","repository":{"type":"git","url":"git+https://github.com/DorskFR/kakehashi.git"},"keywords":["svelte","svelte5","react","interop","bridge","wrapper"],"types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./internal/props.svelte.js":"./dist/props.svelte.js"},"publishConfig":{"access":"public","provenance":true},"scripts":{"build":"tsc -p tsconfig.build.json && cp src/props.svelte.js dist/props.svelte.js","check":"tsc -p tsconfig.json","lint":"biome check .","format":"biome check --write .","test":"vitest run","test:watch":"vitest","prepare":"lefthook install || true","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","svelte":"^5.0.0"},"devDependencies":{"@biomejs/biome":"^2.5.12","@sveltejs/vite-plugin-svelte":"^7.3.0","@types/react":"^19.2.18","@types/react-dom":"^19.2.7","jsdom":"^30.0.1","lefthook":"^2.1.12","react":"^19.2.8","react-dom":"^19.2.8","svelte":"^5.57.0","typescript":"^7.0.2","vite":"^8.2.2","vitest":"^5.0.0"},"gitHead":"b06780cbbac43d1a1fe55da2b585ee4bbe51e6c7","_id":"@dorsk/kakehashi@0.2.0","bugs":{"url":"https://github.com/DorskFR/kakehashi/issues"},"_nodeVersion":"24.20.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-11YKyrDtaPzgmSo/NMTCj3aDYTO+aYBUxcOeTGauh4qk05Xi7Qiu0+WiiO2/zGay/O8WtAoSHKbAjGP/62Hwdg==","shasum":"e2fb35fd609742747b149113141f802e1d2bfa44","tarball":"https://registry.npmjs.org/@dorsk/kakehashi/-/kakehashi-0.2.0.tgz","fileCount":7,"unpackedSize":14339,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@dorsk%2fkakehashi@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDTXMrDhJR2KFvRITE6wXLgyib80hRfr+NFldQkDCFdoAIgUjHkhDudkBWxv/STCHEJ3tksQPz4JnUN7/gRnPNodBY="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:241fde64-a547-4fc0-b373-788b7ec5724a"}},"directories":{},"maintainers":[{"name":"dorsk","email":"dorsk.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kakehashi_0.2.0_1788595871489_0.062227110526749785"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-04T23:00:43.960Z","modified":"2026-09-05T08:11:11.933Z","0.1.0":"2026-09-04T23:00:44.267Z","0.1.1":"2026-09-04T23:06:29.928Z","0.2.0":"2026-09-05T08:11:11.606Z"},"bugs":{"url":"https://github.com/DorskFR/kakehashi/issues"},"author":{"name":"Dorsk","email":"dorsk.dev@gmail.com"},"license":"MIT","homepage":"https://github.com/DorskFR/kakehashi","keywords":["svelte","svelte5","react","interop","bridge","wrapper"],"repository":{"type":"git","url":"git+https://github.com/DorskFR/kakehashi.git"},"description":"Use real Svelte 5 components inside React. A thin bridge — mounts the actual compiled component, keeps its scoped CSS, passes React children through.","maintainers":[{"name":"dorsk","email":"dorsk.dev@gmail.com"}],"readme":"# kakehashi\n\n架け橋 — *a bridge between two things.*\n\nUse real Svelte 5 components inside React. Not a port: the actual compiled\ncomponent is mounted, so its scoped CSS, effects and internal state all behave\nexactly as they do in a Svelte app.\n\n```sh\nnpm i -D @dorsk/kakehashi\n```\n\n```jsx\nimport { toReact } from '@dorsk/kakehashi';\nimport ButtonSvelte from './Button.svelte';\n\nconst Button = toReact(ButtonSvelte, 'Button');\n\n\n```\n\nProps stay reactive — updates mutate the component's props rather than\nremounting it — and React children are passed through as the default snippet.\n\n## Named snippets\n\nA React element prop becomes a named snippet. A function prop is treated as an\nevent handler unless you wrap it in `snippet()`, in which case the Svelte side\ncan `{@render name(...args)}` and the function receives those arguments.\n\n```jsx\nimport { snippet, toReact } from '@dorsk/kakehashi';\nimport TabsSvelte from './Tabs.svelte';\n\nconst Tabs = toReact(TabsSvelte, 'Tabs');\n\n {i + 1}. {label})}\n panel={

Panel content

}\n/>\n```\n\nWhich props are snippets is decided when the component mounts.\n\nYour bundler must compile Svelte (`.svelte` and `.svelte.js`).\n\n## Why\n\nClaude Design (claude.ai/design) renders React: its agent builds UI from\ncomponents exposed on a global, as JSX. A Svelte design system has nothing to\nhand it — so `/design-sync` can only ship the styling layer, and the components\nend up hand-mirrored in React, which drifts from the originals immediately.\n\nThis bridge closes that gap. Wrap each Svelte export once and the design agent\nbuilds with the real components — same props, same scoped CSS, no second\nimplementation to keep in sync.\n\n## Not handled yet\n\n`bind:` two-way props, SSR.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}