vector-score 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Drake Buentello
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,240 @@
+<img src="public/vector-score-icon.svg" alt="VectorScore Logo" width="150" height="150" />
+
+# Vector Score
+
+A lightweight, SVG-based TypeScript library for rendering musical staves, notes, and rhythm patterns in the browser.
+
+## Features
+
+* **Multiple Staff Types**: Supports Treble, Bass, Alto, and Grand staves.
+* **Rhythm Staff**: Dedicated staff for rhythm exercises with customizable time signatures and bar handling.
+* **Scrolling Staff** Staff made to allow for 'endless' style of notes.
+* **SVG Rendering**: Crisp, scalable vector graphics suitable for any screen size.
+* **Flexible Note Input**: Simple string-based syntax for defining notes, chords, and rests.
+* **Interactive Features**: Includes methods for error feedback (highlighting wrong notes) and note justification.
+
+## Installation
+
+```bash
+npm install DrakeB1234/VectorScore
+````
+
+## Development
+
+To start the development server with a playground:
+
+```bash
+npm run dev
+```
+
+To build the library for production:
+
+```bash
+npm run build
+```
+
+## Usage
+
+### 1. Setup HTML
+
+Create a container element in your HTML where the staff will be rendered.
+
+```html
+<div id="staff-container"></div>
+```
+
+### 2. Import and Initialize
+
+### Standard Music Staff (Treble, Bass, Alto)
+
+```typescript
+import { MusicStaff } from 'vector-score';
+
+const container = document.getElementById('staff-container');
+
+const staff = new MusicStaff(container, {
+  staffType: 'treble', // 'treble', 'bass', 'alto', or 'grand'
+  width: 400,
+  scale: 1.2,
+  spaceBelow: 1
+});
+
+// Draw a C Minor scale (quarter notes)
+// Format: NoteName + Accidental(optional) + Octave + Duration
+staff.drawNote(['C4q', 'D4q', 'Eb4q', 'F4q', 'G4q', 'Ab4q', 'Bb4q', 'C5q']);
+
+// Draw a C Chord
+staff.drawChord(['C4w', 'E4w', 'G4w']);
+
+// Evenly space all notes on the staff
+staff.justifyNotes();
+```
+#### Resulting Staff
+![Alt Text](https://raw.githubusercontent.com/DrakeB1234/VectorScore/master/public/MusicStaffTrebleResult.svg)
+
+### Grand Staff
+
+```typescript
+import { MusicStaff } from 'vector-score';
+
+const grandStaff = new MusicStaff(container, {
+  staffType: 'grand',
+  width: 400,
+  spaceBelow: 2,
+  spaceAbove: 2
+});
+
+// Notes are automatically positioned on the correct stave based on pitch
+grandStaff.drawNote(['G4q', 'E4h', 'C4w', "A3h", "F3h"]);
+
+grandStaff.drawChord(["G3w", "C4w", "E4w"]);
+```
+#### Resulting Staff
+![Alt Text](https://raw.githubusercontent.com/DrakeB1234/VectorScore/master/public/MusicStaffGrandResult.svg)
+
+### Rhythm Staff
+
+```typescript
+import { RhythmStaff } from 'vector-score';
+
+const rhythmContainer = document.getElementById('rhythm-container');
+
+const rhythm = new RhythmStaff(rhythmContainer, {
+  width: 400,
+  topNumber: 4, // Time signature numerator (e.g., 4/4 time)
+  barsCount: 2
+});
+
+// Draw notes and rests
+rhythm.drawNote(['q', 'q']); // Duration only
+rhythm.drawRest(['h']);
+
+// Draw beamed note
+rhythm.drawBeamedNotes("e", 4); // Draws a beamed note of 4 eighth notes
+
+// Finish the bar
+rhythm.drawNote(['q', 'q']);
+
+// Increment the UI to show the first beat in the bar
+rhythm.incrementCurrentBeatUI();
+```
+#### Resulting Staff
+![Alt Text](https://raw.githubusercontent.com/DrakeB1234/VectorScore/master/public/RhythmStaffResult.svg)
+
+### Scrolling Staff
+
+```typescript
+import { ScrollingStaff } from 'vector-score';
+
+const scrollingContainer = document.getElementById('scrolling-container');
+
+const scrollingStaff = new ScrollingStaff(scrollingContainer, {
+  width: 400,
+  spaceBelow: 2,
+  spaceAbove: 2,
+  onNotesOut: handleNotesOut, // Connect a handler when notes run out (optional)
+});
+
+// Handler for when notes run out
+function handleNotesOut() {
+  isNotesOut = true;
+}
+
+// ****
+// NOTE CSS SELECTOR FOR NOTES FOR ANIMATION IS
+// .vs-scrolling-notes-layer > g.vs-note-wrapper { transition: transform 0.2s ease-in }
+// ****
+
+// Add notes to the queue
+// 5 single notes, a C chord, 2 more notes, finally a D chord
+scrollingStaff.queueNotes([
+  "C4w",
+  "F4w",
+  "C4w",
+  "B4w",
+  "D4w",
+  ["C4w", "E4w", "G4w"],
+  "B4w",
+  "D4w",
+  ["D4w", "F#4w", "A4w"],
+]);
+
+// The button event listener calls 'advanceNotes()' to move the notes over, one step at a time.
+```
+#### Resulting Staff
+![Alt Text](https://raw.githubusercontent.com/DrakeB1234/VectorScore/master/public/ScrollingStaffResult.webp)
+
+## Note String Syntax
+
+Notes are defined using a specific string format parsed by the library:
+
+`[Name][Accidental?][Octave][Duration]`
+
+* **Name**: `A` - `G` (Case insensitive)
+* **Accidental**: `#` (Sharp) or `b` (Flat). Optional.
+* **Octave**: `0` - `9`
+* **Duration**:
+    * `w`: Whole
+    * `h`: Half
+    * `q`: Quarter
+    * `e`: Eighth
+
+**Examples:**
+* `C4w`: C, Octave 4, Whole note
+* `F#5q`: F Sharp, Octave 5, Quarter note
+* `Bb3e`: B Flat, Octave 3, Eighth note
+
+## API Reference
+
+### MusicStaff Class
+
+| Method | Description |
+| :--- | :--- |
+| `drawNote(notes: string \| string[])` | Draws one or multiple notes sequentially. |
+| `drawChord(notes: string \| string[])` | Draws multiple notes stacked as a chord at the current cursor position. |
+| `justifyNotes()` | Evenly spaces all currently drawn notes across the staff width. |
+| `clearAllNotes()` | Removes all notes from the staff and resets the cursor. |
+| `changeNoteByIndex(note: string, index: number)` | Replaces a note at a specific index with a new note. |
+| `changeChordByIndex(notes: string[], index: number)` | Replaces a chord at a specific index with a new chord. |
+| `destroy()` | Destroys internal arrays and elements |
+
+### RhythmStaff Class
+
+| Method | Description |
+| :--- | :--- |
+| `drawNote(notes: string \| string[])` | Draws rhythm notes. |
+| `drawRest(rests: string \| string[])` | Draws rests. |
+| `drawBeamedNotes(type: 'e'\|'s', count: number)` | Draws a group of beamed eighth or sixteenth notes. |
+| `clearAllNotes()` | Removes all items from the staff. |
+| `incrementCurrentBeatUI()` | Starts the UI for showing the current beat. Connect to a external interval for accurate showing of current beat. |
+| `resetCurrentBeatUI()` | Must be called if current beat goes over the total beats in the bar to reset its state |
+| `destroy()` | Destroys internal arrays and elements |
+
+### ScrollingStaff Class
+
+| Method | Description |
+| :--- | :--- |
+| `queueNotes(notes: (string \| string[])[])` | Queues notes on the staff. ["C4", ["C4", "E4", "G4"], "B4"] |
+| `advanceNotes()` | Advances notes to the next position |
+| `clearAllNote()` | Clears all notes on the staff |
+| `destroy()` | Destroys internal arrays and elements | 
+
+## Configuration Options
+
+### MusicStaffOptions
+* `width`: Total width of the SVG in pixels.
+* `scale`: Zoom factor (default: 1).
+* `staffType`: `'treble' | 'bass' | 'alto' | 'grand'`.
+* `spaceAbove`: Padding units above the staff (in staff line spaces).
+* `spaceBelow`: Padding units below the staff (in staff line spaces).
+* `staffColor`: CSS color string for lines and notes.
+* `staffBackgroundColor`: CSS color string for background.
+
+### RhythmStaffOptions
+* `topNumber`: The top number of the time signature (e.g., 4 for 4/4 time).
+* `barsCount`: Number of measures to draw.
+* `currentBeatUIColor`: CSS color string for current beat UI.
+* *Inherits sizing and color options from MusicStaffOptions.*
+
+### ScrollingStaffOptions
+* same as MusicStaffOptions

