@rimelight/ui 0.0.36 → 0.0.38

package/src/components/vue/RLVToast.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToastProps } from "../../types/components/toast"
-import toastTheme from "../../themes/toast.theme"
-
-const toast = scv(toastTheme)
-
-const props = withDefaults(defineProps<ToastProps & { id?: string | number }>(), {
-  variant: "default",
-  duration: 5000
-})
-
-const emit = defineEmits<{
-  (e: "close", id: string | number | undefined): void
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(toast, { variant: props.variant }, useUi("toast", props.ui), props.class)
-)
-
-const variantIcons: Record<string, string> = {
-  default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
-  success: "i-lucide-check-circle-2",
-  warning: "i-lucide-alert-triangle",
-  info: "i-lucide-info"
-}
-
-const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!)
-</script>
-
-<template>
-  <div
-    :class="resolvedClasses.root"
-    data-slot="root"
-    role="alert"
-    aria-live="assertive"
-    aria-atomic="true"
-  >
-    <span :class="[icon, 'size-4 shrink-0 mt-0.5']" aria-hidden="true" />
-
-    <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-      <div v-if="title" :class="resolvedClasses.title" data-slot="title">
-        {{ title }}
-      </div>
-      <div v-if="description" :class="resolvedClasses.description" data-slot="description">
-        {{ description }}
-      </div>
-      <slot />
-
-      <div
-        v-if="$slots.actions || actionLabel"
-        class="flex items-center justify-end gap-2 mt-3"
-        data-slot="actions"
-      >
-        <slot name="actions">
-          <button
-            v-if="actionLabel"
-            type="button"
-            :class="resolvedClasses.action"
-            data-slot="action"
-          >
-            {{ actionLabel }}
-          </button>
-        </slot>
-      </div>
-    </div>
-
-    <button
-      type="button"
-      :class="resolvedClasses.close"
-      data-slot="close"
-      aria-label="Dismiss notification"
-      @click="emit('close', id)"
-    >
-      <span class="i-lucide-x size-3.5" aria-hidden="true" />
-    </button>
-  </div>
-</template>

package/src/components/vue/RLVToaster.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useToast } from "../../composables/useToast"
-import RLVToast from "./RLVToast.vue"
-
-const { toasts, remove } = useToast()
-</script>
-
-<template>
-  <div
-    class="fixed bottom-0 right-0 p-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none"
-  >
-    <TransitionGroup
-      enter-active-class="transition duration-300 ease-out"
-      enter-from-class="transform translate-y-2 opacity-0"
-      enter-to-class="transform translate-y-0 opacity-100"
-      leave-active-class="transition duration-200 ease-in"
-      leave-from-class="transform translate-y-0 opacity-100"
-      leave-to-class="transform translate-y-2 opacity-0"
-    >
-      <RLVToast
-        v-for="toast in toasts"
-        :key="toast.id"
-        v-bind="toast"
-        class="pointer-events-auto"
-        @close="remove"
-      />
-    </TransitionGroup>
-  </div>
-</template>

package/src/composables/index.ts

@@ -1,4 +0,0 @@
-export { useScrollToTop } from "./useScrollToTop"
-export { useToast } from "./useToast"
-export { headerLayersStore } from "./useHeaderStore"
-export { useShortcuts } from "./useShortcuts"

package/src/composables/useHeaderStore.ts

@@ -1,14 +0,0 @@
-import { map } from "nanostores"
-
-export interface HeaderLayerInfo {
-  type: "banner" | "header"
-  order: number
-  isVisible: boolean
-  height: number
-}
-
-/**
- * Global store tracking all registered header layers. This allows child components to subscribe to
- * header layer changes even across Vue/Astro boundaries, since nanostores is framework-agnostic.
- */
-export const headerLayersStore = map<Record<string, HeaderLayerInfo>>({})

package/src/composables/useScrollToTop.ts

