4track 0.1.0

package/dist/components/els/Light.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  let {
+    color = "green",
+    active = false,
+    pulsing = false,
+  }: {
+    color?: "red" | "green"
+    active?: boolean
+    pulsing?: false | "slow" | "fast"
+  } = $props()
+</script>
+
+<div class="light-bevel">
+  <div
+    class="light {color}"
+    class:active
+    class:pulsing-slow={pulsing === "slow" || pulsing === true}
+    class:pulsing-fast={pulsing === "fast"}
+  >
+    &nbsp;
+  </div>
+</div>
+
+<style>
+  .light-bevel {
+    background: linear-gradient(to bottom right, #101010, #a2a1a1);
+    height: 1.5cqw;
+    width: 1.5cqw;
+    border-radius: 50%;
+    container-type: size;
+  }
+
+  .light {
+    border-radius: 89cqw;
+    width: 66cqw;
+    height: 66cqh;
+    margin-top: 22cqh;
+    margin-left: 20cqw;
+    background: #645855;
+    box-shadow: inset 6cqw -6cqh 22cqw 17cqw rgba(62, 2, 2, 0.7);
+
+    /* &.red {
+      background: #8f3333;
+      box-shadow: inset 6cqw -6cqh 22cqw 17cqw rgba(62, 2, 2, 0.7);
+    } */
+    &.red.active {
+      background: #ff0000;
+      box-shadow:
+        inset 0 0 33cqw rgba(32, 1, 1, 0.9),
+        0 0 89cqw 89cqw rgba(209, 24, 24, 0.1);
+    }
+    &.red.pulsing-slow {
+      animation: pulse-red 2s ease-in-out infinite;
+    }
+    &.red.pulsing-fast {
+      animation: pulse-red 0.5s ease-in-out infinite;
+    }
+
+    &.green {
+      background: #628615;
+      box-shadow: inset 6cqw -6cqh 22cqw 17cqw rgba(32, 40, 0, 0.8);
+    }
+    &.green.active {
+      background: #bbff00;
+      box-shadow:
+        inset 0 0 33cqw rgba(45, 53, 2, 0.9),
+        0 0 89cqw 89cqw rgba(176, 240, 2, 0.1);
+    }
+    &.green.pulsing-slow {
+      animation: pulse-green 2s ease-in-out infinite;
+    }
+    &.green.pulsing-fast {
+      animation: pulse-green 0.5s ease-in-out infinite;
+    }
+  }
+
+  @keyframes pulse-red {
+    0%,
+    100% {
+      background: #645855;
+      box-shadow: inset 6cqw -6cqh 22cqw 17cqw rgba(62, 2, 2, 0.7);
+    }
+    50% {
+      background: #ff0000;
+      box-shadow:
+        inset 0 0 33cqw rgba(32, 1, 1, 0.9),
+        0 0 89cqw 89cqw rgba(209, 24, 24, 0.1);
+    }
+  }
+
+  @keyframes pulse-green {
+    0%,
+    100% {
+      background: #645855;
+      box-shadow: inset 6cqw -6cqh 22cqw 17cqw rgba(32, 40, 0, 0.8);
+    }
+    50% {
+      background: #bbff00;
+      box-shadow:
+        inset 0 0 33cqw rgba(45, 53, 2, 0.9),
+        0 0 89cqw 89cqw rgba(176, 240, 2, 0.1);
+    }
+  }
+</style>

package/dist/components/els/Light.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    color?: "red" | "green";
+    active?: boolean;
+    pulsing?: false | "slow" | "fast";
+};
+declare const Light: import("svelte").Component<$$ComponentProps, {}, "">;
+type Light = ReturnType<typeof Light>;
+export default Light;

package/dist/components/els/Lights.svelte