package/dist/classes/MusicStaff.d.ts

@@ -0,0 +1,127 @@
+import { StaffTypes } from '../types';
+export type MusicStaffOptions = {
+    width?: number;
+    scale?: number;
+    staffType?: StaffTypes;
+    spaceAbove?: number;
+    spaceBelow?: number;
+    staffColor?: string;
+    staffBackgroundColor?: string;
+};
+export default class MusicStaff {
+    private svgRendererInstance;
+    private strategyInstance;
+    private noteRendererInstance;
+    private options;
+    private noteEntries;
+    private noteCursorX;
+    /**
+     * Creates an instance of a MusicStaff, A single staff.
+     *
+     * @param rootElementCtx - The element (div) reference that will append the music staff elements to.
+     * @param options - Optional configuration settings. Can adjust staff type (treble, bass, alto, grand), width, scale, spaces above/below, etc. All config options are in the type MusicStaffOptions
+    */
+    constructor(rootElementCtx: HTMLElement, options?: MusicStaffOptions);
+    /**
+     * Draws a note on the staff.
+     * @param notes - A single string OR array of note strings in the format `[Root][Accidental?][Octave][Duration?]`.
+     * If an array is passed, it will draw each individual note on the staff.
+     *
+     * * **Root**: (A-G)
+     * * **Accidental** (Optional): `#` (sharp) `b` (flat) `n` (natural) `##` (double sharp) or `bb` (double flat).
+     * * **Octave**: The octave number (e.g., `4`).
+     * * **Duration** (Optional): `w` (whole) `h` (half) `q` (quarter) or `e` (eighth). Defaults to `w` if duration is omitted
+     * @returns void
+     * @throws {Error} If a note string is not correct format. If an array was passed, it will still draw whatever correctly formatted notes before it.
+     *
+     * * @example
+     * // Draws the specified notes individually on the staff
+     * drawNote(["D4w", "F4w", "A4w", "B#5q", "Ebb4e"]);
+     *
+     * * @example
+     * // Draws the specified single note on the staff
+     * drawNote("D4w");
+    */
+    drawNote(notes: string | string[]): void;
+    /**
+     * Draws a chord on the staff.
+     * @param notes - An array of note strings in the format `[Root][Accidental?][Octave][Duration?]`.
+     *
+     * * **Root**: (A-G)
+     * * **Accidental** (Optional): `#` (sharp) `b` (flat) `n` (natural) `##` (double sharp) or `bb` (double flat).
+     * * **Octave**: The octave number (e.g., `4`).
+     * * **Duration** (Optional): `w` (whole) `h` (half) `q` (quarter) or `e` (eighth). Defaults to `w` if duration is omitted
+     * @returns void
+     * @throws {Error} If a note string is not correct format OR if less than one note was provided.
+     *
+     * * @example
+     * // Draw a D minor chord starting on 4th octave
+     * drawChord(["D4w", "F4w", "A4w"], 0);
+    */
+    drawChord(notes: string[]): void;
+    /**
+     * Evenly spaces out the notes on the staff.
+     * @returns Returns early if no notes are on the staff
+    */
+    justifyNotes(): void;
+    /**
+     * Clears staff of notes and resets internal positioning.
+     * @returns void
+    */
+    clearAllNotes(): void;
+    /**
+     * Changes the note by index to the specified note.
+     * @param notes - A note string in the format `[Root][Accidental?][Octave][Duration?]`.
+     *
+     * * **Root**: (A-G)
+     * * **Accidental** (Optional): `#` (sharp) `b` (flat) `n` (natural) `##` (double sharp) or `bb` (double flat).
+     * * **Octave**: The octave number (e.g., `4`).
+     * * **Duration** (Optional): `w` (whole) `h` (half) `q` (quarter) or `e` (eighth). Defaults to `w` if duration is omitted
+     * @param noteIndex The index of the note that will replaced by the specified note.
+     * @returns void
+     * @throws {Error} If the index provided is out of bounds, or if a note string is not correct format.
+     *
+     * * @example
+     * // Changes note at pos `0` to a B flat quarter note on the 3rd octave
+     * changeNoteByIndex("Bb3q", 0);
+    */
+    changeNoteByIndex(note: string, noteIndex: number): void;
+    /**
+     * Changes the note by index to the specified chord.
+     * @param notes - An array of note strings in the format `[Root][Accidental?][Octave][Duration?]`.
+     *
+     * * **Root**: (A-G)
+     * * **Accidental** (Optional): `#` (sharp) `b` (flat) `n` (natural) `##` (double sharp) or `bb` (double flat).
+     * * **Octave**: The octave number (e.g., `4`).
+     * * **Duration** (Optional): `w` (whole) `h` (half) `q` (quarter) or `e` (eighth). Defaults to `w` if duration is omitted
+     * @param noteIndex The index of the note that will replaced by the specified chord.
+     * @returns void
+     * @throws {Error} If the index provided is out of bounds, or if a note string is not correct format.
+     *
+     * * @example
+     * // Changes chord at pos `0` to a C Minor chord
+     * changeChordByIndex(["C4w", "D#4w", "G4w"], 0);
+    */
+    changeChordByIndex(notes: string[], chordIndex: number): void;
+    /**
+     * Adds a class to the note by the index provided.
+     * @param className The name added to the note
+     * @param noteIndex The index of the note that will have 'className' added to it.
+     * @returns void
+     * @throws {Error} If the index provided is out of bounds
+    */
+    addClassToNoteByIndex(className: string, noteIndex: number): void;
+    /**
+     * Removes a class to the note by the index provided.
+     * @param className The name removed from the note
+     * @param noteIndex The index of the note that will have 'className' removed from it.
+     * @returns void
+     * @throws {Error} If the index provided is out of bounds
+    */
+    removeClassToNoteByIndex(className: string, noteIndex: number): void;
+    /**
+     * Removes the root svg element and cleans up arrays.
+     * @returns void
+    */
+    destroy(): void;
+}

