zds-pickers 4.0.24 → 4.1.0

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './other/SvgText';
 export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
+export * from './pickers/KeyPicker';
 export * from './pickers/Knob';
 export * from './pickers/KnobPicker';
 export * from './pickers/LatchPicker';

package/dist/other/OctavePlayer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { /* Midi, */ Note } from 'tonal';
 import { Piano as ReactPiano } from 'zds-react-piano';
 import { SoundfontProvider } from './SoundFontProvider';
@@ -30,19 +30,20 @@ const BaseOctavePlayer = ({ octave, height, width, ...rest }) => {
     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 }) }));
 };
-const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }) => (_jsx(SoundfontProvider, { audioContext,
+const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, Tooltip, width, }) => (_jsx(SoundfontProvider, { audioContext,
     format,
     hostname,
     instrumentName,
     onChange,
-    soundfont, render: ({ isLoading, playNote, stopNote, }) => (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsxs("h2", { children: ["Octave: ", octave] }) }), _jsx(BaseOctavePlayer, { disabled: isLoading, height,
-                octave,
-                onClick,
-                onDoubleClick,
-                onKeyMouseEnter,
-                onKeyMouseLeave,
-                playNote,
-                stopNote,
-                Tooltip,
-                width })] })) }));
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(BaseOctavePlayer, { disabled: isLoading, height,
+        octave,
+        onClick,
+        onDoubleClick,
+        onKeyMouseEnter,
+        onKeyMouseLeave,
+        playNote,
+        selectedNotes,
+        stopNote,
+        Tooltip,
+        width })) }));
 export { WithProvider as OctavePlayer };

package/dist/other/SoundFontProvider.js

@@ -2,7 +2,30 @@
 // for more documentation on prop options.
 import { useCallback, useEffect, useState } from 'react';
 import Soundfont from 'soundfont-player';
-// import '../temp/acoustic_grand_piano-mp3'
+import { Note } from 'tonal';
+// Ensure MIDI global exists before importing soundfont
+if (typeof window !== 'undefined') {
+    if (!window.MIDI) {
+        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: {} };
+    }
+}
+// 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 '../temp/acoustic_grand_piano-mp3';
 const isDefined = (item) => item !== undefined && item !== null && !Number.isNaN(item);
 const SoundfontProvider = (props) => {
     const { audioContext, format, hostname, instrumentName, onChange, render, soundfont, } = props;
@@ -24,9 +47,46 @@ const SoundfontProvider = (props) => {
         }
         else if (instrumentName) {
             // the host app has already injected the soundfont into global space
-            Soundfont.instrument(audioContext, instrumentName).then(newInstrument => {
-                setInstrument(newInstrument);
-            });
+            // 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);
+            }
+            else {
+                setIsLoading(false);
+            }
         }
         else {
             // sound must be disabled

package/dist/pickers/KeyPicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { OctavePlayer } from '../other/OctavePlayer';
+import { noSelection } from './Select';
+const KeyPicker = (props) => {
+    const { value, onChange, disabled = false, height = 100, width = 300, octave = 4, ...rest } = props;
+    const handleKeyClick = useCallback((note) => {
+        if (disabled)
+            return;
+        onChange(note);
+    }, [disabled, onChange]);
+    // Only highlight the note if it's a valid selection and within the octave range
+    // Octave 4 = C4 (60) to B4 (71)
+    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 }));
+};
+KeyPicker.propTypes = {};
+export { KeyPicker };

package/dist/pickers/PianoPicker.js

@@ -11,7 +11,7 @@ const BasePianoPicker = ({ height, width, ...rest }) => {
     const keyWidthToHeight = keyWidth / height;
     return (_jsx("div", { children: _jsx(ReactPiano, { keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, width: width, ...rest }) }));
 };
-const WithProvider = ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }) => (_jsx(SoundfontProvider, { audioContext,
+const WithProvider = ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, width, }) => (_jsx(SoundfontProvider, { audioContext,
     format,
     hostname,
     instrumentName,
@@ -22,6 +22,7 @@ const WithProvider = ({ format, height, hostname, instrumentName, onChange, onCl
         onKeyMouseEnter,
         onKeyMouseLeave,
         playNote,
+        selectedNotes,
         stopNote,
         width })) }));
 export { WithProvider as PianoPicker };

