### Install Fretboard.js

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

Instructions for installing the Fretboard.js library using npm or yarn. This is the first step to include the library in your project.

```bash
npm install @moonwave99/fretboard.js --save
```

--------------------------------

### Install Fretboard.js using npm or yarn

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

This snippet shows how to install the Fretboard.js library using either npm or yarn package managers. It's a prerequisite for using the library in your project.

```bash
npm i @moonwave99/fretboard.js --save
# OR
yarn add @moonwave99/fretboard.js
```

--------------------------------

### Build Interactive Fretboard Application with Fretboard.js

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

This example showcases how to create a fully interactive fretboard application using Fretboard.js. It covers initializing the fretboard with extensive customization options, rendering scales with specific box patterns, styling notes based on their degree and position, and adding interactive elements like click events and area highlighting.

```javascript
import {
  Fretboard,
  FretboardSystem,
  Systems,
  GUITAR_TUNINGS
} from '@moonwave99/fretboard.js';

// Initialize fretboard with full options
const fretboard = new Fretboard({
  el: '#interactive-fretboard',
  tuning: GUITAR_TUNINGS.default,
  fretCount: 15,
  width: 1200,
  height: 200,
  dotSize: 24,
  dotFill: '#ecf0f1',
  dotStrokeColor: '#2c3e50',
  dotStrokeWidth: 2,
  fretColor: '#7f8c8d',
  stringColor: '#95a5a6',
  middleFretColor: '#e74c3c',
  showFretNumbers: true,
  font: 'Helvetica, Arial, sans-serif',
  dotTextSize: 11,
  dotText: ({ note, inBox }) => inBox ? note : '',
  highlightFill: 'rgba(52, 152, 219, 0.2)',
  highlightStroke: '#3498db'
});

// Render A minor pentatonic with box 1 highlighted
fretboard
  .renderScale({
    type: 'pentatonic minor',
    root: 'A',
    box: {
      system: Systems.pentatonic,
      box: 1
    }
  })
  // Style root notes
  .style({
    filter: { degree: 1 },
    fill: '#e74c3c',
    text: ({ note }) => note,
    fontFill: 'white'
  })
  // Style notes in box
  .style({
    filter: ({ inBox, degree }) => inBox && degree !== 1,
    fill: '#3498db'
  })
  // Style notes outside box
  .style({
    filter: { inBox: false },
    fill: '#bdc3c7',
    'stroke-opacity': 0.5
  });

// Add highlight for the box area
fretboard.highlightAreas([
  { string: 1, fret: 8 },
  { string: 6, fret: 5 }
]);

// Add interactive click to show note info
fretboard.on('click', (position) => {
  console.log(`Clicked: ${position.note} (String ${position.string}, Fret ${position.fret})`);
});

```

--------------------------------

### Visualize CAGED and TNPS Systems

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/musicTools.md

Provides examples of using the 'box' parameter with different systems, specifically the CAGED and Three Notes per String (TNPS) systems, to visualize their respective patterns.

```typescript
import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

const system = new FretboardSystem();

// returns the C-shaped box of the D major scale, starting on the F# in second position
system.getScale({
  type: 'major',
  root: 'D',
  box: {
    box: 'C',
    system: Systems.CAGED
  }
});

// returns the D major scale starting on the D in tenth position following the TNPS scheme
system.getScale({
  type: 'major',
  root: 'D',
  box: {
    box: 1,
    system: Systems.TNPS
  }
});
```

--------------------------------

### Get Scale from FretboardSystem

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/musicTools.md

Shows how to retrieve all occurrences of a specified scale across all strings using the getScale method. The method takes scale type and root note as parameters.

```typescript
const system = new FretboardSystem();

// returns all the E,G,A,B,D occurrences across all strings
const scale = system.getScale({
  type: 'pentatonic minor',
  root: 'E'
});
```

--------------------------------

### Render Chord Diagrams

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

The `renderChord()` method draws chord diagrams on the fretboard using standard chord notation strings. It supports muted strings ('x'), open strings ('0'), and specific frets (numbers). Barre chords can be indicated using an optional second argument, which can specify a single barre or an array of barres with start and end strings.

