fix: another dependency array

packages/react/dist/index.es.js

@@ -1,9 +1,9 @@
-import d, { useCallback as w, useRef as N, useEffect as k, useMemo as G, useState as M, useLayoutEffect as T } from "react";
+import l, { useCallback as y, useRef as N, useEffect as k, useMemo as J, useState as M, useLayoutEffect as te } from "react";
 import le from "@uiw/react-codemirror";
-import { Decoration as A, EditorView as ee } from "@codemirror/view";
+import { Decoration as A, EditorView as re } from "@codemirror/view";
-import { StateEffect as te, StateField as re } from "@codemirror/state";
+import { StateEffect as ne, StateField as oe } from "@codemirror/state";
 import { javascript as ue } from "@codemirror/lang-javascript";
-import { tags as u } from "@lezer/highlight";
+import { tags as i } from "@lezer/highlight";
 import { createTheme as de } from "@uiw/codemirror-themes";
 import { webaudioOutput as fe, getAudioContext as me } from "@strudel.cycles/webaudio";
 import { useInView as he } from "react-hook-inview";
@@ -22,34 +22,34 @@ const be = de({
     gutterForeground: "#8a919966"
   },
   styles: [
-    { tag: u.keyword, color: "#c792ea" },
+    { tag: i.keyword, color: "#c792ea" },
-    { tag: u.operator, color: "#89ddff" },
+    { tag: i.operator, color: "#89ddff" },
-    { tag: u.special(u.variableName), color: "#eeffff" },
+    { tag: i.special(i.variableName), color: "#eeffff" },
-    { tag: u.typeName, color: "#c3e88d" },
+    { tag: i.typeName, color: "#c3e88d" },
-    { tag: u.atom, color: "#f78c6c" },
+    { tag: i.atom, color: "#f78c6c" },
-    { tag: u.number, color: "#c3e88d" },
+    { tag: i.number, color: "#c3e88d" },
-    { tag: u.definition(u.variableName), color: "#82aaff" },
+    { tag: i.definition(i.variableName), color: "#82aaff" },
-    { tag: u.string, color: "#c3e88d" },
+    { tag: i.string, color: "#c3e88d" },
-    { tag: u.special(u.string), color: "#c3e88d" },
+    { tag: i.special(i.string), color: "#c3e88d" },
-    { tag: u.comment, color: "#7d8799" },
+    { tag: i.comment, color: "#7d8799" },
-    { tag: u.variableName, color: "#c792ea" },
+    { tag: i.variableName, color: "#c792ea" },
-    { tag: u.tagName, color: "#c3e88d" },
+    { tag: i.tagName, color: "#c3e88d" },
-    { tag: u.bracket, color: "#525154" },
+    { tag: i.bracket, color: "#525154" },
-    { tag: u.meta, color: "#ffcb6b" },
+    { tag: i.meta, color: "#ffcb6b" },
-    { tag: u.attributeName, color: "#c792ea" },
+    { tag: i.attributeName, color: "#c792ea" },
-    { tag: u.propertyName, color: "#c792ea" },
+    { tag: i.propertyName, color: "#c792ea" },
-    { tag: u.className, color: "#decb6b" },
+    { tag: i.className, color: "#decb6b" },
-    { tag: u.invalid, color: "#ffffff" }
+    { tag: i.invalid, color: "#ffffff" }
   ]
 });
