@tspro/web-music-score 4.0.0 → 4.0.1

package/dist/pieces/index.mjs

@@ -1,10 +1,13 @@
-/* WebMusicScore v4.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
-import "../chunk-D643HZHM.mjs";
+/* WebMusicScore v4.0.1 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+import "../chunk-YFPLOHP2.mjs";
 
 // src/pieces/frere-jacques.ts
 import { DocumentBuilder } from "@tspro/web-music-score/score";
 function createFrereJacques() {
-  return new DocumentBuilder().setScoreConfiguration("guitarTreble").setHeader("Frere Jacques").addMeasure().setKeySignature("G", "Major").setTimeSignature("4/4").addNote(0, "G3", "4n").addNote(0, "A3", "4n").addNote(0, "B3", "4n").addNote(0, "G3", "4n").addMeasure().addNote(0, "G3", "4n").addNote(0, "A3", "4n").addNote(0, "B3", "4n").addNote(0, "G3", "4n").addMeasure().addNote(0, "B3", "4n").addNote(0, "C4", "4n").addNote(0, "D4", "2n").endRow().addMeasure().addNote(0, "B3", "4n").addNote(0, "C4", "4n").addNote(0, "D4", "2n").addMeasure().addNote(0, "D4", "8n").addNote(0, "E4", "8n").addNote(0, "D4", "8n").addNote(0, "C4", "8n").addNote(0, "B3", "4n").addNote(0, "G3", "4n").endRow().addMeasure().addNote(0, "D4", "8n").addNote(0, "E4", "8n").addNote(0, "D4", "8n").addNote(0, "C4", "8n").addNote(0, "B3", "4n").addNote(0, "G3", "4n").addMeasure().addNote(0, "G3", "4n").addNote(0, "D3", "4n").addNote(0, "G3", "2n").addMeasure().addNote(0, "G3", "4n").addNote(0, "D3", "4n").addNote(0, "G3", "2n").getDocument();
+  return new DocumentBuilder().setHeader("Frere Jacques").setScoreConfiguration([
+    { type: "staff", clef: "G", voiceIds: [0] },
+    { type: "staff", clef: "F", voiceIds: [1] }
+  ]).setMeasuresPerRow(2).addMeasure().setKeySignature("D Major").setTimeSignature("4/4").addNote(0, "D4", "4n", { stem: "up" }).addNote(0, "E4", "4n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addRest(1, "1n", { staffPos: "F3" }).addMeasure().addNote(0, "D4", "4n").addNote(0, "E4", "4n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addRest(1, "1n", { staffPos: "F3" }).addMeasure().addNavigation("startRepeat").addNote(0, "F#4", "4n").addNote(0, "G4", "4n").addNote(0, "A4", "2n").addNote(1, "D3", "4n", { stem: "down" }).addNote(1, "E3", "4n").addNote(1, "F#3", "4n").addNote(1, "D3", "4n").addMeasure().addNote(0, "F#4", "4n").addNote(0, "G4", "4n").addNote(0, "A4", "2n").addNote(1, "D3", "4n").addNote(1, "E3", "4n").addNote(1, "F#3", "4n").addNote(1, "D3", "4n").addMeasure().addNote(0, "A4", "8n").addNote(0, "B4", "8n").addNote(0, "A4", "8n").addNote(0, "G4", "8n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(1, "F#3", "4n").addNote(1, "G3", "4n").addNote(1, "A3", "2n").addMeasure().addNote(0, "A4", "8n").addNote(0, "B4", "8n").addNote(0, "A4", "8n").addNote(0, "G4", "8n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(1, "F#3", "4n").addNote(1, "G3", "4n").addNote(1, "A3", "2n").addMeasure().addNote(0, "D4", "4n").addChord(0, ["C#4", "A4"], "4n").addNote(0, "D4", "4n").addRest(0, "4n").addNote(1, "A3", "8n").addNote(1, "B3", "8n").addNote(1, "A3", "8n").addNote(1, "G3", "8n").addNote(1, "F#3", "4n").addNote(1, "D3", "4n").addMeasure().addNote(0, "D4", "4n").addChord(0, ["C#4", "A4"], "4n").addNote(0, "D4", "4n").addRest(0, "4n").addNote(1, "A3", "8n").addNote(1, "B3", "8n").addNote(1, "A3", "8n").addNote(1, "G3", "8n").addNote(1, "F#3", "4n").addNote(1, "D3", "4n").addMeasure().setMeasuresPerRow(4).addNavigation("ending", 1).addNote(0, "D4", "4n").addNote(0, "E4", "4n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(1, "D3", "4n").addChord(1, ["C#3", "A3"], "4n").addNote(1, "D3", "4n").addRest(1, "4n").addMeasure().addNavigation("endRepeat").addNote(0, "D4", "4n").addNote(0, "E4", "4n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(1, "D3", "4n").addChord(1, ["C#3", "A3"], "4n").addNote(1, "D3", "4n").addRest(1, "4n").addMeasure().addNavigation("ending", 2).addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(0, "F#4", "4n").addNote(0, "D4", "4n").addNote(1, "A3", "4n").addNote(1, "F#3", "4n").addNote(1, "A3", "4n").addNote(1, "F#3", "4n").addMeasure().addNote(0, "A3", "4n").addNote(0, "C#4", "8n").addNote(0, "C#4", "8n").addNote(0, "D4", "2n").addNote(1, "D3", "4n").addNote(1, "E3", "4n").addNote(1, "F#3", "2n").getDocument();
 }
 
 // src/pieces/greensleeves.ts

package/dist/react-ui/index.d.mts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { c as Scale, S as ScaleType } from '../scale-C2pCNxdE.mjs';
-import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-BFa43I86.mjs';
-import { H as Handedness } from '../guitar-DggbM2UL.mjs';
-import { D as DivRect, M as MDocument, k as ScoreEventListener, Y as MRenderer, Z as MPlaybackButtons } from '../interface-XoKiryoV.mjs';
-import '../tempo-BAYoZ_Li.mjs';
+import { c as Scale, S as ScaleType } from '../scale-BbDJTbrG.mjs';
+import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-eA2xPPiG.mjs';
+import { H as Handedness } from '../guitar-DdexKdN6.mjs';
+import { D as DivRect, M as MDocument, l as ScoreEventListener, n as MRenderer, o as MPlaybackButtons } from '../music-objects-DJQ4d2OA.mjs';
+import '../tempo-CtUhvJbr.mjs';
 import '@tspro/ts-utils-lib';
 
 interface CircleOfFifthsProps {
@@ -12,61 +12,167 @@ interface CircleOfFifthsProps {
     scale: Scale;
     onScaleChange: (scale: Scale) => void;
 }
+/**
+ * Circle of fifths react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *   import * as Theory from "@tspro/web-music-score/theory";
+ *
+ *   // Render function of react component.
+ *   render() {
+ *       const curScale = Theory.getScale("C Major");
+ *
+ *       const onChangeScale = (newScale: Theory.Scale) => {
+ *           console.log("New scale is " + newScale.getScaleName());
+ *       }
+ *
+ *       return &lt;&gt;
+ *          &lt;ScoreUI.CircleOfFifths
+ *              style={{ position: "relative", padding: "0.5em" }}
+ *              scale={curScale}
+ *              onScaleChange={onChangeScale} /&gt;
+ *      &lt;/&gt;;
+ *   }
+ * </pre>
+ */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
     onScaleChange(tonic: string, scaleType: ScaleType): void;
     render(): react_jsx_runtime.JSX.Element;
 }
 