```javascript
import { Fretboard } from '@moonwave99/fretboard.js';

// Open C major chord
const fretboard1 = new Fretboard({
  el: '#chord1',
  fretCount: 4,
  showFretNumbers: false
});
fretboard1.renderChord('x32010');  // x=muted, 0=open, n=fret number

// E7#9 (Hendrix chord) with crop
const fretboard2 = new Fretboard({
  el: '#chord2',
  fretCount: 4,
  crop: true,
  showFretNumbers: true
});
fretboard2.renderChord('x7678x');

// For frets above 9, use dash notation
const fretboard3 = new Fretboard({
  el: '#chord3',
  fretCount: 4,
  crop: true
});
fretboard3.renderChord('10-x-10-10-8-x');  // Dmadd11

// F major with barre
const fretboard4 = new Fretboard({
  el: '#chord4',
  fretCount: 4,
  crop: true,
  showFretNumbers: false
});
fretboard4.renderChord('133211', { fret: 1 });

// B minor with partial barre
const fretboard5 = new Fretboard({
  el: '#chord5',
  fretCount: 4,
  crop: true
});
fretboard5.renderChord('x24432', { fret: 2, stringFrom: 5 });

// C major barre with multiple barres
const fretboard6 = new Fretboard({
  el: '#chord6',
  fretCount: 4,
  crop: true
});
fretboard6.renderChord('x35553',
  [
    { fret: 3, stringFrom: 5 },
    { fret: 5, stringFrom: 4, stringTo: 2 }
  ]
);
```

--------------------------------

### Generate Tetrachord Patterns with Fretboard.js

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

The `tetrachord` function generates four-note scale segments (tetrachords) with various layouts for scale practice. It requires specifying the root note, starting string and fret, scale type, and desired layout. The output is an array of note positions that can be rendered on a Fretboard instance.

```javascript
import { tetrachord, TetrachordTypes, TetrachordLayouts, Fretboard } from '@moonwave99/fretboard.js';

// Linear tetrachord (all notes on one string)
const majorTetrachord = tetrachord({
  root: 'E',
  string: 6,
  fret: 0,
  type: TetrachordTypes.Major,      // Major, Minor, Phrygian, Harmonic, Lydian
  layout: TetrachordLayouts.Linear
});
// Returns: [
//   { string: 6, fret: 0, note: 'E' },
//   { string: 6, fret: 2, note: 'F#' },
//   { string: 6, fret: 4, note: 'G#' },
//   { string: 6, fret: 5, note: 'A' }
// ]

// 3+1 layout (3 notes on one string, 1 on next)
const threePlusOne = tetrachord({
  root: 'A',
  string: 5,
  fret: 0,
  type: TetrachordTypes.Major,
  layout: TetrachordLayouts.ThreePlusOne
});

// 2+2 layout
const twoPlusTwo = tetrachord({
  root: 'D',
  string: 4,
  fret: 0,
  type: TetrachordTypes.Minor,
  layout: TetrachordLayouts.TwoPlusTwo
});

// 1+3 layout
const onePlusThree = tetrachord({
  root: 'G',
  string: 3,
  fret: 0,
  type: TetrachordTypes.Phrygian,
  layout: TetrachordLayouts.OnePlusThree
});

// Render tetrachord on fretboard
const fretboard = new Fretboard({ el: '#fretboard', fretCount: 6 });
fretboard.setDots(majorTetrachord).render();

// Tetrachord types intervals:
// Major: M2, M2, m2 (whole, whole, half)
// Minor: M2, m2, M2 (whole, half, whole)
// Phrygian: m2, M2, M2 (half, whole, whole)
// Harmonic: m2, A2, m2 (half, aug2nd, half)
// Lydian: M2, M2, M2 (whole, whole, whole)

```

--------------------------------

### Initialize FretboardSystem

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/musicTools.md

Demonstrates how to create a new FretboardSystem instance, with options for custom tuning and fret count. Defaults to standard tuning and 15 frets if no options are provided.

```typescript
import { FretboardSystem } from '@moonwave99/fretboard.js';

// defaults to standard tuning and 15 frets
const system = new FretboardSystem();

// creates a long neck drop D guitar
const system = new FretboardSystem({
  tuning: ['D2', 'A2', 'D3', 'G3', 'B3', 'E4'],
  fretCount: 24
});
```

--------------------------------

### Create Fretboard Instance with Options

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

Shows how to create a new Fretboard instance with various configuration options. This includes setting the DOM element, tuning, string and fret counts, dimensions, styling, and behavior.

