@rimelight/ui 0.0.37 → 0.0.39

package/src/components/tree/tree.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTreeTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createTreeTheme()

package/src/components/user/RLAUser.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { UserProps } from "./user"
+import userTheme from "./user.theme"
+
+
+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/user/user.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createUserTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createUserTheme()

package/src/components/video/RLAVideo.astro

@@ -0,0 +1,205 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { VideoProps } from "./video"
+import videoTheme from "./video.theme"
+import { Image } from "astro:assets"
+import RLAIcon from "../icon/RLAIcon.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 video = scv(videoTheme)
+
+const {
+  src,
+  title = "YouTube Video Player",
+  icon = "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">
+      <RLAIcon name={icon} class={classes.icon} aria-hidden="true" />
+    </slot>
+  </button>
+</div>
+{Astro.slots.has("transcript") && (
+  <div class="mt-2 text-sm text-zinc-400" data-slot="transcript">
+    <slot name="transcript" />
+  </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/video/video.theme.ts

@@ -0,0 +1,17 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createVideoTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "image", "icon"],
+    base: {
+      root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
+      trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
+      image: "h-full w-full object-cover",
+      icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
+    },
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+  })
+
+export default createVideoTheme()

package/src/components/watermark/RLAWatermark.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { WatermarkProps } from "./watermark"
+import watermarkTheme from "./watermark.theme"
+
+
+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/watermark/watermark.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createWatermarkTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createWatermarkTheme()

package/src/components/window-mockup/RLAWindowMockup.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { WindowMockupProps } from "./window-mockup"
+import windowMockupTheme from "./window-mockup.theme"
+
+
+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>

package/src/components/window-mockup/window-mockup.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createWindowMockupTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createWindowMockupTheme()

package/src/config/color.config.ts

