- add claviature flag to minirepl

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

website/src/components/Claviature.jsx

@@ -0,0 +1,24 @@
+import { getClaviature } from 'claviature';
+import React from 'react';
+
+export default function Claviature({ options, onClick, onMouseDown, onMouseUp, onMouseLeave }) {
+  const svg = getClaviature({
+    options,
+    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+  });
+  return (
+    <svg {...svg.attributes}>
+      {svg.children.map((el, i) => {
+        const TagName = el.name;
+        return (
+          <TagName key={`${el.name}-${i}`} {...el.attributes}>
+            {el.value}
+          </TagName>
+        );
+      })}
+    </svg>
+  );
+}

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>

website/src/repl/Repl.jsx

@@ -157,7 +157,7 @@ export function Repl({ embedded = false }) {
             e.preventDefault();
             flash(view);
             await activateCode();
-          } else if (e.key === '.') {
+          } else if (e.key === '.' || e.keyCode === 'Period') {
             stop();
             e.preventDefault();
           }