```javascript
import { Fretboard, GUITAR_TUNINGS } from '@moonwave99/fretboard.js';

// Create fretboard with custom options
const fretboard = new Fretboard({
  el: '#fretboard',                    // DOM selector or element
  tuning: GUITAR_TUNINGS.default,      // ["E2", "A2", "D3", "G3", "B3", "E4"]
  stringCount: 6,                       // Number of strings
  fretCount: 15,                        // Number of frets to display
  width: 960,                           // SVG width
  height: 150,                          // SVG height
  dotSize: 20,                          // Dot diameter
  dotFill: 'white',                     // Dot fill color
  dotStrokeColor: '#555',               // Dot stroke color
  fretColor: '#666',                    // Fret line color
  stringColor: '#666',                  // String color
  showFretNumbers: true,                // Show fret numbers below
  scaleFrets: true,                     // Logarithmic fret spacing
  crop: false,                          // Crop to dot range
  font: 'Arial',                        // Text font family
  dotText: (dot) => dot.note || ''      // Function to generate dot labels
});

// Available preset tunings
console.log(GUITAR_TUNINGS);
// {
//   default: ["E2", "A2", "D3", "G3", "B3", "E4"],
//   halfStepDown: ["Eb2", "Ab2", "Db3", "Gb3", "Bb3", "Eb4"],
//   dropD: ["D2", "A2", "D3", "G3", "B3", "E4"],
//   openG: ["D2", "G2", "D3", "G3", "B3", "D4"],
//   DADGAD: ["D2", "A2", "D3", "G3", "A3", "D4"]
// }
```

--------------------------------

### Import and Initialize Fretboard.js

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Demonstrates how to import the Fretboard class and initialize a new instance with configuration options. It requires a target DOM element and allows customization of colors.

```javascript
const { Fretboard } = require('@moonwave99/fretboard.js');
// OR
import { Fretboard } from '@moonwave99/fretboard.js';

const fretboard = new Fretboard({
  el: '#fretboard',
  fretColor: 'blue',
  dotFill: 'red',
  // ... other options
});
```

--------------------------------

### Fretboard Configuration Options

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

These are the configuration options available when initializing or styling the Fretboard.js object.

```APIDOC
## Fretboard Configuration Options

### Description
Configuration options that can be passed to the Fretboard constructor or used within the `style()` method.

### Parameters
#### Request Body (for constructor or style method)
- **barresColor** (string) - Optional - Default: '#666' - Amount of empty frets to display before dots.
- **highlightPadding** (number) - Optional - Default: 10 - Highlight padding.
- **highlightRadius** (number) - Optional - Default: 10 - Highlight border radius.
- **highlightStroke** (string) - Optional - Default: 'transparent' - Highlight stroke color.
- **highlightFill** (string) - Optional - Default: 'dodgerblue' - Highlight fill color.
- **highlightBlendMode** (string) - Optional - Default: 'color-burn' - Highlight blend mode.

### Request Example (Style Method)
```json
{
  "barresColor": "#333",
  "highlightPadding": 5,
  "highlightRadius": 5,
  "highlightStroke": "black",
  "highlightFill": "yellow",
  "highlightBlendMode": "normal"
}
```

### Response
#### Success Response (200)
N/A for configuration options.

#### Response Example
N/A
```

--------------------------------

### Visualize Scale Boxes with FretboardSystem

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/musicTools.md

Illustrates how to use the 'box' parameter in getScale to visualize specific patterns like pentatonic boxes. The 'inBox' property can be used for styling rendered notes.

```typescript
import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

const system = new FretboardSystem();

// returns all the E,G,A,B,D occurrences across all strings, and highlights the first position pentatonic box
const scale = system.getScale({
  type: 'pentatonic minor',
  root: 'E',
  box: {
    box: 1,
    system: Systems.pentatonic
  }
});
```

--------------------------------

### Import Fretboard.js

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

Demonstrates how to import the Fretboard class from the library in both CommonJS and ES Modules environments. This is necessary to instantiate the Fretboard.

```javascript
// CommonJS
const { Fretboard } = require('@moonwave99/fretboard.js');

// ES Modules
import { Fretboard } from '@moonwave99/fretboard.js';
```

--------------------------------

### Fretboard.js Configuration Options

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

This section outlines the available configuration options for initializing and customizing the Fretboard.js component. These options control the visual appearance and behavior of the fretboard.

