@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAChart.astro

@@ -20,9 +20,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 +37,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 +81,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 +104,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 +194,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 +213,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/RLAChat.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatProps } from "../../types"
-import chatThemeDefault from "../../themes/chat.theme"
-
-const chat = scv(chatThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatProps
-
-const classes = resolveClasses(chat, {}, useUi("chat", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatProps } from "../../types"
+import chatThemeDefault, { createChatTheme } from "../../themes/chat.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatTheme = uiConfig.colors ? createChatTheme() : chatThemeDefault
+
+const chat = scv(chatTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatProps
+
+const classes = resolveClasses(chat, {}, useUi("chat", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatMessage.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatMessageProps } from "../../types"
-import chatMessageThemeDefault from "../../themes/chat-message.theme"
-
-const chatMessage = scv(chatMessageThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatMessageProps
-
-const classes = resolveClasses(chatMessage, {}, useUi("chatMessage", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatMessageProps } from "../../types"
+import chatMessageThemeDefault, { createChatMessageTheme } from "../../themes/chat-message.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatMessageTheme = uiConfig.colors ? createChatMessageTheme() : chatMessageThemeDefault
+
+const chatMessage = scv(chatMessageTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatMessageProps
+
+const classes = resolveClasses(chatMessage, {}, useUi("chatMessage", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatMessages.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatMessagesProps } from "../../types"
-import chatMessagesThemeDefault from "../../themes/chat-messages.theme"
-
-const chatMessages = scv(chatMessagesThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatMessagesProps
-
-const classes = resolveClasses(chatMessages, {}, useUi("chatMessages", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatMessagesProps } from "../../types"
+import chatMessagesThemeDefault, { createChatMessagesTheme } from "../../themes/chat-messages.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatMessagesTheme = uiConfig.colors ? createChatMessagesTheme() : chatMessagesThemeDefault
+
+const chatMessages = scv(chatMessagesTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatMessagesProps
+
+const classes = resolveClasses(chatMessages, {}, useUi("chatMessages", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatPalette.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatPaletteProps } from "../../types"
-import chatPaletteThemeDefault from "../../themes/chat-palette.theme"
-
-const chatPalette = scv(chatPaletteThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPaletteProps
-
-const classes = resolveClasses(chatPalette, {}, useUi("chatPalette", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPaletteProps } from "../../types"
+import chatPaletteThemeDefault, { createChatPaletteTheme } from "../../themes/chat-palette.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatPaletteTheme = uiConfig.colors ? createChatPaletteTheme() : chatPaletteThemeDefault
+
+const chatPalette = scv(chatPaletteTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPaletteProps
+
+const classes = resolveClasses(chatPalette, {}, useUi("chatPalette", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatPrompt.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatPromptProps } from "../../types"
-import chatPromptThemeDefault from "../../themes/chat-prompt.theme"
-
-const chatPrompt = scv(chatPromptThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPromptProps
-
-const classes = resolveClasses(chatPrompt, {}, useUi("chatPrompt", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptProps } from "../../types"
+import chatPromptThemeDefault, { createChatPromptTheme } from "../../themes/chat-prompt.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatPromptTheme = uiConfig.colors ? createChatPromptTheme() : chatPromptThemeDefault
+
+const chatPrompt = scv(chatPromptTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPromptProps
+
+const classes = resolveClasses(chatPrompt, {}, useUi("chatPrompt", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatPromptSubmit.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatPromptSubmitProps } from "../../types"
-import chatPromptSubmitThemeDefault from "../../themes/chat-prompt-submit.theme"
-
-const chatPromptSubmit = scv(chatPromptSubmitThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPromptSubmitProps
-
-const classes = resolveClasses(chatPromptSubmit, {}, useUi("chatPromptSubmit", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptSubmitProps } from "../../types"
+import chatPromptSubmitThemeDefault, { createChatPromptSubmitTheme } from "../../themes/chat-prompt-submit.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatPromptSubmitTheme = uiConfig.colors ? createChatPromptSubmitTheme() : chatPromptSubmitThemeDefault
+
+const chatPromptSubmit = scv(chatPromptSubmitTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPromptSubmitProps
+
+const classes = resolveClasses(chatPromptSubmit, {}, useUi("chatPromptSubmit", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatReasoning.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatReasoningProps } from "../../types"
-import chatReasoningThemeDefault from "../../themes/chat-reasoning.theme"
-
-const chatReasoning = scv(chatReasoningThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatReasoningProps
-
-const classes = resolveClasses(chatReasoning, {}, useUi("chatReasoning", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatReasoningProps } from "../../types"
+import chatReasoningThemeDefault, { createChatReasoningTheme } from "../../themes/chat-reasoning.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatReasoningTheme = uiConfig.colors ? createChatReasoningTheme() : chatReasoningThemeDefault
+
+const chatReasoning = scv(chatReasoningTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatReasoningProps
+
+const classes = resolveClasses(chatReasoning, {}, useUi("chatReasoning", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatShimmer.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatShimmerProps } from "../../types"
-import chatShimmerThemeDefault from "../../themes/chat-shimmer.theme"
-
-const chatShimmer = scv(chatShimmerThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatShimmerProps
-
-const classes = resolveClasses(chatShimmer, {}, useUi("chatShimmer", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatShimmerProps } from "../../types"
+import chatShimmerThemeDefault, { createChatShimmerTheme } from "../../themes/chat-shimmer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatShimmerTheme = uiConfig.colors ? createChatShimmerTheme() : chatShimmerThemeDefault
+
+const chatShimmer = scv(chatShimmerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatShimmerProps
+
+const classes = resolveClasses(chatShimmer, {}, useUi("chatShimmer", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChatTool.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatToolProps } from "../../types"
-import chatToolThemeDefault from "../../themes/chat-tool.theme"
-
-const chatTool = scv(chatToolThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatToolProps
-
-const classes = resolveClasses(chatTool, {}, useUi("chatTool", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatToolProps } from "../../types"
+import chatToolThemeDefault, { createChatToolTheme } from "../../themes/chat-tool.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatToolTheme = uiConfig.colors ? createChatToolTheme() : chatToolThemeDefault
+
+const chatTool = scv(chatToolTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatToolProps
+
+const classes = resolveClasses(chatTool, {}, useUi("chatTool", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAChip.astro

@@ -1,20 +1,51 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChipProps } from "../../types"
-import chipThemeDefault from "../../themes/chip.theme"
-
-const chip = scv(chipThemeDefault)
-
-const {
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChipProps
-
-const classes = resolveClasses(chip, { theme }, useUi("chip", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChipProps } from "../../types"
+import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chipTheme = uiConfig.colors ? createChipTheme() : chipThemeDefault
+
+const chip = scv(chipTheme)
+
+const {
+  text,
+  color = "primary",
+  size = "md",
+  position = "top-right",
+  inset = false,
+  standalone = false,
+  show = true,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChipProps
+
+const classes = resolveClasses(chip, {
+  color,
+  size,
+  position,
+  inset,
+  standalone,
+  theme
+}, useUi("chip", uiProp), className)
+---
+{standalone ? (
+  show && (
+    <span class={classes.base} data-slot="base">
+      <slot>{text}</slot>
+    </span>
+  )
+) : (
+  <div class={classes.root} data-slot="root" {...rest}>
+    <slot />
+    {show && (
+      <span class={classes.base} data-slot="base">
+        <slot name="content">{text}</slot>
+      </span>
+    )}
+  </div>
+)}

package/src/components/astro/RLAColorPicker.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ColorPickerProps } from "../../types"
-import colorPickerThemeDefault from "../../themes/color-picker.theme"
-
-const colorPicker = scv(colorPickerThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ColorPickerProps
-
-const classes = resolveClasses(colorPicker, {}, useUi("colorPicker", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ColorPickerProps } from "../../types"
+import colorPickerThemeDefault, { createColorPickerTheme } from "../../themes/color-picker.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const colorPickerTheme = uiConfig.colors ? createColorPickerTheme() : colorPickerThemeDefault
+
+const colorPicker = scv(colorPickerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ColorPickerProps
+
+const classes = resolveClasses(colorPicker, {}, useUi("colorPicker", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLACommandPalette.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CommandPaletteProps } from "../../types"
-import commandPaletteThemeDefault from "../../themes/command-palette.theme"
-
-const commandPalette = scv(commandPaletteThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CommandPaletteProps
-
-const classes = resolveClasses(commandPalette, {}, useUi("commandPalette", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CommandPaletteProps } from "../../types"
+import commandPaletteThemeDefault, { createCommandPaletteTheme } from "../../themes/command-palette.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const commandPaletteTheme = uiConfig.colors ? createCommandPaletteTheme() : commandPaletteThemeDefault
+
+const commandPalette = scv(commandPaletteTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CommandPaletteProps
+
+const classes = resolveClasses(commandPalette, {}, useUi("commandPalette", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>