From 7eeae4292c6ff027b2d6390cf14ee58875561295 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 20 May 2022 00:08:50 +0200
Subject: [PATCH] add missing styles + fix demo

---
 packages/react/src/App.jsx                 | 17 ++++++++++++++++-
 packages/react/src/components/MiniRepl.jsx |  1 +
 packages/react/src/components/style.css    |  3 +++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/style.css

diff --git a/packages/react/src/App.jsx b/packages/react/src/App.jsx
index 9bbf56d5..474010b3 100644
--- a/packages/react/src/App.jsx
+++ b/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>
   );
 }
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index cd5e7886..244911ae 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/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';
 
diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
new file mode 100644
index 00000000..191c9f2b
--- /dev/null
+++ b/packages/react/src/components/style.css
@@ -0,0 +1,3 @@
+.cm-editor {
+  background-color: transparent !important;
+}