package/dist/classes/NoteRenderer.d.ts

@@ -0,0 +1,27 @@
+import { StaffStrategy } from '../strategies/StrategyInterface';
+import { NoteObj } from '../types';
+import { default as SVGRenderer } from './SVGRenderer';
+/**
+ * @param {SVGGElement} noteGroup - The group that is returned from renderNote or renderGroup
+ * @param {NoteObj} noteObj - The parse note string into NoteObj
+ * @param {number} noteYPos - The Y pos of the notes group
+ * @param {number} accidentalOffset - The total xOffset from any accidentals from a note. Chords could have a 1..3 of these offsets
+ * @param {number} cursorOffset - The requested amount the cursor should be offset. Chords use this when a note is close and offsetted to the left.
+*/
+export type RenderNoteReturn = {
+    noteGroup: SVGGElement;
+    noteObj: NoteObj;
+    noteYPos: number;
+    accidentalOffset: number;
+    cursorOffset: number;
+};
+export default class NoteRenderer {
+    private svgRendererInstance;
+    private strategyInstance;
+    constructor(svgRenderer: SVGRenderer, strategy: StaffStrategy);
+    private drawStem;
+    private chordOffsetConsecutiveAccidentals;
+    private chordOffsetCloseNotes;
+    renderNote(noteString: string): RenderNoteReturn;
+    renderChord(notes: string[]): RenderNoteReturn;
+}