+/** Fret position props. */
 declare class FretPosition {
     readonly guitarCtx: GuitarContext;
     readonly stringId: number;
     readonly fretId: number;
     readonly chromaticId: number;
+    /** Note of this fret position. */
     readonly note: Note;
+    /** Is note of this fret position a scale note? */
     readonly isScaleNote: boolean;
+    /** Is note of this fret position a scale root note? */
     readonly isScaleRootNote: boolean;
+    /** Is note circle/text of this fret position visible? */
     isVisible: boolean;
+    /** Text (e.g. note name) of this fret position. */
     text: string;
+    /** Text color. */
     textColor: string;
+    /** Fill color of note circle. */
     fillColor: string | undefined;
+    /** Border color of note circle. */
     borderColor: string | undefined;
+    /** Is barre? (Reserved for future) */
     isBarre: boolean;
+    /**
+     * Create new fret position object instance.
+     * @param guitarCtx - Guitar context.
+     * @param stringId - String index in range [0, 5].
+     * @param fretId - Fret index, 0 = open string fret position.
+     * @param chromaticId - Chromatic id.
+     */
     constructor(guitarCtx: GuitarContext, stringId: number, fretId: number, chromaticId: number);
+    /** Chromatic class getter. */
     get chromaticClass(): number;
+    /** Show note circle/text of this fret position. */
     show(): void;
+    /** Hide note circle/text of this fret position. */
     hide(): void;
+    /** Set default note name. */
     setDefaultText(): void;
+    /** Set default fill color of note circle. */
     setDefaultFillColor(): void;
+    /** Set default border color of note circle. */
     setDefaultBorderColor(showBorder?: boolean): void;
 }
