@kolkrabbi/kol-component 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/hooks/colorMath.js

@@ -0,0 +1,214 @@
+/**
+ * colorMath — HSL/hex conversion + harmony generation for the KOL color
+ * pickers (SpectrumControls, PaletteHarmonyWheel).
+ *
+ * Plain functions, not a hook — it lives in src/hooks/ because that is the
+ * taxonomy's only non-component folder (same rationale as cssVar.js).
+ *
+ * Two harmony paths:
+ *   - Deterministic — `harmonyColors(hue, harmony, {saturation, lightness})`
+ *     / `generateHarmony(baseHex, harmony)`: role-offset hues off a base,
+ *     no randomness, so dragging the harmony wheel is smooth + repeatable.
+ *   - Seeded/jittered — `seedHarmony(baseHex, mode)`: slot 0 = the base,
+ *     slots 1–5 derived via a mode with small random jitter, so consecutive
+ *     "randomize" clicks produce related-but-different variants around a seed.
+ */
+
+/* ── HSL / hex conversion ─────────────────────────────────────────────── */
+
+/** '#RRGGBB' → { h: 0–360, s: 0–100, l: 0–100 }. */
+export function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0, s = 0
+  const l = (max + min) / 2
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    h *= 60
+  }
+  return { h, s: s * 100, l: l * 100 }
+}
+
+/** (h: 0–360, s: 0–100, l: 0–100) → uppercase '#RRGGBB'. */
+export function hslToHex(h, s, l) {
+  h = normHue(h)
+  s = Math.max(0, Math.min(100, s)) / 100
+  l = Math.max(0, Math.min(100, l)) / 100
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0, g = 0, b = 0
+  if      (h <  60) { r = c; g = x; b = 0 }
+  else if (h < 120) { r = x; g = c; b = 0 }
+  else if (h < 180) { r = 0; g = c; b = x }
+  else if (h < 240) { r = 0; g = x; b = c }
+  else if (h < 300) { r = x; g = 0; b = c }
+  else              { r = c; g = 0; b = x }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
+}
+
+/** RGB components (0–255) → uppercase '#RRGGBB'. Shared with the eyedropper. */
+export function rgbToHex(r, g, b) {
+  return '#' + [r, g, b]
+    .map((n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()
+}
+
+/** Wrap any hue into [0, 360). */
+export const normHue = (h) => ((h % 360) + 360) % 360
+
+/* ── Harmony schemes ──────────────────────────────────────────────────── */
+
+/**
+ * Hue offsets for the five palette roles (Primary / Secondary / Light /
+ * Dark / Accent) relative to the base hue. The wheel draws a satellite
+ * marker per unique offset; the generators emit one color per role.
+ */
+export const HARMONIES = [
+  { id: 'analogous',     label: 'Analogous',           roleOffsets: [0, -30, -15, 15, 30] },
+  { id: 'complementary', label: 'Complementary',       roleOffsets: [0, 0, 0, 180, 180] },
+  { id: 'split',         label: 'Split complementary', roleOffsets: [0, 150, 210, 0, 150] },
+  { id: 'triadic',       label: 'Triadic',             roleOffsets: [0, 120, 240, 0, 120] },
+  { id: 'tetradic',      label: 'Tetradic',            roleOffsets: [0, 90, 180, 270, 0] },
+]
+
+/** Resolve a harmony id string OR a harmony object to the object. */
+export const harmonyById = (harmony) => {
+  if (harmony && typeof harmony === 'object') return harmony
+  return HARMONIES.find((h) => h.id === harmony) ?? HARMONIES[0]
+}
+
+/**
+ * Deterministic role colors for a harmony, driven by a hue + fixed S/L.
+ * Preserves saturation/lightness across roles (only hue rotates), so the
+ * output tracks the wheel's satellite markers exactly.
+ *
+ * @param {number} hue      base hue, 0–360
+ * @param {string|object} harmony  harmony id or object
+ * @param {{saturation?: number, lightness?: number}} opts  base S/L (0–100)
+ * @returns {string[]} one '#RRGGBB' per role offset
+ */
+export function harmonyColors(hue, harmony, { saturation = 100, lightness = 50 } = {}) {
+  const { roleOffsets } = harmonyById(harmony)
+  return roleOffsets.map((off) => hslToHex(normHue(hue + off), saturation, lightness))
+}
+
+/**
+ * Deterministic role colors derived from a base hex (S/L taken from the hex).
+ * Convenience wrapper over `harmonyColors` for callers holding a color, not
+ * a hue.
+ */
+export function generateHarmony(baseHex, harmony) {
+  const { h, s, l } = hexToHsl(baseHex)
+  return harmonyColors(h, harmony, { saturation: s, lightness: l })
+}
+
+/* ── Seeded (jittered) modes ──────────────────────────────────────────── */
+
+const jitter = (range) => (Math.random() - 0.5) * 2 * range
+
+/**
+ * Seed-based generators — slot 0 = the base, slots 1–5 derived via the mode.
+ * Each call jitters parameters so repeated "randomize" produces visibly
+ * different but harmonically-related variants around the same seed.
+ */
+const SEED_MODES = {
+  random: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + Math.random() * 360), s, l),
+      hslToHex(normHue(h + Math.random() * 360), s, l),
+      hslToHex(h, s, Math.max(10, l - 25 + jitter(10))),
+      hslToHex(h, s, Math.min(90, l + 25 + jitter(10))),
+      hslToHex(h, s * (0.4 + Math.random() * 0.4), l),
+    ]
+  },
+
+  monochromatic: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    const j = 8
+    return [
+      base,
+      hslToHex(h, s, Math.max(10, l - 30 + jitter(j))),
+      hslToHex(h, s, Math.max(20, l - 15 + jitter(j))),
+      hslToHex(h, s, Math.min(85, l + 15 + jitter(j))),
+      hslToHex(h, s, Math.min(95, l + 30 + jitter(j))),
+      hslToHex(h, s, Math.min(98, l + 45 + jitter(j))),
+    ]
+  },
+
+  analogous: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h - 30 + jitter(8)), s, l),
+      hslToHex(normHue(h - 15 + jitter(8)), s, l),
+      hslToHex(normHue(h + 15 + jitter(8)), s, l),
+      hslToHex(normHue(h + 30 + jitter(8)), s, l),
+      hslToHex(normHue(h + 45 + jitter(8)), s, l),
+    ]
+  },
+
+  complementary: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(h, s, Math.max(15, l - 25 + jitter(8))),
+      hslToHex(h, s, Math.min(85, l + 25 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, l),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.max(15, l - 15 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.min(85, l + 15 + jitter(8))),
+    ]
+  },
+
+  triadic: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + 120 + jitter(10)), s, l),
+      hslToHex(normHue(h + 240 + jitter(10)), s, l),
+      hslToHex(h, s, Math.min(85, l + 20 + jitter(8))),
+      hslToHex(normHue(h + 120 + jitter(10)), s, Math.max(15, l - 20 + jitter(8))),
+      hslToHex(normHue(h + 240 + jitter(10)), s, Math.min(85, l + 20 + jitter(8))),
+    ]
+  },
+
+  doubleComplementary: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + 90 + jitter(10)), s, l),
+      hslToHex(normHue(h + 180 + jitter(10)), s, l),
+      hslToHex(normHue(h + 270 + jitter(10)), s, l),
+      hslToHex(h, s, Math.min(85, l + 20 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.max(15, l - 20 + jitter(8))),
+    ]
+  },
+}
+
+/** The available seed-mode ids (for a consumer's mode selector). */
+export const SEED_MODE_IDS = Object.keys(SEED_MODES)
+
+/**
+ * Generate a jittered 6-color palette from a seed hex.
+ *
+ * @param {string} baseHex  the seed color, occupies slot 0
+ * @param {string} mode     one of SEED_MODE_IDS (falls back to 'random')
+ * @returns {string[]} six '#RRGGBB' values
+ */
+export function seedHarmony(baseHex, mode = 'random') {
+  const gen = SEED_MODES[mode] ?? SEED_MODES.random
+  return gen(baseHex)
+}

