- add claviature flag to minirepl

- bring back option+dot on macos
- consume more editor settings in minirepl

website/src/docs/MiniRepl.jsx

@@ -1,10 +1,11 @@
-import { evalScope, controls } from '@strudel.cycles/core';
+import { evalScope, controls, noteToMidi } from '@strudel.cycles/core';
 import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
 import { useEffect, useState } from 'react';
 import { prebake } from '../repl/prebake';
 import { themes, settings } from '../repl/themes.mjs';
 import './MiniRepl.css';
 import { useSettings } from '../settings.mjs';
+import Claviature from '@components/Claviature';
 
 let modules;
 if (typeof window !== 'undefined') {
@@ -27,9 +28,19 @@ if (typeof window !== 'undefined') {
   prebake();
 }
 
-export function MiniRepl({ tune, drawTime, punchcard, span = [0, 4], canvasHeight = 100, hideHeader }) {
+export function MiniRepl({
+  tune,
+  drawTime,
+  punchcard,
+  span = [0, 4],
+  canvasHeight = 100,
+  hideHeader,
+  claviature,
+  claviatureLabels,
+}) {
   const [Repl, setRepl] = useState();
-  const { theme } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+  const [activeNotes, setActiveNotes] = useState([]);
   useEffect(() => {
     // we have to load this package on the client
     // because codemirror throws an error on the server
@@ -42,13 +53,35 @@ export function MiniRepl({ tune, drawTime, punchcard, span = [0, 4], canvasHeigh
       <Repl
         tune={tune}
         hideOutsideView={true}
-        drawTime={drawTime}
+        drawTime={claviature ? [0, 0] : drawTime}
         punchcard={punchcard}
         span={span}
         canvasHeight={canvasHeight}
         theme={themes[theme]}
         hideHeader={hideHeader}
+        keybindings={keybindings}
+        onPaint={
+          claviature
+            ? (ctx, time, haps, drawTime) => {
+                const active = haps
+                  .map((hap) => hap.value.note)
+                  .filter(Boolean)
+                  .map((n) => (typeof n === 'string' ? noteToMidi(n) : n));
+                setActiveNotes(active);
+              }
+            : undefined
+        }
       />
+      {claviature && (
+        <Claviature
+          options={{
+            range: ['C2', 'C6'],
+            scaleY: 0.75,
+            colorize: [{ keys: activeNotes, color: 'steelblue' }],
+            labels: claviatureLabels || {},
+          }}
+        />
+      )}
     </div>
   ) : (
     <pre>{tune}</pre>