@tialro2/rnbokit 1.0.0

package/dist/RNBOcomponents/RNBOMidiIn.svelte.d.ts

@@ -0,0 +1,31 @@
+export default RNBOMidiIn;
+type RNBOMidiIn = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const RNBOMidiIn: import("svelte").Component<{
+    /**
+     * - type {number} - the MIDI port index
+     */
+    port?: number;
+    device: import("@rnbo/js").Device;
+    midiMessage?: import("@rnbo/js").MIDIData | undefined;
+    midiChannel?: number | undefined;
+    mode?: "default" | "xy" | "external";
+    children?: import("svelte").Snippet<[any]>;
+} & {
+    [key: string]: any;
+}, {}, "mode" | "midiMessage">;
+type Props = {
+    /**
+     * - type {number} - the MIDI port index
+     */
+    port?: number;
+    device: import("@rnbo/js").Device;
+    midiMessage?: import("@rnbo/js").MIDIData | undefined;
+    midiChannel?: number | undefined;
+    mode?: "default" | "xy" | "external";
+    children?: import("svelte").Snippet<[any]>;
+};

package/dist/RNBOcomponents/RNBOMidiOut.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { MIDIEvent, TimeNow } from '@rnbo/js';
+	// import ExtMidiOut from './ExtMidiOut.svelte';
+	
+	
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [port] - type {number} - the MIDI port index
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {import('@rnbo/js').MIDIData|undefined} [midiMessage]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let {
+		port = 0,
+		device,
+		midiMessage = new MIDIEvent(TimeNow, 0, [144, 100, 100]),
+		children,
+		...rest
+	} = $props();
+	// /** @type {number|undefined} */
+	// export let midiChannel = 0;
+
+	//TODO: replace block below with a midiMessage receive from a Max Midi out, send to extMidiOut
+	device.midiEvent.subscribe((ev) => {
+		console.log(ev);
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ port, })}{:else}
+		<div class="RNBOtag">in {port}</div>
+
+		<!-- <ExtMidiOut bind:midiMessage /> -->
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOMidiOut.svelte.d.ts

@@ -0,0 +1,27 @@
+export default RNBOMidiOut;
+type RNBOMidiOut = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const RNBOMidiOut: import("svelte").Component<{
+    /**
+     * - type {number} - the MIDI port index
+     */
+    port?: number;
+    device: import("@rnbo/js").Device;
+    midiMessage?: import("@rnbo/js").MIDIData | undefined;
+    children?: import("svelte").Snippet<[any]>;
+} & {
+    [key: string]: any;
+}, {}, "">;
+type Props = {
+    /**
+     * - type {number} - the MIDI port index
+     */
+    port?: number;
+    device: import("@rnbo/js").Device;
+    midiMessage?: import("@rnbo/js").MIDIData | undefined;
+    children?: import("svelte").Snippet<[any]>;
+};

package/dist/RNBOcomponents/RNBOOutport.svelte