package/src/hooks/useEyedropper.js

@@ -0,0 +1,124 @@
+/**
+ * useEyedropper — cross-browser color sampling.
+ *
+ * Primary path is the native `window.EyeDropper` API (Chromium): one call,
+ * samples any pixel on screen, returns an sRGB hex. Where it is unavailable
+ * (Firefox, Safari) the hook falls back to an injected `fallback` sampler —
+ * e.g. `pickFromCanvasElement`, which samples a pixel from a <canvas> the
+ * consumer renders. The DS stays decoupled: it never reaches into an app's
+ * canvas/scene — the consumer supplies the fallback.
+ *
+ * Pairs with the EyedropPick affordance in SwatchControls: gate the button on
+ * `supported`, wire the button's `onPick` to `pick`.
+ *
+ *   const { supported, pick } = useEyedropper({ fallback })
+ *   // supported → render the eyedropper button
+ *   const hex = await pick()   // '#RRGGBB' or null (cancelled / unavailable)
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { rgbToHex } from './colorMath.js'
+
+/* Native support probe — read at call time so it is correct even before the
+ * post-mount state (below) has settled. */
+function hasNativeEyeDropper() {
+  return typeof window !== 'undefined' && 'EyeDropper' in window
+}
+
+/**
+ * Generic canvas-region sampler — the reusable core of a canvas eyedropper.
+ * Sets a crosshair cursor on `canvas`, awaits one pointer press on it, reads
+ * the pixel under the cursor via getImageData, and resolves the hex. Escape,
+ * a press outside the canvas bounds, or an aborted `signal` resolve to null.
+ *
+ * Backing-store aware: scales client coords by canvas.width/height ÷ CSS box,
+ * so a HiDPI or CSS-scaled canvas still samples the right pixel.
+ *
+ * @param {HTMLCanvasElement} canvas  the canvas to sample from
+ * @param {{signal?: AbortSignal}} [opts]
+ * @returns {Promise<string|null>} uppercase '#RRGGBB' or null
+ */
+export async function pickFromCanvasElement(canvas, { signal } = {}) {
+  if (!canvas || typeof canvas.getContext !== 'function') return null
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (!ctx) return null
+  if (signal?.aborted) return null
+
+  const prevCursor = canvas.style.cursor
+  canvas.style.cursor = 'crosshair'
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      canvas.removeEventListener('pointerdown', onDown, true)
+      document.removeEventListener('keydown', onKey, true)
+      signal?.removeEventListener('abort', onAbort)
+      canvas.style.cursor = prevCursor
+    }
+
+    const onDown = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const rect = canvas.getBoundingClientRect()
+      const sx = rect.width  ? canvas.width  / rect.width  : 1
+      const sy = rect.height ? canvas.height / rect.height : 1
+      const vx = Math.floor((e.clientX - rect.left) * sx)
+      const vy = Math.floor((e.clientY - rect.top)  * sy)
+      if (vx < 0 || vy < 0 || vx >= canvas.width || vy >= canvas.height) {
+        cleanup(); resolve(null); return
+      }
+      let data
+      try { data = ctx.getImageData(vx, vy, 1, 1).data }
+      catch { cleanup(); resolve(null); return }   /* tainted canvas */
+      cleanup()
+      resolve(rgbToHex(data[0], data[1], data[2]))
+    }
+
+    const onKey = (e) => {
+      if (e.key === 'Escape') { e.preventDefault(); cleanup(); resolve(null) }
+    }
+
+    const onAbort = () => { cleanup(); resolve(null) }
+
+    /* Capture phase so we beat the consumer's own canvas handlers. */
+    canvas.addEventListener('pointerdown', onDown, true)
+    document.addEventListener('keydown', onKey, true)
+    signal?.addEventListener('abort', onAbort)
+  })
+}
+
+/**
+ * @param {{fallback?: (opts?: {signal?: AbortSignal}) => Promise<string|null>}} [options]
+ *   fallback — sampler used when the native EyeDropper API is absent. Return
+ *   a hex or null. Without a fallback, unsupported browsers report
+ *   `supported: false` and `pick` resolves null.
+ * @returns {{supported: boolean, nativeSupported: boolean,
+ *            pick: (opts?: {signal?: AbortSignal}) => Promise<string|null>}}
+ */
+export function useEyedropper({ fallback } = {}) {
+  /* Resolved after mount so SSR / first paint stays stable (starts false,
+   * flips true only where the native API exists). */
+  const [nativeSupported, setNativeSupported] = useState(false)
+  useEffect(() => { setNativeSupported(hasNativeEyeDropper()) }, [])
+
+  const fallbackRef = useRef(fallback)
+  fallbackRef.current = fallback
+
+  const supported = nativeSupported || !!fallback
+
+  const pick = useCallback(async ({ signal } = {}) => {
+    if (hasNativeEyeDropper()) {
+      try {
+        const res = await new window.EyeDropper().open(signal ? { signal } : undefined)
+        return res?.sRGBHex ? res.sRGBHex.toUpperCase() : null
+      } catch {
+        return null   /* user cancelled (Escape) rejects the promise */
+      }
+    }
+    if (fallbackRef.current) return (await fallbackRef.current({ signal })) ?? null
+    return null
+  }, [])
+
+  return useMemo(
+    () => ({ supported, nativeSupported, pick }),
+    [supported, nativeSupported, pick],
+  )
+}

