@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAToast.astro

@@ -1,121 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToastProps } from "../../types"
-import toastThemeDefault, { createToastTheme } from "../../themes/toast.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const toastTheme = uiConfig.colors ? createToastTheme() : toastThemeDefault
-const toast = scv(toastTheme)
-
-const {
-  title,
-  description,
-  variant = "default",
-  actionLabel,
-  duration = 5000,
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  dismissable = true,
-  ...rest
-} = Astro.props as ToastProps
-
-const classes = resolveClasses(toast, {
-  variant: ["success", "error", "warning", "info"].includes(variant ?? "") ? variant : "default"
-}, useUi("toast", uiProp), className)
-
-const variantIcons: Record<string, string> = {
-  default: "i-lucide-bell",
-  error: "i-lucide-alert-circle",
-  success: "i-lucide-check-circle-2",
-  warning: "i-lucide-alert-triangle",
-  info: "i-lucide-info",
-}
-
-const icon = variantIcons[variant] ?? variantIcons.default!
----
-
-<div
-  class={classes.root}
-  data-slot="root"
-  data-toast
-  data-duration={duration}
-  data-dismissable={dismissable.toString()}
-  role="alert"
-  aria-live="assertive"
-  aria-atomic="true"
-  {...rest}
->
-  {/* Icon */}
-  <span class={icon + " size-4 shrink-0 mt-0.5"} aria-hidden="true" />
-
-  {/* Text body */}
-  <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-    {(title || Astro.slots.has("title")) && (
-      <div class={classes.title} data-slot="title">
-        <slot name="title">{title}</slot>
-      </div>
-    )}
-    {(description || Astro.slots.has("description")) && (
-      <div class={classes.description} data-slot="description">
-        <slot name="description">{description}</slot>
-      </div>
-    )}
-    <slot />
-    {(Astro.slots.has("actions") || actionLabel) && (
-      <div class="flex items-center justify-end gap-2 mt-3" data-slot="actions">
-        <slot name="actions">
-          {actionLabel && (
-            <button
-              type="button"
-              class={classes.action}
-              data-slot="action"
-              data-toast-action
-            >
-              {actionLabel}
-            </button>
-          )}
-        </slot>
-      </div>
-    )}
-  </div>
-
-  {/* Close button */}
-  {dismissable !== false && (
-    <button
-      type="button"
-      class={classes.close}
-      data-slot="close"
-      data-toast-close
-      aria-label="Dismiss notification"
-    >
-      <span class="i-lucide-x size-3.5" aria-hidden="true" />
-    </button>
-  )}
-</div>
-
-<script>
-  document.querySelectorAll("[data-toast]").forEach(toast => {
-    const dismissable = toast.getAttribute("data-dismissable") !== "false";
-    if (!dismissable) return;
-
-    const close = toast.querySelector("[data-toast-close]");
-    const duration = parseInt((toast as HTMLElement).dataset.duration ?? "5000", 10);
-
-    const dismiss = () => {
-      toast.classList.add("opacity-0", "translate-y-2", "pointer-events-none");
-      toast.addEventListener("transitionend", () => toast.remove(), { once: true });
-    };
-
-    // Auto-dismiss
-    if (duration > 0) {
-      setTimeout(dismiss, duration);
-    }
-
-    // Manual close
-    close?.addEventListener("click", dismiss);
-  });
-</script>

package/src/components/astro/RLATooltip.astro

@@ -1,35 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TooltipProps } from "../../types"
-import tooltipThemeDefault, { createTooltipTheme } from "../../themes/tooltip.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const tooltipTheme = uiConfig.colors ? createTooltipTheme() : tooltipThemeDefault
-
-const tooltip = scv(tooltipTheme)
-
-const {
-  content,
-  placement = "top",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TooltipProps
-
-const classes = resolveClasses(tooltip, {
-  placement
-}, useUi("tooltip", uiProp), className)
----
-<div class={classes.root} data-slot="tooltip-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot />
-  </div>
-
-  <div class={classes.content} data-slot="content" role="tooltip">
-    <slot name="content">
-      {content}
-    </slot>
-  </div>
-</div>

package/src/components/astro/RLATour.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TourProps } from "../../types"
-import tourThemeDefault, { createTourTheme } from "../../themes/tour.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const tourTheme = uiConfig.colors ? createTourTheme() : tourThemeDefault
-
-const tour = scv(tourTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TourProps
-
-const classes = resolveClasses(tour, {}, useUi("tour", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLATree.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TreeProps } from "../../types"
-import treeThemeDefault, { createTreeTheme } from "../../themes/tree.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const treeTheme = uiConfig.colors ? createTreeTheme() : treeThemeDefault
-
-const tree = scv(treeTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TreeProps
-
-const classes = resolveClasses(tree, {}, useUi("tree", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAUser.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { UserProps } from "../../types"
-import userThemeDefault, { createUserTheme } from "../../themes/user.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const userTheme = uiConfig.colors ? createUserTheme() : userThemeDefault
-
-const user = scv(userTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as UserProps
-
-const classes = resolveClasses(user, {}, useUi("user", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAVideo.astro

@@ -1,201 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { VideoProps } from "../../types"
-import videoThemeDefault, { createVideoTheme } from "../../themes/video.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import Image from "astro/components/Image.astro"
-
-const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
-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("/").find(Boolean) ?? 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;
-}
-
-const uiConfig = getUIConfig()
-const videoTheme = uiConfig.colors ? createVideoTheme() : videoThemeDefault
-
-const video = scv(videoTheme)
-
-const {
-  src,
-  title = "YouTube Video Player",
-  icon = "i-lucide-play",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as VideoProps
-
-const classes = resolveClasses(video, {
-  title: !!(Astro.slots.has("title") || title),
-  icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("video", uiProp), className);
-
-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={[classes.root]}
-    {...rest}
->
-  <button
-    type="button"
-    data-youtube-trigger
-    aria-label={ariaLabel}
-    data-embed-url={isPlayable ? embedUrl : undefined}
-    disabled={!isPlayable}
-    data-video-title={title}
-    class:list={[classes.trigger]}
-  >
-    <Image
-      layout="full-width"
-      src={thumbnail}
-      alt={title}
-      width="1280"
-      height="720"
-      loading="lazy"
-      class:list={[classes.image]}
-    />
-
-    <slot name="icon">
-      <span class:list={[classes.icon, icon]} aria-hidden="true" />
-    </slot>
-  </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);
-    };
-
-    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/RLAWatermark.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { WatermarkProps } from "../../types"
-import watermarkThemeDefault, { createWatermarkTheme } from "../../themes/watermark.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const watermarkTheme = uiConfig.colors ? createWatermarkTheme() : watermarkThemeDefault
-
-const watermark = scv(watermarkTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as WatermarkProps
-
-const classes = resolveClasses(watermark, {}, useUi("watermark", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAWindowMockup.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { WindowMockupProps } from "../../types"
-import windowMockupThemeDefault, { createWindowMockupTheme } from "../../themes/window-mockup.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const windowMockupTheme = uiConfig.colors ? createWindowMockupTheme() : windowMockupThemeDefault
-
-const windowMockup = scv(windowMockupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as WindowMockupProps
-
-const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>