@minikeys/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1603 @@
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n      background-color: #8eff00;\n      box-shadow: 0px 0px calc(var(--height) * 0.08) calc(var(--height) * 0.04)\n        rgba(0, 255, 0, 0.9);\n      transform: translateY(calc(var(--height) * 0.03));\n    "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  right: calc(var(--height) * 0.23);\n  top: calc(var(--height) * 0.23);\n  width: calc(round(var(--height) * 0.06, 1px));\n  height: calc(round(var(--height) * 0.06, 1px));\n  border-radius: 50%;\n  background-color: #ccc;\n  transition: all 0.3s ease;\n\n  ",
+        "\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n      transform: translateY(calc(var(--height) * 0.03));\n    "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  width: calc(round(var(--height) * 0.06, 1px));\n  height: calc(round(var(--height) * 0.06, 1px));\n  border-radius: calc(round(var(--height) * 0.03, 1px));\n  position: absolute;\n  right: calc(var(--height) * 0.23);\n  top: calc(var(--height) * 0.23);\n  transition: all 0.3s ease;\n\n  ",
+        "\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n      opacity: 1;\n      transform: translateY(0);\n    "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  --width: ",
+        "px;\n  --height: ",
+        "px;\n  width: var(--width);\n  height: var(--height);\n  /* opacity: ",
+        "; */\n  display: ",
+        ";\n  padding: calc(var(--height) * 0.05);\n\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n  transform: translateY(calc(var(--height) * -0.1));\n  ",
+        "\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n  opacity: 0.2;\n  background-color: #eee;\n  border: 1px solid #ccc;\n"
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  opacity: 0.2;\n  background-color: #eee;\n  border: 1px solid #ccc;\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n  transform: translateY(calc(var(--height) * 0.03));\n  box-shadow: 0 calc(var(--height) * 0.01) calc(var(--height) * 0.03)\n      calc(var(--height) * 0.01) rgba(0, 0, 0, 0),\n    rgba(255, 255, 255, 0.2) 0px calc(var(--height) * 0.03)\n      calc(var(--height) * 0.04) 0px inset;\n"
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\n  background-color: #222;\n  color: #fff;\n\n  &:hover {\n    background-color: #111;\n  }\n\n  &:active {\n    ",
+        "\n    background-color: #000;\n  }\n"
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\n  background-color: #fff;\n  color: #444;\n  border: 1px solid #ddd;\n\n  &:hover {\n    background-color: #f8f8f8;\n  }\n\n  &:active {\n    ",
+        "\n    background-color: #efefef;\n  }\n"
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        "\n  background-color: #efefef;\n"
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        "\n  background-color: #000;\n"
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        "\n  filter: brightness(0.9);\n"
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject14() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: calc(var(--height) * 0.2);\n"
+    ]);
+    _templateObject14 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject15() {
+    var data = _tagged_template_literal([
+        "\n        background-color: ",
+        ";\n        color: ",
+        ";\n        ",
+        "\n\n        &:hover {\n          filter: brightness(0.9);\n        }\n\n        &:active {\n          ",
+        "\n        }\n      "
+    ]);
+    _templateObject15 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject16() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: calc(var(--height) * 0.06);\n  font-family: sans-serif;\n  padding: calc(var(--height) * 0.08);\n  font-size: calc(var(--height) * 0.15);\n  cursor: pointer;\n  user-select: none;\n  box-shadow: 0 calc(var(--height) * 0.01) calc(var(--height) * 0.03)\n      calc(var(--height) * 0.01) rgba(0, 0, 0, 0.1),\n    rgba(255, 255, 255, 0.1) 0px calc(var(--height) * 0.03)\n      calc(var(--height) * 0.04) 0px inset;\n  transition: all 0.3s ease;\n\n  ",
+        "\n\n  ",
+        "\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ",
+        "\n"
+    ]);
+    _templateObject16 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject17() {
+    var data = _tagged_template_literal([
+        "\n      text-align: center;\n    "
+    ]);
+    _templateObject17 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject18() {
+    var data = _tagged_template_literal([
+        "\n  font-size: calc(var(--height) * 0.15);\n  opacity: 0.8;\n\n  ",
+        ";\n"
+    ]);
+    _templateObject18 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject19() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        "px;\n  box-sizing: border-box;\n\n  * {\n    box-sizing: border-box;\n  }\n"
+    ]);
+    _templateObject19 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject20() {
+    var data = _tagged_template_literal([
+        "\n  display: ",
+        ";\n  margin-left: ",
+        "px;\n"
+    ]);
+    _templateObject20 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject21() {
+    var data = _tagged_template_literal([
+        "\n  cursor: pointer;\n\n  &:hover {\n    fill: ",
+        ";\n  }\n\n  &:active {\n    fill: ",
+        ";\n  }\n"
+    ]);
+    _templateObject21 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject22() {
+    var data = _tagged_template_literal([
+        "\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n"
+    ]);
+    _templateObject22 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject23() {
+    var data = _tagged_template_literal([
+        "\n  user-select: none;\n"
+    ]);
+    _templateObject23 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+var __copyProps = function(to, from, except, desc) {
+    if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var key = _step.value;
+                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+                    get: function() {
+                        return from[key];
+                    },
+                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+                });
+            };
+            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return to;
+};
+var __toESM = function(mod, isNodeMode, target) {
+    return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+        value: mod,
+        enumerable: true
+    }) : target, mod);
+};
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
+};
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+    Keyboard: function() {
+        return Keyboard;
+    },
+    Piano: function() {
+        return Piano;
+    },
+    useKeyboardControl: function() {
+        return useKeyboardControl;
+    },
+    useMiniKeys: function() {
+        return useMiniKeys;
+    },
+    useMiniKeysKeyboard: function() {
+        return useMiniKeysKeyboard;
+    }
+});
+module.exports = __toCommonJS(index_exports);
+// src/hooks/useKeyboardControl.ts
+var import_minikeys = require("minikeys");
+var import_react = require("react");
+var useKeyboardControl = function(keyMap, playNoteFromMidi, modifierKeys) {
+    var _ref = _sliced_to_array((0, import_react.useState)([]), 2), activeKeys = _ref[0], setActiveKeys = _ref[1];
+    (0, import_react.useEffect)(function() {
+        var handleKeyDown = function(event) {
+            var _keyMap_get;
+            var modifierKey = modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.find(function(modifierKey2) {
+                return modifierKey2.keyCode === event.code;
+            });
+            if (!modifierKey && activeKeys.some(function(key) {
+                return key.keyCode === event.code;
+            })) {
+                return;
+            }
+            if (modifierKey && !(keyMap === null || keyMap === void 0 ? void 0 : keyMap.get(event.code))) {
+                modifierKey === null || modifierKey === void 0 ? void 0 : modifierKey.action();
+            }
+            var note = keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(event.code)) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.midiNote;
+            if (note && playNoteFromMidi) {
+                playNoteFromMidi(note);
+            }
+            setActiveKeys(function(prev) {
+                return _to_consumable_array(prev).concat([
+                    {
+                        keyCode: event.code,
+                        note: note ? import_minikeys.midiToNote[note] : void 0
+                    }
+                ]);
+            });
+        };
+        var handleKeyUp = function(event) {
+            setActiveKeys(function(prev) {
+                return prev.filter(function(key) {
+                    return key.keyCode !== event.code;
+                });
+            });
+            var modifierKey = modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.find(function(modifierKey2) {
+                return modifierKey2.keyCode === event.code;
+            });
+            if (modifierKey && !(keyMap === null || keyMap === void 0 ? void 0 : keyMap.get(event.code))) {
+                (modifierKey === null || modifierKey === void 0 ? void 0 : modifierKey.actionOnRelease) && (modifierKey === null || modifierKey === void 0 ? void 0 : modifierKey.actionOnRelease());
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown, true);
+        window.addEventListener("keyup", handleKeyUp, true);
+        return function() {
+            window.removeEventListener("keydown", handleKeyDown, true);
+            window.removeEventListener("keyup", handleKeyUp, true);
+        };
+    }, [
+        keyMap,
+        playNoteFromMidi,
+        modifierKeys
+    ]);
+    return {
+        activeKeys: activeKeys
+    };
+};
+// src/hooks/useMiniKeys.ts
+var import_minikeys2 = require("minikeys");
+var import_react2 = require("react");
+var useMiniKeys = function(samples) {
+    var minikeysRef = (0, import_react2.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react2.useState)(0), 2), progress = _ref[0], setProgress = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react2.useState)(true), 2), isLoading = _ref1[0], setIsLoading = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react2.useState)(false), 2), isSuccess = _ref2[0], setIsSuccess = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react2.useState)(false), 2), isError = _ref3[0], setIsError = _ref3[1];
+    var _ref4 = _sliced_to_array((0, import_react2.useState)(false), 2), sustain = _ref4[0], setSustain = _ref4[1];
+    (0, import_react2.useEffect)(function() {
+        if (!minikeysRef.current) {
+            minikeysRef.current = new import_minikeys2.MiniKeys();
+        }
+        return function() {
+            minikeysRef.current = null;
+        };
+    }, []);
+    var setMiniKeysSustain = function(sustain2) {
+        if (minikeysRef.current) {
+            minikeysRef.current.setSustain(sustain2);
+            setSustain(sustain2);
+        }
+    };
+    (0, import_react2.useEffect)(function() {
+        if (minikeysRef.current) {
+            setIsLoading(true);
+            minikeysRef.current.loadNotes(samples, setProgress).then(function() {
+                setIsLoading(false);
+                setIsSuccess(true);
+            }).catch(function() {
+                setIsLoading(false);
+                setIsError(true);
+            });
+        }
+    }, [
+        samples
+    ]);
+    return {
+        playNoteFromName: minikeysRef.current ? minikeysRef.current.playNoteFromName : void 0,
+        playNoteFromMidi: minikeysRef.current ? minikeysRef.current.playNoteFromMidi : void 0,
+        setSustain: setMiniKeysSustain,
+        sustain: sustain,
+        isLoading: isLoading,
+        isSuccess: isSuccess,
+        isError: isError,
+        progress: progress
+    };
+};
+// src/hooks/useMiniKeysKeyboard.ts
+var import_minikeys3 = require("minikeys");
+var import_react3 = require("react");
+var useMiniKeysKeyboard = function(mode) {
+    var _miniKeysKeyboardRef_current;
+    var miniKeysKeyboardRef = (0, import_react3.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react3.useState)(), 2), keyMap = _ref[0], setKeyMap = _ref[1];
+    var noteRange = (_miniKeysKeyboardRef_current = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current === void 0 ? void 0 : _miniKeysKeyboardRef_current.getNoteRange();
+    (0, import_react3.useEffect)(function() {
+        if (!miniKeysKeyboardRef.current) {
+            miniKeysKeyboardRef.current = new import_minikeys3.MiniKeysKeyboard(mode);
+            setKeyMap(miniKeysKeyboardRef.current.getNoteMap());
+        }
+        return function() {
+            miniKeysKeyboardRef.current = null;
+            setKeyMap(void 0);
+        };
+    }, [
+        mode
+    ]);
+    var transposeDown = function() {
+        var _miniKeysKeyboardRef_current, _miniKeysKeyboardRef_current1;
+        (_miniKeysKeyboardRef_current = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current === void 0 ? void 0 : _miniKeysKeyboardRef_current.shiftLeft();
+        setKeyMap((_miniKeysKeyboardRef_current1 = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current1 === void 0 ? void 0 : _miniKeysKeyboardRef_current1.getNoteMap());
+    };
+    var transposeUp = function() {
+        var _miniKeysKeyboardRef_current, _miniKeysKeyboardRef_current1;
+        (_miniKeysKeyboardRef_current = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current === void 0 ? void 0 : _miniKeysKeyboardRef_current.shiftRight();
+        setKeyMap((_miniKeysKeyboardRef_current1 = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current1 === void 0 ? void 0 : _miniKeysKeyboardRef_current1.getNoteMap());
+    };
+    var octaveDown = function() {
+        var _miniKeysKeyboardRef_current, _miniKeysKeyboardRef_current1;
+        (_miniKeysKeyboardRef_current = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current === void 0 ? void 0 : _miniKeysKeyboardRef_current.shiftLeftOctave();
+        setKeyMap((_miniKeysKeyboardRef_current1 = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current1 === void 0 ? void 0 : _miniKeysKeyboardRef_current1.getNoteMap());
+    };
+    var octaveUp = function() {
+        var _miniKeysKeyboardRef_current, _miniKeysKeyboardRef_current1;
+        (_miniKeysKeyboardRef_current = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current === void 0 ? void 0 : _miniKeysKeyboardRef_current.shiftRightOctave();
+        setKeyMap((_miniKeysKeyboardRef_current1 = miniKeysKeyboardRef.current) === null || _miniKeysKeyboardRef_current1 === void 0 ? void 0 : _miniKeysKeyboardRef_current1.getNoteMap());
+    };
+    return {
+        keyMap: keyMap,
+        noteRange: noteRange,
+        transposeDown: transposeDown,
+        transposeUp: transposeUp,
+        octaveDown: octaveDown,
+        octaveUp: octaveUp
+    };
+};
+// src/Keyboard/Keyboard.tsx
+var import_react5 = require("react");
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+// src/Keyboard/Key.tsx
+var import_react4 = require("react");
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+// src/Keyboard/Indicator.tsx
+var import_styled_components = __toESM(require("styled-components"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Indicator = function(param) {
+    var state = param.state;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourIndicator, {
+        $state: state
+    });
+};
+var ColourIndicator = import_styled_components.default.div(_templateObject1(), function(param) {
+    var $state = param.$state;
+    return $state === "active" && import_styled_components.css(_templateObject());
+});
+var Container = import_styled_components.default.div(_templateObject3(), function(param) {
+    var $active = param.$active;
+    return $active && import_styled_components.css(_templateObject2());
+});
+// src/Keyboard/Key.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Key = function(param) {
+    var label = param.label, size = param.size, hidden = param.hidden, hiddenOpacity = param.hiddenOpacity, baseWidth = param.baseWidth, active = param.active, keyType = param.keyType, modifier = param.modifier, delayDisplay = param.delayDisplay, indicator = param.indicator, onClick = param.onClick;
+    var _ref = _sliced_to_array((0, import_react4.useState)(delayDisplay !== void 0 && delayDisplay !== null), 2), hide = _ref[0], setHide = _ref[1];
+    if (active) {
+        console.log(active);
+    }
+    (0, import_react4.useEffect)(function() {
+        if (hide) {
+            setTimeout(function() {
+                setHide(false);
+            }, (delayDisplay !== null && delayDisplay !== void 0 ? delayDisplay : 0) * 10);
+        }
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Container2, {
+        $hidden: hidden,
+        $hiddenOpacity: hiddenOpacity,
+        $width: baseWidth * (size !== null && size !== void 0 ? size : 1),
+        $height: baseWidth,
+        $hide: hide,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Keycap, {
+                $size: size,
+                $active: active || false,
+                $keyType: modifier ? "modifier" : keyType,
+                onMouseDown: modifier ? modifier.action : onClick,
+                $bgColour: modifier === null || modifier === void 0 ? void 0 : modifier.bgColour,
+                $colour: modifier === null || modifier === void 0 ? void 0 : modifier.colour,
+                children: [
+                    label,
+                    modifier && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, {
+                        $size: size,
+                        children: modifier.label
+                    })
+                ]
+            }),
+            indicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Indicator, {
+                state: indicator
+            })
+        ]
+    });
+};
+var Container2 = import_styled_components2.default.div(_templateObject5(), function(props) {
+    return props.$width;
+}, function(props) {
+    return props.$height;
+}, function(props) {
+    return props.$hiddenOpacity ? 0 : 1;
+}, function(props) {
+    return props.$hidden ? "none" : "block";
+}, function(param) {
+    var $hide = param.$hide, $hiddenOpacity = param.$hiddenOpacity;
+    return !$hide && !$hiddenOpacity && import_styled_components2.css(_templateObject4());
+});
+var disabledKeycap = import_styled_components2.css(_templateObject6());
+var unplayableKeycap = import_styled_components2.css(_templateObject7());
+var activeKeycap = import_styled_components2.css(_templateObject8());
+var blackKeycap = import_styled_components2.css(_templateObject9(), activeKeycap);
+var whiteKeycap = import_styled_components2.css(_templateObject10(), activeKeycap);
+var activeKeycapWhite = import_styled_components2.css(_templateObject11(), activeKeycap);
+var activeKeycapBlack = import_styled_components2.css(_templateObject12(), activeKeycap);
+var activeKeycapModifier = import_styled_components2.css(_templateObject13(), activeKeycap);
+var playableKeycap = import_styled_components2.css(_templateObject14());
+var Keycap = import_styled_components2.default.div(_templateObject16(), function(param) {
+    var $keyType = param.$keyType, $bgColour = param.$bgColour, $colour = param.$colour;
+    if ($keyType === void 0) {
+        return unplayableKeycap;
+    } else if ($keyType === "disabled") {
+        return disabledKeycap;
+    } else if ($keyType === "black") {
+        return blackKeycap;
+    } else if ($keyType === "white") {
+        return whiteKeycap;
+    } else if ($keyType === "modifier") {
+        return import_styled_components2.css(_templateObject15(), $bgColour || "#eee", $colour, !$bgColour && "border: 1px solid #ddd;", activeKeycapModifier);
+    }
+}, function(param) {
+    var $active = param.$active, $keyType = param.$keyType;
+    if ($keyType !== "disabled" && $keyType !== "unplayable" && $active) {
+        if ($keyType === "white") return activeKeycapWhite;
+        if ($keyType === "black") return activeKeycapBlack;
+        if ($keyType === "modifier") return activeKeycapModifier;
+    }
+}, function(param) {
+    var $size = param.$size, $keyType = param.$keyType;
+    if (!$size && $keyType !== "modifier") {
+        return playableKeycap;
+    }
+});
+var Label = import_styled_components2.default.span(_templateObject18(), function(param) {
+    var $size = param.$size;
+    return !$size && import_styled_components2.css(_templateObject17());
+});
+// src/Keyboard/utils.ts
+var keyCodeToLabel = /* @__PURE__ */ new Map([
+    [
+        "Digit1",
+        "1"
+    ],
+    [
+        "Digit2",
+        "2"
+    ],
+    [
+        "Digit3",
+        "3"
+    ],
+    [
+        "Digit4",
+        "4"
+    ],
+    [
+        "Digit5",
+        "5"
+    ],
+    [
+        "Digit6",
+        "6"
+    ],
+    [
+        "Digit7",
+        "7"
+    ],
+    [
+        "Digit8",
+        "8"
+    ],
+    [
+        "Digit9",
+        "9"
+    ],
+    [
+        "Digit0",
+        "0"
+    ],
+    [
+        "Minus",
+        "-"
+    ],
+    [
+        "Equal",
+        "="
+    ],
+    [
+        "KeyQ",
+        "q"
+    ],
+    [
+        "KeyW",
+        "w"
+    ],
+    [
+        "KeyE",
+        "e"
+    ],
+    [
+        "KeyR",
+        "r"
+    ],
+    [
+        "KeyT",
+        "t"
+    ],
+    [
+        "KeyY",
+        "y"
+    ],
+    [
+        "KeyU",
+        "u"
+    ],
+    [
+        "KeyI",
+        "i"
+    ],
+    [
+        "KeyO",
+        "o"
+    ],
+    [
+        "KeyP",
+        "p"
+    ],
+    [
+        "BracketLeft",
+        "["
+    ],
+    [
+        "BracketRight",
+        "]"
+    ],
+    [
+        "KeyA",
+        "a"
+    ],
+    [
+        "KeyS",
+        "s"
+    ],
+    [
+        "KeyD",
+        "d"
+    ],
+    [
+        "KeyF",
+        "f"
+    ],
+    [
+        "KeyG",
+        "g"
+    ],
+    [
+        "KeyH",
+        "h"
+    ],
+    [
+        "KeyJ",
+        "j"
+    ],
+    [
+        "KeyK",
+        "k"
+    ],
+    [
+        "KeyL",
+        "l"
+    ],
+    [
+        "Semicolon",
+        ";"
+    ],
+    [
+        "Quote",
+        "'"
+    ],
+    [
+        "KeyZ",
+        "z"
+    ],
+    [
+        "KeyX",
+        "x"
+    ],
+    [
+        "KeyC",
+        "c"
+    ],
+    [
+        "KeyV",
+        "v"
+    ],
+    [
+        "KeyB",
+        "b"
+    ],
+    [
+        "KeyN",
+        "n"
+    ],
+    [
+        "KeyM",
+        "m"
+    ],
+    [
+        "Comma",
+        ","
+    ],
+    [
+        "Period",
+        "."
+    ],
+    [
+        "Slash",
+        "/"
+    ]
+]);
+var keyboardRows = [
+    [
+        "Digit1",
+        "Digit2",
+        "Digit3",
+        "Digit4",
+        "Digit5",
+        "Digit6",
+        "Digit7",
+        "Digit8",
+        "Digit9",
+        "Digit0",
+        "Minus",
+        "Equal"
+    ],
+    [
+        "KeyQ",
+        "KeyW",
+        "KeyE",
+        "KeyR",
+        "KeyT",
+        "KeyY",
+        "KeyU",
+        "KeyI",
+        "KeyO",
+        "KeyP",
+        "BracketLeft",
+        "BracketRight"
+    ],
+    [
+        "KeyA",
+        "KeyS",
+        "KeyD",
+        "KeyF",
+        "KeyG",
+        "KeyH",
+        "KeyJ",
+        "KeyK",
+        "KeyL",
+        "Semicolon",
+        "Quote"
+    ],
+    [
+        "KeyZ",
+        "KeyX",
+        "KeyC",
+        "KeyV",
+        "KeyB",
+        "KeyN",
+        "KeyM",
+        "Comma",
+        "Period",
+        "Slash"
+    ]
+];
+var optionalModifier = function(keyCodes, modifierKeys) {
+    return modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.find(function(modifierKey) {
+        return keyCodes.includes(modifierKey.keyCode);
+    });
+};
+var getDisplayMap = function(showFullKeyboard, dualMode, modifierKeys) {
+    var displayMap = /* @__PURE__ */ new Map();
+    displayMap.set("Escape", showFullKeyboard || !!optionalModifier([
+        "Escape",
+        "IntlBackslash"
+    ], modifierKeys) ? displayMap.size : null);
+    if (showFullKeyboard || dualMode) {
+        keyboardRows[0].forEach(function(key) {
+            return displayMap.set(key, displayMap.size);
+        });
+    } else {
+        keyboardRows[0].forEach(function(key) {
+            displayMap.set(key, !!optionalModifier([
+                key
+            ], modifierKeys) ? displayMap.size : null);
+        });
+    }
+    displayMap.set("Backspace", showFullKeyboard || !!optionalModifier([
+        "Backspace"
+    ], modifierKeys) ? displayMap.size : null);
+    displayMap.set("Tab", showFullKeyboard || !!optionalModifier([
+        "Tab",
+        "Backquote"
+    ], modifierKeys) ? displayMap.size : null);
+    keyboardRows[1].forEach(function(key) {
+        return displayMap.set(key, displayMap.size);
+    });
+    displayMap.set("Backquote", showFullKeyboard || !!optionalModifier([
+        "Backquote"
+    ], modifierKeys) ? displayMap.size : null);
+    displayMap.set("CapsLock", showFullKeyboard || !!optionalModifier([
+        "CapsLock"
+    ], modifierKeys) ? displayMap.size : null);
+    keyboardRows[2].forEach(function(key) {
+        return displayMap.set(key, displayMap.size);
+    });
+    displayMap.set("Enter", showFullKeyboard || !!optionalModifier([
+        "Enter"
+    ], modifierKeys) ? displayMap.size : null);
+    displayMap.set("ShiftLeft", showFullKeyboard || !!optionalModifier([
+        "ShiftLeft"
+    ], modifierKeys) ? displayMap.size : null);
+    if (showFullKeyboard || dualMode) {
+        keyboardRows[3].forEach(function(key) {
+            return displayMap.set(key, displayMap.size);
+        });
+    } else {
+        keyboardRows[3].forEach(function(key) {
+            displayMap.set(key, !!optionalModifier([
+                key
+            ], modifierKeys) ? displayMap.size : null);
+        });
+    }
+    displayMap.set("ShiftRight", showFullKeyboard || !!optionalModifier([
+        "ShiftRight"
+    ], modifierKeys) ? displayMap.size : null);
+    return displayMap;
+};
+// src/Keyboard/Keyboard.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var activeKeysIncludes = function(activeKeys, key) {
+    return activeKeys.map(function(activeKey) {
+        return activeKey.keyCode;
+    }).includes(key);
+};
+var Keyboard = function(param) {
+    var _param_width = param.width, width = _param_width === void 0 ? 1200 : _param_width, _param_dualMode = param.dualMode, dualMode = _param_dualMode === void 0 ? false : _param_dualMode, _param_showFullKeyboard = param.showFullKeyboard, showFullKeyboard = _param_showFullKeyboard === void 0 ? false : _param_showFullKeyboard, modifierKeys = param.modifierKeys, activeKeys = param.activeKeys, keyMap = param.keyMap, _param_animate = param.animate, animate = _param_animate === void 0 ? false : _param_animate, onKeyClick = param.onKeyClick;
+    var nonPlayableModifierKey = modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.some(function(modifierKey) {
+        return !Array.from(keyCodeToLabel.keys()).includes(modifierKey.keyCode);
+    });
+    var baseWidth = width / (showFullKeyboard || nonPlayableModifierKey ? 15 : 12.5);
+    var calculateRowShift = function(shift) {
+        if (showFullKeyboard) {
+            return 0;
+        } else {
+            if (dualMode || nonPlayableModifierKey) {
+                return baseWidth * shift;
+            } else {
+                return baseWidth * shift - baseWidth * 0.5;
+            }
+        }
+    };
+    var handleClick = function(midiNote) {
+        if (onKeyClick && midiNote !== null && midiNote !== void 0) {
+            onKeyClick(midiNote);
+        }
+    };
+    var displayMap = (0, import_react5.useMemo)(function() {
+        return getDisplayMap(showFullKeyboard, dualMode, modifierKeys);
+    }, [
+        showFullKeyboard,
+        dualMode,
+        modifierKeys
+    ]);
+    console.log(activeKeys, keyboardRows[0][1], activeKeysIncludes(activeKeys, keyboardRows[0][1]));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Container3, {
+        $width: width,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Row, {
+                $shift: nonPlayableModifierKey ? (modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.some(function(modifierKey) {
+                    return [
+                        "Escape",
+                        "IntlBackslash"
+                    ].includes(modifierKey.keyCode);
+                })) ? 0 : calculateRowShift(1) : calculateRowShift(0),
+                $show: displayMap.get("Escape") !== null || displayMap.get("Backspace") !== null || keyboardRows[0].some(function(key) {
+                    return displayMap.get(key) !== null;
+                }),
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("Escape") : null,
+                        baseWidth: baseWidth,
+                        size: 1,
+                        hidden: displayMap.get("Escape") === null,
+                        label: "esc",
+                        active: activeKeysIncludes(activeKeys, "Escape") || activeKeysIncludes(activeKeys, "IntlBackslash"),
+                        modifier: optionalModifier([
+                            "Escape",
+                            "IntlBackslash"
+                        ], modifierKeys)
+                    }),
+                    Array.from({
+                        length: 12
+                    }).map(function(_, i) {
+                        var _keyMap_get;
+                        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                            delayDisplay: animate ? displayMap.get(keyboardRows[0][i]) : null,
+                            baseWidth: baseWidth,
+                            label: keyCodeToLabel.get(keyboardRows[0][i]),
+                            keyType: keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[0][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.type,
+                            active: activeKeysIncludes(activeKeys, keyboardRows[0][i]),
+                            onClick: function() {
+                                var _keyMap_get;
+                                return handleClick(keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[0][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.midiNote);
+                            },
+                            hiddenOpacity: !displayMap.get(keyboardRows[0][i]),
+                            modifier: dualMode ? void 0 : optionalModifier([
+                                keyboardRows[0][i]
+                            ], modifierKeys)
+                        }, i);
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("Backspace") : null,
+                        baseWidth: baseWidth,
+                        size: 2,
+                        hidden: !displayMap.get("Backspace"),
+                        label: "backspace",
+                        active: activeKeysIncludes(activeKeys, "Backspace"),
+                        modifier: optionalModifier([
+                            "Backspace"
+                        ], modifierKeys)
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Row, {
+                $shift: nonPlayableModifierKey ? (modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.some(function(modifierKey) {
+                    return [
+                        "Tab"
+                    ].includes(modifierKey.keyCode);
+                })) ? 0 : calculateRowShift(1.5) : calculateRowShift(0.5),
+                $show: true,
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("Tab") : null,
+                        baseWidth: baseWidth,
+                        size: 1.5,
+                        hidden: !displayMap.get("Tab"),
+                        label: "tab",
+                        active: activeKeysIncludes(activeKeys, "Tab"),
+                        modifier: optionalModifier([
+                            "Tab"
+                        ], modifierKeys)
+                    }),
+                    Array.from({
+                        length: 12
+                    }).map(function(_, i) {
+                        var _keyMap_get;
+                        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                            delayDisplay: animate ? displayMap.get(keyboardRows[1][i]) : null,
+                            baseWidth: baseWidth,
+                            label: keyCodeToLabel.get(keyboardRows[1][i]),
+                            keyType: keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[1][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.type,
+                            active: activeKeysIncludes(activeKeys, keyboardRows[1][i]),
+                            onClick: function() {
+                                var _keyMap_get;
+                                return handleClick(keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[1][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.midiNote);
+                            }
+                        }, i);
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("Backquote") : null,
+                        baseWidth: baseWidth,
+                        size: 1.5,
+                        hidden: !displayMap.get("Backquote"),
+                        label: "\\",
+                        active: activeKeysIncludes(activeKeys, "Backquote"),
+                        modifier: optionalModifier([
+                            "Backquote"
+                        ], modifierKeys)
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Row, {
+                $shift: nonPlayableModifierKey ? (modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.some(function(modifierKey) {
+                    return [
+                        "CapsLock"
+                    ].includes(modifierKey.keyCode);
+                })) ? 0 : calculateRowShift(1.75) : calculateRowShift(0.75),
+                $show: true,
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("CapsLock") : null,
+                        baseWidth: baseWidth,
+                        size: 1.75,
+                        hidden: !displayMap.get("CapsLock"),
+                        label: "caps lock",
+                        active: activeKeysIncludes(activeKeys, "CapsLock"),
+                        modifier: optionalModifier([
+                            "CapsLock"
+                        ], modifierKeys),
+                        indicator: optionalModifier([
+                            "CapsLock"
+                        ], modifierKeys) && (activeKeysIncludes(activeKeys, "CapsLock") ? "active" : "inactive")
+                    }),
+                    Array.from({
+                        length: 11
+                    }).map(function(_, i) {
+                        var _keyMap_get;
+                        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                            delayDisplay: animate ? displayMap.get(keyboardRows[2][i]) : null,
+                            baseWidth: baseWidth,
+                            label: keyCodeToLabel.get(keyboardRows[2][i]),
+                            keyType: keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[2][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.type,
+                            active: activeKeysIncludes(activeKeys, keyboardRows[2][i]),
+                            onClick: function() {
+                                var _keyMap_get;
+                                return handleClick(keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[2][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.midiNote);
+                            }
+                        }, i);
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("Enter") : null,
+                        baseWidth: baseWidth,
+                        size: 2.25,
+                        hidden: !displayMap.get("Enter"),
+                        label: "enter",
+                        active: activeKeysIncludes(activeKeys, "Enter"),
+                        modifier: optionalModifier([
+                            "Enter"
+                        ], modifierKeys)
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Row, {
+                $shift: nonPlayableModifierKey ? (modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.some(function(modifierKey) {
+                    return modifierKey.keyCode === "ShiftLeft";
+                })) ? 0 : calculateRowShift(2.25) : calculateRowShift(1.25),
+                $show: displayMap.get("ShiftLeft") !== null || displayMap.get("ShiftRight") !== null || keyboardRows[3].some(function(key) {
+                    return displayMap.get(key) !== null;
+                }),
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("ShiftLeft") : null,
+                        baseWidth: baseWidth,
+                        size: 2.25,
+                        hidden: !displayMap.get("ShiftLeft"),
+                        label: "shift",
+                        active: activeKeysIncludes(activeKeys, "ShiftLeft"),
+                        modifier: optionalModifier([
+                            "ShiftLeft"
+                        ], modifierKeys)
+                    }),
+                    Array.from({
+                        length: 10
+                    }).map(function(_, i) {
+                        var _keyMap_get;
+                        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                            delayDisplay: animate ? displayMap.get(keyboardRows[3][i]) : null,
+                            baseWidth: baseWidth,
+                            label: keyCodeToLabel.get(keyboardRows[3][i]),
+                            keyType: keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[3][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.type,
+                            active: activeKeysIncludes(activeKeys, keyboardRows[3][i]),
+                            onClick: function() {
+                                var _keyMap_get;
+                                return handleClick(keyMap === null || keyMap === void 0 ? void 0 : (_keyMap_get = keyMap.get(keyboardRows[3][i])) === null || _keyMap_get === void 0 ? void 0 : _keyMap_get.midiNote);
+                            },
+                            hiddenOpacity: !displayMap.get(keyboardRows[3][i]),
+                            modifier: dualMode ? void 0 : optionalModifier([
+                                keyboardRows[3][i]
+                            ], modifierKeys)
+                        }, i);
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Key, {
+                        delayDisplay: animate ? displayMap.get("ShiftRight") : null,
+                        baseWidth: baseWidth,
+                        size: 2.75,
+                        hidden: !displayMap.get("ShiftRight"),
+                        label: "shift",
+                        active: activeKeysIncludes(activeKeys, "ShiftRight"),
+                        modifier: optionalModifier([
+                            "ShiftRight"
+                        ], modifierKeys)
+                    })
+                ]
+            })
+        ]
+    });
+};
+var Container3 = import_styled_components3.default.div(_templateObject19(), function(props) {
+    return props.$width;
+});
+var Row = import_styled_components3.default.div(_templateObject20(), function(props) {
+    return props.$show ? "flex" : "none";
+}, function(props) {
+    return props.$shift;
+});
+// src/Piano/Piano.tsx
+var import_minikeys6 = require("minikeys");
+var import_styled_components6 = __toESM(require("styled-components"), 1);
+// src/Piano/BlackNotes.tsx
+var import_minikeys4 = require("minikeys");
+// src/Piano/PianoKey.tsx
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PianoKeyRect = function(param) {
+    var width = param.width, height = param.height, offset = param.offset, fill = param.fill, strokeWidth = param.strokeWidth, strokeColour = param.strokeColour, noBorder = param.noBorder, type = param.type;
+    var curve = height * 0.025;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Path, {
+        $type: type,
+        d: "\n    M".concat(width + (noBorder ? offset - strokeWidth : offset), " ").concat(type === "white" ? noBorder ? 0 : strokeWidth / 2 : 0, ",\n    L").concat(width + (noBorder ? offset - strokeWidth : offset), " ").concat(height - curve - strokeWidth / 2, ",\n    q0,").concat(curve, " -").concat(curve, ",").concat(curve, ",\n    L").concat(offset + curve + strokeWidth / 2, " ").concat(height - strokeWidth / 2, ",\n    q-").concat(curve, ",0 -").concat(curve, ",-").concat(curve, ",\n    L").concat(offset + strokeWidth / 2, " ").concat(type === "white" ? noBorder ? 0 : strokeWidth / 2 : 0, ",\n    Z\n    "),
+        fill: fill !== null && fill !== void 0 ? fill : type === "white" ? "white" : "#222",
+        stroke: noBorder ? "none" : type === "white" ? strokeColour !== null && strokeColour !== void 0 ? strokeColour : "black" : "none",
+        strokeWidth: strokeWidth
+    });
+};
+var Path = import_styled_components4.default.path(_templateObject21(), function(param) {
+    var $type = param.$type;
+    return $type === "white" ? "#ddd" : "black";
+}, function(param) {
+    var $type = param.$type;
+    return $type === "white" ? "#ccc" : "#444";
+});
+// src/Piano/commonStyles.tsx
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var NoteLabel = import_styled_components5.default.text(_templateObject22());
+// src/Piano/BlackNotes.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var BlackNotes = function(param) {
+    var numKeys = param.numKeys, width = param.width, height = param.height, strokeWidth = param.strokeWidth, baseNoteOffset = param.baseNoteOffset, showLabels = param.showLabels, highlights = param.highlights, noBorder = param.noBorder, handleClick = param.handleClick;
+    var keyWidth = (width - strokeWidth / 2) / numKeys + strokeWidth / 2 * ((numKeys - 1) / numKeys);
+    var getFill = function(i) {
+        var note = import_minikeys4.keyboardBlackNotes[baseNoteOffset + i];
+        if (note !== null) {
+            var _highlights_activeNotes;
+            if (highlights === null || highlights === void 0 ? void 0 : (_highlights_activeNotes = highlights.activeNotes) === null || _highlights_activeNotes === void 0 ? void 0 : _highlights_activeNotes.includes(note)) {
+                return "#444";
+            }
+        }
+        return "#222";
+    };
+    var nudgeDirection = function(i) {
+        if (i > 0 && i < import_minikeys4.keyboardBlackNotes.length) {
+            if (import_minikeys4.keyboardBlackNotes[i - 1] === null) {
+                return -1;
+            } else if (import_minikeys4.keyboardBlackNotes[i + 1] === null) {
+                return 1;
+            }
+        }
+        return 0;
+    };
+    var handleNoteClick = function(i) {
+        if (!handleClick) {
+            return;
+        }
+        var namedNote = import_minikeys4.keyboardBlackNotes[baseNoteOffset + i];
+        if (namedNote === null) {
+            return;
+        }
+        var midiNote = import_minikeys4.noteToMidi[namedNote];
+        handleClick(midiNote);
+    };
+    return Array.from({
+        length: numKeys + 1
+    }).map(function(_, i) {
+        return import_minikeys4.keyboardBlackNotes[baseNoteOffset + i] && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", {
+            onMouseDown: function() {
+                return handleNoteClick(i);
+            },
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PianoKeyRect, {
+                    width: keyWidth * 0.65,
+                    height: height * 0.65,
+                    offset: i * keyWidth - i * (strokeWidth / 2) - (keyWidth * 0.65 - strokeWidth) / 2 + nudgeDirection(baseNoteOffset + i) * keyWidth * 0.1,
+                    strokeWidth: 1.5,
+                    fill: getFill(i),
+                    type: "black",
+                    noBorder: noBorder
+                }),
+                showLabels && i * keyWidth - i * strokeWidth / 2 > 5 && i * keyWidth - i * strokeWidth / 2 < width - 5 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NoteLabel, {
+                    x: i * keyWidth - i * strokeWidth / 2 + strokeWidth / 2 + nudgeDirection(baseNoteOffset + i) * keyWidth * 0.1,
+                    y: height * 0.65 - height * 0.03,
+                    textAnchor: "middle",
+                    fontSize: height * 0.04,
+                    fill: "white",
+                    opacity: 0.8,
+                    children: import_minikeys4.keyboardBlackNotes[baseNoteOffset + i]
+                })
+            ]
+        }, "piano-key-black-".concat(i));
+    });
+};
+// src/Piano/WhiteNotes.tsx
+var import_minikeys5 = require("minikeys");
+// src/Piano/utils.ts
+var keyboardWhiteNotes = [
+    "A0",
+    "B0",
+    "C1",
+    "D1",
+    "E1",
+    "F1",
+    "G1",
+    "A1",
+    "B1",
+    "C2",
+    "D2",
+    "E2",
+    "F2",
+    "G2",
+    "A2",
+    "B2",
+    "C3",
+    "D3",
+    "E3",
+    "F3",
+    "G3",
+    "A3",
+    "B3",
+    "C4",
+    "D4",
+    "E4",
+    "F4",
+    "G4",
+    "A4",
+    "B4",
+    "C5",
+    "D5",
+    "E5",
+    "F5",
+    "G5",
+    "A5",
+    "B5",
+    "C6",
+    "D6",
+    "E6",
+    "F6",
+    "G6",
+    "A6",
+    "B6",
+    "C7",
+    "D7",
+    "E7",
+    "F7",
+    "G7",
+    "A7",
+    "B7",
+    "C8"
+];
+var nextWhiteNoteIndex = function(note) {
+    var whiteNote = note.replace("#", "");
+    if (keyboardWhiteNotes.includes(whiteNote)) {
+        if (note.includes("#")) {
+            return keyboardWhiteNotes.indexOf(whiteNote) + 1;
+        } else {
+            return keyboardWhiteNotes.indexOf(whiteNote);
+        }
+    } else {
+        throw new Error("Lower range note ".concat(note, " invalid"));
+    }
+};
+var prevWhiteNoteIndex = function(note) {
+    var whiteNote = note.replace("#", "");
+    if (keyboardWhiteNotes.includes(whiteNote)) {
+        return keyboardWhiteNotes.indexOf(whiteNote);
+    } else {
+        throw new Error("Lower range note ".concat(note, " invalid"));
+    }
+};
+// src/Piano/WhiteNotes.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var WhiteNotes = function(param) {
+    var numKeys = param.numKeys, width = param.width, height = param.height, strokeWidth = param.strokeWidth, strokeColour = param.strokeColour, baseNoteOffset = param.baseNoteOffset, showLabels = param.showLabels, highlights = param.highlights, noBorder = param.noBorder, handleClick = param.handleClick;
+    var keyWidth = (width - strokeWidth / 2) / numKeys + strokeWidth / 2 * ((numKeys - 1) / numKeys);
+    var getFill = function(i) {
+        var _highlights_activeNotes;
+        if (highlights === null || highlights === void 0 ? void 0 : (_highlights_activeNotes = highlights.activeNotes) === null || _highlights_activeNotes === void 0 ? void 0 : _highlights_activeNotes.includes(import_minikeys5.keyboardWhiteNotes[baseNoteOffset + i])) {
+            return "#ccc";
+        } else if ((highlights === null || highlights === void 0 ? void 0 : highlights.rangeStart) || (highlights === null || highlights === void 0 ? void 0 : highlights.rangeEnd)) {
+            var _highlights_rangeStart, _highlights_rangeEnd;
+            if (import_minikeys5.keyboardWhiteNotes.slice(nextWhiteNoteIndex((_highlights_rangeStart = highlights === null || highlights === void 0 ? void 0 : highlights.rangeStart) !== null && _highlights_rangeStart !== void 0 ? _highlights_rangeStart : "A0"), prevWhiteNoteIndex((_highlights_rangeEnd = highlights === null || highlights === void 0 ? void 0 : highlights.rangeEnd) !== null && _highlights_rangeEnd !== void 0 ? _highlights_rangeEnd : "C8") + 1).includes(import_minikeys5.keyboardWhiteNotes[baseNoteOffset + i])) {
+                var _highlights_rangeColor;
+                return (_highlights_rangeColor = highlights === null || highlights === void 0 ? void 0 : highlights.rangeColor) !== null && _highlights_rangeColor !== void 0 ? _highlights_rangeColor : "#eee";
+            }
+        }
+        return "white";
+    };
+    var handleNoteClick = function(i) {
+        if (!handleClick) {
+            return;
+        }
+        var namedNote = import_minikeys5.keyboardWhiteNotes[baseNoteOffset + i];
+        var midiNote = import_minikeys5.noteToMidi[namedNote];
+        handleClick(midiNote);
+    };
+    return Array.from({
+        length: numKeys
+    }).map(function(_, i) {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", {
+            onMouseDown: function() {
+                return handleNoteClick(i);
+            },
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PianoKeyRect, {
+                    width: keyWidth,
+                    height: height,
+                    offset: i * keyWidth - i * strokeWidth / 2,
+                    strokeWidth: strokeWidth,
+                    strokeColour: strokeColour,
+                    type: "white",
+                    fill: getFill(i),
+                    noBorder: noBorder
+                }),
+                showLabels && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NoteLabel, {
+                    x: i * keyWidth - i * strokeWidth / 2 + keyWidth / 2,
+                    y: height - height * 0.03,
+                    textAnchor: "middle",
+                    fontSize: height * 0.04,
+                    fill: "black",
+                    opacity: 0.6,
+                    children: import_minikeys5.keyboardWhiteNotes[baseNoteOffset + i]
+                })
+            ]
+        }, "piano-key-white-".concat(i));
+    });
+};
+// src/Piano/Piano.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Piano = function(_param) {
+    var width = _param.width, _param_numKeys = _param.numKeys, numKeys = _param_numKeys === void 0 ? 15 : _param_numKeys, height = _param.height, _param_strokeWidth = _param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 1.5 : _param_strokeWidth, strokeColour = _param.strokeColour, _param_baseNote = _param.baseNote, baseNote = _param_baseNote === void 0 ? "C4" : _param_baseNote, _param_showLabels = _param.showLabels, showLabels = _param_showLabels === void 0 ? false : _param_showLabels, _param_noBorder = _param.noBorder, noBorder = _param_noBorder === void 0 ? false : _param_noBorder, highlights = _param.highlights, onClick = _param.onClick, props = _object_without_properties(_param, [
+        "width",
+        "numKeys",
+        "height",
+        "strokeWidth",
+        "strokeColour",
+        "baseNote",
+        "showLabels",
+        "noBorder",
+        "highlights",
+        "onClick"
+    ]);
+    var keyHeight = height !== null && height !== void 0 ? height : Math.min(width / numKeys * 5, width / 4);
+    var maxNumKeys = Math.min(numKeys, 52);
+    var baseNoteOffset = Math.min(import_minikeys6.keyboardWhiteNotes.indexOf(baseNote), 52 - numKeys);
+    var handleClick = function(midiNote) {
+        if (onClick && midiNote !== null && midiNote !== void 0) {
+            onClick(midiNote);
+        }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Svg, _object_spread_props(_object_spread({
+        viewBox: "0 0 ".concat(width, " ").concat(keyHeight),
+        width: width,
+        height: keyHeight,
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WhiteNotes, {
+                    numKeys: maxNumKeys,
+                    width: width,
+                    height: keyHeight,
+                    strokeWidth: strokeWidth,
+                    strokeColour: strokeColour,
+                    baseNoteOffset: baseNoteOffset,
+                    showLabels: showLabels,
+                    highlights: highlights,
+                    handleClick: handleClick,
+                    noBorder: noBorder
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BlackNotes, {
+                    numKeys: maxNumKeys,
+                    width: width,
+                    height: keyHeight,
+                    strokeWidth: strokeWidth,
+                    baseNoteOffset: baseNoteOffset,
+                    showLabels: showLabels,
+                    highlights: highlights,
+                    handleClick: handleClick,
+                    noBorder: noBorder
+                })
+            })
+        ]
+    }));
+};
+var Svg = import_styled_components6.default.svg(_templateObject23());
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+    Keyboard: Keyboard,
+    Piano: Piano,
+    useKeyboardControl: useKeyboardControl,
+    useMiniKeys: useMiniKeys,
+    useMiniKeysKeyboard: useMiniKeysKeyboard
+});