Merge remote-tracking branch 'origin/main' into fix-array-args

packages/core/hap.mjs

@@ -126,6 +126,19 @@ export class Hap {
   setContext(context) {
     return new Hap(this.whole, this.part, this.value, context);
   }
+
+  ensureObjectValue() {
+    /* if (isNote(hap.value)) {
+      // supports primitive hap values that look like notes
+      hap.value = { note: hap.value };
+    } */
+    if (typeof this.value !== 'object') {
+      throw new Error(
+        `expected hap.value to be an object, but got "${this.value}". Hint: append .note() or .s() to the end`,
+        'error',
+      );
+    }
+  }
 }
 
 export default Hap;

packages/core/pattern.mjs

@@ -1595,11 +1595,11 @@ export const trigzero = methodToFunction('trigzero');
  * @noAutocomplete
  *
  */
-export function register(name, func) {
+export function register(name, func, patternify = true) {
   if (Array.isArray(name)) {
     const result = {};
     for (const name_item of name) {
-      result[name_item] = register(name_item, func);
+      result[name_item] = register(name_item, func, patternify);
     }
     return result;
   }
@@ -1607,29 +1607,40 @@ export function register(name, func) {
 
   registerMethod(name);
 
-  const pfunc = function (...args) {
-    args = args.map(reify);
-    const pat = args[args.length - 1];
-    if (arity === 1) {
-      return func(pat);
-    }
-    const [left, ...right] = args.slice(0, -1);
-    let mapFn = (...args) => {
-      // make sure to call func with the correct argument count
-      // args.length is expected to be <= arity-1
-      // so we set undefined args explicitly undefined
-      Array(arity - 1)
-        .fill()
-        .map((_, i) => args[i] ?? undefined);
-      return func(...args, pat);
+  var pfunc;
+
+  if (patternify) {
+    pfunc = function (...args) {
+      args = args.map(reify);
+      const pat = args[args.length - 1];
+      if (arity === 1) {
+        return func(pat);
+      }
+      const [left, ...right] = args.slice(0, -1);
+      let mapFn = (...args) => {
+        // make sure to call func with the correct argument count
+        // args.length is expected to be <= arity-1
+        // so we set undefined args explicitly undefined
+        Array(arity - 1)
+          .fill()
+          .map((_, i) => args[i] ?? undefined);
+        return func(...args, pat);
+      };
+      mapFn = curryPattern(mapFn, arity - 1);
+
+      const app = function (acc, p, i) {
+        return acc.appLeft(p);
+      };
+      const start = left.fmap(mapFn);
+
+      return right.reduce(app, start).innerJoin();
     };
-    mapFn = curryPattern(mapFn, arity - 1);
-
-    const app = (acc, p) => acc.appLeft(p);
-    const start = left.fmap(mapFn);
-
-    return right.reduce(app, start).innerJoin();
-  };
+  } else {
+    pfunc = function (...args) {
+      args = args.map(reify);
+      return func(...args);
+    };
+  }
 
   Pattern.prototype[name] = function (...args) {
     // For methods that take a single argument (plus 'this'), allow
@@ -2419,6 +2430,59 @@ const _loopAt = function (factor, pat, cps = 1) {
     .slow(factor);
 };
 
+/**
+ * Chops samples into the given number of slices, triggering those slices with a given pattern of slice numbers.
+ * @name slice
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * await samples('github:tidalcycles/Dirt-Samples/master')
+ * s("breaks165").slice(8, "0 1 <2 2*2> 3 [4 0] 5 6 7".every(3, rev)).slow(1.5)
+ */
+const slice = register(
+  'slice',
+  function (npat, ipat, opat) {
+    return npat.innerBind((n) =>
+      ipat.outerBind((i) =>
+        opat.outerBind((o) => {
+          // If it's not an object, assume it's a string and make it a 's' control parameter
+          o = o instanceof Object ? o : { s: o };
+          // Remember we must stay pure and avoid editing the object directly
+          const toAdd = { begin: i / n, end: (i + 1) / n, _slices: n };
+          return pure({ ...toAdd, ...o });
+        }),
+      ),
+    );
+  },
+  false, // turns off auto-patternification
+);
+
+/**
+ * Works the same as slice, but changes the playback speed of each slice to match the duration of its step.
+ * @name splice
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * await samples('github:tidalcycles/Dirt-Samples/master')
+ * s("breaks165").splice(8,  "0 1 [2 3 0]@2 3 0@2 7").hurry(0.65)
+ */
+const splice = register(
+  'splice',
+  function (npat, ipat, opat) {
+    const sliced = slice(npat, ipat, opat);
+    return sliced.withHap(function (hap) {
+      return hap.withValue((v) => ({
+        ...{
+          speed: (1 / v._slices / hap.whole.duration) * (v.speed || 1),
+          unit: 'c',
+        },
+        ...v,
+      }));
+    });
+  },
+  false, // turns off auto-patternification
+);
+
 const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
   return _loopAt(factor, pat, 1);
 });

packages/core/test/pattern.test.mjs

@@ -47,6 +47,7 @@ import {
   run,
   hitch,
   set,
+  begin,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -986,4 +987,30 @@ describe('Pattern', () => {
       sameFirst(n(0, 1).weave(2, s('bd', silence), s(silence, 'sd')), sequence(s('bd').n(0), s('sd').n(1)));
     });
   });
+  describe('slice', () => {
+    it('Can slice a sample', () => {
+      sameFirst(
+        s('break').slice(4, sequence(0, 1, 2, 3)),
+        sequence(
+          { begin: 0, end: 0.25, s: 'break', _slices: 4 },
+          { begin: 0.25, end: 0.5, s: 'break', _slices: 4 },
+          { begin: 0.5, end: 0.75, s: 'break', _slices: 4 },
+          { begin: 0.75, end: 1, s: 'break', _slices: 4 },
+        ),
+      );
+    });
+  });
+  describe('splice', () => {
+    it('Can splice a sample', () => {
+      sameFirst(
+        s('break').splice(4, sequence(0, 1, 2, 3)),
+        sequence(
+          { begin: 0, end: 0.25, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.25, end: 0.5, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.5, end: 0.75, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.75, end: 1, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+        ),
+      );
+    });
+  });
 });

packages/csound/index.mjs

@@ -28,9 +28,7 @@ export const csound = register('csound', (instrument, pat) => {
       logger('[csound] not loaded yet', 'warning');
       return;
     }
-    if (typeof hap.value !== 'object') {
-      throw new Error('csound only support objects as hap values');
-    }
+    hap.ensureObjectValue();
     let { gain = 0.8 } = hap.value;
     gain *= 0.2;
 

packages/midi/midi.mjs

@@ -5,8 +5,9 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import * as _WebMidi from 'webmidi';
-import { Pattern, isPattern, isNote, getPlayableNoteValue, logger } from '@strudel.cycles/core';
+import { Pattern, isPattern, logger } from '@strudel.cycles/core';
 import { getAudioContext } from '@strudel.cycles/webaudio';
+import { toMidi } from '@strudel.cycles/core';
 
 // if you use WebMidi from outside of this package, make sure to import that instance:
 export const { WebMidi } = _WebMidi;
@@ -63,7 +64,7 @@ function getDevice(output, outputs) {
 }
 
 // Pattern.prototype.midi = function (output: string | number, channel = 1) {
-Pattern.prototype.midi = function (output, channel = 1) {
+Pattern.prototype.midi = function (output) {
   if (!supportsMidi()) {
     throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
   }
@@ -90,11 +91,6 @@ Pattern.prototype.midi = function (output, channel = 1) {
     );
   }
   return this.onTrigger((time, hap) => {
-    let note = getPlayableNoteValue(hap);
-    const velocity = hap.context?.velocity ?? 0.9;
-    if (!isNote(note)) {
-      throw new Error('not a note: ' + note);
-    }
     if (!midiReady) {
       return;
     }
@@ -106,15 +102,34 @@ Pattern.prototype.midi = function (output, channel = 1) {
           .join(' | ')}`,
       );
     }
-    // console.log('midi', value, output);
+    hap.ensureObjectValue();
+
+    // calculate time
     const timingOffset = WebMidi.time - getAudioContext().currentTime * 1000;
     time = time * 1000 + timingOffset;
-    // const inMs = '+' + (time - Tone.getContext().currentTime) * 1000;
-    // await enableWebMidi()
-    device.playNote(note, channel, {
-      time,
-      duration: hap.duration.valueOf() * 1000 - 5,
-      attack: velocity,
-    });
+
+    // destructure value
+    const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value;
+    const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
+    const duration = hap.duration.valueOf() * 1000 - 5;
+
+    if (note) {
+      const midiNumber = toMidi(note);
+      device.playNote(midiNumber, midichan, {
+        time,
+        duration,
+        attack: velocity,
+      });
+    }
+    if (ccv && ccn) {
+      if (typeof ccv !== 'number' || ccv < 0 || ccv > 1) {
+        throw new Error('expected ccv to be a number between 0 and 1');
+      }
+      if (!['string', 'number'].includes(typeof ccn)) {
+        throw new Error('expected ccn to be a number or a string');
+      }
+      const scaled = Math.round(ccv * 127);
+      device.sendControlChange(ccn, scaled, midichan, { time });
+    }
   });
 };

packages/osc/osc.mjs

@@ -45,9 +45,10 @@ let startedAt = -1;
  * @memberof Pattern
  * @returns Pattern
  */
-Pattern.prototype.osc = async function () {
-  const osc = await connect();
-  return this.onTrigger((time, hap, currentTime, cps = 1) => {
+Pattern.prototype.osc = function () {
+  return this.onTrigger(async (time, hap, currentTime, cps = 1) => {
+    hap.ensureObjectValue();
+    const osc = await connect();
     const cycle = hap.wholeOrPart().begin.valueOf();
     const delta = hap.duration.valueOf();
     // time should be audio time of onset

packages/react/package.json

@@ -37,6 +37,8 @@
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.3",
     "@lezer/highlight": "^1.1.3",
+    "@replit/codemirror-emacs": "^6.0.0",
+    "@replit/codemirror-vim": "^6.0.6",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",

packages/react/src/components/CodeMirror6.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
@@ -8,6 +8,8 @@ import './style.css';
 import { useCallback } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
 import { strudelAutocomplete } from './Autocomplete';
+import { vim } from '@replit/codemirror-vim';
+import { emacs } from '@replit/codemirror-emacs';
 
 export const setFlash = StateEffect.define();
 const flashField = StateField.define({
@@ -56,15 +58,15 @@ const highlightField = StateField.define({
             haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || e.value.color || '#FFCA28';
+                  // const color = hap.context.color || e.value.color || '#FFCA28';
                   let from = tr.newDoc.line(start.line).from + start.column;
                   let to = tr.newDoc.line(end.line).from + end.column;
                   const l = tr.newDoc.length;
                   if (from > l || to > l) {
                     return; // dont mark outside of range, as it will throw an error
                   }
-                  // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
-                  const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
+                  //const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
+                  const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
                   return mark.range(from, to);
                 }),
               )
@@ -82,7 +84,7 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-const extensions = [
+const staticExtensions = [
   javascript(),
   highlightField,
   flashField,
@@ -97,6 +99,9 @@ export default function CodeMirror({
   onViewChanged,
   onSelectionChange,
   theme,
+  keybindings,
+  fontSize = 18,
+  fontFamily = 'monospace',
   options,
   editorDidMount,
 }) {
@@ -120,8 +125,18 @@ export default function CodeMirror({
     },
     [onSelectionChange],
   );
+  const extensions = useMemo(() => {
+    let bindings = {
+      vim,
+      emacs,
+    };
+    if (bindings[keybindings]) {
+      return [...staticExtensions, bindings[keybindings]()];
+    }
+    return staticExtensions;
+  }, [keybindings]);
   return (
-    <>
+    <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
         value={value}
         theme={theme || strudelTheme}
@@ -130,7 +145,7 @@ export default function CodeMirror({
         onUpdate={handleOnUpdate}
         extensions={extensions}
       />
-    </>
+    </div>
   );
 }
 

packages/react/src/components/MiniRepl.jsx

@@ -23,7 +23,6 @@ export function MiniRepl({
   punchcard,
   canvasHeight = 200,
   theme,
-  highlightColor,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -72,7 +71,6 @@ export function MiniRepl({
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: highlightColor,
   });
 
   // keyboard shortcuts

packages/react/src/components/style.css

@@ -2,11 +2,11 @@
   background-color: transparent !important;
   height: 100%;
   z-index: 11;
-  font-size: 18px;
 }
 
 .cm-theme {
   width: 100%;
+  height: 100%;
 }
 
 .cm-theme-light {

packages/react/src/hooks/useHighlighting.mjs

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { setHighlights } from '../components/CodeMirror6';
 
-function useHighlighting({ view, pattern, active, getTime, color }) {
+function useHighlighting({ view, pattern, active, getTime }) {
   const highlights = useRef([]);
   const lastEnd = useRef(0);
   useEffect(() => {
@@ -19,7 +19,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
             highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
             const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
             highlights.current = highlights.current.concat(haps); // add potential new onsets
-            view.dispatch({ effects: setHighlights.of({ haps: highlights.current, color }) }); // highlight all still active + new active haps
+            view.dispatch({ effects: setHighlights.of({ haps: highlights.current }) }); // highlight all still active + new active haps
           } catch (err) {
             view.dispatch({ effects: setHighlights.of({ haps: [] }) });
           }
@@ -33,7 +33,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
         view.dispatch({ effects: setHighlights.of({ haps: [] }) });
       }
     }
-  }, [pattern, active, view, color]);
+  }, [pattern, active, view]);
 }
 
 export default useHighlighting;

packages/react/src/hooks/useStrudel.mjs

@@ -10,7 +10,6 @@ function useStrudel({
   getTime,
   evalOnMount = false,
   initialCode = '',
-  autolink = false,
   beforeEval,
   afterEval,
   editPattern,
@@ -51,15 +50,13 @@ function useStrudel({
           setCode(code);
           beforeEval?.();
         },
-        afterEval: ({ pattern: _pattern, code }) => {
+        afterEval: (res) => {
+          const { pattern: _pattern, code } = res;
           setActiveCode(code);
           setPattern(_pattern);
           setEvalError();
           setSchedulerError();
-          if (autolink) {
-            window.location.hash = '#' + encodeURIComponent(btoa(code));
-          }
-          afterEval?.();
+          afterEval?.(res);
         },
         onToggle: (v) => {
           setStarted(v);

packages/react/src/themes/algoboy.js

@@ -0,0 +1,39 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: '#9bbc0f',
+  foreground: '#0f380f', // whats that?
+  caret: '#0f380f',
+  selection: '#306230',
+  selectionMatch: '#ffffff26',
+  lineHighlight: '#8bac0f',
+  lineBackground: '#9bbc0f50',
+  //lineBackground: 'transparent',
+  gutterBackground: 'transparent',
+  gutterForeground: '#0f380f',
+  light: true,
+};
+export default createTheme({
+  theme: 'light',
+  settings,
+  styles: [
+    { tag: t.keyword, color: '#0f380f' },
+    { tag: t.operator, color: '#0f380f' },
+    { tag: t.special(t.variableName), color: '#0f380f' },
+    { tag: t.typeName, color: '#0f380f' },
+    { tag: t.atom, color: '#0f380f' },
+    { tag: t.number, color: '#0f380f' },
+    { tag: t.definition(t.variableName), color: '#0f380f' },
+    { tag: t.string, color: '#0f380f' },
+    { tag: t.special(t.string), color: '#0f380f' },
+    { tag: t.comment, color: '#0f380f' },
+    { tag: t.variableName, color: '#0f380f' },
+    { tag: t.tagName, color: '#0f380f' },
+    { tag: t.bracket, color: '#0f380f' },
+    { tag: t.meta, color: '#0f380f' },
+    { tag: t.attributeName, color: '#0f380f' },
+    { tag: t.propertyName, color: '#0f380f' },
+    { tag: t.className, color: '#0f380f' },
+    { tag: t.invalid, color: '#0f380f' },
+  ],
+});

packages/react/src/themes/blackscreen.js

@@ -0,0 +1,37 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'black',
+  foreground: 'white', // whats that?
+  caret: 'white',
+  selection: '#ffffff20',
+  selectionMatch: '#036dd626',
+  lineHighlight: '#ffffff10',
+  lineBackground: '#00000050',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+};
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+  ],
+});

packages/react/src/themes/bluescreen.js

@@ -0,0 +1,40 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: '#051DB5',
+  lineBackground: '#051DB550',
+  foreground: 'white', // whats that?
+  caret: 'white',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#036dd626',
+  // lineHighlight: '#8a91991a', // original
+  lineHighlight: '#00000050',
+  gutterBackground: 'transparent',
+  // gutterForeground: '#8a919966',
+  gutterForeground: '#8a919966',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+  ],
+});

packages/react/src/themes/terminal.js

@@ -0,0 +1,36 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'black',
+  foreground: '#41FF00', // whats that?
+  caret: '#41FF00',
+  selection: '#ffffff20',
+  selectionMatch: '#036dd626',
+  lineHighlight: '#ffffff10',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+};
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: '#41FF00' },
+    { tag: t.operator, color: '#41FF00' },
+    { tag: t.special(t.variableName), color: '#41FF00' },
+    { tag: t.typeName, color: '#41FF00' },
+    { tag: t.atom, color: '#41FF00' },
+    { tag: t.number, color: '#41FF00' },
+    { tag: t.definition(t.variableName), color: '#41FF00' },
+    { tag: t.string, color: '#41FF00' },
+    { tag: t.special(t.string), color: '#41FF00' },
+    { tag: t.comment, color: '#41FF00' },
+    { tag: t.variableName, color: '#41FF00' },
+    { tag: t.tagName, color: '#41FF00' },
+    { tag: t.bracket, color: '#41FF00' },
+    { tag: t.meta, color: '#41FF00' },
+    { tag: t.attributeName, color: '#41FF00' },
+    { tag: t.propertyName, color: '#41FF00' },
+    { tag: t.className, color: '#41FF00' },
+    { tag: t.invalid, color: '#41FF00' },
+  ],
+});

packages/react/src/themes/whitescreen.js

@@ -0,0 +1,38 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'white',
+  foreground: 'black', // whats that?
+  caret: 'black',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#ffffff26',
+  lineHighlight: '#cccccc50',
+  lineBackground: '#ffffff50',
+  gutterBackground: 'transparent',
+  gutterForeground: 'black',
+  light: true,
+};
+export default createTheme({
+  theme: 'light',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'black' },
+    { tag: t.operator, color: 'black' },
+    { tag: t.special(t.variableName), color: 'black' },
+    { tag: t.typeName, color: 'black' },
+    { tag: t.atom, color: 'black' },
+    { tag: t.number, color: 'black' },
+    { tag: t.definition(t.variableName), color: 'black' },
+    { tag: t.string, color: 'black' },
+    { tag: t.special(t.string), color: 'black' },
+    { tag: t.comment, color: 'black' },
+    { tag: t.variableName, color: 'black' },
+    { tag: t.tagName, color: 'black' },
+    { tag: t.bracket, color: 'black' },
+    { tag: t.meta, color: 'black' },
+    { tag: t.attributeName, color: 'black' },
+    { tag: t.propertyName, color: 'black' },
+    { tag: t.className, color: 'black' },
+    { tag: t.invalid, color: 'black' },
+  ],
+});

packages/webaudio/webaudio.mjs

@@ -193,21 +193,9 @@ function effectSend(input, effect, wet) {
 // export const webaudioOutput = async (t, hap, ct, cps) => {
 export const webaudioOutput = async (hap, deadline, hapDuration) => {
   const ac = getAudioContext();
-  /* if (isNote(hap.value)) {
-      // supports primitive hap values that look like notes
-      hap.value = { note: hap.value };
-    } */
-  if (typeof hap.value !== 'object') {
-    logger(
-      `hap.value "${hap.value}" is not supported by webaudio output. Hint: append .note() or .s() to the end`,
-      'error',
-    );
-    /*     throw new Error(
-      `hap.value "${hap.value}"" is not supported by webaudio output. Hint: append .note() or .s() to the end`,
-    ); */
-    return;
-  }
-  // calculate correct time (tone.js workaround)
+  hap.ensureObjectValue();
+
+  // calculate absolute time
   let t = ac.currentTime + deadline;
   // destructure value
   let {