@rimelight/ui 0.0.42 → 0.0.44

package/src/{utils → components/header}/headerStack.ts

@@ -44,6 +44,8 @@ export function getHeaderStack(): HeaderStackManager {
   }
 
   if (!window.RLHeaderStack) {
+    let updateScheduled = false
+
     window.RLHeaderStack = {
       layers: [] as HeaderLayer[],
       register(
@@ -59,15 +61,17 @@ export function getHeaderStack(): HeaderStackManager {
         if (!layer) {
           layer = { id, type, order, naturalHeight, isVisible, el }
           this.layers.push(layer)
-          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => {
-            if (a.type !== b.type) return a.type === "banner" ? -1 : 1
-            return a.order - b.order
-          })
         } else {
+          layer.type = type
+          layer.order = order
           layer.naturalHeight = naturalHeight
           layer.isVisible = isVisible
           layer.el = el
         }
+        this.layers.sort((a: HeaderLayer, b: HeaderLayer) => {
+          if (a.type !== b.type) return a.type === "banner" ? -1 : 1
+          return a.order - b.order
+        })
         this.update()
       },
       unregister(id: string) {
@@ -88,26 +92,30 @@ export function getHeaderStack(): HeaderStackManager {
         this.update()
       },
       update() {
-        let currentTop = 0
-        for (const layer of this.layers) {
-          if (layer.el) {
-            // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
-            const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
-            layer.el.style.top = topPx
-            layer.el.style.opacity = layer.isVisible ? "1" : "0"
-            layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
-            layer.el.style.setProperty(
-              "--rl-header-bottom",
-              `calc(${topPx} + ${layer.naturalHeight}px)`
-            )
-          }
-          if (layer.isVisible) {
-            currentTop += layer.naturalHeight
+        if (updateScheduled) return
+        updateScheduled = true
+
+        requestAnimationFrame(() => {
+          updateScheduled = false
+          let currentTop = 0
+          for (const layer of this.layers) {
+            if (layer.el) {
+              // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
+              const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
+              layer.el.style.top = topPx
+              layer.el.style.opacity = layer.isVisible ? "1" : "0"
+              layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
+              layer.el.style.setProperty(
+                "--rl-header-bottom",
+                `calc(${topPx} + ${layer.naturalHeight}px)`
+              )
+            }
+            if (layer.isVisible) {
+              currentTop += layer.naturalHeight
+            }
           }
-        }
-        if (currentTop > 0) {
           document.documentElement.style.setProperty("--rl-total-header-height", `${currentTop}px`)
-        }
+        })
       }
     }
   }

package/src/components/hover-card/RLAHoverCard.astro

@@ -1,35 +1,24 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { HoverCardProps } from "./hover-card"
-import { resolveTheme } from "../../utils/resolveTheme"
-import hoverCardThemeDefault, { createHoverCardTheme } from "./hover-card.theme"
-const hoverCardTheme = resolveTheme(hoverCardThemeDefault, createHoverCardTheme)
-
-
-const hoverCard = scv(hoverCardTheme)
-
-const {
-  triggerLabel,
-  placement = "bottom",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as HoverCardProps
-
-const classes = resolveClasses(hoverCard, {
-  placement
-}, useUi("hoverCard", uiProp), className)
----
-<div class={classes.root} data-slot="hover-card-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot name="trigger">
-      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
-    </slot>
-  </div>
-
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import type { HoverCardProps } from "./hover-card"
+import { hoverCardTheme } from "./hover-card.theme"
+
+
+
+const {
+  triggerLabel,
+  ...rest
+} = Astro.props as HoverCardProps
+
+const classes = hoverCardTheme(Astro.props)
+---
+<div class={classes.root} data-slot="hover-card-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/hover-card/hover-card.theme.ts

@@ -1,29 +1,25 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createHoverCardTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "trigger", "content"],
-    base: {
-      root: "relative inline-block group/hover-card",
-      trigger: "",
-      content: [
-        "absolute z-50 w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-md outline-none",
-        "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
-        "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
-      ]
-    },
-    variants: {
-      placement: {
-        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
-        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
-        left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
-        right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
-      }
-    },
-    defaultVariants: {
-      placement: "bottom"
+export const hoverCardTheme = defineTheme("hover-card", {
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/hover-card",
+    trigger: "",
+    content: [
+      "absolute z-50 w-80 rounded-lg border border-default bg-elevated p-4 text-highlighted shadow-md outline-none",
+      "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
     }
-  })
-
-export default createHoverCardTheme()
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+})

package/src/components/icon/RLAIcon.astro

@@ -1,36 +1,26 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveIcon } from "./resolver"
-import type { IconProps } from "./icon"
-import iconTheme from "./icon.theme"
-
-
-const icon = scv(iconTheme)
-
-const {
-  name,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as IconProps
-
-const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
-const resolved = resolveIcon(name)
----
-
-<span
-  class={classes.root}
-  data-slot="icon"
-  aria-hidden="true"
-  {...rest}
->
-  {resolved.isClass ? (
-    <span class={resolved.content} />
-  ) : (
-    <Fragment set:html={resolved.content} />
-  )}
-</span>
-
+---
+import { resolveIcon } from "../../icons"
+import type { IconProps } from "./icon"
+import { iconTheme } from "./icon.theme"
+
+const {
+  name,
+  ...rest
+} = Astro.props as IconProps
+
+const classes = iconTheme(Astro.props)
+const resolved = resolveIcon(name)
+---
+
+<span
+  class={classes.root}
+  data-slot="icon"
+  aria-hidden="true"
+  {...rest}
+>
+  {resolved.isClass ? (
+    <span class:list={[resolved.content, "block size-full"]} />  ) : (
+    <Fragment set:html={resolved.content} />
+  )}
+</span>
+

package/src/components/icon/RLSIcon.tsx

@@ -1,23 +1,22 @@
 import { createMemo, splitProps, type Component } from "solid-js"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveIcon } from "./resolver"
