@tremolo-ui/dom 0.2.1

package/LICENSE

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

package/README.md

@@ -0,0 +1,11 @@
+# @tremolo-ui/dom
+
+## Install
+
+```bash
+npm i @tremolo-ui/dom
+```
+
+## Note
+
+See https://github.com/m1m0zzz/tremolo-ui

package/dist/index.cjs

@@ -0,0 +1,106 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/midi/access.ts
+/** @private */
+const PERMISSION_DENIED = "PERMISSION_DENIED";
+/** @private */
+const NOT_SUPPORTED = "NOT_SUPPORTED";
+const INITIAL_STATE = {
+	midiAccess: null,
+	error: null
+};
+/**
+* Request MIDI access in the browser.
+*
+* The returned instance holds the state and notifies subscribers when it changes,
+* so it can be consumed from any framework.
+*/
+function createMIDIAccess() {
+	let state = INITIAL_STATE;
+	let destroyed = false;
+	const listeners = /* @__PURE__ */ new Set();
+	function setState(next) {
+		state = next;
+		for (const listener of listeners) listener();
+	}
+	function request() {
+		if (destroyed) return;
+		if (typeof navigator === "undefined" || !navigator.requestMIDIAccess) {
+			setState({
+				...state,
+				error: NOT_SUPPORTED
+			});
+			return;
+		}
+		navigator.requestMIDIAccess().then((access) => {
+			if (destroyed) return;
+			setState({
+				midiAccess: access,
+				error: null
+			});
+		}).catch(() => {
+			if (destroyed) return;
+			setState({
+				...state,
+				error: PERMISSION_DENIED
+			});
+		});
+	}
+	return {
+		request,
+		getState: () => state,
+		getServerState: () => INITIAL_STATE,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		destroy: () => {
+			destroyed = true;
+			listeners.clear();
+		}
+	};
+}
+//#endregion
+//#region src/midi/message.ts
+/**
+* Listen to raw `midimessage` events on every input of a MIDIAccess.
+*
+* Use this when you need more detail than {@link createMIDIInput} provides.
+*/
+function createMIDIMessage(midiAccess, onMIDIMessage) {
+	if (!midiAccess) return { destroy: () => {} };
+	const inputs = [...midiAccess.inputs.values()];
+	for (const input of inputs) input.addEventListener("midimessage", onMIDIMessage);
+	return { destroy: () => {
+		for (const input of inputs) input.removeEventListener("midimessage", onMIDIMessage);
+	} };
+}
+//#endregion
+//#region src/midi/input.ts
+const MIDI_EVENT_TO_NUMBER = {
+	NOTE_ON: 144,
+	NOTE_OFF: 128,
+	PITCH_BEND: 224
+};
+/**
+* Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
+* Internally uses {@link createMIDIMessage}.
+*/
+function createMIDIInput(midiAccess, { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }) {
+	return createMIDIMessage(midiAccess, (event) => {
+		if (!event.data) return;
+		const kind = event.data[0] & 240;
+		if (kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF || kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0) onNoteOffEvent?.(event.data[1]);
+		else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) onNoteOnEvent?.(event.data[1], event.data[2]);
+		else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) onPitchBendEvent?.(event.data[1], event.data[2]);
+	});
+}
+//#endregion
+exports.NOT_SUPPORTED = NOT_SUPPORTED;
+exports.PERMISSION_DENIED = PERMISSION_DENIED;
+exports.createMIDIAccess = createMIDIAccess;
+exports.createMIDIInput = createMIDIInput;
+exports.createMIDIMessage = createMIDIMessage;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n"],"mappings":";;;AACA,MAAa,oBAAoB;;AAEjC,MAAa,gBAAgB;AAU7B,MAAM,gBAAiC;CACrC,YAAY;CACZ,OAAO;CACR;;;;;;;AAmBD,SAAgB,mBAAuC;CACrD,IAAI,QAAQ;CACZ,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,KAAiB;CAEvC,SAAS,SAAS,MAAuB;AACvC,UAAQ;AACR,OAAK,MAAM,YAAY,UAAW,WAAU;;CAG9C,SAAS,UAAU;AACjB,MAAI,UAAW;AACf,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,mBAAmB;AACpE,YAAS;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;AAC5C;;AAEF,YACG,mBAAmB,CACnB,MAAM,WAAW;AAChB,OAAI,UAAW;AACf,YAAS;IAAE,YAAY;IAAQ,OAAO;IAAM,CAAC;IAC7C,CACD,YAAY;AACX,OAAI,UAAW;AACf,YAAS;IAAE,GAAG;IAAO,OAAO;IAAmB,CAAC;IAChD;;AAGN,QAAO;EACL;EACA,gBAAgB;EAChB,sBAAsB;EACtB,YAAY,aAAa;AACvB,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG9B,eAAe;AACb,eAAY;AACZ,aAAU,OAAO;;EAEpB;;;;;;;;;ACpEH,SAAgB,kBACd,YACA,eACqB;AACrB,KAAI,CAAC,WACH,QAAO,EAAE,eAAe,IAAI;CAG9B,MAAM,SAAS,CAAC,GAAG,WAAW,OAAO,QAAQ,CAAC;AAC9C,MAAK,MAAM,SAAS,OAClB,OAAM,iBAAiB,eAAe,cAAc;AAGtD,QAAO,EACL,eAAe;AACb,OAAK,MAAM,SAAS,OAClB,OAAM,oBAAoB,eAAe,cAAc;IAG5D;;;;AC1BH,MAAM,uBAAuB;CAC3B,SAAS;CACT,UAAU;CACV,YAAY;CACb;;;;;AAcD,SAAgB,gBACd,YACA,EAAE,eAAe,gBAAgB,oBACd;AACnB,QAAO,kBAAkB,aAAa,UAAU;AAC9C,MAAI,CAAC,MAAM,KAAM;EAIjB,MAAM,OAAO,MAAM,KAAK,KAAK;AAE7B,MACE,QAAQ,qBAAqB,YAC5B,QAAQ,qBAAqB,WAAW,MAAM,KAAK,MAAM,EAE1D,kBAAiB,MAAM,KAAK,GAAG;WACtB,QAAQ,qBAAqB,QACtC,iBAAgB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;WACpC,QAAQ,qBAAqB,WACtC,oBAAmB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;GAElD"}

