@rimelight/ui 0.0.20 → 0.0.22

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
+  "keywords": [
+    "astro",
+    "typescript"
+  ],
   "homepage": "https://rimelight.com/docs",
   "bugs": {
     "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
   },
   "license": "MIT",
+  "author": {
+    "name": "Daniel Marchi"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
@@ -89,7 +96,6 @@
     }
   },
   "scripts": {
-    "generate:config": "vp config",
-    "dev": "astro dev"
+    "astro": "astro"
   }
 }

package/src/components/Head.astro

@@ -82,6 +82,9 @@ const finalCanonical = canonical || (!is404 ? Astro.url.href : undefined);
 <meta name="viewport" content={viewport} />
 <meta name="generator" content={Astro.generator} />
 
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
 <!-- SEO -->
 <title>{displayTitle}</title>
 {safeDescription && <meta name="description" content={safeDescription} />}

package/src/components/astro/RLAFooter.astro

@@ -0,0 +1,69 @@
+---
+import { scv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { footerTheme } from "../../themes/footer.theme.ts";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+const footer = scv({
+  slots: [...footerTheme.slots],
+  base: footerTheme.base,
+  variants: footerTheme.variants,
+  defaultVariants: footerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAFooterProps {
+  /**
+   * Whether to contain the footer content in a max-width container.
+   * @default false
+   */
+  contain?: boolean;
+  /**
+   * UI overrides for individual slots, derived from the footer theme.
+   */
+  ui?: Partial<Record<keyof typeof footerTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * Standard HTML attributes for <footer>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  contain = false,
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAFooterProps
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.footer as Record<string, unknown>) ?? {},
+) as Record<keyof typeof footerTheme.base, string | undefined>;
+
+const { root, container, left, center, right } = footer({ contain });
+---
+
+<footer
+  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-slot="rla-footer"
+  {...rest}
+>
+  <div class:list={[twMerge(container, mergedUI.container)]}>
+    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="footer-left">
+      <slot name="left" />
+    </div>
+    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="footer-center">
+      <slot name="center" />
+    </div>
+    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="footer-right">
+      <slot name="right" />
+    </div>
+  </div>
+</footer>

package/src/components/astro/RLAHeader.astro

@@ -1,75 +1,178 @@
----
-import { scv, cx } from "css-variants";
-import { twMerge } from "tailwind-merge";
-import defu from "defu";
-import { headerTheme } from "@/themes/header.theme.ts";
-import { getUIConfig } from "virtual:rimelight-ui";
-
-const header = scv({
-  slots: [...headerTheme.slots],
-  base: headerTheme.base,
-  variants: headerTheme.variants,
-  defaultVariants: headerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
-
-export interface RLAHeaderProps {
-  /**
-   * Whether to contain the header content in a max-width container.
-   * @default true
-   */
-  contain?: boolean;
-  /**
-   * Whether the header should be sticky at the top.
-   * @default true
-   */
-  sticky?: boolean;
-  /**
-   * UI overrides for individual slots, derived from the header theme.
-   */
-  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string;
-  /**
-   * Standard HTML attributes for <header>
-   */
-  [key: string]: unknown;
-}
-
-const {
-  contain = true,
-  sticky = true,
-  class: className,
-  ui: uiProp,
-  ...rest
-} = Astro.props as RLAHeaderProps
-
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.header as Record<string, unknown>) ?? {},
-) as Record<keyof typeof headerTheme.base, string | undefined>;
-
-const { root, container, left, center, right } = header({ contain, sticky });
----
-
-<header
-  class:list={[twMerge(root, mergedUI.root, className)]}
-  data-slot="rla-header"
-  {...rest}
->
-  <div class:list={[twMerge(container, mergedUI.container)]}>
-    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
-      <slot name="left" />
-    </div>
-    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
-      <slot name="center" />
-    </div>
-    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
-      <slot name="right" />
-    </div>
-  </div>
-</header>
+---
+import { scv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { headerTheme } from "../../themes/header.theme.ts";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+const header = scv({
+  slots: [...headerTheme.slots],
+  base: headerTheme.base,
+  variants: headerTheme.variants,
+  defaultVariants: headerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAHeaderProps {
+  /**
+   * Whether to contain the header content in a max-width container.
+   * @default true
+   */
+  contain?: boolean;
+  /**
+   * Sticky positioning when `fixed` is false.
+   * @default true
+   */
+  sticky?: boolean;
+  /**
+   * Switches to `position: fixed; left: 0; right: 0` (layer mode).
+   * When true, `stackIndex` controls the exact position and layer order.
+   * A module `<script>` is emitted to apply styles and attach scroll listeners.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * Controls z-index when `fixed` is true: `z-index = 100 - stackIndex`.
+   * @default 0
+   */
+  stackIndex?: number;
+  /**
+   * When true, hides the header on scroll-down and shows it on scroll-up.
+   * Implemented via a bundled Astro `<script>` — no Vue hydration needed.
+   * Only meaningful when `fixed` is true.
+   * @default false
+   */
+  hideOnScroll?: boolean;
+  /**
+   * UI overrides for individual slots, derived from the header theme.
+   */
+  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * Standard HTML attributes for <header>.
+   */
+  [key: string]: unknown;
+}
+
+const {
+  contain = true,
+  sticky = true,
+  fixed = false,
+  stackIndex = 0,
+  hideOnScroll = false,
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAHeaderProps;
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.header as Record<string, unknown>) ?? {},
+) as Record<keyof typeof headerTheme.base, string | undefined>;
+
+// Resolve classes — note: sticky variant is suppressed when fixed is true,
+// since the fixed variant's classes replace it.
+const { root, content, container, left, center, right } = header({
+  contain,
+  sticky: fixed ? false : sticky,
+  fixed,
+});
+
+// Build a unique ID so the script can target this specific header element.
+const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
+const zIndex = 100 - stackIndex;
+---
+
+<header
+  id={headerId}
+  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-rla-header={fixed ? "true" : undefined}
+  data-stack-index={stackIndex}
+  data-hide-on-scroll={String(hideOnScroll)}
+  style={fixed ? `z-index: ${zIndex};` : undefined}
+  {...rest}
+>
+  <!--
+    content wrapper: present in all modes; in fixed+hideOnScroll mode the inline
+    script observes this element's offsetHeight for accurate measurement.
+  -->
+  <div class:list={[twMerge(content, mergedUI.content)]} data-header-content>
+    <div class:list={[twMerge(container, mergedUI.container)]}>
+      <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
+        <slot name="left" />
+      </div>
+      <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
+        <slot name="center" />
+      </div>
+      <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</header>
+
+{/*
+  Astro Module Script — automatically hydrates all static Astro headers 
+  with the global Vanilla JS stack manager. It only executes once per page 
+  load, managing all headers efficiently.
+*/}
+{fixed && (
+  <script>
+    import { getHeaderStack } from "../../utils/headerStack";
+
+    // This script runs exactly once per page load, managing all Astro headers
+    const stack = getHeaderStack();
+    const headers = document.querySelectorAll("[data-rla-header='true']");
+
+    headers.forEach(header => {
+      // Prevent double-initialization
+      if ((header as any)._rl_initialized) return;
+      (header as any)._rl_initialized = true;
+
+      const id = header.id;
+      const stackIndex = parseInt(header.getAttribute("data-stack-index") || "0", 10);
+      const hideOnScroll = header.getAttribute("data-hide-on-scroll") === "true";
+      const contentEl = header.querySelector("[data-header-content]") as HTMLElement;
+
+      let naturalHeight = contentEl ? contentEl.offsetHeight : 0;
+      let isVisible = true;
+
+      const updateStack = () => {
+        stack.register(id, stackIndex, naturalHeight, isVisible, header as HTMLElement);
+      };
+
+      if (typeof ResizeObserver !== "undefined" && contentEl) {
+        new ResizeObserver(entries => {
+          const h = entries[0]?.contentRect.height;
+          if (h && h > 0) {
+            naturalHeight = h;
+            updateStack();
+          }
+        }).observe(contentEl);
+      }
+
+      if (hideOnScroll) {
+        let localLastScrollY = window.scrollY;
+        window.addEventListener("scroll", () => {
+          const current = window.scrollY;
+          const diff = current - localLastScrollY;
+          if (Math.abs(diff) >= 10) {
+            const newVisible = current <= 50 ? true : diff <= 0;
+            if (newVisible !== isVisible) {
+              isVisible = newVisible;
+              updateStack();
+            }
+            localLastScrollY = current;
+          }
+        }, { passive: true });
+      }
+
+      updateStack();
+    });
+  </script>
+)}

package/src/components/astro/RLAScrollToTop.astro

@@ -0,0 +1,221 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+export interface RLAScrollToTopProps {
+  /**
+   * Button color.
+   *
+   * @default "primary"
+   */
+  color?: keyof typeof scrollToTopTheme.variants.color
+  /**
+   * Transition duration for the progress circle (in seconds).
+   *
+   * @default 0.1
+   */
+  duration?: number
+  /**
+   * Scroll threshold (in pixels) before the button becomes visible.
+   *
+   * @default 200
+   */
+  threshold?: number
+  /**
+   * Whether to show the scroll progress indicator.
+   *
+   * @default false
+   */
+  showProgress?: boolean
+  /**
+   * Stroke width of the progress circle.
+   *
+   * @default 6
+   */
+  progressWidth?: number
+  /**
+   * UI overrides for individual slots, derived from the scroll-to-top theme.
+   */
+  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const scrollToTop = scv({
+  slots: [...scrollToTopTheme.slots],
+  base: scrollToTopTheme.base,
+  variants: scrollToTopTheme.variants,
+  compoundVariants: [...scrollToTopTheme.compoundVariants],
+  defaultVariants: scrollToTopTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+const {
+  color = "primary",
+  progressWidth = 6,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAScrollToTopProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
+) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
+
+const { root, button, progressBase, svg: svgClass, iconContainer, icon } = scrollToTop({
+  color
+})
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+---
+
+<div
+  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", twMerge(root, mergedUI.root, className)]}
+  data-threshold={threshold}
+  data-duration={duration}
+  data-circle-stroke-width={progressWidth}
+  {...rest}
+>
+  <button
+    type="button"
+    class={twMerge(button, mergedUI.button)}
+    aria-label="Scroll to top"
+    data-scroll-to-top-button
+  >
+    <div class={twMerge(progressBase, mergedUI.progressBase)}>
+      <svg class={twMerge(svgClass, mergedUI.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"
+        />
+        {showProgress && (
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          stroke-width={progressWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-primary-stroke opacity-100"
+          data-progress-circle
+          style={`--stroke-percent: 0; --percent-to-px: ${percentPx}px; --circumference: ${circumference}; --duration: ${duration}s`}
+        />
+        )}
+      </svg>
+      <div class={twMerge(iconContainer, mergedUI.iconContainer)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class={twMerge(icon, mergedUI.icon)}
+        >
+          <path d="m5 12 7-7 7 7" />
+          <path d="M12 19V5" />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
+    const element = el as HTMLElement
+    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
+    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
+
+    if (!button) return
+
+    const threshold = Number(element.dataset.threshold) || 200
+
+    function updateScrollState() {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+
+      if (scrollTop > threshold) {
+        element.classList.add('visible')
+      } else {
+        element.classList.remove('visible')
+      }
+
+      if (progressCircle) {
+        const circumference = 2 * Math.PI * 45
+        const percentPx = circumference / 100
+        const duration = element.dataset.duration || '0.1'
+        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
+        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
+        progressCircle.style.setProperty('--circumference', circumference.toString())
+        progressCircle.style.setProperty('--duration', `${duration}s`)
+      }
+    }
+
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+
+    window.addEventListener('scroll', updateScrollState, { passive: true })
+    updateScrollState()
+  })
+</script>
+
+<style>
+  .rla-scroll-to-top {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .rla-scroll-to-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .progress-circle-base {
+    transform: translateZ(0);
+  }
+
+  .gauge-primary-stroke {
+    stroke: var(--color-primary-500);
+    stroke-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
+    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    shape-rendering: geometricPrecision;
+  }
+
+  .gauge-secondary-stroke {
+    stroke: var(--color-primary-900);
+    stroke-dasharray: 282.6;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+</style>

package/src/components/vue/RLVFooter.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { useUi } from "../../composables"
+import { footerTheme } from "../../themes/footer.theme.ts"
+
+const footer = scv({
+  slots: [...footerTheme.slots],
+  base: footerTheme.base,
+  variants: footerTheme.variants,
+  defaultVariants: footerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVFooterProps {
+  /**
+   * Whether to contain the footer content in a max-width container.
+   *
+   * @default false
+   */
+  contain?: boolean
+  /**
+   * UI overrides for individual slots, derived from the footer theme.
+   */
+  ui?: Partial<Record<keyof typeof footerTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+}
+
+const { contain = false, class: className, ui: uiProp } = defineProps<RLVFooterProps>()
+
+defineSlots<{
+  /**
+   * Content to display on the left side of the footer.
+   */
+  left(props: {}): any
+  /**
+   * Content to display in the center of the footer.
+   */
+  center(props: {}): any
+  /**
+   * Content to display on the right side of the footer.
+   */
+  right(props: {}): any
+}>()
+
+const mergedUI = useUi("footer", uiProp as Record<string, unknown> | undefined)
+
+const resolvedClasses = computed(() => {
+  const classes = footer({
+    contain
+  })
+
+  return {
+    root: twMerge(classes.root, mergedUI.value.root as string | undefined),
+    container: twMerge(classes.container, mergedUI.value.container as string | undefined),
+    left: twMerge(classes.left, mergedUI.value.left as string | undefined),
+    center: twMerge(classes.center, mergedUI.value.center as string | undefined),
+    right: twMerge(classes.right, mergedUI.value.right as string | undefined)
+  }
+})
+</script>
+
+<template>
+  <footer :class="[resolvedClasses.root, className]" data-slot="rlv-footer" v-bind="$attrs">
+    <div :class="resolvedClasses.container">
+      <div :class="resolvedClasses.left" data-slot="footer-left">
+        <slot name="left" />
+      </div>
+      <div :class="resolvedClasses.center" data-slot="footer-center">
+        <slot name="center" />
+      </div>
+      <div :class="resolvedClasses.right" data-slot="footer-right">
+        <slot name="right" />
+      </div>
+    </div>
+  </footer>
+</template>