package/src/index.js

@@ -76,6 +76,7 @@ export { default as MediaRow } from './molecules/MediaRow.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
+export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
 export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
@@ -123,4 +124,12 @@ export { default as useReveal } from './hooks/useReveal.js'
 export { default as useScrollSpy } from './hooks/useScrollSpy.js'
 export { default as useTilt } from './hooks/useTilt.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
+export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'
 export { resolveCssVar, resolveCssColor, isLight } from './hooks/cssVar.js'
+
+// color math (support module — HSL/hex conversion + harmony generation)
+export {
+  hexToHsl, hslToHex, rgbToHex, normHue,
+  HARMONIES, harmonyById, harmonyColors, generateHarmony,
+  SEED_MODE_IDS, seedHarmony,
+} from './hooks/colorMath.js'

package/src/molecules/PaletteHarmonyWheel.jsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef } from 'react'
+import { HARMONIES, harmonyById, harmonyColors, normHue } from '../hooks/colorMath.js'
+
+/* taxonomy-ok: a pure-canvas hue + harmony picker in the SpectrumControls
+ * color-picker family. It nests no KOL component — its only import is the
+ * colorMath support module in hooks/ — but belongs beside its siblings
+ * SpectrumControls / SwatchControls, not down in atoms. */
+
+/*
+ * PaletteHarmonyWheel — a hue ring with a draggable base-hue handle and
+ * satellite markers at the active harmony's scheme hues. Dragging (or the
+ * arrow keys) rotates the base hue; every change emits the full set of
+ * harmony colors so the caller never re-derives them.
+ *
+ * The scheme table is DATA-INJECTED (`harmonies`, defaulting to the shared
+ * HARMONIES); saturation/lightness of the generated colors are injected too,
+ * so this stays a pure hue picker — the caller owns S/L.
+ *
+ * Controlled on `hue`; `onChange({ hue, colors })` fires on press, drag, and
+ * arrow keys. `colors` is one hex per role offset of the active harmony
+ * (see colorMath.harmonyColors), matching the satellite markers 1:1.
+ *
+ * The ring hues, marker outlines and handle halo are literal color math
+ * (hsl / #FFFFFF / rgba) on purpose — a spectrum is not themeable, and the
+ * markers sit on fully-saturated ring hues, not on the surface (same
+ * rationale as SpectrumControls). No token belongs here.
+ *
+ * @param {number}        size        px, square (default 248)
+ * @param {number}        hue         controlled base hue, 0–360
+ * @param {string|object} harmony     active harmony id or object (default 'analogous')
+ * @param {number}        saturation  base saturation for emitted colors, 0–100 (default 100)
+ * @param {number}        lightness   base lightness for emitted colors, 0–100 (default 50)
+ * @param {Array}         harmonies   injectable scheme table (default HARMONIES)
+ * @param {Function}      onChange    ({ hue, colors }) => void
+ */
+
+/* Marker outline — white for contrast against the fully-saturated ring hues
+ * (theme-independent: the wheel's colours, not the surface, sit behind it). */
+const MARKER_STROKE = '#FFFFFF'
+
+export default function PaletteHarmonyWheel({
+  size = 248,
+  hue,
+  harmony = 'analogous',
+  saturation = 100,
+  lightness = 50,
+  harmonies = HARMONIES,
+  onChange,
+}) {
+  const canvasRef   = useRef(null)
+  const draggingRef = useRef(false)
+  const emitRef     = useRef(null)
+
+  const active = harmonyById(
+    typeof harmony === 'string'
+      ? (harmonies.find((h) => h.id === harmony) ?? harmonies[0])
+      : harmony,
+  )
+
+  /* Emit next hue + its harmony colors. Held in a ref so the pointer/key
+   * handlers stay stable while always seeing the latest props. */
+  emitRef.current = (nextHue) => {
+    const h = normHue(nextHue)
+    onChange?.({ hue: h, colors: harmonyColors(h, active, { saturation, lightness }) })
+  }
+
+  const outerR = size / 2 - 8
+  const innerR = outerR - 22
+  const midR   = (outerR + innerR) / 2
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const dpr = window.devicePixelRatio || 1
+    canvas.width  = size * dpr
+    canvas.height = size * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, size, size)
+    const cx = size / 2
+    const cy = size / 2
+
+    /* Angle mapping: hue 0 at 12 o'clock, clockwise. */
+    const angleFor = (h) => ((h - 90) * Math.PI) / 180
+
+    /* Hue ring — 360 thin annulus wedges (1.5° overlap hides seams). */
+    for (let a = 0; a < 360; a++) {
+      const a0 = angleFor(a)
+      const a1 = angleFor(a + 1.5)
+      ctx.beginPath()
+      ctx.arc(cx, cy, outerR, a0, a1)
+      ctx.arc(cx, cy, innerR, a1, a0, true)
+      ctx.closePath()
+      ctx.fillStyle = `hsl(${a}, 100%, 50%)`
+      ctx.fill()
+    }
+
+    const baseHue = normHue(hue)
+    const offsets = [...new Set((active?.roleOffsets ?? [0]).map(normHue))]
+
+    /* Spokes + satellite markers at the scheme hues. */
+    for (const off of offsets) {
+      const h = normHue(baseHue + off)
+      const a = angleFor(h)
+      ctx.beginPath()
+      ctx.moveTo(cx, cy)
+      ctx.lineTo(cx + Math.cos(a) * innerR, cy + Math.sin(a) * innerR)
+      ctx.strokeStyle = 'rgba(128, 128, 128, 0.4)'
+      ctx.lineWidth = 1
+      ctx.stroke()
+      if (off === 0) continue /* base hue gets the big handle below */
+      const x = cx + Math.cos(a) * midR
+      const y = cy + Math.sin(a) * midR
+      ctx.beginPath()
+      ctx.arc(x, y, 5, 0, Math.PI * 2)
+      ctx.fillStyle = `hsl(${h}, 100%, 50%)`
+      ctx.fill()
+      ctx.strokeStyle = MARKER_STROKE
+      ctx.lineWidth = 1.5
+      ctx.stroke()
+    }
+
+    /* Base-hue handle. */
+    const ba = angleFor(baseHue)
+    const bx = cx + Math.cos(ba) * midR
+    const by = cy + Math.sin(ba) * midR
+    ctx.beginPath()
+    ctx.arc(bx, by, 9, 0, Math.PI * 2)
+    ctx.fillStyle = `hsl(${baseHue}, 100%, 50%)`
+    ctx.fill()
+    ctx.strokeStyle = MARKER_STROKE
+    ctx.lineWidth = 2
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.arc(bx, by, 10.5, 0, Math.PI * 2)
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.35)'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }, [size, hue, active, outerR, innerR, midR])
+
+  const pointFromEvent = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect()
+    const dx = e.clientX - rect.left - rect.width / 2
+    const dy = e.clientY - rect.top - rect.height / 2
+    return { dist: Math.hypot(dx, dy), hue: normHue((Math.atan2(dy, dx) * 180) / Math.PI + 90) }
+  }
+
+  const onPointerDown = (e) => {
+    const { dist, hue: h } = pointFromEvent(e)
+    if (dist < innerR - 14 || dist > outerR + 10) return
+    draggingRef.current = true
+    e.currentTarget.setPointerCapture(e.pointerId)
+    emitRef.current?.(h)
+  }
+
+  const onPointerMove = (e) => {
+    if (!draggingRef.current) return
+    emitRef.current?.(pointFromEvent(e).hue)
+  }
+
+  const endDrag = () => { draggingRef.current = false }
+
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? 15 : 3
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue + step))
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue - step))
+    }
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="slider"
+      aria-label="Base hue"
+      aria-valuemin={0}
+      aria-valuemax={359}
+      aria-valuenow={Math.round(normHue(hue))}
+      tabIndex={0}
+      className="cursor-pointer touch-none"
+      style={{ width: size, height: size }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onKeyDown={onKeyDown}
+    />
+  )
+}