package/dist/index.d.cts

@@ -0,0 +1,59 @@
+//#region src/midi/access.d.ts
+/** @private */
+declare const PERMISSION_DENIED = "PERMISSION_DENIED";
+/** @private */
+declare const NOT_SUPPORTED = "NOT_SUPPORTED";
+/** @private */
+type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED;
+type MIDIAccessState = {
+  readonly midiAccess: MIDIAccess | null;
+  readonly error: MIDIAccessError | null;
+};
+interface MIDIAccessInstance {
+  /** Request MIDI access. Safe to call more than once. */
+  request: () => void;
+  getState: () => MIDIAccessState;
+  /** Snapshot for server side rendering. Always the initial state. */
+  getServerState: () => MIDIAccessState;
+  /** @returns unsubscribe function */
+  subscribe: (listener: () => void) => () => void;
+  destroy: () => void;
+}
+/**
+ * Request MIDI access in the browser.
+ *
+ * The returned instance holds the state and notifies subscribers when it changes,
+ * so it can be consumed from any framework.
+ */
+declare function createMIDIAccess(): MIDIAccessInstance;
+//#endregion
+//#region src/midi/message.d.ts
+interface MIDIMessageInstance {
+  destroy: () => void;
+}
+/**
+ * Listen to raw `midimessage` events on every input of a MIDIAccess.
+ *
+ * Use this when you need more detail than {@link createMIDIInput} provides.
+ */
+declare function createMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): MIDIMessageInstance;
+//#endregion
+//#region src/midi/input.d.ts
+type MIDIInputHandlers = {
+  onNoteOnEvent?: (note: number, velocity: number) => void;
+  onNoteOffEvent?: (note: number) => void;
+  onPitchBendEvent?: (msb: number, lsb: number) => void;
+};
+type MIDIInputInstance = MIDIMessageInstance;
+/**
+ * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
+ * Internally uses {@link createMIDIMessage}.
+ */
+declare function createMIDIInput(midiAccess: MIDIAccess | null, {
+  onNoteOnEvent,
+  onNoteOffEvent,
+  onPitchBendEvent
+}: MIDIInputHandlers): MIDIInputInstance;
+//#endregion
+export { type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA"}

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+//#region src/midi/access.d.ts
+/** @private */
+declare const PERMISSION_DENIED = "PERMISSION_DENIED";
+/** @private */
+declare const NOT_SUPPORTED = "NOT_SUPPORTED";
+/** @private */
+type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED;
+type MIDIAccessState = {
+  readonly midiAccess: MIDIAccess | null;
+  readonly error: MIDIAccessError | null;
+};
+interface MIDIAccessInstance {
+  /** Request MIDI access. Safe to call more than once. */
+  request: () => void;
+  getState: () => MIDIAccessState;
+  /** Snapshot for server side rendering. Always the initial state. */
+  getServerState: () => MIDIAccessState;
+  /** @returns unsubscribe function */
+  subscribe: (listener: () => void) => () => void;
+  destroy: () => void;
+}
+/**
+ * Request MIDI access in the browser.
+ *
+ * The returned instance holds the state and notifies subscribers when it changes,
+ * so it can be consumed from any framework.
+ */
+declare function createMIDIAccess(): MIDIAccessInstance;
+//#endregion
+//#region src/midi/message.d.ts
+interface MIDIMessageInstance {
+  destroy: () => void;
+}
+/**
+ * Listen to raw `midimessage` events on every input of a MIDIAccess.
+ *
+ * Use this when you need more detail than {@link createMIDIInput} provides.
+ */
+declare function createMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): MIDIMessageInstance;
+//#endregion
+//#region src/midi/input.d.ts
+type MIDIInputHandlers = {
+  onNoteOnEvent?: (note: number, velocity: number) => void;
+  onNoteOffEvent?: (note: number) => void;
+  onPitchBendEvent?: (msb: number, lsb: number) => void;
+};
+type MIDIInputInstance = MIDIMessageInstance;
+/**
+ * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
+ * Internally uses {@link createMIDIMessage}.
+ */
+declare function createMIDIInput(midiAccess: MIDIAccess | null, {
+  onNoteOnEvent,
+  onNoteOffEvent,
+  onPitchBendEvent
+}: MIDIInputHandlers): MIDIInputInstance;
+//#endregion
+export { type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA"}

package/dist/index.js

@@ -0,0 +1,101 @@
+//#region src/midi/access.ts
+/** @private */
+const PERMISSION_DENIED = "PERMISSION_DENIED";
+/** @private */
+const NOT_SUPPORTED = "NOT_SUPPORTED";
+const INITIAL_STATE = {
+	midiAccess: null,
+	error: null
+};
+/**
+* Request MIDI access in the browser.
+*
+* The returned instance holds the state and notifies subscribers when it changes,
+* so it can be consumed from any framework.
+*/
+function createMIDIAccess() {
+	let state = INITIAL_STATE;
+	let destroyed = false;
+	const listeners = /* @__PURE__ */ new Set();
+	function setState(next) {
+		state = next;
+		for (const listener of listeners) listener();
+	}
+	function request() {
+		if (destroyed) return;
+		if (typeof navigator === "undefined" || !navigator.requestMIDIAccess) {
+			setState({
+				...state,
+				error: NOT_SUPPORTED
+			});
+			return;
+		}
+		navigator.requestMIDIAccess().then((access) => {
+			if (destroyed) return;
+			setState({
+				midiAccess: access,
+				error: null
+			});
+		}).catch(() => {
+			if (destroyed) return;
+			setState({
+				...state,
+				error: PERMISSION_DENIED
+			});
+		});
+	}
+	return {
+		request,
+		getState: () => state,
+		getServerState: () => INITIAL_STATE,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		destroy: () => {
+			destroyed = true;
+			listeners.clear();
+		}
+	};
+}
+//#endregion
+//#region src/midi/message.ts
+/**
+* Listen to raw `midimessage` events on every input of a MIDIAccess.
+*
+* Use this when you need more detail than {@link createMIDIInput} provides.
+*/
+function createMIDIMessage(midiAccess, onMIDIMessage) {
+	if (!midiAccess) return { destroy: () => {} };
+	const inputs = [...midiAccess.inputs.values()];
+	for (const input of inputs) input.addEventListener("midimessage", onMIDIMessage);
+	return { destroy: () => {
+		for (const input of inputs) input.removeEventListener("midimessage", onMIDIMessage);
+	} };
+}
+//#endregion
+//#region src/midi/input.ts
+const MIDI_EVENT_TO_NUMBER = {
+	NOTE_ON: 144,
+	NOTE_OFF: 128,
+	PITCH_BEND: 224
+};
+/**
+* Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
+* Internally uses {@link createMIDIMessage}.
+*/
+function createMIDIInput(midiAccess, { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }) {
+	return createMIDIMessage(midiAccess, (event) => {
+		if (!event.data) return;
+		const kind = event.data[0] & 240;
+		if (kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF || kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0) onNoteOffEvent?.(event.data[1]);
+		else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) onNoteOnEvent?.(event.data[1], event.data[2]);
+		else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) onPitchBendEvent?.(event.data[1], event.data[2]);
+	});
+}
+//#endregion
+export { NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n"],"mappings":";;AACA,MAAa,oBAAoB;;AAEjC,MAAa,gBAAgB;AAU7B,MAAM,gBAAiC;CACrC,YAAY;CACZ,OAAO;CACR;;;;;;;AAmBD,SAAgB,mBAAuC;CACrD,IAAI,QAAQ;CACZ,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,KAAiB;CAEvC,SAAS,SAAS,MAAuB;AACvC,UAAQ;AACR,OAAK,MAAM,YAAY,UAAW,WAAU;;CAG9C,SAAS,UAAU;AACjB,MAAI,UAAW;AACf,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,mBAAmB;AACpE,YAAS;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;AAC5C;;AAEF,YACG,mBAAmB,CACnB,MAAM,WAAW;AAChB,OAAI,UAAW;AACf,YAAS;IAAE,YAAY;IAAQ,OAAO;IAAM,CAAC;IAC7C,CACD,YAAY;AACX,OAAI,UAAW;AACf,YAAS;IAAE,GAAG;IAAO,OAAO;IAAmB,CAAC;IAChD;;AAGN,QAAO;EACL;EACA,gBAAgB;EAChB,sBAAsB;EACtB,YAAY,aAAa;AACvB,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG9B,eAAe;AACb,eAAY;AACZ,aAAU,OAAO;;EAEpB;;;;;;;;;ACpEH,SAAgB,kBACd,YACA,eACqB;AACrB,KAAI,CAAC,WACH,QAAO,EAAE,eAAe,IAAI;CAG9B,MAAM,SAAS,CAAC,GAAG,WAAW,OAAO,QAAQ,CAAC;AAC9C,MAAK,MAAM,SAAS,OAClB,OAAM,iBAAiB,eAAe,cAAc;AAGtD,QAAO,EACL,eAAe;AACb,OAAK,MAAM,SAAS,OAClB,OAAM,oBAAoB,eAAe,cAAc;IAG5D;;;;AC1BH,MAAM,uBAAuB;CAC3B,SAAS;CACT,UAAU;CACV,YAAY;CACb;;;;;AAcD,SAAgB,gBACd,YACA,EAAE,eAAe,gBAAgB,oBACd;AACnB,QAAO,kBAAkB,aAAa,UAAU;AAC9C,MAAI,CAAC,MAAM,KAAM;EAIjB,MAAM,OAAO,MAAM,KAAK,KAAK;AAE7B,MACE,QAAQ,qBAAqB,YAC5B,QAAQ,qBAAqB,WAAW,MAAM,KAAK,MAAM,EAE1D,kBAAiB,MAAM,KAAK,GAAG;WACtB,QAAQ,qBAAqB,QACtC,iBAAgB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;WACpC,QAAQ,qBAAqB,WACtC,oBAAmB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;GAElD"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tremolo-ui/dom",
+  "version": "0.2.1",
+  "description": "framework-agnostic DOM layer used in @tremolo-ui/*",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.cts",
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "build:package": "tsc && tsdown",
+    "watch:package": "tsdown --watch",
+    "clean": "npm run clean:build",
+    "clean:build": "rimraf ./dist",
+    "lint": "eslint --fix --ext .ts,.tsx .",
+    "format": "prettier --write ."
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "mimoz",
+    "email": "contact.m1m0zzz@gmail.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/m1m0zzz/tremolo-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/m1m0zzz/tremolo-ui.git",
+    "directory": "packages/dom"
+  },
+  "keywords": [
+    "web-audio",
+    "midi",
+    "dom"
+  ],
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export {
+  createMIDIAccess,
+  NOT_SUPPORTED,
+  PERMISSION_DENIED,
+  type MIDIAccessError,
+  type MIDIAccessInstance,
+  type MIDIAccessState,
+} from './midi/access'
+export {
+  createMIDIInput,
+  type MIDIInputHandlers,
+  type MIDIInputInstance,
+} from './midi/input'
+export { createMIDIMessage, type MIDIMessageInstance } from './midi/message'