```APIDOC
## Fretboard.js Initialization and Configuration

### Description
This describes the configuration options for initializing the Fretboard.js component. These options allow customization of the fretboard's appearance, including its size, colors, and string/fret details.

### Method
Initialization typically involves passing a configuration object to a constructor or an initialization function.

### Endpoint
N/A (Client-side JavaScript library)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
This section details the parameters that can be passed within a configuration object during initialization.

- **el** (string) - Required - The CSS selector for the container element where the fretboard will be rendered.
- **tuning** (string[]) - Optional - An array of strings representing the tuning of the instrument's strings. Defaults to standard guitar tuning: `["E2", "A2", "D3", "G3", "B3", "E4"]`.
- **stringCount** (number) - Optional - The number of strings to display on the fretboard. Defaults to 6.
- **stringWidth** (number | [number]) - Optional - The stroke width for the string lines. Can be a single number for all strings or an array of 6 numbers for individual string widths. Defaults to 1.
- **stringColor** (string) - Optional - The color of the string lines. Defaults to '#666'.
- **fretCount** (number) - Optional - The number of frets to display. Defaults to 15.
- **fretWidth** (string) - Optional - The stroke width for the fret lines. Defaults to 1.
- **fretColor** (string) - Optional - The color of the fret lines. Defaults to '#666'.
- **nutWidth** (string) - Optional - The stroke width for the nut line. Defaults to 7.
- **nutColor** (string) - Optional - The color of the nut line. Defaults to '#666'.
- **middleFretColor** (string) - Optional - The color of the middle fret line. Defaults to '#ff636c'.
- **middleFretWidth** (string) - Optional - The stroke width for the middle fret line. Defaults to 3.
- **scaleFrets** (string) - Optional - A boolean indicating whether to space frets logarithmically (`true`) or linearly (`false`). Defaults to `true`.
- **topPadding** (string) - Optional - The padding at the top of the SVG container. Defaults to 20.
- **bottomPadding** (string) - Optional - The padding at the bottom of the SVG container. Defaults to 15.

### Request Example
```javascript
new Fretboard({
  el: '#myFretboardContainer',
  tuning: ['E2', 'A2', 'D3', 'G3', 'B3', 'E4'],
  stringCount: 6,
  stringColor: 'blue',
  fretCount: 12,
  scaleFrets: false
});
```

### Response
#### Success Response (Initialization)
Upon successful initialization, the Fretboard.js component will render the fretboard visualization within the specified container element.

#### Response Example
(No direct response body, but the DOM will be updated with the fretboard SVG.)
```

--------------------------------

### render()

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Renders the fretboard. This method is chainable.

```APIDOC
## POST /fretboard/render

### Description
Renders the current state of the fretboard visualization. This method is chainable and returns the Fretboard instance.

### Method
POST

### Endpoint
`/fretboard/render`

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **Fretboard** (object) - The Fretboard instance itself, allowing for method chaining.

#### Response Example
```json
{
  "instance": "Fretboard"
}
```
```

--------------------------------

### Render Barre Chords with Fretboard.js

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/snippets.md

Demonstrates rendering barre chords at different positions using Fretboard.js. It shows how to specify the barre's fret and the range of strings it covers. The `fret` option in `renderChord` indicates the barre position, and `stringFrom`/`stringTo` define the barre's extent.

```typescript
// renders a F major in first position
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true
});

fretboard.renderChord('133211', { fret: 1 });

// renders a B minor in second position
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true
});

fretboard.renderChord('x24432', { fret: 2, stringFrom: 5 });

// renders a C major in third position
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true
});

fretboard.renderChord('x35553', [
  { fret: 3, stringFrom: 5 },
  { fret: 5, stringFrom: 4, stringTo: 2 }
]);
```

--------------------------------

### Set Dots and Render Fretboard

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

Demonstrates how to define positions for dots on the fretboard using `setDots()` and then render them using `render()`. The `setDots` method accepts an array of objects, each specifying a string and fret, and optionally custom properties like 'note'. The methods are chainable.

```javascript
import { Fretboard } from '@moonwave99/fretboard.js';

const fretboard = new Fretboard({ el: '#fretboard' });

// Define positions (string: 1-6 from high to low, fret: 0-n)
const cMajorChord = [
  { string: 5, fret: 3, note: 'C' },    // C on A string
  { string: 4, fret: 2, note: 'E' },    // E on D string
  { string: 3, fret: 0, note: 'G' },    // G on G string
  { string: 2, fret: 1, note: 'C' },    // C on B string
  { string: 1, fret: 0, note: 'E' }     // E on high E string
];

// Set dots and render (chainable)
fretboard.setDots(cMajorChord).render();

// Position object can include custom properties
const annotatedDots = [
  { string: 6, fret: 3, note: 'G', interval: '1P', degree: 1 },
  { string: 5, fret: 2, note: 'B', interval: '3M', degree: 3 },
  { string: 4, fret: 0, note: 'D', interval: '5P', degree: 5 },
  { string: 3, fret: 0, note: 'G', interval: '1P', degree: 1 },
  { string: 2, fret: 0, note: 'B', interval: '3M', degree: 3 },
  { string: 1, fret: 3, note: 'G', interval: '1P', degree: 1 }
];

fretboard.setDots(annotatedDots).render();
```