@@ -1,62 +0,0 @@
-import { ref, onMounted, onUnmounted, type Ref } from "vue"
-
-export interface UseScrollToTopOptions {
-  /**
-   * The scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
-  threshold?: number
-}
-
-export interface UseScrollToTopReturn {
-  /**
-   * Whether the scroll-to-top button should be visible.
-   */
-  isVisible: Ref<boolean>
-  /**
-   * The current scroll percentage (0-100).
-   */
-  scrollPercentage: Ref<number>
-  /**
-   * Scrolls the window to the top with a smooth animation.
-   */
-  scrollToTop: () => void
-}
-
-function scrollToTop() {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth"
-  })
-}
-
-export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
-  const { threshold = 200 } = options
-
-  const isVisible = ref(false)
-  const scrollPercentage = ref(0)
-
-  function updateScrollState() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-
-    isVisible.value = scrollTop > threshold
-    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-  }
-
-  onMounted(() => {
-    window.addEventListener("scroll", updateScrollState, { passive: true })
-    updateScrollState()
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener("scroll", updateScrollState)
-  })
-
-  return {
-    isVisible,
-    scrollPercentage,
-    scrollToTop
-  }
-}

package/src/composables/useShortcuts.ts

@@ -1,11 +0,0 @@
-import { onUnmounted } from "vue"
-import { defineShortcuts } from "../utils/shortcuts"
-import type { ShortcutsConfig, ShortcutsOptions } from "../utils/shortcuts"
-
-export function useShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions) {
-  const cleanup = defineShortcuts(config, options)
-  onUnmounted(() => {
-    cleanup()
-  })
-  return cleanup
-}

package/src/composables/useToast.ts

@@ -1,43 +0,0 @@
-import { reactive } from "vue"
-import type { ThemeColor } from "../types"
-
-export interface Toast {
-  id?: string | number
-  title?: string
-  description?: string
-  icon?: string
-  color?: ThemeColor
-  timeout?: number
-  callback?: () => void
-}
-
-const toasts = reactive<Toast[]>([])
-
-export function useToast() {
-  const add = (toast: Toast) => {
-    const id = toast.id || Date.now()
-    const newToast = { ...toast, id }
-    toasts.push(newToast)
-
-    if (toast.timeout !== 0) {
-      setTimeout(() => {
-        remove(id)
-      }, toast.timeout || 5000)
-    }
-
-    return newToast
-  }
-
-  const remove = (id: string | number) => {
-    const index = toasts.findIndex((t) => t.id === id)
-    if (index !== -1) {
-      toasts.splice(index, 1)
-    }
-  }
-
-  return {
-    toasts,
-    add,
-    remove
-  }
-}

package/src/config/index.ts

@@ -1,2 +0,0 @@
-export * from "./site.config"
-export * from "./security"

package/src/config/security.ts

