Knob slider

'use client'

import { useRef } from 'react'
import { clampTo, sliderAria, sliderKeys, type SliderProps } from '../lib/slider'

// a small dial: drag up/down, scroll, or click to turn
export function KnobSlider(props: SliderProps) {
  const { options, value, onChange } = props
  const count = options.length
  const startY = useRef<number | null>(null)
  const startValue = useRef(value)
  const moved = useRef(false)
  const deg = (i: number) => -100 + (i / (count - 1)) * 200

  return (
    <div className="flex items-center gap-3">
      <div
        {...sliderAria(props)}
        onKeyDown={sliderKeys(value, count, onChange)}
        onPointerDown={(e) => {
          e.currentTarget.setPointerCapture(e.pointerId)
          startY.current = e.clientY
          startValue.current = value
          moved.current = false
        }}
        onPointerMove={(e) => {
          if (startY.current === null) return
          const d = Math.round((startY.current - e.clientY) / 18)
          if (d !== 0) moved.current = true
          onChange(clampTo(startValue.current + d, count))
        }}
        onPointerUp={() => {
          if (!moved.current) onChange((value + 1) % count)
          startY.current = null
        }}
        onWheel={(e) => onChange(clampTo(value + (e.deltaY < 0 ? 1 : -1), count))}
        className="relative h-11 w-11 cursor-ns-resize touch-none select-none rounded-full outline-none"
      >
        {options.map((_, i) => (
          <span
            key={i}
            className="absolute left-1/2 top-1/2 w-px"
            style={{
              transformOrigin: '50% 22px',
              transform: `translate(-50%, -22px) rotate(${deg(i)}deg)`,
              background: i === value ? 'var(--curio-accent)' : 'var(--curio-muted)',
              height: i === value ? 6 : 4,
            }}
          />
        ))}
        <span
          className="absolute inset-[7px] rounded-full border shadow-[inset_0_-2px_4px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.12)]"
          style={{
            background: 'var(--curio-surface)',
            borderColor: 'var(--curio-border)',
            transform: `rotate(${deg(value)}deg)`,
            transition: 'transform 320ms cubic-bezier(.34,1.56,.64,1)',
          }}
        >
          <span className="absolute left-1/2 top-[3px] h-[9px] w-[2px] -translate-x-1/2 rounded-full" style={{ background: 'var(--curio-accent)' }} />
        </span>
      </div>
      <span className="text-xs" style={{ color: 'var(--curio-muted)' }}>
        {options[value]?.label}
      </span>
    </div>
  )
}

'use client'

import { useRef, useState } from 'react'
import type { ThemeOption } from './types'

export type SliderProps = {
  options: ThemeOption[]
  value: number
  onChange: (index: number) => void
  /** accessible name */
  label?: string
}

export const clampTo = (n: number, count: number) => Math.max(0, Math.min(count - 1, n))

// arrow keys / home / end
export function sliderKeys(value: number, count: number, onChange: (i: number) => void) {
  return (e: React.KeyboardEvent) => {
    const next =
      e.key === 'ArrowRight' || e.key === 'ArrowUp'
        ? value + 1
        : e.key === 'ArrowLeft' || e.key === 'ArrowDown'
          ? value - 1
          : e.key === 'Home'
            ? 0
            : e.key === 'End'
              ? count - 1
              : null
    if (next === null) return
    e.preventDefault()
    onChange(clampTo(next, count))
  }
}

export function sliderAria({ options, value, label = 'Theme' }: SliderProps) {
  return {
    role: 'slider' as const,
    tabIndex: 0,
    'aria-label': label,
    'aria-valuemin': 0,
    'aria-valuemax': options.length - 1,
    'aria-valuenow': value,
    'aria-valuetext': options[value]?.label,
  }
}

// drag along x; reports the nearest step and how far past either end you pulled
export function useTrackDrag(width: number, count: number, onStep: (i: number) => void) {
  const ref = useRef<HTMLDivElement>(null)
  const [dragging, setDragging] = useState(false)
  const [overshoot, setOvershoot] = useState(0)

  const update = (clientX: number) => {
    const rect = ref.current!.getBoundingClientRect()
    const x = clientX - rect.left
    setOvershoot(x < 0 ? x : x > width ? x - width : 0)
    onStep(clampTo(Math.round((x / width) * (count - 1)), count))
  }
  const stop = () => {
    setDragging(false)
    setOvershoot(0)
  }
  return {
    ref,
    dragging,
    overshoot,
    handlers: {
      onPointerDown: (e: React.PointerEvent) => {
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
        setDragging(true)
        update(e.clientX)
      },
      onPointerMove: (e: React.PointerEvent) => dragging && update(e.clientX),
      onPointerUp: stop,
      onPointerCancel: stop,
    },
  }
}