--------------------------------

### style()

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Applies styling properties to selected positions on the fretboard. This method is chainable.

```APIDOC
## POST /fretboard/style

### Description
Applies styling properties to positions on the fretboard. You can filter which positions are affected using the `filter` parameter. If no filter is provided, all positions are affected. This method is chainable and returns the Fretboard instance.

### Method
POST

### Endpoint
`/fretboard/style`

### Parameters
#### Request Body
- **filter** (Function | Object) - Optional - A function that returns true for positions to be styled, or an object with properties to filter by (e.g., `{ interval: '1P' }`). If omitted, all positions are styled.
- **text** (Function) - Optional - A function that returns the text to display for a position (e.g., `({ note }) => note`).
- **fontSize** (number) - Optional - The font size for the text.
- **fontFill** (string) - Optional - The color of the text.
- **[key: string]** (string | number | boolean) - Any other valid SVG attribute or style property (e.g., `fill`, `stroke`, `opacity`).

### Request Example
```json
{
  "filter": {"interval": "1P"},
  "text": "({ note }) => note",
  "fill": "red",
  "fontSize": 12,
  "fontFill": "white"
}
```

### Response
#### Success Response (200)
- **Fretboard** (object) - The Fretboard instance itself, allowing for method chaining.

#### Response Example
```json
{
  "instance": "Fretboard"
}
```
```

--------------------------------

### Fretboard API: Render

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Renders the fretboard. This method has no parameters and returns the Fretboard instance, allowing for method chaining.

```typescript
render(): Fretboard
```

--------------------------------

### Configure Custom Tuning

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Sets a custom tuning for the fretboard by providing an array of note strings. The tuning array must match the number of strings on the fretboard.

```javascript
const fretboard = new Fretboard({
  tuning: ['D2', 'G2', 'D3', 'G3', 'B3', 'D4'],
});
```

```javascript
import { GUITAR_TUNINGS } from '@moonwave99/fretboard.js';
```

--------------------------------

### Render Open C Major Chord with Fretboard.js

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/snippets.md

Renders an open C major chord by providing a string notation 'x32010' or an array of string-fret objects. It also shows how to mute specific strings. The Fretboard constructor accepts various configuration options for customization.

```javascript
const fretboard = new Fretboard({
  el: document.querySelector(...),
  width: 300,
  height: 200,
  bottomPadding: 0,
  scaleFrets: false,
  stringWidth: 2,
  fretWidth: 2,
  fretCount: 3,
  dotSize: 25,
  dotStrokeWidth: 3,
  fretNumbersMargin: 30,
  showFretNumbers: false
});

fretboard.renderChord('x32010');

// this is a shorthand for:
fretboard.renderChord([
  { string: 5, fret: 3 },
  { string: 4, fret: 2 },
  { string: 2, fret: 1 }
]);

// optional
fretboard.muteStrings({ strings: [6] });
```

--------------------------------

### Fretboard API: Render Scale

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Populates the fretboard with notes of a specified scale and root note. It accepts an object with `type` and `root` properties. An optional `box` parameter can be used to highlight a specific box within a fretboard system.

```javascript
const fretboard = new Fretboard();

// shows where all the C,D,E,F,G,A,B are across all strings
fretboard.renderScale({
  type: 'major',
  root: 'C',
});
```

```javascript
import { Fretboard, Systems } from '@moonwave99/fretboard.js';

const fretboard = new Fretboard();

// shows where all the A,B,C#,D,E,F#,G# are across all strings,
// highlighting the C box of the CAGED system (between frets 9 and 12, that is)
fretboard.renderScale({
  type: 'major',
  root: 'A',
  box: {
    system: Systems.CAGED,
    box: 'C',
  },
});
```

--------------------------------

### Custom Tuning

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Allows setting a custom tuning for the fretboard, which affects how scales and chords are rendered. Common tunings can be imported.

```APIDOC
## Custom Tuning

### Description
Configure the fretboard with a custom tuning. This is essential for accurate rendering of scales and chords, especially when not using standard tuning. Common tunings are available for import.

### Method
`new Fretboard({ tuning: string[] })`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body (Constructor Option)
- **tuning** (string[]) - Optional - An array of strings representing the notes for each string, starting from the lowest pitch (e.g., `['D2', 'G2', 'D3', 'G3', 'B3', 'D4']`). The length of the `tuning` array must match the `stringCount` option.

### Request Example
```javascript
// Using a custom tuning (e.g., Open G)
const fretboard = new Fretboard({
  tuning: ['D2', 'G2', 'D3', 'G3', 'B3', 'D4'],
});

