reka-ui 2.8.0 → 2.9.0

package/src/shared/color/channel.ts

@@ -0,0 +1,424 @@
+import type { ChannelRange, Color, ColorChannel, ColorSpace, HSBColor, HSLColor, RGBColor } from './types'
+import { convertToHsb, convertToHsl, convertToRgb } from './convert'
+
+/**
+ * Gets the range (min, max, step) for a color channel.
+ */
+export function getChannelRange(channel: ColorChannel): ChannelRange {
+  switch (channel) {
+    case 'hue':
+      return { min: 0, max: 360, step: 1 }
+    case 'saturation':
+    case 'lightness':
+    case 'brightness':
+    case 'alpha':
+      return { min: 0, max: 100, step: 1 }
+    case 'red':
+    case 'green':
+    case 'blue':
+      return { min: 0, max: 255, step: 1 }
+    default:
+      throw new Error(`Unknown channel: ${channel}`)
+  }
+}
+
+/**
+ * Gets the display name for a channel.
+ */
+export function getChannelName(channel: ColorChannel): string {
+  const names: Record<ColorChannel, string> = {
+    red: 'Red',
+    green: 'Green',
+    blue: 'Blue',
+    hue: 'Hue',
+    saturation: 'Saturation',
+    lightness: 'Lightness',
+    brightness: 'Brightness',
+    alpha: 'Alpha',
+  }
+  return names[channel] ?? channel
+}
+
+/**
+ * Gets the value of a specific channel from a color.
+ * Avoids conversion if the color is already in the target color space.
+ */
+export function getChannelValue(color: Color, channel: ColorChannel): number {
+  switch (channel) {
+    case 'red':
+      return color.space === 'rgb' ? (color as RGBColor).r : convertToRgb(color).r
+    case 'green':
+      return color.space === 'rgb' ? (color as RGBColor).g : convertToRgb(color).g
+    case 'blue':
+      return color.space === 'rgb' ? (color as RGBColor).b : convertToRgb(color).b
+    case 'hue':
+      return color.space === 'hsl' ? (color as HSLColor).h : convertToHsl(color).h
+    case 'saturation':
+      if (color.space === 'hsl')
+        return (color as HSLColor).s
+      if (color.space === 'hsb')
+        return (color as HSBColor).s
+      return convertToHsl(color).s
+    case 'lightness':
+      return color.space === 'hsl' ? (color as HSLColor).l : convertToHsl(color).l
+    case 'brightness':
+      return color.space === 'hsb' ? (color as HSBColor).b : convertToHsb(color).b
+    case 'alpha':
+      return color.alpha * 100
+    default:
+      throw new Error(`Unknown channel: ${channel}`)
+  }
+}
+
+/**
+ * Sets a channel value on a color, returning a new color.
+ * The returned color maintains the original color space.
+ */
+export function setChannelValue(color: Color, channel: ColorChannel, value: number): Color {
+  const range = getChannelRange(channel)
+  const clamped = Math.max(range.min, Math.min(range.max, value))
+
+  // Alpha is handled the same across all spaces
+  if (channel === 'alpha') {
+    return { ...color, alpha: clamped / 100 } as Color
+  }
+
+  // For RGB channels, convert to RGB, set, then convert back
+  if (channel === 'red' || channel === 'green' || channel === 'blue') {
+    const rgb = convertToRgb(color)
+    const newRgb: RGBColor = {
+      ...rgb,
+      [channel === 'red' ? 'r' : channel === 'green' ? 'g' : 'b']: clamped,
+    }
+    return convertFromRgb(newRgb, color.space)
+  }
+
+  // For HSL channels
+  if (channel === 'hue' || channel === 'lightness') {
+    const hsl = convertToHsl(color)
+    const newHsl: HSLColor = {
+      ...hsl,
+      [channel === 'hue' ? 'h' : 'l']: clamped,
+    }
+    return convertFromHsl(newHsl, color.space)
+  }
+
+  // For saturation, respect the color's native space (HSB vs HSL)
+  if (channel === 'saturation') {
+    if (color.space === 'hsb') {
+      const hsb = convertToHsb(color)
+      const newHsb: HSBColor = { ...hsb, s: clamped }
+      return convertFromHsb(newHsb, color.space)
+    }
+    const hsl = convertToHsl(color)
+    const newHsl: HSLColor = { ...hsl, s: clamped }
+    return convertFromHsl(newHsl, color.space)
+  }
+
+  // For brightness (HSB-only)
+  if (channel === 'brightness') {
+    const hsb = convertToHsb(color)
+    const newHsb: HSBColor = { ...hsb, b: clamped }
+    return convertFromHsb(newHsb, color.space)
+  }
+
+  throw new Error(`Unknown channel: ${channel}`)
+}
+
+/**
+ * Sets multiple channel values at once, preserving exact values.
+ * Useful when updating 2D color areas where both channels change simultaneously.
+ */
+export function setChannelValues(
+  color: Color,
+  channels: Array<{ channel: ColorChannel, value: number }>,
+): Color {
+  if (channels.length === 0)
+    return color
+  if (channels.length === 1) {
+    return setChannelValue(color, channels[0].channel, channels[0].value)
+  }
+
+  // Determine the target color space based on all channels
+  const channelNames = channels.map(c => c.channel)
+  const hasBrightness = channelNames.includes('brightness')
+  const hasLightness = channelNames.includes('lightness')
+  const hasRgb = channelNames.some(c => c === 'red' || c === 'green' || c === 'blue')
+
+  let workingColor: Color
+
+  if (hasRgb) {
+    workingColor = convertToRgb(color)
+  }
+  else if (hasBrightness) {
+    // HSB mode
+    workingColor = convertToHsb(color)
+  }
+  else if (hasLightness) {
+    // HSL mode
+    workingColor = convertToHsl(color)
+  }
+  else {
+    // Default to HSL for hue/saturation
+    workingColor = convertToHsl(color)
+  }
+
+  // Apply all channel values
+  for (const { channel, value } of channels) {
+    const range = getChannelRange(channel)
+    const clamped = Math.max(range.min, Math.min(range.max, value))
+
+    if (channel === 'alpha') {
+      workingColor = { ...workingColor, alpha: clamped / 100 }
+    }
+    else if (workingColor.space === 'rgb' && (channel === 'red' || channel === 'green' || channel === 'blue')) {
+      const key = channel === 'red' ? 'r' : channel === 'green' ? 'g' : 'b'
+      workingColor = { ...workingColor, [key]: clamped } as RGBColor
+    }
+    else if (workingColor.space === 'hsl' && (channel === 'hue' || channel === 'saturation' || channel === 'lightness')) {
+      const key = channel === 'hue' ? 'h' : channel === 'saturation' ? 's' : 'l'
+      workingColor = { ...workingColor, [key]: clamped } as HSLColor
+    }
+    else if (workingColor.space === 'hsb' && (channel === 'hue' || channel === 'saturation' || channel === 'brightness')) {
+      const key = channel === 'hue' ? 'h' : channel === 'saturation' ? 's' : 'b'
+      workingColor = { ...workingColor, [key]: clamped } as HSBColor
+    }
+  }
+
+  // For color areas, keep the working color space to preserve precision
+  // Only convert back if we're in single-channel mode (channels.length === 1)
+  // In multi-channel mode (like 2D color area), the working color space is more appropriate
+  if (channels.length === 1 && workingColor.space !== color.space) {
+    if (color.space === 'rgb')
+      return convertToRgb(workingColor)
+    if (color.space === 'hsl')
+      return convertToHsl(workingColor)
+    if (color.space === 'hsb')
+      return convertToHsb(workingColor)
+  }
+
+  return workingColor
+}
+
+/**
+ * Converts an RGB color to a specific color space.
+ */
+function convertFromRgb(rgb: RGBColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsl') {
+    return rgbToHsl(rgb)
+  }
+  if (targetSpace === 'hsb') {
+    return rgbToHsb(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+/**
+ * Converts an HSL color to a specific color space.
+ */
+function convertFromHsl(hsl: HSLColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'hsl') {
+    return hsl
+  }
+  const rgb = hslToRgb(hsl)
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsb') {
+    return rgbToHsb(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+/**
+ * Converts an HSB color to a specific color space.
+ */
+function convertFromHsb(hsb: HSBColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'hsb') {
+    return hsb
+  }
+  const rgb = hsbToRgb(hsb)
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsl') {
+    return rgbToHsl(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+// Conversion helpers (duplicated from convert.ts to avoid circular deps)
+function rgbToHsl(rgb: RGBColor): HSLColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let 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 /= 6
+  }
+
+  return {
+    space: 'hsl',
+    h: h * 360,
+    s: s * 100,
+    l: l * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+function hslToRgb(hsl: HSLColor): RGBColor {
+  const h = hsl.h / 360
+  const s = hsl.s / 100
+  const l = hsl.l / 100
+
+  let r: number, g: number, b: number
+
+  if (s === 0) {
+    r = g = b = l
+  }
+  else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0)
+        t += 1
+      if (t > 1)
+        t -= 1
+      if (t < 1 / 6)
+        return p + (q - p) * 6 * t
+      if (t < 1 / 2)
+        return q
+      if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsl.alpha,
+  }
+}
+
+function rgbToHsb(rgb: RGBColor): HSBColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+
+  let h = 0
+  const s = max === 0 ? 0 : d / max
+  const v = max
+
+  if (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 /= 6
+  }
+
+  return {
+    space: 'hsb',
+    h: h * 360,
+    s: s * 100,
+    b: v * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+function hsbToRgb(hsb: HSBColor): RGBColor {
+  const h = hsb.h / 360
+  const s = hsb.s / 100
+  const v = hsb.b / 100
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsb.alpha,
+  }
+}

package/src/shared/color/convert.ts

@@ -0,0 +1,293 @@
+import type { Color, ColorFormat, HSBColor, HSLColor, RGBColor } from './types'
+
+/**
+ * Converts a Color object to a string representation.
+ */
+export function colorToString(color: Color, format: ColorFormat = 'hex'): string {
+  switch (format) {
+    case 'hex':
+      return colorToHex(color)
+    case 'rgb':
+      return colorToRgb(color)
+    case 'hsl':
+      return colorToHsl(color)
+    case 'hsb':
+      return colorToHsb(color)
+    default:
+      throw new Error(`Unknown format: ${format}`)
+  }
+}
+
+/**
+ * Converts any color to hex string.
+ */
+export function colorToHex(color: Color): string {
+  const rgb = color.space === 'rgb' ? color : convertToRgb(color)
+  const toHex = (n: number) => Math.round(n).toString(16).padStart(2, '0')
+
+  if (rgb.alpha < 1) {
+    const alpha = Math.round(rgb.alpha * 255).toString(16).padStart(2, '0')
+    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}${alpha}`
+  }
+
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
+}
+
+/**
+ * Converts any color to rgb() string.
+ */
+export function colorToRgb(color: Color): string {
+  const rgb = color.space === 'rgb' ? color : convertToRgb(color)
+  const { r, g, b, alpha } = rgb
+
+  if (alpha < 1) {
+    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`
+  }
+  return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`
+}
+
+/**
+ * Converts any color to hsl() string.
+ */
+export function colorToHsl(color: Color): string {
+  const hsl = color.space === 'hsl' ? color : convertToHsl(color)
+  const { h, s, l, alpha } = hsl
+
+  if (alpha < 1) {
+    return `hsla(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%, ${alpha})`
+  }
+  return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`
+}
+
+/**
+ * Converts any color to hsb() string.
+ */
+export function colorToHsb(color: Color): string {
+  const hsb = color.space === 'hsb' ? color : convertToHsb(color)
+  const { h, s, b, alpha } = hsb
+
+  if (alpha < 1) {
+    return `hsba(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(b)}%, ${alpha})`
+  }
+  return `hsb(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(b)}%)`
+}
+
+/**
+ * Converts any color to RGB color space.
+ */
+export function convertToRgb(color: Color): RGBColor {
+  if (color.space === 'rgb') {
+    return color
+  }
+  if (color.space === 'hsl') {
+    return hslToRgb(color)
+  }
+  if (color.space === 'hsb') {
+    return hsbToRgb(color)
+  }
+  throw new Error(`Unknown color space: ${(color as Color).space}`)
+}
+
+/**
+ * Converts any color to HSL color space.
+ */
+export function convertToHsl(color: Color): HSLColor {
+  if (color.space === 'hsl') {
+    return color
+  }
+  return rgbToHsl(convertToRgb(color))
+}
+
+/**
+ * Converts any color to HSB color space.
+ */
+export function convertToHsb(color: Color): HSBColor {
+  if (color.space === 'hsb') {
+    return color
+  }
+  return rgbToHsb(convertToRgb(color))
+}
+
+/**
+ * Converts RGB to HSL.
+ */
+function rgbToHsl(rgb: RGBColor): HSLColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let 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 /= 6
+  }
+
+  return {
+    space: 'hsl',
+    h: h * 360,
+    s: s * 100,
+    l: l * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+/**
+ * Converts HSL to RGB.
+ */
+function hslToRgb(hsl: HSLColor): RGBColor {
+  const h = hsl.h / 360
+  const s = hsl.s / 100
+  const l = hsl.l / 100
+
+  let r: number, g: number, b: number
+
+  if (s === 0) {
+    r = g = b = l
+  }
+  else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0)
+        t += 1
+      if (t > 1)
+        t -= 1
+      if (t < 1 / 6)
+        return p + (q - p) * 6 * t
+      if (t < 1 / 2)
+        return q
+      if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsl.alpha,
+  }
+}
+
+/**
+ * Converts RGB to HSB.
+ */
+function rgbToHsb(rgb: RGBColor): HSBColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+
+  let h = 0
+  const s = max === 0 ? 0 : d / max
+  const v = max
+
+  if (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 /= 6
+  }
+
+  return {
+    space: 'hsb',
+    h: h * 360,
+    s: s * 100,
+    b: v * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+/**
+ * Converts HSB to RGB.
+ */
+function hsbToRgb(hsb: HSBColor): RGBColor {
+  const h = hsb.h / 360
+  const s = hsb.s / 100
+  const v = hsb.b / 100
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsb.alpha,
+  }
+}