@@ -1,227 +0,0 @@
-import type { AstroUserConfig } from "astro"
-
-export type AstroSecurityConfig = NonNullable<AstroUserConfig["security"]>
-export type AstroCspConfig = Exclude<NonNullable<AstroSecurityConfig["csp"]>, boolean>
-
-export interface SecurityConfigOptions {
-  /**
-   * The base domain name for this project (e.g., "starter.rimelight.com") used to autoconfigure
-   * standard allowedDomains and img-src CDN targets.
-   */
-  domain: string
-  /**
-   * Additional Allowed Domains (appended to the default wildcard subdomains of `domain`)
-   */
-  allowedDomains?: AstroSecurityConfig["allowedDomains"]
-  /**
-   * Additional sources to allow for img-src directive
-   */
-  imgSrc?: string[]
-  /**
-   * Additional sources to allow for connect-src directive
-   */
-  connectSrc?: string[]
-  /**
-   * Additional sources to allow for frame-src directive
-   */
-  frameSrc?: string[]
-  /**
-   * Additional script resources
-   */
-  scriptResources?: string[]
-  /**
-   * Additional style resources
-   */
-  styleResources?: string[]
-  /**
-   * Enables the 'require-trusted-types-for' directive
-   */
-  trustedTypes?: boolean
-  /**
-   * Direct overrides for any security config fields
-   */
-  overrides?: Partial<Omit<AstroSecurityConfig, "csp">> & {
-    csp?: Partial<AstroCspConfig>
-  }
-}
-
-/**
- * Generates a standard, strictly configured Security/CSP object for Astro configurations with
- * support for easy customization and additions per project.
- *
- * @example
- *   ;```ts
- *   // Default returned shape:
- *   {
- *   checkOrigin: true,
- *   allowedDomains: [
- *   {
- *   hostname: "**.domain.com",
- *   protocol: "https"
- *   }
- *   ],
- *   csp: {
- *   algorithm: "SHA-384",
- *   directives: [
- *   "default-src 'none'",
- *   "img-src 'self' data: https://cdn.domain.com https://i3.ytimg.com https://www.youtube.com https://www.youtube-nocookie.com",
- *   "font-src 'self'",
- *   "connect-src 'self' https://cloudflareinsights.com",
- *   "frame-ancestors 'none'",
- *   "frame-src https://www.youtube.com https://www.youtube-nocookie.com",
- *   "upgrade-insecure-requests",
- *   "base-uri 'self'",
- *   "form-action 'self'"
- *   ],
- *   scriptDirective: {
- *   resources: [
- *   "'self'",
- *   "https://static.cloudflareinsights.com",
- *   "https://betterlytics.io/analytics.js",
- *   "'inline-speculation-rules'"
- *   ]
- *   },
- *   styleDirective: {
- *   resources: [
- *   "'self'",
- *   "'sha256-SKuaOGnks7NAUq37nvw1PfGEE0lOAs5ERbiYRbGFIbw='"
- *   ]
- *   }
- *   }
- *   }
- *   ```
- */
-export function defineSecurity(options: SecurityConfigOptions): AstroSecurityConfig {
-  const { domain, overrides } = options
-  const domainWithWildcard = `**.${domain}`
-
-  // 1. Build default allowed domains
-  const allowedDomains = [
-    {
-      hostname: domainWithWildcard,
-      protocol: "https" as const
-    },
-    ...(options.allowedDomains || [])
-  ]
-
-  // 2. Build CSP directives
-  const imgSources = Array.from(
-    new Set([
-      "'self'",
-      "data:",
-      `https://cdn.${domain}`,
-      "https://i3.ytimg.com",
-      "https://www.youtube.com",
-      "https://www.youtube-nocookie.com",
-      ...(options.imgSrc || [])
-    ])
-  )
-
-  const connectSources = Array.from(
-    new Set(["'self'", "https://cloudflareinsights.com", ...(options.connectSrc || [])])
-  )
-
-  const frameSources = Array.from(
-    new Set([
-      "https://www.youtube.com",
-      "https://www.youtube-nocookie.com",
-      ...(options.frameSrc || [])
-    ])
-  )
-
-  const baseDirectives: AstroCspConfig["directives"] = [
-    "default-src 'none'",
-    `img-src ${imgSources.join(" ")}`,
-    "font-src 'self'",
-    `connect-src ${connectSources.join(" ")}`,
-    "frame-ancestors 'none'",
-    `frame-src ${frameSources.join(" ")}`,
-    "upgrade-insecure-requests",
-    "base-uri 'self'",
-    "form-action 'self'",
-    "object-src 'none'",
-    "manifest-src 'self'",
-    ...(options.trustedTypes ? ["require-trusted-types-for 'script'" as const] : [])
-  ]
-
-  // 3. Build script & style directives
-  const scriptResources = Array.from(
-    new Set([
-      "'self'",
-      "https://static.cloudflareinsights.com",
-      "https://betterlytics.io/analytics.js",
-      "'inline-speculation-rules'",
-      // Astro ClientRouter (View Transitions)
-      "'sha256-ZuMSxilKU+4KIM8LWna4lqBEKzd6WaiAjz6gamhm7zM='",
-      ...(options.scriptResources || [])
-    ])
-  )
-
-  const styleResources = Array.from(
-    new Set([
-      "'self'",
-      // Astro ClientRouter (View Transitions)
-      "'sha256-SKuaOGnks7NAUq37nvw1PfGEE0lOAs5ERbiYRbGFIbw='",
-      ...(options.styleResources || [])
-    ])
-  )
-
-  // 4. Build base SecurityConfig
-  const securityConfig: AstroSecurityConfig = {
-    checkOrigin: true,
-    allowedDomains,
-    csp: {
-      algorithm: "SHA-384",
-      directives: baseDirectives,
-      scriptDirective: {
-        resources: scriptResources
-      },
-      styleDirective: {
-        resources: styleResources
-      }
-    }
-  }
-
-  // 5. Merge overrides
-  if (overrides) {
-    const { csp, ...restOverrides } = overrides
-    Object.assign(securityConfig, restOverrides)
-    if (csp && typeof securityConfig.csp === "object" && securityConfig.csp !== null) {
-      const currentCsp = securityConfig.csp
-      const mergedCsp: AstroCspConfig = {
-        ...currentCsp,
-        ...csp
-      }
-
-      if (csp.scriptDirective || currentCsp.scriptDirective) {
-        mergedCsp.scriptDirective = {
-          ...currentCsp.scriptDirective,
-          ...csp.scriptDirective,
-          resources: Array.from(
-            new Set([
-              ...(currentCsp.scriptDirective?.resources || []),
-              ...(csp.scriptDirective?.resources || [])
-            ])
-          )
-        }
-      }
-
-      if (csp.styleDirective || currentCsp.styleDirective) {
-        mergedCsp.styleDirective = {
-          ...currentCsp.styleDirective,
-          ...csp.styleDirective,
-          resources: Array.from(
-            new Set([
-              ...(currentCsp.styleDirective?.resources || []),
-              ...(csp.styleDirective?.resources || [])
-            ])
-          )
-        }
-      }
-
-      securityConfig.csp = mergedCsp
-    }
-  }
-
-  return securityConfig
-}

