@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLALocaleSelector.astro

@@ -1,114 +1,131 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LocaleSelectorProps } from "../../types"
-import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
-
-const uiConfig = getUIConfig()
-const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
-
-const localeSelector = scv(localeSelectorTheme)
-
-const {
-    locales,
-    variant = "default",
-    size = "md",
-    ui: uiProp,
-    class: className,
-    ...rest
-} = Astro.props as LocaleSelectorProps;
-
-const classes = resolveClasses(localeSelector, {
-    variant,
-    size
-}, useUi("localeSelector", uiProp), className);
-
-const currentLocale = Astro.currentLocale ?? 'en';
-const localeUrls = [...new Map(getRelativeLocaleUrlList().map(url => {
-    const locale = url.split('/')[1] || 'en';
-    return [locale, url];
-})).values()];
-
-const processedLocales = locales && locales.length > 0
-    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
-    : [...new Map(getRelativeLocaleUrlList().map(url => {
-        const locale = url.split('/')[1] || 'en';
-        return [locale, { code: locale, label: locale }];
-    })).values()];
-
-function getLocaleDisplayName(localeCode: string): string {
-    try {
-        const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
-        const nativeName = formatter.of(localeCode);
-
-        return nativeName
-            ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
-            : localeCode.toUpperCase();
-    } catch (e) {
-        return localeCode.toUpperCase();
-    }
-}
----
-
-<div class:list={[classes.root]} {...rest}>
-    {Astro.slots.has("label") && (
-            <label for="language-picker" class:list={[classes.label]}>
-                <slot name="label" />
-            </label>
-    )}
-
-    <div class:list={[classes.wrapper]}>
-        <select
-                id="language-picker"
-                class:list={[classes.select]}
-                aria-label="Select language"
-                data-variant={variant}
-                data-size={size}
-        >
-            {processedLocales.map((item) => {
-                const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
-                return (
-                        <option
-                                value={targetUrl}
-                                selected={currentLocale === item.code}
-                                class:list={[classes.option]}
-                        >
-                            {item.label !== item.code ? item.label : getLocaleDisplayName(item.code)}
-                        </option>
-                );
-            })}
-        </select>
-
-        <div class:list={[classes.iconWrapper]}>
-            <slot name="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 opacity-70">
-                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
-                </svg>
-            </slot>
-        </div>
-    </div>
-</div>
-
-<script>
-    const initializeLanguagePicker = () => {
-        const languagePickers = document.querySelectorAll('#language-picker');
-
-        languagePickers.forEach(picker => {
-            if (picker.hasAttribute('data-initialized')) return;
-            picker.setAttribute('data-initialized', 'true');
-
-            picker.addEventListener('change', (event) => {
-                const target = event.target as HTMLSelectElement;
-                const targetUrl = target.value;
-                if (targetUrl) {
-                    window.location.href = targetUrl;
-                }
-            });
-        });
-    };
-
-    document.addEventListener('DOMContentLoaded', initializeLanguagePicker);
-    document.addEventListener('astro:page-load', initializeLanguagePicker);
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LocaleSelectorProps } from "../../types"
+import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
+import RLASelect from "./RLASelect.astro"
+
+const uiConfig = getUIConfig()
+const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
+
+const localeSelector = scv(localeSelectorTheme)
+
+const {
+    locales,
+    variant = "default",
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = resolveClasses(localeSelector, {
+    variant,
+    size
+}, useUi("localeSelector", uiProp), className);
+
+const currentLocale = Astro.currentLocale ?? 'en';
+
+const processedLocales = locales && locales.length > 0
+    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
+    : [...new Map(getRelativeLocaleUrlList().map(url => {
+        const locale = url.split('/')[1] || 'en';
+        return [locale, { code: locale, label: locale }];
+    })).values()];
+
+function getLocaleDisplayName(localeCode: string): string {
+    try {
+        const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
+        const nativeName = formatter.of(localeCode);
+
+        return nativeName
+            ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
+            : localeCode.toUpperCase();
+    } catch (e) {
+        return localeCode.toUpperCase();
+    }
+}
+
+const items = processedLocales.map((item) => {
+    const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+    return {
+        label: item.label !== item.code ? item.label : getLocaleDisplayName(item.code),
+        value: targetUrl,
+        code: item.code
+    };
+});
+
+const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
+
+// Prefix utility classes in classes.select with `!` to cleanly override conflicting styles in RLASelect's base trigger
+// Also remove `pr-` classes which were meant for absolute positioned native select icons
+const overrideTriggerClass = classes.select
+    ? classes.select
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.startsWith("pr-") || cls.startsWith("!pr-")) return ""; // Strip padding-right
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
+
+const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
+
+const selectUi = {
+    root: "!w-fit !inline-flex",
+    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass}`,
+    content: "!min-w-0 !w-full !bg-[var(--popover)] !border-[var(--border)] !text-[var(--popover-foreground)]",
+    item: "!text-[var(--foreground)] hover:!bg-[var(--accent)] hover:!text-[var(--accent-foreground)]"
+};
+---
+
+<rla-locale-selector {...rest}>
+    <div class:list={[classes.root]} data-locale-selector>
+        {Astro.slots.has("label") && (
+                <label class:list={[classes.label]}>
+                    <slot name="label" />
+                </label>
+        )}
+
+        <div class:list={[classes.wrapper]}>
+            <RLASelect
+                items={items}
+                value={currentLocaleUrl}
+                size={size}
+                ui={selectUi}
+            />
+        </div>
+    </div>
+</rla-locale-selector>
+
+<script>
+    class RLALocaleSelector extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+            const hiddenInput = this.querySelector('[data-select-hidden-input]') as HTMLInputElement | null;
+            if (!hiddenInput) return;
+
+            hiddenInput.addEventListener('change', (event) => {
+                const target = event.target as HTMLInputElement;
+                const targetUrl = target.value;
+                if (targetUrl) {
+                    window.location.href = targetUrl;
+                }
+            });
+        }
+    }
+
+    if (!customElements.get('rla-locale-selector')) {
+        customElements.define('rla-locale-selector', RLALocaleSelector);
+    }
 </script>

package/src/components/astro/RLALogo.astro

@@ -1,90 +1,117 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LogoProps } from "../../types"
-import logoThemeDefault, { createLogoTheme } from "../../themes/logo.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const logoTheme = uiConfig.colors ? createLogoTheme() : logoThemeDefault
-
-const logo = scv(logoTheme)
-
-const {
-  variant = "logomark",
-  mode,
-  theme,
-  href = "/",
-  alt,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LogoProps;
-
-const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
-
-const globalConfig = getUIConfig();
-const rcLogos = globalConfig.logos as Record<string, any>;
-
-let logoSrc: string | null = null;
-let darkSrc: string | null = null;
-let lightSrc: string | null = null;
-
-if (rcLogos && typeof rcLogos === "object") {
-  let src = rcLogos[variant];
-  if (src && typeof src === "object") {
-    if (theme === "flat" && src.flat) {
-      logoSrc = src.flat;
-    } else if (mode) {
-      logoSrc = src[mode] || src.color;
-    } else {
-      // No mode, no flat — auto-detect, use color as default
-      logoSrc = src.color || src.black || src.white;
-      darkSrc = src.white || src.color;
-      lightSrc = src.black || src.color;
-    }
-  } else if (typeof src === "string") {
-    logoSrc = src;
-  }
-}
-
-const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
-const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
-const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode && theme !== "flat";
-const autoId = hasAutoMode ? `rla-logo-${Math.random().toString(36).slice(2, 8)}` : undefined;
----
-
-<a
-  class={classes.root}
-  href={href}
-  aria-label={alt || variant}
-  data-slot="root"
-  {...rest}
->
-  {logoSrc ? (
-    isIcon ? (
-      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
-    ) : hasAutoMode ? (
-      <>
-        <img
-          src={lightSrc}
-          alt={alt || ""}
-          class="size-full block object-contain shrink-0 dark:hidden"
-        />
-        <img
-          src={darkSrc}
-          alt={alt || ""}
-          class="size-full hidden object-contain shrink-0 dark:block"
-        />
-      </>
-    ) : (
-      <img
-        src={logoSrc}
-        alt={alt || ""}
-        class="size-full block object-contain shrink-0"
-      />
-    )
-  ) : (
-    <slot />
-  )}
-</a>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LogoProps } from "../../types"
+import logoThemeDefault, { createLogoTheme } from "../../themes/logo.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const logoTheme = uiConfig.colors ? createLogoTheme() : logoThemeDefault
+
+const logo = scv(logoTheme)
+
+const {
+  variant = "logomark",
+  mode,
+  theme,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LogoProps;
+
+let resolvedHref = href;
+if (href === "/") {
+  try {
+    const { getRelativeLocaleUrl } = await import("@rimelight/i18n");
+    resolvedHref = Astro.currentLocale
+      ? getRelativeLocaleUrl(Astro.currentLocale, "/")
+      : getRelativeLocaleUrl("/");
+  } catch {
+    if (Astro.currentLocale) {
+      resolvedHref = `/${Astro.currentLocale}/`;
+    }
+  }
+}
+
+const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
+
+const globalConfig = getUIConfig();
+const rcLogos = globalConfig.logos as Record<string, any>;
+
+let logoSrc: string | null = null;
+let darkSrc: string | null = null;
+let lightSrc: string | null = null;
+
+const logoFiles = import.meta.glob<{ default: any }>("/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}", { eager: true });
+
+function resolveLogo(pathStr: string | null | undefined): any {
+  if (!pathStr) return null;
+  let lookupPath = pathStr;
+  if (lookupPath.startsWith("./")) {
+    lookupPath = lookupPath.substring(1);
+  } else if (!lookupPath.startsWith("/")) {
+    lookupPath = "/" + lookupPath;
+  }
+  const file = logoFiles[lookupPath];
+  if (file) {
+    return file.default?.src || file.default;
+  }
+  return pathStr;
+}
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    if (mode) {
+      logoSrc = resolveLogo(src[mode] || src.color);
+    } else {
+      logoSrc = resolveLogo(src.color || src.black || src.white);
+      darkSrc = resolveLogo(src.white || src.color);
+      lightSrc = resolveLogo(src.black || src.color);
+    }
+  } else if (typeof src === "string") {
+    logoSrc = resolveLogo(src);
+  }
+}
+
+const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
+const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
+---
+
+<a
+  class={classes.root}
+  href={resolvedHref}
+  aria-label={alt || variant}
+  data-slot="root"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : hasAutoMode ? (
+      <>
+        <img
+          src={lightSrc}
+          alt={alt || ""}
+          class="size-full block object-contain shrink-0 dark:hidden"
+        />
+        <img
+          src={darkSrc}
+          alt={alt || ""}
+          class="size-full hidden object-contain shrink-0 dark:block"
+        />
+      </>
+    ) : (
+      <img
+        src={logoSrc}
+        alt={alt || ""}
+        class="size-full block object-contain shrink-0"
+      />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAMain.astro

@@ -25,10 +25,15 @@ const Tag = as;
 ---
 
 <Tag
-        class:list={[classes.root]}
+        class:list={[classes.root, "rla-main-container"]}
         data-slot="main"
-        style="padding-top: var(--rl-total-header-height, 4rem)"
         {...rest}
     >
     <slot />
-</Tag>
+</Tag>
+
+<style>
+  .rla-main-container {
+    padding-top: var(--rl-total-header-height, 4rem);
+  }
+</style>

package/src/components/astro/RLAMarquee.astro

@@ -25,12 +25,19 @@ const classes = resolveClasses(marquee, {
 }, useUi("marquee", uiProp), className)
 
 const duration = `${speed}s`
+const id = `marquee-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div class={classes.root} data-slot="marquee-root" {...rest}>
-  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
+  <div class:list={[classes.track, id]} data-slot="track">
     <slot />
   </div>