+import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
-import iconThemeDefault from "./icon.theme"
-
-const iconScv = scv(iconThemeDefault)
+import { iconTheme } from "./icon.theme"
 
 const RLSIcon: Component<IconProps> = (allProps) => {
   const [props, rest] = splitProps(allProps, ["name", "size", "ui", "class"])
   const resolved = createMemo(() => resolveIcon(props.name))
   const classes = createMemo(() =>
-    resolveClasses(iconScv, { size: props.size ?? "md" }, useUi("icon", props.ui), props.class)
+    iconTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
   )
   return (
     <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>
       {resolved().isClass ? (
-        <span class={resolved().content} />
+        <span class={`${resolved().content} size-full`} />
       ) : (
         <span innerHTML={resolved().content} />
       )}

package/src/components/icon/RLVIcon.vue

@@ -1,31 +1,42 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveIcon } from "./resolver"
+import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
-import iconThemeDefault from "./icon.theme"
+import { iconTheme } from "./icon.theme"
 
-defineOptions({ name: "RLVIcon" })
+defineOptions({ name: "RLVIcon", inheritAttrs: false })
 
 const attrs = useAttrs()
-const iconScv = scv(iconThemeDefault)
 
 const props = withDefaults(defineProps<IconProps>(), {
   size: "md"
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(iconScv, { size: props.size }, useUi("icon", props.ui), props.class)
+  iconTheme({
+    size: props.size,
+    class: props.class
+  })
 )
 
 const resolved = computed(() => resolveIcon(props.name))
 </script>
 
 <template>
-  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="icon" aria-hidden="true">
-    <span v-if="resolved.isClass" :class="resolved.content" />
-    <span v-else v-html="resolved.content" />
-  </span>
+  <span
+    v-if="resolved.isClass"
+    v-bind="attrs"
+    :class="resolvedClasses.root"
+    data-slot="icon"
+    aria-hidden="true"
+    ><span :class="[resolved.content, 'size-full']"
+  /></span>
+  <span
+    v-else
+    v-bind="attrs"
+    :class="resolvedClasses.root"
+    data-slot="icon"
+    aria-hidden="true"
+    v-html="resolved.content"
+  />
 </template>

package/src/components/icon/icon.theme.ts

@@ -1,30 +1,20 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createIconTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: [
-        "shrink-0",
-        "inline-flex",
-        "items-center",
-        "justify-center",
-        "align-middle",
-        "leading-none"
-      ]
-    },
-    variants: {
-      size: {
-        xs: { root: ["h-3", "w-3"] },
-        sm: { root: ["h-4", "w-4"] },
-        md: { root: ["h-5", "w-5"] },
-        lg: { root: ["h-6", "w-6"] },
-        xl: { root: ["h-8", "w-8"] }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const iconTheme = defineTheme("icon", {
+  slots: ["root"],
+  base: {
+    root: "shrink-0 inline-block align-middle leading-none"
+  },
+  variants: {
+    size: {
+      xs: { root: "h-3 w-3" },
+      sm: { root: "h-4 w-4" },
+      md: { root: "h-5 w-5" },
+      lg: { root: "h-6 w-6" },
+      xl: { root: "h-8 w-8" }
     }
-  })
-
-export default createIconTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/image/RLAImage.astro

@@ -2,14 +2,10 @@
 import { Image, Picture, getImage } from "astro:assets"
 import type { ImageMetadata } from "astro"
 import RLAIcon from "../icon/RLAIcon.astro"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ImageProps } from "./image"
-import imageTheme from "./image.theme"
+import { imageTheme } from "./image.theme"
 
 
-const img = scv(imageTheme)
 
 const {
   src,
@@ -21,11 +17,7 @@ const {
   height,
   width,
   loading = "lazy",
-  fit = "cover",
   metadata: preMetadata,
-  open,
-  ui: uiProp,
-  class: className,
   metaSource = true,
   metaFormat = true,
   metaDimensions = true,
@@ -35,7 +27,7 @@ const {
   ...rest
 } = Astro.props as ImageProps
 
-const classes = resolveClasses(img, {}, useUi("image", uiProp), className)
+const classes = imageTheme(Astro.props)
 
 const isResponsive = !!(mobileSrc && desktopSrc)
 const isFormatFallback = !isResponsive && !!(formats && formats.length > 0)
@@ -102,7 +94,7 @@ const initialSize = preMetadata?.size ?? undefined
       class={classes.dialog}
       data-image-dialog
     >
-      <div class="flex flex-col bg-background text-foreground max-h-[90vh]">
+      <div class="flex flex-col bg-default text-highlighted max-h-[90vh]">
         <div class="flex-1 min-h-0 flex items-center justify-center p-4 overflow-hidden">
           {isResponsive && mobileImg && desktopImg ? (
             <picture class="max-w-full max-h-[65vh] flex items-center justify-center overflow-hidden">
@@ -120,15 +112,15 @@ const initialSize = preMetadata?.size ?? undefined
           )}
         </div>
 
-        <hr class="border-border mx-4 mb-3 shrink-0" />
+        <hr class="border-default mx-4 mb-3 shrink-0" />
 
         <div class={classes.fileInfo}>
           <div class="flex flex-col gap-xs text-sm">
             {
               metaSource && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="image" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Source:</span>
+                  <RLAIcon name="image" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Source:</span>
                   <span class="text-dimmed truncate max-w-[40vw]">{fileName}</span>
                 </div>
               )
@@ -136,8 +128,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaFormat && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="fileQuestion" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Format:</span>
+                  <RLAIcon name="fileQuestion" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Format:</span>
                   <span class="text-dimmed" data-metadata-format>{fileExtension || "IMG"}</span>
                 </div>
               )
@@ -145,8 +137,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaDimensions && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="imageUpscale" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Dimensions:</span>
+                  <RLAIcon name="imageUpscale" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Dimensions:</span>
                   <span class="text-dimmed">{(imgWidth || "?")} x {(imgHeight || "?")}</span>
                 </div>
               )
@@ -154,8 +146,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaSize && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="hardDrive" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Size:</span>
+                  <RLAIcon name="hardDrive" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Size:</span>
                   <span class="text-dimmed" data-metadata-size>{initialSize !== undefined ? `${initialSize} bytes` : "fetching..."}</span>
                 </div>
               )
@@ -163,8 +155,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaAlt && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="alignLeft" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Alt:</span>
+                  <RLAIcon name="alignLeft" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Alt:</span>
                   <span class="text-dimmed truncate max-w-[30vw]" class:list={{ "italic opacity-50": !alt }}>{alt || "none"}</span>
                 </div>
               )
@@ -199,10 +191,15 @@ const initialSize = preMetadata?.size ?? undefined
   </div>
 </rla-image>
 
+<style>
+  rla-image {
+    display: contents;
+  }
+</style>
+
 <script>
   class RLAImage extends HTMLElement {
     connectedCallback() {
-      this.style.display = 'contents';
       const trigger = this.querySelector("[data-image-trigger]");
       if (!trigger) return;
 

package/src/components/image/image.theme.ts

@@ -1,33 +1,30 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createImageTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "triggerImage",
-      "dialog",
-      "image",
-      "fileInfo",
-      "download",
-      "closeButton"
-    ],
-    base: {
-      root: "relative inline-block group/image",
-      trigger:
-        "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
-      triggerImage: "",
-      dialog:
-        "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
-      image: "object-contain max-w-full max-h-[65vh] rounded-lg",
-      fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
-      download:
-        "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
-      closeButton:
-        "inline-flex items-center justify-center size-8 rounded-full bg-background/80 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createImageTheme()
+export const imageTheme = defineTheme("image", {
+  slots: [
+    "root",
+    "trigger",
+    "triggerImage",
+    "dialog",
+    "image",
+    "fileInfo",
+    "download",
+    "closeButton"
+  ],
+  base: {
+    root: "relative inline-block group/image",
+    trigger:
+      "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
+    triggerImage: "",
+    dialog:
+      "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
+    image: "object-contain max-w-full max-h-[65vh] rounded-lg",
+    fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
+    download:
+      "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
+    closeButton:
+      "inline-flex items-center justify-center size-8 rounded-full bg-default/80 hover:bg-accented text-muted hover:text-highlighted transition-colors"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/input/RLAInput.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { InputProps } from "./input"
-import inputTheme from "./input.theme"
+import { inputTheme } from "./input.theme"
 
 
-const input = scv(inputTheme)
 
 const {
   type = "text",
@@ -19,28 +15,18 @@ const {
   error = false,
   leadingIcon,
   trailingIcon,
-  variant = "default",
-  size = "md",
-  color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as InputProps
 
-const hasLeading = !!leadingIcon || Astro.slots.has("leading")
-const hasTrailing = !!trailingIcon || Astro.slots.has("trailing")
 
-const classes = resolveClasses(input, {
-  variant,
-  size,
-  hasLeading,
-  hasTrailing,
-  error: !!error,
-  theme
-}, useUi("input", uiProp), className);
+
+const classes = inputTheme({
+  ...Astro.props,
+  error: !!error
+});
 ---
-<div class={classes.root} data-slot="root">
+<div class={classes.root} data-slot="root" data-theme={theme}>
   {(leadingIcon || Astro.slots.has("leading")) && (
     <span class={classes.leading} data-slot="leading">
       {leadingIcon ? <span class={leadingIcon} /> : <slot name="leading" />}