feat: add GradientSlider component

src/components/colorcorrect/GradientSlider.test.ts

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import GradientSlider from './GradientSlider.vue'
+import type { ColorStop } from './gradients'
+import { interpolateStops } from './gradients'
+
+const TEST_STOPS: ColorStop[] = [
+  [0, 0, 0, 0],
+  [1, 255, 255, 255]
+]
+
+function mountSlider(props: {
+  stops?: ColorStop[]
+  modelValue: number
+  min?: number
+  max?: number
+  step?: number
+}) {
+  return mount(GradientSlider, {
+    props: { stops: TEST_STOPS, ...props }
+  })
+}
+
+describe('GradientSlider', () => {
+  it('passes min, max, step to SliderRoot', () => {
+    const wrapper = mountSlider({
+      modelValue: 50,
+      min: -100,
+      max: 100,
+      step: 5
+    })
+    const thumb = wrapper.find('[role="slider"]')
+    expect(thumb.attributes('aria-valuemin')).toBe('-100')
+    expect(thumb.attributes('aria-valuemax')).toBe('100')
+  })
+
+  it('renders slider root with track and thumb', () => {
+    const wrapper = mountSlider({ modelValue: 0 })
+    expect(wrapper.find('[data-slider-impl]').exists()).toBe(true)
+    expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+  })
+
+  it('does not render SliderRange', () => {
+    const wrapper = mountSlider({ modelValue: 50 })
+    expect(wrapper.find('[data-slot="slider-range"]').exists()).toBe(false)
+  })
+})
+
+describe('interpolateStops', () => {
+  it('returns start color at t=0', () => {
+    expect(interpolateStops(TEST_STOPS, 0)).toBe('rgb(0,0,0)')
+  })
+
+  it('returns end color at t=1', () => {
+    expect(interpolateStops(TEST_STOPS, 1)).toBe('rgb(255,255,255)')
+  })
+
+  it('returns midpoint color at t=0.5', () => {
+    expect(interpolateStops(TEST_STOPS, 0.5)).toBe('rgb(128,128,128)')
+  })
+
+  it('clamps values below 0', () => {
+    expect(interpolateStops(TEST_STOPS, -1)).toBe('rgb(0,0,0)')
+  })
+
+  it('clamps values above 1', () => {
+    expect(interpolateStops(TEST_STOPS, 2)).toBe('rgb(255,255,255)')
+  })
+})

src/components/colorcorrect/GradientSlider.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+import { computed, ref } from 'vue'
+
+import type { ColorStop } from '@/components/colorcorrect/gradients'
+import {
+  interpolateStops,
+  stopsToGradient
+} from '@/components/colorcorrect/gradients'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  stops,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false
+} = defineProps<{
+  stops: ColorStop[]
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}>()
+
+const modelValue = defineModel<number>({ required: true })
+
+const sliderValue = computed({
+  get: () => [modelValue.value],
+  set: (v: number[]) => {
+    if (v.length) modelValue.value = v[0]
+  }
+})
+
+const gradient = computed(() => stopsToGradient(stops))
+
+const thumbColor = computed(() => {
+  const t = max === min ? 0 : (modelValue.value - min) / (max - min)
+  return interpolateStops(stops, t)
+})
+
+const pressed = ref(false)
+</script>
+
+<template>
+  <SliderRoot
+    v-model="sliderValue"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    :class="
+      cn(
+        'relative flex w-full touch-none items-center select-none',
+        'data-[disabled]:opacity-50'
+      )
+    "
+    :style="{ '--reka-slider-thumb-transform': 'translate(-50%, -50%)' }"
+    @slide-start="pressed = true"
+    @slide-move="pressed = true"
+    @slide-end="pressed = false"
+  >
+    <SliderTrack
+      :class="
+        cn(
+          'relative h-2.5 w-full grow cursor-pointer overflow-visible rounded-full',
+          'before:absolute before:-inset-2 before:block before:bg-transparent'
+        )
+      "
+      :style="{ background: gradient }"
+    >
+      <SliderThumb
+        :class="
+          cn(
+            'block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25',
+            'transition-[color,box-shadow,background-color]',
+            'before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent',
+            'hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden',
+            'disabled:pointer-events-none disabled:opacity-50',
+            { 'cursor-grabbing': pressed }
+          )
+        "
+        :style="{ backgroundColor: thumbColor, top: '50%' }"
+      />
+    </SliderTrack>
+  </SliderRoot>
+</template>

src/components/colorcorrect/gradients.ts

@@ -0,0 +1,37 @@
+export type ColorStop = readonly [
+  offset: number,
+  r: number,
+  g: number,
+  b: number
+]
+
+export function stopsToGradient(stops: ColorStop[]): string {
+  const colors = stops.map(
+    ([offset, r, g, b]) => `rgb(${r},${g},${b}) ${offset * 100}%`
+  )
+  return `linear-gradient(to right, ${colors.join(', ')})`
+}
+
+export function interpolateStops(stops: ColorStop[], t: number): string {
+  const clamped = Math.max(0, Math.min(1, t))
+
+  if (clamped <= stops[0][0]) {
+    const [, r, g, b] = stops[0]
+    return `rgb(${r},${g},${b})`
+  }
+
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [o1, r1, g1, b1] = stops[i]
+    const [o2, r2, g2, b2] = stops[i + 1]
+    if (clamped >= o1 && clamped <= o2) {
+      const f = o2 === o1 ? 0 : (clamped - o1) / (o2 - o1)
+      const r = Math.round(r1 + (r2 - r1) * f)
+      const g = Math.round(g1 + (g2 - g1) * f)
+      const b = Math.round(b1 + (b2 - b1) * f)
+      return `rgb(${r},${g},${b})`
+    }
+  }
+
+  const [, r, g, b] = stops[stops.length - 1]
+  return `rgb(${r},${g},${b})`
+}