@@ -0,0 +1,101 @@
+<script>
+  let { level } = $props()
+</script>
+
+<div class="indicators">
+  <div class="labels">
+    <div class="left">+6</div>
+    <div class="right">0</div>
+  </div>
+  <div class="lights">
+    <div class="inner">
+      <div class="light-bevel">
+        <div class="light high active" class:active={level > 3}>&nbsp;</div>
+      </div>
+      <div class="light-bevel">
+        <div class="light low active" class:active={level > 1}>&nbsp;</div>
+      </div>
+      <!-- <div class="light low" class:active={level > 0.5}>&nbsp;</div> -->
+    </div>
+  </div>
+</div>
+
+<style>
+  .indicators {
+    container-type: size;
+    width: 100%;
+    height: 100%;
+  }
+  .labels {
+    color: white;
+    display: flex;
+    font-size: 20cqw;
+    opacity: 0.8;
+    .left {
+      flex: 1;
+    }
+    .right {
+      flex: 1;
+      text-align: right;
+      transform: translate(-4cqw, 20cqh);
+    }
+  }
+  .lights {
+    height: 130cqw;
+    width: 50cqw;
+    background: #46474a;
+    box-shadow:
+      inset 4cqw -2cqw 12cqw rgba(0, 0, 0, 0.6),
+      inset 4cqw -4cqw 4cqw rgba(255, 255, 255, 0.5);
+    position: relative;
+    border-radius: 40cqw;
+    transform: rotate(-60deg) translate(10cqw, 10cqh);
+  }
+  .inner {
+    position: relative;
+    top: 3.5cqw;
+    left: 4cqw;
+    height: 120cqw;
+    width: 44cqw;
+    background: #46474a;
+    border-radius: 40cqw;
+  }
+  .light-bevel {
+    background: linear-gradient(to bottom, #101010, #6b6b6b);
+    top: 2.5cqh;
+    left: 4cqw;
+    height: 36cqw;
+    width: 36cqw;
+    margin-bottom: 15cqh;
+    border-radius: 50%;
+    position: relative;
+  }
+  .light {
+    position: absolute;
+    width: 31cqw;
+    height: 31cqw;
+    top: 3cqw;
+    left: 3cqw;
+    border-radius: 50%;
+    &.low {
+      background: #628615;
+      box-shadow: inset 2cqw -2cqw 8cqw 6cqw rgba(32, 40, 0, 0.8);
+    }
+    &.low.active {
+      background: #bbff00;
+      box-shadow:
+        inset 0 0 12cqw rgba(45, 53, 2, 0.9),
+        0 0 32cqw 32cqw rgba(176, 240, 2, 0.1);
+    }
+    &.high {
+      background: #8f3333;
+      box-shadow: inset 2cqw -2cqw 8cqw 6cqw rgba(62, 2, 2, 0.7);
+    }
+    &.high.active {
+      background: #ff0000;
+      box-shadow:
+        inset 0 0 12cqw rgba(32, 1, 1, 0.9),
+        0 0 32cqw 32cqw rgba(209, 24, 24, 0.1);
+    }
+  }
+</style>

package/dist/components/els/Lights.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Lights;
+type Lights = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Lights: import("svelte").Component<{
+    level: any;
+}, {}, "">;
+type $$ComponentProps = {
+    level: any;
+};

package/dist/components/els/SlideSelect.svelte

@@ -0,0 +1,159 @@
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<script>
+  import { playFx } from "../../fx/soundfx"
+  import slideSelectIndicatorImg from '../../assets/slideselect-indicator.svg?url'
+  import slideSelectThumbImg from '../../assets/slideselect-thumb.png'
+  let dragging = $state(false)
+  let trackEl = $state()
+  let selected_i = $state(4)
+  let startY = $state(0)
+  let startIndex = $state(0)
+  let initialized = false // to disable sound fx on loading of the component
+  let selections = [
+    { lbl: "TRK 1", val: 0 },
+    { lbl: "2", val: 1 },
+    { lbl: "3", val: 2 },
+    { lbl: "4", val: 3 },
+    { lbl: "SAFE", val: -1 },
+  ]
+  let btnHeight = 0.55
+
+  let { value = $bindable(), padding = 2, disabled = false } = $props() // padding: % inset top/bottom
+
+  const steps = selections.length - 1
+  const adjusted_scrollarea = 1 - btnHeight - (2 * padding) / 100
+  let xpos_percentage = $derived(
+    padding + Math.round((selected_i / steps) * adjusted_scrollarea * 100),
+  )
+
+  const start = (event) => {
+    if (disabled) return
+    dragging = true
+    startY = event.clientY
+    startIndex = selected_i
+    event.target.setPointerCapture(event.pointerId)
+  }
+
+  const move = (event) => {
+    if (!dragging) return
+    const rect = trackEl.getBoundingClientRect()
+    const steps = selections.length - 1
+    const adjusted_scrollarea = 1 - btnHeight - (2 * padding) / 100
+    const scrollHeight = rect.height * adjusted_scrollarea
+    const stepHeight = scrollHeight / steps
+    const deltaSteps = Math.round((event.clientY - startY) / stepHeight)
+
+    selected_i = Math.max(0, Math.min(startIndex + deltaSteps, steps))
+
+    // This is the bindable value
+    value = selections[selected_i]?.val
+  }
+
+  const stop = (event) => {
+    dragging = false
+    event.target.releasePointerCapture?.(event.pointerId)
+  }
+
+  $effect(() => {
+    const trigger = value // We are referencing value so that Svelte triggers the effect smartly
+
+    if (!initialized) {
+      initialized = true
+      return
+    }
+
+    playFx("track")
+  })
+</script>
+
+<div class="slider-holder" style:--bg-slideselect-indicator="url({slideSelectIndicatorImg})" style:--bg-slideselect-thumb="url({slideSelectThumbImg})">
+  <div class="slideselect-indicator"></div>
+  <div
+    bind:this={trackEl}
+    class="track"
+    onpointermove={move}
+    onpointerup={stop}
+    onpointerleave={stop}
+    role="slider"
+  >
+    <div
+      class="thumb"
+      class:dragging
+      class:disabled
+      onpointerdown={start}
+      style="top: {xpos_percentage}%;  height: {btnHeight * 100}%"
+    ></div>
+    <!-- <div
+      class="slot"
+      style="height: {(1 - btnHeight) * 100}%; top: {(btnHeight / 2) * 100}%"
+    ></div> -->
+  </div>
+</div>
+
+<style>
+  .slider-holder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    container-type: size;
+    padding-top: 0cqh;
+  }
+  .slideselect-indicator {
+    position: relative;
+    background: var(--bg-slideselect-indicator);
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 100%;
+    height: 43cqh;
+    background-position: top right;
+    opacity: 0.7;
+    top: 10%;
+  }
+  .track {
+    width: 32cqw;
+    height: 100%;
+    position: relative;
+    border-radius: 4cqw;
+    background: rgb(100, 100, 100);
+    box-shadow:
+      inset 8cqw 1cqh 12cqw rgba(31, 31, 31, 0.75),
+      inset 2cqw 0.2cqh 2cqw rgba(31, 31, 31, 0.45),
+      inset -2cqw -0.2cqh 2cqw rgba(255, 252, 252, 0.35);
+
+    .slot {
+      display: block;
+      content: " ";
+      width: 50%;
+      background-color: rgb(28, 28, 29);
+      position: absolute;
+      margin: 0 auto;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%);
+    }
+  }
+
+  .thumb {
+    width: 75%;
+    margin: 0 12%;
+    background: var(--bg-slideselect-thumb);
+    background-size: 100% 100%;
+    position: absolute;
+    border-radius: 1cqh;
+    top: 0%;
+    left: 0;
+    cursor: grab;
+    z-index: 1;
+    box-shadow:
+      10cqw 0.5cqh 10cqw rgba(0, 0, 0, 0.4),
+      inset 1.5cqw 0.5cqh 1cqw rgba(255, 252, 252, 0.35);
+  }
+  .thumb.dragging {
+    cursor: grabbing;
+  }
+  .thumb.disabled {
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/els/SlideSelect.svelte.d.ts

@@ -0,0 +1,15 @@
+export default SlideSelect;
+type SlideSelect = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SlideSelect: import("svelte").Component<{
+    value?: any;
+    padding?: number;
+    disabled?: boolean;
+}, {}, "value">;
+type $$ComponentProps = {
+    value?: any;
+    padding?: number;
+    disabled?: boolean;
+};

package/dist/components/els/Slider.svelte

@@ -0,0 +1,139 @@
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<script>
+  import sliderIndicatorImg from '../../assets/slider-indicator.svg?url'
+  import sliderImg from '../../assets/slider.png'
+
+  let { value = $bindable(0), min = 0, max = 1, onchange, btnHeight = 0.35, padding = 1 } = $props()
+  let dragging = $state(false)
+  let trackEl = $state()
+  let startY = $state(0)
+  let startNorm = $state(0)
+
+  function normalizeValue(val) {
+    return (val - min) / (max - min)
+  }
+  function denormalizeValue(norm) {
+    return min + norm * (max - min)
+  }
+
+  // Inverted: top = max, bottom = min (like a real fader)
+  let topPercent = $derived(
+    padding + ((1 - normalizeValue(value)) * (1 - btnHeight - (2 * padding) / 100) * 100),
+  )
+
+  const start = (event) => {
+    dragging = true
+    startY = event.clientY
+    startNorm = normalizeValue(value)
+    trackEl.setPointerCapture(event.pointerId)
+  }
+
+  const move = (event) => {
+    if (!dragging) return
+    const rect = trackEl.getBoundingClientRect()
+    const deltaY = event.clientY - startY
+    const scrollHeight = rect.height * (1 - btnHeight)
+    // Inverted: dragging down decreases value
+    const deltaNorm = -(deltaY / scrollHeight)
+    const newNorm = Math.max(0, Math.min(startNorm + deltaNorm, 1))
+    value = denormalizeValue(newNorm)
+    onchange?.(value)
+  }
+
+  const stop = (event) => {
+    dragging = false
+    trackEl.releasePointerCapture?.(event.pointerId)
+  }
+</script>
+
+<div class="slider-holder" style:--bg-slider-indicator="url({sliderIndicatorImg})" style:--bg-slider="url({sliderImg})">
+  <div
+    class="slider-indicator"
+    style="height: {(1 - btnHeight) * 100}%; top: {(btnHeight / 2) * 100}%"
+  ></div>
+  <div
+    bind:this={trackEl}
+    class="track"
+    onpointermove={move}
+    onpointerup={stop}
+    onpointerleave={stop}
+    role="slider"
+  >
+    <div
+      class="thumb"
+      class:dragging
+      onpointerdown={start}
+      style="top: {topPercent}%; height: {btnHeight * 100}%"
+    ></div>
+    <div
+      class="slot"
+      style="height: {(1 - btnHeight) * 100}%; top: {(btnHeight / 2) * 100}%"
+    ></div>
+  </div>
+</div>
+
+<style>
+  .slider-holder {
+    height: 100%;
+    width: 5cqw;
+    display: flex;
+    container-type: size;
+    padding-top: 2cqh;
+  }
+
+  .slider-indicator {
+    position: relative;
+    background: var(--bg-slider-indicator);
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 55cqw;
+    height: 100%;
+    background-position: center;
+    opacity: 0.7;
+  }
+
+  .track {
+    width: 45cqw;
+    height: 100%;
+    position: relative;
+    border-radius: 8cqw;
+    box-shadow:
+      inset 9cqw 2cqh 15cqw rgba(31, 31, 31, 0.75),
+      inset 1.5cqw 0.2cqh 1.5cqw rgba(31, 31, 31, 0.45),
+      inset -1.5cqw -0.2cqh 1.5cqw rgba(255, 252, 252, 0.35);
+
+    .slot {
+      display: block;
+      content: " ";
+      width: 50%;
+      background-color: rgb(28, 28, 29);
+      border-radius: 3cqw;
+      position: absolute;
+      margin: 0 auto;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%);
+    }
+  }
+
+  .thumb {
+    width: 80%;
+    margin: 0 10%;
+    background: var(--bg-slider);
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0%;
+    left: 0;
+    cursor: grab;
+    z-index: 1;
+    border-radius: 10cqw;
+    box-shadow:
+      15cqw 1cqh 8cqw rgba(0, 0, 0, 0.4),
+      inset 1.5cqw 0.5cqh 1cqw rgba(255, 252, 252, 0.35);
+  }
+  .thumb.dragging {
+    cursor: grabbing;
+  }
+</style>

