diff --git a/.eslintignore b/.eslintignore
index 30e8a0ff..b7660415 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -22,4 +22,4 @@ vite.config.js
reverbGen.mjs
hydra.mjs
jsdoc-synonyms.js
-packages/hs2js/src/hs2js.mjs
\ No newline at end of file
+packages/hs2js/src/hs2js.mjs
diff --git a/examples/buildless/headless-simple.html b/examples/buildless/headless-simple.html
index 15a56161..61533447 100644
--- a/examples/buildless/headless-simple.html
+++ b/examples/buildless/headless-simple.html
@@ -1,9 +1,31 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/buildless/headless-with-samples.html b/examples/buildless/headless-with-samples.html
index 18b5e379..3ac6d42e 100644
--- a/examples/buildless/headless-with-samples.html
+++ b/examples/buildless/headless-with-samples.html
@@ -1,16 +1,24 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/draw/draw.mjs b/packages/draw/draw.mjs
index cfd2ce75..81123f46 100644
--- a/packages/draw/draw.mjs
+++ b/packages/draw/draw.mjs
@@ -191,7 +191,16 @@ export function getComputedPropertyValue(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
-let theme = {};
+let theme = {
+ background: '#222',
+ foreground: '#75baff',
+ caret: '#ffcc00',
+ selection: 'rgba(128, 203, 196, 0.5)',
+ selectionMatch: '#036dd626',
+ lineHighlight: '#00000050',
+ gutterBackground: 'transparent',
+ gutterForeground: '#8a919966',
+};
export function getTheme() {
return theme;
}
diff --git a/packages/draw/pianoroll.mjs b/packages/draw/pianoroll.mjs
index 1bdf81c4..247213b4 100644
--- a/packages/draw/pianoroll.mjs
+++ b/packages/draw/pianoroll.mjs
@@ -108,7 +108,7 @@ export function pianoroll({
active = getTheme().foreground,
background = 'transparent',
smear = 0,
- playheadColor = 'white',
+ playheadColor = getTheme().foreground,
minMidi = 10,
maxMidi = 90,
autorange = 0,
diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs
index 13d08de6..2cb265c2 100644
--- a/packages/hydra/hydra.mjs
+++ b/packages/hydra/hydra.mjs
@@ -1,5 +1,5 @@
import { getDrawContext } from '@strudel/draw';
-import { controls } from '@strudel/core';
+import { controls, getTime, reify } from '@strudel/core';
let latestOptions;
let hydra;
@@ -27,6 +27,7 @@ export async function initHydra(options = {}) {
hydraConfig.canvas = canvas;
await import(/* @vite-ignore */ src);
+ /* eslint-disable-next-line */
hydra = new Hydra(hydraConfig);
if (feedStrudel) {
const { canvas } = getDrawContext();
@@ -46,4 +47,4 @@ export function clearHydra() {
globalThis.shape = controls.shape;
}
-export const H = (p) => () => p.queryArc(getTime(), getTime())[0].value;
+export const H = (p) => () => reify(p).queryArc(getTime(), getTime())[0].value;
diff --git a/packages/web/README.md b/packages/web/README.md
index 8b567729..659c8271 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -72,7 +72,13 @@ document.getElementById('play').addEventListener('stop',
There is a tiny difference between the [Strudel REPL](https://strudel.cc/) and `@strudel/web`.
In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns.
In `@strudel/web`, it does not matter which types of quotes you're using.
-There will probably be an escapte hatch for that in the future.
+
+This difference means that you cannot call pattern methods on raw strings, for example `"1 2 3".slow(2)`.
+To make it work you can either:
+
+1. Use the `evaluate` function, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation.
+2. wrap the string with `m`: `m("1 2 3").slow(2)`
+3. wrap the string in a control function: `n("1 2 3").slow(2)` depending on your context.
## More Examples
diff --git a/packages/web/web.mjs b/packages/web/web.mjs
index 660acf26..2c07d2a6 100644
--- a/packages/web/web.mjs
+++ b/packages/web/web.mjs
@@ -5,7 +5,7 @@ export * from '@strudel/transpiler';
export * from '@strudel/mini';
export * from '@strudel/tonal';
export * from '@strudel/webaudio';
-import { Pattern, evalScope } from '@strudel/core';
+import { Pattern, evalScope, setTime } from '@strudel/core';
import { initAudioOnFirstClick, registerSynthSounds, webaudioScheduler } from '@strudel/webaudio';
// import { registerSoundfonts } from '@strudel/soundfonts';
import { evaluate as _evaluate } from '@strudel/transpiler';
@@ -33,11 +33,14 @@ export function initStrudel(options = {}) {
miniAllStrings();
const { prebake, ...schedulerOptions } = options;
+ scheduler = webaudioScheduler(schedulerOptions);
initDone = (async () => {
await defaultPrebake();
await prebake?.();
+ return scheduler;
})();
- scheduler = webaudioScheduler(schedulerOptions);
+ setTime(() => scheduler.now());
+ return initDone;
}
window.initStrudel = initStrudel;