{"_id":"@curvenote/any-widget","_rev":"7-6da8e38658c76b92e8b47c72e94cc000","name":"@curvenote/any-widget","dist-tags":{"latest":"0.2.4"},"versions":{"0.1.0":{"name":"@curvenote/any-widget","version":"0.1.0","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.1.0","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"dist":{"shasum":"a7fe469bf3adc1e40ae6d25f1f508f0f212ff622","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.1.0.tgz","fileCount":24,"integrity":"sha512-706PYetcNIN5P9hmk4hjgAnQxpAchfXr4PuGjpTWIjuQibWLcVZ5NEmnkWoYvjvxCjam1OVb6rYqiIwRnktLEg==","signatures":[{"sig":"MEUCIQC7MjnSnUigIS0q7L6G1ehPQ0usH3WSSzGsugDnHI7fMAIgCkk5awSSmBGRWg262cqrpcDB/G1K+nVzLUG+k07XMpU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31996},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"d8328f221b7d9edebd0887184638fa380c1d1c0f","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"stevejpurves","email":"stevejpurves@gmail.com"},"repository":{"url":"https://curvenote.com/curvenote/curvenote","type":"git"},"_npmVersion":"10.9.4","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"22.21.1","dependencies":{"myst-common":"^1.9.0","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.1.0_1764594802711_0.18744709340075016","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@curvenote/any-widget","version":"0.1.1","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.1.1","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"dist":{"shasum":"35d6aa5e428a0dade039f90e6b9b19db2ab9b79b","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.1.1.tgz","fileCount":24,"integrity":"sha512-IFhcLYielL0gcrGJPrEgvWyByuRLaD0rkHdGED+vn+lz9QZEEPTie7htMzjaTqCS+JPYX1C6zG5I+3D0pDHmrg==","signatures":[{"sig":"MEUCIFYIEOO1e7iYpYSo8TRy/haHP1yRIfd8qDi0Xe2ayI0oAiEArt5QpUltv7TvHWb4Bg4EjrSYd5zlgOwaEMVHbZ66ac4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32904},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"80374339a535dfbc7c12103cc50ab61bbf22b2c2","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"fwkoch","email":"franklinwkoch@gmail.com"},"repository":{"url":"https://curvenote.com/curvenote/curvenote","type":"git"},"_npmVersion":"10.8.2","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"18.20.8","dependencies":{"myst-common":"^1.9.0","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.1.1_1764780903781_0.7811867082801396","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@curvenote/any-widget","version":"0.2.0","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.2.0","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"dist":{"shasum":"300aa0eb0943e81c8646f4d48b8b3c005e938668","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.2.0.tgz","fileCount":24,"integrity":"sha512-aqBQPU6zVonddMYhLuebli8F9w+f4e0CuiP1XTLNbPCmmVbWDg10T8ANz+cKnzzFATAHQ1PSSz6YrQUiAUajyw==","signatures":[{"sig":"MEYCIQD3fSGFGrmJ1Inndogt0zgpK3M04hk0cQwP8zlqGr0rMwIhAM15o+Xe5homp0yyPFUmO8+oEnOl9C2ok7eOVaboxRZY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32904},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"08d48f4bc434364283ea7145b3e3afbbf70078ba","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"fwkoch","email":"franklinwkoch@gmail.com"},"repository":{"url":"https://curvenote.com/curvenote/curvenote","type":"git"},"_npmVersion":"10.8.2","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"18.20.8","dependencies":{"myst-common":"^1.9.2","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.2.0_1764950885451_0.1264224799382212","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@curvenote/any-widget","version":"0.2.1","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.2.1","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"homepage":"https://github.com/curvenote/curvenote#readme","bugs":{"url":"https://github.com/curvenote/curvenote/issues"},"dist":{"shasum":"437946b0aa50a9a7176e653e353fecdf502604a3","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.2.1.tgz","fileCount":24,"integrity":"sha512-NtBvKBLF9YhCd0mIgjQunO2zqbmoH1h2RptlK8gxhiYvg4JvgqpPmqrsXtsRkHoIuP6lT+6qhY8s5oMAyOFpvw==","signatures":[{"sig":"MEUCIGZKrBFR/3JIEDjHkFp5y9Wtz1sACGR0soNfNesSYFKKAiEAnD6Qa5WyHT7NTx0ODg4TjHgY3Myrs+J8BFMapaPTG1U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@curvenote%2fany-widget@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":32901},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"176c73f2cb0984848dfc2c49b6ccb1c0dfc1fdc5","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8fa14c14-6fbb-40ce-b452-3d26d4151186"}},"repository":{"url":"git+https://github.com/curvenote/curvenote.git","type":"git"},"_npmVersion":"11.7.0","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"24.11.1","dependencies":{"myst-common":"^1.9.3","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.2.1_1765800248434_0.9721822511911757","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@curvenote/any-widget","version":"0.2.2","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.2.2","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"homepage":"https://github.com/curvenote/curvenote#readme","bugs":{"url":"https://github.com/curvenote/curvenote/issues"},"dist":{"shasum":"a9b8d23e4b62db4667115124aa63eebc845d3626","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.2.2.tgz","fileCount":24,"integrity":"sha512-EEwwukTR6eGRbEcVrVNlLQaQEqzKqD7qzOapg6/SLGNkQMT2fBHViWJ1eVtYg00+TAOhYu8P1PNJMECCbM4mXA==","signatures":[{"sig":"MEUCID3lKimJoCHUks4wSX4DiC7iO3QB4VKY002wJNKf1+biAiEAohhAi/IgnsNe0YCABpwQJLg626hPWi4dnhGZwRYAXcQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@curvenote%2fany-widget@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":33226},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"6547eccbb5302d6ac82c576441e356bf37dc29ff","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8fa14c14-6fbb-40ce-b452-3d26d4151186"}},"repository":{"url":"git+https://github.com/curvenote/curvenote.git","type":"git"},"_npmVersion":"11.11.0","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"24.14.0","dependencies":{"myst-common":"^1.9.5","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.2.2_1772678287324_0.9719318316317613","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@curvenote/any-widget","version":"0.2.3","keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","_id":"@curvenote/any-widget@0.2.3","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"homepage":"https://github.com/curvenote/curvenote#readme","bugs":{"url":"https://github.com/curvenote/curvenote/issues"},"dist":{"shasum":"8791795947355cacf502fb77e63cdae75c28b4ce","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.2.3.tgz","fileCount":24,"integrity":"sha512-jxjS5HExe/QJoYrF58nkAK+FDfWSehf/y9I59mZk0eEKb+KNpVxDOpqcHMTvPp9JjeRjzaaorCVs89tIoK/pcg==","signatures":[{"sig":"MEQCIGp43BFgU/l2sai86LkiSlKIP5QWYZ2j56FbgMbUvoiSAiA69Q7EWRybpbCQr3pBgicfCvZM2BKGTMacdMOMxUP6jw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@curvenote%2fany-widget@0.2.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":33265},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"gitHead":"178d0b0a457a7d1b9f94f0e9e21c7276f2365b46","scripts":{"test":"vitest run","build":"npm-run-all -l clean -p build:esm build:plugin","clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","test:watch":"vitest watch","build:plugin":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8fa14c14-6fbb-40ce-b452-3d26d4151186"}},"repository":{"url":"git+https://github.com/curvenote/curvenote.git","type":"git"},"_npmVersion":"11.14.0","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","directories":{},"_nodeVersion":"24.14.1","dependencies":{"myst-common":"^1.9.5","unist-builder":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.1.0","@myst-theme/providers":"^1.3.0"},"_npmOperationalInternal":{"tmp":"tmp/any-widget_0.2.3_1778168285833_0.6158865609536202","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"@curvenote/any-widget","version":"0.2.4","description":"Extension interface and NodeRenderer following the `any-widget` interfaces","type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/renderer/index.d.ts","default":"./dist/renderer/index.js"}},"scripts":{"clean":"rimraf dist","compile":"tsc --noEmit","build:esm":"tsc","build:plugin":"tsup","build":"npm-run-all -l clean -p build:esm build:plugin","test":"vitest run","test:watch":"vitest watch"},"repository":{"type":"git","url":"git+https://github.com/curvenote/curvenote.git"},"keywords":["any-widget","Curvenote","MyST Markdown","React"],"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","publishConfig":{"access":"public"},"dependencies":{"myst-common":"^1.9.5","unist-builder":"^4.0.0"},"devDependencies":{"@myst-theme/providers":"^1.3.0","tsup":"^8.1.0","cpx":"^1.5.0"},"gitHead":"de1882e12d479ca5969f191f20a10513fc7b1fe6","_id":"@curvenote/any-widget@0.2.4","bugs":{"url":"https://github.com/curvenote/curvenote/issues"},"homepage":"https://github.com/curvenote/curvenote#readme","_nodeVersion":"24.14.1","_npmVersion":"11.14.1","dist":{"integrity":"sha512-bwMkKz9Z7sToKjljogMwhukHPihHtcudGlGeDLNc7KngZWJFqr3YEsvUVqoj8kCfmwmqU0SY6ttnarcfnspFQg==","shasum":"e7517925d898a99dd691df5ffef9758597dcc53a","tarball":"https://registry.npmjs.org/@curvenote/any-widget/-/any-widget-0.2.4.tgz","fileCount":24,"unpackedSize":33265,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@curvenote%2fany-widget@0.2.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCCelz8EI53puuvFpsljjYpCbb2leOYYY2ZuuzwqNKk8QIgB5tXW05TpMLO1pMFTvTwDQQYi8c3C8kI0lEGup/hTGQ="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8fa14c14-6fbb-40ce-b452-3d26d4151186"}},"directories":{},"maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/any-widget_0.2.4_1778787326764_0.3995832120868359"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-01T13:13:22.624Z","modified":"2026-05-14T19:35:27.216Z","0.1.0":"2025-12-01T13:13:22.907Z","0.1.1":"2025-12-03T16:55:03.987Z","0.2.0":"2025-12-05T16:08:05.615Z","0.2.1":"2025-12-15T12:04:08.568Z","0.2.2":"2026-03-05T02:38:07.483Z","0.2.3":"2026-05-07T15:38:05.991Z","0.2.4":"2026-05-14T19:35:26.927Z"},"bugs":{"url":"https://github.com/curvenote/curvenote/issues"},"author":{"name":"Steve Purves","email":"steve@curvenote.com"},"license":"MIT","homepage":"https://github.com/curvenote/curvenote#readme","keywords":["any-widget","Curvenote","MyST Markdown","React"],"repository":{"type":"git","url":"git+https://github.com/curvenote/curvenote.git"},"description":"Extension interface and NodeRenderer following the `any-widget` interfaces","maintainers":[{"name":"fwkoch","email":"franklinwkoch@gmail.com"},{"name":"rowanc1","email":"rowanc1@gmail.com"},{"name":"stevejpurves","email":"stevejpurves@gmail.com"}],"readme":"# @curvenote/any-widget\n\nExtension interface and NodeRenderer following the [`any-widget`](https://github.com/manzt/anywidget) interfaces for embedding interactive widgets in MyST Markdown documents.\n\n## Usage in MyST Markdown projects\n\nThe `any:widget` directive (also available as `any:bundle`) allows you to embed interactive widgets directly in your MyST markdown files. These widgets are ES modules that can be loaded from a URL and initialized with JSON data.\n\n\n\n### Basic Usage\n\n```yaml\n# myst.yml\nproject:\n  plugins:\n    - any-widget.mjs\n```\nIf you are using the Curvenote CLI then you can omit the step above as the directive is already included.\n\nTo include your widget, provide a reachable URL to the JS module, and optional css file.\n\n````markdown\n:::{any:widget} https://example.com/widget.mjs\n:css: https://example.com/widget-styles.css\n:class: border rounded p-4\n{\n  \"value\": 42,\n  \"name\": \"My Widget\"\n}\n:::\n````\n\nOr do the same using the `any:bundle` alias.\n\n### Directive Options\n\n- `class`: Tailwind CSS classes to apply to the container element\n- `css` (or `styles`, legacy): URL to a CSS stylesheet to load for the widget\n- `static`: URL, File path, folder path, or glob pattern for static files to make available to the module\n\n### Example: Counter Widget\n\nThis example demonstrates how to create and embed an interactive counter widget in your MyST markdown, based on the [anywidget counter example](https://anywidget.dev/en/notebooks/counter/).\n\n#### 1. Create the Widget JavaScript File\n\nCreate a file `counter.mjs` that exports a widget module, in this case we are only exporting a `render()` function:\n\n```javascript\n// counter.mjs\nfunction render({ model, el }) {\n  let count = () => model.get(\"value\");\n  let btn = document.createElement(\"button\");\n  btn.classList.add(\"counter-button\");\n  btn.innerHTML = `count is ${count()}`;\n  \n  btn.addEventListener(\"click\", () => {\n    model.set(\"value\", count() + 1);\n    model.save_changes();\n  });\n  \n  model.on(\"change:value\", () => {\n    btn.innerHTML = `count is ${count()}`;\n  });\n  \n  el.appendChild(btn);\n}\n\nexport default { render };\n```\n\n#### 2. Create the CSS File\n\nCreate a file `counter.css` with styles for the widget:\n\n```css\n/* counter.css */\n.counter-button {\n  background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);\n  border: 0;\n  border-radius: 10px;\n  padding: 10px 50px;\n  color: white;\n  font-size: 16px;\n  cursor: pointer;\n  transition: transform 0.1s;\n}\n\n.counter-button:hover {\n  transform: scale(1.05);\n}\n\n.counter-button:active {\n  transform: scale(0.95);\n}\n```\n\n#### 3. Use the Widget in MyST Markdown\n\nIn your MyST markdown file, use the `any:widget` directive:\n\n````markdown\n:css: https://example.com/counter.css\n:class: my-4\n:::{any:widget} https://example.com/counter.mjs\n{\n  \"value\": 0\n}\n:::\n````\n\nThe widget will automatically:\n- Load the JavaScript module from the URL\n- Initialize with the JSON data (`{\"value\": 0}`)\n- Apply the CSS stylesheet\n- Handle user interactions and update the display\n\n#### How the Widget Model Works\n\nThe widget uses the `model` object as the source of truth:\n- `model.get(\"value\")` retrieves the current value\n- not yet implemented\n  - `model.set(\"value\", newValue)` updates the value\n  - `model.on(\"change:value\", callback)` listens for value changes\n  - `model.save_changes()` syncs changes back to the model\n\nThis ensures the widget state stays synchronized whether updates come from user interactions or programmatic changes.\n\n## Usage for developers and theme builders\n\nThis package provides two main entry points for different use cases:\n\n1. **Directive** (Node/CLI context): A MyST directive specification for parsing `any:widget` and `any:bundle` directives in markdown\n2. **React Renderers** (React context): React components for rendering AnyWidget components in the browser\n\n### Installation\n\n```bash\nnpm install @curvenote/any-widget\n```\n\n### Use Case 1: Adding the Directive to a CLI or Custom Build Pipeline\n\nIf you're building a CLI tool or custom build pipeline that processes MyST markdown, you'll want to add the directive to your processing pipeline.\n\n**Import the directive:**\n\n```typescript\nimport { anyWidget } from '@curvenote/any-widget';\nimport type { MystPlugin } from 'myst-common';\n\nconst plugin: MystPlugin = {\n  name: 'My Plugin',\n  directives: [anyWidget],\n  // ... other plugin configuration\n};\n```\n\n**Or use the bundled plugin:**\n\nIf you prefer a pre-bundled version, you can use the plugin bundle:\n\n```typescript\nimport anyWidgetPlugin from '@curvenote/any-widget/dist/plugin/any-widget.mjs';\n\nconst plugin: MystPlugin = {\n  name: 'My Plugin',\n  directives: [anyWidgetPlugin.anyWidget],\n  // ... other plugin configuration\n};\n```\n\nThe directive will parse `any:widget` and `any:bundle` directives in your markdown and convert them into AST nodes that can be rendered.\n\n### Use Case 2: Adding Renderers to a Theme\n\nIf you're building a theme or React application that renders MyST documents, you'll need to add the React renderers to display the widgets.\n\n**For the standard mystmd `{anywidget}` directive**, use [@myst-theme/anywidget](https://github.com/jupyter-book/myst-theme/tree/main/packages/anywidget) and merge its `ANY_RENDERERS` with your theme's default renderers.\n\n**For Curvenote's `any:bundle` / `any:widget` block directive**, use the renderers from this package:\n\n**Import the renderers:**\n\n```typescript\nimport { ANY_RENDERERS } from '@curvenote/any-widget/react';\nimport { Document } from '@myst-theme/providers';\n\nfunction MyDocument({ ast }) {\n  return (\n    <Document \n      ast={ast}\n      renderers={{\n        ...defaultRenderers,\n        ...ANY_RENDERERS\n      }}\n    />\n  );\n}\n```\n\nThe renderers will automatically:\n- Load the ES module from the specified URL\n- Initialize the widget with the provided JSON data\n- Handle CSS stylesheets (with shadow DOM support)\n- Display error messages if the widget fails to load\n\n### TypeScript Types\n\nThe package exports TypeScript types for type safety:\n\n```typescript\nimport type { AnyWidgetDirective } from '@curvenote/any-widget';\n// or\nimport type { AnyWidgetDirective } from '@curvenote/any-widget/react';\n```\n\n### Package Exports\n\nThe package provides the following exports:\n\n- **Main export** (`@curvenote/any-widget`): The directive for Node/CLI usage\n- **React export** (`@curvenote/any-widget/react`): The React renderers for theme usage\n- **Plugin bundle** (`@curvenote/any-widget/dist/plugin/any-widget.mjs`): Pre-bundled directive plugin\n\n## Development\n\n### Prerequisites\n\n- Node.js >= 14\n- npm >= 7\n\n### Setup\n\n```bash\nnpm install\n```\n\n### Build\n\n```bash\nnpm run build\n```\n\nThis will:\n- Compile TypeScript to the `dist` directory (for library exports)\n- Bundle the directive plugin to `dist/plugin/any-widget.mjs`\n\n### Type Checking\n\n```bash\nnpm run compile\n```\n\n### Testing\n\n```bash\nnpm test\n```\n\nOr in watch mode:\n\n```bash\nnpm run test:watch\n```\n\n### Project Structure\n\n```\nsrc/\n  ├── index.ts          # Main entry point (directive exports)\n  ├── directive/         # Directive implementation\n  ├── renderer/          # React renderer implementation\n  └── types.ts           # TypeScript type definitions\n```\n\n### Contributing\n\nThis package is part of the Curvenote monorepo. See the main repository for contribution guidelines.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}