@rimelight/ui 0.0.47 → 0.0.49

package/src/components/video/RLSVideo.tsx

@@ -0,0 +1,158 @@
+import { createMemo, createSignal, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { VideoProps } from "./video"
+import { videoTheme } from "./video.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSVideoProps extends VideoProps {
+  children?: JSX.Element
+  thumbnail?: string
+  iconSlot?: JSX.Element
+  transcriptSlot?: JSX.Element
+}
+
+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/"
+
+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 (VALID_ID_PATTERN.test(rawUrl)) {
+      return rawUrl
+    }
+    return null
+  }
+  return null
+}
+
+const RLSVideo: Component<RLSVideoProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "src",
+    "title",
+    "icon",
+    "thumbnail",
+    "iconSlot",
+    "transcriptSlot",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const [isPlaying, setIsPlaying] = createSignal(false)
+
+  const videoId = createMemo(() => extractYoutubeVideoId(props.src || ""))
+  const embedUrl = createMemo(() =>
+    videoId() ? `${YOUTUBE_EMBED_BASE}${videoId()}?autoplay=1` : null
+  )
+  const defaultThumbnail = createMemo(() =>
+    videoId() ? `${YOUTUBE_THUMB_BASE}${videoId()}/hqdefault.jpg` : PLACEHOLDER_THUMBNAIL
+  )
+
+  const titleText = () => props.title || "YouTube Video Player"
+  const iconName = () => props.icon || "play"
+  const isPlayable = () => Boolean(embedUrl())
+
+  const resolvedClasses = createMemo(() =>
+    videoTheme({
+      title: !!props.title,
+      icon: !!props.icon,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div>
+      <div class={resolvedClasses().root} data-slot="root" {...rest}>
+        <Show
+          when={isPlaying() && embedUrl()}
+          fallback={
+            <button
+              type="button"
+              class={resolvedClasses().trigger}
+              data-slot="trigger"
+              aria-label={isPlayable() ? "Play YouTube Video" : "YouTube Video Unavailable"}
+              disabled={!isPlayable()}
+              onClick={() => setIsPlaying(true)}
+            >
+              <img
+                src={props.thumbnail || defaultThumbnail()}
+                alt={titleText()}
+                loading="lazy"
+                class={resolvedClasses().image}
+                data-slot="image"
+              />
+
+              {props.iconSlot !== undefined ? (
+                props.iconSlot
+              ) : (
+                <RLSIcon
+                  name={iconName()}
+                  class={resolvedClasses().icon}
+                  data-slot="icon"
+                  aria-hidden="true"
+                />
+              )}
+            </button>
+          }
+        >
+          <iframe
+            src={embedUrl()!}
+            title={titleText()}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+            loading="lazy"
+            referrerpolicy="strict-origin-when-cross-origin"
+            class="w-full h-full absolute inset-0 border-0"
+          />
+        </Show>
+      </div>
+
+      <Show when={props.transcriptSlot !== undefined || props.children !== undefined}>
+        <div class="mt-2 text-sm text-zinc-400" data-slot="transcript">
+          {props.transcriptSlot !== undefined ? props.transcriptSlot : props.children}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSVideo

package/src/components/watermark/RLSWatermark.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { WatermarkProps } from "./watermark"
+import { watermarkTheme } from "./watermark.theme"
+
+export interface RLSWatermarkProps extends WatermarkProps {
+  children?: JSX.Element
+}
+
+const RLSWatermark: Component<RLSWatermarkProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    watermarkTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSWatermark

package/src/components/window-mockup/RLSWindowMockup.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { WindowMockupProps } from "./window-mockup"
+import { windowMockupTheme } from "./window-mockup.theme"
+
+export interface RLSWindowMockupProps extends WindowMockupProps {
+  children?: JSX.Element
+}
+
+const RLSWindowMockup: Component<RLSWindowMockupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    windowMockupTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSWindowMockup

package/src/preset.ts

@@ -141,7 +141,79 @@ export default function rimelightUiPreset({ colors, icons, presets = {} }: UICon
 }
 [data-theme="dark"] { color-scheme: dark; }
 [data-theme="light"] { color-scheme: light; }
-body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }`
+body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }
+
+/* Reduced motion - disable all animations for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Global focus-visible ring for consistent keyboard focus */
+:focus-visible {
+  outline: 2px solid var(--rl-primary-500);
+  outline-offset: 2px;
+}
+
+/* Ensure minimum touch target sizes (WCAG 2.2 - 24x24 minimum, 44x44 enhanced) */
+button:not(:disabled),
+[role="button"]:not(:disabled),
+a[href],
+input:not([type="hidden"]),
+select,
+textarea,
+summary {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+/* Enhanced touch targets for primary interactive elements */
+@media (pointer: coarse) {
+  button:not(:disabled),
+  [role="button"]:not(:disabled),
+  a[href] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* Improve skip link visibility */
+.skip-link:focus-visible {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  background: var(--rl-primary-600);
+  color: white;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+@keyframes carousel {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+@keyframes carousel-inverse {
+  0% { transform: translateX(350%); }
+  100% { transform: translateX(-100%); }
+}
+@keyframes swing {
+  0%, 100% { transform: translateX(-50%); }
+  50% { transform: translateX(250%); }
+}
+@keyframes elastic {
+  0% { transform: scaleX(0.1) translateX(-100%); }
+  50% { transform: scaleX(0.7) translateX(100%); }
+  100% { transform: scaleX(0.1) translateX(350%); }
+}`
       }
     ]
   }

package/src/resolver.ts

@@ -76,7 +76,12 @@ export function defineTheme<const S extends string>(name: string, themeConfig: T
       res[slots[i]!] = baseMap[slots[i]!] || ""
     }
 
-    const values = { ...defaultVariants, ...props }
+    const values: Record<string, any> = { ...defaultVariants }
+    for (const k in props) {
+      if (props[k] !== undefined) {
+        values[k] = props[k]
+      }
+    }
     const color = autoColor ? (props.color ?? defaultVariants.color) : undefined
 
     for (let k = 0; k < variantKeys.length; k++) {

package/src/virtual.d.ts

@@ -2,3 +2,9 @@ declare module "virtual:rimelight/ui" {
   import type { UIConfig } from "./types"
   export default {} as UIConfig
 }
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  const component: DefineComponent<Record<string, any>, Record<string, any>, any>
+  export default component
+}