@@ -0,0 +1,36 @@
+<script>
+	import ProgressBar from '../UIcomponents/ProgressBar.svelte';
+
+	/** @type {import ('@rnbo/js').MessagePayload } */
+	let value = $state(0);
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import ('@rnbo/js').MessageInfo} outport
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { outport, device, min = 0, max = 1, ...rest } = $props();
+
+	$effect(() => {
+		device.messageEvent.subscribe((ev) => {
+			if (ev.tag == outport.tag) {
+				value = ev.payload;
+			}
+		});
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	<div class="RNBOalign">
+		<div class="RNBOtag">{outport.tag}</div>
+		<!-- some hack to make the value max 2 decimal floats: -->
+		<div class="RNBOval">{+parseFloat(value).toFixed(2)}</div>
+	</div>
+
+	<p class="RNBOtext">{outport.meta.slice(1, -1)}</p>
+	<ProgressBar value={Array.isArray(value) ? value[0] : value} {max} {min} />
+</div>

package/dist/RNBOcomponents/RNBOOutport.svelte.d.ts

@@ -0,0 +1,21 @@
+export default RNBOOutport;
+type RNBOOutport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const RNBOOutport: import("svelte").Component<{
+    outport: import("@rnbo/js").MessageInfo;
+    device: import("@rnbo/js").Device;
+    min?: number;
+    max?: number;
+} & {
+    [key: string]: any;
+}, {}, "">;
+type Props = {
+    outport: import("@rnbo/js").MessageInfo;
+    device: import("@rnbo/js").Device;
+    min?: number;
+    max?: number;
+};

package/dist/RNBOcomponents/RNBOParam.svelte

@@ -0,0 +1,37 @@
+<script>
+	import RangeSlider from '../UIcomponents/RangeSlider.svelte';
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import ('@rnbo/js').Parameter} parameter
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { parameter = $bindable(), ...rest } = $props();
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if parameter.enumValues}
+		<div class="RNBOtag">{parameter.name}</div>
+		<RadioGroup>
+			{#each parameter.enumValues as enumValue, i}
+				<RadioItem bind:group={parameter.value} name="justify" value={i}>{enumValue}</RadioItem>
+			{/each}
+		</RadioGroup>
+	{:else}
+		<div class="RNBOalign">
+			<div class="RNBOtag">{parameter.name}</div>
+			<!-- some hack to make the value max 2 decimal floats: -->
+			<div class="RNBOval">{+parseFloat(value).toFixed(2)} / {parameter.max}</div>
+		</div>
+		<RangeSlider
+			name="range-slider"
+			bind:value={parameter.value}
+			min={parameter.min}
+			max={parameter.max}
+			step={0.01}
+		/>
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOParam.svelte.d.ts

@@ -0,0 +1,15 @@
+export default RNBOParam;
+type RNBOParam = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const RNBOParam: import("svelte").Component<{
+    parameter: import("@rnbo/js").Parameter;
+} & {
+    [key: string]: any;
+}, {}, "parameter">;
+type Props = {
+    parameter: import("@rnbo/js").Parameter;
+};

package/dist/RNBOcomponents/XYMidiIn.svelte

@@ -0,0 +1,101 @@
+<script>
+	
+	/** @type {Uint8Array} */
+	let currentNote = $state(new Uint8Array([0, 0]));
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [midiChannel]
+	 * @property {Uint8Array} midiMessage
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { midiChannel = 0, midiMessage = $bindable(), ...rest } = $props();
+	let isOn = $state(false);
+
+	/** @param {MouseEvent} e */
+	function NoteOn(e) {
+		// @ts-ignore - ts not knowing getBoundingClientRect()
+		const rect = e.currentTarget.getBoundingClientRect();
+		currentNote[0] = Math.round(((e.clientX - rect.left) / rect.width) * 127);
+		currentNote[1] = Math.round((1 - (e.clientY - rect.top) / rect.height) * 127);
+		midiMessage = new Uint8Array([midiChannel + 144, ...currentNote]);
+		isOn = true;
+		// console.log('from XYMidiIn', midiMessage);
+	}
+	function NoteOff() {
+		if (!isOn) return;
+		// currentNote[1] = 0;
+		midiMessage = new Uint8Array([midiChannel + 128, ...currentNote]);
+		isOn = false;
+	}
+	//preview the note and velocity value on hover
+	/** @param {MouseEvent} e */
+	function NoteUpdate(e) {
+		if (isOn) return;
+		// @ts-ignore - ts not knowing getBoundingClientRect()
+		const rect = e.currentTarget.getBoundingClientRect();
+		currentNote[0] = Math.round(((e.clientX - rect.left) / rect.width) * 127);
+		currentNote[1] = Math.round((1 - (e.clientY - rect.top) / rect.height) * 127);
+	}
+</script>
+
+<svelte:window onmouseup={NoteOff} />
+<div class="RNBOsubcomponent" {...rest}>
+	<p class="RNBOtext">click the pad to generate MIDI notes</p>
+	<!-- TODO: fix accessibility roles, quick hack for now -->
+	<div
+		class="xy"
+		id="group"
+		onmousedown={NoteOn}
+		onmousemove={NoteUpdate}
+		onkeydown={NoteOn}
+		role="none"
+	>
+		<p class="xyval" class:text-gray-500={!isOn}>
+			note: {currentNote[0]} | velocity: {currentNote[1]}
+		</p>
+	</div>
+</div>
+
+<style>
+	.xy {
+		/* @apply group card flex align-center justify-center p-4 m-4 max-w-md min-h-max select-none hover:bg-primary-hover-token active:bg-primary-active-token */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 5rem;
+		margin-top: 1rem;
+		max-width: 28rem /* 448px */;
+		min-height: max-content;
+		user-select: none;
+		background-color: rgba(var(--local-accent-color), 0.1);
+		border-radius: var(--local-rounded-container);
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.xy:hover {
+		background-color: rgba(var(--local-accent-color), 0.3);
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.xy:active {
+		background-color: rgb(var(--local-accent-color)) !important;
+		/* color: black; */
+		fill: rgb(var(--local-accent-color));
+		transition: var(--local-animation) calc(var(--local-animation-duration) / 3);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.xy .xyval {
+		/* visibility: hidden; */
+		color: rgba(var(--local-font-color), 0);
+	}
+	.xy:hover .xyval {
+		/* color: blue; */
+		color: rgba(var(--local-font-color), 0.5);
+	}
+	.xy:active .xyval {
+		/* color: black; */
+		color: rgb(var(--local-font-color));
+	}
+</style>

package/dist/RNBOcomponents/XYMidiIn.svelte.d.ts

@@ -0,0 +1,17 @@
+export default XYMidiIn;
+type XYMidiIn = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const XYMidiIn: import("svelte").Component<{
+    midiChannel?: number;
+    midiMessage: Uint8Array;
+} & {
+    [key: string]: any;
+}, {}, "midiMessage">;
+type Props = {
+    midiChannel?: number;
+    midiMessage: Uint8Array;
+};

package/dist/UIcomponents/Controls.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		tag: string;
+		sendMessage: () => void;
+	}
+
+	let { tag, sendMessage }: Props = $props();
+</script>
+
+<button onclick={sendMessage}>
+	<img src="/{tag}.png" alt={tag} />
+</button>

package/dist/UIcomponents/Controls.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    tag: string;
+    sendMessage: () => void;
+}
+declare const Controls: import("svelte").Component<Props, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

package/dist/UIcomponents/FileDropZone.svelte

@@ -0,0 +1,118 @@
+<script>
+	let {
+		files = $bindable(void 0),
+		name,
+		lead,
+		message,
+		meta,
+		ondragenter,
+		ondragleave,
+		onchange,
+		ondragover,
+		ondrop,
+		onclick,
+		onkeydown,
+		onkeyup,
+		onkeypress,
+		...rest
+	} = $props();
+	let dragOver = $state(false);
+</script>
+
+<div class="RNBOdropzone" data-testid="file-dropzone">
+	<!-- Input: File (hidden) -->
+	<!-- NOTE: keep `bind:files` here, unlike FileButton -->
+	<input
+		bind:files
+		type="file"
+		{name}
+		{...rest}
+		class="RNBOdropzone-input"
+		class:RNBOdrag={dragOver}
+		ondragenter={() => {
+			dragOver = true;
+			ondragenter();
+		}}
+		ondragleave={() => {
+			dragOver = false;
+			ondragleave();
+		}}
+		{onchange}
+		{ondragover}
+		{ondrop}
+		{onclick}
+		{onkeydown}
+		{onkeyup}
+		{onkeypress}
+	/>
+	<!-- Interface -->
+	<div class="RNBOdropzone-interface">
+		<div class="dropzone-interface-text">
+			<!-- Lead -->
+			{#if lead}<div class="RNBOdropzone-lead">{@render lead?.()}</div>{/if}
+			<!-- Message -->
+			<div class="RNBOdropzone-message">
+				{#if message}{@render message()}{:else}<strong>Upload files</strong> or drag and drop{/if}
+			</div>
+			<!-- Meta Text -->
+			{#if meta}<small class="RNBOdropzone-meta">{@render meta?.()}</small>{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.RNBOdropzone {
+		display: flex;
+		position: relative;
+		padding: 1rem;
+		padding-top: 2rem;
+		padding-bottom: 2rem;
+		justify-content: center;
+		align-items: center;
+		border-width: 2px;
+		border-style: dashed;
+		border-radius: var(--local-rounded-container);
+		border-color: rgb(var(--local-surface-color));
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBOdrag {
+		background-color: rgba(var(--local-accent-color), 0.2);
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBOdropzone:hover {
+		background-color: rgba(var(--local-accent-color), 0.2);
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBOdropzone:active {
+		background-color: rgba(var(--local-accent-color), 0.5);
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBOdropzone-input {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		cursor: pointer;
+		opacity: 0;
+	}
+	.RNBOdropzone-interface {
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		align-items: center;
+	}
+	/* .RNBOdropzone-interface-text { */
+	/* } */
+	.RNBOdropzone-meta {
+		opacity: 0.75;
+	}
+	.RNBOdropzone-lead {
+		margin-bottom: 1rem;
+	}
+</style>

package/dist/UIcomponents/FileDropZone.svelte.d.ts

@@ -0,0 +1,37 @@
+export default FileDropZone;
+type FileDropZone = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FileDropZone: import("svelte").Component<{
+    files?: any;
+    name: any;
+    lead: any;
+    message: any;
+    meta: any;
+    ondragenter: any;
+    ondragleave: any;
+    onchange: any;
+    ondragover: any;
+    ondrop: any;
+    onclick: any;
+    onkeydown: any;
+    onkeyup: any;
+    onkeypress: any;
+} & Record<string, any>, {}, "files">;
+type $$ComponentProps = {
+    files?: any;
+    name: any;
+    lead: any;
+    message: any;
+    meta: any;
+    ondragenter: any;
+    ondragleave: any;
+    onchange: any;
+    ondragover: any;
+    ondrop: any;
+    onclick: any;
+    onkeydown: any;
+    onkeyup: any;
+    onkeypress: any;
+} & Record<string, any>;

package/dist/UIcomponents/ProgressBar.svelte

@@ -0,0 +1,50 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} [value]
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 * @property {string} [labelledby]
+	 */
+
+	/** @type {Props} */
+	let {
+		value = void 0,
+		min = 0,
+		max = 100,
+		labelledby = ''
+	} = $props();
+	let fillPercent = $derived(value ? (100 * (value - min)) / (max - min) : 0);
+</script>
+
+<!-- Track -->
+<div
+	class="RNBOprogress-bar"
+	data-testid="progress-bar"
+	role="progressbar"
+	aria-labelledby={labelledby}
+	aria-valuenow={value}
+	aria-valuemin={min}
+	aria-valuemax={max - min}
+>
+	<!-- Meter -->
+	<div class="RNBOprogress-bar-meter" style:width="{fillPercent}%"></div>
+</div>
+
+<style>
+	.RNBOprogress-bar {
+		overflow: hidden;
+		width: 100%;
+		height: 6px;
+		border-radius: var(--local-rounded-base);
+		border-style: solid;
+		border-color: rgba(var(--local-surface-color), 0.5);
+		border-width: 0.5px;
+		background-color: white;
+	}
+	.RNBOprogress-bar-meter {
+		height: 100%;
+		border-radius: var(--local-rounded-base);
+		background-color: rgb(var(--local-accent-color));
+	}
+</style>

package/dist/UIcomponents/ProgressBar.svelte.d.ts

@@ -0,0 +1,17 @@
+export default ProgressBar;
+type ProgressBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ProgressBar: import("svelte").Component<{
+    value?: any;
+    min?: number;
+    max?: number;
+    labelledby?: string;
+}, {}, "">;
+type Props = {
+    value?: any;
+    min?: number;
+    max?: number;
+    labelledby?: string;
+};

package/dist/UIcomponents/RadioGroup.svelte

@@ -0,0 +1,35 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [labelledby]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { labelledby = '', children } = $props();
+</script>
+
+<div
+	class="RNBOradio-group"
+	data-testid="radio-group"
+	role="radiogroup"
+	aria-labelledby={labelledby}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.RNBOradio-group {
+		display: inline-flex;
+		flex-wrap: wrap;
+		margin-left: 0.25rem;
+		background-color: rgba(var(--local-surface-color), 0);
+		border-width: var(--local-border-base);
+		border-color: rgb(var(--local-surface-color));
+		border-style: solid;
+		border-radius: var(--local-rounded-base);
+	}
+	/* .RNBOradio-group:hover { */
+	/* 	background-color: rgba(var(--local-surface-color), 0.2); */
+	/* } */
+</style>

package/dist/UIcomponents/RadioGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+export default RadioGroup;
+type RadioGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const RadioGroup: import("svelte").Component<{
+    labelledby?: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Props = {
+    labelledby?: string;
+    children?: import("svelte").Snippet;
+};