+/** Guitar context class. */
 declare class GuitarContext {
     readonly tuningName: string;
     readonly scale: Scale;
     readonly handedness: Handedness;
     readonly pitchNotation: PitchNotation;
     readonly guitarNoteLabel: GuitarNoteLabel;
+    /** Maximum fret index value. */
     readonly maxFretId: number;
     private readonly fretPositionTable;
     private readonly tuningStrings;
+    /**
+     * Create new guitar context object instance.
+     * @param tuningName - Tuning name (e.g. "Standard").
+     * @param scale - Scale.
+     * @param handedness - Handedness.
+     * @param pitchNotation - Pitch notation.
+     * @param guitarNoteLabel - Guitar note label type.
+     */
     constructor(tuningName: string, scale: Scale, handedness: Handedness, pitchNotation: PitchNotation, guitarNoteLabel: GuitarNoteLabel);
+    /**
+     * Get fret position object.
+     * @param stringId - String index in range [0,5].
+     * @param fretId - Fret index, 0 = open string fret position.
+     * @returns - Fret position object.
+     */
     getFretPosition(stringId: number, fretId: number): Readonly<FretPosition>;
+    /**
+     * Get tuning value (Note) of given string.
+     * @param stringId - STring index in range [0, 5].
+     * @returns - Note of given string played unfretted.
+     */
     getStringTuning(stringId: number): Note;
+    /**
+     * Get tuning overview (e.g. "E2 - A2 - D3 - G3 - B3 - E4").
+     * @returns - Tuning overview string.
+     */
     getTuningOverview(): string;
+    /**
+     * Create copy of this guitar context with new tuning name.
+     * @param tuningName - New tuning name.
+     * @returns - Guitar context.
+     */
     alterTuningName(tuningName: string): GuitarContext;
+    /**
+     * Create copy of this guitar context with new scale.
+     * @param scale - New scale.
+     * @returns - Guitar context.
+     */
     alterScale(scale: Scale): GuitarContext;
+    /**
+     * Create copy of this guitar context with handedness.
+     * @param handedness - New handedness.
+     * @returns - Guitar context.
+     */
     alterHandedness(handedness: Handedness): GuitarContext;
+    /**
+     * Create copy of this guitar context with new pitch notation.
+     * @param pitchNotation - New pitch notation.
+     * @returns - Guitar context.
+     */
     alterPitchNotation(pitchNotation: PitchNotation): GuitarContext;
+    /**
+     * Create copy of this guitar context with new guitar note label type.
+     * @param guitarNoteLabel - New guitar note label type.
+     * @returns - Guitar context.
+     */
     alterGuitarNoteLabel(guitarNoteLabel: GuitarNoteLabel): GuitarContext;
 }
 
+/** Data for fret position. */
 declare class FretPositionData {
     readonly fretPosition: Readonly<FretPosition>;
     readonly cellRect: DivRect;
     readonly noteRect: DivRect;
+    /**
+     * Create new fret position data instance.
+     * @param fretPosition - Fret position.
+     * @param cellRect - Rect of fret position cell (space around string and between fret and next fret).
+     * @param noteRect - Rect to display note name in circle.
+     */
     constructor(fretPosition: Readonly<FretPosition>, cellRect: DivRect, noteRect: DivRect);
 }
+/** Update fret position function type. */
 type UpdateFretPositionFunc = (fretPosition: FretPosition) => void;
