@rimelight/ui 0.0.31 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/astro/RLA3dHover.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ThreeDHoverProps } from "../../types"
+import 3dHoverThemeDefault from "../../themes/3d-hover.theme"
+
+const 3dHover = scv(3dHoverThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ThreeDHoverProps
+
+const classes = resolveClasses(3dHover, {}, useUi("3dHover", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAAlert.astro

@@ -15,6 +15,7 @@ const {
   title,
   description,
   icon,
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -26,6 +27,7 @@ const classes = resolveClasses(alert, {
   variant,
   color,
   hasIcon: isIcon,
+  theme
 }, useUi("alert", uiProp), className)
 ---
 <div

package/src/components/astro/RLAApp.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AppProps } from "../../types"
+import appThemeDefault from "../../themes/app.theme"
+
+const app = scv(appThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AppProps
+
+const classes = resolveClasses(app, {}, useUi("app", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAAspectRatio.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { AspectRatioProps } from "../../types"
-import aspectRatioTheme from "../../themes/aspectRatio.theme"
+import aspectRatioTheme from "../../themes/aspect-ratio.theme"
 
 const aspectRatio = scv(aspectRatioTheme)
 

package/src/components/astro/RLAAudio.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AudioProps } from "../../types"
+import audioThemeDefault from "../../themes/audio.theme"
+
+const audio = scv(audioThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AudioProps
+
+const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAAvatarGroup.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { AvatarGroupProps } from "../../types"
-import avatarGroupTheme from "../../themes/avatarGroup.theme"
+import avatarGroupTheme from "../../themes/avatar-group.theme"
 
 const avatarGroup = scv(avatarGroupTheme)
 

package/src/components/astro/RLABadge.astro

@@ -14,6 +14,7 @@ const {
   color = "primary",
   size = "md",
   shape = "pill",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -23,7 +24,8 @@ const classes = resolveClasses(badge, {
   variant,
   color,
   size,
-  shape
+  shape,
+  theme
 }, useUi("badge", uiProp), className)
 ---
 <span class={classes.root} data-slot="root" {...rest}>

package/src/components/astro/RLABanner.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BannerProps } from "../../types"
+import bannerThemeDefault from "../../themes/banner.theme"
+
+const banner = scv(bannerThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BannerProps
+
+const classes = resolveClasses(banner, {}, useUi("banner", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLABrowserMockup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BrowserMockupProps } from "../../types"
+import browserMockupThemeDefault from "../../themes/browser-mockup.theme"
+
+const browserMockup = scv(browserMockupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BrowserMockupProps
+
+const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAButton.astro

@@ -22,6 +22,7 @@ const {
   square = false,
   block = false,
   active = false,
+  theme,
   activeColor,
   activeVariant,
   ui: uiProp,
@@ -52,7 +53,8 @@ const classes = resolveClasses(button, {
   leading: isLeading,
   trailing: isTrailing,
   loading,
-  active
+  active,
+  theme
 }, useUi("button", uiProp), className);
 
 const Tag = href ? "a" : "button";

package/src/components/astro/RLACalendar.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CalendarProps } from "../../types"
+import calendarThemeDefault from "../../themes/calendar.theme"
+
+const calendar = scv(calendarThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CalendarProps
+
+const classes = resolveClasses(calendar, {}, useUi("calendar", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAChangelog.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChangelogProps } from "../../types"
+import changelogThemeDefault from "../../themes/changelog.theme"
+
+const changelog = scv(changelogThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChangelogProps
+
+const classes = resolveClasses(changelog, {}, useUi("changelog", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAChart.astro

@@ -20,6 +20,9 @@ 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)
@@ -37,6 +40,21 @@ 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
@@ -83,12 +101,20 @@ const areaPath = linePoints.length > 0
   : ""
 ---
 
-<div class={classes.root} data-slot="root" style={`min-height:${height}px`} {...rest}>
+<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>
+
+<div class={classes.root} data-slot="root" {...rest}>
   {title && <div class={classes.title} data-slot="title">{title}</div>}
 
   {/* Bar Chart */}
   {type === "bar" && (
-    <div class={classes.container} data-slot="container" style={`height:${height - 60}px;gap:6px;align-items:flex-end`}>
+    <div class={classes.container} data-slot="container">
       {data.map((item, i) => {
         const pct = max > 0 ? (item.value / max) * 100 : 0
         return (
@@ -97,8 +123,7 @@ const areaPath = linePoints.length > 0
               {item.value}
             </span>
             <div
-              class={classes.bar}
-              style={`height:${pct}%;background:${getColor(item, i)};min-height:4px;width:100%;`}
+              class={`${classes.bar} rlc-${instanceId}-b-${i}`}
               title={`${item.label}: ${item.value}`}
             />
             <span class={classes.axis}>{item.label}</span>
@@ -110,7 +135,7 @@ const areaPath = linePoints.length > 0
 
   {/* Line / Area Chart */}
   {(type === "line" || type === "area") && (
-    <div class="relative w-full" style={`height:${height - 60}px`}>
+    <div class="relative w-full rla-chart-line-wrap">
       <svg
         class={classes.svg}
         viewBox={`0 0 ${LINE_W} ${LINE_H}`}
@@ -155,7 +180,7 @@ const areaPath = linePoints.length > 0
 
   {/* Pie / Donut Chart */}
   {(type === "pie" || type === "donut") && (
-    <div class="flex items-center gap-6 justify-center" style={`height:${height - 60}px`}>
+    <div class="flex items-center gap-6 justify-center rla-chart-pie-wrap">
       <svg
         viewBox="0 0 200 200"
         class="h-full w-auto max-h-48"
@@ -187,8 +212,7 @@ const areaPath = linePoints.length > 0
         {data.map((item, i) => (
           <div class="flex items-center gap-2 text-xs text-muted-foreground">
             <span
-              class="size-3 rounded-sm shrink-0"
-              style={`background:${getColor(item, i)}`}
+              class={`size-3 rounded-sm shrink-0 rlc-${instanceId}-s-${i}`}
             />
             <span>{item.label}</span>
             <span class="ml-1 font-mono text-foreground">{item.value}</span>
@@ -206,7 +230,7 @@ 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" style={`background:${getColor(item, i)}`} />
+          <span class={`size-2.5 rounded-full shrink-0 rlc-${instanceId}-s-${i}`} />
           <span>{item.label}</span>
         </div>
       ))}

package/src/components/astro/RLAChat.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatMessage.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatMessages.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatPalette.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatPrompt.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatPromptSubmit.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatReasoning.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatShimmer.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAChatTool.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLACheckbox.astro

@@ -17,6 +17,7 @@ const {
   label,
   color = "primary",
   size = "md",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -25,7 +26,8 @@ const {
 const classes = resolveClasses(checkbox, {
   color,
   size,
-  checked
+  checked,
+  theme
 }, useUi("checkbox", uiProp), className);
 ---
 <label class={classes.root} data-slot="root">

package/src/components/astro/RLAChip.astro

@@ -0,0 +1,20 @@
+---
+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>

package/src/components/astro/RLAColorPicker.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLACommandPalette.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLACompare.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CompareProps } from "../../types"
+import compareThemeDefault from "../../themes/compare.theme"
+
+const compare = scv(compareThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CompareProps
+
+const classes = resolveClasses(compare, {}, useUi("compare", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLAAlertDialog.astro → RLAConfirm.astro}

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { AlertDialogProps } from "../../types"
-import alertDialogTheme from "../../themes/alertDialog.theme"
+import alertDialogTheme from "../../themes/confirm.theme"
 import RLAButton from "./RLAButton.astro"
 
 const alertDialog = scv(alertDialogTheme)

package/src/components/astro/RLAContainer.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ContainerProps } from "../../types"
+import containerThemeDefault from "../../themes/container.theme"
+
+const container = scv(containerThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ContainerProps
+
+const classes = resolveClasses(container, {}, useUi("container", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAContextMenu.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ContextMenuProps } from "../../types"
+import contextMenuThemeDefault from "../../themes/context-menu.theme"
+
+const contextMenu = scv(contextMenuThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ContextMenuProps
+
+const classes = resolveClasses(contextMenu, {}, useUi("contextMenu", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>