@rimelight/ui 0.0.6 → 0.0.7

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.7",
   "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,19 +21,17 @@
   "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
+    "./styles/*": "./src/styles/*",
     "./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",
     "./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",
@@ -47,11 +44,14 @@
     "access": "public"
   },
   "dependencies": {
+    "@astrojs/vue": "6.0.1",
     "@iconify-json/lucide": "^1.2.102",
+    "@nuxt/ui": "4.6.1",
     "css-variants": "2.3.5",
     "defu": "6.1.6",
     "embla-carousel": "8.6.0",
     "tailwind-merge": "^3.3.1",
+    "tailwindcss": "4.2.2",
     "unplugin-icons": "23.0.1"
   },
   "devDependencies": {
@@ -62,9 +62,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/BlogPost.astro

@@ -6,11 +6,6 @@ import Separator from "@rimelight/ui/components/separator/Separator.astro";
 import Avatar from "@rimelight/ui/components/avatar/Avatar.astro";
 import AvatarImage from "@rimelight/ui/components/avatar/AvatarImage.astro";
 import avatarAsset from "../assets/team/Daniel-Marchi_0000_00.webp";
-import { fetchTranslations } from "@rimelight/ui/domain";
-
-const { translationLocale, cfContext } = Astro.locals;
-const runtime = { cf: Astro.request.cf, cfContext };
-const { blog: t } = await fetchTranslations(runtime, translationLocale, ["blog"]);
 
 // Support both Astro content collections and CMS documents
 export type CMSPostDocument = {
@@ -31,6 +26,13 @@ export interface BlogPostProps extends NonNullable<Parameters<typeof blogPostVar
   class?: string;
   showImage?: boolean;
   separator?: boolean;
+  /** Translations for the component */
+  t?: {
+    latest?: string;
+    read_article?: string;
+  };
+  /** The current locale for formatting and links */
+  locale?: string;
 }
 
 type Props = BlogPostProps;
@@ -86,22 +88,35 @@ const blogPostVariants = scv({
   },
 });
 
-const { post, variant, class: className, showImage = true, separator = false } = Astro.props;
+const { 
+  post, 
+  variant, 
+  class: className, 
+  showImage = true, 
+  separator = false,
+  t: tProp,
+  locale = Astro.locals.astroI18n?.locale || "en"
+} = Astro.props;
+
+const t = {
+  latest: tProp?.latest || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("blog.latest") : "Latest"),
+  read_article: tProp?.read_article || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("blog.read_article") : "Read Article"),
+};
 
 // Detect if this is a CMS document or Astro content entry
 const isCMSDocument = "_id" in post && !("id" in post);
 
 // Extract fields based on source type
-const postTitle = isCMSDocument ? post.title : post.data.title;
-const postDescription = isCMSDocument ? (post.description || post.excerpt) : post.data.description;
-const postImage = isCMSDocument ? post.image : post.data.heroImage;
-const postFeatured = isCMSDocument ? (post.featured ?? false) : post.data.featured;
+const postTitle = isCMSDocument ? post.title : (post as CollectionEntry<"blog">).data.title;
+const postDescription = isCMSDocument ? (post.description || post.excerpt) : (post as CollectionEntry<"blog">).data.description;
+const postImage = isCMSDocument ? post.image : (post as CollectionEntry<"blog">).data.heroImage;
+const postFeatured = isCMSDocument ? (post.featured ?? false) : (post as CollectionEntry<"blog">).data.featured;
 
 // Handle date formatting
-const rawDate = isCMSDocument ? (post.publishedDate || post._createdAt) : post.data.publishedDate;
+const rawDate = isCMSDocument ? (post.publishedDate || post._createdAt) : (post as CollectionEntry<"blog">).data.publishedDate;
 const d = rawDate ? new Date(rawDate) : null;
 const formattedDate = d && !isNaN(d.getTime())