+/** Click fret position function type. */
 type ClickFretPositionFunc = (fretPosition: FretPosition) => void;
 interface GuitarViewProps {
     style?: React.CSSProperties;
@@ -79,6 +185,35 @@ interface GuitarViewState {
     height: number;
     table: FretPositionData[][];
 }
+/**
+ * Guitar (neck) view react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *   import * as Theory from "@tspro/web-music-score/theory";
+ *
+ *   // Render function of react component.
+ *   render() {
+ *       const guitarCtx = new ScoreUI.GuitarContext(
+ *           "Standard",                     // Tuning name.
+ *           Theory.getScale("C Major"),     // Scale.
+ *           Theory.DefaultHandedness,       // Guitar handedness.
+ *           Theory.DefaultPitchNotation,    // Pitch notation.
+ *           Theory.DefaultGuitarNoteLabel); // Guitar note label type.
+ *
+ *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
+ *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
+ *
+ *       return &lt;&gt;
+ *           &lt;ScoreUI.GuitarView
+ *               style={{ position: "relative", width: 640 }}
+ *               guitarContext={guitarCtx}
+ *               onUpdateFretPosition={onUpdateFretPosition}
+ *               onClickFretPosition={onClickFretPosition} /&gt;
+ *      &lt;/&gt;;
+ *   }
+ * </pre>
+ */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
     constructor(props: GuitarViewProps);
@@ -98,11 +233,21 @@ interface MusicScoreViewProps {
     onScoreEvent?: ScoreEventListener;
 }
 /**
- * Usage:
+ * Music score view react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as Score from "@tspro/web-music-score/react";
+ *   import * as Pieces from "@tspro/web-music-score/pieces";
  *
- *  import * as Score from "\@tspro/web-music-score";
+ *   // Render function of react component.
+ *   render() {
+ *       const doc = Pieces.createFrereJacques();
  *
- *  \<Score.MusicScoreView doc=\{doc\} /\>
+ *       return &lt;&gt;
+ *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
+ *       &lt;/&gt;;
+ *   }
+ * </pre>
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -128,19 +273,23 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as Score from "\@tspro/web-music-score/score";
+ *   import * as Pieces from "@tspro/web-music-score/pieces";
  *
- *  import * as Score from "\@tspro/web-music-score";
- *
- *  \<Score.PlaybackButtons doc=\{doc\} /\>
- *
- * To set custom play, pause and stop labels:
- *
- *  \<Score.PlaybackButtons doc=\{doc\} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /\>
+ *   // Create sample musicdocument.
+ *   const doc = Pieces.createFrereJacques();
  *
- * To use different button layout.
+ *   // Create default playback buttons
+ *   &lt;Score.PlaybackButtons doc={doc} /&gt;
  *
- *  \<Score.PlaybackButtons doc=\{doc\} buttonLayout=\{Score.PlaybackButtonsLayout.PlayStopSingle\} /\>
+ *   // Create playback buttons with custom play, pause and stop labels:
+ *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
  *
+ *   // Create playback buttons with different button layout.
+ *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
+ * </pre>
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;

package/dist/react-ui/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { c as Scale, S as ScaleType } from '../scale-CvPbJvfN.js';
-import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-CcVdUFqS.js';
-import { H as Handedness } from '../guitar-cNmE-EvH.js';
-import { D as DivRect, M as MDocument, k as ScoreEventListener, Y as MRenderer, Z as MPlaybackButtons } from '../interface-7k8qGG44.js';
-import '../tempo-r2sb6Ku2.js';
+import { c as Scale, S as ScaleType } from '../scale-B2Icbetz.js';
+import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-eA2xPPiG.js';
+import { H as Handedness } from '../guitar-CaZJDA05.js';
+import { D as DivRect, M as MDocument, l as ScoreEventListener, n as MRenderer, o as MPlaybackButtons } from '../music-objects-Dc3kR-XF.js';
+import '../tempo-Dt8aHpol.js';
 import '@tspro/ts-utils-lib';
 
 interface CircleOfFifthsProps {
@@ -12,61 +12,167 @@ interface CircleOfFifthsProps {
     scale: Scale;
     onScaleChange: (scale: Scale) => void;
 }
+/**
+ * Circle of fifths react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *   import * as Theory from "@tspro/web-music-score/theory";
+ *
+ *   // Render function of react component.
+ *   render() {
+ *       const curScale = Theory.getScale("C Major");
+ *
+ *       const onChangeScale = (newScale: Theory.Scale) => {
+ *           console.log("New scale is " + newScale.getScaleName());
+ *       }
+ *
+ *       return &lt;&gt;
+ *          &lt;ScoreUI.CircleOfFifths
+ *              style={{ position: "relative", padding: "0.5em" }}
+ *              scale={curScale}
+ *              onScaleChange={onChangeScale} /&gt;
+ *      &lt;/&gt;;
+ *   }
+ * </pre>
+ */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
     onScaleChange(tonic: string, scaleType: ScaleType): void;
     render(): react_jsx_runtime.JSX.Element;
 }
 