-  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
+  <div class:list={[classes.track, id]} data-slot="track" aria-hidden="true">
     <slot />
   </div>
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    animation-duration: ${duration} !important;
+  }
+`} />

package/src/components/astro/RLAModal.astro

@@ -22,7 +22,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ModalProps
+} = Astro.props as ModalProps & { size?: "sm" | "md" | "lg" | "xl" }
 
 const classes = resolveClasses(modal, {
   size
@@ -36,12 +36,12 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
       class={classes.trigger}
       data-slot="trigger"
       type="button"
-      onclick={`document.getElementById('${modalId}').showmodal()`}
+      data-dialog-show={modalId}
     >
       {triggerLabel}
     </button>
   ) : (
-    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
+    <span data-dialog-show={modalId}>
       <slot name="trigger" />
     </span>
   )}
@@ -59,7 +59,7 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
-      onclick={`document.getElementById('${modalId}').close()`}
+      data-dialog-close={modalId}
       aria-label="Close modal"
     >
       <span class="i-lucide-x size-4" aria-hidden="true" />
@@ -81,19 +81,49 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
   </dialog>
 </div>
 
-<script is:inline>
-  document.addEventListener('click', (e) => {
-    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
-      const rect = e.target.getBoundingClientRect();
-      const isInModal = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      );
-      if (!isInModal) {
-        e.target.close();
+<script>
+  if (!(window as any).rlaDialogListenerActive) {
+    (window as any).rlaDialogListenerActive = true;
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const showTrigger = target.closest('[data-dialog-show]');
+      if (showTrigger) {
+        const dialogId = showTrigger.getAttribute('data-dialog-show');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            if (typeof dialog.showModal === 'function') {
+              dialog.showModal();
+            } else if (typeof (dialog as any).showmodal === 'function') {
+              (dialog as any).showmodal();
+            }
+          }
+        }
+      }
+
+      const closeTrigger = target.closest('[data-dialog-close]');
+      if (closeTrigger) {
+        const dialogId = closeTrigger.getAttribute('data-dialog-close');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          dialog?.close();
+        }
+      }
+
+      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
+        const rect = target.getBoundingClientRect();
+        const isInModal = (
+          rect.top <= e.clientY &&
+          e.clientY <= rect.top + rect.height &&
+          rect.left <= e.clientX &&
+          e.clientX <= rect.left + rect.width
+        );
+        if (!isInModal) {
+          (target as HTMLDialogElement).close();
+        }
       }
-    }
-  });
+    });
+  }
 </script>