support logs in mini repl

+ pass hap to logger
+ add editPattern hook to repl + useStrudel
+ do not throw when webaudio gets plain values

packages/core/pattern.mjs

@@ -776,8 +776,10 @@ export class Pattern {
     );
   }
 
-  log(func = (_, hap) => `[hap] ${hap.showWhole(true)}`) {
+  log(func = (_, hap) => `[hap] ${hap.showWhole(true)}`, getData = (_, hap) => ({ hap })) {
-    return this.onTrigger((...args) => logger(func(...args)), false);
+    return this.onTrigger((...args) => {
+      logger(func(...args), undefined, getData(...args));
+    }, false);
   }
 
   logValues(func = id) {
@@ -1045,7 +1047,12 @@ Pattern.prototype.factories = {
 
 // Elemental patterns
 
-// Nothing
+/**
+ * Does absolutely nothing..
+ * @name silence
+ * @example
+ * silence // "~"
+ */
 export const silence = new Pattern(() => []);
 
 /** A discrete value that repeats once per cycle.
@@ -1372,7 +1379,11 @@ export const round = register('round', function (pat) {
  * Assumes a numerical pattern. Returns a new pattern with all values set to
  * their mathematical floor. E.g. `3.7` replaced with to `3`, and `-4.2`
  * replaced with `-5`.
+ * @name floor
+ * @memberof Pattern
  * @returns Pattern
+ * @example
+ * "42 42.1 42.5 43".floor().note()
  */
 export const floor = register('floor', function (pat) {
   return pat.asNumber().fmap((v) => Math.floor(v));
@@ -1382,7 +1393,11 @@ export const floor = register('floor', function (pat) {
  * Assumes a numerical pattern. Returns a new pattern with all values set to
  * their mathematical ceiling. E.g. `3.2` replaced with `4`, and `-4.2`
  * replaced with `-4`.
+ * @name ceil
+ * @memberof Pattern
  * @returns Pattern
+ * @example
+ * "42 42.1 42.5 43".ceil().note()
  */
 export const ceil = register('ceil', function (pat) {
   return pat.asNumber().fmap((v) => Math.ceil(v));

packages/core/repl.mjs

@@ -12,6 +12,7 @@ export function repl({
   afterEval,
   getTime,
   transpiler,
+  editPattern,
   onToggle,
 }) {
   const scheduler = new Cyclist({
@@ -41,8 +42,10 @@ export function repl({
     }
     try {
       beforeEval?.({ code });
-      const { pattern } = await _evaluate(code, transpiler);
+      let { pattern } = await _evaluate(code, transpiler);
+
       logger(`[eval] code updated`);
+      pattern = editPattern?.(pattern) || pattern;
       scheduler.setPattern(pattern, autostart);
       afterEval?.({ code, pattern });
       return pattern;

packages/react/dist/index.es.js

@@ -1,15 +1,15 @@
-import i, { useCallback as N, useRef as E, useEffect as F, useMemo as V, useState as _, useLayoutEffect as U } from "react";
+import l, { useCallback as N, useRef as k, useEffect as _, useMemo as K, useState as w, useLayoutEffect as G } from "react";
-import Y from "@uiw/react-codemirror";
+import Z from "@uiw/react-codemirror";
-import { Decoration as y, EditorView as W } from "@codemirror/view";
+import { Decoration as y, EditorView as J } from "@codemirror/view";
-import { StateEffect as $, StateField as G } from "@codemirror/state";
+import { StateEffect as Q, StateField as X } from "@codemirror/state";
-import { javascript as Z } from "@codemirror/lang-javascript";
+import { javascript as ee } from "@codemirror/lang-javascript";
 import { tags as s } from "@lezer/highlight";
-import { createTheme as ee } from "@uiw/codemirror-themes";
+import { createTheme as te } from "@uiw/codemirror-themes";
-import { repl as te, pianoroll as re } from "@strudel.cycles/core";
+import { repl as re, logger as ne, pianoroll as oe } from "@strudel.cycles/core";
-import { webaudioOutput as oe, getAudioContext as ne } from "@strudel.cycles/webaudio";
+import { webaudioOutput as ae, getAudioContext as ce } from "@strudel.cycles/webaudio";
-import { useInView as ae } from "react-hook-inview";
+import { useInView as se } from "react-hook-inview";
-import { transpiler as se } from "@strudel.cycles/transpiler";
+import { transpiler as ie } from "@strudel.cycles/transpiler";
-const ce = ee({
+const le = te({
   theme: "dark",
   settings: {
     background: "#222",
@@ -42,14 +42,14 @@ const ce = ee({
     { tag: s.invalid, color: "#ffffff" }
   ]
 });
-const B = $.define(), ie = G.define({
+const j = Q.define(), ue = X.define({
   create() {
     return y.none;
   },
   update(e, r) {
     try {
       for (let t of r.effects)
-        if (t.is(B))
+        if (t.is(j))
           if (t.value) {
             const a = y.mark({ attributes: { style: "background-color: #FFCA2880" } });
             e = y.set([a.range(0, r.newDoc.length)]);
@@ -60,25 +60,25 @@ const B = $.define(), ie = G.define({
       return console.warn("flash error", t), e;
     }
   },
-  provide: (e) => W.decorations.from(e)
+  provide: (e) => J.decorations.from(e)
-}), le = (e) => {
+}), de = (e) => {
-  e.dispatch({ effects: B.of(!0) }), setTimeout(() => {
+  e.dispatch({ effects: j.of(!0) }), setTimeout(() => {
-    e.dispatch({ effects: B.of(!1) });
+    e.dispatch({ effects: j.of(!1) });
   }, 200);
-}, H = $.define(), ue = G.define({
+}, z = Q.define(), fe = X.define({
   create() {
     return y.none;
   },
   update(e, r) {
     try {
       for (let t of r.effects)
-        if (t.is(H)) {
+        if (t.is(z)) {
           const a = t.value.map(
-            (n) => (n.context.locations || []).map(({ start: c, end: l }) => {
+            (o) => (o.context.locations || []).map(({ start: i, end: u }) => {
-              const d = n.context.color || "#FFCA28";
+              const m = o.context.color || "#FFCA28";
-              let o = r.newDoc.line(c.line).from + c.column, u = r.newDoc.line(l.line).from + l.column;
+              let n = r.newDoc.line(i.line).from + i.column, d = r.newDoc.line(u.line).from + u.column;
-              const f = r.newDoc.length;
+              const v = r.newDoc.length;
-              return o > f || u > f ? void 0 : y.mark({ attributes: { style: `outline: 1.5px solid ${d};` } }).range(o, u);
+              return n > v || d > v ? void 0 : y.mark({ attributes: { style: `outline: 1.5px solid ${m};` } }).range(n, d);
             })
           ).flat().filter(Boolean) || [];
           e = y.set(a, !0);
@@ -88,291 +88,314 @@ const B = $.define(), ie = G.define({
       return y.set([]);
     }
   },
-  provide: (e) => W.decorations.from(e)
+  provide: (e) => J.decorations.from(e)
-}), de = [Z(), ce, ue, ie];
+}), me = [ee(), le, fe, ue];
-function fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: a, options: n, editorDidMount: c }) {
+function ge({ value: e, onChange: r, onViewChanged: t, onSelectionChange: a, options: o, editorDidMount: i }) {
-  const l = N(
+  const u = N(
-    (u) => {
+    (d) => {
-      r?.(u);
+      r?.(d);
     },
     [r]
-  ), d = N(
+  ), m = N(
-    (u) => {
+    (d) => {
-      t?.(u);
+      t?.(d);
     },
     [t]
-  ), o = N(
+  ), n = N(
-    (u) => {
+    (d) => {
-      u.selectionSet && a && a?.(u.state.selection);
+      d.selectionSet && a && a?.(d.state.selection);
     },
     [a]
   );
-  return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(Y, {
+  return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Z, {
     value: e,
-    onChange: l,
+    onChange: u,
-    onCreateEditor: d,
+    onCreateEditor: m,
-    onUpdate: o,
+    onUpdate: n,
-    extensions: de
+    extensions: me
   }));
 }
-function j(...e) {
+function W(...e) {
   return e.filter(Boolean).join(" ");
 }
-function me({ view: e, pattern: r, active: t, getTime: a }) {
+function pe({ view: e, pattern: r, active: t, getTime: a }) {
-  const n = E([]), c = E();
+  const o = k([]), i = k();
-  F(() => {
+  _(() => {
     if (e)
       if (r && t) {
-        let l = requestAnimationFrame(function d() {
+        let u = requestAnimationFrame(function m() {
           try {
-            const o = a(), f = [Math.max(c.current || o, o - 1 / 10, 0), o + 1 / 60];
+            const n = a(), v = [Math.max(i.current || n, n - 1 / 10, 0), n + 1 / 60];
-            c.current = f[1], n.current = n.current.filter((v) => v.whole.end > o);
+            i.current = v[1], o.current = o.current.filter((p) => p.whole.end > n);
-            const m = r.queryArc(...f).filter((v) => v.hasOnset());
+            const h = r.queryArc(...v).filter((p) => p.hasOnset());
-            n.current = n.current.concat(m), e.dispatch({ effects: H.of(n.current) });
+            o.current = o.current.concat(h), e.dispatch({ effects: z.of(o.current) });
           } catch {
-            e.dispatch({ effects: H.of([]) });
+            e.dispatch({ effects: z.of([]) });
           }
-          l = requestAnimationFrame(d);
+          u = requestAnimationFrame(m);
         });
         return () => {
-          cancelAnimationFrame(l);
+          cancelAnimationFrame(u);
         };
       } else
-        n.current = [], e.dispatch({ effects: H.of([]) });
+        o.current = [], e.dispatch({ effects: z.of([]) });
   }, [r, t, e]);
 }
-function ge(e, r = !1) {
+function he(e, r = !1) {
-  const t = E(), a = E(), n = (d) => {
+  const t = k(), a = k(), o = (m) => {
     if (a.current !== void 0) {
-      const o = d - a.current;
+      const n = m - a.current;
-      e(d, o);
+      e(m, n);
     }
-    a.current = d, t.current = requestAnimationFrame(n);
+    a.current = m, t.current = requestAnimationFrame(o);
-  }, c = () => {
+  }, i = () => {
-    t.current = requestAnimationFrame(n);
+    t.current = requestAnimationFrame(o);
-  }, l = () => {
+  }, u = () => {
     t.current && cancelAnimationFrame(t.current), delete t.current;
   };
-  return F(() => {
+  return _(() => {
-    t.current && (l(), c());
+    t.current && (u(), i());
-  }, [e]), F(() => (r && c(), l), []), {
+  }, [e]), _(() => (r && i(), u), []), {
-    start: c,
+    start: i,
-    stop: l
+    stop: u
   };
 }
-function pe({ pattern: e, started: r, getTime: t, onDraw: a }) {
+function ve({ pattern: e, started: r, getTime: t, onDraw: a }) {
-  let n = E([]), c = E(null);
+  let o = k([]), i = k(null);
-  const { start: l, stop: d } = ge(
+  const { start: u, stop: m } = he(
     N(() => {
-      const o = t();
+      const n = t();
-      if (c.current === null) {
+      if (i.current === null) {
-        c.current = o;
+        i.current = n;
         return;
       }
-      const u = e.queryArc(Math.max(c.current, o - 1 / 10), o), f = 4;
+      const d = e.queryArc(Math.max(i.current, n - 1 / 10), n), v = 4;
-      c.current = o, n.current = (n.current || []).filter((m) => m.whole.end > o - f).concat(u.filter((m) => m.hasOnset())), a(o, n.current);
+      i.current = n, o.current = (o.current || []).filter((h) => h.whole.end > n - v).concat(d.filter((h) => h.hasOnset())), a(n, o.current);
     }, [e])
   );
-  F(() => {
+  _(() => {
-    r ? l() : (n.current = [], d());
+    r ? u() : (o.current = [], m());
   }, [r]);
 }
-function he(e) {
+function be(e) {
-  return F(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), N((r) => window.postMessage(r, "*"), []);
+  return _(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), N((r) => window.postMessage(r, "*"), []);
 }
-function ve({
+function Ee({
   defaultOutput: e,
   interval: r,
   getTime: t,
   evalOnMount: a = !1,
-  initialCode: n = "",
+  initialCode: o = "",
-  autolink: c = !1,
+  autolink: i = !1,
-  beforeEval: l,
+  beforeEval: u,
-  afterEval: d,
+  afterEval: m,
-  onEvalError: o,
+  editPattern: n,
-  onToggle: u,
+  onEvalError: d,
-  canvasId: f
+  onToggle: v,
+  canvasId: h
 }) {
-  const m = V(() => be(), []);
+  const p = K(() => we(), []);
-  f = f || `canvas-${m}`;
+  h = h || `canvas-${p}`;
-  const [v, k] = _(), [M, T] = _(), [b, A] = _(n), [C, S] = _(), [z, D] = _(), [x, L] = _(!1), h = b !== C, { scheduler: g, evaluate: R, start: J, stop: O, pause: Q } = V(
+  const [F, A] = w(), [P, D] = w(), [b, q] = w(o), [x, V] = w(), [I, R] = w(), [L, B] = w(!1), H = b !== x, { scheduler: M, evaluate: c, start: f, stop: C, pause: O } = K(
-    () => te({
+    () => re({
       interval: r,
       defaultOutput: e,
-      onSchedulerError: k,
+      onSchedulerError: A,
-      onEvalError: (p) => {
+      onEvalError: (g) => {
-        T(p), o?.(p);
+        D(g), d?.(g);
       },
       getTime: t,
-      transpiler: se,
+      transpiler: ie,
-      beforeEval: ({ code: p }) => {
+      beforeEval: ({ code: g }) => {
-        A(p), l?.();
+        q(g), u?.();
       },
-      afterEval: ({ pattern: p, code: q }) => {
+      editPattern: n ? (g) => n(g, p) : void 0,
-        S(q), D(p), T(), k(), c && (window.location.hash = "#" + encodeURIComponent(btoa(q))), d?.();
+      afterEval: ({ pattern: g, code: T }) => {
+        V(T), R(g), D(), A(), i && (window.location.hash = "#" + encodeURIComponent(btoa(T))), m?.();
       },
-      onToggle: (p) => {
+      onToggle: (g) => {
-        L(p), u?.(p);
+        B(g), v?.(g);
       }
     }),
     [e, r, t]
-  ), X = he(({ data: { from: p, type: q } }) => {
+  ), Y = be(({ data: { from: g, type: T } }) => {
-    q === "start" && p !== m && O();
+    T === "start" && g !== p && C();
-  }), P = N(
+  }), S = N(
-    async (p = !0) => {
+    async (g = !0) => {
-      await R(b, p), X({ type: "start", from: m });
+      await c(b, g), Y({ type: "start", from: p });
     },
-    [R, b]
+    [c, b]
-  ), K = E();
+  ), U = k();
-  return F(() => {
+  return _(() => {
-    !K.current && a && b && (K.current = !0, P());
+    !U.current && a && b && (U.current = !0, S());
-  }, [P, a, b]), F(() => () => {
+  }, [S, a, b]), _(() => () => {
-    g.stop();
+    M.stop();
-  }, [g]), {
+  }, [M]), {
-    id: m,
+    id: p,
-    canvasId: f,
+    canvasId: h,
     code: b,
-    setCode: A,
+    setCode: q,
-    error: v || M,
+    error: F || P,
-    schedulerError: v,
+    schedulerError: F,
-    scheduler: g,
+    scheduler: M,
-    evalError: M,
+    evalError: P,
-    evaluate: R,
+    evaluate: c,
-    activateCode: P,
+    activateCode: S,
-    activeCode: C,
+    activeCode: x,
-    isDirty: h,
+    isDirty: H,
-    pattern: z,
+    pattern: I,
-    started: x,
+    started: L,
-    start: J,
+    start: f,
-    stop: O,
+    stop: C,
-    pause: Q,
+    pause: O,
     togglePlay: async () => {
-      x ? g.pause() : await P();
+      L ? M.pause() : await S();
     }
   };
 }
-function be() {
+function we() {
   return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
 }
-function I({ type: e }) {
+function $({ type: e }) {
-  return /* @__PURE__ */ i.createElement("svg", {
+  return /* @__PURE__ */ l.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "sc-h-5 sc-w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
   }, {
-    refresh: /* @__PURE__ */ i.createElement("path", {
+    refresh: /* @__PURE__ */ l.createElement("path", {
       fillRule: "evenodd",
       d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",
       clipRule: "evenodd"
     }),
-    play: /* @__PURE__ */ i.createElement("path", {
+    play: /* @__PURE__ */ l.createElement("path", {
       fillRule: "evenodd",
       d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
       clipRule: "evenodd"
     }),
-    pause: /* @__PURE__ */ i.createElement("path", {
+    pause: /* @__PURE__ */ l.createElement("path", {
       fillRule: "evenodd",
       d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
       clipRule: "evenodd"
     })
   }[e]);
 }
-const we = "_container_3i85k_1", ye = "_header_3i85k_5", Ee = "_buttons_3i85k_9", ke = "_button_3i85k_9", _e = "_buttonDisabled_3i85k_17", Fe = "_error_3i85k_21", Ce = "_body_3i85k_25", w = {
+const ye = "_container_3i85k_1", ke = "_header_3i85k_5", _e = "_buttons_3i85k_9", Fe = "_button_3i85k_9", Ce = "_buttonDisabled_3i85k_17", Ne = "_error_3i85k_21", xe = "_body_3i85k_25", E = {
-  container: we,
+  container: ye,
-  header: ye,
+  header: ke,
-  buttons: Ee,
+  buttons: _e,
-  button: ke,
+  button: Fe,
-  buttonDisabled: _e,
+  buttonDisabled: Ce,
-  error: Fe,
+  error: Ne,
-  body: Ce
+  body: xe
-}, Ne = () => ne().currentTime;
+}, Me = () => ce().currentTime;
-function Be({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, withCanvas: a = !1, canvasHeight: n = 200 }) {
+function je({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, withCanvas: a = !1, canvasHeight: o = 200 }) {
   const {
-    code: c,
+    code: i,
-    setCode: l,
+    setCode: u,
-    evaluate: d,
+    evaluate: m,
-    activateCode: o,
+    activateCode: n,
-    error: u,
+    error: d,
-    isDirty: f,
+    isDirty: v,
-    activeCode: m,
+    activeCode: h,
-    pattern: v,
+    pattern: p,
-    started: k,
+    started: F,
-    scheduler: M,
+    scheduler: A,
-    togglePlay: T,
+    togglePlay: P,
-    stop: b,
+    stop: D,
-    canvasId: A
+    canvasId: b,
-  } = ve({
+    id: q
+  } = Ee({
     initialCode: e,
-    defaultOutput: oe,
+    defaultOutput: ae,
-    getTime: Ne
+    getTime: Me,
+    editPattern: (c, f) => c.withContext((C) => ({ ...C, id: f }))
   });
-  pe({
+  ve({
-    pattern: v,
+    pattern: p,
-    started: a && k,
+    started: a && F,
-    getTime: () => M.now(),
+    getTime: () => A.now(),
-    onDraw: (h, g) => {
+    onDraw: (c, f) => {
-      const R = document.querySelector("#" + A).getContext("2d");
+      const C = document.querySelector("#" + b).getContext("2d");
-      re({ ctx: R, time: h, haps: g, autorange: 1, fold: 1, playhead: 1 });
+      oe({ ctx: C, time: c, haps: f, autorange: 1, fold: 1, playhead: 1 });
     }
   });
-  const [C, S] = _(), [z, D] = ae({
+  const [x, V] = w(), [I, R] = se({
     threshold: 0.01
-  }), x = E(), L = V(() => ((D || !r) && (x.current = !0), D || x.current), [D, r]);
+  }), L = k(), B = K(() => ((R || !r) && (L.current = !0), R || L.current), [R, r]);
-  return me({
+  pe({
-    view: C,
+    view: x,
-    pattern: v,
+    pattern: p,
-    active: k && !m?.includes("strudel disable-highlighting"),
+    active: F && !h?.includes("strudel disable-highlighting"),
-    getTime: () => M.getPhase()
+    getTime: () => A.getPhase()
-  }), U(() => {
+  }), G(() => {
     if (t) {
-      const h = async (g) => {
+      const c = async (f) => {
-        (g.ctrlKey || g.altKey) && (g.code === "Enter" ? (g.preventDefault(), le(C), await o()) : g.code === "Period" && (b(), g.preventDefault()));
+        (f.ctrlKey || f.altKey) && (f.code === "Enter" ? (f.preventDefault(), de(x), await n()) : f.code === "Period" && (D(), f.preventDefault()));
       };
-      return window.addEventListener("keydown", h, !0), () => window.removeEventListener("keydown", h, !0);
+      return window.addEventListener("keydown", c, !0), () => window.removeEventListener("keydown", c, !0);
     }
-  }, [t, v, c, d, b, C]), /* @__PURE__ */ i.createElement("div", {
+  }, [t, p, i, m, D, x]);
-    className: w.container,
+  const [H, M] = w([]);
-    ref: z
+  return Ae(
-  }, /* @__PURE__ */ i.createElement("div", {
+    N((c) => {
-    className: w.header
+      const { data: f } = c.detail;
-  }, /* @__PURE__ */ i.createElement("div", {
+      f?.hap?.context?.id === q && M((O) => O.concat([c.detail]).slice(-10));
-    className: w.buttons
+    }, [])
-  }, /* @__PURE__ */ i.createElement("button", {
+  ), /* @__PURE__ */ l.createElement("div", {
-    className: j(w.button, k ? "sc-animate-pulse" : ""),
+    className: E.container,
-    onClick: () => T()
+    ref: I
-  }, /* @__PURE__ */ i.createElement(I, {
+  }, /* @__PURE__ */ l.createElement("div", {
-    type: k ? "pause" : "play"
+    className: E.header
-  })), /* @__PURE__ */ i.createElement("button", {
+  }, /* @__PURE__ */ l.createElement("div", {
-    className: j(f ? w.button : w.buttonDisabled),
+    className: E.buttons
-    onClick: () => o()
+  }, /* @__PURE__ */ l.createElement("button", {
-  }, /* @__PURE__ */ i.createElement(I, {
+    className: W(E.button, F ? "sc-animate-pulse" : ""),
+    onClick: () => P()
+  }, /* @__PURE__ */ l.createElement($, {
+    type: F ? "pause" : "play"
+  })), /* @__PURE__ */ l.createElement("button", {
+    className: W(v ? E.button : E.buttonDisabled),
+    onClick: () => n()
+  }, /* @__PURE__ */ l.createElement($, {
     type: "refresh"
-  }))), u && /* @__PURE__ */ i.createElement("div", {
+  }))), d && /* @__PURE__ */ l.createElement("div", {
-    className: w.error
+    className: E.error
-  }, u.message)), /* @__PURE__ */ i.createElement("div", {
+  }, d.message)), /* @__PURE__ */ l.createElement("div", {
-    className: w.body
+    className: E.body
-  }, L && /* @__PURE__ */ i.createElement(fe, {
+  }, B && /* @__PURE__ */ l.createElement(ge, {
-    value: c,
+    value: i,
-    onChange: l,
+    onChange: u,
-    onViewChanged: S
+    onViewChanged: V
-  })), a && /* @__PURE__ */ i.createElement("canvas", {
+  })), a && /* @__PURE__ */ l.createElement("canvas", {
-    id: A,
+    id: b,
     className: "w-full pointer-events-none",
-    height: n,
+    height: o,
-    ref: (h) => {
+    ref: (c) => {
-      h && h.width !== h.clientWidth && (h.width = h.clientWidth);
+      c && c.width !== c.clientWidth && (c.width = c.clientWidth);
     }
-  }));
+  }), !!H.length && /* @__PURE__ */ l.createElement("div", {
+    className: "sc-bg-gray-800 sc-rounded-md sc-p-2"
+  }, H.map(({ message: c }, f) => /* @__PURE__ */ l.createElement("div", {
+    key: f
+  }, c))));
 }
-const Oe = (e) => U(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
+function Ae(e) {
+  De(ne.key, e);
+}
+function De(e, r, t = !1) {
+  _(() => (document.addEventListener(e, r, t), () => {
+    document.removeEventListener(e, r, t);
+  }), [r]);
+}
+const Ue = (e) => G(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
 export {
-  fe as CodeMirror,
+  ge as CodeMirror,
-  Be as MiniRepl,
+  je as MiniRepl,
-  j as cx,
+  W as cx,
-  le as flash,
+  de as flash,
-  me as useHighlighting,
+  pe as useHighlighting,
-  Oe as useKeydown,
+  Ue as useKeydown,
-  he as usePostMessage,
+  be as usePostMessage,
-  ve as useStrudel
+  Ee as useStrudel
 };

packages/react/dist/style.css

@@ -1 +1 @@
-.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:18px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto}
+.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:18px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.sc-rounded-md{border-radius:.375rem}.sc-bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.sc-p-2{padding:.5rem}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto}

packages/react/src/components/MiniRepl.jsx

@@ -1,6 +1,6 @@
 import { pianoroll } from '@strudel.cycles/core';
 import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { useInView } from 'react-hook-inview';
 import 'tailwindcss/tailwind.css';
 import cx from '../cx';
@@ -11,6 +11,7 @@ import CodeMirror6, { flash } from './CodeMirror6';
 import { Icon } from './Icon';
 import styles from './MiniRepl.module.css';
 import './style.css';
+import { logger } from '@strudel.cycles/core';
 
 const getTime = () => getAudioContext().currentTime;
 
@@ -29,10 +30,14 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, withCa
     togglePlay,
     stop,
     canvasId,
+    id: replId,
   } = useStrudel({
     initialCode: tune,
     defaultOutput: webaudioOutput,
     getTime,
+    editPattern: (pat, id) => {
+      return pat.withContext((ctx) => ({ ...ctx, id }));
+    },
   });
 
   usePatternFrame({
@@ -86,6 +91,20 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, withCa
     }
   }, [enableKeyboard, pattern, code, evaluate, stop, view]);
 
+  const [log, setLog] = useState([]);
+  useLogger(
+    useCallback((e) => {
+      const { data } = e.detail;
+      const logId = data?.hap?.context?.id;
+      // const logId = data?.pattern?.meta?.id;
+      if (logId === replId) {
+        setLog((l) => {
+          return l.concat([e.detail]).slice(-10);
+        });
+      }
+    }, []),
+  );
+
   return (
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
@@ -114,6 +133,28 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, withCa
           }}
         ></canvas>
       )}
+      {!!log.length && (
+        <div className="sc-bg-gray-800 sc-rounded-md sc-p-2">
+          {log.map(({ message }, i) => (
+            <div key={i}>{message}</div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
+
+// TODO: dedupe
+function useLogger(onTrigger) {
+  useEvent(logger.key, onTrigger);
+}
+
+// TODO: dedupe
+function useEvent(name, onTrigger, useCapture = false) {
+  useEffect(() => {
+    document.addEventListener(name, onTrigger, useCapture);
+    return () => {
+      document.removeEventListener(name, onTrigger, useCapture);
+    };
+  }, [onTrigger]);
+}

packages/react/src/hooks/useStrudel.mjs

@@ -12,6 +12,7 @@ function useStrudel({
   autolink = false,
   beforeEval,
   afterEval,
+  editPattern,
   onEvalError,
   onToggle,
   canvasId,
@@ -44,6 +45,7 @@ function useStrudel({
           setCode(code);
           beforeEval?.();
         },
+        editPattern: editPattern ? (pat) => editPattern(pat, id) : undefined,
         afterEval: ({ pattern: _pattern, code }) => {
           setActiveCode(code);
           setPattern(_pattern);

packages/webaudio/webaudio.mjs

@@ -195,9 +195,14 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
       hap.value = { note: hap.value };
     } */
   if (typeof hap.value !== 'object') {
-    throw new Error(
+    logger(
-      `hap.value ${hap.value} is not supported by webaudio output. Hint: append .note() or .s() to the end`,
+      `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)
   let t = ac.currentTime + deadline;