package/dist/pickers/knobSkin10.js

@@ -55,8 +55,26 @@ const knobSkin10 = {
               </g>
               <g id="knob" transform="translate(28.574244, 28.574244)">
                   <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
+
+                  <!-- Rotating indicator (existing) -->
                   <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
               </g>
+
+              <!-- Fixed position marks (outside the rotating knob group) -->
+              <!-- 12:00 position mark (more prominent) -->
+              <line x1="100.0098534" y1="15" x2="100.0098534" y2="35" stroke="#CCCCCC" stroke-width="4" opacity="0.9"/>
+
+              <!-- Arc fill between end position marks -->
+             <!-- <path d="M 35 165 A 65 65 0 0 1 165 165" stroke="#666666" stroke-width="8" fill="none" opacity="0.3"/> -->
+
+              <!-- End position marks (0 and 127) -->
+              <!-- 0 position mark (40 degrees from top, clockwise) - at outer radius beyond knob edge -->
+              <!-- This should be at the bottom-left where the value indicator points when at 0 -->
+              <line x1="36" y1="164" x2="44" y2="156" stroke="#DDDDDD" stroke-width="4"/>
+
+              <!-- 127 position mark (320 degrees from top, clockwise) - at outer radius beyond knob edge -->
+              <!-- This should be at the bottom-right where the value indicator points when at 127 -->
+              <line x1="164" y1="164" x2="156" y2="156" stroke="#DDDDDD" stroke-width="4"/>
               <g id="label">
                   <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
                       <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">

package/dist/rotaryKnob/knobdefaultskin.js

@@ -46,6 +46,19 @@ export default {
                 </g>
                 <g id="knob" transform="translate(27.431373, 27.431373)">
                     <circle id="Oval-5" fill="#322E2E" cx="71" cy="71" r="71"></circle>
+
+                    <!-- Fixed position marks -->
+                    <!-- 12:00 position mark (less prominent) -->
+                    <line x1="71" y1="15" x2="71" y2="25" stroke="#666666" stroke-width="1" opacity="0.6"/>
+
+                    <!-- End position marks (0 and 127) -->
+                    <!-- 0 position mark (40 degrees from top, clockwise) -->
+                    <line x1="95.5" y1="45.5" x2="88.5" y2="52.5" stroke="#CCCCCC" stroke-width="2"/>
+
+                    <!-- 127 position mark (320 degrees from top, clockwise) -->
+                    <line x1="46.5" y1="45.5" x2="53.5" y2="52.5" stroke="#CCCCCC" stroke-width="2"/>
+
+                    <!-- Rotating indicator (existing) -->
                     <path d="M70.0686275,4.17063061 L86.5686275,65.2689929 C81.3642501,66.811221 75.8642501,67.5735686 70.0686275,67.5560356 C64.2730048,67.5385027 58.7730048,66.7761551 53.5686275,65.2689929 L70.0686275,4.17063061 Z" id="Rectangle-Copy" fill="#E6D7D7" transform="translate(70.068627, 35.863481) scale(1, -1) translate(-70.068627, -35.863481) "></path>
                 </g>
             </g>

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './other/SvgText';
 export * from './pickers/CCPicker';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
+export * from './pickers/KeyPicker';
 export * from './pickers/Knob';
 export * from './pickers/KnobPicker';
 export * from './pickers/LatchPicker';
@@ -27,6 +28,7 @@ export type * from './other/SvgText';
 export type * from './pickers/CCPicker';
 export type * from './pickers/ChannelMappingPicker';
 export type * from './pickers/ChannelPicker';
+export type * from './pickers/KeyPicker';
 export type * from './pickers/Knob';
 export type * from './pickers/KnobPicker';
 export type * from './pickers/LatchPicker';

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

@@ -1,3 +1,4 @@
+import type { PianoProps } from 'lib/pickers/PianoPicker';
 import type Soundfont from 'soundfont-player';
 import type { TooltipProps } from './DefaultTooltip';
 type PianoMidiNote = {
@@ -6,13 +7,13 @@ type PianoMidiNote = {
     midiNumber: number;
     width: number;
 };
-type OctavePlayerProps = {
+type OctavePlayerProps = PianoProps & {
     disabled?: boolean;
     height: number;
     octave: number;
     width: number;
 };
-type WithProviderProps = {
+type WithProviderProps = PianoProps & {
     format?: 'mp3' | 'ogg';
     height: number;
     hostname?: string;
@@ -23,10 +24,11 @@ type WithProviderProps = {
     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, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const WithProvider: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { WithProvider as OctavePlayer };
 export type { OctavePlayerProps, PianoMidiNote, WithProviderProps };

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

@@ -1,4 +1,17 @@
 import Soundfont from 'soundfont-player';
+interface MIDIGlobal {
+    Soundfont: Record<string, Record<string, string>>;
+}
+declare global {
+    interface Window {
+        MIDI?: MIDIGlobal;
+    }
+    var MIDI: MIDIGlobal | undefined;
+    namespace globalThis {
+        var MIDI: MIDIGlobal | undefined;
+    }
+}
+import '../temp/acoustic_grand_piano-mp3';
 type SoundfontProviderProps = {
     audioContext: AudioContext;
     format?: 'mp3' | 'ogg';

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

@@ -0,0 +1,15 @@
+import { type OctavePlayerProps } from '../other/OctavePlayer';
+type KeyPickerProps = Omit<OctavePlayerProps, 'selectedNotes' | 'onClick'> & {
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    height?: number;
+    width?: number;
+    octave?: number;
+};
+declare const KeyPicker: {
+    (props: KeyPickerProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {};
+};
+export { KeyPicker };
+export type { KeyPickerProps };

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

@@ -1,9 +1,11 @@
 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, soundfont, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const WithProvider: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, selectedNotes, soundfont, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { WithProvider as PianoPicker };
 export type { PianoProps };

package/lib/index.ts

@@ -10,6 +10,7 @@ export * from './other/SvgText'
 export * from './pickers/CCPicker'
 export * from './pickers/ChannelMappingPicker'
 export * from './pickers/ChannelPicker'
+export * from './pickers/KeyPicker'
 export * from './pickers/Knob'
 export * from './pickers/KnobPicker'
 export * from './pickers/LatchPicker'
@@ -34,6 +35,7 @@ export type * from './other/SvgText'
 export type * from './pickers/CCPicker'
 export type * from './pickers/ChannelMappingPicker'
 export type * from './pickers/ChannelPicker'
+export type * from './pickers/KeyPicker'
 export type * from './pickers/Knob'
 export type * from './pickers/KnobPicker'
 export type * from './pickers/LatchPicker'

package/lib/other/OctavePlayer.tsx

@@ -1,3 +1,4 @@
+import type { PianoProps } from 'lib/pickers/PianoPicker'
 import type Soundfont from 'soundfont-player'
 import { /* Midi, */ Note } from 'tonal'
 import { Piano as ReactPiano } from 'zds-react-piano'
@@ -38,7 +39,7 @@ const whiteNotes = numNotes * 0.7 // approx
 
 const audioContext = new window.AudioContext()
 
-type OctavePlayerProps = {
+type OctavePlayerProps = PianoProps & {
   disabled?: boolean
   height: number
   octave: number
@@ -70,7 +71,7 @@ const BaseOctavePlayer = ({
   )
 }
 
-type WithProviderProps = {
+type WithProviderProps = PianoProps & {
   format?: 'mp3' | 'ogg'
   height: number
   hostname?: string
@@ -81,6 +82,7 @@ type WithProviderProps = {
   onDoubleClick?: (note: number) => void
   onKeyMouseEnter?: (note: PianoMidiNote) => void
   onKeyMouseLeave?: (note: number) => void
+  selectedNotes?: number[]
   soundfont?: 'MusyngKite' | 'FluidR3_GM'
   Tooltip?: TooltipProps
   width: number
@@ -97,6 +99,7 @@ const WithProvider = ({
   onDoubleClick,
   onKeyMouseEnter,
   onKeyMouseLeave,
+  selectedNotes,
   soundfont,
   Tooltip,
   width,
@@ -110,35 +113,23 @@ const WithProvider = ({
       onChange,
       soundfont,
     }}
-    render={({
-      isLoading,
-      playNote,
-      stopNote,
-    }: {
-      isLoading: boolean
-      playNote: (midiNumber: number) => void
-      stopNote: (midiNumber: number) => void
-    }) => (
-      <>
-        <div>
-          <h2>Octave: {octave}</h2>
-        </div>
-        <BaseOctavePlayer
-          disabled={isLoading}
-          {...{
-            height,
-            octave,
-            onClick,
-            onDoubleClick,
-            onKeyMouseEnter,
-            onKeyMouseLeave,
-            playNote,
-            stopNote,
-            Tooltip,
-            width,
-          }}
-        />
-      </>
+    render={({ isLoading, playNote, stopNote }) => (
+      <BaseOctavePlayer
+        disabled={isLoading}
+        {...{
+          height,
+          octave,
+          onClick,
+          onDoubleClick,
+          onKeyMouseEnter,
+          onKeyMouseLeave,
+          playNote,
+          selectedNotes,
+          stopNote,
+          Tooltip,
+          width,
+        }}
+      />
     )}
   />
 )

package/lib/other/SoundFontProvider.tsx

@@ -2,7 +2,49 @@
 // for more documentation on prop options.
 import { useCallback, useEffect, useState } from 'react'
 import Soundfont from 'soundfont-player'
-// import '../temp/acoustic_grand_piano-mp3'
+import { Note } from 'tonal'
+
+// Type for the MIDI global object
+interface MIDIGlobal {
+  Soundfont: Record<string, Record<string, string>>
+}
+
+// Extend global interfaces to include MIDI
+declare global {
+  interface Window {
+    MIDI?: MIDIGlobal
+  }
+  var MIDI: MIDIGlobal | undefined
+  namespace globalThis {
+    var MIDI: MIDIGlobal | undefined
+  }
+}
+// Ensure MIDI global exists before importing soundfont
+if (typeof window !== 'undefined') {
+  if (!window.MIDI) {
+    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: {} }
+  }
+}
+
+// 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 '../temp/acoustic_grand_piano-mp3'
 
 const isDefined = <T,>(item: T) =>
   item !== undefined && item !== null && !Number.isNaN(item)
@@ -56,11 +98,48 @@ const SoundfontProvider = (props: SoundfontProviderProps) => {
         })
       } else if (instrumentName) {
         // the host app has already injected the soundfont into global space
-        Soundfont.instrument(audioContext, instrumentName).then(
-          newInstrument => {
-            setInstrument(newInstrument)
-          },
-        )
+        // 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: number | string): string => {
+            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: string | number, velocity?: number) => {
+              // 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 as Soundfont.Player)
+        } else {
+          setIsLoading(false)
+        }
       } else {
         // sound must be disabled
         setIsLoading(false)

package/lib/pickers/KeyPicker.tsx

@@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+import { OctavePlayer, type OctavePlayerProps } from '../other/OctavePlayer'
+import { noSelection } from './Select'
+
+type KeyPickerProps = Omit<OctavePlayerProps, 'selectedNotes' | 'onClick'> & {
+  value: number
+  onChange: (value: number) => void
+  disabled?: boolean
+  height?: number
+  width?: number
+  octave?: number
+}
+
+const KeyPicker = (props: KeyPickerProps) => {
+  const {
+    value,
+    onChange,
+    disabled = false,
+    height = 100,
+    width = 300,
+    octave = 4,
+    ...rest
+  } = props
+
+  const handleKeyClick = useCallback(
+    (note: number) => {
+      if (disabled) return
+      onChange(note)
+    },
+    [disabled, onChange],
+  )
+
+  // Only highlight the note if it's a valid selection and within the octave range
+  // Octave 4 = C4 (60) to B4 (71)
+  const octaveStart = 60 + (octave - 4) * 12
+  const octaveEnd = octaveStart + 11
+  const shouldHighlight =
+    value !== noSelection && value >= octaveStart && value <= octaveEnd
+
+  return (
+    <OctavePlayer
+      {...rest}
+      selectedNotes={shouldHighlight ? [value] : []}
+      disabled={disabled}
+      height={height}
+      width={width}
+      octave={octave}
+      onClick={handleKeyClick}
+    />
+  )
+}
+
+KeyPicker.propTypes = {}
+
+export { KeyPicker }
+export type { KeyPickerProps }

package/lib/pickers/PianoPicker.tsx

@@ -11,6 +11,8 @@ const whiteNotes = numNotes * 0.7 // approx
 const audioContext = new window.AudioContext()
 
 type PianoProps = {
+  activeNotes?: number[]
+  selectedNotes?: number[]
   disabled: boolean
   height: number
   width: number
@@ -42,6 +44,7 @@ const WithProvider = ({
   onDoubleClick,
   onKeyMouseEnter,
   onKeyMouseLeave,
+  selectedNotes,
   soundfont,
   width,
 }: WithProviderProps) => (
@@ -64,6 +67,7 @@ const WithProvider = ({
           onKeyMouseEnter,
           onKeyMouseLeave,
           playNote,
+          selectedNotes,
           stopNote,
           width,
         }}

package/lib/pickers/knobSkin10.tsx

@@ -55,8 +55,26 @@ const knobSkin10 = {
               </g>
               <g id="knob" transform="translate(28.574244, 28.574244)">
                   <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
+
+                  <!-- Rotating indicator (existing) -->
                   <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
               </g>
+
+              <!-- Fixed position marks (outside the rotating knob group) -->
+              <!-- 12:00 position mark (more prominent) -->
+              <line x1="100.0098534" y1="15" x2="100.0098534" y2="35" stroke="#CCCCCC" stroke-width="4" opacity="0.9"/>
+
+              <!-- Arc fill between end position marks -->
+             <!-- <path d="M 35 165 A 65 65 0 0 1 165 165" stroke="#666666" stroke-width="8" fill="none" opacity="0.3"/> -->
+
+              <!-- End position marks (0 and 127) -->
+              <!-- 0 position mark (40 degrees from top, clockwise) - at outer radius beyond knob edge -->
+              <!-- This should be at the bottom-left where the value indicator points when at 0 -->
+              <line x1="36" y1="164" x2="44" y2="156" stroke="#DDDDDD" stroke-width="4"/>
+
+              <!-- 127 position mark (320 degrees from top, clockwise) - at outer radius beyond knob edge -->
+              <!-- This should be at the bottom-right where the value indicator points when at 127 -->
+              <line x1="164" y1="164" x2="156" y2="156" stroke="#DDDDDD" stroke-width="4"/>
               <g id="label">
                   <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
                       <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">

package/lib/rotaryKnob/knobdefaultskin.ts

@@ -46,6 +46,19 @@ export default {
                 </g>
                 <g id="knob" transform="translate(27.431373, 27.431373)">
                     <circle id="Oval-5" fill="#322E2E" cx="71" cy="71" r="71"></circle>
+
+                    <!-- Fixed position marks -->
+                    <!-- 12:00 position mark (less prominent) -->
+                    <line x1="71" y1="15" x2="71" y2="25" stroke="#666666" stroke-width="1" opacity="0.6"/>
+
+                    <!-- End position marks (0 and 127) -->
+                    <!-- 0 position mark (40 degrees from top, clockwise) -->
+                    <line x1="95.5" y1="45.5" x2="88.5" y2="52.5" stroke="#CCCCCC" stroke-width="2"/>
+
+                    <!-- 127 position mark (320 degrees from top, clockwise) -->
+                    <line x1="46.5" y1="45.5" x2="53.5" y2="52.5" stroke="#CCCCCC" stroke-width="2"/>
+
+                    <!-- Rotating indicator (existing) -->
                     <path d="M70.0686275,4.17063061 L86.5686275,65.2689929 C81.3642501,66.811221 75.8642501,67.5735686 70.0686275,67.5560356 C64.2730048,67.5385027 58.7730048,66.7761551 53.5686275,65.2689929 L70.0686275,4.17063061 Z" id="Rectangle-Copy" fill="#E6D7D7" transform="translate(70.068627, 35.863481) scale(1, -1) translate(-70.068627, -35.863481) "></path>
                 </g>
             </g>