{"_id":"@brainwires/react-skia-pack","_rev":"5-553ffa74fcc28b6e7e6f140960beee8d","name":"@brainwires/react-skia-pack","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@brainwires/react-skia-pack","version":"1.0.0","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"author":{"name":"Brainwires"},"license":"MIT","_id":"@brainwires/react-skia-pack@1.0.0","maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"homepage":"https://github.com/brainwires/react-skia-pack#readme","bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"dist":{"shasum":"c6791ada68737f25ec61dcc5ce5088a61582fa07","tarball":"https://registry.npmjs.org/@brainwires/react-skia-pack/-/react-skia-pack-1.0.0.tgz","fileCount":42,"integrity":"sha512-ANk98mDbNDf9KK5UT5dnSYUCAnJdpkOmUDfuO0nWyISz7SysgETi/K0qZjbk0sSnXqR2SekpgjsSL9EGdTKJMw==","signatures":[{"sig":"MEUCIH9SibwyWqo/4pvwoZpGXsFKhwC//fsbXieAVQmtrSQHAiEAg6hlZhBJkRn70Hqk3I+ohOxLZ59qxPDqofOIT3PE1TY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12043369},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./utils":{"types":"./dist/utils/index.d.ts","import":"./dist/utils/index.mjs","require":"./dist/utils/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.mjs","require":"./dist/charts/index.js"},"./widgets":{"types":"./dist/widgets/index.d.ts","import":"./dist/widgets/index.mjs","require":"./dist/widgets/index.js"},"./primitives":{"types":"./dist/primitives/index.d.ts","import":"./dist/primitives/index.mjs","require":"./dist/primitives/index.js"}},"gitHead":"b58e75a22cc2cf237c790bc67ec01c1665f3e116","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","postinstall":"node scripts/postinstall.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"brainwires","email":"josh@brainwires.net"},"repository":{"url":"git+https://github.com/brainwires/react-skia-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","directories":{},"_nodeVersion":"22.20.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","typescript":"^5.3.3","@types/node":"^20.11.0","@types/react":"^18.2.0","canvaskit-wasm":"^0.40.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"optionalDependencies":{"canvaskit-wasm":"^0.40.0"},"peerDependenciesMeta":{"canvaskit-wasm":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-skia-pack_1.0.0_1767975338999_0.15684009891595974","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@brainwires/react-skia-pack","version":"1.0.1","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"author":{"name":"Brainwires"},"license":"MIT","_id":"@brainwires/react-skia-pack@1.0.1","maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"homepage":"https://github.com/brainwires/react-skia-pack#readme","bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"dist":{"shasum":"dc000a9e3b33d959fb8ec1f177b76abcbb67925c","tarball":"https://registry.npmjs.org/@brainwires/react-skia-pack/-/react-skia-pack-1.0.1.tgz","fileCount":44,"integrity":"sha512-0ffFULgaZZswGevmhtkk8xiI1IlfnJVgKcZcHqlW2h5pVLFdwKMW7Tgn5MpG6TkLJ1WXd9u9S2MOnmWOqejXQg==","signatures":[{"sig":"MEUCIQDk/Vdg3cItrib7SgiBNzSbKjg4LOcX9S45Trn2ejI8jwIgZMdsLBZuHy4wUvyXz3phqEHtpdoOl4WFxXBTPIrt6ag=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20178375},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./utils":{"types":"./dist/utils/index.d.ts","import":"./dist/utils/index.mjs","require":"./dist/utils/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.mjs","require":"./dist/charts/index.js"},"./widgets":{"types":"./dist/widgets/index.d.ts","import":"./dist/widgets/index.mjs","require":"./dist/widgets/index.js"},"./primitives":{"types":"./dist/primitives/index.d.ts","import":"./dist/primitives/index.mjs","require":"./dist/primitives/index.js"}},"gitHead":"cb416fadf49343cd8c7cb308c7813d8aea95292d","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","postinstall":"node scripts/postinstall.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"brainwires","email":"josh@brainwires.net"},"repository":{"url":"git+https://github.com/brainwires/react-skia-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","directories":{},"_nodeVersion":"22.20.0","dependencies":{"@brainwires/react-skia-pack":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","typescript":"^5.3.3","@types/node":"^20.11.0","@types/react":"^18.2.0","canvaskit-wasm":"^0.40.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"optionalDependencies":{"canvaskit-wasm":"^0.40.0"},"peerDependenciesMeta":{"canvaskit-wasm":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-skia-pack_1.0.1_1767979052064_0.7189634894093297","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@brainwires/react-skia-pack","version":"1.0.2","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"author":{"name":"Brainwires"},"license":"MIT","_id":"@brainwires/react-skia-pack@1.0.2","maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"homepage":"https://github.com/brainwires/react-skia-pack#readme","bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"dist":{"shasum":"1774f43f1024621a88be7dfd9330af477806acd6","tarball":"https://registry.npmjs.org/@brainwires/react-skia-pack/-/react-skia-pack-1.0.2.tgz","fileCount":44,"integrity":"sha512-qal4VZlbR7oVQvtbAPv4p7Ka5zvnvELp1qfe0Kfmxd3rxDdzram8SFNI7LezJeits92OGB3s/e568/qXnBAN/A==","signatures":[{"sig":"MEYCIQCeY9XFHm7rzlsy6/hNGD/ClrhyKAmKiOL+EExs5SQCXAIhAOZ02T1gaMykgPNy/dhWD34FxiQVi2LFNvTKSFvJw1/+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20178336},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./utils":{"types":"./dist/utils/index.d.ts","import":"./dist/utils/index.mjs","require":"./dist/utils/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.mjs","require":"./dist/charts/index.js"},"./widgets":{"types":"./dist/widgets/index.d.ts","import":"./dist/widgets/index.mjs","require":"./dist/widgets/index.js"},"./primitives":{"types":"./dist/primitives/index.d.ts","import":"./dist/primitives/index.mjs","require":"./dist/primitives/index.js"}},"gitHead":"7302f7ca5383a44690d5bcd531dc17d410adc6b5","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","postinstall":"node scripts/postinstall.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"brainwires","email":"josh@brainwires.net"},"repository":{"url":"git+https://github.com/brainwires/react-skia-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","directories":{},"_nodeVersion":"22.20.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","typescript":"^5.3.3","@types/node":"^20.11.0","@types/react":"^18.2.0","canvaskit-wasm":"^0.40.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"optionalDependencies":{"canvaskit-wasm":"^0.40.0"},"peerDependenciesMeta":{"canvaskit-wasm":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-skia-pack_1.0.2_1767980316329_0.3971097765402669","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@brainwires/react-skia-pack","version":"1.0.3","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"author":{"name":"Brainwires"},"license":"MIT","_id":"@brainwires/react-skia-pack@1.0.3","maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"homepage":"https://github.com/brainwires/react-skia-pack#readme","bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"dist":{"shasum":"13988721f4c17cbd4c722018a7779d578b4544d7","tarball":"https://registry.npmjs.org/@brainwires/react-skia-pack/-/react-skia-pack-1.0.3.tgz","fileCount":80,"integrity":"sha512-2F6iVLRTx1BRttOU8Krh7tuPJPQ2w8bYoFp56Yy+zcLOoSh5UhT2/F7UurR6Z0nxfQjrEBi987upcb5GuL1A0w==","signatures":[{"sig":"MEUCIQCWgRQuc0LrA8ZS4vA9cIFw8VLWCixt/uYDy6JIOql8DgIgbiKumfAkKmDq4DeXoZ9pBEnczjTLuNpBuVzjaSrlUxk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18202103},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./utils":{"types":"./dist/utils/index.d.ts","import":"./dist/utils/index.mjs","require":"./dist/utils/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.mjs","require":"./dist/charts/index.js"},"./widgets":{"types":"./dist/widgets/index.d.ts","import":"./dist/widgets/index.mjs","require":"./dist/widgets/index.js"},"./primitives":{"types":"./dist/primitives/index.d.ts","import":"./dist/primitives/index.mjs","require":"./dist/primitives/index.js"}},"gitHead":"6e31b0ca1c07cf553f4daea1b2cdd54ef4344490","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","postinstall":"node scripts/postinstall.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"brainwires","email":"josh@brainwires.net"},"repository":{"url":"git+https://github.com/brainwires/react-skia-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","directories":{},"_nodeVersion":"22.20.0","dependencies":{"@brainwires/react-skia-pack":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","typescript":"^5.3.3","@types/node":"^20.11.0","@types/react":"^18.2.0","canvaskit-wasm":"^0.40.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"optionalDependencies":{"canvaskit-wasm":"^0.40.0"},"peerDependenciesMeta":{"canvaskit-wasm":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-skia-pack_1.0.3_1767981203378_0.5127660832475318","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@brainwires/react-skia-pack","version":"1.0.5","description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"author":{"name":"Brainwires"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/brainwires/react-skia-pack.git"},"homepage":"https://github.com/brainwires/react-skia-pack#readme","bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.mjs","require":"./dist/charts/index.js"},"./widgets":{"types":"./dist/widgets/index.d.ts","import":"./dist/widgets/index.mjs","require":"./dist/widgets/index.js"},"./primitives":{"types":"./dist/primitives/index.d.ts","import":"./dist/primitives/index.mjs","require":"./dist/primitives/index.js"},"./utils":{"types":"./dist/utils/index.d.ts","import":"./dist/utils/index.mjs","require":"./dist/utils/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","postinstall":"node scripts/postinstall.js","prepublishOnly":"npm run build","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"peerDependenciesMeta":{"canvaskit-wasm":{"optional":true}},"optionalDependencies":{"canvaskit-wasm":"^0.40.0"},"devDependencies":{"@types/node":"^20.11.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","canvaskit-wasm":"^0.40.0","tsup":"^8.0.1","typescript":"^5.3.3"},"engines":{"node":">=18.0.0"},"dependencies":{"@brainwires/react-skia-pack":"^1.0.2"},"_id":"@brainwires/react-skia-pack@1.0.5","gitHead":"3b2e25fd6151a5c8e5da71d5524b05cbea61c832","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-mO666+vLxk3rilMD8RBDnL3x3g6HaWlJJu3EXraa9BaZlYPXbKL0L0DevdR/N6u6XQSyCt9Bnwtd1J5EgWaZ0w==","shasum":"e769939234a9957465b9d27d461ecf853cd75c07","tarball":"https://registry.npmjs.org/@brainwires/react-skia-pack/-/react-skia-pack-1.0.5.tgz","fileCount":80,"unpackedSize":18200991,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDg/esw1mDw82zphewtMSanFPZBDAUYR4tgPnZl8iJhqwIhAKCs5WaTJpICcJhSb30Xud7EEt0ljhIEGlCJmysNZuqZ"}]},"_npmUser":{"name":"brainwires","email":"josh@brainwires.net"},"directories":{},"maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-skia-pack_1.0.5_1767981985174_0.8524417625464025"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-09T16:15:38.905Z","modified":"2026-01-09T18:06:25.818Z","1.0.0":"2026-01-09T16:15:39.302Z","1.0.1":"2026-01-09T17:17:32.482Z","1.0.2":"2026-01-09T17:38:36.836Z","1.0.3":"2026-01-09T17:53:23.781Z","1.0.5":"2026-01-09T18:06:25.622Z"},"bugs":{"url":"https://github.com/brainwires/react-skia-pack/issues"},"author":{"name":"Brainwires"},"license":"MIT","homepage":"https://github.com/brainwires/react-skia-pack#readme","keywords":["react","skia","canvaskit","charts","visualization","canvas","wasm","widgets","graphics"],"repository":{"type":"git","url":"git+https://github.com/brainwires/react-skia-pack.git"},"description":"React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM","maintainers":[{"name":"brainwires","email":"josh@brainwires.net"}],"readme":"# @brainwires/react-skia-pack\n\n> React components for Skia-based charts, widgets, and visualizations using CanvasKit WASM\n\nA comprehensive library of high-performance, GPU-accelerated React components built on Google's Skia graphics engine via CanvasKit. Perfect for data visualization, interactive widgets, and custom graphics.\n\n## Features\n\n- 🎨 **12+ Chart Types** - Line, Bar, Area, Pie, Scatter, Radar, Gauge, Candlestick, Funnel, Heatmap, Treemap, Sparkline\n- 🎛️ **Interactive Widgets** - Sliders, Knobs, Switches, Progress bars, Meters, Audio players\n- ⚡ **GPU Accelerated** - Hardware-accelerated rendering via Skia/CanvasKit\n- 🌳 **Tree-shakeable** - Import only what you need with multiple entry points\n- 🎭 **Theme Support** - Built-in light/dark mode detection\n- 📱 **Framework Agnostic** - Works with Next.js, Vite, Create React App, and more\n- 🔌 **React Native Compatible** - Auto-detects and uses react-native-skia if present\n\n## Installation\n\n### Standard Installation (with CanvasKit WASM)\n\n```bash\nnpm install @brainwires/react-skia-pack\n# or\nyarn add @brainwires/react-skia-pack\n# or\npnpm add @brainwires/react-skia-pack\n```\n\nThe postinstall script will automatically copy CanvasKit WASM files to `node_modules/@brainwires/react-skia-pack/public/canvaskit/`.\n\n### React Native Installation (with react-native-skia)\n\nIf you're using React Native with `@shopify/react-native-skia`:\n\n```bash\nnpm install @brainwires/react-skia-pack @shopify/react-native-skia\n```\n\nThe package will automatically detect react-native-skia and skip WASM installation.\n\n### Manual WASM Installation\n\nIf you prefer to manage CanvasKit yourself:\n\n```bash\nnpm install @brainwires/react-skia-pack --no-optional\nnpm install canvaskit-wasm  # Install separately if needed\n```\n\n## Quick Start\n\n### Basic Usage\n\n```tsx\nimport { SkiaProvider, BarChart } from \"@brainwires/react-skia-pack\"\n\nfunction App() {\n  const data = [\n    { label: \"Jan\", value: 65 },\n    { label: \"Feb\", value: 78 },\n    { label: \"Mar\", value: 90 },\n    { label: \"Apr\", value: 81 }\n  ]\n\n  return (\n    <SkiaProvider>\n      <BarChart\n        data={data}\n        width={600}\n        height={400}\n        title=\"Monthly Sales\"\n      />\n    </SkiaProvider>\n  )\n}\n```\n\n### Tree-shaking with Specific Imports\n\nImport only the components you need for smaller bundle sizes:\n\n```tsx\n// Import only charts\nimport { BarChart, LineChart } from \"@brainwires/react-skia-pack/charts\"\n\n// Import only widgets\nimport { SkiaSlider, SkiaKnob } from \"@brainwires/react-skia-pack/widgets\"\n\n// Import only primitives\nimport { drawCircle, drawRect } from \"@brainwires/react-skia-pack/primitives\"\n\n// Import only utilities\nimport { getThemeColors, easeInOut } from \"@brainwires/react-skia-pack/utils\"\n```\n\n### Custom WASM Path\n\nIf you need to serve WASM files from a custom location:\n\n```tsx\nimport { SkiaProvider } from \"@brainwires/react-skia-pack\"\n\nfunction App() {\n  return (\n    <SkiaProvider wasmPath=\"/static/canvaskit/\">\n      {/* Your components */}\n    </SkiaProvider>\n  )\n}\n```\n\n### With Loading Fallback\n\n```tsx\n<SkiaProvider fallback={<div>Loading Skia...</div>}>\n  <YourCharts />\n</SkiaProvider>\n```\n\n## Components\n\n### Charts\n\nAll charts support theming, animations, and interactive features.\n\n```tsx\nimport {\n  LineChart,      // Time-series and trend data\n  BarChart,       // Categorical comparisons\n  AreaChart,      // Volume over time\n  PieChart,       // Part-to-whole relationships\n  ScatterChart,   // Correlation analysis\n  RadarChart,     // Multi-variate comparison\n  GaugeChart,     // Single-value metrics\n  CandlestickChart, // Financial OHLC data\n  FunnelChart,    // Conversion analysis\n  HeatmapChart,   // Matrix data visualization\n  TreemapChart,   // Hierarchical data\n  SparklineChart  // Compact trend indicators\n} from \"@brainwires/react-skia-pack/charts\"\n```\n\n**Example: Line Chart**\n\n```tsx\n<LineChart\n  data={[\n    { x: 0, y: 10 },\n    { x: 1, y: 25 },\n    { x: 2, y: 15 },\n    { x: 3, y: 30 }\n  ]}\n  width={800}\n  height={400}\n  strokeWidth={2}\n  showPoints={true}\n  showGrid={true}\n  title=\"Revenue Trend\"\n  xAxisLabel=\"Month\"\n  yAxisLabel=\"Revenue ($)\"\n/>\n```\n\n### Widgets\n\nInteractive UI controls with smooth animations and haptic feedback.\n\n```tsx\nimport {\n  SkiaSlider,      // Single-value slider\n  SkiaRangeSlider, // Min/max range selector\n  SkiaKnob,        // Rotary control\n  SkiaSwitch,      // Toggle switch\n  SkiaProgress,    // Progress indicator\n  SkiaMeter,       // VU meter display\n  SkiaAudioPlayer  // Audio waveform player\n} from \"@brainwires/react-skia-pack/widgets\"\n```\n\n**Example: Slider Widget**\n\n```tsx\nconst [volume, setVolume] = useState(50)\n\n<SkiaSlider\n  value={volume}\n  onChange={setVolume}\n  min={0}\n  max={100}\n  width={300}\n  height={60}\n  showValue={true}\n  label=\"Volume\"\n/>\n```\n\n### Primitives\n\nLow-level drawing utilities for custom graphics.\n\n```tsx\nimport {\n  drawCircle,\n  drawRect,\n  drawPath,\n  drawText,\n  drawImage,\n  createLinearGradient,\n  createRadialGradient,\n  applyBlur,\n  applyShadow\n} from \"@brainwires/react-skia-pack/primitives\"\n```\n\n**Example: Custom Canvas**\n\n```tsx\nimport { SkiaCanvas } from \"@brainwires/react-skia-pack\"\nimport { drawCircle, drawText } from \"@brainwires/react-skia-pack/primitives\"\n\n<SkiaCanvas\n  width={400}\n  height={400}\n  draw={(canvas, canvasKit) => {\n    const paint = new canvasKit.Paint()\n    paint.setColor(canvasKit.Color(255, 0, 0, 1.0))\n    \n    drawCircle(canvas, canvasKit, 200, 200, 50, paint)\n    drawText(canvas, canvasKit, \"Hello Skia!\", 150, 210)\n  }}\n/>\n```\n\n### Utilities\n\nHelper functions for colors, animations, math, and more.\n\n```tsx\nimport {\n  // Color utilities\n  getThemeColors,\n  hexToRgba,\n  \n  // Animation\n  easeInOut,\n  spring,\n  animate,\n  \n  // Math\n  clamp,\n  lerp,\n  mapRange,\n  \n  // Geometry\n  pointInRect,\n  distance,\n  \n  // Scales\n  linearScale,\n  logScale\n} from \"@brainwires/react-skia-pack/utils\"\n```\n\n## Configuration\n\n### SkiaProvider Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | - | Your app components |\n| `fallback` | `ReactNode` | `undefined` | Content shown while loading |\n| `wasmPath` | `string` | `\"/wasm/canvaskit/\"` | Path to WASM files |\n\n### Serving WASM Files\n\n#### Next.js\n\nCopy WASM files to your public directory:\n\n```bash\ncp -r node_modules/@brainwires/react-skia-pack/public/canvaskit public/wasm/\n```\n\nOr configure a custom path:\n\n```tsx\n<SkiaProvider wasmPath=\"/canvaskit/\">\n```\n\n#### Vite\n\nAdd to `vite.config.js`:\n\n```js\nexport default {\n  publicDir: 'public',\n  // WASM files in public/ are automatically served\n}\n```\n\n#### Create React App\n\nCopy to `public/` folder and reference:\n\n```tsx\n<SkiaProvider wasmPath=\"/canvaskit/\">\n```\n\n## Performance Tips\n\n1. **Use Tree-shaking**: Import specific components instead of entire library\n2. **Lazy Load**: Wrap charts in `React.lazy()` for code splitting\n3. **Memoize Data**: Use `useMemo` for chart data to avoid re-renders\n4. **Canvas Recycling**: Reuse SkiaCanvas instances when possible\n5. **Limit Animations**: Reduce animation complexity on low-end devices\n\n## Bundle Sizes\n\nOptimized build outputs for tree-shaking:\n\n| Entry Point | CJS Size | ESM Size |\n|------------|----------|----------|\n| Main (`@brainwires/react-skia-pack`) | ~245 KB | ~239 KB |\n| Charts only (`/charts`) | ~102 KB | ~101 KB |\n| Widgets only (`/widgets`) | ~91 KB | ~90 KB |\n| Primitives only (`/primitives`) | ~41 KB | ~39 KB |\n| Utils only (`/utils`) | ~30 KB | ~28 KB |\n\n*Sizes include source maps. Gzipped sizes are approximately 25-30% smaller.*\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```tsx\nimport type {\n  SkiaCanvasProps,\n  SkiaInteractiveCanvasProps,\n  PointerEventData,\n  ChartDataPoint,\n  BarChartProps,\n  LineChartProps\n} from \"@brainwires/react-skia-pack\"\n```\n\n## Browser Support\n\n- Chrome/Edge 90+\n- Firefox 88+\n- Safari 14+\n- Any browser with WebAssembly and WebGL support\n\n## React Native Support\n\nWorks seamlessly with `@shopify/react-native-skia`. The package automatically detects react-native-skia and uses its CanvasKit instance instead of loading WASM.\n\n## Examples\n\nSee the [examples directory](./examples) for complete working demos:\n\n- [Next.js Integration](./examples/nextjs)\n- [Vite + React](./examples/vite)\n- [Dashboard Demo](./examples/dashboard)\n- [Custom Charts](./examples/custom-charts)\n\n## API Reference\n\nFull API documentation available at [https://brainwires.github.io/react-skia-pack](https://brainwires.github.io/react-skia-pack)\n\n## Contributing\n\nContributions welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) first.\n\n## License\n\nMIT © Brainwires\n\n## Acknowledgments\n\n- Built on [CanvasKit](https://github.com/google/skia/tree/main/modules/canvaskit) by Google\n- Inspired by [react-native-skia](https://github.com/Shopify/react-native-skia) by Shopify\n- Chart designs influenced by [D3.js](https://d3js.org/) and [Chart.js](https://www.chartjs.org/)\n","readmeFilename":"README.md"}