package/dist/classes/RhythmStaff.d.ts

@@ -0,0 +1,118 @@
+export type RhythmStaffOptions = {
+    width?: number;
+    scale?: number;
+    topNumber?: number;
+    barsCount?: number;
+    spaceAbove?: number;
+    spaceBelow?: number;
+    staffColor?: string;
+    staffBackgroundColor?: string;
+    currentBeatUIColor?: string;
+};
+export default class RhythmStaff {
+    private rendererInstance;
+    private options;
+    private barSpacing;
+    private quarterNoteSpacing;
+    private noteCursorX;
+    private noteEntries;
+    private maxBeatCount;
+    private currentBeatCount;
+    private currentBeatUICount;
+    private currentBeatUIElement;
+    private currentBeatUIXPos;
+    /**
+     * Creates an instance of a RhythmStaff, A single staff that will automatically apply positioning of elements based on the duration of a note.
+     *
+     * @param rootElementCtx - The element (div) reference that will append the music staff elements to.
+     * @param options - Optional configuration settings. All config options are in the type RhythmStaffOptions
+     * @throws {Error} - If top number is not 3 or 4 OR if bars count is not between 1 - 3. These are the currently only supported values.
+    */
+    constructor(rootElementCtx: HTMLElement, options?: RhythmStaffOptions);
+    private createBeatUIElement;
+    private handleNewBar;
+    private translateGroupByDuration;
+    private drawStem;
+    private renderNote;
+    private renderRest;
+    private checkAndCreateNewBar;
+    private checkAndFillBarWithRests;
+    private createRemainingRests;
+    private renderBeamRect;
+    /**
+     * Draws a note duration on the staff.
+     * @param notes - A single string OR array of note strings in the format `[Duration]`.
+     * If an array is passed, it will draw each individual note duration on the staff.
+     * If a duration exceeds the remaining value on the bar, rests will fill the empty space.
+     *
+     * * **Duration**: `w` (whole) `h` (half) `q` (quarter) `e` (eighth)
+     * @returns void
+     * @throws {Error} If a note string is not correct format. If an array was passed, it will still draw whatever correctly formatted notes before it.
+     *
+     * * @example
+     * // Draws the specified note durations individually on the staff
+     * drawNote(["q", "q", "q", "q", "w"]);
+     *
+     * * @example
+     * // Draws the specified single note duration on the staff
+     * drawNote("w");
+    */
+    drawNote(notes: string | string[]): void;
+    /**
+     * Draws a rest duration on the staff.
+     * @param rests - A single string OR array of rest strings in the format `[Duration]`.
+     * If an array is passed, it will draw each individual rest duration on the staff.
+     * If a duration exceeds the remaining value on the bar, rests will fill the empty space.
+     *
+     * * **Duration**: `w` (whole) `h` (half) `q` (quarter) `e` (eighth)
+     * @returns void
+     * @throws {Error} If a rest string is not correct format. If an array was passed, it will still draw whatever correctly formatted rests before it.
+     *
+     * * @example
+     * // Draws the specified rest durations individually on the staff
+     * drawRest(["q", "q", "q", "q", "w"]);
+     *
+     * * @example
+     * // Draws the specified single rest duration on the staff
+     * drawRest("w");
+    */
+    drawRest(rests: string | string[]): void;
+    /**
+     * Draws a beamed note of specified duration/count on the staff.
+     * Will stop beam early if bar line is reached / if beat count is over max limit
+     * @param note - A duration string of either 'e' (eighth) or 's' (sixth).
+     * @param noteCount - The amount of notes in the beam
+     *
+     * @returns void
+     * @throws {Error} If a rest string is not correct format. If an array was passed, it will still draw whatever correctly formatted rests before it.
+     *
+     * * @example
+     * // Draws a 4 beamed eighth note
+     * drawBeamedNotes("e", 4);
+     *
+     * * @example
+     * // Draws a 8 beamed sixth note
+     * drawBeamedNotes("s", 8);
+    */
+    drawBeamedNotes(note: "e" | "s", noteCount: number): void;
+    /**
+     * Will increment the UI showing the current beat in quarters. Once exceeded, must be reset with `resetCurrentBeatUI()`
+     * @returns void
+    */
+    incrementCurrentBeatUI(): void;
+    /**
+     * Resets the ui showing the current beat value.
+     * @returns void
+    */
+    resetCurrentBeatUI(): void;
+    /**
+     * Clears staff of notes and resets internal positioning.
+     * @returns void
+    */
+    clearAllNotes(): void;
+    /**
+     * Removes the root svg element and cleans up arrays.
+     * @returns void
+    */
+    destroy(): void;
+}

