@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAHeader.astro

@@ -2,7 +2,11 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { HeaderProps } from "../../types"
-import headerTheme from "../../themes/header.theme"
+import headerThemeDefault, { createHeaderTheme } from "../../themes/header.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const headerTheme = uiConfig.colors ? createHeaderTheme() : headerThemeDefault
 
 const header = scv(headerTheme)
 
@@ -34,7 +38,7 @@ const zIndex = 100 - stackIndex;
   data-rla-header={fixed ? "true" : undefined}
   data-stack-index={stackIndex}
   data-hide-on-scroll={String(hideOnScroll)}
-  style={fixed ? `z-index: ${zIndex};` : undefined}
+  data-header-layer-id={headerId}
   {...rest}
 >
   <div class:list={[classes.content]} data-header-content>
@@ -53,55 +57,10 @@ const zIndex = 100 - stackIndex;
 </header>
 
 {fixed && (
-  <script>
-    import { getHeaderStack } from "../../utils/headerStack";
-
-    const stack = getHeaderStack();
-    const headers = document.querySelectorAll("[data-rla-header='true']");
-
-    headers.forEach(header => {
-      if ((header as any)._rl_initialized) return;
-      (header as any)._rl_initialized = true;
-
-      const id = header.id;
-      const stackIndex = parseInt(header.getAttribute("data-stack-index") || "0", 10);
-      const hideOnScroll = header.getAttribute("data-hide-on-scroll") === "true";
-      const contentEl = header.querySelector("[data-header-content]") as HTMLElement;
-
-      let naturalHeight = contentEl ? contentEl.offsetHeight : 0;
-      let isVisible = true;
-
-      const updateStack = () => {
-        stack.register(id, stackIndex, naturalHeight, isVisible, header as HTMLElement);
-      };
-
-      if (typeof ResizeObserver !== "undefined" && contentEl) {
-        new ResizeObserver(entries => {
-          const h = entries[0]?.contentRect.height;
-          if (h && h > 0) {
-            naturalHeight = h;
-            updateStack();
-          }
-        }).observe(contentEl);
-      }
-
-      if (hideOnScroll) {
-        let localLastScrollY = window.scrollY;
-        window.addEventListener("scroll", () => {
-          const current = window.scrollY;
-          const diff = current - localLastScrollY;
-          if (Math.abs(diff) >= 10) {
-            const newVisible = current <= 50 ? true : diff <= 0;
-            if (newVisible !== isVisible) {
-              isVisible = newVisible;
-              updateStack();
-            }
-            localLastScrollY = current;
-          }
-        }, { passive: true });
-      }
-
-      updateStack();
-    });
-  </script>
+  <style is:inline set:html={`
+    #${headerId} {
+      z-index: ${zIndex} !important;
+    }
+  `} />
 )}
+

package/src/components/astro/RLAHoverCard.astro

@@ -1,31 +1,35 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { HoverCardProps } from "../../types"
-import hoverCardTheme from "../../themes/hover-card.theme"
-
-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 { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { HoverCardProps } from "../../types"
+import hoverCardThemeDefault, { createHoverCardTheme } from "../../themes/hover-card.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const hoverCardTheme = uiConfig.colors ? createHoverCardTheme() : hoverCardThemeDefault
+
+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>

package/src/components/astro/RLAIcon.astro

@@ -1,27 +1,31 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { IconProps } from "../../types"
-import iconTheme from "../../themes/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)
----
-
-<span
-  class={classes.root}
-  data-slot="root"
-  aria-hidden="true"
-  {...rest}
->
-  <span class={name} />
-</span>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { IconProps } from "../../types"
+import iconThemeDefault, { createIconTheme } from "../../themes/icon.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const iconTheme = uiConfig.colors ? createIconTheme() : iconThemeDefault
+
+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)
+---
+
+<span
+  class={classes.root}
+  data-slot="root"
+  aria-hidden="true"
+  {...rest}
+>
+  <span class={name} />
+</span>

package/src/components/astro/RLAImage.astro

