zds-pickers 4.1.4 → 4.1.5

package/dist/other/OctavePlayer.js

@@ -16,32 +16,30 @@ const baseNotes = [
     'A#',
     'B',
 ];
-// const { midiToFreq, midiToNoteName } = Midi
-// console.log(Note.names(), Note.midi('C4'))
-// const firstNote = 21
-// const lastNote = 108
 const numNotes = 12;
 const whiteNotes = numNotes * 0.7; // approx
 const audioContext = new window.AudioContext();
-const BaseOctavePlayer = ({ octave, height, width, ...rest }) => {
+const BaseOctavePlayer = ({ className, octave, height, renderNoteLabel, width, ...rest }) => {
     const keyWidth = width / whiteNotes + 2;
     const keyWidthToHeight = keyWidth / height;
     const firstNote = Note.midi(baseNotes[0] + String(octave)) || 0;
     const lastNote = Note.midi(baseNotes[baseNotes.length - 1] + String(octave)) || 0;
-    return (_jsx("div", { children: _jsx(ReactPiano, { keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, width: width, ...rest }) }));
+    return (_jsx("div", { children: _jsx(ReactPiano, { className: className, keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, renderNoteLabel: renderNoteLabel, width: width, ...rest }) }));
 };
-const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, Tooltip, width, }) => (_jsx(SoundfontProvider, { audioContext,
+const WithProvider = ({ className, format, height, hostname, instrumentName, octave = 4, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, renderNoteLabel, selectedNotes, soundfont, Tooltip, width, }) => (_jsx(SoundfontProvider, { audioContext,
     format,
     hostname,
     instrumentName,
     onChange,
-    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(BaseOctavePlayer, { disabled: isLoading, height,
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(BaseOctavePlayer, { disabled: isLoading, className,
+        height,
         octave,
         onClick,
         onDoubleClick,
         onKeyMouseEnter,
         onKeyMouseLeave,
         playNote,
+        renderNoteLabel,
         selectedNotes,
         stopNote,
         Tooltip,

package/dist/other/SoundFontProvider.js

@@ -9,91 +9,104 @@ if (typeof window !== 'undefined') {
         window.MIDI = { Soundfont: {} };
     }
 }
-// Also ensure it's available globally (not just on window)
-if (typeof globalThis !== 'undefined') {
-    if (!globalThis.MIDI) {
-        globalThis.MIDI = window.MIDI || { Soundfont: {} };
-    }
-}
-// Also set it on the global object for Node.js compatibility
-if (typeof global !== 'undefined') {
-    if (!global.MIDI) {
-        global.MIDI = window.MIDI || { Soundfont: {} };
-    }
+// Also ensure it's on globalThis (browser sync + Node/SSR; avoid bare `global`)
+if (typeof globalThis !== 'undefined' && !globalThis.MIDI) {
+    globalThis.MIDI =
+        typeof window !== 'undefined' && window.MIDI
+            ? window.MIDI
+            : { Soundfont: {} };
 }
 // CRITICAL: Import at top level to ensure bundler processes it
-// Import bundled soundfont to avoid CSP issues in Electron apps  
+// Import bundled soundfont to avoid CSP issues in Electron apps
 // NOTE: This adds ~2.2MB to the bundle size. Currently all consumers need piano,
 // but if future web apps don't need audio, consider making this import conditional
 // or implementing lazy loading to reduce bundle size for audio-free use cases.
 import '../soundfonts/acoustic_grand_piano-mp3';
 const isDefined = (item) => item !== undefined && item !== null && !Number.isNaN(item);
+const midiToNoteName = (midiNumber) => {
+    const num = typeof midiNumber === 'string'
+        ? Number.parseInt(midiNumber, 10)
+        : midiNumber;
+    return Note.fromMidi(num);
+};
+const createBundledPlayer = (soundfontData) => {
+    const player = {
+        play: (note, velocity) => {
+            const noteName = midiToNoteName(note);
+            const noteData = soundfontData[noteName];
+            if (!noteData) {
+                return { stop: () => { } };
+            }
+            const audio = new Audio(noteData);
+            audio.volume = (velocity ?? 127) / 127;
+            audio.play();
+            return {
+                stop: () => {
+                    audio.pause();
+                    audio.currentTime = 0;
+                },
+            };
+        },
+        stop: () => [],
+    };
+    return player;
+};
+const loadBundledOrRemoteInstrument = (audioContext, instrumentName, format, soundfont, hostname) => {
+    const soundfontData = window.MIDI?.Soundfont?.[instrumentName];
+    if (soundfontData) {
+        return Promise.resolve(createBundledPlayer(soundfontData));
+    }
+    // biome-ignore lint/suspicious/noConsole: intentional diagnostics for missing bundled soundfont
+    console.warn(`[zds-pickers] Bundled soundfont "${instrumentName}" not found; falling back to remote load.`);
+    if (isDefined(hostname)) {
+        return Soundfont.instrument(audioContext, instrumentName, {
+            format,
+            soundfont,
+            nameToUrl: (name, sf, fmt) => `${hostname}/${sf}/${name}-${fmt}.js`,
+        });
+    }
+    return Soundfont.instrument(audioContext, instrumentName, {
+        format,
+        soundfont,
+    });
+};
 const SoundfontProvider = (props) => {
     const { audioContext, format, hostname, instrumentName, onChange, render, soundfont, } = props;
     const [isLoading, setIsLoading] = useState(true);
     const [activeAudioNodes, setActiveAudioNodes] = useState({});
     const [instrument, setInstrument] = useState(null);
     const loadInstrument = useCallback((nm) => {
-        // Re-trigger loading state
         setInstrument(null);
+        setIsLoading(true);
+        if (!instrumentName) {
+            setIsLoading(false);
+            return;
+        }
         if (isDefined(hostname)) {
-            // pull from an url
             Soundfont.instrument(audioContext, nm, {
                 format,
                 soundfont,
                 nameToUrl: (name, sf, fmt) => `${hostname}/${sf}/${name}-${fmt}.js`,
-            }).then((newInstrument) => {
+            })
+                .then(newInstrument => {
                 setInstrument(newInstrument);
-            });
-        }
-        else if (instrumentName) {
-            // the host app has already injected the soundfont into global space
-            // Try to create a player directly from our bundled soundfont data
-            const soundfontData = window.MIDI?.Soundfont?.[instrumentName];
-            if (soundfontData) {
-                // MIDI note number to note name conversion using Tonal
-                const midiToNoteName = (midiNumber) => {
-                    const num = typeof midiNumber === 'string'
-                        ? Number.parseInt(midiNumber, 10)
-                        : midiNumber;
-                    return Note.fromMidi(num);
-                };
-                // Create a simple player that can play notes from our bundled data
-                const player = {
-                    play: (note, velocity) => {
-                        // Convert MIDI note number to note name if needed
-                        const noteName = midiToNoteName(note);
-                        const noteData = soundfontData[noteName];
-                        if (noteData) {
-                            // Create audio from the data URL
-                            const audio = new Audio(noteData);
-                            audio.volume = (velocity || 127) / 127;
-                            audio.play();
-                            // Return a compatible object with stop method
-                            return {
-                                stop: () => {
-                                    audio.pause();
-                                    audio.currentTime = 0;
-                                },
-                            };
-                        }
-                        return null;
-                    },
-                    stop: () => {
-                        // Simple stop implementation
-                    },
-                };
-                setInstrument(player);
+            })
+                .catch(error => {
+                // biome-ignore lint/suspicious/noConsole: intentional diagnostics for load failures
+                console.error(`[zds-pickers] Failed to load soundfont "${nm}" from ${hostname}:`, error);
                 setIsLoading(false);
-            }
-            else {
-                setIsLoading(false);
-            }
+            });
+            return;
         }
-        else {
-            // sound must be disabled
+        loadBundledOrRemoteInstrument(audioContext, nm, format, soundfont, hostname)
+            .then(newInstrument => {
+            setInstrument(newInstrument);
+        })
+            .catch(error => {
+            // biome-ignore lint/suspicious/noConsole: intentional diagnostics for load failures
+            console.error(`[zds-pickers] Failed to load soundfont "${nm}":`, error);
             setIsLoading(false);
-        }
+        });
     }, [audioContext, format, hostname, instrumentName, soundfont]);
     useEffect(() => {
         if (instrumentName) {
@@ -109,7 +122,7 @@ const SoundfontProvider = (props) => {
         if (instrument) {
             audioContext.resume().then(() => {
                 const audioNode = instrument.play(String(midiNumber));
-                setActiveAudioNodes((prev) => ({ ...prev, [midiNumber]: audioNode }));
+                setActiveAudioNodes(prev => ({ ...prev, [midiNumber]: audioNode }));
             });
         }
     };
@@ -120,7 +133,7 @@ const SoundfontProvider = (props) => {
             }
             const audioNode = activeAudioNodes[midiNumber];
             audioNode.stop();
-            setActiveAudioNodes((prev) => {
+            setActiveAudioNodes(prev => {
                 const { [midiNumber]: _, ...rest } = prev;
                 return rest;
             });
@@ -136,7 +149,7 @@ const SoundfontProvider = (props) => {
                     node.stop();
                 }
             }
-            setActiveAudioNodes(nodes);
+            setActiveAudioNodes({});
         });
     };
     return render({

package/dist/other/pianoTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/pickers/KeyPicker.js

@@ -1,9 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { useCallback } from 'react';
+import { Note } from 'tonal';
 import { OctavePlayer } from '../other/OctavePlayer';
 import { noSelection } from './Select';
+const formatPitchName = (pitchClass) => pitchClass.replace(/([A-G])b/g, '$1\u266D');
+const NATURAL_LABEL_NUDGE_LEFT = new Set(['C', 'F']);
+const NATURAL_LABEL_NUDGE_RIGHT = new Set(['E', 'B']);
+const noteNameLabelRenderer = ({ isAccidental, isActive, midiNumber, }) => {
+    const pitchClass = Note.pitchClass(Note.fromMidi(midiNumber) ?? '');
+    const pitchName = formatPitchName(pitchClass);
+    if (!pitchName)
+        return null;
+    return (_jsx("div", { className: classNames('ReactPiano__NoteLabel', 'ReactPiano__NoteLabel--noteName', {
+            'ReactPiano__NoteLabel--active': isActive,
+            'ReactPiano__NoteLabel--accidental': isAccidental,
+            'ReactPiano__NoteLabel--natural': !isAccidental,
+            'ReactPiano__NoteLabel--nudgeLeft': !isAccidental && NATURAL_LABEL_NUDGE_LEFT.has(pitchClass),
+            'ReactPiano__NoteLabel--nudgeRight': !isAccidental && NATURAL_LABEL_NUDGE_RIGHT.has(pitchClass),
+        }), children: pitchName }));
+};
 const KeyPicker = (props) => {
-    const { value, onChange, disabled = false, height = 100, width = 300, octave = 4, ...rest } = props;
+    const { value, onChange, disabled = false, height = 100, showNoteNames = false, width = 300, octave = 4, ...rest } = props;
     const handleKeyClick = useCallback((note) => {
         if (disabled)
             return;
@@ -14,6 +32,6 @@ const KeyPicker = (props) => {
     const octaveStart = 60 + (octave - 4) * 12;
     const octaveEnd = octaveStart + 11;
     const shouldHighlight = value !== noSelection && value >= octaveStart && value <= octaveEnd;
-    return (_jsx(OctavePlayer, { ...rest, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, width: width, octave: octave, onClick: handleKeyClick, instrumentName: "acoustic_grand_piano" }));
+    return (_jsx(OctavePlayer, { ...rest, className: showNoteNames ? 'ReactPiano--showNoteNames' : undefined, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, renderNoteLabel: showNoteNames ? noteNameLabelRenderer : undefined, width: width, octave: octave, onClick: handleKeyClick, instrumentName: "acoustic_grand_piano" }));
 };
 export { KeyPicker };

package/dist/types/other/OctavePlayer.d.ts

@@ -1,34 +1,6 @@
-import type { PianoProps } from 'lib/pickers/PianoPicker';
-import type Soundfont from 'soundfont-player';
-import type { TooltipProps } from './DefaultTooltip';
-type PianoMidiNote = {
-    accidental: boolean;
-    left: number;
-    midiNumber: number;
-    width: number;
-};
-type OctavePlayerProps = PianoProps & {
-    disabled?: boolean;
-    height: number;
-    octave: number;
-    width: number;
-};
-type WithProviderProps = PianoProps & {
-    format?: 'mp3' | 'ogg';
-    height: number;
-    hostname?: string;
-    instrumentName?: Soundfont.InstrumentName;
-    octave?: number;
-    onChange?: (note: number) => void;
-    onClick?: (note: number) => void;
-    onDoubleClick?: (note: number) => void;
-    onKeyMouseEnter?: (note: PianoMidiNote) => void;
-    onKeyMouseLeave?: (note: number) => void;
-    selectedNotes?: number[];
-    soundfont?: 'MusyngKite' | 'FluidR3_GM';
-    Tooltip?: TooltipProps;
-    width: number;
-};
-declare const WithProvider: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
+import type { OctavePlayerProps, PianoMidiNote, PianoProviderProps } from './pianoTypes';
+declare const WithProvider: ({ className, format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, renderNoteLabel, selectedNotes, soundfont, Tooltip, width, }: PianoProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { WithProvider as OctavePlayer };
-export type { OctavePlayerProps, PianoMidiNote, WithProviderProps };
+export type { OctavePlayerProps, PianoMidiNote, PianoProviderProps };
+/** @deprecated Use PianoProviderProps */
+export type WithProviderProps = PianoProviderProps;

package/dist/types/other/pianoTypes.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type Soundfont from 'soundfont-player';
+import type { TooltipProps } from './DefaultTooltip';
+type NoteLabelRenderProps = {
+    isAccidental: boolean;
+    isActive: boolean;
+    keyboardShortcut?: string | null;
+    midiNumber: number;
+};
+type PianoMidiNote = {
+    accidental: boolean;
+    left: number;
+    midiNumber: number;
+    width: number;
+};
+type PianoProps = {
+    className?: string;
+    disabled?: boolean;
+    height: number;
+    renderNoteLabel?: (props: NoteLabelRenderProps) => ReactNode;
+    selectedNotes?: number[];
+    width: number;
+};
+type PianoProviderProps = PianoProps & {
+    format?: 'mp3' | 'ogg';
+    hostname?: string;
+    instrumentName?: Soundfont.InstrumentName;
+    octave?: number;
+    onChange?: (note: number) => void;
+    onClick?: (note: number) => void;
+    onDoubleClick?: (note: number) => void;
+    onKeyMouseEnter?: (note: PianoMidiNote) => void;
+    onKeyMouseLeave?: (note: number) => void;
+    soundfont?: 'MusyngKite' | 'FluidR3_GM';
+    Tooltip?: TooltipProps;
+};
+type OctavePlayerProps = PianoProps & {
+    octave: number;
+};
+export type { NoteLabelRenderProps, OctavePlayerProps, PianoMidiNote, PianoProps, PianoProviderProps, };

package/dist/types/pickers/KeyPicker.d.ts

@@ -1,9 +1,10 @@
 import { type OctavePlayerProps } from '../other/OctavePlayer';
-type KeyPickerProps = Omit<OctavePlayerProps, 'selectedNotes' | 'onClick'> & {
+type KeyPickerProps = Omit<OctavePlayerProps, 'className' | 'onClick' | 'renderNoteLabel' | 'selectedNotes'> & {
     value: number;
     onChange: (value: number) => void;
     disabled?: boolean;
     height?: number;
+    showNoteNames?: boolean;
     width?: number;
     octave?: number;
 };

package/dist/types/pickers/PianoPicker.d.ts

@@ -1,11 +1,4 @@
-import type { WithProviderProps } from '../other/OctavePlayer';
-type PianoProps = {
-    activeNotes?: number[];
-    selectedNotes?: number[];
-    disabled: boolean;
-    height: number;
-    width: number;
-};
-declare const WithProvider: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
+import type { PianoProps, PianoProviderProps } from '../other/pianoTypes';
+declare const WithProvider: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, width, }: PianoProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { WithProvider as PianoPicker };
 export type { PianoProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -16,14 +16,8 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "sideEffects": [
-    "lib/soundfonts/*.js",
-    "dist/soundfonts/*.js"
-  ],
-  "files": [
-    "dist",
-    "lib/soundfonts"
-  ],
+  "sideEffects": ["lib/soundfonts/*.js", "dist/soundfonts/*.js"],
+  "files": ["dist", "lib/soundfonts"],
   "homepage": "https://github.com/dkadrios/zds-pickers#readme",
   "license": "MIT",
   "author": "Darin Kadrioski <dkadrios@gmail.com>",
@@ -37,13 +31,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-actions": "8.6.3",
-    "@storybook/addon-docs": "8.6.3",
-    "@storybook/addon-essentials": "8.6.3",
-    "@storybook/addon-links": "8.6.3",
-    "@storybook/builder-vite": "8.6.3",
-    "@storybook/react": "8.6.3",
-    "@storybook/react-vite": "8.6.3",
+    "@storybook/addon-docs": "8.6.18",
+    "@storybook/addon-essentials": "8.6.18",
+    "@storybook/addon-links": "8.6.18",
+    "@storybook/builder-vite": "8.6.18",
+    "@storybook/react": "8.6.18",
+    "@storybook/react-vite": "8.6.18",
     "@types/d3-drag": "3.0.7",
     "@types/d3-scale": "4.0.9",
     "@types/d3-selection": "3.0.11",
@@ -56,7 +49,10 @@
     "nodemon": "3.1.9",
     "prop-types": "15.8.1",
     "rc-slider": "11.1.8",
-    "storybook": "8.6.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-select": "5.10.1",
+    "storybook": "8.6.18",
     "typescript": "5.8.2",
     "vite": "^6.3.6",
     "zds-mappings": "1.4.9"