package/dist/classes/SVGRenderer.d.ts

@@ -0,0 +1,47 @@
+import { GlyphNames } from '../glyphs';
+export declare const SVG_HREF = "http://www.w3.org/2000/svg";
+type SVGRendererOptions = {
+    width: number;
+    height: number;
+    scale: number;
+    staffColor: string;
+    staffBackgroundColor: string;
+    useGlyphs: GlyphNames[];
+};
+type LayerNames = 'staff' | 'notes' | 'ui';
+type DrawGlyphOptions = {
+    yOffset?: number;
+    xOffset?: number;
+};
+type DrawRectOptions = {
+    x?: number;
+    y?: number;
+    fill?: string;
+};
+export default class SVGRenderer {
+    private rootElementRef;
+    private svgElementRef;
+    private parentGroupContainer;
+    private musicStaffLayer;
+    private musicNotesLayer;
+    private musicUILayer;
+    private width;
+    private scale;
+    private totalYOffset;
+    private totalHeight;
+    constructor(rootElementCtx: HTMLElement, options: SVGRendererOptions);
+    private makeGlyphDefs;
+    createGroup(className?: string): SVGGElement;
+    commitElementsToDOM(elements: SVGElement[] | SVGElement, parent?: HTMLElement | SVGElement): void;
+    getLayerByName(name: LayerNames): SVGGElement;
+    addTotalRootSvgHeight(amount: number): void;
+    addTotalRootSvgYOffset(amount: number): void;
+    applySizingToRootSvg(): void;
+    get rootSvgElement(): SVGElement;
+    get parentGroupElement(): SVGElement;
+    drawLine(x1: number, y1: number, x2: number, y2: number, parent: SVGElement): void;
+    drawRect(width: number, height: number, parent: SVGElement, options?: DrawRectOptions): SVGRectElement;
+    drawGlyph(glyphName: GlyphNames, parent: SVGElement, options?: DrawGlyphOptions): void;
+    destroy(): void;
+}
+export {};