-const J = te.define(), Ee = re.define({
+const Q = ne.define(), Ee = oe.define({
   create() {
     return A.none;
   },
   update(e, r) {
     try {
       for (let t of r.effects)
-        if (t.is(J))
+        if (t.is(Q))
           if (t.value) {
             const n = A.mark({ attributes: { style: "background-color: #FFCA2880" } });
             e = A.set([n.range(0, r.newDoc.length)]);
@@ -60,25 +60,25 @@ const J = te.define(), Ee = re.define({
       return console.warn("flash error", t), e;
     }
   },
-  provide: (e) => ee.decorations.from(e)
+  provide: (e) => re.decorations.from(e)
 }), ye = (e) => {
-  e.dispatch({ effects: J.of(!0) }), setTimeout(() => {
+  e.dispatch({ effects: Q.of(!0) }), setTimeout(() => {
-    e.dispatch({ effects: J.of(!1) });
+    e.dispatch({ effects: Q.of(!1) });
   }, 200);
-}, B = te.define(), we = re.define({
+}, I = ne.define(), we = oe.define({
   create() {
     return A.none;
   },
   update(e, r) {
     try {
       for (let t of r.effects)
-        if (t.is(B)) {
+        if (t.is(I)) {
           const n = t.value.map(
-            (c) => (c.context.locations || []).map(({ start: m, end: s }) => {
+            (s) => (s.context.locations || []).map(({ start: m, end: u }) => {
-              const a = c.context.color || "#FFCA28";
+              const o = s.context.color || "#FFCA28";
-              let i = r.newDoc.line(m.line).from + m.column, g = r.newDoc.line(s.line).from + s.column;
+              let c = r.newDoc.line(m.line).from + m.column, g = r.newDoc.line(u.line).from + u.column;
               const b = r.newDoc.length;
-              return i > b || g > b ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${a};` } }).range(i, g);
+              return c > b || g > b ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${o};` } }).range(c, g);
             })
           ).flat().filter(Boolean) || [];
           e = A.set(n, !0);
@@ -88,236 +88,236 @@ const J = te.define(), Ee = re.define({
       return A.set([]);
     }
   },
-  provide: (e) => ee.decorations.from(e)
+  provide: (e) => re.decorations.from(e)
 }), ke = [ue(), be, we, Ee];
-function Fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: n, options: c, editorDidMount: m }) {
+function Fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: n, options: s, editorDidMount: m }) {
-  const s = w(
+  const u = y(
     (g) => {
       r?.(g);
     },
     [r]
-  ), a = w(
+  ), o = y(
     (g) => {
       t?.(g);
     },
     [t]
-  ), i = w(
+  ), c = y(
     (g) => {
       g.selectionSet && n && n?.(g.state.selection);
     },
     [n]
   );
-  return /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement(le, {
+  return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(le, {
     value: e,
-    onChange: s,
+    onChange: u,
-    onCreateEditor: a,
+    onCreateEditor: o,
-    onUpdate: i,
+    onUpdate: c,
     extensions: ke
   }));
 }
-function Y(...e) {
+function T(...e) {
   return e.filter(Boolean).join(" ");
 }
 function _e({ view: e, pattern: r, active: t, getTime: n }) {
-  const c = N([]), m = N(0);
+  const s = N([]), m = N(0);
   k(() => {
     if (e)
       if (r && t) {
         m.current = 0;
-        let s = requestAnimationFrame(function a() {
+        let u = requestAnimationFrame(function o() {
           try {
-            const i = n(), b = [Math.max(m.current ?? i, i - 1 / 10, -0.01), i + 1 / 60];
+            const c = n(), b = [Math.max(m.current ?? c, c - 1 / 10, -0.01), c + 1 / 60];
-            m.current = b[1], c.current = c.current.filter((h) => h.whole.end > i);
+            m.current = b[1], s.current = s.current.filter((h) => h.whole.end > c);
-            const l = r.queryArc(...b).filter((h) => h.hasOnset());
+            const a = r.queryArc(...b).filter((h) => h.hasOnset());
-            c.current = c.current.concat(l), e.dispatch({ effects: B.of(c.current) });
+            s.current = s.current.concat(a), e.dispatch({ effects: I.of(s.current) });
           } catch {
-            e.dispatch({ effects: B.of([]) });
+            e.dispatch({ effects: I.of([]) });
           }
-          s = requestAnimationFrame(a);
+          u = requestAnimationFrame(o);
         });
         return () => {
-          cancelAnimationFrame(s);
+          cancelAnimationFrame(u);
         };
       } else
-        c.current = [], e.dispatch({ effects: B.of([]) });
+        s.current = [], e.dispatch({ effects: I.of([]) });
   }, [r, t, e]);
 }
 function Me(e, r = !1) {
-  const t = N(), n = N(), c = (a) => {
+  const t = N(), n = N(), s = (o) => {
     if (n.current !== void 0) {
-      const i = a - n.current;
+      const c = o - n.current;
-      e(a, i);
+      e(o, c);
     }
-    n.current = a, t.current = requestAnimationFrame(c);
+    n.current = o, t.current = requestAnimationFrame(s);
   }, m = () => {
-    t.current = requestAnimationFrame(c);
+    t.current = requestAnimationFrame(s);
-  }, s = () => {
+  }, u = () => {
     t.current && cancelAnimationFrame(t.current), delete t.current;
   };
   return k(() => {
-    t.current && (s(), m());
+    t.current && (u(), m());
-  }, [e]), k(() => (r && m(), s), []), {
+  }, [e]), k(() => (r && m(), u), []), {
     start: m,
-    stop: s
+    stop: u
   };
 }
-function Ae({ pattern: e, started: r, getTime: t, onDraw: n, drawTime: c = [-2, 2] }) {
+function Ae({ pattern: e, started: r, getTime: t, onDraw: n, drawTime: s = [-2, 2] }) {
-  let [m, s] = c;
+  let [m, u] = s;
   m = Math.abs(m);
-  let a = N([]), i = N(null);
+  let o = N([]), c = N(null);
   k(() => {
     if (e) {
-      const l = t(), h = e.queryArc(Math.max(l, 0), l + s + 0.1);
+      const a = t(), h = e.queryArc(Math.max(a, 0), a + u + 0.1);
-      a.current = a.current.filter((v) => v.whole.begin < l), a.current = a.current.concat(h);
+      o.current = o.current.filter((v) => v.whole.begin < a), o.current = o.current.concat(h);
     }
   }, [e]);
   const { start: g, stop: b } = Me(
-    w(() => {
+    y(() => {
-      const l = t() + s;
+      const a = t() + u;
-      if (i.current === null) {
+      if (c.current === null) {
-        i.current = l;
+        c.current = a;
         return;
       }
-      const h = e.queryArc(Math.max(i.current, l - 1 / 10), l);
+      const h = e.queryArc(Math.max(c.current, a - 1 / 10), a);
-      i.current = l, a.current = (a.current || []).filter((v) => v.whole.end >= l - m - s).concat(h.filter((v) => v.hasOnset())), n(e, l - s, a.current, c);
+      c.current = a, o.current = (o.current || []).filter((v) => v.whole.end >= a - m - u).concat(h.filter((v) => v.hasOnset())), n(e, a - u, o.current, s);
     }, [e])
   );
   return k(() => {
-    r ? g() : (a.current = [], b());
+    r ? g() : (o.current = [], b());
   }, [r]), {
     clear: () => {
-      a.current = [];
+      o.current = [];
     }
   };
 }
 function Ne(e) {
-  return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), w((r) => window.postMessage(r, "*"), []);
+  return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), y((r) => window.postMessage(r, "*"), []);
 }
 function De({
   defaultOutput: e,
   interval: r,
   getTime: t,
   evalOnMount: n = !1,
-  initialCode: c = "",
+  initialCode: s = "",
   autolink: m = !1,
-  beforeEval: s,
+  beforeEval: u,
-  editPattern: a,
+  afterEval: o,
-  afterEval: i,
+  editPattern: c,
   onEvalError: g,
   onToggle: b,
-  canvasId: l,
+  canvasId: a,
   drawContext: h,
   drawTime: v = [-2, 2]
 }) {
-  const F = G(() => Ce(), []);
+  const R = J(() => Ce(), []);
-  l = l || `canvas-${F}`;
+  a = a || `canvas-${R}`;
-  const [q, z] = M(), [R, H] = M(), [E, C] = M(c), [P, I] = M(), [D, S] = M(), [x, V] = M(!1), K = E !== P, { scheduler: o, evaluate: p, start: Q, stop: O, pause: ne } = G(
+  const [L, x] = M(), [H, P] = M(), [E, S] = M(s), [V, q] = M(), [z, K] = M(), [D, O] = M(!1), j = E !== V, { scheduler: F, evaluate: C, start: d, stop: p, pause: X } = J(
     () => ge({
       interval: r,
       defaultOutput: e,
-      onSchedulerError: z,
+      onSchedulerError: x,
       onEvalError: (f) => {
-        H(f), g?.(f);
+        P(f), g?.(f);
       },
       getTime: t,
       drawContext: h,
       transpiler: ve,
-      editPattern: a,
+      editPattern: c,
       beforeEval: ({ code: f }) => {
-        C(f), s?.();
+        S(f), u?.();
       },
-      afterEval: ({ pattern: f, code: y }) => {
+      afterEval: ({ pattern: f, code: w }) => {
-        I(y), S(f), H(), z(), m && (window.location.hash = "#" + encodeURIComponent(btoa(y))), i?.();
+        q(w), K(f), P(), x(), m && (window.location.hash = "#" + encodeURIComponent(btoa(w))), o?.();
       },
       onToggle: (f) => {
-        V(f), b?.(f);
+        O(f), b?.(f);
       }
     }),
     [e, r, t]
-  ), oe = Ne(({ data: { from: f, type: y } }) => {
+  ), U = Ne(({ data: { from: f, type: w } }) => {
-    y === "start" && f !== F && O();
+    w === "start" && f !== R && p();
-  }), j = w(
+  }), Y = y(
     async (f = !0) => {
-      const y = await p(E, f);
+      const w = await C(E, f);
-      return oe({ type: "start", from: F }), y;
+      return U({ type: "start", from: R }), w;
     },
-    [p, E]
+    [C, E]
-  ), L = w(
+  ), B = y(
-    (f, y, W, $) => {
+    (f, w, $, G) => {
-      const { onPaint: se } = f.context || {}, ie = typeof h == "function" ? h(l) : h;
+      const { onPaint: se } = f.context || {}, ie = typeof h == "function" ? h(a) : h;
-      se?.(ie, y, W, $);
+      se?.(ie, w, $, G);
     },
-    [h, l]
+    [h, a]
-  ), U = w(
+  ), W = y(
     (f) => {
-      if (h && L) {
+      if (h && B) {
-        const [y, W] = v, $ = f.queryArc(0, W);
+        const [w, $] = v, G = f.queryArc(0, $);
-        L(f, -1e-3, $, v);
+        B(f, -1e-3, G, v);
       }
     },
-    [v, L]
+    [h, v, B]
-  ), X = N();
+  ), Z = N();
   k(() => {
-    !X.current && h && L && n && E && (X.current = !0, p(E, !1).then((f) => U(f)));
+    !Z.current && n && E && (Z.current = !0, C(E, !1).then((f) => W(f)));
-  }, [j, n, E, U]), k(() => () => {
+  }, [n, E, C, W]), k(() => () => {
-    o.stop();
+    F.stop();
-  }, [o]);
+  }, [F]);
-  const ae = async () => {
+  const ce = async () => {
-    x ? (o.stop(), U(D)) : await j();
+    D ? (F.stop(), W(z)) : await Y();
-  }, ce = q || R;
+  }, ae = L || H;
   return Ae({
-    pattern: D,
+    pattern: z,
-    started: h && x,
+    started: h && D,
-    getTime: () => o.now(),
+    getTime: () => F.now(),
     drawTime: v,
-    onDraw: L
+    onDraw: B
   }), {
-    id: F,
+    id: R,
-    canvasId: l,
+    canvasId: a,
     code: E,
-    setCode: C,
+    setCode: S,
-    error: ce,
+    error: ae,
-    schedulerError: q,
+    schedulerError: L,
-    scheduler: o,
+    scheduler: F,
-    evalError: R,
+    evalError: H,
-    evaluate: p,
+    evaluate: C,
-    activateCode: j,
+    activateCode: Y,
-    activeCode: P,
+    activeCode: V,
-    isDirty: K,
+    isDirty: j,
-    pattern: D,
+    pattern: z,
-    started: x,
+    started: D,
-    start: Q,
+    start: d,
-    stop: O,
+    stop: p,
-    pause: ne,
+    pause: X,
-    togglePlay: ae
+    togglePlay: ce
   };
 }
 function Ce() {
   return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
 }
-function Z({ type: e }) {
+function ee({ type: e }) {
-  return /* @__PURE__ */ d.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__ */ d.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__ */ d.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__ */ d.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"
     }),
-    stop: /* @__PURE__ */ d.createElement("path", {
+    stop: /* @__PURE__ */ l.createElement("path", {
       fillRule: "evenodd",
       d: "M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z",
       clipRule: "evenodd"
@@ -333,90 +333,93 @@ const Re = "_container_3i85k_1", xe = "_header_3i85k_5", Le = "_buttons_3i85k_9"
   error: He,
   body: Pe
 }, Se = () => me().currentTime;
-function Ye({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: n, punchcard: c, canvasHeight: m = 200 }) {
+function Ye({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: n, punchcard: s, canvasHeight: m = 200 }) {
-  n = n || (c ? [0, 4] : void 0);
+  n = n || (s ? [0, 4] : void 0);
-  const {
+  const u = !!n, o = y(
-    code: s,
+    n ? (d) => document.querySelector("#" + d)?.getContext("2d") : null,
-    setCode: a,
+    [n]
-    evaluate: i,
+  ), {
-    activateCode: g,
+    code: c,
-    error: b,
+    setCode: g,
-    isDirty: l,
+    evaluate: b,
-    activeCode: h,
+    activateCode: a,
-    pattern: v,
+    error: h,
-    started: F,
+    isDirty: v,
-    scheduler: q,
+    activeCode: R,
-    togglePlay: z,
+    pattern: L,
-    stop: R,
+    started: x,
-    canvasId: H,
+    scheduler: H,
-    id: E
+    togglePlay: P,
+    stop: E,
+    canvasId: S,
+    id: V
   } = De({
     initialCode: e,
     defaultOutput: fe,
-    editPattern: (o) => c ? o.punchcard() : o,
+    editPattern: (d) => s ? d.punchcard() : d,
     getTime: Se,
-    evalOnMount: !!n,
+    evalOnMount: u,
-    drawContext: n ? (o) => document.querySelector("#" + o)?.getContext("2d") : null,
+    drawContext: o,
     drawTime: n
-  }), [C, P] = M(), [I, D] = he({
+  }), [q, z] = M(), [K, D] = he({
     threshold: 0.01
-  }), S = N(), x = G(() => ((D || !r) && (S.current = !0), D || S.current), [D, r]);
+  }), O = N(), j = J(() => ((D || !r) && (O.current = !0), D || O.current), [D, r]);
   _e({
-    view: C,
+    view: q,
-    pattern: v,
+    pattern: L,
-    active: F && !h?.includes("strudel disable-highlighting"),
+    active: x && !R?.includes("strudel disable-highlighting"),
-    getTime: () => q.now()
+    getTime: () => H.now()
-  }), T(() => {
+  }), te(() => {
     if (t) {
-      const o = async (p) => {
+      const d = async (p) => {
-        (p.ctrlKey || p.altKey) && (p.code === "Enter" ? (p.preventDefault(), ye(C), await g()) : p.code === "Period" && (R(), p.preventDefault()));
+        (p.ctrlKey || p.altKey) && (p.code === "Enter" ? (p.preventDefault(), ye(q), await a()) : p.code === "Period" && (E(), p.preventDefault()));
       };
-      return window.addEventListener("keydown", o, !0), () => window.removeEventListener("keydown", o, !0);
+      return window.addEventListener("keydown", d, !0), () => window.removeEventListener("keydown", d, !0);
     }
-  }, [t, v, s, i, R, C]);
+  }, [t, L, c, b, E, q]);
-  const [V, K] = M([]);
+  const [F, C] = M([]);
   return Ve(
-    w((o) => {
+    y((d) => {
-      const { data: p } = o.detail;
+      const { data: p } = d.detail;
-      p?.hap?.context?.id === E && K((O) => O.concat([o.detail]).slice(-10));
+      p?.hap?.context?.id === V && C((U) => U.concat([d.detail]).slice(-10));
     }, [])
-  ), /* @__PURE__ */ d.createElement("div", {
+  ), /* @__PURE__ */ l.createElement("div", {
     className: _.container,
-    ref: I
+    ref: K
-  }, /* @__PURE__ */ d.createElement("div", {
+  }, /* @__PURE__ */ l.createElement("div", {
     className: _.header
-  }, /* @__PURE__ */ d.createElement("div", {
+  }, /* @__PURE__ */ l.createElement("div", {
     className: _.buttons
-  }, /* @__PURE__ */ d.createElement("button", {
+  }, /* @__PURE__ */ l.createElement("button", {
-    className: Y(_.button, F ? "sc-animate-pulse" : ""),
+    className: T(_.button, x ? "sc-animate-pulse" : ""),
-    onClick: () => z()
+    onClick: () => P()
-  }, /* @__PURE__ */ d.createElement(Z, {
+  }, /* @__PURE__ */ l.createElement(ee, {
-    type: F ? "stop" : "play"
+    type: x ? "stop" : "play"
-  })), /* @__PURE__ */ d.createElement("button", {
+  })), /* @__PURE__ */ l.createElement("button", {
-    className: Y(l ? _.button : _.buttonDisabled),
+    className: T(v ? _.button : _.buttonDisabled),
-    onClick: () => g()
+    onClick: () => a()
-  }, /* @__PURE__ */ d.createElement(Z, {
+  }, /* @__PURE__ */ l.createElement(ee, {
     type: "refresh"
-  }))), b && /* @__PURE__ */ d.createElement("div", {
+  }))), h && /* @__PURE__ */ l.createElement("div", {
     className: _.error
-  }, b.message)), /* @__PURE__ */ d.createElement("div", {
+  }, h.message)), /* @__PURE__ */ l.createElement("div", {
     className: _.body
-  }, x && /* @__PURE__ */ d.createElement(Fe, {
+  }, j && /* @__PURE__ */ l.createElement(Fe, {
-    value: s,
+    value: c,
-    onChange: a,
+    onChange: g,
-    onViewChanged: P
+    onViewChanged: z
-  })), n && /* @__PURE__ */ d.createElement("canvas", {
+  })), n && /* @__PURE__ */ l.createElement("canvas", {
-    id: H,
+    id: S,
     className: "w-full pointer-events-none",
     height: m,
-    ref: (o) => {
+    ref: (d) => {
-      o && o.width !== o.clientWidth && (o.width = o.clientWidth);
+      d && d.width !== d.clientWidth && (d.width = d.clientWidth);
     }
-  }), !!V.length && /* @__PURE__ */ d.createElement("div", {
+  }), !!F.length && /* @__PURE__ */ l.createElement("div", {
     className: "sc-bg-gray-800 sc-rounded-md sc-p-2"
-  }, V.map(({ message: o }, p) => /* @__PURE__ */ d.createElement("div", {
+  }, F.map(({ message: d }, p) => /* @__PURE__ */ l.createElement("div", {
     key: p
-  }, o))));
+  }, d))));
 }
 function Ve(e) {
   Oe(pe.key, e);
@@ -426,11 +429,11 @@ function Oe(e, r, t = !1) {
     document.removeEventListener(e, r, t);
   }), [r]);
 }
-const Ze = (e) => T(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
+const Ze = (e) => te(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
 export {
   Fe as CodeMirror,
   Ye as MiniRepl,
-  Y as cx,
+  T as cx,
   ye as flash,
   _e as useHighlighting,
   Ze as useKeydown,

packages/react/src/components/MiniRepl.jsx

@@ -15,6 +15,11 @@ const getTime = () => getAudioContext().currentTime;
 
 export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, punchcard, canvasHeight = 200 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
+  const evalOnMount = !!drawTime;
+  const drawContext = useCallback(
+    !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+    [drawTime],
+  );
   const {
     code,
     setCode,
@@ -35,8 +40,8 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
     defaultOutput: webaudioOutput,
     editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
     getTime,
-    evalOnMount: !!drawTime,
+    evalOnMount,
-    drawContext: !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+    drawContext,
     drawTime,
   });
 

packages/react/src/hooks/useStrudel.mjs

@@ -100,7 +100,7 @@ function useStrudel({
         onDraw(pat, -0.001, haps, drawTime);
       }
     },
-    [drawTime, onDraw],
+    [drawContext, drawTime, onDraw],
   );
 
   const inited = useRef();