@tremolo-ui/svelte 0.7.0

package/dist/hooks/useMIDIAccess.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type MIDIAccessOptions } from '@tremolo-ui/dom';
+/**
+ * Request MIDI access in the browser. Call it while a component is being
+ * initialised: the access is created when the component mounts and let go
+ * when it is destroyed.
+ *
+ * The returned object is reactive: `midiAccess`, `error` and `inputs` update
+ * as access is granted and devices come and go.
+ *
+ * @param requestOnMount ask for access as soon as the component mounts. Leave
+ * it off to ask from a click instead, so that opening a page does not bring
+ * up a permission prompt. Pass a getter to ask once it turns true later.
+ *
+ * @example
+ * const midi = useMIDIAccess(false)
+ * // <button onclick={() => midi.request()}>Connect</button>
+ * // {#each midi.inputs as input}{input.name}{/each}
+ */
+export declare function useMIDIAccess(requestOnMount?: boolean | (() => boolean)): {
+    readonly midiAccess: MIDIAccess | null;
+    readonly error: import("@tremolo-ui/dom").MIDIAccessError | null;
+    readonly inputs: readonly MIDIInput[];
+    /**
+     * Ask for access. Takes `{ sysex: true }` when the app needs system
+     * exclusive messages, which browsers treat as a separate permission.
+     */
+    request: (options?: MIDIAccessOptions) => void | undefined;
+};
+//# sourceMappingURL=useMIDIAccess.svelte.d.ts.map

package/dist/hooks/useMIDIAccess.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMIDIAccess.svelte.d.ts","sourceRoot":"","sources":["../../src/hooks/useMIDIAccess.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,iBAAiB,EAEvB,MAAM,iBAAiB,CAAA;AAQxB;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,cAAc,GAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAQ;;;;IAoC9C;;;OAGG;wBACiB,iBAAiB;EAExC"}

package/dist/hooks/useMIDIAccess.svelte.js

@@ -0,0 +1,62 @@
+import { createMIDIAccess, } from '@tremolo-ui/dom';
+const INITIAL_STATE = {
+    midiAccess: null,
+    error: null,
+    inputs: [],
+};
+/**
+ * Request MIDI access in the browser. Call it while a component is being
+ * initialised: the access is created when the component mounts and let go
+ * when it is destroyed.
+ *
+ * The returned object is reactive: `midiAccess`, `error` and `inputs` update
+ * as access is granted and devices come and go.
+ *
+ * @param requestOnMount ask for access as soon as the component mounts. Leave
+ * it off to ask from a click instead, so that opening a page does not bring
+ * up a permission prompt. Pass a getter to ask once it turns true later.
+ *
+ * @example
+ * const midi = useMIDIAccess(false)
+ * // <button onclick={() => midi.request()}>Connect</button>
+ * // {#each midi.inputs as input}{input.name}{/each}
+ */
+export function useMIDIAccess(requestOnMount = true) {
+    let state = $state.raw(INITIAL_STATE);
+    let instance = null;
+    $effect(() => {
+        const current = createMIDIAccess();
+        instance = current;
+        state = current.getState();
+        const unsubscribe = current.subscribe(() => {
+            state = current.getState();
+        });
+        return () => {
+            unsubscribe();
+            current.destroy();
+            instance = null;
+            state = INITIAL_STATE;
+        };
+    });
+    $effect(() => {
+        const request = typeof requestOnMount === 'function' ? requestOnMount() : requestOnMount;
+        if (request)
+            instance === null || instance === void 0 ? void 0 : instance.request();
+    });
+    return {
+        get midiAccess() {
+            return state.midiAccess;
+        },
+        get error() {
+            return state.error;
+        },
+        get inputs() {
+            return state.inputs;
+        },
+        /**
+         * Ask for access. Takes `{ sysex: true }` when the app needs system
+         * exclusive messages, which browsers treat as a separate permission.
+         */
+        request: (options) => instance === null || instance === void 0 ? void 0 : instance.request(options),
+    };
+}

package/dist/hooks/useMIDIInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type MIDIInputHandlers } from '@tremolo-ui/dom';
+/**
+ * Handle the channel voice messages of every connected input. Call it while
+ * a component is being initialised. See `createMIDIInput` in
+ * `@tremolo-ui/dom` for the handlers.
+ *
+ * Both arguments are functions, so that the access and the handlers are read
+ * reactively: the listeners follow the access as it is granted, and new
+ * handlers replace the old ones without re-subscribing.
+ *
+ * @example
+ * const midi = useMIDIAccess()
+ * useMIDIInput(() => midi.midiAccess, () => ({
+ *   onNoteOnEvent: (note, velocity) => play(note, velocity / 127),
+ * }))
+ */
+export declare function useMIDIInput(midiAccess: () => MIDIAccess | null, handlers: () => MIDIInputHandlers): void;
+//# sourceMappingURL=useMIDIInput.svelte.d.ts.map

