@rimelight/ui 0.0.42 → 0.0.43

package/src/components/head/UIHead.astro

@@ -0,0 +1,298 @@
+---
+import { ClientRouter } from 'astro:transitions';
+
+export interface UIHeadProps {
+  /** Whether to enable View Transitions (ClientRouter) */
+  transitions?: boolean;
+}
+
+const {
+  transitions = true
+} = Astro.props as UIHeadProps;
+---
+
+<!-- Theme Mode Flash Prevention -->
+<script>
+  (function() {
+    function getThemePreference() {
+      var stored = localStorage.getItem('theme');
+      if (stored === 'dark' || stored === 'light') return stored;
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    function applyTheme(doc: any) {
+      var pref = getThemePreference();
+      doc.documentElement.classList.toggle('dark',  pref === 'dark');
+      doc.documentElement.classList.toggle('light', pref === 'light');
+    }
+
+    applyTheme(document);
+
+    document.addEventListener('astro:before-swap', function(e: any) {
+      applyTheme(e.newDocument);
+    });
+
+    document.addEventListener('astro:after-swap', function() {
+      applyTheme(document);
+    });
+  })();
+</script>
+
+<!-- Header Stack Manager -->
+<script>
+  (function() {
+    'use strict';
+
+    const w = window as any;
+
+    if (!w.RLHeaderStack) {
+      w.RLHeaderStack = {
+        layers: [] as any[],
+        register: function(id: string, order: number, naturalHeight: number, isVisible: boolean, el: any, type?: string) {
+          if (el && !el.isConnected) return;
+          if (type === undefined) type = el && el.getAttribute ? (el.getAttribute('data-layer-type') || 'header') : 'header';
+          let layer = this.layers.find(function(l: any) { return l.id === id; });
+          if (!layer) {
+            layer = { id: id, type: type, order: order, naturalHeight: naturalHeight, isVisible: isVisible, el: el };
+            this.layers.push(layer);
+            this.sortLayers();
+          } else {
+            layer.naturalHeight = naturalHeight;
+            layer.isVisible = isVisible;
+            layer.el = el;
+          }
+          if (el) {
+            el.rlNaturalHeight = naturalHeight;
+            el.rlIsVisible = isVisible;
+          }
+          this.update();
+        },
+        unregister: function(id: string) {
+          const layer = this.layers.find(function(l: any) { return l.id === id; });
+          if (layer && layer.el) {
+            const el = layer.el as any;
+            if (el.rlScrollListener) {
+              window.removeEventListener('scroll', el.rlScrollListener);
+            }
+            if (el.rlResizeObserver) {
+              el.rlResizeObserver.disconnect();
+            }
+          }
+          this.layers = this.layers.filter(function(l: any) { return l.id !== id; });
+          this.update();
+        },
+        sortLayers: function() {
+          this.layers.sort(function(a: any, b: any) {
+            if (a.type !== b.type) return a.type === 'banner' ? -1 : 1;
+            return a.order - b.order;
+          });
+        },
+        update: function() {
+          let currentTop = 0;
+          for (let i = 0; i < this.layers.length; i++) {
+            const layer = this.layers[i];
+            if (layer && layer.el) {
+              const topPx = layer.isVisible ? currentTop + 'px' : '-' + layer.naturalHeight + 'px';
+              layer.el.style.top = topPx;
+              layer.el.dataset.topPx = topPx;
+              if (layer.isVisible) {
+                layer.el.classList.remove('opacity-0', '!pointer-events-none');
+              } else {
+                layer.el.classList.add('opacity-0', '!pointer-events-none');
+              }
+              document.documentElement.style.setProperty('--rl-header-bottom', 'calc(' + topPx + ' + ' + layer.naturalHeight + 'px)');
+              if (layer.isVisible) currentTop += layer.naturalHeight;
+            }
+          }
+          document.documentElement.style.setProperty('--rl-total-header-height', currentTop + 'px');
+        }
+      };
+    }
+
+    function getHeight(el: any): number {
+      if (!el) return 64;
+      const h = el.offsetHeight;
+      return h > 0 ? h : 64;
+    }
+
+    function dismissBanner(banner: any) {
+      var key = banner.getAttribute('data-dismiss-key');
+      if (key) localStorage.setItem(key, 'true');
+      banner.classList.add('hidden', '!pointer-events-none');
+      banner.setAttribute('data-rla-banner', 'false');
+      if (w.RLHeaderStack) w.RLHeaderStack.unregister(banner.id);
+    }
+
+    function checkDismissed() {
+      var banners = document.querySelectorAll("[data-rla-banner='true']");
+      for (var i = 0; i < banners.length; i++) {
+        var b = banners[i];
+        if (b) {
+          var key = b.getAttribute('data-dismiss-key');
+          if (key && localStorage.getItem(key) === 'true') {
+            b.classList.add('hidden', '!pointer-events-none');
+            b.setAttribute('data-rla-banner', 'false');
+          }
+        }
+      }
+    }
+
+    function selector() {
+      return "[data-rla-header='true'],[data-rla-banner='true']";
+    }
+
+    function initLayer(el: any) {
+      const RL = w.RLHeaderStack;
+      if (!RL) return;
+      if (el.getAttribute('data-rla-banner') === 'false' || el.classList.contains('hidden')) {
+        RL.unregister(el.id);
+        return;
+      }
+      const id = el.id;
+      const type = el.getAttribute('data-layer-type') || 'header';
+      const stackIndex = parseInt(el.getAttribute('data-stack-index') || '0', 10);
+      const hideOnScroll = el.getAttribute('data-hide-on-scroll') === 'true';
+      const contentEl = el.querySelector('[data-header-content]');
+
+      if (el.rlManaged) {
+        const naturalHeight = el.rlNaturalHeight || getHeight(contentEl);
+        const isVisible = el.rlIsVisible !== false;
+        RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+        return;
+      }
+      el.rlManaged = true;
+
+      let naturalHeight = getHeight(contentEl);
+      let isVisible = true;
+
+      RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+
+      if (typeof ResizeObserver !== 'undefined' && contentEl) {
+        const ro = new ResizeObserver(function(entries) {
+          if (!el.isConnected) {
+            ro.disconnect();
+            return;
+          }
+          const h = entries[0] && entries[0].contentRect.height;
+          if (h && h > 0) {
+            naturalHeight = h;
+            RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+          }
+        });
+        ro.observe(contentEl);
+        el.rlResizeObserver = ro;
+      }
+
+      if (hideOnScroll) {
+        let lastScrollY = window.scrollY;
+        const scrollListener = function() {
+          if (!el.isConnected) {
+            window.removeEventListener('scroll', scrollListener);
+            return;
+          }
+          const current = window.scrollY;
+          const diff = current - lastScrollY;
+          if (Math.abs(diff) >= 10) {
+            const newVisible = current <= 50 ? true : diff <= 0;
+            if (newVisible !== isVisible) {
+              isVisible = newVisible;
+              RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+            }
+            lastScrollY = current;
+          }
+        };
+        el.rlScrollListener = scrollListener;
+        window.addEventListener('scroll', scrollListener, { passive: true });
+      }
+
+      (function retry() {
+        if (!el.isConnected) return;
+        const h = getHeight(contentEl);
+        if (h !== naturalHeight) {
+          naturalHeight = h;
+          RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+        }
+        if (h > 0 && h !== 64 && contentEl && contentEl.offsetHeight > 0) return;
+        requestAnimationFrame(retry);
+      })();
+    }
+
+    function startObserver() {
+      if (document.body) {
+        checkDismissed();
+        const layers = document.querySelectorAll(selector());
+        for (let i = 0; i < layers.length; i++) initLayer(layers[i]);
+
+        w.rlHeaderObserver = new MutationObserver(function(mutations) {
+          for (let i = 0; i < mutations.length; i++) {
+            const added = mutations[i]?.addedNodes || [];
+            for (let j = 0; j < added.length; j++) {
+              const node = added[j] as any;
+              if (!node || node.nodeType !== 1) continue;
+              if (node.matches && node.matches(selector())) initLayer(node);
+              if (node.querySelectorAll) {
+                const nested = node.querySelectorAll(selector());
+                for (let k = 0; k < nested.length; k++) initLayer(nested[k]);
+              }
+            }
+            const removed = mutations[i]?.removedNodes || [];
+            for (let j = 0; j < removed.length; j++) {
+              const node = removed[j] as any;
+              if (!node || node.nodeType !== 1) continue;
+              if (node.matches && node.matches(selector()) && w.RLHeaderStack) w.RLHeaderStack.unregister(node.id);
+              if (node.querySelectorAll) {
+                const nested = node.querySelectorAll(selector());
+                for (let k = 0; k < nested.length; k++) {
+                  if (w.RLHeaderStack) w.RLHeaderStack.unregister(nested[k].id);
+                }
+              }
+            }
+          }
+        });
+        w.rlHeaderObserver.observe(document.body, { childList: true, subtree: true });
+      } else {
+        document.addEventListener('DOMContentLoaded', function() { startObserver(); });
+      }
+    }
+
+    function setupStack() {
+      if (w.rlHeaderObserver) {
+        w.rlHeaderObserver.disconnect();
+        w.rlHeaderObserver = null;
+      }
+      const RL = w.RLHeaderStack;
+      if (RL) {
+        RL.layers = [];
+        RL.update();
+      }
+      startObserver();
+    }
+
+    if (!w.rlBannerInit) {
+      w.rlBannerInit = true;
+      document.addEventListener('click', function(e: any) {
+        var btn = e.target?.closest?.('[data-banner-close]');
+        if (!btn) return;
+        var banner = btn.closest('[data-rla-banner]');
+        if (!banner) return;
+        dismissBanner(banner);
+      });
+    }
+
+    document.addEventListener('astro:before-swap', function() {
+      if (w.rlHeaderObserver) {
+        w.rlHeaderObserver.disconnect();
+        w.rlHeaderObserver = null;
+      }
+      if (w.RLHeaderStack) {
+        w.RLHeaderStack.layers = [];
+        w.RLHeaderStack.update();
+      }
+    });
+
+    setupStack();
+    document.addEventListener('astro:after-swap', setupStack);
+  })();
+</script>
+
+{transitions && <ClientRouter />}

package/src/components/head/head.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createHeadTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createHeadTheme()
+export const headTheme = defineTheme("head", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/header/HeaderLayer.astro

@@ -0,0 +1,63 @@
+---
+import { headerTheme } from "./header.theme"
+
+
+export interface HeaderLayerProps {
+  as?: "header" | "div" | "aside" | "section" | (string & {})
+  layerType?: "header" | "banner"
+  contain?: boolean
+  sticky?: boolean
+  fixed?: boolean
+  stackIndex?: number
+  hideOnScroll?: boolean
+  theme?: any
+  componentName?: string
+  ui?: any
+  class?: any
+  [key: string]: unknown
+}
+
+const {
+  as = "header",
+  layerType = "header",
+  contain = true,
+  sticky = true,
+  fixed = false,
+  stackIndex = 0,
+  hideOnScroll = false,
+  theme = headerTheme,
+  componentName = "header",
+  ...rest
+} = Astro.props as HeaderLayerProps
+
+const Tag = (as || "header") as any
+
+const classes = theme({
+  contain,
+  sticky: fixed ? false : sticky,
+  fixed,
+})
+
+const isBanner = layerType === "banner"
+const layerId = rest.id || `rla-${componentName}-${Math.random().toString(36).slice(2, 8)}`
+---
+
+<Tag
+  id={layerId}
+  data-slot="root"
+  class:list={[classes.root]}
+  data-contain={contain ? "true" : "false"}
+  data-rla-header={isBanner ? undefined : "true"}
+  data-rla-banner={isBanner ? "true" : undefined}
+  data-stack-index={stackIndex}
+  data-hide-on-scroll={String(hideOnScroll)}
+  data-header-layer-id={layerId}
+  data-layer-type={layerType}
+  {...rest}
+>
+  <div class:list={[classes.content]} data-header-content>
+    <div class:list={[classes.container]} data-slot="container">
+      <slot />
+    </div>
+  </div>
+</Tag>

package/src/components/header/RLAHeader.astro

@@ -1,65 +1,46 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
+import HeaderLayer from "./HeaderLayer.astro"
 import type { HeaderProps } from "./header"
-import headerTheme from "./header.theme"
+import { headerTheme } from "./header.theme"
 
 
-const header = scv(headerTheme)
-
 const {
+  as = "header",
   contain = true,
   sticky = true,
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  ui: uiProp,
-  class: className,
   ...rest
-} = Astro.props as HeaderProps;
-
-const classes = resolveClasses(header, {
-  contain,
-  sticky: fixed ? false : sticky,
-  fixed,
-}, useUi("header", uiProp), className);
+} = Astro.props as HeaderProps
 
-const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
-const zIndex = 100 - stackIndex;
+const classes = headerTheme({
+  ...Astro.props,
+  sticky: fixed ? false : sticky
+})
 ---
 
-<header
-  id={headerId}
-  data-slot="root"
-  class:list={[classes.root]}
-  data-contain={contain ? "true" : "false"}
-  data-rla-header={fixed ? "true" : undefined}
-  data-stack-index={stackIndex}
-  data-hide-on-scroll={String(hideOnScroll)}
-  data-header-layer-id={headerId}
+<HeaderLayer
+  as={as}
+  layerType="header"
+  componentName="header"
+  theme={headerTheme}
+  contain={contain}
+  sticky={sticky}
+  fixed={fixed}
+  stackIndex={stackIndex}
+  hideOnScroll={hideOnScroll}
   {...rest}
 >
-  <div class:list={[classes.content]} data-header-content>
-    <div class:list={[classes.container]} data-slot="container">
-      <div class:list={[classes.left]} data-slot="left">
-        <slot name="left" />
-      </div>
-      <div class:list={[classes.center]} data-slot="center">
-        <slot name="center" />
-      </div>
-      <div class:list={[classes.right]} data-slot="right">
-        <slot name="right" />
-      </div>
-    </div>
+  <div class:list={[classes.left]} data-slot="left">
+    <slot name="left" />
   </div>
-</header>
-
-{fixed && (
-  <style is:inline set:html={`
-    #${headerId} {
-      z-index: ${zIndex} !important;
-    }
-  `} />
-)}
-
+  <div class:list={[classes.center]} data-slot="center">
+    <slot name="center">
+      <slot />
+    </slot>
+  </div>
+  <div class:list={[classes.right]} data-slot="right">
+    <slot name="right" />
+  </div>
+</HeaderLayer>

package/src/components/header/header.theme.ts

@@ -1,46 +1,43 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createHeaderTheme = () =>
-  defineTheme({
-    slots: ["root", "content", "container", "left", "center", "right"],
-    base: {
-      root: "w-full",
-      content: "w-full",
-      container:
-        "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
-      left: "flex-1 min-w-0 flex items-center justify-start",
-      center: "flex-none flex items-center justify-center mx-4",
-      right: "flex-1 min-w-0 flex items-center justify-end"
-    },
-    variants: {
-      contain: {
-        true: {
-          container: "mx-auto max-w-90rem"
-        },
-        false: {
-          container: "max-w-none"
-        }
+export const headerTheme = defineTheme("header", {
+  slots: ["root", "content", "container", "left", "center", "right"],
+  base: {
+    root: "w-full",
+    content: "w-full",
+    container:
+      "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
+    left: "flex-1 min-w-0 flex items-center justify-start",
+    center: "flex-none flex items-center justify-center mx-4",
+    right: "flex-1 min-w-0 flex items-center justify-end"
+  },
+  variants: {
+    contain: {
+      true: {
+        container: "mx-auto max-w-90rem"
       },
-      sticky: {
-        true: {
-          root: "sticky top-0 inset-x-0 z-50"
-        },
-        false: {
-          root: ""
-        }
+      false: {
+        container: "max-w-none"
+      }
+    },
+    sticky: {
+      true: {
+        root: "sticky top-0 inset-x-0 z-50"
       },
-      fixed: {
-        true: {
-          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
-        },
-        false: {}
+      false: {
+        root: ""
       }
     },
-    defaultVariants: {
-      contain: true,
-      sticky: true,
-      fixed: false
+    fixed: {
+      true: {
+        root: "fixed left-0 right-0 z-50 transition-[top,opacity] duration-200 ease-in-out"
+      },
+      false: {}
     }
-  })
-
-export default createHeaderTheme()
+  },
+  defaultVariants: {
+    contain: true,
+    sticky: true,
+    fixed: false
+  }
+})

package/src/components/header/header.ts

@@ -1,4 +1,8 @@
 export interface HeaderProps {
+  /**
+   * HTML tag to render for the root element ("header", "div", "aside", etc.).
+   */
+  as?: "header" | "div" | "aside" | "section" | (string & {})
   /**
    * Whether to contain the header content within a max-width container.
    */

package/src/{utils → components/header}/headerStack.ts

@@ -44,6 +44,8 @@ export function getHeaderStack(): HeaderStackManager {
   }
 
   if (!window.RLHeaderStack) {
+    let updateScheduled = false
+
     window.RLHeaderStack = {
       layers: [] as HeaderLayer[],
       register(
@@ -59,15 +61,17 @@ export function getHeaderStack(): HeaderStackManager {
         if (!layer) {
           layer = { id, type, order, naturalHeight, isVisible, el }
           this.layers.push(layer)
-          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => {
-            if (a.type !== b.type) return a.type === "banner" ? -1 : 1
-            return a.order - b.order
-          })
         } else {
+          layer.type = type
+          layer.order = order
           layer.naturalHeight = naturalHeight
           layer.isVisible = isVisible
           layer.el = el
         }
+        this.layers.sort((a: HeaderLayer, b: HeaderLayer) => {
+          if (a.type !== b.type) return a.type === "banner" ? -1 : 1
+          return a.order - b.order
+        })
         this.update()
       },
       unregister(id: string) {
@@ -88,26 +92,30 @@ export function getHeaderStack(): HeaderStackManager {
         this.update()
       },
       update() {
-        let currentTop = 0
-        for (const layer of this.layers) {
-          if (layer.el) {
-            // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
-            const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
-            layer.el.style.top = topPx
-            layer.el.style.opacity = layer.isVisible ? "1" : "0"
-            layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
-            layer.el.style.setProperty(
-              "--rl-header-bottom",
-              `calc(${topPx} + ${layer.naturalHeight}px)`
-            )
-          }
-          if (layer.isVisible) {
-            currentTop += layer.naturalHeight
+        if (updateScheduled) return
+        updateScheduled = true
+
+        requestAnimationFrame(() => {
+          updateScheduled = false
+          let currentTop = 0
+          for (const layer of this.layers) {
+            if (layer.el) {
+              // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
+              const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
+              layer.el.style.top = topPx
+              layer.el.style.opacity = layer.isVisible ? "1" : "0"
+              layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
+              layer.el.style.setProperty(
+                "--rl-header-bottom",
+                `calc(${topPx} + ${layer.naturalHeight}px)`
+              )
+            }
+            if (layer.isVisible) {
+              currentTop += layer.naturalHeight
+            }
           }
-        }
-        if (currentTop > 0) {
           document.documentElement.style.setProperty("--rl-total-header-height", `${currentTop}px`)
-        }
+        })
       }
     }
   }