@rimelight/ui 0.0.21 → 0.0.23

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>

package/src/components/vue/RLVHeader.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, onMounted, onUnmounted, ref } from "vue"
 import { scv, cx } from "css-variants"
 import { twMerge } from "tailwind-merge"
 import { useUi } from "../../composables"
-import { headerTheme } from "@/themes/header.theme.ts"
+import { headerTheme } from "../../themes/header.theme.ts"
+import { getHeaderStack } from "../../utils/headerStack.ts"
+
+// ── Style engine ─────────────────────────────────────────────────────────────
 
 const header = scv({
   slots: [...headerTheme.slots],
@@ -13,6 +16,8 @@ const header = scv({
   classNameResolver: (...args) => twMerge(cx(...args))
 })
 
+// ── Props ─────────────────────────────────────────────────────────────────────
+
 export interface RLVHeaderProps {
   /**
    * Whether to contain the header content in a max-width container.
@@ -21,11 +26,32 @@ export interface RLVHeaderProps {
    */
   contain?: boolean
   /**
-   * Whether the header should be sticky at the top.
+   * Sticky positioning when `fixed` is false.
    *
    * @default true
    */
   sticky?: boolean
+  /**
+   * Switches to `position: fixed; left: 0; right: 0` (layer mode). When true, `top` and
+   * `stackIndex` control the exact position.
+   *
+   * @default false
+   */
+  fixed?: boolean
+  /**
+   * Controls z-index when `fixed` is true: `z-index = 100 - stackIndex`. Lower index = higher in
+   * the visual stack.
+   *
+   * @default 0
+   */
+  stackIndex?: number
+  /**
+   * When true, hides the header on scroll-down and shows it on scroll-up. Uses a passive `scroll`
+   * event listener — no external dependencies. Only meaningful when `fixed` is true.
+   *
+   * @default false
+   */
+  hideOnScroll?: boolean
   /**
    * UI overrides for individual slots, derived from the header theme.
    */
@@ -39,10 +65,15 @@ export interface RLVHeaderProps {
 const {
   contain = true,
   sticky = true,
+  fixed = false,
+  stackIndex = 0,
+  hideOnScroll = false,
   class: className,
   ui: uiProp
 } = defineProps<RLVHeaderProps>()
 
+// ── Slots ─────────────────────────────────────────────────────────────────────
+
 defineSlots<{
   /**
    * Content to display on the left side of the header (e.g., Logo).
@@ -58,35 +89,126 @@ defineSlots<{
   right(props: {}): any
 }>()
 
+// ── UI merge ──────────────────────────────────────────────────────────────────
+
 const mergedUI = useUi("header", uiProp as Record<string, unknown> | undefined)
 
-const resolvedClasses = computed(() => {
-  const classes = header({
-    contain,
-    sticky
-  })
+// ── Resolved classes ──────────────────────────────────────────────────────────
 
+const resolvedClasses = computed(() => {
+  const classes = header({ contain, sticky, fixed })
   return {
     root: twMerge(classes.root, mergedUI.value.root as string | undefined),
+    content: twMerge(classes.content, mergedUI.value.content 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)
   }
 })
+
+// ── Fixed-mode state ──────────────────────────────────────────────────────────
+
+const id = `rlv-header-${Math.random().toString(36).slice(2, 8)}`
+const rootRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const naturalHeight = ref(0)
+const isVisible = ref(true)
+
+/**
+ * Inline style applied to the root element in fixed mode.
+ */
+const fixedStyle = computed(() => {
+  if (!fixed) return {}
+  return {
+    zIndex: 100 - stackIndex
+  }
+})
+
+// ── Lifecycle: height measurement + scroll listener ───────────────────────────
+
+let resizeObserver: ResizeObserver | null = null
+let scrollHandler: (() => void) | null = null
+
+onMounted(() => {
+  if (!fixed) return
+
+  const stack = getHeaderStack()
+
+  const updateStack = () => {
+    stack.register(id, stackIndex, naturalHeight.value, isVisible.value, rootRef.value)
+  }
+
+  // Measure natural height via ResizeObserver
+  if (contentRef.value) {
+    naturalHeight.value = contentRef.value.getBoundingClientRect().height
+    resizeObserver = new ResizeObserver((entries) => {
+      const h = entries[0]?.contentRect.height
+      if (h && h > 0) {
+        naturalHeight.value = h
+        updateStack()
+      }
+    })
+    resizeObserver.observe(contentRef.value)
+  }
+
+  // Raw scroll listener for hideOnScroll
+  if (hideOnScroll) {
+    let localLastScrollY = window.scrollY
+    scrollHandler = () => {
+      const current = window.scrollY
+      const diff = current - localLastScrollY
+
+      // Ignore tiny jitter
+      if (Math.abs(diff) < 10) return
+
+      const newVisible = current <= 50 ? true : diff <= 0
+      if (newVisible !== isVisible.value) {
+        isVisible.value = newVisible
+        updateStack()
+      }
+
+      localLastScrollY = current
+    }
+
+    window.addEventListener("scroll", scrollHandler, { passive: true })
+  }
+
+  updateStack()
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  if (scrollHandler) window.removeEventListener("scroll", scrollHandler)
+  if (fixed) getHeaderStack().unregister(id)
+})
 </script>
 
 <template>
-  <header :class="[resolvedClasses.root, className]" data-slot="rlv-header" v-bind="$attrs">
-    <div :class="resolvedClasses.container">
-      <div :class="resolvedClasses.left" data-slot="header-left">
-        <slot name="left" />
-      </div>
-      <div :class="resolvedClasses.center" data-slot="header-center">
-        <slot name="center" />
-      </div>
-      <div :class="resolvedClasses.right" data-slot="header-right">
-        <slot name="right" />
+  <header
+    ref="rootRef"
+    :id="id"
+    :class="[resolvedClasses.root, className]"
+    :style="fixedStyle"
+    data-slot="rlv-header"
+    v-bind="$attrs"
+  >
+    <!--
+      content wrapper: always rendered, but only meaningful in fixed mode.
+      The ResizeObserver targets this element so the `<header>` root's padding/border
+      don't interfere with the height measurement.
+    -->
+    <div ref="contentRef" :class="resolvedClasses.content">
+      <div :class="resolvedClasses.container">
+        <div :class="resolvedClasses.left" data-slot="header-left">
+          <slot name="left" />
+        </div>
+        <div :class="resolvedClasses.center" data-slot="header-center">
+          <slot name="center" />
+        </div>
+        <div :class="resolvedClasses.right" data-slot="header-right">
+          <slot name="right" />
+        </div>
       </div>
     </div>
   </header>

package/src/components/vue/RLVIcon.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { useUi } from "../../composables"
+import { iconTheme } from "../../themes/icon.theme"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVIconProps {
+  /**
+   * Icon name following the UnoCSS icons format. Can be a string like "i-lucide-home" or a Vue
+   * component.
+   *
+   * @example
+   *   "i-lucide-home"
+   */
+  name: string
+  /**
+   * Size variant for the icon.
+   */
+  size?: keyof typeof iconTheme.variants.size
+  /**
+   * External class applied to the root element.
+   */
+  class?: string
+  /**
+   * UI overrides for individual slots.
+   */
+  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+}
+
+const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+
+const mergedUI = useUi("icon", uiProp as Record<string, unknown> | undefined)
+
+const resolvedClasses = computed(() => {
+  const { root } = icon({ size })
+  return {
+    root: twMerge(root, mergedUI.value.root, className)
+  }
+})
+
+defineSlots<{
+  default(props: {}): any
+}>()
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    :class="[resolvedClasses.root, name]"
+    data-slot="rlv-icon"
+    aria-hidden="true"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/vue/RLVLogo.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { logoTheme } from "../../themes/logo.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const logo = scv({
+  slots: [...logoTheme.slots],
+  base: logoTheme.base,
+  variants: logoTheme.variants,
+  defaultVariants: logoTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVLogoProps {
+  /**
+   * The variant of the logo to display.
+   *
+   * @default "logomark"
+   */
+  variant?: string
+  /**
+   * Override the color mode.
+   */
+  mode?: "color" | "white" | "black"
+  /**
+   * The URL to link to.
+   *
+   * @default "/"
+   */
+  href?: string
+  /**
+   * UI overrides for individual slots, derived from the logo theme.
+   */
+  ui?: Partial<Record<keyof typeof logoTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * The alt text for the logo image.
+   */
+  alt?: string
+  /**
+   * Standard HTML attributes for <a>
+   */
+  [key: string]: unknown
+}
+
+const props = withDefaults(defineProps<RLVLogoProps>(), {
+  variant: "logomark",
+  href: "/"
+})
+
+defineSlots<{
+  /**
+   * The default slot for the logo content (e.g., text, custom elements).
+   */
+  default(props: {}): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = computed(
+  () =>
+    defu(props.ui ?? {}, (globalConfig.logo as Record<string, unknown>) ?? {}) as Record<
+      keyof typeof logoTheme.base,
+      string | undefined
+    >
+)
+
+const resolvedClasses = computed(() => {
+  const { root } = logo()
+  return {
+    root: twMerge(root, mergedUI.value.root, props.class)
+  }
+})
+
+const logoSrc = computed<string | null>(() => {
+  const rcLogos = globalConfig.logos as Record<string, any>
+  let src: any = null
+
+  if (rcLogos && typeof rcLogos === "object") {
+    src = rcLogos[props.variant]
+    if (src && typeof src === "object") {
+      src = src[props.mode || "color"] || src.black || src.color
+    }
+  }
+
+  if (src && typeof src === "string" && src) return src
+
+  return null
+})
+
+const isIcon = computed(() => {
+  const src = logoSrc.value
+  if (!src) return false
+  if (src.startsWith("http") || src.startsWith("/") || src.startsWith(".")) return false
+  return src.includes(":") || src.startsWith("i-")
+})
+
+const Tag = computed(() => (props.href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="Tag === 'a' ? href : undefined"
+    :aria-label="alt || variant"
+    :class="resolvedClasses.root"
+    data-slot="rlv-logo"
+  >
+    <template v-if="logoSrc">
+      <!-- Using mode='svg' pattern is not strictly needed for UnoCSS icons -->
+      <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />
+      <img v-else :src="logoSrc" :alt="alt || ''" class="size-full block object-contain shrink-0" />
+    </template>
+    <slot v-else />
+  </component>
+</template>