@@ -0,0 +1,300 @@
+export const colorScales = {
+  neutral: {
+    light: {
+      "50": "oklch(0.985 0 0)",
+      "100": "oklch(0.97 0 0)",
+      "200": "oklch(0.922 0 0)",
+      "300": "oklch(0.87 0 0)",
+      "400": "oklch(0.708 0 0)",
+      "500": "oklch(0.556 0 0)",
+      "600": "oklch(0.439 0 0)",
+      "700": "oklch(0.371 0 0)",
+      "800": "oklch(0.269 0 0)",
+      "900": "oklch(0.205 0 0)",
+      "950": "oklch(0.145 0 0)"
+    },
+    dark: {
+      "50": "oklch(0.145 0 0)",
+      "100": "oklch(0.20 0 0)",
+      "200": "oklch(0.28 0 0)",
+      "300": "oklch(0.35 0 0)",
+      "400": "oklch(0.44 0 0)",
+      "500": "oklch(0.55 0 0)",
+      "600": "oklch(0.62 0 0)",
+      "700": "oklch(0.70 0 0)",
+      "800": "oklch(0.78 0 0)",
+      "900": "oklch(0.87 0 0)",
+      "950": "oklch(0.95 0 0)"
+    }
+  },
+  primary: {
+    light: {
+      "50": "oklch(0.97 0.015 260)",
+      "100": "oklch(0.92 0.04 260)",
+      "200": "oklch(0.85 0.08 260)",
+      "300": "oklch(0.76 0.13 260)",
+      "400": "oklch(0.66 0.18 260)",
+      "500": "oklch(0.53 0.21 260)",
+      "600": "oklch(0.44 0.19 260)",
+      "700": "oklch(0.35 0.15 260)",
+      "800": "oklch(0.27 0.11 260)",
+      "900": "oklch(0.20 0.07 260)",
+      "950": "oklch(0.15 0.04 260)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.04 260)",
+      "100": "oklch(0.20 0.07 260)",
+      "200": "oklch(0.27 0.11 260)",
+      "300": "oklch(0.35 0.15 260)",
+      "400": "oklch(0.44 0.19 260)",
+      "500": "oklch(0.53 0.21 260)",
+      "600": "oklch(0.61 0.19 260)",
+      "700": "oklch(0.69 0.15 260)",
+      "800": "oklch(0.77 0.10 260)",
+      "900": "oklch(0.86 0.06 260)",
+      "950": "oklch(0.93 0.02 260)"
+    }
+  },
+  secondary: {
+    light: {
+      "50": "oklch(0.987 0.022 95.277)",
+      "100": "oklch(0.962 0.059 95.617)",
+      "200": "oklch(0.924 0.12 95.746)",
+      "300": "oklch(0.879 0.169 91.605)",
+      "400": "oklch(0.828 0.189 84.429)",
+      "500": "oklch(0.769 0.188 70.08)",
+      "600": "oklch(0.666 0.179 58.318)",
+      "700": "oklch(0.555 0.163 48.998)",
+      "800": "oklch(0.473 0.137 46.201)",
+      "900": "oklch(0.414 0.112 45.904)",
+      "950": "oklch(0.279 0.077 45.635)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.015 95)",
+      "100": "oklch(0.20 0.04 95)",
+      "200": "oklch(0.28 0.08 96)",
+      "300": "oklch(0.35 0.12 92)",
+      "400": "oklch(0.44 0.15 84)",
+      "500": "oklch(0.52 0.16 70)",
+      "600": "oklch(0.60 0.15 58)",
+      "700": "oklch(0.68 0.12 49)",
+      "800": "oklch(0.76 0.09 46)",
+      "900": "oklch(0.84 0.06 46)",
+      "950": "oklch(0.92 0.03 46)"
+    }
+  },
+  info: {
+    light: {
+      "50": "oklch(0.97 0.014 254.604)",
+      "100": "oklch(0.932 0.032 255.585)",
+      "200": "oklch(0.882 0.059 254.128)",
+      "300": "oklch(0.809 0.105 251.813)",
+      "400": "oklch(0.707 0.165 254.624)",
+      "500": "oklch(0.623 0.214 259.815)",
+      "600": "oklch(0.546 0.245 262.881)",
+      "700": "oklch(0.488 0.243 264.376)",
+      "800": "oklch(0.424 0.199 265.638)",
+      "900": "oklch(0.379 0.146 265.522)",
+      "950": "oklch(0.282 0.091 267.935)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 255)",
+      "100": "oklch(0.20 0.025 256)",
+      "200": "oklch(0.28 0.04 254)",
+      "300": "oklch(0.35 0.07 252)",
+      "400": "oklch(0.44 0.12 255)",
+      "500": "oklch(0.52 0.17 260)",
+      "600": "oklch(0.60 0.20 263)",
+      "700": "oklch(0.68 0.18 264)",
+      "800": "oklch(0.76 0.13 266)",
+      "900": "oklch(0.84 0.08 266)",
+      "950": "oklch(0.92 0.04 268)"
+    }
+  },
+  success: {
+    light: {
+      "50": "oklch(0.982 0.018 155.826)",
+      "100": "oklch(0.962 0.044 156.743)",
+      "200": "oklch(0.925 0.084 155.995)",
+      "300": "oklch(0.871 0.15 154.449)",
+      "400": "oklch(0.792 0.209 151.711)",
+      "500": "oklch(0.723 0.219 149.579)",
+      "600": "oklch(0.627 0.194 149.214)",
+      "700": "oklch(0.527 0.154 150.069)",
+      "800": "oklch(0.448 0.119 151.328)",
+      "900": "oklch(0.393 0.095 152.535)",
+      "950": "oklch(0.266 0.065 152.934)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 156)",
+      "100": "oklch(0.20 0.03 157)",
+      "200": "oklch(0.28 0.055 156)",
+      "300": "oklch(0.35 0.10 154)",
+      "400": "oklch(0.44 0.16 152)",
+      "500": "oklch(0.52 0.18 150)",
+      "600": "oklch(0.60 0.16 149)",
+      "700": "oklch(0.68 0.12 150)",
+      "800": "oklch(0.76 0.08 151)",
+      "900": "oklch(0.84 0.05 153)",
+      "950": "oklch(0.92 0.03 153)"
+    }
+  },
+  warning: {
+    light: {
+      "50": "oklch(0.987 0.026 102.212)",
+      "100": "oklch(0.973 0.071 103.193)",
+      "200": "oklch(0.945 0.129 101.54)",
+      "300": "oklch(0.905 0.182 98.111)",
+      "400": "oklch(0.852 0.199 91.936)",
+      "500": "oklch(0.795 0.184 86.047)",
+      "600": "oklch(0.681 0.162 75.834)",
+      "700": "oklch(0.554 0.135 66.442)",
+      "800": "oklch(0.476 0.114 61.907)",
+      "900": "oklch(0.421 0.095 57.708)",
+      "950": "oklch(0.286 0.066 53.813)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.015 102)",
+      "100": "oklch(0.20 0.045 103)",
+      "200": "oklch(0.28 0.085 102)",
+      "300": "oklch(0.35 0.13 98)",
+      "400": "oklch(0.44 0.16 92)",
+      "500": "oklch(0.52 0.16 86)",
+      "600": "oklch(0.60 0.14 76)",
+      "700": "oklch(0.68 0.11 66)",
+      "800": "oklch(0.76 0.08 62)",
+      "900": "oklch(0.84 0.05 58)",
+      "950": "oklch(0.92 0.03 54)"
+    }
+  },
+  error: {
+    light: {
+      "50": "oklch(0.971 0.013 17.38)",
+      "100": "oklch(0.936 0.032 17.717)",
+      "200": "oklch(0.885 0.062 18.334)",
+      "300": "oklch(0.808 0.114 19.571)",
+      "400": "oklch(0.704 0.191 22.216)",
+      "500": "oklch(0.637 0.237 25.331)",
+      "600": "oklch(0.577 0.245 27.325)",
+      "700": "oklch(0.505 0.213 27.518)",
+      "800": "oklch(0.444 0.177 26.899)",
+      "900": "oklch(0.396 0.141 25.723)",
+      "950": "oklch(0.258 0.092 26.042)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 17)",
+      "100": "oklch(0.20 0.02 18)",
+      "200": "oklch(0.28 0.04 18)",
+      "300": "oklch(0.35 0.075 20)",
+      "400": "oklch(0.44 0.14 22)",
+      "500": "oklch(0.52 0.19 25)",
+      "600": "oklch(0.60 0.20 27)",
+      "700": "oklch(0.68 0.17 28)",
+      "800": "oklch(0.76 0.12 27)",
+      "900": "oklch(0.84 0.08 26)",
+      "950": "oklch(0.92 0.04 26)"
+    }
+  },
+  commentary: {
+    light: {
+      "50": "oklch(0.977 0.017 320.058)",
+      "100": "oklch(0.952 0.037 318.852)",
+      "200": "oklch(0.903 0.076 319.62)",
+      "300": "oklch(0.833 0.145 321.434)",
+      "400": "oklch(0.74 0.238 322.16)",
+      "500": "oklch(0.667 0.295 322.15)",
+      "600": "oklch(0.591 0.293 322.896)",
+      "700": "oklch(0.518 0.253 323.949)",
+      "800": "oklch(0.452 0.211 324.591)",
+      "900": "oklch(0.401 0.17 325.612)",
+      "950": "oklch(0.293 0.136 325.661)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 320)",
+      "100": "oklch(0.20 0.025 319)",
+      "200": "oklch(0.28 0.05 320)",
+      "300": "oklch(0.35 0.10 321)",
+      "400": "oklch(0.44 0.18 322)",
+      "500": "oklch(0.52 0.24 322)",
+      "600": "oklch(0.60 0.23 323)",
+      "700": "oklch(0.68 0.19 324)",
+      "800": "oklch(0.76 0.14 325)",
+      "900": "oklch(0.84 0.09 326)",
+      "950": "oklch(0.92 0.05 326)"
+    }
+  },
+  ideation: {
+    light: {
+      "50": "oklch(0.969 0.016 293.756)",
+      "100": "oklch(0.943 0.029 294.588)",
+      "200": "oklch(0.894 0.057 293.283)",
+      "300": "oklch(0.811 0.111 293.571)",
+      "400": "oklch(0.702 0.183 293.541)",
+      "500": "oklch(0.606 0.25 292.717)",
+      "600": "oklch(0.541 0.281 293.009)",
+      "700": "oklch(0.491 0.27 292.581)",
+      "800": "oklch(0.432 0.232 292.759)",
+      "900": "oklch(0.38 0.189 293.745)",
+      "950": "oklch(0.283 0.141 291.089)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 294)",
+      "100": "oklch(0.20 0.02 295)",
+      "200": "oklch(0.28 0.04 293)",
+      "300": "oklch(0.35 0.075 294)",
+      "400": "oklch(0.44 0.14 294)",
+      "500": "oklch(0.52 0.20 293)",
+      "600": "oklch(0.60 0.22 293)",
+      "700": "oklch(0.68 0.20 293)",
+      "800": "oklch(0.76 0.15 293)",
+      "900": "oklch(0.84 0.10 294)",
+      "950": "oklch(0.92 0.05 291)"
+    }
+  },
+  source: {
+    light: {
+      "50": "oklch(0.984 0.019 200.873)",
+      "100": "oklch(0.956 0.045 203.388)",
+      "200": "oklch(0.917 0.08 205.041)",
+      "300": "oklch(0.865 0.127 207.078)",
+      "400": "oklch(0.789 0.154 211.53)",
+      "500": "oklch(0.715 0.143 215.221)",
+      "600": "oklch(0.609 0.126 221.723)",
+      "700": "oklch(0.52 0.105 223.128)",
+      "800": "oklch(0.45 0.085 224.283)",
+      "900": "oklch(0.398 0.07 227.392)",
+      "950": "oklch(0.302 0.056 229.695)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 201)",
+      "100": "oklch(0.20 0.03 203)",
+      "200": "oklch(0.28 0.055 205)",
+      "300": "oklch(0.35 0.09 207)",
+      "400": "oklch(0.44 0.12 212)",
+      "500": "oklch(0.52 0.12 215)",
+      "600": "oklch(0.60 0.10 222)",
+      "700": "oklch(0.68 0.08 223)",
+      "800": "oklch(0.76 0.055 224)",
+      "900": "oklch(0.84 0.04 227)",
+      "950": "oklch(0.92 0.025 230)"
+    }
+  }
+} as const
+
+export const colorNames = [
+  "neutral",
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "commentary",
+  "ideation",
+  "source"
+] as const satisfies ReadonlyArray<keyof typeof colorScales>
+
+export const colorConfig = {
+  scales: colorScales,
+  colors: colorNames
+}