@audiofab-io/easy-spin-ui

Shared React components and FV-1 simulation runtime for Audiofab's Easy Spin pedal. Used by:

• easy-spin-web — the browser-based effect loader and simulator.
• fv1-vscode — the FV-1 VS Code extension's pedal-shaped simulator and bank editor.

The package keeps the two surfaces visually and behaviourally identical: the skeuomorphic pedal, the rotary knobs, the program-slot grid, and the audio worklet that runs FV-1 programs in real time all live here.

Installation

npm install @audiofab-io/easy-spin-ui

Peer dependencies: react@^19, react-dom@^19, @audiofab-io/fv1-core@^0.4.

Usage

import '@audiofab-io/easy-spin-ui/styles.css'
import { PedalFace, useSimulator } from '@audiofab-io/easy-spin-ui'
import workletUrl  from '@audiofab-io/easy-spin-ui/worklet?url'
import pedalImage  from '@audiofab-io/easy-spin-ui/assets/pedal.png?url'

function App() {
  const simulator = useSimulator({ workletUrl })
  return (
    <PedalFace
      pedalImageUrl={pedalImage}
      pots={[0.5, 0.5, 0.5]}
      onPotChange={simulator.setPot}
      potLabels={['Decay', 'Tone', 'Mix']}
      selectedSlot={0}
      onSelectSlot={() => {}}
      selectedClipId={null}
      onSelectClip={() => {}}
      playing={simulator.playing}
      onPlay={simulator.play}
      onPause={simulator.pause}
      bypassed={simulator.bypassed}
      onToggleBypass={() => simulator.setBypass(!simulator.bypassed)}
      channelMode={simulator.channelMode}
      onChannelModeChange={simulator.setChannelMode}
    />
  )
}

The hook is intentionally headless — it doesn't know how to fetch effects or audio clips. Consumers compose their own loading conventions on top of simulator.loadProgram(binary) and simulator.loadClipBuffer(arrayBuffer).

Building

npm install
npm run build

The build produces:

• dist/index.js — main library entry (ESM)
• dist/index.d.ts — TypeScript declarations
• dist/styles.css — precompiled Tailwind stylesheet
• dist/worklet/fv1-processor.js — self-contained AudioWorklet (IIFE)
• dist/assets/pedal.png — pedal artwork

Releasing

Releases are published to npm by GitHub Actions when a tag matching v* is pushed. The workflow uses npm trusted publishing (no NPM_TOKEN required).

npm version <patch|minor|major>   # bumps package.json + creates a v* tag
git push --follow-tags

License

MIT — see LICENSE.