@rimelight/ui 0.0.34 → 0.0.36

package/src/components/vue/RLVScrollToTop.vue

@@ -4,8 +4,9 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
-import { computed } from "vue"
+import { computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
 
+const attrs = useAttrs()
 const scrollToTop = scv(scrollToTopTheme)
 
 const {
@@ -28,49 +29,49 @@ const {
   threshold
 })
 
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
+const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
+const gaugeBorderWidth = progressWidth * 0.5
 
-const currentPercent = computed(() => scrollPercentage.value)
-const percentageInPx = computed(() => `${percentPx}px`)
-const durationInSeconds = computed(() => `${duration}s`)
+let styleEl: HTMLStyleElement | null = null
+
+function updateCssVars() {
+  if (!styleEl) return
+  styleEl.textContent = `
+    [data-rla-instance="${instanceId}"] {
+      --gauge-track-border-color: var(--color-${color}-900);
+      --gauge-track-bg: var(--color-${color}-950);
+      --gauge-stroke-width: ${gaugeBorderWidth}px;
+      --gauge-color: var(--color-${color}-500);
+      --gauge-progress: ${scrollPercentage.value};
+    }
+  `
+}
+
+watch(scrollPercentage, updateCssVars)
+
+onMounted(() => {
+  const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute("content") ?? ""
+  styleEl = document.createElement("style")
+  if (nonce) styleEl.setAttribute("nonce", nonce)
+  document.head.appendChild(styleEl)
+  updateCssVars()
+})
+
+onUnmounted(() => {
+  if (styleEl) styleEl.remove()
+})
 </script>
 
 <template>
   <div
+    :data-rla-instance="instanceId"
     :class="['rla-scroll-to-top fixed bottom-6 right-6 z-50', { visible: isVisible }, classes.root]"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
       <div :class="classes.progressBase">
-        <svg :class="classes.svg" viewBox="0 0 100 100" shape-rendering="geometricPrecision">
-          <circle
-            cx="50"
-            cy="50"
-            r="45"
-            fill="var(--color-primary-950)"
-            :stroke-width="progressWidth"
-            stroke-dashoffset="0"
-            stroke-linecap="round"
-            class="gauge-secondary-stroke opacity-100"
-          />
-          <circle
-            v-if="showProgress"
-            cx="50"
-            cy="50"
-            r="45"
-            fill="transparent"
-            :stroke-width="progressWidth"
-            stroke-linecap="round"
-            class="gauge-primary-stroke opacity-100"
-            :style="{
-              '--stroke-percent': currentPercent,
-              '--percent-to-px': percentageInPx,
-              '--circumference': circumference,
-              '--duration': durationInSeconds
-            }"
-          />
-        </svg>
+        <div class="gauge-track"></div>
+        <div v-if="showProgress" class="gauge-progress"></div>
         <div :class="classes.iconContainer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -106,27 +107,39 @@ const durationInSeconds = computed(() => `${duration}s`)
 }
 
 .progress-circle-base {
+  position: relative;
   transform: translateZ(0);
 }
 
-.gauge-primary-stroke {
-  stroke: var(--color-primary-500);
-  --stroke-percent: v-bind(currentPercent);
-  --percent-to-px: v-bind(percentageInPx);
-  --circumference: v-bind(circumference);
-  stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference);
-  transition:
-    stroke-dasharray v-bind(durationInSeconds) ease,
-    stroke v-bind(durationInSeconds) ease;
-  transform: rotate(-90deg);
-  transform-origin: center;
-  shape-rendering: geometricPrecision;
+.gauge-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: var(--gauge-stroke-width, 3px);
+  border-color: var(--gauge-track-border-color, var(--color-primary-900));
+  background-color: var(--gauge-track-bg, var(--color-primary-950));
 }
 
-.gauge-secondary-stroke {
-  stroke: var(--color-primary-900);
-  stroke-dasharray: 282.6;
-  transform: rotate(-90deg);
-  transform-origin: center;
+.gauge-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--gauge-color, var(--color-primary-500)) 0deg,
+    var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    transparent calc(var(--gauge-progress, 0) * 3.6deg)
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
 }
 </style>

package/src/components/vue/RLVSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from "vue"
+import { computed, useSlots, useAttrs } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { PageSectionProps } from "../../types/components/page-section"
@@ -24,6 +24,7 @@ const {
   links
 } = defineProps<PageSectionProps>()
 
