@patchbayhq/svelte 0.1.0

package/src/MacroRack.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Dial from "./Dial.svelte";
+  import {
+    defaultMacroRackMacros,
+    type MacroRackMacro,
+  } from "./composites";
+
+  export let columns: 2 | 3 | 4 | 8 = 4;
+  export let disabled = false;
+  export let label = "Macro rack";
+  export let macros: MacroRackMacro[] = defaultMacroRackMacros;
+  export let onMacroChange:
+    | ((id: string, value: number, macro: MacroRackMacro) => void)
+    | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  function handleMacroChange(macro: MacroRackMacro, value: number) {
+    macros = macros.map((item) =>
+      item.id === macro.id ? { ...item, value } : item,
+    );
+    onMacroChange?.(macro.id, value, macro);
+  }
+</script>
+
+<div
+  {...$$restProps}
+  aria-label={label}
+  class={["macro-rack", className].filter(Boolean).join(" ")}
+  role="group"
+  style={`--macro-rack-columns: ${columns}`}
+>
+  {#each macros as macro (macro.id)}
+    <Dial
+      class="macro-rack__control"
+      disabled={disabled || macro.disabled}
+      dragAxis={macro.dragAxis}
+      label={macro.label}
+      max={macro.max}
+      min={macro.min}
+      mode={macro.mode}
+      onValueChange={(value) => handleMacroChange(macro, value)}
+      step={macro.step}
+      value={macro.value}
+    />
+  {/each}
+</div>

package/src/Menu.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { parseComponentProps, type MenuItem } from "@patchbayhq/ui";
+
+  export let value = "classic";
+  export let items: MenuItem[] = [
+    { value: "classic", label: "Classic", disabled: false },
+  ];
+  export let disabled = false;
+  export let onValueChange: ((value: string) => void) | undefined = undefined;
+
+  const id = `menu-${Math.random().toString(36).slice(2)}`;
+  let className = "";
+  let open = false;
+  let activeIndex = 0;
+  export { className as class };
+
+  $: props = parseComponentProps("menu", { disabled, items, value });
+  $: selectedIndex = Math.max(
+    0,
+    props.items.findIndex((item) => item.value === props.value),
+  );
+  $: selected = props.items[selectedIndex] ?? props.items[0];
+
+  function firstEnabledIndex(startIndex: number, direction: 1 | -1) {
+    for (let offset = 0; offset < props.items.length; offset += 1) {
+      const index =
+        (startIndex + offset * direction + props.items.length) %
+        props.items.length;
+      if (!props.items[index]?.disabled) return index;
+    }
+
+    return selectedIndex;
+  }
+
+  function commit(index: number) {
+    const item = props.items[index];
+    if (!item || item.disabled) return;
+
+    value = item.value;
+    activeIndex = index;
+    open = false;
+    onValueChange?.(value);
+  }
+
+  function toggleOpen() {
+    activeIndex = selectedIndex;
+    open = !open;
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      activeIndex = firstEnabledIndex(activeIndex + direction, direction);
+      open = true;
+      return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (open) {
+        commit(activeIndex);
+      } else {
+        open = true;
+      }
+      return;
+    }
+
+    if (event.key === "Escape") {
+      open = false;
+    }
+  }
+
+  function handleBlur(event: FocusEvent) {
+    const nextTarget = event.relatedTarget;
+    if (
+      nextTarget instanceof Node &&
+      event.currentTarget instanceof HTMLElement &&
+      event.currentTarget.contains(nextTarget)
+    ) {
+      return;
+    }
+
+    open = false;
+  }
+</script>
+
+<div
+  class={["menu", className].filter(Boolean).join(" ")}
+  data-open={open ? "true" : undefined}
+  on:blur={handleBlur}
+>
+  <button
+    aria-controls={`${id}-listbox`}
+    aria-expanded={open}
+    aria-haspopup="listbox"
+    class="menu__button"
+    {disabled}
+    id={`${id}-button`}
+    type="button"
+    on:click={toggleOpen}
+    on:keydown={handleKeydown}
+  >
+    <span class="menu__value">{selected?.label ?? "Select"}</span>
+    <span aria-hidden="true" class="menu__chevron"></span>
+  </button>
+
+  {#if open}
+    <div
+      aria-activedescendant={`${id}-option-${activeIndex}`}
+      class="menu__list"
+      id={`${id}-listbox`}
+      role="listbox"
+      tabindex="-1"
+    >
+      {#each props.items as item, index (item.value)}
+        <button
+          aria-disabled={item.disabled ? "true" : undefined}
+          aria-selected={item.value === props.value}
+          class={[
+            "menu__option",
+            index === activeIndex && "is-active",
+            item.value === props.value && "is-selected",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          disabled={item.disabled}
+          id={`${id}-option-${index}`}
+          role="option"
+          type="button"
+          on:click={() => commit(index)}
+          on:mouseenter={() => (activeIndex = index)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/Meter.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { parseComponentProps, type Orientation } from "@patchbayhq/ui";
+
+  export let level = 0;
+  export let peak: number | undefined = undefined;
+  export let orientation: Orientation = "vertical";
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("meter", { level, orientation, peak });
+</script>
+
+<div aria-label="Signal meter" class={["meter", className].filter(Boolean).join(" ")} data-meter>
+  <span
+    aria-hidden="true"
+    class="meter__bar"
+    data-meter-bar
+    style={`--meter-value: ${props.level}`}
+  ></span>
+</div>

package/src/NumberBox.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { parseComponentProps, type NumberFormat } from "@patchbayhq/ui";
+
+  export let label = "Number";
+  export let value = 0;
+  export let min = 0;
+  export let max = 127;
+  export let step = 1;
+  export let format: NumberFormat = "integer";
+  export let disabled = false;
+  export let onValueChange: ((value: number) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("number-box", { disabled, format, label, max, min, step, value });
+
+  function handleInput(event: Event) {
+    value = Number((event.currentTarget as HTMLInputElement).value);
+    onValueChange?.(value);
+  }
+</script>
+
+<input
+  aria-label={props.label}
+  class={["number-box", className].filter(Boolean).join(" ")}
+  disabled={props.disabled}
+  max={props.max}
+  min={props.min}
+  step={props.step}
+  type="number"
+  bind:value
+  on:input={handleInput}
+/>

package/src/Panel.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let compact = false;
+
+  let className = "";
+  export { className as class };
+</script>
+
+<section
+  {...$$restProps}
+  class={["panel", compact && "panel--compact", className].filter(Boolean).join(" ")}
+>
+  <slot />
+</section>

package/src/PanelHeader.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  export let eyebrow: string | undefined = undefined;
+  export let subtitle: string | undefined = undefined;
+  export let title: string | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+</script>
+
+<header
+  {...$$restProps}
+  class={["panel-header", className].filter(Boolean).join(" ")}
+>
+  <div class="panel-header__main">
+    {#if eyebrow}
+      <span class="panel-header__eyebrow">{eyebrow}</span>
+    {/if}
+    {#if title}
+      <h3 class="panel-header__title">{title}</h3>
+    {/if}
+    {#if subtitle}
+      <p class="panel-header__subtitle">{subtitle}</p>
+    {/if}
+  </div>
+  <div class="panel-header__actions">
+    <slot />
+  </div>
+</header>

package/src/PanelSection.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let title: string | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+</script>
+
+<section
+  {...$$restProps}
+  class={["panel-section", className].filter(Boolean).join(" ")}
+>
+  {#if title}
+    <div class="panel-section__header">
+      <h4 class="panel-section__title">{title}</h4>
+      <div class="panel-section__actions">
+        <slot name="actions" />
+      </div>
+    </div>
+  {/if}
+  <div class="panel-section__body">
+    <slot />
+  </div>
+</section>

package/src/Scope.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { parseComponentProps } from "@patchbayhq/ui";
+
+  export let samples: number[] = [];
+  export let mode: "waveform" | "lissajous" = "waveform";
+  export let frozen = false;
+
+  let className = "";
+  let canvas: HTMLCanvasElement;
+  export { className as class };
+
+  $: props = parseComponentProps("scope", { frozen, mode, samples });
+  $: if (canvas && props) draw();
+
+  function draw() {
+    const context = canvas.getContext("2d");
+    if (!context) return;
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.fillStyle = "#161616";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.strokeStyle = "rgba(255, 255, 255, 0.12)";
+    context.lineWidth = 1;
+
+    for (let x = 0; x < canvas.width; x += 23) {
+      context.beginPath();
+      context.moveTo(x, 0);
+      context.lineTo(x, canvas.height);
+      context.stroke();
+    }
+
+    const wave = props.samples.length > 0 ? props.samples : Array.from({ length: canvas.width }, () => 0);
+    context.strokeStyle = "#9cd8ca";
+    context.lineWidth = 2;
+    context.beginPath();
+
+    wave.forEach((sample, index) => {
+      const x = (index / Math.max(1, wave.length - 1)) * canvas.width;
+      const y = canvas.height / 2 - Math.max(-1, Math.min(1, sample)) * (canvas.height * 0.38);
+      index === 0 ? context.moveTo(x, y) : context.lineTo(x, y);
+    });
+
+    context.stroke();
+  }
+
+  onMount(draw);
+</script>
+
+<canvas bind:this={canvas} aria-label="Scope" class={["scope", className].filter(Boolean).join(" ")} data-scope width="184" height="98"></canvas>

package/src/Slider.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { parseComponentProps, type Orientation } from "@patchbayhq/ui";
+  import { init } from "./shared";
+
+  export let label = "Slider";
+  export let value = 0;
+  export let min = 0;
+  export let max = 1;
+  export let step: number | "any" = 0.01;
+  export let orientation: Orientation = "vertical";
+  export let modulation: number | undefined = undefined;
+  export let disabled = false;
+  export let onValueChange: ((value: number) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("slider", {
+    disabled,
+    label,
+    max,
+    min,
+    modulation,
+    orientation,
+    step,
+    value,
+  });
+
+  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
+    class="slider"
+    data-slider
+    data-orientation={props.orientation}
+    data-modulation={props.modulation}
+    use:init={[props.value, props.modulation, props.orientation]}
+  >
+    <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/StatusIndicator.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { StatusTone } from "./composites";
+
+  export let label = "";
+  export let pulse = false;
+  export let tone: StatusTone = "idle";
+  export let value = "";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<span
+  {...$$restProps}
+  class={["status-indicator", className].filter(Boolean).join(" ")}
+  data-pulse={pulse ? "true" : undefined}
+  data-tone={tone}
+>
+  <span aria-hidden="true" class="status-indicator__dot"></span>
+  {#if label}
+    <span class="status-indicator__label">{label}</span>
+  {/if}
+  {#if value}
+    <strong class="status-indicator__value">{value}</strong>
+  {/if}
+</span>

package/src/StepSequencer.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {
+    defineElements,
+    parseComponentProps,
+    type StepChangeDetail,
+    type StepKey,
+    type StepLoop,
+    type StepNote,
+  } from "@patchbayhq/ui";
+  import { onMount } from "svelte";
+
+  export let activeKey: StepKey = "C4";
+  export let notes: StepNote[] = [];
+  export let loop: StepLoop = { start: 1, end: 16 };
+  export let bars = 4;
+  export let onChange: ((detail: StepChangeDetail) => void) | undefined = undefined;
+  export let onCellChange:
+    | ((change: Extract<StepChangeDetail, { type: "cell" }>) => 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 onLoopChange: ((loop: StepLoop) => void) | undefined = undefined;
+  export let onNotesChange: ((notes: StepNote[]) => void) | undefined = undefined;
+
+  let className = "";
+  let element: HTMLElement & {
+    activeKey: StepKey;
+    bars: number;
+    loop: StepLoop;
+    notes: StepNote[];
+  };
+  export { className as class };
+
+  $: props = parseComponentProps("step-sequencer", { activeKey, bars, loop, notes });
+  $: if (element) syncElement();
+
+  function syncElement() {
+    element.activeKey = props.activeKey;
+    element.bars = props.bars;
+    element.loop = props.loop;
+    element.notes = props.notes;
+  }
+
+  function handleChange(event: Event) {
+    const detail = (event as CustomEvent<StepChangeDetail>).detail;
+    activeKey = detail.activeKey;
+    loop = detail.loop;
+    notes = detail.notes;
+    onChange?.(detail);
+    if (detail.type === "key") {
+      onKeyChange?.(detail);
+      if (detail.pressed) {
+        onKeyPress?.(detail.key);
+      } else {
+        onKeyRelease?.(detail.key);
+      }
+    }
+    if (detail.type === "loop") onLoopChange?.(detail.loop);
+    if (detail.type === "cell") {
+      onCellChange?.(detail);
+      onNotesChange?.(notes);
+    }
+  }
+
+  onMount(() => {
+    defineElements();
+    syncElement();
+    element.addEventListener("step-change", handleChange);
+
+    return () => element.removeEventListener("step-change", handleChange);
+  });
+</script>
+
+<step-sequencer bind:this={element} class={className}></step-sequencer>

package/src/Tabs.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { parseComponentProps, type TabItem } from "@patchbayhq/ui";
+
+  export let value = "one";
+  export let items: TabItem[] = [{ value: "one", label: "One", disabled: false }];
+  export let disabled = false;
+  export let onValueChange: ((value: string) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("tabs", { disabled, items, value });
+
+  function select(nextValue: string) {
+    value = nextValue;
+    onValueChange?.(value);
+  }
+</script>
+
+<div class={["tabs", className].filter(Boolean).join(" ")} role="tablist">
+  {#each props.items as item (item.value)}
+    <button
+      aria-selected={item.value === props.value}
+      class={["tab", item.value === props.value ? "is-active" : ""].filter(Boolean).join(" ")}
+      disabled={props.disabled || item.disabled}
+      role="tab"
+      type="button"
+      on:click={() => select(item.value)}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>

package/src/TextButton.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import {
+    parseComponentProps,
+    type ControlAppearance,
+  } from "@patchbayhq/ui";
+
+  export let value = false;
+  export let labels = { off: "Off", on: "On" };
+  export let icon: string | undefined = undefined;
+  export let picture: string | undefined = undefined;
+  export let pictureAlt = "";
+  export let appearance: ControlAppearance = "default";
+  export let disabled = false;
+  export let onValueChange: ((value: boolean) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("text-button", {
+    appearance,
+    disabled,
+    icon,
+    labels,
+    picture,
+    pictureAlt,
+    value,
+  });
+  $: label = props.value ? props.labels.on : props.labels.off;
+
+  function toggle() {
+    value = !props.value;
+    onValueChange?.(value);
+  }
+</script>
+
+<button
+  aria-pressed={props.value}
+  class={["text-button", className].filter(Boolean).join(" ")}
+  data-appearance={props.appearance}
+  {disabled}
+  type="button"
+  on:click={toggle}
+>
+  {#if props.picture}
+    <img
+      alt={props.pictureAlt}
+      class="text-button__picture"
+      src={props.picture}
+    />
+  {:else if props.icon}
+    <span aria-hidden="true" class="text-button__icon">{props.icon}</span>
+  {/if}
+  <span class="text-button__label"><slot>{label}</slot></span>
+</button>

package/src/Toggle.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { parseComponentProps, type ControlAppearance } from "@patchbayhq/ui";
+
+  export let label = "Toggle";
+  export let checked = false;
+  export let appearance: ControlAppearance = "default";
+  export let disabled = false;
+  export let onCheckedChange: ((checked: boolean) => void) | undefined = undefined;
+
+  let className = "";
+  export { className as class };
+
+  $: props = parseComponentProps("toggle", {
+    appearance,
+    checked,
+    disabled,
+    label,
+  });
+
+  function handleChange(event: Event) {
+    checked = (event.currentTarget as HTMLInputElement).checked;
+    onCheckedChange?.(checked);
+  }
+</script>
+
+<label
+  class={["toggle", className].filter(Boolean).join(" ")}
+  data-appearance={props.appearance}
+>
+  <input aria-label={props.label} type="checkbox" bind:checked {disabled} on:change={handleChange} />
+  <span aria-hidden="true"></span>
+</label>

package/src/composites.ts

@@ -0,0 +1,35 @@
+import type {
+  DialProps,
+  StepChangeDetail,
+  StepKey,
+  StepLoop,
+  StepNote,
+} from "@patchbayhq/ui";
+
+export type StatusTone = "idle" | "active" | "warning" | "danger";
+
+export type MacroRackMacro = {
+  dragAxis?: DialProps["dragAxis"];
+  disabled?: boolean;
+  id: string;
+  label: string;
+  max?: number;
+  min?: number;
+  mode?: DialProps["mode"];
+  step?: DialProps["step"];
+  value: number;
+};
+
+export const defaultMacroRackMacros: MacroRackMacro[] = Array.from(
+  { length: 8 },
+  (_, index) => ({
+    id: `macro-${index + 1}`,
+    label: `Macro ${index + 1}`,
+    value: 0,
+  }),
+);
+
+export type ClipStepLauncherChange = StepChangeDetail;
+export type ClipStepLauncherKey = StepKey;
+export type ClipStepLauncherLoop = StepLoop;
+export type ClipStepLauncherNote = StepNote;