@patchbayhq/svelte 0.1.0

package/README.md

@@ -0,0 +1,20 @@
+# @patchbayhq/svelte
+
+Svelte wrappers for patchbay UI audio controls.
+
+```bash
+pnpm add @patchbayhq/svelte
+```
+
+```svelte
+<script lang="ts">
+  import "@patchbayhq/svelte/styles.css";
+  import { Slider } from "@patchbayhq/svelte";
+
+  let value = 0.42;
+</script>
+
+<Slider label="Filter" bind:value modulation={0.64} />
+```
+
+Docs: https://ui.patchbay.tools

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@patchbayhq/svelte",
+  "version": "0.1.0",
+  "description": "Svelte wrappers for patchbay UI audio controls.",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "types": "./src/index.ts",
+  "homepage": "https://ui.patchbay.tools",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monadoid/patchbay-ui.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/monadoid/patchbay-ui/issues"
+  },
+  "keywords": [
+    "audio",
+    "controls",
+    "svelte",
+    "ui"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./src/styles.css",
+    "./src/tailwind.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles.css": "./src/styles.css",
+    "./tailwind.css": "./src/tailwind.css"
+  },
+  "scripts": {
+    "check-types": "svelte-check --tsconfig tsconfig.json"
+  },
+  "dependencies": {
+    "@patchbayhq/ui": "^0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0"
+  }
+}

