Publish

- @strudel.cycles/react@0.1.1

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components for strudel",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

packages/react/src/App.jsx

@@ -1,11 +1,26 @@
 import React from 'react';
 import { MiniRepl } from './components/MiniRepl';
 import 'tailwindcss/tailwind.css';
+import { Tone, getDefaultSynth } from '@strudel.cycles/tone';
+import { evalScope } from '@strudel.cycles/eval';
+
+const defaultSynth = getDefaultSynth();
+
+evalScope(
+  Tone,
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/tone'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/midi'),
+  import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+);
 
 function App() {
   return (
     <div>
-      <MiniRepl tune={`"c3"`} />
+      <MiniRepl tune={`"c3"`} defaultSynth={defaultSynth} />
     </div>
   );
 }

packages/react/src/components/MiniRepl.jsx

@@ -5,6 +5,7 @@ import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
 import CodeMirror6 from './CodeMirror6';
 import 'tailwindcss/tailwind.css';
+import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
 

packages/react/src/components/style.css

@@ -0,0 +1,3 @@
+.cm-editor {
+  background-color: transparent !important;
+}