package/src/midi/access.ts

@@ -0,0 +1,79 @@
+/** @private */
+export const PERMISSION_DENIED = 'PERMISSION_DENIED'
+/** @private */
+export const NOT_SUPPORTED = 'NOT_SUPPORTED'
+
+/** @private */
+export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
+
+export type MIDIAccessState = {
+  readonly midiAccess: MIDIAccess | null
+  readonly error: MIDIAccessError | null
+}
+
+const INITIAL_STATE: MIDIAccessState = {
+  midiAccess: null,
+  error: null,
+}
+
+export interface MIDIAccessInstance {
+  /** Request MIDI access. Safe to call more than once. */
+  request: () => void
+  getState: () => MIDIAccessState
+  /** Snapshot for server side rendering. Always the initial state. */
+  getServerState: () => MIDIAccessState
+  /** @returns unsubscribe function */
+  subscribe: (listener: () => void) => () => void
+  destroy: () => void
+}
+
+/**
+ * Request MIDI access in the browser.
+ *
+ * The returned instance holds the state and notifies subscribers when it changes,
+ * so it can be consumed from any framework.
+ */
+export function createMIDIAccess(): MIDIAccessInstance {
+  let state = INITIAL_STATE
+  let destroyed = false
+  const listeners = new Set<() => void>()
+
+  function setState(next: MIDIAccessState) {
+    state = next
+    for (const listener of listeners) listener()
+  }
+
+  function request() {
+    if (destroyed) return
+    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {
+      setState({ ...state, error: NOT_SUPPORTED })
+      return
+    }
+    navigator
+      .requestMIDIAccess()
+      .then((access) => {
+        if (destroyed) return
+        setState({ midiAccess: access, error: null })
+      })
+      .catch(() => {
+        if (destroyed) return
+        setState({ ...state, error: PERMISSION_DENIED })
+      })
+  }
+
+  return {
+    request,
+    getState: () => state,
+    getServerState: () => INITIAL_STATE,
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    destroy: () => {
+      destroyed = true
+      listeners.clear()
+    },
+  }
+}

