@rimelight/ui 0.0.6 → 0.0.8

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Daniel Marchi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Daniel Marchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -14,7 +14,6 @@
   },
   "files": [
     "src",
-    "i18n-data.json",
     "worker-configuration.d.ts",
     "README.md",
     "LICENSE"
@@ -22,6 +21,7 @@
   "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
+    "./styles/*": "./src/styles/*",
     "./components/*": "./src/components/*",
     "./components/astro/*": "./src/components/astro/*",
     "./components/vue/*": "./src/components/vue/*",
@@ -31,27 +31,29 @@
     "./composables/*": "./src/composables/*",
     "./config": "./src/config/index.ts",
     "./config/*": "./src/config/*",
-    "./domain": "./src/domain/index.ts",
-    "./domain/*": "./src/domain/*",
-    "./lib": "./src/lib/index.ts",
-    "./lib/*": "./src/lib/*",
     "./utils": "./src/utils/index.ts",
     "./utils/*": "./src/utils/*",
     "./integrations": "./src/integrations/index.ts",
+    "./integrations/vue-entrypoint": "./src/integrations/vue-entrypoint.ts",
     "./integrations/*": "./src/integrations/*",
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
+    "./nuxt": "./src/nuxt.ts",
     "./*": "./src/*"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@astrojs/vue": "6.0.1",
     "@iconify-json/lucide": "^1.2.102",
+    "@nuxt/ui": "4.6.1",
+    "@tailwindcss/vite": "^4.2.3",
     "css-variants": "2.3.5",
     "defu": "6.1.6",
     "embla-carousel": "8.6.0",
     "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.2.3",
     "unplugin-icons": "23.0.1"
   },
   "devDependencies": {
@@ -62,9 +64,8 @@
     "@unocss/eslint-plugin": "66.6.8",
     "astro": "6.1.4",
     "eslint-plugin-regexp": "3.1.0",
-    "typescript": "6.0.2",
     "unocss": "66.6.8",
-    "vite-plus": "0.1.16"
+    "vite-plus": "0.1.18"
   },
   "peerDependencies": {
     "astro": ">=6.0.0",

package/src/components/Head.astro

@@ -1,150 +1,153 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-
-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} />
-
-<!-- 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 />}
-
-<slot />
+---
+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} />
+
+<!-- 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>

package/src/components/astro/RLAHeader.astro

@@ -1,75 +1,75 @@
----
-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;
+  /**
+   * 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>

package/src/composables/useUi.ts

@@ -13,8 +13,8 @@ import type { DefaultUIConfig } from "@/themes"
  * @param uiProp - The local `ui` prop from defineProps
  * @returns ComputedRef of merged UI overrides
  */
-export function useUi<T extends keyof DefaultUIConfig>(
-  componentName: T,
+export function useUi(
+  componentName: keyof DefaultUIConfig,
   uiProp: Record<string, unknown> | undefined
 ): ComputedRef<Record<string, unknown>> {
   const globalConfig = getUIConfig()

package/src/env.d.ts

@@ -1,16 +1,13 @@
-/// <reference types="astro/client" />
-
-declare module "virtual:rimelight-ui" {
-  import type { DefaultUIConfig } from "../themes"
-
-  export function getUIConfig(): DefaultUIConfig
-}
-
-declare namespace App {
-  interface Locals {
-    uiLocale?: string
-    translationLocale?: string
-    isMissingContent?: boolean
-    cfContext?: Record<string, unknown>
-  }
-}
+/// <reference types="astro/client" />
+
+declare module "virtual:rimelight-ui" {
+  import type { DefaultUIConfig } from "../themes"
+
+  export function getUIConfig(): DefaultUIConfig
+}
+
+declare namespace App {
+  interface Locals {
+    cfContext?: Record<string, unknown>
+  }
+}