@rimelight/ui 0.0.42 → 0.0.44

package/src/components/grid/grid.theme.ts

@@ -1,38 +1,35 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createGridTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "grid w-full [&>*]:mt-0!"
+export const gridTheme = defineTheme("grid", {
+  slots: ["root"],
+  base: {
+    root: "grid w-full [&>*]:mt-0!"
+  },
+  variants: {
+    cols: {
+      1: { root: "grid-cols-1" },
+      2: { root: "grid-cols-1 sm:grid-cols-2" },
+      3: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" },
+      4: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" },
+      5: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5" },
+      6: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6" }
     },
-    variants: {
-      cols: {
-        1: { root: "grid-cols-1" },
-        2: { root: "grid-cols-1 sm:grid-cols-2" },
-        3: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" },
-        4: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" },
-        5: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5" },
-        6: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6" }
-      },
-      gap: {
-        none: { root: "gap-0" },
-        xs: { root: "gap-1 sm:gap-2" },
-        sm: { root: "gap-2 sm:gap-4" },
-        md: { root: "gap-4 sm:gap-6" },
-        lg: { root: "gap-6 sm:gap-8" },
-        xl: { root: "gap-8 sm:gap-12" }
-      },
-      stagger: {
-        true: { root: "pb-20 [&>:nth-child(2n)]:translate-y-20" },
-        false: { root: "" }
-      }
+    gap: {
+      none: { root: "gap-0" },
+      xs: { root: "gap-1 sm:gap-2" },
+      sm: { root: "gap-2 sm:gap-4" },
+      md: { root: "gap-4 sm:gap-6" },
+      lg: { root: "gap-6 sm:gap-8" },
+      xl: { root: "gap-8 sm:gap-12" }
     },
-    defaultVariants: {
-      cols: 2,
-      gap: "md",
-      stagger: false
+    stagger: {
+      true: { root: "pb-20 [&>:nth-child(2n)]:translate-y-20" },
+      false: { root: "" }
     }
-  })
-
-export default createGridTheme()
+  },
+  defaultVariants: {
+    cols: 2,
+    gap: "md",
+    stagger: false
+  }
+})

package/src/components/head/UIHead.astro

@@ -0,0 +1,297 @@
+---
+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.setAttribute('data-theme', pref);
+    }
+
+    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-xs 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.
    */