@rimelight/ui 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -56,6 +56,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "prepare": "vp config",
+    "knip": "knip",
+    "astro": "astro",
+    "docs:meta": "tsx scripts/extract-meta.ts"
+  },
   "dependencies": {
     "@astrojs/prism": "^4.0.1",
     "@astrojs/vue": "6.0.1",
@@ -97,9 +103,5 @@
       "optional": true
     }
   },
-  "scripts": {
-    "knip": "knip",
-    "astro": "astro",
-    "docs:meta": "tsx scripts/extract-meta.ts"
-  }
-}
+  "packageManager": "pnpm@11.1.2"
+}

package/src/components/ThemeToggle.astro

@@ -2,13 +2,13 @@
 import RLAButton from "./astro/RLAButton.astro";
 
 export interface ThemeToggleProps {
-  class?: string;
   size?: "sm" | "md" | "lg";
+  class?: any;
 }
 
 type Props = ThemeToggleProps;
 
-const { class: className, size = "md" } = Astro.props as Props
+const { size = "md", class: className } = Astro.props as Props
 ---
 
 <RLAButton

package/src/components/astro/RLAButton.astro

@@ -1,104 +1,104 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
-import buttonTheme from "../../themes/button.theme"
-
-const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof buttonTheme>
-
-export interface RLAButtonProps {
-  variant?: ButtonVariants['variant'];
-  color?: ButtonVariants['color'];
-  size?: ButtonVariants['size'];
-  href?: string;
-  label?: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
-  loading?: boolean;
-  square?: boolean;
-  block?: boolean;
-  active?: boolean;
-  activeColor?: ButtonVariants['color'];
-  activeVariant?: ButtonVariants['variant'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
-  [key: string]: unknown;
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant,
-  ...rest
-} = Astro.props as RLAButtonProps
-
-const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
-const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingIconClass = loading ? "animate-spin" : ""
-const trailingIconClass = loading ? "animate-spin" : ""
-
-const classes = resolveClasses(button, {
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active
-}, useUi("button", uiProp), className);
-
-const Tag = href ? "a" : "button";
----
-<Tag
-  class={classes.root}
-  data-slot="rla-button"
-  {...(Tag === "a" ? { href } : {})}
-  {...rest}
->
-  <slot name="leading" {...{ ui: classes }}>
-    {isLeading && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
-        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: classes }}>
-    {isTrailing && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
-        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import buttonTheme from "../../themes/button.theme"
+
+const button = scv(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
+
+export interface RLAButtonProps {
+  variant?: ButtonVariants['variant'];
+  color?: ButtonVariants['color'];
+  size?: ButtonVariants['size'];
+  href?: string;
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  loading?: boolean;
+  square?: boolean;
+  block?: boolean;
+  active?: boolean;
+  activeColor?: ButtonVariants['color'];
+  activeVariant?: ButtonVariants['variant'];
+  ui?: ComponentSlots<typeof buttonTheme>;
+  class?: any;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAButtonProps
+
+const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active
+}, useUi("button", uiProp), className);
+
+const Tag = href ? "a" : "button";
+---
+<Tag
+  class={classes.root}
+  data-slot="root"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+</Tag>

package/src/components/astro/RLAEmbedYoutube.astro

@@ -0,0 +1,188 @@
+---
+const PLACEHOLDER_THUMBNAIL = "/assets/blog-placeholder-1.jpg";
+
+const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
+
+const VALID_ID_PATTERN = /^[\w-]{11}$/;
+
+const KNOWN_PREFIXES = ["www.", "m.", "music.", "gaming."];
+
+const YOUTUBE_THUMB_BASE = "https://i3.ytimg.com/vi/";
+
+const MAXRES_THUMBNAIL = "maxresdefault.jpg";
+
+const DEFAULT_THUMBNAIL = "hqdefault.jpg";
+
+const thumbnailAvailabilityCache = new Map<string, boolean>();
+
+function normalizeHost(host: string): string {
+  for (const prefix of KNOWN_PREFIXES) {
+    if (host.startsWith(prefix)) {
+      return host.slice(prefix.length);
+    }
+  }
+  return host;
+}
+
+function sanitizeVideoId(id: string | null): string | null {
+  if (!id) return null;
+  return VALID_ID_PATTERN.test(id) ? id : null;
+}
+
+function extractYoutubeVideoId(rawUrl: string): string | null {
+  if (!rawUrl) return null;
+
+  try {
+    const url = new URL(rawUrl);
+    const host = normalizeHost(url.hostname);
+
+    if (host === "youtu.be") {
+      const id = url.pathname.split("/").filter(Boolean)[0] ?? null;
+      return sanitizeVideoId(id);
+    }
+
+    if (host.endsWith("youtube.com")) {
+      const paramsId = sanitizeVideoId(url.searchParams.get("v"));
+      if (paramsId) return paramsId;
+
+      const segments = url.pathname.split("/").filter(Boolean);
+      if (!segments.length) return null;
+
+      if (segments[0] === "embed" || segments[0] === "shorts" || segments[0] === "live") {
+        return sanitizeVideoId(segments[1] ?? null);
+      }
+
+      return sanitizeVideoId(segments[segments.length - 1] ?? null);
+    }
+  } catch {
+    // If it's just an 11-character ID passed directly, return it validated
+    if (VALID_ID_PATTERN.test(rawUrl)) {
+      return rawUrl;
+    }
+    return null;
+  }
+
+  return null;
+}
+
+async function isThumbnailAvailable(url: string): Promise<boolean> {
+  if (thumbnailAvailabilityCache.has(url)) {
+    return thumbnailAvailabilityCache.get(url)!;
+  }
+
+  if (typeof fetch !== "function") {
+    return false;
+  }
+
+  try {
+    const response = await fetch(url, { method: "HEAD" });
+    let available = response.ok;
+
+    if (!available && response.status === 405) {
+      const getResponse = await fetch(url, { method: "GET" });
+      available = getResponse.ok;
+    }
+
+    thumbnailAvailabilityCache.set(url, available);
+    return available;
+  } catch {
+    return false;
+  }
+}
+
+async function getYoutubeThumbnail(rawUrl: string): Promise<string> {
+  const id = extractYoutubeVideoId(rawUrl);
+  if (!id) return PLACEHOLDER_THUMBNAIL;
+
+  const baseUrl = `${YOUTUBE_THUMB_BASE}${id}`;
+  const maxResUrl = `${baseUrl}/${MAXRES_THUMBNAIL}`;
+
+  if (await isThumbnailAvailable(maxResUrl)) {
+    return maxResUrl;
+  }
+
+  return `${baseUrl}/${DEFAULT_THUMBNAIL}`;
+}
+
+function getYoutubeEmbedUrl(rawUrl: string): string | null {
+  const id = extractYoutubeVideoId(rawUrl);
+  return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
+}
+
+interface Props {
+  src: string;
+  title?: string;
+  class?: string;
+}
+
+const { src, title = "YouTube video player", class: className } = Astro.props;
+
+const embedUrl = getYoutubeEmbedUrl(src);
+const thumbnail = await getYoutubeThumbnail(src);
+const isPlayable = Boolean(embedUrl);
+const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable";
+---
+
+<div class:list={["relative aspect-video h-full w-full cursor-pointer overflow-hidden", className]} data-youtube-video>
+  <button
+    type="button"
+    class="absolute inset-0 aspect-video h-full w-full overflow-hidden group"
+    data-youtube-trigger
+    aria-label={ariaLabel}
+    data-embed-url={isPlayable ? embedUrl : undefined}
+    disabled={!isPlayable}
+    data-video-title={title}
+  >
+    <img
+      src={thumbnail}
+      class="h-full w-full object-cover"
+      alt={title}
+      width="1280"
+      height="720"
+      loading="lazy"
+    />
+
+    <span class="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/30 transition-colors">
+      <svg class="h-20 w-20 text-white opacity-85 transition-all transform group-hover:opacity-100 group-hover:scale-110 duration-300" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M8 5v14l11-7z"/>
+      </svg>
+    </span>
+  </button>
+</div>
+
+<script is:inline>
+  (() => {
+    const root = document.currentScript?.previousElementSibling;
+    if (!(root instanceof HTMLElement)) return;
+
+    const trigger = root.querySelector("[data-youtube-trigger]");
+    if (!(trigger instanceof HTMLButtonElement)) return;
+
+    const embedUrl = trigger.dataset.embedUrl;
+    const title = trigger.dataset.videoTitle;
+    if (!embedUrl) return;
+
+    const activate = () => {
+      const iframe = document.createElement("iframe");
+      iframe.src = embedUrl;
+      iframe.title = title;
+      iframe.allow =
+        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+      iframe.allowFullscreen = true;
+      iframe.loading = "lazy";
+      iframe.referrerPolicy = "strict-origin-when-cross-origin";
+      iframe.classList.add("w-full", "h-full", "absolute", "inset-0");
+
+      root.replaceChildren(iframe);
+    };
+
+    // click and accessibility activation
+    trigger.addEventListener("click", activate, { once: true });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    }, { once: true });
+  })();
+</script>