package/src/Arrows.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { parseComponentProps, type ArrowDirection } from "@patchbayhq/ui";
+
+  export let value: ArrowDirection = "right";
+  export let disabled = false;
+  export let onValueChange: ((value: ArrowDirection) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("arrows", { disabled, value });
+
+  function select(nextValue: ArrowDirection) {
+    value = nextValue;
+    onValueChange?.(value);
+  }
+</script>
+
+<div class={["arrows", className].filter(Boolean).join(" ")} role="group">
+  <button aria-label="Left" aria-pressed={props.value === "left"} disabled={props.disabled} type="button" on:click={() => select("left")}></button>
+  <button aria-label="Right" aria-pressed={props.value === "right"} disabled={props.disabled} type="button" on:click={() => select("right")}></button>
+</div>

package/src/Button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import {
+    parseComponentProps,
+    type ButtonMode,
+    type ControlAppearance,
+  } from "@patchbayhq/ui";
+
+  export let label = "Button";
+  export let pressed = false;
+  export let mode: ButtonMode = "momentary";
+  export let appearance: ControlAppearance = "default";
+  export let disabled = false;
+  export let onPressedChange: ((pressed: boolean) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("button", {
+    appearance,
+    disabled,
+    label,
+    mode,
+    pressed,
+  });
+
+  function setPressed(nextPressed: boolean) {
+    if (props.disabled) return;
+    pressed = nextPressed;
+    onPressedChange?.(pressed);
+  }
+</script>
+
+<button
+  aria-label={props.label}
+  aria-pressed={props.pressed}
+  class={["button", props.pressed ? "is-active" : "", className].filter(Boolean).join(" ")}
+  data-appearance={props.appearance}
+  {disabled}
+  type="button"
+  on:click={() => {
+    if (props.mode === "toggle") setPressed(!props.pressed);
+  }}
+  on:pointerdown={() => {
+    if (props.mode === "momentary") setPressed(true);
+  }}
+  on:pointerleave={() => {
+    if (props.mode === "momentary") setPressed(false);
+  }}
+  on:pointerup={() => {
+    if (props.mode === "momentary") setPressed(false);
+  }}
+></button>

package/src/ClipStepLauncher.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type {
+    StepChangeDetail,
+    StepKey,
+    StepLoop,
+    StepNote,
+  } from "@patchbayhq/ui";
+  import StepSequencer from "./StepSequencer.svelte";
+  import Panel from "./Panel.svelte";
+  import PanelHeader from "./PanelHeader.svelte";
+  import StatusIndicator from "./StatusIndicator.svelte";
+  import type { StatusTone } from "./composites";
+
+  export let activeKey: StepKey = "C4";
+  export let bars = 4;
+  export let clipName = "Pattern";
+  export let disabled = false;
+  export let launchLabel = "Launch";
+  export let loop: StepLoop = { start: 1, end: 16 };
+  export let notes: StepNote[] = [];
+  export let onCellChange:
+    | ((change: Extract<StepChangeDetail, { type: "cell" }>) => void)
+    | undefined = undefined;
+  export let onChange: ((detail: StepChangeDetail) => void) | undefined = undefined;
+  export let onKeyChange:
+    | ((change: Extract<StepChangeDetail, { type: "key" }>) => void)
+    | undefined = undefined;
+  export let onKeyPress: ((key: StepKey) => void) | undefined = undefined;
+  export let onKeyRelease: ((key: StepKey) => void) | undefined = undefined;
+  export let onLaunch: (() => void) | undefined = undefined;
+  export let onLoopChange: ((loop: StepLoop) => void) | undefined = undefined;
+  export let onNotesChange: ((notes: StepNote[]) => void) | undefined = undefined;
+  export let onStop: (() => void) | undefined = undefined;
+  export let playing = false;
+  export let statusLabel = "Clip";
+  export let statusTone: StatusTone | undefined = undefined;
+  export let statusValue: string | undefined = undefined;
+  export let stopLabel = "Stop";
+  export let title = "Step launcher";
+
+  let className = "";
+  export { className as class };
+
+  $: resolvedStatusTone = statusTone ?? (playing ? "active" : "idle");
+  $: resolvedStatusValue = statusValue ?? (playing ? "Playing" : "Ready");
+
+  function handleLaunch() {
+    onLaunch?.();
+  }
+
+  function handleStop() {
+    onStop?.();
+  }
+</script>
+
+<Panel class={["clip-step-launcher", className].filter(Boolean).join(" ")}>
+  <PanelHeader {title} subtitle={clipName}>
+    <StatusIndicator
+      label={statusLabel}
+      pulse={playing}
+      tone={resolvedStatusTone}
+      value={resolvedStatusValue}
+    />
+  </PanelHeader>
+
+  <div class="clip-step-launcher__transport">
+    <button
+      class="text-button clip-step-launcher__launch"
+      data-appearance="primary"
+      {disabled}
+      on:click={handleLaunch}
+      type="button"
+    >
+      <span class="text-button__label">{launchLabel}</span>
+    </button>
+    <button
+      class="text-button clip-step-launcher__stop"
+      data-appearance="subtle"
+      {disabled}
+      on:click={handleStop}
+      type="button"
+    >
+      <span class="text-button__label">{stopLabel}</span>
+    </button>
+  </div>
+
+  <StepSequencer
+    class="clip-step-launcher__steps"
+    bind:activeKey
+    bind:loop
+    bind:notes
+    {bars}
+    {onCellChange}
+    {onChange}
+    {onKeyChange}
+    {onKeyPress}
+    {onKeyRelease}
+    {onLoopChange}
+    {onNotesChange}
+  />
+
+  <div class="clip-step-launcher__extra">
+    <slot />
+  </div>
+</Panel>

package/src/ColorSwatches.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { parseComponentProps } from "@patchbayhq/ui";
+
+  export let swatches = ["#9cd8ca", "#f0b51d", "#aebaff"];
+  export let value: string | undefined = undefined;
+  export let onValueChange: ((value: string) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("color-swatches", { swatches, value });
+
+  function select(nextValue: string) {
+    value = nextValue;
+    onValueChange?.(nextValue);
+  }
+</script>
+
+<div class={["color-swatches", className].filter(Boolean).join(" ")} aria-label="Color swatches">
+  {#each props.swatches as swatch, index (`${swatch}-${index}`)}
+    <input aria-label={`Color ${index + 1}`} type="color" value={props.value === swatch ? props.value : swatch} on:input={(event) => select((event.currentTarget as HTMLInputElement).value)} />
+  {/each}
+</div>

package/src/Dial.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    initDials,
+    parseComponentProps,
+    type DialDragAxis,
+    type DialMode,
+  } from "@patchbayhq/ui";
+  import { ratio } from "./shared";
+
+  export let label = "Dial";
+  export let value = 0;
+  export let min = 0;
+  export let max = 1;
+  export let step: number | "any" = 0.01;
+  export let mode: DialMode = "unipolar";
+  export let dragAxis: DialDragAxis = "vertical";
+  export let disabled = false;
+  export let onValueChange: ((value: number) => void) | undefined = undefined;
+
+  let className = "";
+  let root: HTMLSpanElement | undefined;
+  export { className as class };
+
+  onMount(() => {
+    if (root) initDials(root);
+  });
+
+  $: props = parseComponentProps("dial", {
+    disabled,
+    dragAxis,
+    label,
+    max,
+    min,
+    mode,
+    step,
+    value,
+  });
+  $: valueRatio = ratio(props.value, props.min, props.max);
+  $: if (root) initDials(root);
+
+  function handleInput(event: Event) {
+    value = Number((event.currentTarget as HTMLInputElement).value);
+    onValueChange?.(value);
+  }
+</script>
+
+<label class={["field", className].filter(Boolean).join(" ")}>
+  <span class="field__label">{props.label}</span>
+  <span
+    bind:this={root}
+    class="dial"
+    data-dial
+    data-drag-axis={props.dragAxis}
+    style={`--dial-value: ${valueRatio}`}
+  >
+    <input
+      aria-label={props.label}
+      type="range"
+      min={props.min}
+      max={props.max}
+      step={props.step}
+      bind:value
+      {disabled}
+      on:input={handleInput}
+    />
+  </span>
+</label>

package/src/Drop.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { parseComponentProps } from "@patchbayhq/ui";
+
+  export let label = "Drop Something Here!";
+  export let accept: string | string[] | undefined = undefined;
+  export let multiple = false;
+  export let disabled = false;
+  export let onFilesChange: ((files: FileList) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("drop", { accept, disabled, label, multiple });
+  $: acceptValue = Array.isArray(props.accept) ? props.accept.join(",") : props.accept;
+
+  function handleChange(event: Event) {
+    const files = (event.currentTarget as HTMLInputElement).files;
+    if (files) onFilesChange?.(files);
+  }
+</script>
+
+<label class={["drop", className].filter(Boolean).join(" ")} title={props.label}>
+  <input aria-label={props.label} accept={acceptValue} disabled={props.disabled} multiple={props.multiple} type="file" on:change={handleChange} />
+  <span aria-hidden="true"></span>
+</label>

package/src/Envelope.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { parseComponentProps, type EnvelopeShape } from "@patchbayhq/ui";
+
+  export let envelope: EnvelopeShape = { attack: 0.2, decay: 0.3, release: 0.35, sustain: 0.7 };
+  export let disabled = false;
+  export let onEnvelopeChange: ((envelope: EnvelopeShape) => void) | undefined = undefined;
+
+  let className = "";
+  let dragCleanup: (() => void) | undefined;
+  let svg: SVGSVGElement | undefined;
+  export { className as class };
+
+  $: props = parseComponentProps("envelope", { disabled, envelope });
+  $: attackX = 8 + props.envelope.attack * 54;
+  $: decayX = attackX + props.envelope.decay * 70;
+  $: sustainY = 88 - props.envelope.sustain * 76;
+  $: releaseX = 194 - props.envelope.release * 40;
+  $: path = `M8 88 L8 12 L${attackX.toFixed(1)} 12 L${decayX.toFixed(1)} ${sustainY.toFixed(
+    1,
+  )} C${releaseX.toFixed(1)} ${sustainY.toFixed(1)} 172 75 194 88`;
+
+  onDestroy(() => {
+    dragCleanup?.();
+  });
+
+  function setSustainFromClientY(clientY: number) {
+    if (!onEnvelopeChange || props.disabled || !svg) return;
+    const rect = svg.getBoundingClientRect();
+    const sustain = Math.max(0, Math.min(1, 1 - (clientY - rect.top - 12) / 76));
+
+    envelope = {
+      ...props.envelope,
+      sustain,
+    };
+    onEnvelopeChange(envelope);
+  }
+
+  function beginSustainDrag(event: PointerEvent) {
+    if (!onEnvelopeChange || props.disabled) return;
+
+    event.preventDefault();
+    dragCleanup?.();
+    setSustainFromClientY(event.clientY);
+
+    const pointerId = event.pointerId;
+    const target = event.currentTarget as SVGElement;
+
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+      // Some browser/SVG combinations skip capture after a quick pointer cancel.
+    }
+
+    const handleMove = (moveEvent: PointerEvent) => {
+      if (moveEvent.pointerId !== pointerId) return;
+
+      moveEvent.preventDefault();
+      setSustainFromClientY(moveEvent.clientY);
+    };
+    const handleEnd = (endEvent: PointerEvent) => {
+      if (endEvent.pointerId !== pointerId) return;
+
+      dragCleanup?.();
+    };
+
+    dragCleanup = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleEnd);
+      window.removeEventListener("pointercancel", handleEnd);
+
+      try {
+        target.releasePointerCapture(pointerId);
+      } catch {
+        // Capture may already be released by the browser.
+      }
+
+      dragCleanup = undefined;
+    };
+
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleEnd);
+    window.addEventListener("pointercancel", handleEnd);
+  }
+
+  function handleSustainKey(event: KeyboardEvent) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    envelope = { ...props.envelope, sustain: Math.max(0, Math.min(1, props.envelope.sustain + 0.05)) };
+    onEnvelopeChange?.(envelope);
+  }
+</script>
+
+<div class={["envelope", className].filter(Boolean).join(" ")}>
+  <svg bind:this={svg} data-envelope viewBox="0 0 210 96" role="img" aria-label="ADSR envelope">
+    <path class="envelope__grid" d="M1 24H209M1 48H209M1 72H209M42 1V95M84 1V95M126 1V95M168 1V95" />
+    <path class="envelope__curve" data-envelope-curve d={path} />
+    <rect data-envelope-handle="start" x="4" y="84" width="8" height="8" />
+    <rect data-envelope-handle="attack" x={attackX - 4} y="8" width="8" height="8" />
+    <circle
+      data-envelope-handle="decay"
+      cx={decayX}
+      cy={sustainY}
+      r="4"
+      role="button"
+      tabindex="0"
+      aria-label="Adjust decay"
+      on:pointerdown={beginSustainDrag}
+      on:keydown={handleSustainKey}
+    />
+    <circle
+      data-envelope-handle="sustain"
+      cx={releaseX}
+      cy={sustainY}
+      r="4"
+      role="button"
+      tabindex="0"
+      aria-label="Adjust sustain"
+      on:pointerdown={beginSustainDrag}
+      on:keydown={handleSustainKey}
+    />
+    <rect data-envelope-handle="end" x="190" y="84" width="8" height="8" />
+  </svg>
+</div>

