@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAHead.astro

@@ -1,528 +0,0 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/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/astro/RLAHeader.astro

@@ -1,67 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { HeaderProps } from "../../types"
-import headerThemeDefault, { createHeaderTheme } from "../../themes/header.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const headerTheme = uiConfig.colors ? createHeaderTheme() : headerThemeDefault
-
-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/astro/RLAHoverCard.astro

@@ -1,35 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { HoverCardProps } from "../../types"
-import hoverCardThemeDefault, { createHoverCardTheme } from "../../themes/hover-card.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const hoverCardTheme = uiConfig.colors ? createHoverCardTheme() : hoverCardThemeDefault
-
-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>

package/src/components/astro/RLAIcon.astro

@@ -1,31 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { IconProps } from "../../types"
-import iconThemeDefault, { createIconTheme } from "../../themes/icon.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const iconTheme = uiConfig.colors ? createIconTheme() : iconThemeDefault
-
-const icon = scv(iconTheme)
-
-const {
-  name,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as IconProps
-
-const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
----
-
-<span
-  class={classes.root}
-  data-slot="root"
-  aria-hidden="true"
-  {...rest}
->
-  <span class={name} />
-</span>