@rimelight/ui 0.0.24 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -67,7 +67,6 @@
     "defu": "6.1.6",
     "embla-carousel": "8.6.0",
     "picomatch": "^4.0.4",
-    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
@@ -82,6 +81,9 @@
     "@unocss/eslint-plugin": "66.6.8",
     "astro": "6.1.8",
     "eslint-plugin-regexp": "3.1.0",
+    "knip": "6.12.2",
+    "tsx": "4.21.0",
+    "typescript": "6.0.3",
     "unocss": "66.6.8",
     "vite-plus": "0.1.19"
   },
@@ -96,6 +98,8 @@
     }
   },
   "scripts": {
-    "astro": "astro"
+    "knip": "knip",
+    "astro": "astro",
+    "docs:meta": "tsx scripts/extract-meta.ts"
   }
 }

package/src/components/Head.astro

@@ -1,156 +1,199 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-import { App } from '../nuxt.ts';
-
-export interface HeadProps {
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Open Graph image URL */
-  ogImage?: 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;
-}
-
-const {
-  title,
-  description,
-  ogImage,
-  noindex = false,
-  is404 = false,
-  robots,
-  canonical,
-  languageAlternates = [],
-  config,
-  transitions = true,
-  charset = "utf-8",
-  viewport = "width=device-width,initial-scale=1",
-} = Astro.props as HeadProps
-
-// Resolve defaults from config if available
-const siteName = config?.name || "Rimelight";
-const siteUrl = config?.url || "";
-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;
-const absoluteOgImage = finalOgImage 
-  ? (finalOgImage.startsWith('http') ? finalOgImage : `${siteUrl}${finalOgImage}`)
-  : undefined;
-
-const finalCanonical = canonical || (!is404 ? Astro.url.href : undefined);
----
-
-<!-- Basic Metadata -->
-<meta charset={charset} />
-<meta name="viewport" content={viewport} />
-<meta name="generator" content={Astro.generator} />
-
-<!-- Sitemap -->
-<link rel="sitemap" href="/sitemap-index.xml" />
-
-<!-- SEO -->
-<title>{displayTitle}</title>
-{safeDescription && <meta name="description" content={safeDescription} />}
-{robots ? <meta name="robots" content={robots} /> : (noindex || is404) && <meta name="robots" content="noindex, nofollow" />}
-{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="website" />
-<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} />}
-<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} />}
-{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
-{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
-
-<!-- Icons -->
-<link rel="icon" type="image/svg+xml" href={favicon} />
-
-<!-- Theme -->
-{themeColor && <meta name="theme-color" content={themeColor} />}
-
-<script is:inline>
-  const theme = (() => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme');
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  })();
-
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-
-  window.localStorage.setItem('theme', theme);
-</script>
-
-<script>
-  document.addEventListener('astro:after-swap', () => {
-    if (localStorage.getItem('theme') === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  });
-</script>
-
-{transitions && <ClientRouter />}
-
-<App client:load>
-  <slot />
-</App>
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+import { App } from '../nuxt.ts';
+
+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 -->
+<link rel="icon" type="image/svg+xml" href={favicon} />
+
+<!-- Theme -->
+{themeColor && <meta name="theme-color" content={themeColor} />}
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })();
+
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+
+  window.localStorage.setItem('theme', theme);
+</script>
+
+<script>
+  document.addEventListener('astro:after-swap', () => {
+    if (localStorage.getItem('theme') === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  });
+</script>
+
+{transitions && <ClientRouter />}
+
+<App client:load>
+  <slot />
+</App>

package/src/components/astro/RLAAccordion.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type Props = HTMLAttributes<'details'> & {
+    summary: string;
+};
+
+const { summary, class: className, ...attrs } = Astro.props;
+---
+
+<details class:list={['group', className]} {...attrs}>
+    <summary
+            class="accordion code flex cursor-pointer list-none items-center justify-between text-astro-gray-200"
+    >
+        <span>{summary}</span>
+        <span class="i-lucide-chevron s-4 rotate-0 transition-transform duration-300 ease-in-out group-open:-rotate-180" />
+    </summary>
+
+    <div class="pt-4">
+        <slot />
+    </div>
+</details>

package/src/components/astro/RLAButton.astro

@@ -1,118 +1,104 @@
----
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { buttonTheme } from "../../themes/button.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
-
-export interface RLAButtonProps {
-  variant?: keyof typeof buttonTheme.variants.variant;
-  color?: keyof typeof buttonTheme.variants.color;
-  size?: keyof typeof buttonTheme.variants.size;
-  href?: string;
-  label?: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
-  loading?: boolean;
-  square?: boolean;
-  block?: boolean;
-  active?: boolean;
-  activeColor?: keyof typeof buttonTheme.variants.color;
-  activeVariant?: keyof typeof buttonTheme.variants.variant;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
-  [key: string]: unknown;
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant,
-  ...rest
-} = Astro.props as RLAButtonProps
-
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {},
-) as Record<string, string | undefined>;
-
-const isLeading = (leadingIcon || Astro.slots.has("leading")) || loading
-const isTrailing = (trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingClasses = loading ? "animate-spin" : ""
-const trailingClasses = loading ? "animate-spin" : ""
-
-const resolved = button({
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active
-});
-
-const Tag = href ? "a" : "button";
----
-<Tag
-  class={twMerge(resolved.root, mergedUI.root, className)}
-  data-slot="rla-button"
-  {...(Tag === "a" ? { href } : {})}
-  {...rest}
->
-  <slot name="leading" {...{ ui: resolved }}>
-    {isLeading && (
-      <span class={twMerge(resolved.leadingIcon, mergedUI.leadingIcon)} data-slot="leading-icon">
-        <span class={twMerge(showLeadingIcon, leadingClasses)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={twMerge(resolved.label, mergedUI.label)} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: resolved }}>
-    {isTrailing && (
-      <span class={twMerge(resolved.trailingIcon, mergedUI.trailingIcon)} data-slot="trailing-icon">
-        <span class={twMerge(showTrailingIcon, trailingClasses)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import buttonTheme from "../../themes/button.theme"
+
+const button = scv(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
+
+export interface RLAButtonProps {
+  variant?: ButtonVariants['variant'];
+  color?: ButtonVariants['color'];
+  size?: ButtonVariants['size'];
+  href?: string;
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  loading?: boolean;
+  square?: boolean;
+  block?: boolean;
+  active?: boolean;
+  activeColor?: ButtonVariants['color'];
+  activeVariant?: ButtonVariants['variant'];
+  ui?: Partial<Record<string, string>>;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
+  ...rest
+} = Astro.props as RLAButtonProps
+
+const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active
+}, useUi("button", uiProp), className);
+
+const Tag = href ? "a" : "button";
+---
+<Tag
+  class={classes.root}
+  data-slot="rla-button"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+</Tag>