package/src/components/astro/RLAFooter.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
@@ -9,15 +9,15 @@ type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLAFooterProps {
   contain?: FooterVariants['contain'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof footerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
 const {
   contain = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAFooterProps
 
@@ -26,17 +26,17 @@ const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), cla
 
 <footer
   class:list={[classes.root]}
-  data-slot="rla-footer"
+  data-slot="root"
   {...rest}
 >
   <div class:list={[classes.container]}>
-    <div class:list={[classes.left]} data-slot="footer-left">
+    <div class:list={[classes.left]} data-slot="left">
       <slot name="left" />
     </div>
-    <div class:list={[classes.center]} data-slot="footer-center">
+    <div class:list={[classes.center]} data-slot="center">
       <slot name="center" />
     </div>
-    <div class:list={[classes.right]} data-slot="footer-right">
+    <div class:list={[classes.right]} data-slot="right">
       <slot name="right" />
     </div>
   </div>

package/src/components/astro/RLAHeader.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import headerTheme from "../../themes/header.theme"
 
 const header = scv(headerTheme)
@@ -13,8 +13,8 @@ export interface RLAHeaderProps {
   fixed?: HeaderVariants['fixed'];
   stackIndex?: number;
   hideOnScroll?: boolean;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof headerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -24,8 +24,8 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAHeaderProps;
 
@@ -41,6 +41,7 @@ const zIndex = 100 - stackIndex;
 
 <header
   id={headerId}
+  data-slot="root"
   class:list={[classes.root]}
   data-rla-header={fixed ? "true" : undefined}
   data-stack-index={stackIndex}
@@ -50,13 +51,13 @@ const zIndex = 100 - stackIndex;
 >
   <div class:list={[classes.content]} data-header-content>
     <div class:list={[classes.container]}>
-      <div class:list={[classes.left]} data-slot="header-left">
+      <div class:list={[classes.left]} data-slot="left">
         <slot name="left" />
       </div>
-      <div class:list={[classes.center]} data-slot="header-center">
+      <div class:list={[classes.center]} data-slot="center">
         <slot name="center" />
       </div>
-      <div class:list={[classes.right]} data-slot="header-right">
+      <div class:list={[classes.right]} data-slot="right">
         <slot name="right" />
       </div>
     </div>

package/src/components/astro/RLAIcon.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
@@ -10,16 +10,16 @@ type IconVariants = ComponentVariants<typeof iconTheme>
 export interface RLAIconProps {
   name: string
   size?: IconVariants['size']
-  class?: string
-  ui?: Partial<Record<string, string>>
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
   [key: string]: unknown
 }
 
 const {
   name,
   size = "md",
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAIconProps
 
@@ -28,7 +28,7 @@ const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
 
 <span
   class={classes.root}
-  data-slot="rla-icon"
+  data-slot="root"
   aria-hidden="true"
   {...rest}
 >

package/src/components/astro/RLALogo.astro

@@ -1,6 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
@@ -10,9 +11,9 @@ export interface RLALogoProps {
   variant?: string;
   mode?: "color" | "white" | "black";
   href?: string;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
   alt?: string;
+  ui?: ComponentSlots<typeof logoTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -20,9 +21,9 @@ const {
   variant = "logomark",
   mode,
   href = "/",
-  class: className,
-  ui: uiProp,
   alt,
+  ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLALogoProps;
 
@@ -50,7 +51,7 @@ const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
   class={classes.root}
   href={href}
   aria-label={alt || variant}
-  data-slot="rla-logo"
+  data-slot="root"
   {...rest}
 >
   {logoSrc ? (

package/src/components/astro/RLAPlaceholder.astro

@@ -1,19 +1,20 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
 export interface RLAPlaceholderProps {
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof placeholderTheme>
+  class?: any
   [key: string]: unknown
 }
 
 const {
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAPlaceholderProps
 

package/src/components/astro/RLAScrollToTop.astro

@@ -1,7 +1,7 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 
 const scrollToTop = scv(scrollToTopTheme)
@@ -13,8 +13,8 @@ export interface RLAScrollToTopProps {
   duration?: number;
   threshold?: number;
   showProgress?: boolean;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
+  ui?: ComponentSlots<typeof scrollToTopTheme>;
+  class?: any;
   [key: string]: unknown;
 }