// Importing and using a standard tuning (e.g., Drop D)
import { GUITAR_TUNINGS } from '@moonwave99/fretboard.js';
const fretboardDropD = new Fretboard({
  tuning: GUITAR_TUNINGS.dropD,
});
```

### Response
#### Success Response (Fretboard Instance)
Initializes a Fretboard instance with the specified tuning.

#### Response Example
(Initializes `Fretboard` instance)
```

--------------------------------

### Calculate Tetrachord Positions

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/musicTools.md

Demonstrates the usage of the 'tetrachord' function to find positions for a given tetrachord. It requires root note, string, fret, type, and layout as parameters.

```typescript
import {
  tetrachord,
  TetrachordTypes,
  TetrachordLayouts
} from '@moonwave99/fretboard.js';

const lowerTetrachord = tetrachord({
  root: 'E',
  string: 5,
  fret: 7,
  type: TetrachordTypes.Major,
  layout: TetrachordLayouts.ThreePlusOne
}): Position[]
```

--------------------------------

### Render Chord Voicing String

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Renders chord voicings from a string notation (e.g., 'x32010'). Supports open chords, Hendrix chords, and chords with frets above the 9th using dash-split notation. Optionally accepts Barre objects for barre chords.

```typescript
renderChord(chord: string, barres?: Barre | Barre[]): Fretboard
```

```typescript
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
});
fretboard.renderChord('x32010');
```

```typescript
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: true,
  crop: true,
});
fretboard.renderChord('x7678x');
```

```typescript
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true,
});
fretboard.renderChord('133211', { fret: 1 });
```

```typescript
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true,
});
fretboard.renderChord('x24432', { fret: 2, stringFrom: 5 });
```

```typescript
const fretboard = new Fretboard({
  fretCount: 3,
  showFretNumbers: false,
  crop: true,
});
fretboard.renderChord('x35553', [
  { fret: 3, stringFrom: 5 },
  { fret: 5, stringFrom: 4, stringTo: 2 },
]);
```

--------------------------------

### Render Scales with Highlighting Systems

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

The `renderScale()` method visualizes musical scales on the fretboard. It supports various scale types and roots, and can optionally highlight notes using different systems like CAGED, Pentatonic, or TNPS (Three Notes Per String). The `dotText` option can be customized to display notes only when they are part of a highlighted box.

```javascript
import { Fretboard, Systems } from '@moonwave99/fretboard.js';

// Render C major scale across entire fretboard
const fretboard1 = new Fretboard({ el: '#scale1' });
fretboard1.renderScale({
  type: 'major',
  root: 'C'
});

// A major with CAGED C-shape box highlighted
const fretboard2 = new Fretboard({
  el: '#scale2',
  dotText: ({ note, inBox }) => inBox ? note : ''
});
fretboard2
  .renderScale({
    type: 'major',
    root: 'A',
    box: {
      system: Systems.CAGED,
      box: 'C'  // CAGED boxes: 'C', 'A', 'G', 'E', 'D'
    }
  })
  .style({
    filter: { inBox: true },
    fill: '#4a90d9'
  });

// E minor pentatonic with box 1
const fretboard3 = new Fretboard({ el: '#scale3' });
fretboard3
  .renderScale({
    type: 'pentatonic minor',
    root: 'E',
    box: {
      system: Systems.pentatonic,
      box: 1  // Pentatonic boxes: 1-5
    }
  })
  .style({
    filter: { inBox: true },
    fill: '#e74c3c'
  });

// D major with TNPS (Three Notes Per String) system
const fretboard4 = new Fretboard({ el: '#scale4' });
fretboard4.renderScale({
  type: 'major',
  root: 'D',
  box: {
    system: Systems.TNPS,
    box: 1  // TNPS boxes: 1-7
  }
});

// Higher octave position using root with octave
const fretboard5 = new Fretboard({ el: '#scale5' });
fretboard5.renderScale({
  type: 'pentatonic minor',
  root: 'E3',  // E in octave 3 (12th fret position)
  box: {
    system: Systems.pentatonic,
    box: 1
  }
});
```

--------------------------------

### FretboardSystem Class for Music Theory Calculations

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