@@ -1,19 +1,251 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ImageProps } from "../../types"
-import imageThemeDefault from "../../themes/image.theme"
-
-const image = scv(imageThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ImageProps
-
-const classes = resolveClasses(image, {}, useUi("image", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { Image, Picture, getImage } from "astro:assets"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ImageProps, ImageMetadataInfo } from "../../types"
+import imageThemeDefault, { createImageTheme } from "../../themes/image.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const imageTheme = uiConfig.colors ? createImageTheme() : imageThemeDefault
+
+const img = scv(imageTheme)
+
+const {
+  src,
+  mobileSrc,
+  desktopSrc,
+  breakpoint,
+  formats,
+  alt = "",
+  height,
+  width,
+  loading = "lazy",
+  fit = "cover",
+  metadata: preMetadata,
+  open,
+  ui: uiProp,
+  class: className,
+  metaSource = true,
+  metaFormat = true,
+  metaDimensions = true,
+  metaSize = true,
+  metaAlt = true,
+  metaDownload = true,
+  ...rest
+} = Astro.props as ImageProps
+
+const classes = resolveClasses(img, {}, useUi("image", uiProp), className)
+
+const isResponsive = !!(mobileSrc && desktopSrc)
+const isFormatFallback = !isResponsive && !!(formats && formats.length > 0)
+const breakpointVal = breakpoint ?? 768
+
+let mobileImg = null
+let desktopImg = null
+
+if (isResponsive) {
+  mobileImg = await getImage({
+    src: mobileSrc!,
+    format: "webp",
+  })
+  desktopImg = await getImage({
+    src: desktopSrc!,
+    format: "webp",
+  })
+}
+
+const activeSrc = isResponsive ? desktopSrc : src
+const isMetadata = typeof activeSrc !== "string" && activeSrc !== undefined
+const imgWidth = width ?? (isMetadata ? (activeSrc as any).width : undefined)
+const imgHeight = height ?? (isMetadata ? (activeSrc as any).height : undefined)
+const imgFormat = isMetadata ? (activeSrc as any).format : (preMetadata?.format ?? undefined)
+const rawName = activeSrc
+  ? (typeof activeSrc === "string" ? activeSrc.split("/").pop() || "image" : (activeSrc as any).src.split("/").pop() || "image")
+  : "image"
+const fileName = rawName.split("?")[0]
+const fileExtension = imgFormat?.toUpperCase() || (fileName.includes(".") ? fileName.split(".").pop()?.toUpperCase() : "IMG")
+const initialSize = preMetadata?.size ?? undefined
+---
+
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot name="trigger">
+    <button
+      type="button"
+      class={classes.trigger}
+      data-image-trigger
+    >
+      {isResponsive && mobileImg && desktopImg ? (
+        <picture>
+          <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
+          <source media={`(min-width: ${breakpointVal}px)`} srcset={desktopImg.src} />
+          <img src={desktopImg.src} alt={alt} loading={loading} class="w-full h-full object-cover rounded-lg" />
+        </picture>
+      ) : isFormatFallback ? (
+        <Picture src={src!} formats={formats!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class="w-full h-full object-cover rounded-lg" />
+      ) : (
+        <Image src={src!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} fit={fit} />
+      )}
+    </button>
+  </slot>
+
+  <dialog
+    class={classes.dialog}
+    data-image-dialog
+  >
+    <div class="flex flex-col bg-background text-foreground 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">
+            <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
+            <source media={`(min-width: ${breakpointVal}px)`} srcset={desktopImg.src} />
+            <img src={desktopImg.src} alt={alt} class={classes.image} data-modal-img />
+          </picture>
+        ) : (
+          <img
+            src={typeof src === "string" ? src : src!.src}
+            alt={alt}
+            class={classes.image}
+            data-modal-img
+          />
+        )}
+      </div>
+
+      <hr class="border-border 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">
+                <span class="i-lucide-image size-4 shrink-0 text-muted-foreground" />
+                <span class="text-muted-foreground">Source:</span>
+                <span class="text-dimmed truncate max-w-[40vw]">{fileName}</span>
+              </div>
+            )
+          }
+          {
+            metaFormat && (
+              <div class="flex flex-row gap-xs items-center">
+                <span class="i-lucide-file-question-mark size-4 shrink-0 text-muted-foreground" />
+                <span class="text-muted-foreground">Format:</span>
+                <span class="text-dimmed" data-metadata-format>{fileExtension || "IMG"}</span>
+              </div>
+            )
+          }
+          {
+            metaDimensions && (
+              <div class="flex flex-row gap-xs items-center">
+                <span class="i-lucide-image-upscale size-4 shrink-0 text-muted-foreground" />
+                <span class="text-muted-foreground">Dimensions:</span>
+                <span class="text-dimmed">{(imgWidth || "?")} x {(imgHeight || "?")}</span>
+              </div>
+            )
+          }
+          {
+            metaSize && (
+              <div class="flex flex-row gap-xs items-center">
+                <span class="i-lucide-hard-drive size-4 shrink-0 text-muted-foreground" />
+                <span class="text-muted-foreground">Size:</span>
+                <span class="text-dimmed" data-metadata-size>{initialSize !== undefined ? `${initialSize} bytes` : "fetching..."}</span>
+              </div>
+            )
+          }
+          {
+            metaAlt && (
+              <div class="flex flex-row gap-xs items-center">
+                <span class="i-lucide-align-left size-4 shrink-0 text-muted-foreground" />
+                <span class="text-muted-foreground">Alt:</span>
+                <span class="text-dimmed truncate max-w-[30vw]" class:list={{ "italic opacity-50": !alt }}>{alt || "none"}</span>
+              </div>
+            )
+          }
+        </div>
+
+        {
+          metaDownload && (
+            <button
+              type="button"
+              class={classes.download}
+              data-image-download
+            >
+              <span class="i-lucide-download size-4 shrink-0" />
+              Download Original
+            </button>
+          )
+        }
+      </div>
+
+      <form method="dialog" class="absolute top-2 right-2">
+        <button
+          type="submit"
+          class={classes.closeButton}
+          aria-label="Close"
+        >
+          <span class="i-lucide-x size-4" />
+        </button>
+      </form>
+    </div>
+  </dialog>
+</div>
+
+<script>
+  const triggers = document.querySelectorAll("[data-image-trigger]")
+  for (const trigger of triggers) {
+    const parent = trigger.closest(".group\\/image") || trigger.parentElement
+    const dialog = parent?.querySelector("[data-image-dialog]")
+    if (!dialog) continue
+
+    const sizeEl = parent?.querySelector("[data-metadata-size]")
+    const formatEl = parent?.querySelector("[data-metadata-format]")
+    let fetched = false
+
+    trigger.addEventListener("click", () => {
+      if (!fetched) {
+        fetched = true
+        const imgEl = dialog.querySelector("[data-modal-img]")
+        if (imgEl) {
+          const src = imgEl.getAttribute("src")
+          if (src) {
+            fetch(src).then(r => r.blob()).then(blob => {
+              if (sizeEl) sizeEl.textContent = (blob.size / 1024).toFixed(2) + " KB"
+              if (formatEl && blob.type) {
+                const mime = blob.type.split("/").pop().toUpperCase()
+                if (mime && mime !== "OCTET-STREAM") formatEl.textContent = mime
+              }
+            }).catch(() => { if (sizeEl) sizeEl.textContent = "unavailable" })
+          }
+        }
+      }
+      dialog.showModal()
+    })
+
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) dialog.close()
+    })
+
+    const downloadBtn = dialog.querySelector("[data-image-download]")
+    if (downloadBtn) {
+      downloadBtn.addEventListener("click", async () => {
+        const img = dialog.querySelector("img")
+        const imgSrc = img?.getAttribute("src")
+        if (!imgSrc) return
+        try {
+          const response = await fetch(imgSrc)
+          const blob = await response.blob()
+          const url = URL.createObjectURL(blob)
+          const link = document.createElement("a")
+          link.href = url
+          const srcAttr = (trigger.querySelector("img") || {}).getAttribute("src") || ""
+          link.download = (srcAttr.split("/").pop() || "").split("?")[0] || `image-${Date.now()}`
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          URL.revokeObjectURL(url)
+        } catch (err) {
+          console.error("Download failed", err)
+        }
+      })
+    }
+  }
+</script>

package/src/components/astro/RLAInputDate.astro

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

package/src/components/astro/RLAInputNumber.astro

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

package/src/components/astro/RLAInputTags.astro

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

package/src/components/astro/RLAInputTime.astro

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