+/** Fret position props. */
 declare class FretPosition {
     readonly guitarCtx: GuitarContext;
     readonly stringId: number;
     readonly fretId: number;
     readonly chromaticId: number;
+    /** Note of this fret position. */
     readonly note: Note;
+    /** Is note of this fret position a scale note? */
     readonly isScaleNote: boolean;
+    /** Is note of this fret position a scale root note? */
     readonly isScaleRootNote: boolean;
+    /** Is note circle/text of this fret position visible? */
     isVisible: boolean;
+    /** Text (e.g. note name) of this fret position. */
     text: string;
+    /** Text color. */
     textColor: string;
+    /** Fill color of note circle. */
     fillColor: string | undefined;
+    /** Border color of note circle. */
     borderColor: string | undefined;
+    /** Is barre? (Reserved for future) */
     isBarre: boolean;
+    /**
+     * Create new fret position object instance.
+     * @param guitarCtx - Guitar context.
+     * @param stringId - String index in range [0, 5].
+     * @param fretId - Fret index, 0 = open string fret position.
+     * @param chromaticId - Chromatic id.
+     */
     constructor(guitarCtx: GuitarContext, stringId: number, fretId: number, chromaticId: number);
+    /** Chromatic class getter. */
     get chromaticClass(): number;
+    /** Show note circle/text of this fret position. */
     show(): void;
+    /** Hide note circle/text of this fret position. */
     hide(): void;
+    /** Set default note name. */
     setDefaultText(): void;
+    /** Set default fill color of note circle. */
     setDefaultFillColor(): void;
+    /** Set default border color of note circle. */
     setDefaultBorderColor(showBorder?: boolean): void;
 }
+/** Guitar context class. */
 declare class GuitarContext {
     readonly tuningName: string;
     readonly scale: Scale;
     readonly handedness: Handedness;
     readonly pitchNotation: PitchNotation;
     readonly guitarNoteLabel: GuitarNoteLabel;
+    /** Maximum fret index value. */
     readonly maxFretId: number;
     private readonly fretPositionTable;
     private readonly tuningStrings;
+    /**
+     * Create new guitar context object instance.
+     * @param tuningName - Tuning name (e.g. "Standard").
+     * @param scale - Scale.
+     * @param handedness - Handedness.
+     * @param pitchNotation - Pitch notation.
+     * @param guitarNoteLabel - Guitar note label type.
+     */
     constructor(tuningName: string, scale: Scale, handedness: Handedness, pitchNotation: PitchNotation, guitarNoteLabel: GuitarNoteLabel);
+    /**
+     * Get fret position object.
+     * @param stringId - String index in range [0,5].
+     * @param fretId - Fret index, 0 = open string fret position.
+     * @returns - Fret position object.
+     */
     getFretPosition(stringId: number, fretId: number): Readonly<FretPosition>;
+    /**
+     * Get tuning value (Note) of given string.
+     * @param stringId - STring index in range [0, 5].
+     * @returns - Note of given string played unfretted.
+     */
     getStringTuning(stringId: number): Note;
+    /**
+     * Get tuning overview (e.g. "E2 - A2 - D3 - G3 - B3 - E4").
+     * @returns - Tuning overview string.
+     */
     getTuningOverview(): string;
+    /**
+     * Create copy of this guitar context with new tuning name.
+     * @param tuningName - New tuning name.
+     * @returns - Guitar context.
+     */
     alterTuningName(tuningName: string): GuitarContext;
+    /**
+     * Create copy of this guitar context with new scale.
+     * @param scale - New scale.
+     * @returns - Guitar context.
+     */
     alterScale(scale: Scale): GuitarContext;
+    /**
+     * Create copy of this guitar context with handedness.
+     * @param handedness - New handedness.
+     * @returns - Guitar context.
+     */
     alterHandedness(handedness: Handedness): GuitarContext;
+    /**
+     * Create copy of this guitar context with new pitch notation.
+     * @param pitchNotation - New pitch notation.
+     * @returns - Guitar context.
+     */
     alterPitchNotation(pitchNotation: PitchNotation): GuitarContext;
+    /**
+     * Create copy of this guitar context with new guitar note label type.
+     * @param guitarNoteLabel - New guitar note label type.
+     * @returns - Guitar context.
+     */
     alterGuitarNoteLabel(guitarNoteLabel: GuitarNoteLabel): GuitarContext;
 }
 
