@rimelight/ui 0.0.37 → 0.0.39

package/src/utils/resolveClasses.ts

@@ -1,16 +1,34 @@
 import { cx } from "css-variants"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+// Hoisted once at module load — getUIConfig() returns a static frozen object.
+const uiConfig = getUIConfig()
 
 export function resolveClasses<T extends (...args: never[]) => Record<string, string>>(
   themeFn: T,
   variants: Parameters<T>[0],
-  mergedUI: Record<string, string | undefined>,
+  mergedUI: Record<string, string | Function | undefined>,
   rootClass?: string
 ): Record<string, string> {
-  const resolved = themeFn(variants)
+  const isUnstyled = uiConfig?.unstyled === true
+
+  const resolved = isUnstyled ? {} : themeFn(variants)
   const result: Record<string, string> = {}
 
-  for (const [slot, value] of Object.entries(resolved)) {
-    result[slot] = cx(value, mergedUI[slot])
+  // Fill in slots from theme function or default to empty strings if unstyled
+  const slots = isUnstyled ? Object.keys(mergedUI) : Object.keys(resolved)
+  if (isUnstyled && rootClass && !slots.includes("root")) {
+    slots.push("root")
+  }
+
+  for (const slot of slots) {
+    const value = isUnstyled ? "" : (resolved[slot] ?? "")
+    const override = mergedUI[slot]
+    if (typeof override === "function") {
+      result[slot] = cx(override(value))
+    } else {
+      result[slot] = cx(value, override)
+    }
   }
 
   if (rootClass) {

package/src/utils/resolveTheme.ts

@@ -0,0 +1,13 @@
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+
+export function resolveTheme<T>(
+  themeDefault: T,
+  themeCreator?: (colors: readonly string[]) => T
+): T {
+  if (uiConfig.colors && themeCreator) {
+    return themeCreator(uiConfig.colors)
+  }
+  return themeDefault
+}

package/src/utils/shortcuts.ts

@@ -49,8 +49,8 @@ const macOS =
 const kbdKeysMap: Record<string, string> = {
   meta: macOS ? "⌘" : "Ctrl",
   command: macOS ? "⌘" : "Ctrl",
-  ctrl: macOS ? "Ctrl" : "Ctrl",
-  control: macOS ? "Ctrl" : "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
   alt: macOS ? "⌥" : "Alt",
   option: macOS ? "⌥" : "Alt",
   shift: macOS ? "⇧" : "Shift",
@@ -68,8 +68,7 @@ const kbdKeysMap: Record<string, string> = {
 
 // Convert a combination string (e.g. meta_alt_t) into platform-specific readable key symbol arrays
 export function formatShortcutKeys(keyStr: string): string[] {
-  const separator = keyStr.includes("-") ? "-" : "_"
-  const parts = keyStr.split(separator)
+  const parts = keyStr.split("_")
   return parts.map((part) => {
     const lower = part.toLowerCase()
     if (kbdKeysMap[lower] !== undefined) {
@@ -85,30 +84,25 @@ export function formatShortcutKeys(keyStr: string): string[] {
 // Reactive store containing all currently registered shortcuts on the page
 export const activeShortcutsStore = atom<RegisteredShortcut[]>([])
 
+const specialKeysMap: Record<string, string> = {
+  space: "Space",
+  enter: "Enter",
+  escape: "Escape",
+  tab: "Tab",
+  backspace: "Backspace",
+  delete: "Delete",
+  arrowup: "ArrowUp",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight"
+}
+
 // Simple key to code conversion for layout/translation independence under Alt
 function convertKeyToCode(key: string): string {
-  if (/^[a-z]$/i.test(key)) {
-    return `Key${key.toUpperCase()}`
-  }
-  if (/^\d$/.test(key)) {
-    return `Digit${key}`
-  }
-  if (/^f\d+$/i.test(key)) {
-    return key.toUpperCase()
-  }
-  const specialKeys: Record<string, string> = {
-    space: "Space",
-    enter: "Enter",
-    escape: "Escape",
-    tab: "Tab",
-    backspace: "Backspace",
-    delete: "Delete",
-    arrowup: "ArrowUp",
-    arrowdown: "ArrowDown",
-    arrowleft: "ArrowLeft",
-    arrowright: "ArrowRight"
-  }
-  return specialKeys[key.toLowerCase()] || key
+  if (/^[a-z]$/i.test(key)) return `Key${key.toUpperCase()}`
+  if (/^\d$/.test(key)) return `Digit${key}`
+  if (/^f\d+$/i.test(key)) return key.toUpperCase()
+  return specialKeysMap[key.toLowerCase()] || key
 }
 
 // Input tag checking
@@ -127,25 +121,19 @@ function isUsingInput(activeElement: Element | null): boolean | string {
   return false
 }
 
-export function defineShortcuts(
-  config: ShortcutsConfig,
-  options: ShortcutsOptions = {}
-): () => void {
-  if (typeof window === "undefined") {
-    return () => {}
-  }
+interface ParsedShortcuts {
+  shortcuts: Shortcut[]
+  registered: RegisteredShortcut[]
+}
 
-  const chainDelay = options.chainDelay ?? 800
-  const chainedInputs: string[] = []
-  let debounceTimer: any = null
+const parseCache = new WeakMap<ShortcutsConfig, ParsedShortcuts>()
 
-  const clearChainedInput = () => {
-    chainedInputs.length = 0
-  }
+function parseShortcutConfig(config: ShortcutsConfig): ParsedShortcuts {
+  const cached = parseCache.get(config)
+  if (cached) return cached
 
-  // Pre-parse the shortcuts configuration
-  const parsedShortcuts: Shortcut[] = Object.entries(config)
-    .map(([key, shortcutConfig]) => {
+  const shortcuts: Shortcut[] = Object.entries(config)
+    .map(([key, shortcutConfig]): Shortcut | null => {
       if (!shortcutConfig) return null
 
       let handler: Handler
@@ -179,33 +167,22 @@ export function defineShortcuts(
         shiftKey = parts.includes("shift")
         altKey = parts.includes("alt") || parts.includes("option")
 
-        // Normalize Cmd/Ctrl for non-macOS
         if (!macOS && metaKey && !ctrlKey) {
           metaKey = false
           ctrlKey = true
         }
       }
 
-      return {
-        key: baseKey,
-        handler,
-        chained,
-        ctrlKey,
-        metaKey,
-        shiftKey,
-        altKey,
-        usingInput
-      } as Shortcut
+      return { key: baseKey, handler, chained, ctrlKey, metaKey, shiftKey, altKey, usingInput }
     })
-    .filter((item): item is Shortcut => item != null)
+    .filter((item): item is Shortcut => item !== null)
 
-  // Register documented shortcuts to the store
-  const itemsToRegister: RegisteredShortcut[] = Object.entries(config).flatMap(
+  const registered: RegisteredShortcut[] = Object.entries(config).flatMap(
     ([key, shortcutConfig]) => {
       if (!shortcutConfig || typeof shortcutConfig !== "object") return []
 
       const { label, description, category, order } = shortcutConfig
-      if (!label && !description) return [] // only register documented shortcuts
+      if (!label && !description) return []
 
       const item: RegisteredShortcut = {
         id: `${key}-${Math.random().toString(36).slice(2, 7)}`,
@@ -219,6 +196,29 @@ export function defineShortcuts(
     }
   )
 
+  const result = { shortcuts, registered }
+  parseCache.set(config, result)
+  return result
+}
+
+export function defineShortcuts(
+  config: ShortcutsConfig,
+  options: ShortcutsOptions = {}
+): () => void {
+  if (typeof window === "undefined") {
+    return () => {}
+  }
+
+  const { shortcuts: parsedShortcuts, registered: itemsToRegister } = parseShortcutConfig(config)
+
+  const chainDelay = options.chainDelay ?? 800
+  const chainedInputs: string[] = []
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+  const clearChainedInput = () => {
+    chainedInputs.length = 0
+  }
+
   if (itemsToRegister.length > 0) {
     activeShortcutsStore.set([...activeShortcutsStore.get(), ...itemsToRegister])
   }

package/src/utils/toast.ts

@@ -1,5 +1,5 @@
 import { atom } from "nanostores"
-import type { ThemeColor } from "../types"
+import type { ThemeColor } from "../types/component"
 
 export interface Toast {
   id?: string | number
@@ -30,8 +30,7 @@ export function addToast(toast: Toast) {
 export function removeToast(id: string | number) {
   const currentToasts = toastsStore.get()
   const target = currentToasts.find((t) => t.id === id)
-  if (target && target.callback) {
-    target.callback()
-  }
+  if (!target) return
+  if (target.callback) target.callback()
   toastsStore.set(currentToasts.filter((t) => t.id !== id))
 }

package/src/utils/useUi.ts

@@ -1,19 +1,33 @@
 import { merge } from "./merge"
 import { getUIConfig } from "virtual:rimelight-ui"
-import type { DefaultUIConfig } from "../themes"
+
+const mergeCache = new WeakMap<object, Record<string, string | Function | undefined>>()
 
 export function useUi(
-  componentName: keyof DefaultUIConfig,
-  uiProp?: Record<string, string | undefined>
-): Record<string, string | undefined> {
+  componentName: string,
+  uiProp?: Record<string, string | Function | undefined>
+): Record<string, string | Function | undefined> {
   const globalConfig = getUIConfig()
-  const defaults = globalConfig[componentName] ?? {}
-  const merged = merge(uiProp ?? {}, defaults)
+  const defaults = globalConfig[componentName]
+
+  if (!defaults) return {}
+
+  if (!uiProp || Object.keys(uiProp).length === 0) {
+    return defaults
+  }
+
+  const cached = mergeCache.get(uiProp)
+  if (cached) return cached
+
+  const merged = merge(uiProp, defaults)
+  const result: Record<string, string | Function | undefined> = {}
+  for (const key of Object.keys(merged)) {
+    const value = merged[key]
+    if (typeof value === "string" || typeof value === "function") {
+      result[key] = value
+    }
+  }
 
-  return Object.fromEntries(
-    Object.entries(merged).map(([key, value]) => [
-      key,
-      typeof value === "string" ? value : undefined
-    ])
-  )
+  mergeCache.set(uiProp, result)
+  return result
 }

package/src/components/astro/RLA3dHover.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ThreeDHoverProps } from "../../types"
-import hover3dThemeDefault, { create3dHoverTheme } from "../../themes/3d-hover.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const hover3dTheme = uiConfig.colors ? create3dHoverTheme() : hover3dThemeDefault
-
-const hover3d = scv(hover3dTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ThreeDHoverProps
-
-const classes = resolveClasses(hover3d, {}, useUi("3dHover", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAAccordion.astro

@@ -1,94 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AccordionProps } from "../../types"
-import accordionThemeDefault, { createAccordionTheme } from "../../themes/accordion.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const accordionTheme = uiConfig.colors ? createAccordionTheme() : accordionThemeDefault
-const accordion = scv(accordionTheme)
-
-const {
-  items,
-  summary,
-  multiple = false,
-  trailingIcon = "i-lucide-chevron-down",
-  disabled = false,
-  name,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AccordionProps
-
-const classes = resolveClasses(accordion, {
-  disabled
-}, useUi("accordion", uiProp), className)
-
-// Generate a unique name for HTML details grouping if single-open mode (multiple=false) is active
-const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
----
-
-{items ? (
-  <div class={classes.root} data-slot="root" {...rest}>
-    {items.map((item) => {
-      const itemDisabled = disabled || item.disabled
-      const itemTrailingIcon = item.trailingIcon || trailingIcon
-      
-      return (
-        <details 
-          class={classes.item} 
-          data-slot="item" 
-          name={groupName}
-        >
-          <summary 
-            class={cx(classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none")} 
-            data-slot="trigger"
-          >
-            {item.icon && (
-              <span class={classes.leadingIcon} data-slot="leading-icon">
-                <span class={cx(item.icon)} aria-hidden="true" />
-              </span>
-            )}
-            
-            <span class={classes.label} data-slot="label">
-              {item.label}
-            </span>
-
-            {itemTrailingIcon && (
-              <span class={classes.trailingIcon} data-slot="trailing-icon">
-                <span class={cx(itemTrailingIcon)} aria-hidden="true" />
-              </span>
-            )}
-          </summary>
-
-          <div class={classes.content} data-slot="content">
-            <div class={classes.body} data-slot="body">
-              {item.content}
-            </div>
-          </div>
-        </details>
-      )
-    })}
-  </div>
-) : (
-  <details class:list={[classes.root, classes.item]} data-slot="root" name={name} {...rest}>
-    <summary 
-      class={cx(classes.trigger, disabled && "pointer-events-none opacity-50 select-none")} 
-      data-slot="trigger"
-    >
-      <span class={classes.label} data-slot="label">{summary}</span>
-      {trailingIcon && (
-        <span class={classes.trailingIcon} data-slot="trailing-icon">
-          <span class={cx(trailingIcon)} aria-hidden="true" />
-        </span>
-      )}
-    </summary>
-
-    <div class={classes.content} data-slot="content">
-      <div class={classes.body} data-slot="body">
-        <slot />
-      </div>
-    </div>
-  </details>
-)}

package/src/components/astro/RLAApp.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AppProps } from "../../types"
-import appThemeDefault, { createAppTheme } from "../../themes/app.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const appTheme = uiConfig.colors ? createAppTheme() : appThemeDefault
-
-const app = scv(appTheme)
-
-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

@@ -1,27 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AspectRatioProps } from "../../types"
-import aspectRatioThemeDefault, { createAspectRatioTheme } from "../../themes/aspect-ratio.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const aspectRatioTheme = uiConfig.colors ? createAspectRatioTheme() : aspectRatioThemeDefault
-
-const aspectRatio = scv(aspectRatioTheme)
-
-const {
-  ratio = 1,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AspectRatioProps
-
-const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
----
-<div class:list={[classes.root]} data-slot="root" {...rest}>
-  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>

package/src/components/astro/RLAAudio.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AudioProps } from "../../types"
-import audioThemeDefault, { createAudioTheme } from "../../themes/audio.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const audioTheme = uiConfig.colors ? createAudioTheme() : audioThemeDefault
-
-const audio = scv(audioTheme)
-
-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/RLAAvatar.astro

@@ -1,135 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarProps } from "../../types"
-import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
-
-const avatar = scv(avatarTheme)
-
-const {
-  src,
-  alt = "",
-  fallback,
-  initials,
-  title,
-  subtitle,
-  label,
-  size = "md",
-  badge = false,
-  badgeColor = "success",
-  badgePosition = "bottom-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarProps & {
-  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  badgeColor?: string
-}
-
-const classes = resolveClasses(avatar, {
-  size,
-  color: (Astro.props.color || "neutral") as "neutral",
-  badgePosition: badgePosition as "bottom-right"
-}, useUi("avatar", uiProp), className)
-
-const avatarFallback = fallback || initials
-const hasTextLayout = !!(title || subtitle)
----
-{hasTextLayout ? (
-  <div class="flex items-center gap-3" data-slot="profile-wrapper">
-    <span
-      class={classes.root}
-      data-slot="root"
-      aria-label={label || title}
-      role={label || title ? "img" : undefined}
-      {...rest}
-    >
-      <slot>
-        {src ? (
-          <img
-            src={src}
-            alt={alt}
-            class={classes.image}
-            data-slot="image"
-          />
-        ) : (
-          <span class={classes.fallback} data-slot="fallback">
-            <slot name="fallback">
-              {avatarFallback}
-            </slot>
-            {!avatarFallback && !Astro.slots.has("fallback") && (
-              <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-            )}
-          </span>
-        )}
-      </slot>
-
-      <slot name="badge">
-        {badge && (
-          <span
-            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-            data-slot="badge"
-          >
-            {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-          </span>
-        )}
-      </slot>
-    </span>
-    <div class="flex flex-col leading-tight">
-      {title && (
-        <span class="font-medium text-sm text-[var(--foreground)]" data-slot="title">
-          {title}
-        </span>
-      )}
-      {subtitle && (
-        <span class="text-xs text-[var(--muted-foreground)]" data-slot="subtitle">
-          {subtitle}
-        </span>
-      )}
-    </div>
-  </div>
-) : (
-  <span
-    class={classes.root}
-    data-slot="root"
-    aria-label={label}
-    role={label ? "img" : undefined}
-    {...rest}
-  >
-    <slot>
-      {src ? (
-        <img
-          src={src}
-          alt={alt}
-          class={classes.image}
-          data-slot="image"
-        />
-      ) : (
-        <span class={classes.fallback} data-slot="fallback">
-          <slot name="fallback">
-            {avatarFallback}
-          </slot>
-          {!avatarFallback && !Astro.slots.has("fallback") && (
-            <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-          )}
-        </span>
-      )}
-    </slot>
-
-    <slot name="badge">
-      {badge && (
-        <span
-          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-          data-slot="badge"
-        >
-          {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-        </span>
-      )}
-    </slot>
-  </span>
-)}
-

package/src/components/astro/RLAAvatarGroup.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarGroupProps } from "../../types"
-import avatarGroupThemeDefault, { createAvatarGroupTheme } from "../../themes/avatar-group.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarGroupTheme = uiConfig.colors ? createAvatarGroupTheme() : avatarGroupThemeDefault
-
-const avatarGroup = scv(avatarGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarGroupProps
-
-const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
----
-<div class={classes.root} data-slot="avatar-group" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLABadge.astro

@@ -1,36 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BadgeProps } from "../../types"
-import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
-const badge = scv(badgeTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  shape = "pill",
-  label,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BadgeProps & { label?: string }
-
-const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
-
-const classes = resolveClasses(badge, {
-  variant: resolvedVariant as "solid",
-  color: color as "neutral",
-  size,
-  shape,
-  theme
-}, useUi("badge", uiProp), className)
----
-<span class={classes.root} data-slot="root" {...rest}>
-  <slot>{label}</slot>
-</span>