package/dist/hooks/useMIDIInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMIDIInput.svelte.d.ts","sourceRoot":"","sources":["../../src/hooks/useMIDIInput.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,iBAAiB,CAAA;AAExB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,UAAU,GAAG,IAAI,EACnC,QAAQ,EAAE,MAAM,iBAAiB,QAgBlC"}

package/dist/hooks/useMIDIInput.svelte.js

@@ -0,0 +1,31 @@
+import { untrack } from 'svelte';
+import { createMIDIInput, } from '@tremolo-ui/dom';
+/**
+ * Handle the channel voice messages of every connected input. Call it while
+ * a component is being initialised. See `createMIDIInput` in
+ * `@tremolo-ui/dom` for the handlers.
+ *
+ * Both arguments are functions, so that the access and the handlers are read
+ * reactively: the listeners follow the access as it is granted, and new
+ * handlers replace the old ones without re-subscribing.
+ *
+ * @example
+ * const midi = useMIDIAccess()
+ * useMIDIInput(() => midi.midiAccess, () => ({
+ *   onNoteOnEvent: (note, velocity) => play(note, velocity / 127),
+ * }))
+ */
+export function useMIDIInput(midiAccess, handlers) {
+    let instance = null;
+    $effect(() => {
+        const current = createMIDIInput(midiAccess(), untrack(handlers));
+        instance = current;
+        return () => {
+            current.destroy();
+            instance = null;
+        };
+    });
+    $effect(() => {
+        instance === null || instance === void 0 ? void 0 : instance.update(handlers());
+    });
+}

package/dist/hooks/useMIDIMessage.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Listen to raw `midimessage` events on every input. Call it while a
+ * component is being initialised. For note and controller events,
+ * `useMIDIInput` decodes the message for you.
+ *
+ * Both arguments are functions, read reactively as in `useMIDIInput`.
+ */
+export declare function useMIDIMessage(midiAccess: () => MIDIAccess | null, onMIDIMessage: () => (event: MIDIMessageEvent) => void): void;
+//# sourceMappingURL=useMIDIMessage.svelte.d.ts.map

package/dist/hooks/useMIDIMessage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMIDIMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/hooks/useMIDIMessage.svelte.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,UAAU,EAAE,MAAM,UAAU,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,QAgBvD"}

package/dist/hooks/useMIDIMessage.svelte.js