package/src/docs/components/ApiChangelog.astro

@@ -1,147 +0,0 @@
----
-import RLATimeline from "../../components/astro/RLATimeline.astro"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import timelineThemeDefault, { createTimelineTheme } from "../../themes/timeline.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-interface Props {
-  component: string
-  ui?: any
-  class?: any
-}
-
-const { component, ui: uiProp, class: className } = Astro.props
-
-const uiConfig = getUIConfig()
-const timelineTheme = uiConfig.colors ? createTimelineTheme() : timelineThemeDefault
-const timeline = scv(timelineTheme)
-const classes = resolveClasses(timeline, {}, useUi("timeline", uiProp), className);
----
-
-<div class="api-changelog-container group" data-component={component} data-theme-classes={JSON.stringify(classes)}>
-  <!-- Loading skeleton -->
-  <div class="api-changelog-loading py-6 flex flex-col gap-4">
-    <div class="animate-pulse h-4 bg-gray-800 rounded w-1/4"></div>
-    <div class="animate-pulse h-3 bg-gray-850 rounded w-full"></div>
-    <div class="animate-pulse h-3 bg-gray-850 rounded w-5/6"></div>
-  </div>
-  
-  <!-- Timeline Content -->
-  <div class="api-changelog-content hidden">
-    <RLATimeline ui={uiProp} class={className}>
-      <!-- Dynamic timeline items insert here -->
-      <div class="api-changelog-list flex flex-col space-y-8"></div>
-    </RLATimeline>
-  </div>
-  
-  <div class="api-changelog-empty hidden text-sm italic text-gray-500 py-2">
-    No recent changes found.
-  </div>
-</div>
-
-<script>
-  function escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
-  }
-
-  async function loadChangelog() {
-    if (typeof document === "undefined") return;
-    const containers = document.querySelectorAll('.api-changelog-container');
-    
-    await Promise.all(
-      Array.from(containers).map(async (container) => {
-        if (container.getAttribute('data-changelog-ready') === 'true') return;
-        container.setAttribute('data-changelog-ready', 'true');
-
-        const component = container.getAttribute('data-component');
-        const themeClassesJson = container.getAttribute('data-theme-classes');
-        const themeClasses = themeClassesJson ? JSON.parse(themeClassesJson) : {};
-
-        const loadingEl = container.querySelector('.api-changelog-loading') as HTMLElement;
-        const contentEl = container.querySelector('.api-changelog-content') as HTMLElement;
-        const listEl = container.querySelector('.api-changelog-list') as HTMLElement;
-        const emptyEl = container.querySelector('.api-changelog-empty') as HTMLElement;
-
-        if (!component || !loadingEl || !contentEl || !listEl || !emptyEl) return;
-
-        try {
-          const res = await fetch(`/api/github/changelog?component=${component}`);
-          if (!res.ok) throw new Error();
-          const data = await res.json();
-
-          loadingEl.classList.add('hidden');
-
-          if (!data || data.length === 0) {
-            emptyEl.classList.remove('hidden');
-            return;
-          }
-
-          let html = '';
-          for (const item of data) {
-            const dateStr = item.published_at 
-              ? new Date(item.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-              : 'Unreleased';
-
-            html += `
-              <div class="${themeClasses.node || 'relative timeline-node'}">
-                <!-- Dot Indicator -->
-                <span class="${themeClasses.dot || 'absolute -left-[33px] top-[2px] flex h-4 w-4 items-center justify-center rounded-full bg-gray-950 ring-2 ring-gray-800'}">
-                  <span class="${themeClasses.dotInner || 'h-2 w-2 rounded-full bg-primary-500'}"></span>
-                </span>
-                
-                <div class="${themeClasses.header || 'flex items-center justify-between gap-4 mb-3'}">
-                  <div class="flex items-center gap-2">
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-primary-500/10 text-primary-400 border border-primary-500/20">
-                      ${escapeHtml(item.tag === 'unreleased' ? 'Soon' : item.tag)}
-                    </span>
-                  </div>
-                  
-                  <time class="text-xs text-gray-500 font-normal">
-                    ${escapeHtml(dateStr)}
-                  </time>
-                </div>
-                
-                <ul class="${themeClasses.content || 'space-y-2 text-sm text-gray-400'}">
-                  ${item.commits.map((commit: any) => {
-                    const cleanedMessage = commit.message
-                      .replace(/#(\d+)/g, '<a href="https://github.com/Rimelight-Entertainment/rimelight/issues/$1" target="_blank" class="text-primary-400 hover:underline">#$1</a>')
-                      .replace(/`(.*?)`/g, '<code class="text-xs px-1 bg-gray-900 border border-gray-800 rounded font-mono text-gray-300">$1</code>');
-
-                    return `
-                      <li class="flex items-start gap-2">
-                        <a href="https://github.com/Rimelight-Entertainment/rimelight/commit/${commit.sha}" target="_blank" class="font-mono text-xs text-gray-500 hover:text-gray-300 hover:underline shrink-0 pt-0.5">
-                          ${commit.sha.slice(0, 7)}
-                        </a>
-                        <span class="text-gray-300">
-                          ${cleanedMessage}
-                        </span>
-                      </li>
-                    `;
-                  }).join('')}
-                </ul>
-              </div>
-            `;
-          }
-
-          listEl.innerHTML = html;
-          contentEl.classList.remove('hidden');
-        } catch (err) {
-          loadingEl.classList.add('hidden');
-          emptyEl.textContent = 'Failed to load changelog.';
-          emptyEl.classList.remove('hidden');
-        }
-      })
-    );
-  }
-
-  if (typeof document !== 'undefined') {
-    loadChangelog();
-    document.addEventListener('astro:after-swap', loadChangelog);
-  }
-</script>

package/src/docs/components/ApiEmits.astro

@@ -1,46 +0,0 @@
----
-import type { ComponentMetaMap, EmitMeta } from "../types"
-import meta from "virtual:rimelight-ui-docs-meta"
-
-interface Props {
-  component: string
-}
-
-const { component } = Astro.props
-
-const allMeta = meta as unknown as ComponentMetaMap
-const compMeta = allMeta[component]
-
-const emits = compMeta?.emits ?? []
----
-
-{emits.length === 0 ? (
-  <p class="text-sm italic text-gray-500">No events emitted by this component.</p>
-) : (
-  <div class="overflow-x-auto">
-    <table class="w-full text-sm border-collapse">
-      <thead>
-        <tr class="border-b border-gray-200 dark:border-gray-700">
-          <th class="text-left py-2 px-3 font-semibold">Event</th>
-          <th class="text-left py-2 px-3 font-semibold">Payload</th>
-        </tr>
-      </thead>
-      <tbody>
-        {emits.map((emit: EmitMeta) => (
-          <tr class="border-b border-gray-100 dark:border-gray-800">
-            <td class="py-2 px-3">
-              <span class="font-mono text-sm">
-                {emit.name}
-              </span>
-            </td>
-            <td class="py-2 px-3">
-              <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
-                {emit.type}
-              </span>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-)}