@audiofab-io/easy-spin-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,764 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { PROGRAM_SLOT_COUNT as s, PROGRAM_SLOT_COUNT as c } from "@audiofab-io/fv1-core/pedal";
+import { FV1Assembler as l } from "@audiofab-io/fv1-core";
+//#region src/components/Knob.tsx
+var u = 300, d = -u / 2;
+function f({ value: t, label: r, onChange: s, size: c = 56, overlay: l = !1 }) {
+	let f = n(null), p = n(!1), m = n(0), h = n(0), g = e((e) => {
+		let t = f.current;
+		if (!t) return 0;
+		let n = t.getBoundingClientRect(), r = n.left + n.width / 2, i = n.top + n.height / 2;
+		return Math.atan2(e.clientY - i, e.clientX - r) * (180 / Math.PI);
+	}, []), _ = e((e) => {
+		p.current = !0, m.current = g(e.nativeEvent), h.current = t, e.target.setPointerCapture(e.pointerId);
+	}, [g, t]), v = e((e) => {
+		if (!p.current) return;
+		let t = ((g(e.nativeEvent) - m.current + 540) % 360 - 180) / u;
+		s(Math.max(0, Math.min(1, h.current + t)));
+	}, [g, s]), y = e(() => {
+		p.current = !1;
+	}, []), b = d + t * u, x = /* @__PURE__ */ o("svg", {
+		ref: f,
+		width: l ? "100%" : c,
+		height: l ? "100%" : c,
+		viewBox: "0 0 56 56",
+		className: "cursor-grab active:cursor-grabbing select-none touch-none",
+		role: "slider",
+		"aria-valuenow": Math.round(t * 100),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": r,
+		onPointerDown: _,
+		onPointerMove: v,
+		onPointerUp: y,
+		children: [
+			/* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "28",
+				fill: "transparent"
+			}),
+			l ? /* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "24",
+				fill: "none",
+				stroke: "#111",
+				strokeWidth: "1.5"
+			}) : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "26",
+				fill: "none",
+				stroke: "#888",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "22",
+				fill: "#f0f0f0",
+				stroke: "#aaa",
+				strokeWidth: "1"
+			})] }),
+			/* @__PURE__ */ a("g", {
+				transform: `rotate(${b} 28 28)`,
+				children: /* @__PURE__ */ a("line", {
+					x1: "28",
+					y1: "28",
+					x2: "28",
+					y2: l ? 10 : 8,
+					stroke: l ? "#111" : "#B8942C",
+					strokeWidth: l ? 2.5 : 2,
+					strokeLinecap: "round"
+				})
+			})
+		]
+	});
+	return l ? x : /* @__PURE__ */ o("div", {
+		className: "flex flex-col items-center gap-1",
+		children: [x, /* @__PURE__ */ a("span", {
+			className: "text-[10px] text-text-secondary text-center leading-tight max-w-[80px] truncate",
+			children: r
+		})]
+	});
+}
+//#endregion
+//#region src/components/ProgramSelector.tsx
+var p = c, m = 180, h = (390 - m) / (p - 1);
+function g(e) {
+	return m + e * h;
+}
+function _(e) {
+	let t = (e % 360 + 360) % 360, n = 0, r = Infinity;
+	for (let e = 0; e < p; e++) {
+		let i = (g(e) % 360 + 360) % 360, a = Math.abs(t - i);
+		a > 180 && (a = 360 - a), a < r && (r = a, n = e);
+	}
+	return n;
+}
+function v({ selectedSlot: t, onSelectSlot: r, slotLabels: i, overlay: s = !1 }) {
+	let c = n(null), l = n(!1), u = e((e) => {
+		let t = c.current;
+		if (!t) return 0;
+		let n = t.getBoundingClientRect(), r = n.left + n.width / 2, i = n.top + n.height / 2;
+		return (Math.atan2(e.clientY - i, e.clientX - r) * (180 / Math.PI) % 360 + 360) % 360;
+	}, []), d = e((e) => {
+		l.current = !0, e.target.setPointerCapture(e.pointerId);
+		let n = _(u(e.nativeEvent));
+		n !== t && r(n);
+	}, [
+		u,
+		t,
+		r
+	]), f = e((e) => {
+		if (!l.current) return;
+		let n = _(u(e.nativeEvent));
+		n !== t && r(n);
+	}, [
+		u,
+		t,
+		r
+	]), m = e(() => {
+		l.current = !1;
+	}, []);
+	if (!s) return /* @__PURE__ */ a("div", {
+		className: "grid grid-cols-4 gap-1",
+		children: Array.from({ length: p }, (e, n) => /* @__PURE__ */ a("button", {
+			onClick: () => r(n),
+			title: i?.[n] ?? `Slot ${n + 1}`,
+			className: `w-7 h-7 rounded text-xs font-bold ${t === n ? "bg-gold text-surface" : "bg-surface-hover text-text-secondary hover:bg-surface-card border border-border"}`,
+			children: n + 1
+		}, n))
+	});
+	let h = g(t) - 270;
+	return /* @__PURE__ */ o("svg", {
+		ref: c,
+		width: "100%",
+		height: "100%",
+		viewBox: "0 0 56 56",
+		className: "cursor-grab active:cursor-grabbing select-none touch-none",
+		role: "listbox",
+		"aria-label": "Program selector",
+		"aria-activedescendant": `prog-slot-${t}`,
+		onPointerDown: d,
+		onPointerMove: f,
+		onPointerUp: m,
+		children: [
+			/* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "28",
+				fill: "transparent"
+			}),
+			/* @__PURE__ */ a("circle", {
+				cx: "28",
+				cy: "28",
+				r: "24",
+				fill: "none",
+				stroke: "#111",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ a("g", {
+				transform: `rotate(${h} 28 28)`,
+				children: /* @__PURE__ */ a("line", {
+					x1: "28",
+					y1: "28",
+					x2: "28",
+					y2: "10",
+					stroke: "#111",
+					strokeWidth: "2.5",
+					strokeLinecap: "round"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ClipSelector.tsx
+function y({ clips: e, selectedClipId: t, onSelect: n, disabled: r = !1 }) {
+	return /* @__PURE__ */ o("select", {
+		value: t ?? "",
+		onChange: (e) => n(e.target.value),
+		disabled: r,
+		className: "px-2 py-1 rounded bg-surface-hover border border-border text-xs text-text-primary focus:outline-none focus:border-gold-dim disabled:opacity-50",
+		children: [/* @__PURE__ */ a("option", {
+			value: "",
+			disabled: !0,
+			children: r ? "Loading…" : "Select clip"
+		}), e.map((e) => /* @__PURE__ */ a("option", {
+			value: e.id,
+			children: e.name
+		}, e.id))]
+	});
+}
+//#endregion
+//#region src/components/PedalFace.tsx
+var b = {
+	pot0: {
+		left: "22.85%",
+		top: "14%"
+	},
+	pot1: {
+		left: "77.15%",
+		top: "14%"
+	},
+	pot2: {
+		left: "22.85%",
+		top: "33.75%"
+	},
+	programSelector: {
+		left: "76%",
+		top: "33.75%"
+	},
+	led: {
+		left: "50%",
+		top: "42%"
+	},
+	footswitch: {
+		left: "50%",
+		top: "68.5%"
+	},
+	pot0Label: {
+		left: "22.85%",
+		top: "2.5%"
+	},
+	pot1Label: {
+		left: "77.15%",
+		top: "2.5%"
+	},
+	pot2Label: {
+		left: "22.85%",
+		top: "44%"
+	},
+	pedalIO: {
+		left: "105%",
+		top: "70%"
+	}
+}, x = 20, S = 14, C = 20, w = 5;
+function T({ pedalImageUrl: e, pots: t, onPotChange: n, potLabels: s = [
+	"Pot 0",
+	"Pot 1",
+	"Pot 2"
+], selectedSlot: l, onSelectSlot: u, slotLabels: d, onAssignSlot: f, onUnassignSlot: p, onUnassignAllSlots: m, onProgramSlot: h, programmingSlot: g = null, clips: _, selectedClipId: T, onSelectClip: N, playing: P, onPlay: F, onPause: I, bypassed: L, onToggleBypass: R, channelMode: z, onChannelModeChange: B, pedalConnected: V = !1, onConnectPedal: H, onReadPedal: U, onWritePedal: W, pedalReading: G = !1, pedalWriting: K = !1 }) {
+	let q = G || K, [J, Y] = r(null), X = !L, Z = d?.some((e) => e) ?? !1, Q = V && !q;
+	return /* @__PURE__ */ o("div", {
+		className: "flex flex-col items-center gap-5 w-full max-w-[460px] mx-auto",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "relative w-full max-w-[360px] pedal-outline",
+				style: {
+					aspectRatio: "1573 / 2627",
+					backgroundImage: `url(${e})`,
+					backgroundSize: "contain",
+					backgroundRepeat: "no-repeat",
+					backgroundPosition: "center top"
+				},
+				children: [
+					/* @__PURE__ */ a(E, {
+						posStyle: b.pot0,
+						sizePct: x,
+						value: t[0],
+						label: s[0],
+						onChange: (e) => n(0, e)
+					}),
+					/* @__PURE__ */ a(E, {
+						posStyle: b.pot1,
+						sizePct: x,
+						value: t[1],
+						label: s[1],
+						onChange: (e) => n(1, e)
+					}),
+					/* @__PURE__ */ a(E, {
+						posStyle: b.pot2,
+						sizePct: x,
+						value: t[2],
+						label: s[2],
+						onChange: (e) => n(2, e)
+					}),
+					/* @__PURE__ */ a(D, {
+						posStyle: b.pot0Label,
+						text: s[0]
+					}),
+					/* @__PURE__ */ a(D, {
+						posStyle: b.pot1Label,
+						text: s[1]
+					}),
+					/* @__PURE__ */ a(D, {
+						posStyle: b.pot2Label,
+						text: s[2]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "absolute",
+						style: {
+							left: b.programSelector.left,
+							top: b.programSelector.top,
+							width: `${x}%`,
+							aspectRatio: "1 / 1",
+							transform: "translate(-50%, -50%)"
+						},
+						children: /* @__PURE__ */ a(v, {
+							overlay: !0,
+							selectedSlot: l,
+							onSelectSlot: u,
+							slotLabels: d
+						})
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "absolute rounded-full transition-all",
+						style: {
+							left: b.led.left,
+							top: b.led.top,
+							width: `${w}%`,
+							aspectRatio: "1 / 1",
+							transform: "translate(-50%, -50%)",
+							background: X ? "radial-gradient(circle at 35% 30%, #ff8a8a 0%, #e11 55%, #800 100%)" : "radial-gradient(circle at 35% 30%, #f2f2f2 0%, #bbb 60%, #777 100%)",
+							boxShadow: X ? "0 0 10px rgba(255, 60, 60, 0.75)" : "inset 0 1px 2px rgba(0,0,0,0.25)",
+							border: "1px solid #333"
+						},
+						"aria-label": "Status LED"
+					}),
+					/* @__PURE__ */ o("svg", {
+						viewBox: "0 0 100 100",
+						className: "absolute pointer-events-none",
+						style: {
+							left: b.footswitch.left,
+							top: b.footswitch.top,
+							width: `${C}%`,
+							aspectRatio: "1 / 1",
+							transform: "translate(-50%, -50%)",
+							filter: "drop-shadow(0 2px 2px rgba(0,0,0,0.45))"
+						},
+						children: [/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ o("radialGradient", {
+							id: "silverHexNut",
+							cx: "40%",
+							cy: "35%",
+							r: "65%",
+							children: [
+								/* @__PURE__ */ a("stop", {
+									offset: "0%",
+									stopColor: "#f8f8f8"
+								}),
+								/* @__PURE__ */ a("stop", {
+									offset: "45%",
+									stopColor: "#c8c8c8"
+								}),
+								/* @__PURE__ */ a("stop", {
+									offset: "100%",
+									stopColor: "#707070"
+								})
+							]
+						}) }), /* @__PURE__ */ a("polygon", {
+							points: "5,50 27.5,11 72.5,11 95,50 72.5,89 27.5,89",
+							fill: "url(#silverHexNut)",
+							stroke: "#333",
+							strokeWidth: "2",
+							strokeLinejoin: "round"
+						})]
+					}),
+					(H || U || W) && /* @__PURE__ */ a("div", {
+						className: "absolute flex items-center gap-1",
+						style: {
+							left: b.pedalIO.left,
+							top: b.pedalIO.top,
+							transform: "translate(-50%, -50%)"
+						},
+						children: V ? /* @__PURE__ */ o(i, { children: [U && /* @__PURE__ */ a(O, {
+							onClick: U,
+							disabled: q,
+							busy: G,
+							label: "Read programs from pedal",
+							children: /* @__PURE__ */ a(A, {})
+						}), W && /* @__PURE__ */ a(O, {
+							onClick: W,
+							disabled: q,
+							busy: K,
+							label: "Write programs to pedal",
+							children: /* @__PURE__ */ a(j, {})
+						})] }) : H && /* @__PURE__ */ a("button", {
+							type: "button",
+							onClick: H,
+							className: "px-2 py-1 rounded border border-border bg-surface-card text-[10px] font-semibold text-text-primary hover:border-gold-dim transition-colors whitespace-nowrap",
+							children: "Connect"
+						})
+					}),
+					/* @__PURE__ */ a("button", {
+						onClick: R,
+						"aria-label": L ? "Bypassed — click to engage" : "Engaged — click to bypass",
+						className: "absolute rounded-full cursor-pointer",
+						style: {
+							left: b.footswitch.left,
+							top: b.footswitch.top,
+							width: `${S}%`,
+							aspectRatio: "1 / 1",
+							transform: "translate(-50%, -50%)",
+							background: "radial-gradient(circle at 35% 30%, #fafafa 0%, #cfcfcf 45%, #888 90%, #555 100%)",
+							border: "1.5px solid #222",
+							boxShadow: "0 2px 4px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -2px 3px rgba(0,0,0,0.25)"
+						},
+						children: /* @__PURE__ */ a("span", {
+							className: "absolute rounded-full pointer-events-none",
+							style: {
+								left: "50%",
+								top: "50%",
+								width: "80%",
+								aspectRatio: "1 / 1",
+								transform: "translate(-50%, -50%)",
+								background: "radial-gradient(circle at 40% 35%, #f0f0f0 0%, #b0b0b0 60%, #707070 100%)",
+								border: "1px solid #444",
+								boxShadow: "inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.35)"
+							}
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-3 flex-wrap justify-center",
+				children: [
+					/* @__PURE__ */ a("button", {
+						onClick: P ? I : F,
+						className: "px-4 py-1.5 rounded border border-border bg-surface-card text-sm font-semibold text-text-primary hover:border-gold-dim transition-colors",
+						children: P ? "Pause" : "Play"
+					}),
+					_ && _.length > 0 && /* @__PURE__ */ a(y, {
+						clips: _,
+						selectedClipId: T,
+						onSelect: N
+					}),
+					/* @__PURE__ */ a("div", {
+						role: "radiogroup",
+						"aria-label": "Output channel mode",
+						title: "Mono matches the current Easy Spin hardware (DACL to both jacks). Stereo plays the FV-1's native left/right outputs.",
+						className: "flex items-center rounded border border-border bg-surface-card text-sm overflow-hidden",
+						children: ["mono", "stereo"].map((e) => /* @__PURE__ */ a("button", {
+							type: "button",
+							role: "radio",
+							"aria-checked": z === e,
+							onClick: () => B(e),
+							className: `px-3 py-1.5 font-semibold transition-colors ${z === e ? "bg-gold text-surface" : "text-text-secondary hover:text-text-primary"}`,
+							children: e === "mono" ? "Mono" : "Stereo"
+						}, e))
+					})
+				]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "w-full space-y-2",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ a("h3", {
+						className: "text-xs font-semibold uppercase tracking-wider text-text-muted",
+						children: "Programs on Pedal"
+					}), Z && m && /* @__PURE__ */ a("button", {
+						type: "button",
+						onClick: m,
+						className: "text-[11px] text-text-muted hover:text-red-400 transition-colors",
+						title: "Clear all local slot assignments",
+						children: "Unassign all"
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: "grid grid-cols-2 gap-2",
+					children: Array.from({ length: c }, (e, t) => {
+						let n = l === t, r = J === t, i = d?.[t], s = !i;
+						return /* @__PURE__ */ o("div", {
+							role: "button",
+							tabIndex: 0,
+							onClick: () => u(t),
+							onKeyDown: (e) => {
+								(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u(t));
+							},
+							onDragOver: (e) => {
+								f && (e.preventDefault(), e.dataTransfer.dropEffect = "copy", J !== t && Y(t));
+							},
+							onDragLeave: () => Y(null),
+							onDrop: (e) => {
+								if (!f) return;
+								e.preventDefault(), Y(null);
+								let n = e.dataTransfer.getData("text/plain");
+								n && f(t, n);
+							},
+							className: [
+								"flex items-center gap-2 px-2 py-2 rounded border text-left transition-colors cursor-pointer",
+								"bg-surface-card text-sm outline-none focus-visible:ring-1 focus-visible:ring-gold-dim",
+								n ? "border-gold-dim ring-1 ring-gold-dim/60 text-text-primary" : "border-border text-text-primary hover:border-gold-dim",
+								r ? "border-dashed border-gold-dim bg-gold-dim/10" : ""
+							].join(" "),
+							children: [
+								/* @__PURE__ */ a("span", {
+									className: ["flex-none w-6 h-6 inline-flex items-center justify-center rounded-full text-xs font-bold", n ? "bg-gold-dim text-black" : "bg-black/30 text-text-primary"].join(" "),
+									children: t + 1
+								}),
+								/* @__PURE__ */ a("span", {
+									className: ["flex-1 min-w-0 truncate", s ? "italic text-text-muted" : "font-medium"].join(" "),
+									children: s ? "Empty" : i
+								}),
+								!s && h && Q && /* @__PURE__ */ a("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation(), h(t);
+									},
+									disabled: g !== null,
+									"aria-label": `Write slot ${t + 1} to pedal`,
+									title: "Write this slot to pedal",
+									className: "flex-none p-1 rounded text-text-muted hover:text-gold-dim hover:bg-black/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+									children: a(g === t ? k : j, { small: !0 })
+								}),
+								!s && p && /* @__PURE__ */ a("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation(), p(t);
+									},
+									"aria-label": `Unassign slot ${t + 1}`,
+									title: "Unassign",
+									className: "flex-none p-1 rounded text-text-muted hover:text-red-400 hover:bg-black/20 transition-colors",
+									children: /* @__PURE__ */ a(M, {})
+								})
+							]
+						}, t);
+					})
+				})]
+			})
+		]
+	});
+}
+function E({ posStyle: e, sizePct: t, value: n, label: r, onChange: i }) {
+	return /* @__PURE__ */ a("div", {
+		className: "absolute",
+		style: {
+			left: e.left,
+			top: e.top,
+			width: `${t}%`,
+			aspectRatio: "1 / 1",
+			transform: "translate(-50%, -50%)"
+		},
+		children: /* @__PURE__ */ a(f, {
+			overlay: !0,
+			value: n,
+			label: r,
+			onChange: i
+		})
+	});
+}
+function D({ posStyle: e, text: t }) {
+	return /* @__PURE__ */ a("div", {
+		className: "absolute text-center text-[11px] sm:text-xs font-semibold text-black whitespace-nowrap pointer-events-none",
+		style: {
+			left: e.left,
+			top: e.top,
+			transform: "translate(-50%, -50%)"
+		},
+		children: t
+	});
+}
+function O({ onClick: e, disabled: t, busy: n, label: r, children: i }) {
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		onClick: e,
+		disabled: t,
+		"aria-label": r,
+		title: r,
+		className: "p-1 rounded border border-border bg-surface-card text-text-primary hover:border-gold-dim hover:text-gold-dim disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+		children: n ? /* @__PURE__ */ a(k, {}) : i
+	});
+}
+function k({ small: e = !1 }) {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: e ? "w-3.5 h-3.5 animate-spin" : "w-4 h-4 animate-spin",
+		children: /* @__PURE__ */ a("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+function A() {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "w-4 h-4",
+		children: [
+			/* @__PURE__ */ a("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ a("polyline", { points: "17 8 12 3 7 8" }),
+			/* @__PURE__ */ a("line", {
+				x1: "12",
+				y1: "3",
+				x2: "12",
+				y2: "15"
+			})
+		]
+	});
+}
+function j({ small: e = !1 }) {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: e ? "w-3.5 h-3.5" : "w-4 h-4",
+		children: [
+			/* @__PURE__ */ a("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ a("polyline", { points: "7 10 12 15 17 10" }),
+			/* @__PURE__ */ a("line", {
+				x1: "12",
+				y1: "15",
+				x2: "12",
+				y2: "3"
+			})
+		]
+	});
+}
+function M() {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "w-3.5 h-3.5",
+		children: [
+			/* @__PURE__ */ a("path", { d: "M3 6h18" }),
+			/* @__PURE__ */ a("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+			/* @__PURE__ */ a("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+			/* @__PURE__ */ a("path", { d: "M10 11v6M14 11v6" })
+		]
+	});
+}
+//#endregion
+//#region src/audio/binary.ts
+function N(e) {
+	let t = [], n = new DataView(e.buffer, e.byteOffset, e.byteLength);
+	for (let r = 0; r < e.length; r += 4) t.push(n.getUint32(r, !1));
+	return t;
+}
+//#endregion
+//#region src/simulator/useSimulator.ts
+function P({ workletUrl: i, sampleRate: a = 32768 }) {
+	let o = n(null), s = n(null), c = n(null), u = n(null), d = n(null), [f, p] = r({
+		playing: !1,
+		bypassed: !1,
+		channelMode: "mono",
+		sampleRate: null
+	}), m = e(async () => {
+		if (!o.current) return d.current ||= (async () => {
+			let e = new AudioContext({ sampleRate: a });
+			await e.audioWorklet.addModule(i);
+			let t = new AudioWorkletNode(e, "fv1-processor", { outputChannelCount: [2] });
+			t.connect(e.destination), o.current = e, s.current = t, p((t) => ({
+				...t,
+				sampleRate: e.sampleRate
+			}));
+		})(), d.current;
+	}, [i, a]), h = e(async (e) => {
+		await m();
+		let t = N(e);
+		s.current.port.postMessage({
+			type: "loadProgram",
+			machineCode: t
+		});
+	}, [m]), g = e(async (e) => {
+		await m();
+		let t = new l().assemble(e), n = t.problems.filter((e) => e.isfatal);
+		if (n.length > 0) return {
+			success: !1,
+			errors: n
+		};
+		let r = N(l.toUint8Array(t.machineCode));
+		return s.current.port.postMessage({
+			type: "loadProgram",
+			machineCode: r
+		}), { success: !0 };
+	}, [m]), _ = e(async (e) => {
+		await m();
+		let t = o.current, n = c.current !== null;
+		if (c.current) {
+			try {
+				c.current.stop();
+			} catch {}
+			c.current.disconnect(), c.current = null;
+		}
+		let r = e instanceof ArrayBuffer ? e : e.buffer.slice(e.byteOffset, e.byteOffset + e.byteLength), i = await t.decodeAudioData(r);
+		if (u.current = i, n) {
+			let e = t.createBufferSource();
+			e.buffer = i, e.loop = !0, e.connect(s.current), e.start(), c.current = e, await t.resume();
+		}
+	}, [m]), v = e(async () => {
+		await m();
+		let e = o.current, t = u.current;
+		if (!t) return;
+		if (c.current) {
+			try {
+				c.current.stop();
+			} catch {}
+			c.current.disconnect();
+		}
+		let n = e.createBufferSource();
+		n.buffer = t, n.loop = !0, n.connect(s.current), n.start(), c.current = n, await e.resume(), p((e) => ({
+			...e,
+			playing: !0
+		}));
+	}, [m]), y = e(() => {
+		if (c.current) {
+			try {
+				c.current.stop();
+			} catch {}
+			c.current.disconnect(), c.current = null;
+		}
+		o.current?.suspend(), p((e) => ({
+			...e,
+			playing: !1
+		}));
+	}, []), b = e((e, t) => {
+		s.current?.port.postMessage({
+			type: "setPot",
+			index: e,
+			value: t
+		});
+	}, []), x = e((e) => {
+		s.current?.port.postMessage({
+			type: "bypass",
+			active: e
+		}), p((t) => ({
+			...t,
+			bypassed: e
+		}));
+	}, []), S = e((e) => {
+		s.current?.port.postMessage({
+			type: "setChannelMode",
+			mode: e
+		}), p((t) => ({
+			...t,
+			channelMode: e
+		}));
+	}, []);
+	return t(() => () => {
+		if (c.current) {
+			try {
+				c.current.stop();
+			} catch {}
+			c.current.disconnect();
+		}
+		o.current?.close().catch(() => {});
+	}, []), {
+		...f,
+		loadProgram: h,
+		loadProgramFromSource: g,
+		loadClipBuffer: _,
+		play: v,
+		pause: y,
+		setPot: b,
+		setBypass: x,
+		setChannelMode: S
+	};
+}
+//#endregion
+export { y as ClipSelector, f as Knob, s as PROGRAM_SLOT_COUNT, T as PedalFace, v as ProgramSelector, N as binaryToMachineCode, P as useSimulator };
+
+//# sourceMappingURL=index.js.map