The FretboardSystem class offers music theory calculations, such as scale generation and note identification, independently of the rendering process. It supports various tunings and fret counts, and can identify scale positions within predefined boxes.

```javascript
import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

// Create system with default tuning (standard guitar)
const system = new FretboardSystem();

// Create system with custom tuning
const dropDSystem = new FretboardSystem({
  tuning: ['D2', 'A2', 'D3', 'G3', 'B3', 'E4'],
  fretCount: 24
});

// Get all positions for a scale
const cMajorScale = system.getScale({
  type: 'major',
  root: 'C'
});

// Get scale with box highlighting
const aPentatonic = system.getScale({
  type: 'pentatonic minor',
  root: 'A',
  box: {
    system: Systems.pentatonic,
    box: 1
  }
});

// Get note at specific position
const noteInfo = system.getNoteAtPosition({ string: 1, fret: 5 });
console.log(noteInfo);
```

--------------------------------

### renderScale()

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Populates the fretboard with notes of a specified scale. This method is chainable.

```APIDOC
## POST /fretboard/renderScale

### Description
Populates the fretboard with all the notes of a given scale. This method is chainable and returns the Fretboard instance. An optional `box` parameter can be used to highlight a specific box within a system.

### Method
POST

### Endpoint
`/fretboard/renderScale`

### Parameters
#### Request Body
- **type** (string) - Required - The type of the scale (e.g., 'major', 'minor').
- **root** (string) - Required - The root note of the scale (e.g., 'C', 'A').
- **box** (object) - Optional - An object to specify a box to highlight.
  - **box.system** (Systems) - Required if `box` is provided - The system for the box (e.g., `Systems.CAGED`).
  - **box.box** (string | number) - Required if `box` is provided - The identifier for the box (e.g., 'C' for CAGED, or a fret number).

### Request Example
```json
{
  "type": "major",
  "root": "C"
}
```

### Request Example with Box Highlight
```json
{
  "type": "major",
  "root": "A",
  "box": {
    "system": "CAGED",
    "box": "C"
  }
}
```

### Response
#### Success Response (200)
- **Fretboard** (object) - The Fretboard instance itself, allowing for method chaining.

#### Response Example
```json
{
  "instance": "Fretboard"
}
```
```

--------------------------------

### renderChord()

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Renders a chord on the fretboard using a string notation. Supports muted strings ('x') and frets above 9 using dash-split notation. Can also accept barre parameters.

```APIDOC
## renderChord()

### Description
Renders a chord voicing onto the fretboard using a string notation. The notation maps to strings from bottom to top (e.g., 'x32010' for C Major).

### Method
`renderChord(chord: string, barres?: Barre | Barre[]): Fretboard`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **chord** (string) - Required - A string representing the chord voicing (e.g., 'x32010'). Use dash-split notation for frets above 9 (e.g., '10-x-10-10-8-x').
- **barres** (Barre | Barre[]) - Optional - Defines barre chords. Can be a single `Barre` object or an array of `Barre` objects.
  - **Barre Object**: 
    - **fret** (number) - Required - The fret number for the barre.
    - **stringFrom** (number) - Optional - The starting string for the barre (defaults to the lowest string).
    - **stringTo** (number) - Optional - The ending string for the barre (defaults to the first string).

### Request Example
```typescript
// Renders an open C major
const fretboard = new Fretboard({ fretCount: 3 });
fretboard.renderChord('x32010');

// Renders a F major in first position with a barre
fretboard.renderChord('133211', { fret: 1 });

// Renders a C major in third position with multiple barres
fretboard.renderChord('x35553', [
  { fret: 3, stringFrom: 5 },
  { fret: 5, stringFrom: 4, stringTo: 2 },
]);
```

### Response
#### Success Response (Fretboard)
Returns the Fretboard instance for chaining.

#### Response Example
(Returns `this` instance of Fretboard)
```

--------------------------------

### Set and Render Fretboard Dots

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

This snippet illustrates how to define and render dots on the fretboard, representing chord shapes or notes. The `setDots` method accepts an array of string/fret objects, and `render` displays them. Chaining is also supported.

```javascript
const dots = [
  {
    string: 5,
    fret: 3,
  },
  {
    string: 4,
    fret: 2,
  },
  {
    string: 2,
    fret: 1,
  },
];

fretboard.setDots(dots).render();
```

--------------------------------

### Fretboard API: Style Positions

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Applies styling properties to selected fretboard positions. It accepts an options object with a filter function, text formatter, font size, font color, and other style properties. If no filter is provided, all positions are styled. Returns the Fretboard instance.