-  ? new Intl.DateTimeFormat(translationLocale, {
+  ? new Intl.DateTimeFormat(locale, {
       dateStyle: "medium",
     }).format(d)
   : "";
@@ -109,13 +124,13 @@ const formattedDate = d && !isNaN(d.getTime())
 // Get slug from CMS or Astro content
 const postSlug = isCMSDocument 
   ? (post.slug || "")
-  : post.id.replace(/^(en|pt|de|es|ja)\//, "");
+  : (post as CollectionEntry<"blog">).id.replace(/^(en|pt|de|es|ja)\//, "");
 
 const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = blogPostVariants({ variant });
 ---
 
 <div class="flex flex-col w-full">
-  <a href={`/${translationLocale}/blog/${postSlug}`} class:list={[root, className]}>
+  <a href={Astro.locals.astroI18n ? Astro.locals.astroI18n.l(`/blog/${postSlug}`) : `/${locale}/blog/${postSlug}`} class:list={[root, className]}>
     {showImage && (
       <div class={imageWrapper}>
         {postFeatured && (
@@ -178,4 +193,3 @@ const { root, imageWrapper, image, content, title, description, footer, authorGr
     </div>
   )}
 </div>
-

package/src/components/FormattedDate.astro

@@ -1,17 +1,21 @@
 ---
 export interface FormattedDateProps {
 	date?: Date | undefined;
+	locale?: string;
 }
 type Props = FormattedDateProps;
 
-const { date } = Astro.props;
+const { 
+	date,
+	locale = Astro.locals.astroI18n?.locale || "en-US"
+} = Astro.props;
 ---
 
 {
 	date && (
 		<time datetime={date.toISOString()}>
 			{
-				date.toLocaleDateString('en-us', {
+				date.toLocaleDateString(locale, {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/components/Head.astro

@@ -1,6 +1,7 @@
 ---
 import { ClientRouter } from 'astro:transitions';
 import type { SiteConfig } from '@/config';
+import UApp from './nuxt/App.vue';
 
 export interface HeadProps {
   /** Page title */
@@ -147,4 +148,6 @@ const finalCanonical = canonical || (!is404 ? Astro.url.href : undefined);
 
 {transitions && <ClientRouter />}
 
-<slot />
+<UApp client:load>
+  <slot />
+</UApp>

package/src/components/ProjectPost.astro

@@ -6,11 +6,6 @@ import Separator from "@rimelight/ui/components/separator/Separator.astro";
 import Avatar from "@rimelight/ui/components/avatar/Avatar.astro";
 import AvatarImage from "@rimelight/ui/components/avatar/AvatarImage.astro";
 import avatarAsset from "../assets/team/Daniel-Marchi_0000_00.webp";
-import { fetchTranslations } from "@rimelight/ui/domain";
-
-const { translationLocale, cfContext } = Astro.locals;
-const runtime = { cf: Astro.request.cf, cfContext };
-const { projects: t } = await fetchTranslations(runtime, translationLocale, ["projects"]);
 
 // Support both Astro content collections and CMS documents
 export type CMSProjectDocument = {
@@ -31,6 +26,13 @@ export interface ProjectPostProps extends NonNullable<Parameters<typeof projectP
   class?: string;
   showImage?: boolean;
   separator?: boolean;
+  /** Translations for the component */
+  t?: {
+    latest_badge?: string;
+    view_project?: string;
+  };
+  /** The current locale for formatting and links */
+  locale?: string;
 }
 
 type Props = ProjectPostProps;
@@ -86,23 +88,36 @@ const projectPostVariants = scv({
   },
 });
 
-const { project, variant, class: className, showImage = true, separator = false } = Astro.props;
+const { 
+  project, 
+  variant, 
+  class: className, 
+  showImage = true, 
+  separator = false,
+  t: tProp,
+  locale = Astro.locals.astroI18n?.locale || "en"
+} = Astro.props;
+
+const t = {
+  latest_badge: tProp?.latest_badge || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("projects.latest_badge") : "Latest"),
+  view_project: tProp?.view_project || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("projects.view_project") : "View Project"),
+};
 
 // Detect if this is a CMS document or Astro content entry
 const isCMSDocument = "_id" in project && !("id" in project);
 
 // Extract fields based on source type
-const projectTitle = isCMSDocument ? project.title : project.data.title;
-const projectDescription = isCMSDocument ? project.description : project.data.description;
-const projectImage = isCMSDocument ? project.heroImage : project.data.heroImage;
-const projectFeatured = isCMSDocument ? (project.featured ?? false) : project.data.featured;
-const projectTags = isCMSDocument ? (project.tags || []) : (project.data.tags || []);
+const projectTitle = isCMSDocument ? project.title : (project as CollectionEntry<"projects">).data.title;
+const projectDescription = isCMSDocument ? project.description : (project as CollectionEntry<"projects">).data.description;
+const projectImage = isCMSDocument ? project.heroImage : (project as CollectionEntry<"projects">).data.heroImage;
+const projectFeatured = isCMSDocument ? (project.featured ?? false) : (project as CollectionEntry<"projects">).data.featured;
+const projectTags = isCMSDocument ? (project.tags || []) : ((project as CollectionEntry<"projects">).data.tags || []);
 
 // Handle date formatting
-const rawDate = isCMSDocument ? (project.publishedDate || project._createdAt) : project.data.publishedDate;
+const rawDate = isCMSDocument ? (project.publishedDate || project._createdAt) : (project as CollectionEntry<"projects">).data.publishedDate;
 const d = rawDate ? new Date(rawDate) : null;
 const formattedDate = d && !isNaN(d.getTime())
-  ? new Intl.DateTimeFormat(translationLocale, {
+  ? new Intl.DateTimeFormat(locale, {
       dateStyle: "medium",
     }).format(d)
   : "";
@@ -110,13 +125,13 @@ const formattedDate = d && !isNaN(d.getTime())
 // Get slug from CMS or Astro content
 const projectSlug = isCMSDocument 
   ? (project.slug || "")
-  : project.id.replace(/^(en|pt|de|es|ja)\//, "");
+  : (project as CollectionEntry<"projects">).id.replace(/^(en|pt|de|es|ja)\//, "");
 
 const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = projectPostVariants({ variant });
 ---
 
 <div class="flex flex-col w-full">
-  <a href={`/${translationLocale}/projects/${projectSlug}`} class:list={[root, className]}>
+  <a href={Astro.locals.astroI18n ? Astro.locals.astroI18n.l(`/projects/${projectSlug}`) : `/${locale}/projects/${projectSlug}`} class:list={[root, className]}>
     {showImage && (
       <div class={imageWrapper}>
         {projectFeatured && (
@@ -180,4 +195,3 @@ const { root, imageWrapper, image, content, title, description, footer, authorGr
     </div>
   )}
 </div>
-

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/components/nuxt/index.ts

@@ -0,0 +1 @@
+export * from "@nuxt/ui"

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>
+  }
+}

package/src/integrations/ui.ts

@@ -1,87 +1,106 @@
-import type { AstroIntegration } from "astro"
-import defu from "defu"
-import Icons from "unplugin-icons/vite"
-import { defaultUIConfig } from "../themes"
-
-/**
- * Shape of the `ui` config that can be passed to the integration. Keys are component names, values
- * are partial theme configs.
- */
-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 {
-  // Merge user overrides with defaults (user-provided values win)
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
-
-  const virtualModuleId = "virtual:rimelight-ui"
-  const resolvedVirtualModuleId = "\0" + virtualModuleId
-
-  return {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui configuration")
-
-        updateConfig({
-          vite: {
-            plugins: [
-              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
-                }
-              }
-            ]
-          }
-        })
-      }
-    }
-  }
-}
+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
+  ]
+}

package/src/integrations/vue-entrypoint.ts

@@ -0,0 +1,6 @@
+import type { App } from "vue"
+import ui from "@nuxt/ui/vue-plugin"
+
+export default (app: App) => {
+  app.use(ui)
+}

package/src/middleware/sri.ts

@@ -59,14 +59,14 @@ export const sri = defineMiddleware(async (_, next) => {
     const scriptRegex = new RegExp(`(<script[^>]+src=["']${url}["'][^>]*)(/?>)`, "g")
     modifiedHtml = modifiedHtml.replace(
       scriptRegex,
-      `$1 integrity="${String(hash)}" crossorigin="anonymous"$2`
+      `$1 integrity="${hash}" crossorigin="anonymous"$2`
     )
 
     // Look for link tags with the specific URL
     const linkRegex = new RegExp(`(<link[^>]+href=["']${url}["'][^>]*)(/?>)`, "g")
     modifiedHtml = modifiedHtml.replace(
       linkRegex,
-      `$1 integrity="${String(hash)}" crossorigin="anonymous"$2`
+      `$1 integrity="${hash}" crossorigin="anonymous"$2`
     )
   }
 

package/src/styles/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

package/src/utils/index.ts

@@ -1,3 +1 @@
-export * from "./parse-boolean"
-export * from "./deep-merge"
 export * from "./embed"

package/src/components/LanguageSwitcher.astro

@@ -1,128 +0,0 @@
----
-/**
- * Language Switcher Component (Extension)
- *
- * Variants:
- * - 'full': Shows language icon, current flag, name, and chevron
- * - 'label' (default): Shows language icon and current flag only
- *
- * Uses Starwind components for consistency.
- * Built using native Astro i18n features.
- */
-
-import Dropdown from "@rimelight/ui/components/dropdown/Dropdown.astro";
-import DropdownTrigger from "@rimelight/ui/components/dropdown/DropdownTrigger.astro";
-import DropdownContent from "@rimelight/ui/components/dropdown/DropdownContent.astro";
-import DropdownItem from "@rimelight/ui/components/dropdown/DropdownItem.astro";
-import Button from "@rimelight/ui/components/button/Button.astro";
-import Flag from "@rimelight/ui/components/icons/Flag.astro";
-
-import { SUPPORTED_LOCALES, LANGUAGES } from "@rimelight/ui/domain";
-import { localeToFlagCode } from "@rimelight/ui/domain";
-import { replaceLocaleInPath } from "@rimelight/ui/domain";
-import type { Locale } from "@rimelight/ui/domain";
-
-export interface LanguageSwitcherProps {
-  variant?: 'full' | 'label';
-  class?: string;
-}
-type Props = LanguageSwitcherProps;
-
-const { variant = 'label', class: className } = Astro.props;
-const { uiLocale: currentLocale } = Astro.locals;
-const currentPath = Astro.url.pathname;
-
-/**
- * Utility to compute the target URL for a locale switch
- * Handles standard Astro routing by replacing the locale prefix in the URL.
- */
-function getSwitchUrl(targetLocale: string) {
-  return replaceLocaleInPath(currentPath, currentLocale as string, targetLocale);
-}
-
-const currentFlagCode = localeToFlagCode(currentLocale as Locale);
-const currentLabel = LANGUAGES[(currentLocale as Locale) as keyof typeof LANGUAGES] || currentLocale;
----
-
-<Dropdown class={className}>
-  <DropdownTrigger asChild>
-    <Button
-      variant="outline"
-      size="sm"
-      class:list={[
-        "rounded-full border-border/50 bg-background/50 hover:bg-background transition-all h-9 shadow-none",
-        variant === 'full' ? "px-3xs" : "px-5xs",
-      ]}
-      aria-label="Select Language"
-    >
-      <div class="flex items-center gap-5xs">
-        <div class="flex items-center justify-center shrink-0 opacity-70 size-4.5">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="text-current size-4.5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h7" /><path d="M9 3v2c0 4.418 -2.239 8 -5 8" /><path d="M5 9c0 2.144 2.952 3.908 6.7 4" /><path d="M12 20l4 -9l4 9" /><path d="M19.1 18h-6.2" />
-          </svg>
-        </div>
-
-        <div class="flex items-center -translate-y-[0.5px]">
-          <Flag code={currentFlagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
-        </div>
-
-        {variant === 'full' && (
-          <div class="flex items-center gap-5xs border-l border-border/30 pl-5xs ml-3xs">
-            <span class="text-xs font-medium text-muted-foreground whitespace-nowrap leading-none flex items-center translate-y-[0.5px]">
-              {currentLabel}
-            </span>
-            <div class="flex items-center justify-center opacity-50 -translate-y-[0.5px]">
-              <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-              </svg>
-            </div>
-          </div>
-        )}
-      </div>
-    </Button>
-  </DropdownTrigger>
-
-  <DropdownContent align="end" class="w-6xl border-border/50 bg-background/95 backdrop-blur-md p-5xs">
-    {SUPPORTED_LOCALES.map((locale) => {
-      const isActive = locale === currentLocale;
-      const href = getSwitchUrl(locale);
-      const flagCode = localeToFlagCode(locale as Locale);
-      const label = LANGUAGES[(locale as Locale) as keyof typeof LANGUAGES] || locale;
-
-      return (
-        <DropdownItem
-          as="a"
-          href={href}
-          class:list={[
-            "flex items-center h-10 px-3xs gap-3xs transition-colors rounded-lg",
-            isActive ? "bg-accent/70 text-foreground font-semibold" : "text-muted-foreground hover:text-foreground"
-          ]}
-        >
-          <div class="flex items-center shrink-0 -translate-y-[0.5px]">
-            <Flag code={flagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
-          </div>
-          <span class="text-sm leading-none flex items-center translate-y-[0.5px]">{label}</span>
-          {isActive && (
-            <div class="ml-auto flex items-center justify-center h-full text-primary">
-              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
-              </svg>
-            </div>
-          )}
-        </DropdownItem>
-      );
-    })}
-
-  </DropdownContent>
-</Dropdown>
-
-

package/src/components/MissingTranslationBanner.astro

@@ -1,39 +0,0 @@
----
-import { checkMissingTranslation } from '../domain/i18n/resolve-locale'
-import { fetchTranslations } from '../domain/i18n/fetcher'
-
-export interface MissingTranslationBannerProps {}
-type Props = MissingTranslationBannerProps;
-
-const missingType = checkMissingTranslation(
-  Astro.locals.uiLocale,
-  Astro.locals.isMissingContent
-)
-
-let bannerText: string | null = null
-
-if (missingType) {
-  const { cfContext, translationLocale } = Astro.locals
-  const runtime = { cf: Astro.request.cf, cfContext }
-  const { messages } = await fetchTranslations(
-    runtime,
-    translationLocale,
-    ['messages']
-  )
-
-  bannerText =
-    missingType === 'content'
-      ? messages.errors.ui.MISSING_TRANSLATED_CONTENT ||
-        'Sorry, this article is not yet available in your selected language.'
-      : messages.errors.ui.MISSING_TRANSLATED_UI ||
-        'Sorry, this page is not yet fully available in your selected language.'
-}
----
-
-{
-  bannerText && (
-    <div class='rounded px-4 py-2 mb-8 max-w-160 mx-auto border border-amber-300 bg-amber-50 text-amber-900  dark:border-amber-600 dark:bg-amber-900/20 dark:text-amber-600 text-center'>
-      {bannerText}
-    </div>
-  )
-}

package/src/utils/deep-merge.ts

@@ -1,36 +0,0 @@
-function isObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value)
-}
-
-/**
- * Deep-merge two dictionaries. - `base` provides known structure (fallback) - `overrides` can
- * provide partial values - Both types are preserved and merged correctly
- */
-function assertRecord(obj: unknown): asserts obj is Record<string, unknown> {
-  if (!obj || typeof obj !== "object") throw new Error("Expected object")
-}
-
-function assertA<T>(obj: unknown): asserts obj is T {
-  if (!obj) throw new Error("Expected result")
-}
-
-export function deepMerge<A extends object, B extends Partial<A>>(base: A, overrides: B): A {
-  const result = { ...base }
-  assertRecord(result)
-
-  for (const key of Object.keys(overrides)) {
-    const overrideValue = Reflect.get(overrides, key)
-    const baseValue = Reflect.get(base, key)
-
-    if (overrideValue === undefined) continue
-
-    if (isObject(baseValue) && isObject(overrideValue)) {
-      Reflect.set(result, key, deepMerge(baseValue as object, overrideValue as Partial<object>))
-    } else {
-      Reflect.set(result, key, overrideValue)
-    }
-  }
-
-  assertA<A>(result)
-  return result
-}

package/src/utils/parse-boolean.ts

@@ -1,14 +0,0 @@
-/**
- * Parse a boolean flag from Wrangler-env string.
- *
- * Accepts: "1", "true", "on" → true "0", "false", "off" → false undefined → defaultValue
- */
-export function parseBooleanFlag(value: string | undefined, defaultValue: boolean): boolean {
-  if (value === undefined) return defaultValue
-
-  const v = value.toLowerCase()
-  if (v === "1" || v === "true" || v === "on") return true
-  if (v === "0" || v === "false" || v === "off") return false
-
-  return defaultValue
-}