@rimelight/ui 0.0.37 → 0.0.39

package/src/components/head/RLAHead.astro

@@ -0,0 +1,528 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config/site.config';
+
+export interface OGImage {
+  /** Image URL (relative or absolute) */
+  src: string;
+  /** Alt text for the image */
+  alt: string;
+}
+
+export interface RSSFeed {
+  /** RSS feed URL */
+  href: string;
+  /** Feed title (defaults to "RSS") */
+  title?: string;
+}
+
+export interface HeadProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Open Graph image with alt text */
+  ogImage?: OGImage;
+  /** Open Graph type (e.g., "website", "article") */
+  ogType?: string;
+  /** Open Graph locale (defaults to "en_US") */
+  ogLocale?: string;
+  /** Whether to prevent indexing */
+  noindex?: boolean;
+  /** Whether this is a 404 page */
+  is404?: boolean;
+  /** Robots metadata (overrides noindex/is404 logic if provided) */
+  robots?: string;
+  /** Canonical URL */
+  canonical?: string;
+  /** Language alternates for i18n */
+  languageAlternates?: Array<{ hreflang: string; href: string }>;
+  /** Site configuration for defaults */
+  config?: SiteConfig;
+  /** Whether to enable View Transitions (ClientRouter) */
+  transitions?: boolean;
+  /** Meta charset */
+  charset?: string;
+  /** Meta viewport */
+  viewport?: string;
+  /** RSS feed configuration */
+  rssFeed?: RSSFeed;
+}
+
+const {
+  title,
+  description,
+  ogImage,
+  ogType = 'website',
+  ogLocale = 'en_US',
+  noindex = false,
+  is404 = false,
+  robots,
+  canonical,
+  languageAlternates = [],
+  config,
+  transitions = true,
+  charset = 'utf-8',
+  viewport = 'width=device-width, initial-scale=1',
+  rssFeed,
+} = Astro.props as HeadProps;
+
+// Resolve defaults from config if available
+const siteName = config?.name || 'Rimelight';
+const siteDescription = config?.description || '';
+const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
+const themeColor = config?.branding?.colors?.themeColor;
+const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
+const twitterHandle = config?.seo?.authorHandle;
+const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
+
+// Calculated Values
+const displayTitle = is404
+  ? `404 - Not Found | ${siteName}`
+  : title
+    ? titleTemplate.replace('%s', title)
+    : siteName;
+
+const finalDescription = description || siteDescription;
+const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
+  ? (finalDescription.length > config.seo.maxDescriptionLength
+      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
+      : finalDescription)
+  : finalDescription;
+
+const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
+const absoluteOgImage = finalOgImage
+  ? new URL(finalOgImage.src, Astro.site).toString()
+  : undefined;
+
+function formatCanonicalURL(url: string | URL) {
+  const resolved = new URL(url, Astro.site);
+  const path = resolved.toString();
+  const hasQueryParams = path.includes('?');
+  if (hasQueryParams) {
+    return path.replace(/\/?$/, '');
+  }
+  return path.replace(/\/?$/, '/');
+}
+
+const finalCanonical = canonical
+  ? formatCanonicalURL(canonical)
+  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
+
+const isIndexable = !noindex && !is404;
+const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
+---
+
+<!-- Basic Metadata -->
+<meta charset={charset} />
+<meta name="viewport" content={viewport} />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- RSS Feed -->
+{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
+
+<!-- SEO -->
+<title>{displayTitle}</title>
+{safeDescription && <meta name="description" content={safeDescription} />}
+<meta name="robots" content={robots || defaultRobots} />
+{finalCanonical && <link rel="canonical" href={finalCanonical} />}
+
+<!-- i18n Alternates -->
+{languageAlternates.map((alt) => (
+  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
+))}
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType} />
+<meta property="og:locale" content={ogLocale} />
+<meta property="og:url" content={Astro.url.href} />
+<meta property="og:title" content={title || siteName} />
+{safeDescription && <meta property="og:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
+<meta property="og:site_name" content={siteName} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url.href} />
+<meta property="twitter:title" content={title || siteName} />
+{safeDescription && <meta property="twitter:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
+{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
+{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
+
+<!-- Icons & Manifest -->
+<link rel="icon" type="image/svg+xml" href={favicon} />
+<link rel="icon" href="/favicon.ico" sizes="32x32" />
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
+
+<!-- Theme -->
+<meta name="color-scheme" content="light dark" />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content={themeColor || "#ffffff"} />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
+
+<script is:inline>
+  (function() {
+    if (window.trustedTypes && trustedTypes.createPolicy) {
+      trustedTypes.createPolicy('default', {
+        createHTML: function(input) { return input; },
+        createScript: function(input) { return input; },
+        createScriptURL: function(input) { return input; }
+      });
+    }
+  })();
+</script>
+<script is:inline>
+  (function() {
+    if (!window.initialCspNonce) {
+      window.initialCspNonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ||
+                               Array.from(document.querySelectorAll('script')).find(function(s) { return s.nonce; })?.nonce ||
+                               document.querySelector('script[nonce]')?.nonce ||
+                               document.querySelector('style[nonce]')?.nonce;
+    }
+
+    var orig = document.createElement;
+    document.createElement = function(tag, opts) {
+      var el = orig.call(document, tag, opts);
+      var lowTag = tag.toLowerCase();
+      if (lowTag === 'script' || lowTag === 'style') {
+        var nonce = window.initialCspNonce;
+        if (nonce) {
+          el.setAttribute('nonce', nonce);
+          el.nonce = nonce;
+        }
+      }
+      return el;
+    };
+
+    // Synchronous DOM insertion overrides to catch cloned, imported, or createElementNS tags
+    var origAppend = Element.prototype.appendChild;
+    Element.prototype.appendChild = function(child) {
+      if (child && (child.tagName === 'SCRIPT' || child.tagName === 'STYLE')) {
+        var nonce = window.initialCspNonce;
+        if (nonce && !child.getAttribute('nonce')) {
+          child.setAttribute('nonce', nonce);
+          child.nonce = nonce;
+        }
+      }
+      return origAppend.apply(this, arguments);
+    };
+
+    var origInsert = Element.prototype.insertBefore;
+    Element.prototype.insertBefore = function(newChild, refChild) {
+      if (newChild && (newChild.tagName === 'SCRIPT' || newChild.tagName === 'STYLE')) {
+        var nonce = window.initialCspNonce;
+        if (nonce && !newChild.getAttribute('nonce')) {
+          newChild.setAttribute('nonce', nonce);
+          newChild.nonce = nonce;
+        }
+      }
+      return origInsert.apply(this, arguments);
+    };
+
+    var origAppendMethod = Element.prototype.append;
+    if (origAppendMethod) {
+      Element.prototype.append = function() {
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg && (arg.tagName === 'SCRIPT' || arg.tagName === 'STYLE')) {
+            var nonce = window.initialCspNonce;
+            if (nonce && !arg.getAttribute('nonce')) {
+              arg.setAttribute('nonce', nonce);
+              arg.nonce = nonce;
+            }
+          }
+        }
+        return origAppendMethod.apply(this, arguments);
+      };
+    }
+
+    var origPrependMethod = Element.prototype.prepend;
+    if (origPrependMethod) {
+      Element.prototype.prepend = function() {
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg && (arg.tagName === 'SCRIPT' || arg.tagName === 'STYLE')) {
+            var nonce = window.initialCspNonce;
+            if (nonce && !arg.getAttribute('nonce')) {
+              arg.setAttribute('nonce', nonce);
+              arg.nonce = nonce;
+            }
+          }
+        }
+        return origPrependMethod.apply(this, arguments);
+      };
+    }
+
+    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) {
+      var pref = getThemePreference();
+      doc.documentElement.classList.toggle('dark',  pref === 'dark');
+      doc.documentElement.classList.toggle('light', pref === 'light');
+    }
+
+    // Apply immediately on initial load
+    applyTheme(document);
+
+    // Apply to incoming document BEFORE the swap — eliminates the flash
+    document.addEventListener('astro:before-swap', function(e) {
+      applyTheme(e.newDocument);
+      var nonce = window.initialCspNonce;
+      if (nonce) {
+        e.newDocument.querySelectorAll('script').forEach(function(s) {
+          s.setAttribute('nonce', nonce);
+        });
+        e.newDocument.querySelectorAll('style').forEach(function(s) {
+          s.setAttribute('nonce', nonce);
+        });
+      }
+    });
+
+    // Safety net: re-apply after swap in case anything overrides it
+    document.addEventListener('astro:after-swap', function() {
+      applyTheme(document);
+    });
+  })();
+</script>
+
+<script is:inline data-astro-rerun>
+  (function() {
+    'use strict';
+    if (window.rlHeaderObserver) window.rlHeaderObserver.disconnect();
+
+    if (!window.RLHeaderStack) {
+      window.RLHeaderStack = {
+        layers: [],
+        register: function(id, order, naturalHeight, isVisible, el, type) {
+          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) { 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) {
+          const layer = this.layers.find(function(l) { return l.id === id; });
+          if (layer && layer.el) {
+            const el = layer.el;
+            if (el.rlScrollListener) {
+              window.removeEventListener('scroll', el.rlScrollListener);
+            }
+            if (el.rlResizeObserver) {
+              el.rlResizeObserver.disconnect();
+            }
+          }
+          this.layers = this.layers.filter(function(l) { return l.id !== id; });
+          this.update();
+        },
+        sortLayers: function() {
+          this.layers.sort(function(a, b) {
+            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.el) {
+              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');
+          }
+        }
+      };
+    }
+    const RL = window.RLHeaderStack;
+    RL.layers = [];
+
+    function getHeight(el) {
+      if (!el) return 64;
+      const h = el.offsetHeight;
+      return h > 0 ? h : 64;
+    }
+
+    function initLayer(el) {
+      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 dismissBanner(banner) {
+      var key = banner.getAttribute('data-dismiss-key');
+      if (key) localStorage.setItem(key, 'true');
+      banner.style.display = 'none';
+      banner.setAttribute('data-rla-banner', 'false');
+      if (window.RLHeaderStack) RL.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];
+        var key = b.getAttribute('data-dismiss-key');
+        if (key && localStorage.getItem(key) === 'true') {
+          b.style.display = 'none';
+          b.setAttribute('data-rla-banner', 'false');
+        }
+      }
+    }
+
+    if (!window.rlBannerInit) {
+      window.rlBannerInit = true;
+      document.addEventListener('click', function(e) {
+        var btn = e.target.closest('[data-banner-close]');
+        if (!btn) return;
+        var banner = btn.closest('[data-rla-banner]');
+        if (!banner) return;
+        dismissBanner(banner);
+      });
+    }
+
+    function selector() {
+      return "[data-rla-header='true'],[data-rla-banner='true']";
+    }
+
+    function startObserver() {
+      if (document.body) {
+        checkDismissed();
+        const layers = document.querySelectorAll(selector());
+        for (let i = 0; i < layers.length; i++) initLayer(layers[i]);
+
+        window.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];
+              if (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];
+              if (node.nodeType !== 1) continue;
+              if (node.matches && node.matches(selector())) RL.unregister(node.id);
+              if (node.querySelectorAll) {
+                const nested = node.querySelectorAll(selector());
+                for (let k = 0; k < nested.length; k++) RL.unregister(nested[k].id);
+              }
+            }
+          }
+        });
+        window.rlHeaderObserver.observe(document.body, { childList: true, subtree: true });
+      } else {
+        document.addEventListener('DOMContentLoaded', startObserver);
+      }
+    }
+
+    startObserver();
+  })();
+</script>
+
+{transitions && <ClientRouter />}
+
+{config && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": config.name,
+    "url": Astro.site ? Astro.site.toString() : config.url,
+    "description": config.description
+  })} />
+)}

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

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

