@rimelight/ui 0.0.33 → 0.0.35

package/src/composables/useShortcuts.ts

@@ -0,0 +1,11 @@
+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,42 +1,43 @@
-import { reactive } from "vue"
-
-export interface Toast {
-  id?: string | number
-  title?: string
-  description?: string
-  icon?: string
-  color?: "primary" | "success" | "warning" | "error" | "info" | "neutral"
-  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
-  }
-}
+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 +1,2 @@
 export * from "./site.config"
+export * from "./security"

package/src/config/security.ts

@@ -0,0 +1,227 @@
+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/config/site.config.ts

@@ -24,4 +24,5 @@ export interface SiteConfig {
     maxDescriptionLength: number
     authorHandle?: string
   }
+  ui?: Record<string, any>
 }

package/src/docs/components/ApiChangelog.astro

@@ -0,0 +1,147 @@
+---
+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/{plugins/starlightDocsApi → docs}/components/ApiEmits.astro

@@ -29,14 +29,14 @@ const emits = compMeta?.emits ?? []
         {emits.map((emit: EmitMeta) => (
           <tr class="border-b border-gray-100 dark:border-gray-800">
             <td class="py-2 px-3">
-              <code class="text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+              <span class="font-mono text-sm">
                 {emit.name}
-              </code>
+              </span>
             </td>
             <td class="py-2 px-3">
-              <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono">
+              <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
                 {emit.type}
-              </code>
+              </span>
             </td>
           </tr>
         ))}

package/src/{plugins/starlightDocsApi → docs}/components/ApiProps.astro

@@ -33,15 +33,15 @@ const props = filterProps(compMeta?.props ?? [], filterOpts)
     <tbody>
       {props.map((prop: PropMeta) => (
         <tr>
-          <td><code>{prop.name}</code></td>
-          <td><code>{prop.type}</code></td>
+          <td><span class="font-mono text-sm">{prop.name}</span></td>
+          <td><span class="font-mono text-xs text-gray-600 dark:text-gray-400">{prop.type}</span></td>
           <td>{prop.required ? "Yes" : "No"}</td>
-          <td>{prop.default !== undefined ? <code>{prop.default}</code> : "—"}</td>
+          <td>{prop.default !== undefined ? <span class="font-mono text-xs text-gray-600 dark:text-gray-400">{prop.default}</span> : "—"}</td>
           <td>{prop.description || "—"}</td>
         </tr>
       ))}
     </tbody>
   </table>
 ) : (
-  <p>No props to display.</p>
+  <p class="text-sm italic text-gray-500">No props to display.</p>
 )}

package/src/{plugins/starlightDocsApi → docs}/components/ApiSlots.astro

@@ -29,15 +29,15 @@ const slots = compMeta?.slots ?? []
         {slots.map((slot: SlotMeta) => (
           <tr class="border-b border-gray-100 dark:border-gray-800">
             <td class="py-2 px-3">
-              <code class="text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+              <span class="font-mono text-sm">
                 {slot.name}
-              </code>
+              </span>
             </td>
             <td class="py-2 px-3">
               {Object.keys(slot.bindings).length > 0 ? (
-                <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono">
+                <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
                   {Object.values(slot.bindings)[0]}
-                </code>
+                </span>
               ) : (
                 <span class="text-gray-400">-</span>
               )}

package/src/docs/components/ApiTheme.astro

@@ -0,0 +1,100 @@
+---
+import type { ComponentMetaMap } from "../types"
+import { generateThemeCode } from "../utils"
+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 theme = compMeta?.theme ?? null
+const themeCode = theme ? generateThemeCode(component, theme) : null
+---
+
+{themeCode ? (
+  <div class="api-theme-container relative border border-gray-800 rounded-lg overflow-hidden group mb-6" data-component={component}>
+    <div class="api-theme-collapse overflow-hidden max-h-[240px] relative transition-[max-height] duration-300 ease-in-out">
+      <div class="expressive-code m-0 border-0 rounded-none">
+        <figure class="frame m-0 border-0">
+          <pre class="language-ts overflow-x-auto m-0 border-0 rounded-none bg-gray-900"><code class="language-ts m-0">{themeCode}</code></pre>
+        </figure>
+      </div>
+      
+      {/* Gradient Fade Overlay */}
+      <div class="api-theme-fade absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-950 to-transparent pointer-events-none transition-opacity duration-300"></div>
+    </div>
+    
+    {/* Toggle Button Container */}
+    <div class="api-theme-trigger-bar absolute bottom-0 left-0 right-0 flex justify-center pb-3 bg-gradient-to-t from-gray-950/90 via-gray-950/70 to-transparent pt-12">
+      <button class="api-theme-btn px-4 py-1.5 text-xs font-semibold text-white bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-gray-650 rounded-md shadow-md transition-all duration-200 cursor-pointer">
+        Show theme config
+      </button>
+    </div>
+  </div>
+) : (
+  <p class="text-sm italic text-gray-500">No theme data available.</p>
+)}
+
+<script>
+  function setupThemeCollapser() {
+    if (typeof document === 'undefined') return;
+    const containers = document.querySelectorAll('.api-theme-container');
+    containers.forEach(container => {
+      if (container.getAttribute('data-collapser-ready') === 'true') return;
+      container.setAttribute('data-collapser-ready', 'true');
+
+      const collapseWrapper = container.querySelector('.api-theme-collapse') as HTMLElement;
+      const fadeOverlay = container.querySelector('.api-theme-fade') as HTMLElement;
+      const btn = container.querySelector('.api-theme-btn') as HTMLButtonElement;
+      const triggerBar = container.querySelector('.api-theme-trigger-bar') as HTMLElement;
+
+      if (!collapseWrapper || !btn || !triggerBar || !fadeOverlay) return;
+
+      // Let code blocks load and measure scrollHeight
+      const checkAndSetup = () => {
+        const scrollHeight = collapseWrapper.scrollHeight;
+        if (scrollHeight <= 240) {
+          collapseWrapper.style.maxHeight = 'none';
+          fadeOverlay.style.display = 'none';
+          triggerBar.style.display = 'none';
+          return;
+        }
+
+        let isExpanded = false;
+
+        btn.addEventListener('click', () => {
+          isExpanded = !isExpanded;
+          if (isExpanded) {
+            collapseWrapper.style.maxHeight = `${collapseWrapper.scrollHeight}px`;
+            btn.textContent = 'Hide theme config';
+            fadeOverlay.style.opacity = '0';
+            triggerBar.classList.remove('absolute', 'bottom-0');
+            triggerBar.classList.add('relative', 'bg-gray-950', 'py-3', 'border-t', 'border-gray-800');
+            triggerBar.style.paddingTop = '12px';
+          } else {
+            collapseWrapper.style.maxHeight = '240px';
+            btn.textContent = 'Show theme config';
+            fadeOverlay.style.opacity = '1';
+            triggerBar.classList.add('absolute', 'bottom-0');
+            triggerBar.classList.remove('relative', 'bg-gray-950', 'py-3', 'border-t', 'border-gray-800');
+            triggerBar.style.paddingTop = '48px';
+            container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+        });
+      };
+
+      // Delay slightly to ensure fonts/expressive code are rendered
+      setTimeout(checkAndSetup, 150);
+    });
+  }
+
+  if (typeof document !== 'undefined') {
+    setupThemeCollapser();
+    document.addEventListener('astro:after-swap', setupThemeCollapser);
+  }
+</script>