@tialro2/rnbokit 1.0.15 → 1.0.18

package/dist/RNBOcomponents/RNBOParam.svelte

@@ -1,37 +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>
+<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/XYMidiIn.svelte

@@ -1,8 +1,8 @@
-<script>
-	
-	/** @type {Uint8Array} */
-	let currentNote = $state(new Uint8Array([0, 0]));
-	
+<script>
+	
+	/** @type {Uint8Array} */
+	let currentNote = $state(new Uint8Array([0, 0]));
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number} [midiChannel]
@@ -11,91 +11,91 @@
 
 	/** @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>
+	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/UIcomponents/Controls.svelte

@@ -1,12 +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>
+<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/FileDropZone.svelte

@@ -1,118 +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>
+<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/ProgressBar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script>
 	/**
 	 * @typedef {Object} Props
 	 * @property {any} [value]
@@ -14,37 +14,37 @@
 		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>
+	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/RadioGroup.svelte

@@ -1,4 +1,4 @@
-<script>
+<script>
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [labelledby]
@@ -7,29 +7,29 @@
 
 	/** @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>
+</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>