package/src/components/header/RLAHeader.astro

@@ -0,0 +1,65 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { HeaderProps } from "./header"
+import headerTheme from "./header.theme"
+
+
+const header = scv(headerTheme)
+
+const {
+  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);
+
+const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
+const zIndex = 100 - stackIndex;
+---
+
+<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}
+  {...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>
+</header>
+
+{fixed && (
+  <style is:inline set:html={`
+    #${headerId} {
+      z-index: ${zIndex} !important;
+    }
+  `} />
+)}
+

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

@@ -0,0 +1,46 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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 truncate",
+      center: "flex-none flex items-center justify-center mx-4",
+      right: "flex-1 min-w-0 flex items-center justify-end truncate"
+    },
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-90rem"
+        },
+        false: {
+          container: "max-w-none"
+        }
+      },
+      sticky: {
+        true: {
+          root: "sticky top-0 inset-x-0 z-50"
+        },
+        false: {
+          root: ""
+        }
+      },
+      fixed: {
+        true: {
+          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+        },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      contain: true,
+      sticky: true,
+      fixed: false
+    }
+  })
+
+export default createHeaderTheme()

package/src/components/hover-card/RLAHoverCard.astro

@@ -0,0 +1,35 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { HoverCardProps } from "./hover-card"
+import { resolveTheme } from "../../utils/resolveTheme"
+import hoverCardThemeDefault, { createHoverCardTheme } from "./hover-card.theme"
+const hoverCardTheme = resolveTheme(hoverCardThemeDefault, createHoverCardTheme)
+
+
+const hoverCard = scv(hoverCardTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as HoverCardProps
+
+const classes = resolveClasses(hoverCard, {
+  placement
+}, useUi("hoverCard", uiProp), className)
+---
+<div class={classes.root} data-slot="hover-card-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>