+const attrs = useAttrs()
 const slots = useSlots()
 
 const resolvedClasses = computed(() =>
@@ -51,9 +52,9 @@ const resolvedClasses = computed(() =>
     data-slot="root"
     :data-orientation="orientation"
     :class="[resolvedClasses.root]"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
-    <slot v-if="$slots.background" name="background">
+    <slot v-if="slots.background" name="background">
       <div :class="resolvedClasses.background" data-slot="background">
         <slot name="background" />
       </div>
@@ -64,26 +65,26 @@ const resolvedClasses = computed(() =>
     <div data-slot="container" :class="resolvedClasses.container">
       <div
         v-if="
-          $slots.header ||
+          slots.header ||
           icon ||
           headline ||
           title ||
           description ||
-          $slots.body ||
-          $slots.footer ||
-          $slots.links ||
+          slots.body ||
+          slots.footer ||
+          slots.links ||
           links?.length
         "
         data-slot="wrapper"
         :class="resolvedClasses.wrapper"
       >
         <div
-          v-if="$slots.header || icon || headline || title || description"
+          v-if="slots.header || icon || headline || title || description"
           data-slot="header"
           :class="resolvedClasses.header"
         >
           <slot name="header">
-            <div v-if="icon || $slots.leading" data-slot="leading" :class="resolvedClasses.leading">
+            <div v-if="icon || slots.leading" data-slot="leading" :class="resolvedClasses.leading">
               <slot name="leading" :ui="resolvedClasses">
                 <RLVIcon
                   v-if="icon"
@@ -119,18 +120,18 @@ const resolvedClasses = computed(() =>
           </slot>
         </div>
 
-        <div v-if="$slots.body" data-slot="body" :class="resolvedClasses.body">
+        <div v-if="slots.body" data-slot="body" :class="resolvedClasses.body">
           <slot name="body" />
         </div>
 
         <div
-          v-if="$slots.footer || $slots.links || links?.length"
+          v-if="slots.footer || slots.links || links?.length"
           data-slot="footer"
           :class="resolvedClasses.footer"
         >
           <slot name="footer">
             <div
-              v-if="links?.length || $slots.links"
+              v-if="links?.length || slots.links"
               data-slot="links"
               :class="resolvedClasses.links"
             >
@@ -141,7 +142,7 @@ const resolvedClasses = computed(() =>
         </div>
       </div>
 
-      <slot v-if="$slots.default" />
+      <slot v-if="slots.default" />
       <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
     </div>
 

package/src/components/vue/RLVToast.vue

@@ -49,11 +49,24 @@ const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!
         {{ description }}
       </div>
       <slot />
-    </div>
 
-    <button v-if="actionLabel" type="button" :class="resolvedClasses.action" data-slot="action">
-      {{ actionLabel }}
-    </button>
+      <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"

package/src/composables/index.ts

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

package/src/composables/useHeaderStore.ts

@@ -1,6 +1,7 @@
 import { map } from "nanostores"
 
 export interface HeaderLayerInfo {
+  type: "banner" | "header"
   order: number
   isVisible: boolean
   height: number

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/config/security.ts

@@ -33,6 +33,10 @@ export interface SecurityConfigOptions {
    * Additional style resources
    */
   styleResources?: string[]
+  /**
+   * Enables the 'require-trusted-types-for' directive
+   */
+  trustedTypes?: boolean
   /**
    * Direct overrides for any security config fields
    */
@@ -46,46 +50,46 @@ export interface SecurityConfigOptions {
  * support for easy customization and additions per project.
  *
  * @example
- * ```ts
- * // Default returned shape:
- * {
+ *   ;```ts
+ *   // Default returned shape:
+ *   {
  *   checkOrigin: true,
  *   allowedDomains: [
- *     {
- *       hostname: "**.domain.com",
- *       protocol: "https"
- *     }
+ *   {
+ *   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='"
- *       ]
- *     }
+ *   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
@@ -134,7 +138,10 @@ export function defineSecurity(options: SecurityConfigOptions): AstroSecurityCon
     `frame-src ${frameSources.join(" ")}`,
     "upgrade-insecure-requests",
     "base-uri 'self'",
-    "form-action 'self'"
+    "form-action 'self'",
+    "object-src 'none'",
+    "manifest-src 'self'",
+    ...(options.trustedTypes ? ["require-trusted-types-for 'script'" as const] : [])
   ]
 
   // 3. Build script & style directives

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>
               )}