package/src/midi/input.ts

@@ -0,0 +1,43 @@
+import { createMIDIMessage, type MIDIMessageInstance } from './message'
+
+const MIDI_EVENT_TO_NUMBER = {
+  NOTE_ON: 0x90,
+  NOTE_OFF: 0x80,
+  PITCH_BEND: 0xe0,
+}
+
+export type MIDIInputHandlers = {
+  onNoteOnEvent?: (note: number, velocity: number) => void
+  onNoteOffEvent?: (note: number) => void
+  onPitchBendEvent?: (msb: number, lsb: number) => void
+}
+
+export type MIDIInputInstance = MIDIMessageInstance
+
+/**
+ * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
+ * Internally uses {@link createMIDIMessage}.
+ */
+export function createMIDIInput(
+  midiAccess: MIDIAccess | null,
+  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,
+): MIDIInputInstance {
+  return createMIDIMessage(midiAccess, (event) => {
+    if (!event.data) return
+    // event.data[0] ... command
+    // event.data[1] ... note, MSB (Most Significant Byte)
+    // event.data[2] ... velocity, LSB (Least Significant Byte)
+    const kind = event.data[0] & 0xf0
+
+    if (
+      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||
+      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)
+    ) {
+      onNoteOffEvent?.(event.data[1])
+    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {
+      onNoteOnEvent?.(event.data[1], event.data[2])
+    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {
+      onPitchBendEvent?.(event.data[1], event.data[2])
+    }
+  })
+}

package/src/midi/message.ts

@@ -0,0 +1,30 @@
+export interface MIDIMessageInstance {
+  destroy: () => void
+}
+
+/**
+ * Listen to raw `midimessage` events on every input of a MIDIAccess.
+ *
+ * Use this when you need more detail than {@link createMIDIInput} provides.
+ */
+export function createMIDIMessage(
+  midiAccess: MIDIAccess | null,
+  onMIDIMessage: (event: MIDIMessageEvent) => void,
+): MIDIMessageInstance {
+  if (!midiAccess) {
+    return { destroy: () => {} }
+  }
+
+  const inputs = [...midiAccess.inputs.values()]
+  for (const input of inputs) {
+    input.addEventListener('midimessage', onMIDIMessage)
+  }
+
+  return {
+    destroy: () => {
+      for (const input of inputs) {
+        input.removeEventListener('midimessage', onMIDIMessage)
+      }
+    },
+  }
+}