package/dist/classes/ScrollingStaff.d.ts

@@ -0,0 +1,67 @@
+import { StaffTypes } from '../types';
+export type ScrollingStaffOptions = {
+    width?: number;
+    scale?: number;
+    staffType?: StaffTypes;
+    spaceAbove?: number;
+    spaceBelow?: number;
+    staffColor?: string;
+    staffBackgroundColor?: string;
+    onNotesOut?: () => void;
+};
+export type NoteSequence = (string | string[])[];
+export default class ScrollingStaff {
+    private svgRendererInstance;
+    private strategyInstance;
+    private noteRendererInstance;
+    private options;
+    private activeEntries;
+    private noteBuffer;
+    private notesLayer;
+    private noteCursorX;
+    /**
+     * Creates an instance of a ScrollingStaff, A single staff that takes in a queue of notes that can be advanced with in a 'endless' style of staff.
+     *
+     * @param rootElementCtx - The element (div) reference that will append the music staff elements to.
+     * @param options - Optional configuration settings. All config options are in the type ScrollingStaffOptions
+    */
+    constructor(rootElementCtx: HTMLElement, options?: ScrollingStaffOptions);
+    private renderFirstNoteGroups;
+    private renderNextNote;
+    /**
+     * Adds notes to the queue for scrolling staff. Clears any previously added notes.
+     * @param notes - A array of note strings or sub-arrays of strings.
+     * * A single string will draw a single note `C#4w`
+     * * A sub-array will draw a chord `["C4w", "E4w", "G4w"]`
+     *
+     * Note string format
+     * * **Root**: (A-G)
+     * * **Accidental** (Optional): `#` (sharp) `b` (flat) `n` (natural) `##` (double sharp) or `bb` (double flat).
+     * * **Octave**: The octave number (e.g., `4`).
+     * * **Duration** (Optional): `w` (whole) `h` (half) `q` (quarter) or `e` (eighth). Defaults to `w` if duration is omitted
+     * @param noteIndex The index of the note that will replaced by the specified note.
+     * @returns void
+     * @throws {Error} If the index provided is out of bounds, or if a note string is not correct format.
+     *
+     * * @example
+     * // Queues a few single notes, followed by a C chord
+     * queueNotes("Bb3q", "C4w", "G4q", ["C4w", "E4w", "G4w"]);
+    */
+    queueNotes(notes: NoteSequence): void;
+    /**
+     * Advances to the next note in sequence, if theres any remaining notes left.
+     * @returns void
+     * @callback onNotesOut passed in from the constructor options once notes are out.
+    */
+    advanceNotes(): void;
+    /**
+     * Clears staff of notes and resets internal positioning.
+     * @returns void
+    */
+    clearAllNotes(): void;
+    /**
+     * Removes the root svg element and cleans up arrays.
+     * @returns void
+    */
+    destroy(): void;
+}