package/dist/components/els/Slider.svelte.d.ts

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

package/dist/components/els/Timestamp.svelte

@@ -0,0 +1,92 @@
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_missing_attribute -->
+<script lang="ts">
+  let { timestamp } = $props()
+  import { playFx } from "../../fx/soundfx"
+  import DigitRoller from "./DigitRoller.svelte"
+  import counterBgImg from '../../assets/counter_bg.png'
+
+  let correction = $state(0)
+  function count_to_str(nr: number) {
+    var cor_nr = Math.floor(nr - correction)
+    if (cor_nr < 0) cor_nr += 1000
+
+    if (cor_nr > 99) {
+      return cor_nr.toString()
+    } else if (cor_nr > 9) {
+      return "0" + cor_nr.toString()
+    } else {
+      return "00" + cor_nr.toString()
+    }
+  }
+
+  function get_digit(nr, i) {
+    return count_to_str(nr).charAt(i)
+  }
+
+  function reset() {
+    playFx("counter")
+    correction = timestamp
+  }
+</script>
+
+<!-- <div>{count_to_str(timestamp)}</div> -->
+
+<div class="wrapper" style:--bg-counter="url({counterBgImg})">
+  <div class="counter">
+    <a onmousedown={() => reset()}>&nbsp;</a>
+    <div class="number-ticker">
+      <DigitRoller digit={get_digit(timestamp, 0)} />
+      <DigitRoller digit={get_digit(timestamp, 1)} />
+      <DigitRoller digit={get_digit(timestamp, 2)} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .number-ticker {
+    display: flex;
+    height: 17cqw;
+    overflow: hidden;
+  }
+
+  .wrapper {
+    container-type: size;
+    height: 8cqh;
+    aspect-ratio: 180 / 80;
+  }
+  .counter {
+    padding: 15.2cqw 17cqh 13.8cqw;
+    color: rgb(216, 216, 216);
+    background-image: var(--bg-counter);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 100cqw;
+    height: 100cqh;
+    position: relative;
+    user-select: none;
+
+    box-sizing: border-box;
+  }
+  a {
+    width: 11cqw;
+    height: 25cqh;
+    background-color: rgb(34, 34, 34);
+    border-radius: 50%;
+    position: absolute;
+    right: 16.7cqw;
+    top: 50%;
+    transform: translateY(-15cqh);
+    cursor: pointer;
+    box-shadow:
+      6cqw 15cqh 5.5cqw rgba(0, 0, 0, 0.8),
+      inset 1cqw 2.5cqh 1.7cqw rgba(255, 255, 255, 0.4);
+
+    &:active {
+      box-shadow:
+        5.5cqw 13.75cqh 6cqw rgba(0, 0, 0, 0.8),
+        inset 1cqw 2.5cqh 1.7cqw rgba(255, 255, 255, 0.4);
+    }
+  }
+</style>

package/dist/components/els/Timestamp.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Timestamp: import("svelte").Component<{
+    timestamp: any;
+}, {}, "">;
+type Timestamp = ReturnType<typeof Timestamp>;
+export default Timestamp;

package/dist/fx/soundfx.d.ts

@@ -0,0 +1,14 @@
+declare const soundPaths: {
+    stop: string;
+    ffwd: string;
+    pause: string;
+    play: string;
+    track: string;
+    counter: string;
+    record: string;
+};
+type SoundKey = keyof typeof soundPaths;
+export declare function playFx(key: SoundKey, volume?: number): Promise<void>;
+export declare function playLoop(key: SoundKey, volume?: number): Promise<void>;
+export declare function stopLoop(key: SoundKey): void;
+export {};