@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAChart.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ChartProps, ChartDataPoint } from "../../types"
 import chartThemeDefault, { createChartTheme } from "../../themes/chart.theme"
 
-const chartTheme = chartThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chartTheme = uiConfig.colors ? createChartTheme() : chartThemeDefault
 const chart = scv(chartTheme)
 
 const {
@@ -20,9 +23,6 @@ const {
 
 const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
 
-// Unique instance ID to prevent CSS collisions between multiple charts
-const instanceId = Math.random().toString(36).substring(2, 8)
-
 // Compute derived values on the server so we don't do heavy JS on the client
 const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
 const total = data.reduce((sum, d) => sum + d.value, 0)
@@ -40,21 +40,6 @@ const palette = [
 const getColor = (item: ChartDataPoint, index: number) =>
   item.color ?? palette[index % palette.length]
 
-// Strip angle brackets from color values to prevent XSS via </style> breakout
-const cssColor = (item: ChartDataPoint, index: number) =>
-  getColor(item, index).replace(/[<>]/g, "")
-
-// Build per-item CSS rules to avoid inline styles (CSP compliance)
-const itemCssRules: string[] = []
-data.forEach((item, i) => {
-  if (type === "bar") {
-    const pct = max > 0 ? (item.value / max) * 100 : 0
-    itemCssRules.push(`.rlc-${instanceId}-b-${i}{height:${pct}%;background:${cssColor(item, i)};min-height:4px;width:100%}`)
-  }
-  itemCssRules.push(`.rlc-${instanceId}-s-${i}{background:${cssColor(item, i)}}`)
-})
-const chartItemStyles = itemCssRules.join("")
-
 // Build pie/donut SVG path segments
 const PIE_R = 80
 const PIE_CX = 100
@@ -99,17 +84,17 @@ const areaPath = linePoints.length > 0
     ` L ${linePoints[linePoints.length - 1]!.x} ${LINE_H - LINE_PAD}` +
     ` L ${linePoints[0]!.x} ${LINE_H - LINE_PAD} Z`
   : ""
+const id = `chart-${Math.random().toString(36).substring(2, 9)}`
 ---
 
-<style define:vars={{ chartH: `${height}px`, chartInnerH: `${height - 60}px` }}>
-  [data-slot="root"] { min-height: var(--chart-h); }
-  [data-slot="container"] { height: var(--chart-inner-h); gap: 6px; align-items: flex-end; }
-  .rla-chart-line-wrap { height: var(--chart-inner-h); }
-  .rla-chart-pie-wrap { height: var(--chart-inner-h); }
-</style>
-<style set:html={chartItemStyles}></style>
+<style is:inline set:html={`
+  .${id} { min-height: ${height}px; }
+  .${id} [data-slot="container"] { height: ${height - 60}px; gap: 6px; align-items: flex-end; }
+  .${id} .rla-chart-line-wrap { height: ${height - 60}px; }
+  .${id} .rla-chart-pie-wrap { height: ${height - 60}px; }
+`} />
 
-<div class={classes.root} data-slot="root" {...rest}>
+<div class:list={[classes.root, id]} data-slot="root" {...rest}>
   {title && <div class={classes.title} data-slot="title">{title}</div>}
 
   {/* Bar Chart */}
@@ -122,10 +107,11 @@ const areaPath = linePoints.length > 0
             <span class="text-[10px] text-muted-foreground font-mono opacity-0 group-hover:opacity-100 transition-opacity">
               {item.value}
             </span>
-            <div
-              class={`${classes.bar} rlc-${instanceId}-b-${i}`}
-              title={`${item.label}: ${item.value}`}
-            />
+            <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
+              <svg class="h-full w-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">
+                <rect x="0" y={100 - pct} width="20" height={pct} fill={getColor(item, i)} rx="2" />
+              </svg>
+            </div>
             <span class={classes.axis}>{item.label}</span>
           </div>
         )
@@ -211,9 +197,9 @@ const areaPath = linePoints.length > 0
       <div class="flex flex-col gap-1.5">
         {data.map((item, i) => (
           <div class="flex items-center gap-2 text-xs text-muted-foreground">
-            <span
-              class={`size-3 rounded-sm shrink-0 rlc-${instanceId}-s-${i}`}
-            />
+            <svg class="size-3 shrink-0" viewBox="0 0 10 10">
+              <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
+            </svg>
             <span>{item.label}</span>
             <span class="ml-1 font-mono text-foreground">{item.value}</span>
           </div>
@@ -230,7 +216,9 @@ const areaPath = linePoints.length > 0
     <div class={classes.legend} data-slot="legend">
       {data.map((item, i) => (
         <div class="flex items-center gap-1.5">
-          <span class={`size-2.5 rounded-full shrink-0 rlc-${instanceId}-s-${i}`} />
+          <svg class="size-2.5 shrink-0" viewBox="0 0 10 10">
+            <circle cx="5" cy="5" r="5" fill={getColor(item, i)} />
+          </svg>
           <span>{item.label}</span>
         </div>
       ))}

package/src/components/astro/RLAChip.astro

@@ -6,7 +6,7 @@ import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const uiConfig = getUIConfig()
-const chipTheme = uiConfig.colors ? createChipTheme() : chipThemeDefault
+const chipTheme = uiConfig.colors ? createChipTheme(uiConfig.colors) : chipThemeDefault
 
 const chip = scv(chipTheme)
 
@@ -22,12 +22,18 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ChipProps
+} = Astro.props as ChipProps & {
+  color?: string
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
+  inset?: boolean
+  standalone?: boolean
+}
 
 const classes = resolveClasses(chip, {
-  color,
-  size,
-  position,
+  color: color as "neutral",
+  size: size as "md",
+  position: position as "top-right",
   inset,
   standalone,
   theme

package/src/components/astro/RLACollapsible.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { CollapsibleProps } from "../../types"
 import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
 
-const collapsibleTheme = collapsibleThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const collapsibleTheme = uiConfig.colors ? createCollapsibleTheme() : collapsibleThemeDefault
 const collapsible = scv(collapsibleTheme)
 
 const {

package/src/components/astro/RLAColorArea.astro

@@ -0,0 +1,432 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import colorAreaThemeDefault, { createColorAreaTheme } from "../../themes/color-area.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const colorAreaTheme = uiConfig.colors ? createColorAreaTheme(uiConfig.colors) : colorAreaThemeDefault
+const colorArea = scv(colorAreaTheme)
+
+export interface Props {
+  colorSpace?: "hsl" | "rgb" | "hsb"
+  defaultValue?: string
+  disabled?: boolean
+  modelValue?: string
+  name?: string
+  required?: boolean
+  xChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  xName?: string
+  yChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  yName?: string
+  color?: any
+  theme?: any
+  ui?: any
+  class?: string
+}
+
+const {
+  colorSpace = "hsl",
+  defaultValue = "#ff0000",
+  disabled = false,
+  modelValue,
+  name,
+  required,
+  xChannel = "saturation",
+  xName,
+  yChannel = "lightness",
+  yName,
+  color = "primary",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as Props
+
+const classes = resolveClasses(colorArea, {
+  color,
+  theme
+}, useUi("colorArea", uiProp), className)
+
+const initialValue = modelValue || defaultValue
+---
+<rla-color-area
+  data-color-space={colorSpace}
+  data-value={initialValue}
+  data-x-channel={xChannel}
+  data-y-channel={yChannel}
+  data-disabled={disabled ? "true" : "false"}
+  {...rest}
+>
+  <div class={classes.root} data-slot="root">
+    <div class={classes.area} data-slot="area">
+      <div class={classes.thumb} data-slot="thumb" role="slider" aria-label="Color Area Thumb"></div>
+    </div>
+    {name && <input type="hidden" name={name} value={initialValue} data-main-input />}
+    {xName && <input type="hidden" name={xName} data-x-input />}
+    {yName && <input type="hidden" name={yName} data-y-input />}
+  </div>
+</rla-color-area>
+
+<script>
+  import {
+    hexToRgb,
+    rgbToHex,
+    rgbToHsl,
+    hslToRgb,
+    rgbToHsb,
+    hsbToRgb,
+    getChannelRange,
+    clamp
+  } from "../../utils/color"
+
+  if (typeof HTMLElement !== 'undefined') {
+    class RLAColorArea extends HTMLElement {
+      private cleanup: (() => void) | null = null
+      private colorSpace: string = "hsl"
+      private xChannel: string = "saturation"
+      private yChannel: string = "lightness"
+      private value: string = "#ff0000"
+
+      // Internal channel state to prevent hue loss when dragging to grayscale regions (black/white/gray)
+      private hue: number = 0
+      private saturation: number = 100
+      private lightness: number = 50
+      private brightness: number = 100
+      private red: number = 255
+      private green: number = 0
+      private blue: number = 0
+
+      connectedCallback() {
+        this.style.display = 'contents'
+        this.colorSpace = this.getAttribute("data-color-space") || "hsl"
+        this.xChannel = this.getAttribute("data-x-channel") || "saturation"
+        this.yChannel = this.getAttribute("data-y-channel") || "lightness"
+        this.value = this.getAttribute("data-value") || "#ff0000"
+
+        const root = this.querySelector('[data-slot="root"]') as HTMLElement
+        const area = this.querySelector('[data-slot="area"]') as HTMLElement
+        const thumb = this.querySelector('[data-slot="thumb"]') as HTMLElement
+
+        if (!area || !thumb) return
+
+        const updateChannelsFromValue = (hex: string) => {
+          const rgb = hexToRgb(hex)
+          const hsl = rgbToHsl(rgb[0], rgb[1], rgb[2])
+          const hsb = rgbToHsb(rgb[0], rgb[1], rgb[2])
+
+          const max = Math.max(rgb[0], rgb[1], rgb[2])
+          const min = Math.min(rgb[0], rgb[1], rgb[2])
+          if (max !== min) {
+            this.hue = hsl[0]
+          }
+          this.saturation = hsl[1]
+          this.lightness = hsl[2]
+          this.brightness = hsb[2]
+          this.red = rgb[0]
+          this.green = rgb[1]
+          this.blue = rgb[2]
+        }
+
+        updateChannelsFromValue(this.value)
+
+        const updateUI = () => {
+          const disabled = this.getAttribute("data-disabled") === "true"
+          if (disabled) {
+            root.classList.add("opacity-50", "pointer-events-none")
+          } else {
+            root.classList.remove("opacity-50", "pointer-events-none")
+          }
+
+          const hue = this.hue
+
+          // Gradient backgrounds
+          if (this.colorSpace === "hsl" && this.xChannel === "saturation" && this.yChannel === "lightness") {
+            area.style.background = `
+              linear-gradient(to top, #000 0%, transparent 50%, #fff 100%),
+              linear-gradient(to right, #808080 0%, transparent 100%),
+              hsl(${hue}, 100%, 50%)
+            `
+          } else if (this.colorSpace === "hsb" && this.xChannel === "saturation" && this.yChannel === "brightness") {
+            area.style.background = `
+              linear-gradient(to top, #000 0%, transparent 100%),
+              linear-gradient(to right, #fff 0%, transparent 100%),
+              hsl(${hue}, 100%, 50%)
+            `
+          } else {
+            area.style.background = `hsl(${hue}, 100%, 50%)`
+          }
+          area.style.backgroundRepeat = "no-repeat"
+          area.style.backgroundSize = "100% 100%"
+
+          // Set thumb background color
+          thumb.style.backgroundColor = this.value
+
+          // Calculate Thumb Position
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          let xVal = 0
+          let yVal = 0
+
+          if (this.colorSpace === "hsl") {
+            const indexX = ["hue", "saturation", "lightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "lightness"].indexOf(this.yChannel)
+            const hsl = [this.hue, this.saturation, this.lightness]
+            xVal = indexX !== -1 ? hsl[indexX]! : 0
+            yVal = indexY !== -1 ? hsl[indexY]! : 0
+          } else if (this.colorSpace === "hsb") {
+            const indexX = ["hue", "saturation", "brightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "brightness"].indexOf(this.yChannel)
+            const hsb = [this.hue, this.saturation, this.brightness]
+            xVal = indexX !== -1 ? hsb[indexX]! : 0
+            yVal = indexY !== -1 ? hsb[indexY]! : 0
+          } else if (this.colorSpace === "rgb") {
+            const indexX = ["red", "green", "blue"].indexOf(this.xChannel)
+            const indexY = ["red", "green", "blue"].indexOf(this.yChannel)
+            const rgb = [this.red, this.green, this.blue]
+            xVal = indexX !== -1 ? rgb[indexX]! : 0
+            yVal = indexY !== -1 ? rgb[indexY]! : 0
+          }
+
+          const pctX = ((xVal - xRange.min) / (xRange.max - xRange.min)) * 100
+          const pctY = 100 - (((yVal - yRange.min) / (yRange.max - yRange.min)) * 100)
+
+          thumb.style.left = `${pctX}%`
+          thumb.style.top = `${pctY}%`
+
+          // Update inputs
+          const mainInput = this.querySelector("[data-main-input]") as HTMLInputElement
+          if (mainInput) mainInput.value = this.value
+
+          const xInput = this.querySelector("[data-x-input]") as HTMLInputElement
+          if (xInput) xInput.value = xVal.toString()
+
+          const yInput = this.querySelector("[data-y-input]") as HTMLInputElement
+          if (yInput) yInput.value = yVal.toString()
+        }
+
+        updateUI()
+
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.type === "attributes") {
+              if (mutation.attributeName === "data-value") {
+                const newVal = this.getAttribute("data-value") || "#ff0000"
+                if (newVal !== this.value) {
+                  this.value = newVal
+                  updateChannelsFromValue(this.value)
+                  updateUI()
+                }
+              }
+              if (mutation.attributeName === "data-disabled") {
+                updateUI()
+              }
+            }
+          })
+        })
+        observer.observe(this, { attributes: true })
+
+        let isDragging = false
+
+        const handlePointer = (e: PointerEvent) => {
+          if (this.getAttribute("data-disabled") === "true") return
+          const rect = area.getBoundingClientRect()
+          const x = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+          const y = 1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)
+
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          const newX = Math.round(xRange.min + x * (xRange.max - xRange.min))
+          const newY = Math.round(yRange.min + y * (yRange.max - yRange.min))
+
+          let newRgb: [number, number, number] = [this.red, this.green, this.blue]
+
+          if (this.colorSpace === "hsl") {
+            if (this.xChannel === "saturation") this.saturation = newX
+            if (this.yChannel === "lightness") this.lightness = newY
+            if (this.xChannel === "lightness") this.lightness = newX
+            if (this.yChannel === "saturation") this.saturation = newY
+            if (this.xChannel === "hue") this.hue = newX
+            if (this.yChannel === "hue") this.hue = newY
+            newRgb = hslToRgb(this.hue, this.saturation, this.lightness)
+          } else if (this.colorSpace === "hsb") {
+            if (this.xChannel === "saturation") this.saturation = newX
+            if (this.yChannel === "brightness") this.brightness = newY
+            if (this.xChannel === "brightness") this.brightness = newX
+            if (this.yChannel === "saturation") this.saturation = newY
+            if (this.xChannel === "hue") this.hue = newX
+            if (this.yChannel === "hue") this.hue = newY
+            newRgb = hsbToRgb(this.hue, this.saturation, this.brightness)
+          } else if (this.colorSpace === "rgb") {
+            if (this.xChannel === "red") this.red = newX
+            if (this.yChannel === "green") this.green = newY
+            if (this.xChannel === "green") this.green = newX
+            if (this.yChannel === "red") this.red = newY
+            if (this.xChannel === "blue") this.blue = newX
+            if (this.yChannel === "blue") this.blue = newY
+            newRgb = [this.red, this.green, this.blue]
+          }
+
+          const newValue = rgbToHex(newRgb[0], newRgb[1], newRgb[2])
+          const valueChanged = newValue !== this.value
+          if (valueChanged) {
+            this.value = newValue
+            this.setAttribute("data-value", newValue)
+          }
+          
+          updateUI()
+
+          if (valueChanged) {
+            this.dispatchEvent(new CustomEvent("change", { detail: newValue }))
+            this.dispatchEvent(new CustomEvent("update:modelValue", { detail: newValue }))
+
+            const rootId = this.getAttribute("id")
+            if (rootId) {
+              document.querySelectorAll(`[data-color-link="${rootId}"]`).forEach((el) => {
+                el.setAttribute("data-value", newValue)
+              })
+            }
+          }
+        }
+
+        const onPointerDown = (e: PointerEvent) => {
+          isDragging = true
+          area.setPointerCapture(e.pointerId)
+          handlePointer(e)
+        }
+
+        const onPointerMove = (e: PointerEvent) => {
+          if (!isDragging) return
+          handlePointer(e)
+        }
+
+        const onPointerUp = (e: PointerEvent) => {
+          if (!isDragging) return
+          isDragging = false
+          area.releasePointerCapture(e.pointerId)
+          this.dispatchEvent(new CustomEvent("changeEnd", { detail: this.value }))
+        }
+
+        area.addEventListener("pointerdown", onPointerDown)
+        area.addEventListener("pointermove", onPointerMove)
+        area.addEventListener("pointerup", onPointerUp)
+
+        const onKeyDown = (e: KeyboardEvent) => {
+          if (this.getAttribute("data-disabled") === "true") return
+          const isShift = e.shiftKey
+          const stepSize = isShift ? 10 : 1
+
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          let xVal = 0
+          let yVal = 0
+
+          if (this.colorSpace === "hsl") {
+            const indexX = ["hue", "saturation", "lightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "lightness"].indexOf(this.yChannel)
+            const hsl = [this.hue, this.saturation, this.lightness]
+            xVal = indexX !== -1 ? hsl[indexX]! : 0
+            yVal = indexY !== -1 ? hsl[indexY]! : 0
+          } else if (this.colorSpace === "hsb") {
+            const indexX = ["hue", "saturation", "brightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "brightness"].indexOf(this.yChannel)
+            const hsb = [this.hue, this.saturation, this.brightness]
+            xVal = indexX !== -1 ? hsb[indexX]! : 0
+            yVal = indexY !== -1 ? hsb[indexY]! : 0
+          } else if (this.colorSpace === "rgb") {
+            const indexX = ["red", "green", "blue"].indexOf(this.xChannel)
+            const indexY = ["red", "green", "blue"].indexOf(this.yChannel)
+            const rgb = [this.red, this.green, this.blue]
+            xVal = indexX !== -1 ? rgb[indexX]! : 0
+            yVal = indexY !== -1 ? rgb[indexY]! : 0
+          }
+
+          let handled = false
+          if (e.key === "ArrowLeft") {
+            xVal = clamp(xVal - stepSize, xRange.min, xRange.max)
+            handled = true
+          } else if (e.key === "ArrowRight") {
+            xVal = clamp(xVal + stepSize, xRange.min, xRange.max)
+            handled = true
+          } else if (e.key === "ArrowUp") {
+            yVal = clamp(yVal + stepSize, yRange.min, yRange.max)
+            handled = true
+          } else if (e.key === "ArrowDown") {
+            yVal = clamp(yVal - stepSize, yRange.min, yRange.max)
+            handled = true
+          } else if (e.key === "Home") {
+            xVal = xRange.min
+            handled = true
+          } else if (e.key === "End") {
+            xVal = xRange.max
+            handled = true
+          }
+
+          if (handled) {
+            e.preventDefault()
+            let newRgb: [number, number, number] = [this.red, this.green, this.blue]
+
+            if (this.colorSpace === "hsl") {
+              if (this.xChannel === "saturation") this.saturation = xVal
+              if (this.yChannel === "lightness") this.lightness = yVal
+              if (this.xChannel === "lightness") this.lightness = xVal
+              if (this.yChannel === "saturation") this.saturation = yVal
+              if (this.xChannel === "hue") this.hue = xVal
+              if (this.yChannel === "hue") this.hue = yVal
+              newRgb = hslToRgb(this.hue, this.saturation, this.lightness)
+            } else if (this.colorSpace === "hsb") {
+              if (this.xChannel === "saturation") this.saturation = xVal
+              if (this.yChannel === "brightness") this.brightness = yVal
+              if (this.xChannel === "brightness") this.brightness = xVal
+              if (this.yChannel === "saturation") this.saturation = yVal
+              if (this.xChannel === "hue") this.hue = xVal
+              if (this.yChannel === "hue") this.hue = yVal
+              newRgb = hsbToRgb(this.hue, this.saturation, this.brightness)
+            } else if (this.colorSpace === "rgb") {
+              if (this.xChannel === "red") this.red = xVal
+              if (this.yChannel === "green") this.green = yVal
+              if (this.xChannel === "green") this.green = xVal
+              if (this.yChannel === "red") this.red = yVal
+              if (this.xChannel === "blue") this.blue = xVal
+              if (this.yChannel === "blue") this.blue = yVal
+              newRgb = [this.red, this.green, this.blue]
+            }
+
+            const newValue = rgbToHex(newRgb[0], newRgb[1], newRgb[2])
+            if (newValue !== this.value) {
+              this.value = newValue
+              this.setAttribute("data-value", newValue)
+              updateUI()
+              this.dispatchEvent(new CustomEvent("change", { detail: newValue }))
+            }
+          }
+        }
+
+        thumb.setAttribute("tabindex", "0")
+        thumb.addEventListener("keydown", onKeyDown)
+
+        this.cleanup = () => {
+          area.removeEventListener("pointerdown", onPointerDown)
+          area.removeEventListener("pointermove", onPointerMove)
+          area.removeEventListener("pointerup", onPointerUp)
+          thumb.removeEventListener("keydown", onKeyDown)
+          observer.disconnect()
+        }
+      }
+
+      disconnectedCallback() {
+        if (this.cleanup) {
+          this.cleanup()
+          this.cleanup = null
+        }
+      }
+    }
+
+    if (!customElements.get("rla-color-area")) {
+      customElements.define("rla-color-area", RLAColorArea)
+    }
+  }
+</script>