package/src/Gain.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { parseComponentProps } from "@patchbayhq/ui";
+  import { ratio } from "./shared";
+
+  export let valueDb = -12;
+  export let minDb = -70;
+  export let maxDb = 6;
+  export let stepDb = 0.1;
+  export let level = 0;
+  export let thumbSide: "left" | "right" = "right";
+  export let disabled = false;
+  export let onValueDbChange: ((valueDb: number) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("gain", {
+    disabled,
+    level,
+    maxDb,
+    minDb,
+    stepDb,
+    thumbSide,
+    valueDb,
+  });
+  $: gainRatio = ratio(props.valueDb, props.minDb, props.maxDb);
+
+  function handleInput(event: Event) {
+    valueDb = Number((event.currentTarget as HTMLInputElement).value);
+    onValueDbChange?.(valueDb);
+  }
+</script>
+
+<label
+  class={["gain", className].filter(Boolean).join(" ")}
+  data-gain
+  data-thumb-side={props.thumbSide}
+  style={`--gain-value: ${gainRatio}; --gain-signal: ${props.level}`}
+>
+  <input
+    aria-label="Gain"
+    type="range"
+    min={props.minDb}
+    max={props.maxDb}
+    step={props.stepDb}
+    bind:value={valueDb}
+    disabled={props.disabled}
+    on:input={handleInput}
+  />
+  <span class="gain__signal" data-gain-signal aria-hidden="true"></span>
+  <span class="gain__thumb" aria-hidden="true"></span>
+  <span class="gain__readout" data-gain-readout>{props.valueDb.toFixed(1)} dB</span>
+</label>

package/src/Grid.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {
+    defineElements,
+    parseComponentProps,
+    type GridCell,
+    type GridChangeDetail,
+    type GridDirection,
+    type StepColor,
+  } from "@patchbayhq/ui";
+  import { onMount } from "svelte";
+
+  export let cells: GridCell[] = Array.from({ length: 16 }, () => ({
+    active: false,
+    color: "blue" as StepColor,
+    y: 0.5,
+  }));
+  export let directions: GridDirection[] = Array.from({ length: 16 }, () => "right" as GridDirection);
+  export let measureSize = 4;
+  export let onCellsChange: ((cells: GridCell[]) => void) | undefined = undefined;
+  export let onDirectionsChange: ((directions: GridDirection[]) => void) | undefined = undefined;
+
+  let className = "";
+  let element: HTMLElement & {
+    cells: GridCell[];
+    directions: GridDirection[];
+    measureSize: number;
+  };
+  export { className as class };
+
+  $: props = parseComponentProps("grid", { cells, directions, measureSize });
+  $: if (element) syncElement();
+
+  function syncElement() {
+    element.cells = props.cells;
+    element.directions = props.directions;
+    element.measureSize = props.measureSize;
+  }
+
+  function handleChange(event: Event) {
+    const detail = (event as CustomEvent<GridChangeDetail>).detail;
+    cells = detail.cells;
+    directions = detail.directions;
+    onCellsChange?.(cells);
+    onDirectionsChange?.(directions);
+  }
+
+  onMount(() => {
+    defineElements();
+    syncElement();
+    element.addEventListener("grid-change", handleChange);
+
+    return () => element.removeEventListener("grid-change", handleChange);
+  });
+</script>
+
+<sequencer-grid bind:this={element} class={className}></sequencer-grid>

package/src/Label.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { parseComponentProps } from "@patchbayhq/ui";
+
+  export let text = "";
+  export let align: "left" | "center" | "right" = "left";
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("label", { align, text });
+</script>
+
+<p class={["label", className].filter(Boolean).join(" ")} style={`text-align: ${props.align}`}>{props.text}</p>

package/src/Line.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { parseComponentProps, type LineOrientation } from "@patchbayhq/ui";
+
+  export let orientation: LineOrientation = "horizontal";
+  export let length = 170;
+  export let thickness = 7;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("line", { length, orientation, thickness });
+  $: style =
+    props.orientation === "vertical"
+      ? `block-size: ${props.length}px; inline-size: ${props.thickness}px`
+      : `block-size: ${props.thickness}px; inline-size: ${props.length}px`;
+</script>
+
+<span aria-hidden="true" class={["line", props.orientation === "vertical" ? "line--vertical" : "", className].filter(Boolean).join(" ")} {style}></span>