@@ -0,0 +1,23 @@
+import { untrack } from 'svelte';
+import { createMIDIMessage } from '@tremolo-ui/dom';
+/**
+ * Listen to raw `midimessage` events on every input. Call it while a
+ * component is being initialised. For note and controller events,
+ * `useMIDIInput` decodes the message for you.
+ *
+ * Both arguments are functions, read reactively as in `useMIDIInput`.
+ */
+export function useMIDIMessage(midiAccess, onMIDIMessage) {
+    let instance = null;
+    $effect(() => {
+        const current = createMIDIMessage(midiAccess(), untrack(onMIDIMessage));
+        instance = current;
+        return () => {
+            current.destroy();
+            instance = null;
+        };
+    });
+    $effect(() => {
+        instance === null || instance === void 0 ? void 0 : instance.update(onMIDIMessage());
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export { drag } from './actions/drag.js';
+export { dragValue } from './actions/drag-value.js';
+export { dropZone } from './actions/drop-zone.js';
+export { longPress } from './actions/long-press.js';
+export { wheel, type WheelActionOptions } from './actions/wheel.js';
+export { default as AnimationCanvas } from './components/AnimationCanvas/AnimationCanvas.svelte';
+export type { AnimationCanvasProps, DrawFunction, InitFunction, } from './components/AnimationCanvas/types.js';
+export * as DropZone from './components/DropZone/index.js';
+export type { DropZoneProps } from './components/DropZone/types.js';
+export * as FileInput from './components/FileInput/index.js';
+export { useFileInputContext, type FileInputContextValue, } from './components/FileInput/context.js';
+export type { FileInputProps } from './components/FileInput/types.js';
+export * as Knob from './components/Knob/index.js';
+export { useKnobContext, type KnobContextValue, } from './components/Knob/context.js';
+export type { KnobProps, KnobThumbProps } from './components/Knob/types.js';
+export * as NumberInput from './components/NumberInput/index.js';
+export { useNumberInputContext, type NumberInputContextValue, } from './components/NumberInput/context.js';
+export type { NumberInputProps } from './components/NumberInput/types.js';
+export * as Piano from './components/Piano/index.js';
+export type { KeyAttributes, KeyState, PianoProps, } from './components/Piano/types.js';
+export * as PointsEditor from './components/PointsEditor/index.js';
+export { usePointsEditorContext, type PointsEditorContextValue, } from './components/PointsEditor/context.js';
+export type { PointsEditorPointProps, PointsEditorProps, } from './components/PointsEditor/types.js';
+export * as Slider from './components/Slider/index.js';
+export { useSliderContext, type SliderContextValue, } from './components/Slider/context.js';
+export type { SliderMarksOptionProps, SliderMarksProps, SliderProps, SliderThumbProps, SliderTrackProps, } from './components/Slider/types.js';
+export * as XYPad from './components/XYPad/index.js';
+export { useXYPadContext, type XYPadContextValue, } from './components/XYPad/context.js';
+export type { XYPadProps, XYPadThumbProps } from './components/XYPad/types.js';
+export { useMIDIAccess } from './hooks/useMIDIAccess.svelte.js';
+export { useMIDIInput } from './hooks/useMIDIInput.svelte.js';
+export { useMIDIMessage } from './hooks/useMIDIMessage.svelte.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAChG,YAAY,EACV,oBAAoB,EACpB,YAAY,EACZ,YAAY,GACb,MAAM,uCAAuC,CAAA;AAC9C,OAAO,KAAK,QAAQ,MAAM,gCAAgC,CAAA;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,KAAK,SAAS,MAAM,iCAAiC,CAAA;AAC5D,OAAO,EACL,mBAAmB,EACnB,KAAK,qBAAqB,GAC3B,MAAM,mCAAmC,CAAA;AAC1C,YAAY,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAA;AAClD,OAAO,EACL,cAAc,EACd,KAAK,gBAAgB,GACtB,MAAM,8BAA8B,CAAA;AACrC,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,KAAK,WAAW,MAAM,mCAAmC,CAAA;AAChE,OAAO,EACL,qBAAqB,EACrB,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAA;AACpD,YAAY,EACV,aAAa,EACb,QAAQ,EACR,UAAU,GACX,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,YAAY,MAAM,oCAAoC,CAAA;AAClE,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EACV,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,oCAAoC,CAAA;AAC3C,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAA;AACtD,OAAO,EACL,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,gCAAgC,CAAA;AACvC,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,8BAA8B,CAAA;AACrC,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAA;AACpD,OAAO,EACL,eAAe,EACf,KAAK,iBAAiB,GACvB,MAAM,+BAA+B,CAAA;AACtC,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG9E,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA"}

package/dist/index.js

@@ -0,0 +1,26 @@
+// actions
+export { drag } from './actions/drag.js';
+export { dragValue } from './actions/drag-value.js';
+export { dropZone } from './actions/drop-zone.js';
+export { longPress } from './actions/long-press.js';
+export { wheel } from './actions/wheel.js';
+// components
+export { default as AnimationCanvas } from './components/AnimationCanvas/AnimationCanvas.svelte';
+export * as DropZone from './components/DropZone/index.js';
+export * as FileInput from './components/FileInput/index.js';
+export { useFileInputContext, } from './components/FileInput/context.js';
+export * as Knob from './components/Knob/index.js';
+export { useKnobContext, } from './components/Knob/context.js';
+export * as NumberInput from './components/NumberInput/index.js';
+export { useNumberInputContext, } from './components/NumberInput/context.js';
+export * as Piano from './components/Piano/index.js';
+export * as PointsEditor from './components/PointsEditor/index.js';
+export { usePointsEditorContext, } from './components/PointsEditor/context.js';
+export * as Slider from './components/Slider/index.js';
+export { useSliderContext, } from './components/Slider/context.js';
+export * as XYPad from './components/XYPad/index.js';
+export { useXYPadContext, } from './components/XYPad/context.js';
+// hooks
+export { useMIDIAccess } from './hooks/useMIDIAccess.svelte.js';
+export { useMIDIInput } from './hooks/useMIDIInput.svelte.js';
+export { useMIDIMessage } from './hooks/useMIDIMessage.svelte.js';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tremolo-ui/svelte",
+  "version": "0.7.0",
+  "description": "Svelte component library for audio app",
+  "type": "module",
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "sb": "storybook dev",
+    "build:sb": "storybook build -o storybook-static/i/storybook-svelte && cp .storybook/_headers storybook-static/_headers",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json && svelte-check --workspace ../../site/examples/svelte --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build:package": "npm run typecheck && svelte-package -i src -o dist",
+    "clean": "npm run clean:build && npm run clean:sb",
+    "clean:build": "rimraf ./dist",
+    "clean:sb": "rimraf ./storybook-static"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-svelte-csf": "5.1.3",
+    "@storybook/svelte-vite": "10.6.0",
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "7.3.0",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/svelte": "5.4.2",
+    "svelte": "5.57.1",
+    "storybook": "10.6.0",
+    "svelte-check": "4.7.6"
+  },
+  "peerDependencies": {
+    "svelte": "^5.40.0"
+  },
+  "dependencies": {
+    "@tremolo-ui/dom": "^0.7.0",
+    "@tremolo-ui/functions": "^0.7.0",
+    "esm-env": "^1.2.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "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/svelte"
+  },
+  "keywords": [
+    "svelte",
+    "svelte-components",
+    "ui",
+    "components",
+    "web-audio"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}