{"_id":"@daisytuner/sdfg-viewer","name":"@daisytuner/sdfg-viewer","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@daisytuner/sdfg-viewer","version":"0.1.0","description":"Interactive canvas renderer for docc Structured SDFG JSON.","license":"MIT","author":{"name":"Daisytuner"},"homepage":"https://github.com/daisytuner/sdfg-viewer#readme","repository":{"type":"git","url":"git+https://github.com/daisytuner/sdfg-viewer.git"},"bugs":{"url":"https://github.com/daisytuner/sdfg-viewer/issues"},"keywords":["sdfg","docc","daisytuner","compiler","visualization","canvas","react","dataflow"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"engines":{"node":">=18"},"publishConfig":{"access":"public","provenance":true},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"dagre":"^0.8.5","lucide-react":"^0.475.0"},"devDependencies":{"@types/dagre":"^0.7.54","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","@vitest/coverage-v8":"^2.1.8","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.3.5","typescript":"~5.7.2","vitest":"^2.1.8"},"gitHead":"80f41b28099f8445c440a424e50c409187d5f96f","_id":"@daisytuner/sdfg-viewer@0.1.0","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-TrHQkfNveuwrc9pKBK77CAUNM+chl/HqpqbFVydAL63KYdXJjajAPRCEe3lY//FH2CNgmasq5SQxufgPPkKs7w==","shasum":"06165bb8ac523cb7906d80d9fb03030d97eb12ee","tarball":"https://registry.npmjs.org/@daisytuner/sdfg-viewer/-/sdfg-viewer-0.1.0.tgz","fileCount":13,"unpackedSize":342288,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@daisytuner%2fsdfg-viewer@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIANL8ZMFTQ47zzDgtyJC0YfJkBlEOEhvv/mqZKOY/JsWAiEAiWOAXxuobzyQpnuZ39RTbXo0gomq0Hwl5R7t6qL5t4U="}]},"_npmUser":{"name":"lukastruemper","email":"lukas.truemper@daisytuner.com"},"directories":{},"maintainers":[{"name":"lukastruemper","email":"lukas.truemper@daisytuner.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sdfg-viewer_0.1.0_1786623183301_0.7625094321208823"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-13T12:13:03.093Z","0.1.0":"2026-08-13T12:13:03.447Z","modified":"2026-08-13T12:13:03.917Z"},"maintainers":[{"name":"lukastruemper","email":"lukas.truemper@daisytuner.com"}],"description":"Interactive canvas renderer for docc Structured SDFG JSON.","homepage":"https://github.com/daisytuner/sdfg-viewer#readme","keywords":["sdfg","docc","daisytuner","compiler","visualization","canvas","react","dataflow"],"repository":{"type":"git","url":"git+https://github.com/daisytuner/sdfg-viewer.git"},"author":{"name":"Daisytuner"},"bugs":{"url":"https://github.com/daisytuner/sdfg-viewer/issues"},"license":"MIT","readme":"# @daisytuner/sdfg-viewer\n\nInteractive canvas renderer for **docc Structured SDFG JSON**. It powers the\nDaisytuner dashboard and docs, and can be embedded in any React surface — one\nsource of truth for SDFG rendering.\n\n## Install\n\n```bash\nnpm install @daisytuner/sdfg-viewer\n```\n\n`react` and `react-dom` (v18 or v19) are peer dependencies.\n\n## Usage\n\n```tsx\nimport { SdfgCanvas } from '@daisytuner/sdfg-viewer'\nimport type { StructuredSdfg } from '@daisytuner/sdfg-viewer'\n\nexport function Demo({ doc }: { doc: StructuredSdfg }) {\n  return (\n    <div style={{ height: 480 }}>\n      <SdfgCanvas doc={doc} controls />\n    </div>\n  )\n}\n```\n\nThe parent must have a resolved height — the canvas fills its container.\n\n### Props\n\n| Prop                | Type                                          | Description                                              |\n| ------------------- | --------------------------------------------- | ------------------------------------------------------- |\n| `doc`               | `StructuredSdfg`                              | docc structured JSON (must have a top-level `root`).     |\n| `regions`           | `SdfgRegionAnnotation[]`                      | Per-region runtime/bottleneck data, keyed by element_id. |\n| `selectedElementId` | `number`                                      | Highlighted element.                                     |\n| `onSelectRegion`    | `(elementId: number) => void`                | Fired when a region container is clicked.                |\n| `onSelectElement`   | `(elementId: number, kind: string) => void`  | Fired when any element is clicked.                       |\n| `onDeselect`        | `() => void`                                  | Fired when empty canvas is clicked.                      |\n| `controls`          | `boolean` (default `true`)                    | Show overlay dropdown, search, minimap and zoom.         |\n\n## Styling\n\nThe canvas graph is drawn with the 2D canvas API (self-contained colors). The\noverlay chrome uses **Tailwind** utility classes, so a Tailwind v4 consumer must\nscan this package's source. Add to your global stylesheet:\n\n```css\n@source \"../node_modules/@daisytuner/sdfg-viewer/dist\";\n```\n\n## Astro / Starlight\n\nRender as a React island. The component uses `window`/`canvas`, so use\n`client:only=\"react\"`:\n\n```astro\n---\nimport { SdfgCanvas } from '@daisytuner/sdfg-viewer'\nimport doc from './sample.json'\n---\n<div style=\"height: 480px\">\n  <SdfgCanvas doc={doc} client:only=\"react\" />\n</div>\n```\n","readmeFilename":"README.md","_rev":"1-3f8a1b0360f01e2256659ffb6c424881"}