+/** Data for fret position. */
 declare class FretPositionData {
     readonly fretPosition: Readonly<FretPosition>;
     readonly cellRect: DivRect;
     readonly noteRect: DivRect;
+    /**
+     * Create new fret position data instance.
+     * @param fretPosition - Fret position.
+     * @param cellRect - Rect of fret position cell (space around string and between fret and next fret).
+     * @param noteRect - Rect to display note name in circle.
+     */
     constructor(fretPosition: Readonly<FretPosition>, cellRect: DivRect, noteRect: DivRect);
 }
+/** Update fret position function type. */
 type UpdateFretPositionFunc = (fretPosition: FretPosition) => void;
+/** Click fret position function type. */
 type ClickFretPositionFunc = (fretPosition: FretPosition) => void;
 interface GuitarViewProps {
     style?: React.CSSProperties;
@@ -79,6 +185,35 @@ interface GuitarViewState {
     height: number;
     table: FretPositionData[][];
 }
+/**
+ * Guitar (neck) view react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *   import * as Theory from "@tspro/web-music-score/theory";
+ *
+ *   // Render function of react component.
+ *   render() {
+ *       const guitarCtx = new ScoreUI.GuitarContext(
+ *           "Standard",                     // Tuning name.
+ *           Theory.getScale("C Major"),     // Scale.
+ *           Theory.DefaultHandedness,       // Guitar handedness.
+ *           Theory.DefaultPitchNotation,    // Pitch notation.
+ *           Theory.DefaultGuitarNoteLabel); // Guitar note label type.
+ *
+ *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
+ *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
+ *
+ *       return &lt;&gt;
+ *           &lt;ScoreUI.GuitarView
+ *               style={{ position: "relative", width: 640 }}
+ *               guitarContext={guitarCtx}
+ *               onUpdateFretPosition={onUpdateFretPosition}
+ *               onClickFretPosition={onClickFretPosition} /&gt;
+ *      &lt;/&gt;;
+ *   }
+ * </pre>
+ */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
     constructor(props: GuitarViewProps);
@@ -98,11 +233,21 @@ interface MusicScoreViewProps {
     onScoreEvent?: ScoreEventListener;
 }
 /**
- * Usage:
+ * Music score view react component.
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as Score from "@tspro/web-music-score/react";
+ *   import * as Pieces from "@tspro/web-music-score/pieces";
  *
- *  import * as Score from "\@tspro/web-music-score";
+ *   // Render function of react component.
+ *   render() {
+ *       const doc = Pieces.createFrereJacques();
  *
- *  \<Score.MusicScoreView doc=\{doc\} /\>
+ *       return &lt;&gt;
+ *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
+ *       &lt;/&gt;;
+ *   }
+ * </pre>
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -128,19 +273,23 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
+ * <pre>
+ *   // Using with React TSX/JSX
+ *   import * as Score from "\@tspro/web-music-score/score";
+ *   import * as Pieces from "@tspro/web-music-score/pieces";
  *
- *  import * as Score from "\@tspro/web-music-score";
- *
- *  \<Score.PlaybackButtons doc=\{doc\} /\>
- *
- * To set custom play, pause and stop labels:
- *
- *  \<Score.PlaybackButtons doc=\{doc\} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /\>
+ *   // Create sample musicdocument.
+ *   const doc = Pieces.createFrereJacques();
  *
- * To use different button layout.
+ *   // Create default playback buttons
+ *   &lt;Score.PlaybackButtons doc={doc} /&gt;
  *
- *  \<Score.PlaybackButtons doc=\{doc\} buttonLayout=\{Score.PlaybackButtonsLayout.PlayStopSingle\} /\>
+ *   // Create playback buttons with custom play, pause and stop labels:
+ *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
  *
+ *   // Create playback buttons with different button layout.
+ *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
+ * </pre>
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;