@rimelight/ui 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -25,7 +25,6 @@
     "./components/*": "./src/components/*",
     "./components/astro/*": "./src/components/astro/*",
     "./components/vue/*": "./src/components/vue/*",
-    "./components/nuxt/*": "./src/components/nuxt/*",
     "./themes": "./src/themes/index.ts",
     "./themes/*": "./src/themes/*",
     "./composables": "./src/composables/index.ts",
@@ -35,9 +34,11 @@
     "./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": {
@@ -47,11 +48,12 @@
     "@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.2",
+    "tailwindcss": "^4.2.3",
     "unplugin-icons": "23.0.1"
   },
   "devDependencies": {

package/src/components/Head.astro

@@ -1,153 +1,153 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-import UApp from './nuxt/App.vue';
-
-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 />}
-
-<UApp client:load>
-  <slot />
-</UApp>
+---
+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/env.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="astro/client" />
 
+declare module "virtual:nuxt-ui-plugins" {
+  import type { Plugin } from "vue"
+  const plugin: Plugin
+  export default plugin
+}
+
 declare module "virtual:rimelight-ui" {
   import type { DefaultUIConfig } from "../themes"
 

package/src/integrations/ui.ts

@@ -1,106 +1,112 @@
-import path from "node:path"
-import { fileURLToPath } from "node:url"
-import type { AstroIntegration } from "astro"
-import vue from "@astrojs/vue"
-import uiPlugin from "@nuxt/ui/vite"
-import defu from "defu"
-import Icons from "unplugin-icons/vite"
-import { defaultUIConfig } from "../themes"
-
-const nuxtUIEntry = fileURLToPath(import.meta.resolve("@nuxt/ui"))
-const nuxtUIComponentsPath = path.join(path.dirname(nuxtUIEntry), "runtime/components")
-
-/**
- * Shape of the `ui` config that can be passed to the integration.
- */
-export type UIConfigOverrides = {
-  button?: Partial<(typeof defaultUIConfig)["button"]>
-  header?: Partial<(typeof defaultUIConfig)["header"]>
-}
-
-export interface UIOptions {
-  /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
-   */
-  ui?: UIConfigOverrides
-}
-
-/**
- * Astro integration for `@rimelight/ui`.
- *
- * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
- * to access the merged config.
- *
- * @example
- *   // astro.config.mjs
- *   import { ui } from "@rimelight/ui/integrations"
- *
- *   export default defineConfig({
- *     integrations: [
- *       ui({
- *         ui: {
- *           button: {
- *             defaultVariants: { variant: "primary" }
- *           }
- *         }
- *       })
- *     ]
- *   })
- */
-export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
-
-  const virtualModuleId = "virtual:rimelight-ui"
-  const resolvedVirtualModuleId = "\0" + virtualModuleId
-
-  const rimelightUIIntegration: AstroIntegration = {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui core")
-
-        updateConfig({
-          vite: {
-            resolve: {
-              alias: {
-                "@rimelight/ui/components/nuxt/": `${nuxtUIComponentsPath}/`
-              }
-            },
-            plugins: [
-              uiPlugin({
-                router: false,
-                scanPackages: ["@rimelight/ui"]
-              }),
-              Icons({
-                compiler: "astro",
-                autoInstall: true
-              }),
-              {
-                name: "vite-plugin-rimelight-ui-config",
-                enforce: "pre",
-                resolveId(id: string) {
-                  if (id === virtualModuleId) return resolvedVirtualModuleId
-                  return null
-                },
-                load(id: string) {
-                  if (id === resolvedVirtualModuleId) {
-                    return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
-                  }
-                  return null
-                }
-              }
-            ]
-          }
-        })
-      }
-    }
-  }
-
-  return [
-    vue({
-      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
-    }),
-    rimelightUIIntegration
-  ]
-}
+import type { AstroIntegration } from "astro"
+import vue from "@astrojs/vue"
+import uiPlugin from "@nuxt/ui/vite"
+import defu from "defu"
+import Icons from "unplugin-icons/vite"
+import tailwindcss from "@tailwindcss/vite"
+import { defaultUIConfig } from "../themes"
+
+/**
+ * Shape of the `ui` config that can be passed to the integration.
+ */
+export type UIConfigOverrides = {
+  button?: Partial<(typeof defaultUIConfig)["button"]>
+  header?: Partial<(typeof defaultUIConfig)["header"]>
+}
+
+export interface UIOptions {
+  /**
+   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
+   * wins).
+   */
+  ui?: UIConfigOverrides
+}
+
+/**
+ * Astro integration for `@rimelight/ui`.
+ *
+ * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
+ * to access the merged config.
+ *
+ * @example
+ *   // astro.config.mjs
+ *   import { ui } from "@rimelight/ui/integrations"
+ *
+ *   export default defineConfig({
+ *     integrations: [
+ *       ui({
+ *         ui: {
+ *           button: {
+ *             defaultVariants: { variant: "primary" }
+ *           }
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function ui(options: UIOptions = {}): AstroIntegration[] {
+  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
+
+  const virtualModuleId = "virtual:rimelight-ui"
+  const resolvedVirtualModuleId = "\0" + virtualModuleId
+
+  const rimelightUIIntegration: AstroIntegration = {
+    name: "@rimelight/ui",
+    hooks: {
+      "astro:config:setup": ({ updateConfig, logger }) => {
+        logger.info("Initializing @rimelight/ui core")
+
+        updateConfig({
+          vite: {
+            optimizeDeps: {
+              exclude: [
+                "@rimelight/ui",
+                "@rimelight/ui/vue-plugin",
+                "@rimelight/ui/integrations/vue-entrypoint",
+                "@nuxt/ui"
+              ]
+            },
+            ssr: {
+              noExternal: ["@rimelight/ui", "@nuxt/ui"],
+              optimizeDeps: {
+                exclude: ["@rimelight/ui/vue-plugin", "@rimelight/ui/integrations/vue-entrypoint"]
+              }
+            },
+            plugins: [
+              uiPlugin({
+                router: false,
+                scanPackages: ["@rimelight/ui"]
+              }),
+              Icons({
+                compiler: "astro",
+                autoInstall: true
+              }),
+              tailwindcss(),
+              {
+                name: "vite-plugin-rimelight-ui-config",
+                enforce: "pre",
+                resolveId(id: string) {
+                  if (id === virtualModuleId) return resolvedVirtualModuleId
+                  return null
+                },
+                load(id: string) {
+                  if (id === resolvedVirtualModuleId) {
+                    return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
+                  }
+                  return null
+                }
+              }
+            ] as any
+          }
+        })
+      }
+    }
+  }
+
+  return [
+    vue({
+      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
+    }),
+    rimelightUIIntegration
+  ]
+}