@rimelight/ui 0.0.21 → 0.0.22

package/package.json

@@ -1,31 +1,31 @@
 {
-  "version": "0.0.21",
-  "type": "module",
-  "private": false,
-  "license": "MIT",
-  "author": {
-    "name": "Daniel Marchi"
-  },
   "name": "@rimelight/ui",
+  "version": "0.0.22",
+  "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
-    "typescript",
-    "astro"
+    "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"
   },
-  "bugs": {
-    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
-  },
   "files": [
     "src",
     "worker-configuration.d.ts",
     "README.md",
     "LICENSE"
   ],
+  "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
     "./styles/*": "./src/styles/*",

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

@@ -6,12 +6,47 @@ 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
-  circleStrokeWidth?: number
+  /**
+   * 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
 }
 
@@ -26,9 +61,10 @@ const scrollToTop = scv({
 
 const {
   color = "primary",
-  circleStrokeWidth = 4,
+  progressWidth = 6,
   duration = 0.1,
   threshold = 200,
+  showProgress = false,
   ui: uiProp,
   class: className,
   ...rest
@@ -53,7 +89,7 @@ const percentPx = circumference / 100
   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={circleStrokeWidth}
+  data-circle-stroke-width={progressWidth}
   {...rest}
 >
   <button
@@ -63,28 +99,31 @@ const percentPx = circumference / 100
     data-scroll-to-top-button
   >
     <div class={twMerge(progressBase, mergedUI.progressBase)}>
-      <svg class={twMerge(svgClass, mergedUI.svg)} viewBox="0 0 100 100">
+      <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={circleStrokeWidth}
+          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={circleStrokeWidth}
+          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
@@ -109,11 +148,11 @@ const percentPx = circumference / 100
 
 <script>
   document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
-    const element = el
-    const button = element.querySelector('[data-scroll-to-top-button]')
-    const progressCircle = element.querySelector('[data-progress-circle]')
+    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 || !progressCircle) return
+    if (!button) return
 
     const threshold = Number(element.dataset.threshold) || 200
 
@@ -128,10 +167,15 @@ const percentPx = circumference / 100
         element.classList.remove('visible')
       }
 
-      const circumference = 2 * Math.PI * 45
-      const percentPx = circumference / 100
-      const strokeDasharray = `${(scrollPercentage * percentPx)} ${circumference}`
-      progressCircle.setAttribute('stroke-dasharray', strokeDasharray)
+      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', () => {
@@ -161,9 +205,11 @@ const percentPx = circumference / 100
 
   .gauge-primary-stroke {
     stroke: var(--color-primary-500);
-    transition: stroke-dasharray 0.1s ease, stroke 0.1s ease;
+    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 {

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>