package/dist/constants.d.ts

@@ -0,0 +1,19 @@
+import { StaffParams } from './strategies/StrategyInterface';
+import { Durations, StaffTypes } from './types';
+export declare const NAMESPACE = "vs";
+export declare const STAFF_LINE_COUNT = 5;
+export declare const STAFF_LINE_SPACING = 10;
+export declare const NOTE_LAYER_START_X = 38;
+export declare const GRAND_STAFF_SPACING = 30;
+export declare const ACCIDENTAL_OFFSET_X = -8;
+export declare const DOUBLE_SHARP_ACCIDENTAL_OFFSET_X = -2;
+export declare const DOUBLE_FLAT_ACCIDENTAL_OFFSET_X = -6;
+export declare const HALF_NOTEHEAD_WIDTH = 10;
+export declare const NOTEHEAD_STEM_HEIGHT = 28;
+export declare const NOTE_SPACING = 28;
+export declare const START_LEDGER_LINE_X = -2;
+export declare const WHOLE_NOTE_LEDGER_LINE_WIDTH = 17;
+export declare const HALF_NOTE_LEDGER_LINE_WIDTH = 12.5;
+export declare const CHORD_MAX_CONSECUTIVE_ACCIDENTALS = 3;
+export declare const staffParams: Record<StaffTypes, StaffParams>;
+export declare const durationBeatValueMap: Record<Durations, number>;

package/dist/glyphs.d.ts

@@ -0,0 +1,7 @@
+export type GlyphEntry = {
+    path: string;
+    xOffset: number;
+    yOffset: number;
+};
+export type GlyphNames = "CLEF_TREBLE" | "CLEF_BASS" | "CLEF_ALTO" | "NOTE_HEAD_WHOLE" | "NOTE_HEAD_HALF" | "NOTE_HEAD_QUARTER" | "EIGHTH_NOTE" | "EIGHTH_NOTE_FLIPPED" | "REST_WHOLE" | "REST_HALF" | "REST_QUARTER" | "REST_EIGHTH" | "ACCIDENTAL_SHARP" | "ACCIDENTAL_FLAT" | "ACCIDENTAL_DOUBLE_SHARP" | "ACCIDENTAL_DOUBLE_FLAT" | "ACCIDENTAL_NATURAL" | "TIME_4" | "TIME_3";
+export declare const GLPYH_ENTRIES: Record<GlyphNames, GlyphEntry>;