@rimelight/ui 0.0.21 → 0.0.23

package/package.json

@@ -1,31 +1,31 @@
 {
-  "version": "0.0.21",
-  "type": "module",
-  "private": false,
-  "license": "MIT",
-  "author": {
-    "name": "Daniel Marchi"
-  },
   "name": "@rimelight/ui",
+  "version": "0.0.23",
+  "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
-    "typescript",
-    "astro"
+    "astro",
+    "typescript"
   ],
   "homepage": "https://rimelight.com/docs",
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Daniel Marchi"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
   },
-  "bugs": {
-    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
-  },
   "files": [
     "src",
     "worker-configuration.d.ts",
     "README.md",
     "LICENSE"
   ],
+  "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
     "./styles/*": "./src/styles/*",
@@ -70,7 +70,6 @@
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
-    "unplugin-icons": "23.0.1",
     "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {

package/src/components/ThemeToggle.astro

@@ -1,7 +1,5 @@
 ---
 import RLAButton from "./astro/RLAButton.astro";
-import IconSun from "~icons/lucide/sun"
-import IconMoon from "~icons/lucide/moon"
 
 export interface ThemeToggleProps {
   class?: string;
@@ -23,8 +21,8 @@ const { class: className, size = "md" } = Astro.props as Props
   variant="ghost"
   aria-label="Toggle theme"
 >
-    <IconSun class="sun-wrapper block dark:hidden" />
-    <IconMoon class="moon-wrapper hidden dark:block" />
+    <span class="sun-wrapper block dark:hidden i-lucide-sun" />
+    <span class="moon-wrapper hidden dark:block i-lucide-moon" />
 </RLAButton>
 
 <script>

package/src/components/astro/RLAFooter.astro

@@ -0,0 +1,69 @@
+---
+import { scv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { footerTheme } from "../../themes/footer.theme.ts";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+const footer = scv({
+  slots: [...footerTheme.slots],
+  base: footerTheme.base,
+  variants: footerTheme.variants,
+  defaultVariants: footerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAFooterProps {
+  /**
+   * 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;
+  /**
+   * Standard HTML attributes for <footer>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  contain = false,
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAFooterProps
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.footer as Record<string, unknown>) ?? {},
+) as Record<keyof typeof footerTheme.base, string | undefined>;
+
+const { root, container, left, center, right } = footer({ contain });
+---
+
+<footer
+  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-slot="rla-footer"
+  {...rest}
+>
+  <div class:list={[twMerge(container, mergedUI.container)]}>
+    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="footer-left">
+      <slot name="left" />
+    </div>
+    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="footer-center">
+      <slot name="center" />
+    </div>
+    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="footer-right">
+      <slot name="right" />
+    </div>
+  </div>
+</footer>

package/src/components/astro/RLAHeader.astro

@@ -1,75 +1,178 @@
----
-import { scv, cx } from "css-variants";
-import { twMerge } from "tailwind-merge";
-import defu from "defu";
-import { headerTheme } from "@/themes/header.theme.ts";
-import { getUIConfig } from "virtual:rimelight-ui";
-
-const header = scv({
-  slots: [...headerTheme.slots],
-  base: headerTheme.base,
-  variants: headerTheme.variants,
-  defaultVariants: headerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
-
-export interface RLAHeaderProps {
-  /**
-   * Whether to contain the header content in a max-width container.
-   * @default true
-   */
-  contain?: boolean;
-  /**
-   * Whether the header should be sticky at the top.
-   * @default true
-   */
-  sticky?: boolean;
-  /**
-   * UI overrides for individual slots, derived from the header theme.
-   */
-  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string;
-  /**
-   * Standard HTML attributes for <header>
-   */
-  [key: string]: unknown;
-}
-
-const {
-  contain = true,
-  sticky = true,
-  class: className,
-  ui: uiProp,
-  ...rest
-} = Astro.props as RLAHeaderProps
-
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.header as Record<string, unknown>) ?? {},
-) as Record<keyof typeof headerTheme.base, string | undefined>;
-
-const { root, container, left, center, right } = header({ contain, sticky });
----
-
-<header
-  class:list={[twMerge(root, mergedUI.root, className)]}
-  data-slot="rla-header"
-  {...rest}
->
-  <div class:list={[twMerge(container, mergedUI.container)]}>
-    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
-      <slot name="left" />
-    </div>
-    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
-      <slot name="center" />
-    </div>
-    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
-      <slot name="right" />
-    </div>
-  </div>
-</header>
+---
+import { scv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { headerTheme } from "../../themes/header.theme.ts";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+const header = scv({
+  slots: [...headerTheme.slots],
+  base: headerTheme.base,
+  variants: headerTheme.variants,
+  defaultVariants: headerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAHeaderProps {
+  /**
+   * Whether to contain the header content in a max-width container.
+   * @default true
+   */
+  contain?: boolean;
+  /**
+   * Sticky positioning when `fixed` is false.
+   * @default true
+   */
+  sticky?: boolean;
+  /**
+   * Switches to `position: fixed; left: 0; right: 0` (layer mode).
+   * When true, `stackIndex` controls the exact position and layer order.
+   * A module `<script>` is emitted to apply styles and attach scroll listeners.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * Controls z-index when `fixed` is true: `z-index = 100 - stackIndex`.
+   * @default 0
+   */
+  stackIndex?: number;
+  /**
+   * When true, hides the header on scroll-down and shows it on scroll-up.
+   * Implemented via a bundled Astro `<script>` — no Vue hydration needed.
+   * Only meaningful when `fixed` is true.
+   * @default false
+   */
+  hideOnScroll?: boolean;
+  /**
+   * UI overrides for individual slots, derived from the header theme.
+   */
+  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * Standard HTML attributes for <header>.
+   */
+  [key: string]: unknown;
+}
+
+const {
+  contain = true,
+  sticky = true,
+  fixed = false,
+  stackIndex = 0,
+  hideOnScroll = false,
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAHeaderProps;
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.header as Record<string, unknown>) ?? {},
+) as Record<keyof typeof headerTheme.base, string | undefined>;
+
+// Resolve classes — note: sticky variant is suppressed when fixed is true,
+// since the fixed variant's classes replace it.
+const { root, content, container, left, center, right } = header({
+  contain,
+  sticky: fixed ? false : sticky,
+  fixed,
+});
+
+// Build a unique ID so the script can target this specific header element.
+const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
+const zIndex = 100 - stackIndex;
+---
+
+<header
+  id={headerId}
+  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-rla-header={fixed ? "true" : undefined}
+  data-stack-index={stackIndex}
+  data-hide-on-scroll={String(hideOnScroll)}
+  style={fixed ? `z-index: ${zIndex};` : undefined}
+  {...rest}
+>
+  <!--
+    content wrapper: present in all modes; in fixed+hideOnScroll mode the inline
+    script observes this element's offsetHeight for accurate measurement.
+  -->
+  <div class:list={[twMerge(content, mergedUI.content)]} data-header-content>
+    <div class:list={[twMerge(container, mergedUI.container)]}>
+      <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
+        <slot name="left" />
+      </div>
+      <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
+        <slot name="center" />
+      </div>
+      <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</header>
+
+{/*
+  Astro Module Script — automatically hydrates all static Astro headers 
+  with the global Vanilla JS stack manager. It only executes once per page 
+  load, managing all headers efficiently.
+*/}
+{fixed && (
+  <script>
+    import { getHeaderStack } from "../../utils/headerStack";
+
+    // This script runs exactly once per page load, managing all Astro headers
+    const stack = getHeaderStack();
+    const headers = document.querySelectorAll("[data-rla-header='true']");
+
+    headers.forEach(header => {
+      // Prevent double-initialization
+      if ((header as any)._rl_initialized) return;
+      (header as any)._rl_initialized = true;
+
+      const id = header.id;
+      const stackIndex = parseInt(header.getAttribute("data-stack-index") || "0", 10);
+      const hideOnScroll = header.getAttribute("data-hide-on-scroll") === "true";
+      const contentEl = header.querySelector("[data-header-content]") as HTMLElement;
+
+      let naturalHeight = contentEl ? contentEl.offsetHeight : 0;
+      let isVisible = true;
+
+      const updateStack = () => {
+        stack.register(id, stackIndex, naturalHeight, isVisible, header as HTMLElement);
+      };
+
+      if (typeof ResizeObserver !== "undefined" && contentEl) {
+        new ResizeObserver(entries => {
+          const h = entries[0]?.contentRect.height;
+          if (h && h > 0) {
+            naturalHeight = h;
+            updateStack();
+          }
+        }).observe(contentEl);
+      }
+
+      if (hideOnScroll) {
+        let localLastScrollY = window.scrollY;
+        window.addEventListener("scroll", () => {
+          const current = window.scrollY;
+          const diff = current - localLastScrollY;
+          if (Math.abs(diff) >= 10) {
+            const newVisible = current <= 50 ? true : diff <= 0;
+            if (newVisible !== isVisible) {
+              isVisible = newVisible;
+              updateStack();
+            }
+            localLastScrollY = current;
+          }
+        }, { passive: true });
+      }
+
+      updateStack();
+    });
+  </script>
+)}

package/src/components/astro/RLAIcon.astro

@@ -0,0 +1,61 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { iconTheme } from "../../themes/icon.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAIconProps {
+  /**
+   * Icon name following the UnoCSS icons format.
+   * @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>>
+  [key: string]: unknown
+}
+
+const {
+  name,
+  size = "md",
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAIconProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.icon as Record<string, unknown>) ?? {}
+) as Record<keyof typeof iconTheme.base, string | undefined>
+
+const { root } = icon({ size })
+---
+
+<span
+  class={twMerge(root, mergedUI.root, className, name)}
+  data-slot="rla-icon"
+  aria-hidden="true"
+  {...rest}
+>
+</span>

package/src/components/astro/RLALogo.astro

@@ -0,0 +1,100 @@
+---
+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 RLALogoProps {
+  /**
+   * 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 {
+  variant = "logomark",
+  mode,
+  href = "/",
+  class: className,
+  ui: uiProp,
+  alt,
+  ...rest
+} = Astro.props as RLALogoProps;
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.logo as Record<string, unknown>) ?? {},
+) as Record<keyof typeof logoTheme.base, string | undefined>;
+
+const { root } = logo();
+
+const rcLogos = globalConfig.logos as Record<string, any>;
+let logoSrc: string | null = null;
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    logoSrc = src[mode || "color"] || src.black || src.color;
+  } else if (typeof src === "string") {
+    logoSrc = src;
+  }
+}
+
+// Support for UnoCSS icons (e.g. `i-heroicons-home`)
+const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+---
+
+<a
+  class={twMerge(root, mergedUI.root, className)}
+  href={href}
+  aria-label={alt || variant}
+  data-slot="rla-logo"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : (
+      <img src={logoSrc} alt={alt || ""} class="size-full block object-contain shrink-0" />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAPlaceholder.astro

@@ -0,0 +1,71 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { placeholderTheme } from "../../themes/placeholder.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAPlaceholderProps {
+  /**
+   * UI overrides for individual slots, derived from the placeholder theme.
+   */
+  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const {
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAPlaceholderProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.placeholder as Record<string, unknown>) ?? {}
+) as Record<keyof typeof placeholderTheme.base, string | undefined>
+
+const { base, svg } = placeholder()
+---
+
+<div class={twMerge(base, mergedUI.base, className)} {...rest}>
+  <svg class={twMerge(svg, mergedUI.svg)}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>