```typescript
style({
  filter = (): boolean => true,
  text,
  fontSize,
  fontFill,
  ...opts
}: {
  filter?: (position: Position) => boolean | Record<string, string|number|boolean>;
  text?: (position: Position) => string;
  fontSize?: number;
  fontFill?: string;
  [key: string]: string | number | Function;
}): Fretboard
```

```typescript
const fretboard = new Fretboard();

fretboard
  .setDots(dots)
  .render()
  .style({
    // this gives us just the root notes
    filter: { interval: '1P' },
    // displays the note name
    text: ({ note }) => note,
    // sets the value of the fill attribute
    fill: 'red',
  });
```

--------------------------------

### Event Handling

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Allows listening to 'click' and 'mousemove' events on the fretboard instance. Event callbacks receive the `Position` and the original `MouseEvent`.

```APIDOC
## Event Handling

### Description
Fretboard instances emit `click` and `mousemove` events. The callback function receives the `Position` object (containing string and fret) and the original `MouseEvent`.

### Method
`on(eventName: 'click' | 'mousemove', callback: (position: Position, event: MouseEvent) => void): void`
`removeEventListeners(): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **eventName** ('click' | 'mousemove') - Required - The name of the event to listen for.
- **callback** ((position: Position, event: MouseEvent) => void) - Required - The function to execute when the event is triggered.
  - **position** (Position) - The string and fret number where the event occurred.
  - **event** (MouseEvent) - The original browser mouse event.

### Request Example
```typescript
const fretboard = new Fretboard();
fretboard.render([]);

// Renders a dot following the mouse coordinates
fretboard.on('mousemove', (position) => fretboard.render([position]));

// To remove all event listeners:
fretboard.removeEventListeners();
```

### Response
#### Success Response
`on`: void
`removeEventListeners`: void

#### Response Example
(No direct response body, modifies fretboard behavior or cleans up listeners)
```

--------------------------------

### Customize Dot Appearance and Behavior

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Configure the appearance and behavior of dots on the fretboard. Options include `dotSize`, `dotStrokeColor`, `dotStrokeWidth`, `dotTextSize`, `dotFill`, `dotText` function for custom labels, and `disabledOpacity` for visual feedback on disabled elements.

```javascript
const config = {
  dotSize: '20',
  dotStrokeColor: '#555',
  dotStrokeWidth: 2,
  dotTextSize: 12,
  dotFill: 'white',
  dotText: (dot) => '',
  disabledOpacity: 0.9
};
```

--------------------------------

### clearHighlightAreas()

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Clears all previously highlighted areas on the fretboard.

```APIDOC
## clearHighlightAreas()

### Description
Clears all the highlighted areas that were previously drawn on the fretboard.

### Method
`clearHighlightAreas(): Fretboard`

### Parameters
None

### Request Example
```typescript
const fretboard = new Fretboard();
fretboard.renderScale({ root: 'G', type: 'major' });
fretboard.highlightAreas([{ string: 1, fret: 5 }, { string: 6, fret: 2 }]);
// ... later
fretboard.clearHighlightAreas();
```

### Response
#### Success Response (Fretboard)
Returns the Fretboard instance for chaining.

#### Response Example
(Returns `this` instance of Fretboard)
```

--------------------------------

### Configure SVG Dimensions and Padding

Source: https://github.com/moonwave99/fretboard.js/blob/master/site/data/documentation/fretboard.md

Set the dimensions and padding for the SVG element. `leftPadding`, `rightPadding`, `height`, and `width` control the overall size and spacing of the fretboard visualization. These parameters are essential for fitting the SVG into your layout and ensuring proper visual spacing.

```javascript
const config = {
  leftPadding: '20',
  rightPadding: '20',
  height: '150',
  width: '960'
};
```

--------------------------------

### Clear Fretboard Dots

Source: https://context7.com/moonwave99/fretboard.js/llms.txt

Demonstrates the use of the `clear()` method to remove all previously rendered dots from the fretboard visualization. This allows for updating the fretboard with new sets of dots.

```javascript
import { Fretboard } from '@moonwave99/fretboard.js';

const fretboard = new Fretboard({ el: '#fretboard' });

// Render some dots
fretboard.setDots([
  { string: 1, fret: 5 },
  { string: 2, fret: 5 },
  { string: 3, fret: 5 }
]).render();

// Clear all dots
fretboard.clear();

// Render new dots
fretboard.setDots([
  { string: 4, fret: 7 },
  { string: 5, fret: 7 }
]).render();
```