@rimelight/ui 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Rimelight UI Library.",
   "license": "MIT",
   "author": "Daniel Marchi",
@@ -13,7 +13,14 @@
   ],
   "type": "module",
   "exports": {
+    ".": "./src/integrations/index.ts",
     "./components/*": "./src/components/*",
+    "./components/astro/*": "./src/components/astro/*",
+    "./components/vue/*": "./src/components/vue/*",
+    "./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",
@@ -33,18 +40,31 @@
   },
   "dependencies": {
     "css-variants": "2.3.5",
-    "embla-carousel": "8.6.0"
+    "defu": "6.1.6",
+    "embla-carousel": "8.6.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
+    "@astrojs/ts-plugin": "1.10.7",
+    "@e18e/eslint-plugin": "0.3.0",
     "@types/node": "25.5.2",
+    "@unocss/eslint-plugin": "66.6.7",
     "astro": "6.1.4",
+    "eslint-plugin-regexp": "3.1.0",
     "typescript": "6.0.2",
-    "vite-plus": "0.1.15",
-    "wrangler": "4.80.0"
+    "unocss": "66.6.7",
+    "unplugin-icons": "23.0.1",
+    "vite-plus": "0.1.15"
   },
   "peerDependencies": {
-    "astro": ">=6.0.0"
+    "astro": ">=6.0.0",
+    "vue": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
   },
   "scripts": {
     "generate:config": "vp config",

package/src/components/astro/RLAButton.astro

@@ -0,0 +1,95 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { buttonTheme } from "../../themes/button.theme";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+// Create the variant resolver with tailwind-merge for conflict resolution
+const button = cv({
+  ...buttonTheme,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+/**
+ * UI prop interface for overriding the base class.
+ * For multi-slot components (scv), this would have keys per slot.
+ */
+export interface RLAButtonUI {
+  base?: string;
+}
+
+/**
+ * Button props — uses indexed access types on the theme config
+ * (same pattern as Nuxt UI's Button['variants']['color'])
+ */
+export interface RLAButtonProps {
+  /**
+   * Button variant style.
+   * @default "default"
+   */
+  variant?: keyof typeof buttonTheme.variants.variant;
+  /**
+   * Button size.
+   * @default "md"
+   */
+  size?: keyof typeof buttonTheme.variants.size;
+  /**
+   * Per-instance UI override. Merged with global config via `defu`.
+   * Higher priority than integration-level config.
+   */
+  ui?: RLAButtonUI;
+  /**
+   * External class — applied after all internal classes.
+   */
+  class?: string;
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string;
+  /**
+   * Standard HTML attributes for <button>
+   */
+  [key: string]: unknown;
+}
+
+type Props = RLAButtonProps;
+
+const {
+  variant,
+  size,
+  class: className,
+  ui: uiProp,
+  href,
+  ...rest
+} = Astro.props;
+
+// Get global config from the virtual module (populated by the Astro integration)
+const globalConfig = getUIConfig();
+
+// Merge: uiProp > globalConfig.button (uiProp wins)
+const mergedUI = defu<Record<string, unknown>[], [Record<string, unknown>]>(
+  uiProp ?? {},
+  (globalConfig.button as Record<string, unknown>) ?? {},
+);
+
+// Resolve classes: cv() returns a string, className prop merges overrides
+const classes = button({
+  variant,
+  size,
+  className: mergedUI.base as string | undefined,
+});
+
+// Determine whether to render <a> or <button>
+const Tag = href ? "a" : "button";
+---
+
+<Tag
+  class:list={[classes, className]}
+  data-slot="rla-button"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot />
+</Tag>

package/src/components/vue/RLVButton.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { cv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { buttonTheme } from "../../themes/button.theme"
+
+// Create the variant resolver with tailwind-merge for conflict resolution
+const button = cv({
+  ...buttonTheme,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+/**
+ * Button props — uses indexed access types on the theme config (same pattern as Nuxt UI's
+ * Button['variants']['color'])
+ */
+export interface RLVButtonProps {
+  /**
+   * Button variant style.
+   *
+   * @default "default"
+   */
+  variant?: keyof typeof buttonTheme.variants.variant
+  /**
+   * Button size.
+   *
+   * @default "md"
+   */
+  size?: keyof typeof buttonTheme.variants.size
+  /**
+   * Per-instance UI override for the base class string. Merged with variant/size classes via
+   * css-variants.
+   */
+  ui?: { base?: string }
+  /**
+   * External class — applied after all internal classes.
+   */
+  class?: string
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string
+}
+
+const props = withDefaults(defineProps<RLVButtonProps>(), {
+  variant: "default",
+  size: "md",
+  class: undefined,
+  ui: undefined,
+  href: undefined
+})
+
+// Resolve classes — exactly like Astro: cv() with className param
+const resolvedClasses = computed(() => {
+  const classes = button({
+    variant: props.variant,
+    size: props.size,
+    className: props.ui?.base
+  })
+  return classes
+})
+
+// Determine whether to render <a> or <button>
+const tag = computed(() => (props.href ? "a" : "button"))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="href"
+    :class="[resolvedClasses, props.class]"
+    data-slot="rlv-button"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+</template>

package/src/composables/index.ts

@@ -0,0 +1 @@
+export { useComponentUI } from "./useComponentUI"

package/src/composables/useComponentUI.ts

@@ -0,0 +1,27 @@
+import { computed, type ComputedRef } from "vue"
+import defu from "defu"
+import { getUIConfig } from "virtual:rimelight-ui"
+import type { DefaultUIConfig } from "../themes"
+
+/**
+ * Reactive UI config merge composable for Vue components.
+ *
+ * Merges (highest priority first): 1. Local `ui` prop override 2. Global config from integration
+ * (virtual:rimelight-ui)
+ *
+ * @param componentName - The component key in the config (e.g. 'button')
+ * @param uiProp - The local `ui` prop from defineProps
+ * @returns ComputedRef of merged UI overrides
+ */
+export function useComponentUI<T extends keyof DefaultUIConfig>(
+  componentName: T,
+  uiProp: Record<string, unknown> | undefined
+): ComputedRef<Record<string, unknown>> {
+  const globalConfig = getUIConfig()
+
+  return computed(() => {
+    const componentConfig = globalConfig[componentName]
+
+    return defu(uiProp ?? {}, componentConfig ?? {})
+  })
+}

package/src/config/site.config.ts

@@ -18,28 +18,10 @@ export interface SiteConfig {
       backgroundColor: string
     }
   }
-}
-
-export const SITE_CONFIG: SiteConfig = {
-  id: "danielmarchi.dev",
-  name: "Daniel Marchi",
-  description: "A portfolio website built with Astro.",
-  url: "https://danielmarchi.dev",
-  ogImage: "/og-default.png",
-  author: "Daniel Marchi",
-  email: "hello@danielmarchi.dev",
-  branding: {
-    logo: {
-      alt: "Daniel Marchi"
-    },
-    favicon: {
-      svg: "/favicon.svg"
-    },
-    colors: {
-      themeColor: "#F94C10",
-      backgroundColor: "#ffffff"
-    }
+  seo: {
+    titleTemplate: string
+    ogImageFallback: string
+    maxDescriptionLength: number
+    authorHandle?: string // e.g., @danielmarchi
   }
 }
-
-export default SITE_CONFIG

package/src/domain/i18n/fetcher.ts

@@ -1,4 +1,3 @@
-import { SITE_CONFIG } from "../../config"
 import { TRANSLATIONS_VERSION } from "./runtime-constants"
 let env: any = {}
 try {
@@ -13,6 +12,17 @@ import type { Locale, Namespace, PickSchema } from "./schema"
 import { deepMerge } from "../../utils/shared/deep-merge"
 import { parseBooleanFlag } from "../../utils/shared/parse-boolean"
 
+/**
+ * Minimal environment interface for i18n operations. Usually provided by Cloudflare Workers.
+ */
+interface Env {
+  TRANSLATIONS: {
+    get: (keys: string[], options: { type: "json"; cacheTtl?: number }) => Promise<Map<string, any>>
+  }
+  I18N_CACHE?: string
+  DEBUG_I18N?: string
+}
+
 // Optional fallbacks (auto-loaded if generated)
 let FALLBACKS: Record<string, unknown> | null = null
 
@@ -56,7 +66,7 @@ export interface Runtime {
  *
  * Responsibilities:
  *
- * - Build KV keys using SITE_CONFIG.id, namespace and locale
+ * - Build KV keys using namespace and locale (isolated by KV namespace binding)
  * - Optionally use edge cache (controlled by env flag I18N_CACHE)
  * - On cache miss, read from KV and merge with optional FALLBACK_* dictionaries
  * - Persist the merged payload back to the edge cache
@@ -75,7 +85,7 @@ export async function fetchTranslations<N extends Namespace>(
 
   const { cache, waitUntil } = useCache ? getEdgeCache(runtime) : { cache: null, waitUntil: null }
 
-  const keys = namespaces.map((ns) => `${SITE_CONFIG.id}:${ns}:${lang}`)
+  const keys = namespaces.map((ns) => `${ns}:${lang}`)
 
   const { cacheRequest } = buildCacheKey(lang, namespaces)
 
@@ -174,7 +184,7 @@ function buildCacheKey<N extends Namespace>(
   lang: Locale,
   namespaces: readonly N[]
 ): { cacheId: string; cacheRequest: Request } {
-  const cacheId = `${SITE_CONFIG.id}:i18n:v${TRANSLATIONS_VERSION}:${lang}:${namespaces.join(",")}`
+  const cacheId = `i18n:v${TRANSLATIONS_VERSION}:${lang}:${namespaces.join(",")}`
 
   const cacheRequest = new Request(`https://i18n-cache/${encodeURIComponent(cacheId)}`)
 

package/src/domain/i18n/middleware/i18n.ts

@@ -60,7 +60,8 @@ function resolveFallbackLocale(context: I18nMiddlewareContext): Locale {
     if (parsed.success) return parsed.data
   } else {
     // Cloudflare Geo-IP Strategy
-    const country = context.request.cf?.country
+    const request = context.request as Request & { cf?: { country?: string } }
+    const country = request.cf?.country
     let parsed = LocaleSchema.safeParse(mapCountryToLocale(country ?? ""))
     if (parsed.success) return parsed.data
   }

package/src/domain/seo/constants.ts

@@ -1,20 +1,6 @@
-// Specify the path here without the @ alias, since we use this file in astro.config.ts
-import { SITE_CONFIG, LINKS } from "../../config"
-
 export const SEO_DEFAULTS = {
-  siteName: SITE_CONFIG.name,
-
-  baseUrl: SITE_CONFIG.url,
-
-  // Dynamically inserting a name into a template
-  titleTemplate: `%s | ${SITE_CONFIG.name}`,
-
-  // Other SEO-specific things
+  // Generic SEO defaults
   ogImageFallback: `/src/assets/houston.webp`,
   defaultDescription: "Production-ready foundations for SaaS and Telegram Mini Apps",
-  maxDescriptionLength: 160,
-  author: {
-    name: "Gary Stupak",
-    url: LINKS.twitter
-  }
+  maxDescriptionLength: 160
 } as const

package/src/domain/seo/services/llms.ts

@@ -1,13 +1,12 @@
-import { SITE_CONFIG } from "../../../config"
+import { type SiteConfig } from "../../../config"
 import { DEFAULT_LOCALE } from "../../i18n/constants"
-import { SEO_DEFAULTS } from "../constants"
 import { type BaseCMSContentEntry } from "../../cms"
 
 // Helper for the core project details
-function buildProjectDetails(): string {
+function buildProjectDetails(config: SiteConfig): string {
   let content = `## Project Details\n`
-  content += `- Name: ${SITE_CONFIG.name}\n`
-  content += `- Description: ${SEO_DEFAULTS.defaultDescription}\n`
+  content += `- Name: ${config.name}\n`
+  content += `- Description: ${config.description}\n`
   return content
 }
 
@@ -37,16 +36,20 @@ function buildBlogSection(baseUrl: string, posts: BaseCMSContentEntry[]): string
 }
 
 // Main orchestrator function
-export function generateLlmsText(baseUrl: string, blogPosts: BaseCMSContentEntry[]): string {
-  let content = `# ${SITE_CONFIG.name}\n\n`
-  content += `> ${SEO_DEFAULTS.defaultDescription}\n\n`
+export function generateLlmsText(
+  baseUrl: string,
+  blogPosts: BaseCMSContentEntry[],
+  config: SiteConfig
+): string {
+  let content = `# ${config.name}\n\n`
+  content += `> ${config.description}\n\n`
 
   // Compose the final document block by block
-  content += buildProjectDetails()
+  content += buildProjectDetails(config)
   content += buildBlogSection(baseUrl, blogPosts)
 
   content += `## Note to AI Agents\n`
-  content += `This is the official documentation and context file for the ${SITE_CONFIG.name} project. `
+  content += `This is the official documentation and context file for the ${config.name} project. `
   content += `Please use the provided links and blog posts to gather specific technical details about our Astro and Cloudflare Workers architecture.\n`
 
   return content

package/src/domain/seo/utils.ts

@@ -1,4 +1,3 @@
-import { SEO_DEFAULTS } from "./constants"
 import { replaceLocaleInPath } from "../i18n/format"
 
 /**
@@ -25,9 +24,9 @@ export function buildAlternateUrl(
   return href
 }
 
-export function truncateDescription(text: string): string {
-  if (text.length <= SEO_DEFAULTS.maxDescriptionLength) return text
-  return text.substring(0, SEO_DEFAULTS.maxDescriptionLength - 3) + "..."
+export function truncateDescription(text: string, maxLength: number = 160): string {
+  if (text.length <= maxLength) return text
+  return text.substring(0, maxLength - 3) + "..."
 }
 
 export function buildCanonicalUrl(path: string, siteOrigin: string): string {

package/src/env.d.ts

@@ -1,49 +1,16 @@
 /// <reference types="astro/client" />
 
-interface ImportMetaEnv {
-  readonly PROD: boolean
-  readonly DEV: boolean
-  // add other env vars here...
-}
+declare module "virtual:rimelight-ui" {
+  import type { DefaultUIConfig } from "../themes"
 
-interface ImportMeta {
-  readonly env: ImportMetaEnv
+  export function getUIConfig(): DefaultUIConfig
 }
 
-import type { Locale } from "./domain/i18n/schema"
-
-declare global {
-  namespace App {
-    interface Locals {
-      uiLocale: Locale
-      translationLocale: Locale
-      cfContext: any
-      isMissingContent?: boolean
-    }
-  }
-
-  declare module "astro:content" {
-    export interface CollectionEntry<T extends string = any> {
-      id: string
-      data: any
-      slug: string
-      body: string
-      collection: T
-    }
-    export const getCollection: (
-      collection: string,
-      filter?: (entry: CollectionEntry) => boolean
-    ) => Promise<CollectionEntry[]>
-    export const getEntry: (collection: string, id: string) => Promise<CollectionEntry>
-  }
-
-  declare module "cloudflare:workers" {
-    export const env: Env
-  }
-
-  declare module "~icons/*" {
-    import type { AstroComponentFactory } from "astro/runtime/server/index.js"
-    const component: AstroComponentFactory
-    export default component
+declare namespace App {
+  interface Locals {
+    uiLocale?: string
+    translationLocale?: string
+    isMissingContent?: boolean
+    cfContext?: Record<string, unknown>
   }
 }

package/src/integrations/index.ts

@@ -1 +1,3 @@
 export * from "./sri"
+export { ui } from "./ui"
+export type { UIOptions, UIConfigOverrides } from "./ui"

package/src/integrations/sri.ts

@@ -72,11 +72,11 @@ export function sri(): AstroIntegration {
             plugins: [
               {
                 name: "vite-plugin-sri-manifest",
-                resolveId(id) {
+                resolveId(id: string) {
                   if (id === virtualModuleId) return resolvedVirtualModuleId
                   return null
                 },
-                load(id) {
+                load(id: string) {
                   if (id === resolvedVirtualModuleId) {
                     return `export const manifest = ${JSON.stringify(sriManifest)};`
                   }

package/src/integrations/ui.ts

@@ -0,0 +1,81 @@
+import type { AstroIntegration } from "astro"
+import defu from "defu"
+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"]>
+}
+
+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: [
+              {
+                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
+                }
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+}

package/src/middleware/index.ts

@@ -1 +1,2 @@
 export * from "./sri"
+export * from "./security"

package/src/middleware/security.ts

@@ -0,0 +1,15 @@
+import { defineMiddleware } from "astro:middleware"
+
+export const security = defineMiddleware(async (_, next) => {
+  const response = await next()
+
+  const newResponse = new Response(response.body, response)
+
+  // Standard Security Headers
+  newResponse.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
+  newResponse.headers.set("X-Content-Type-Options", "nosniff")
+  newResponse.headers.set("X-Frame-Options", "DENY")
+  newResponse.headers.set("Cross-Origin-Resource-Policy", "same-origin")
+
+  return newResponse
+})

package/src/middleware/sri.ts

@@ -2,6 +2,8 @@ import { defineMiddleware } from "astro:middleware"
 // @ts-ignore - virtual module generated by the SRI integration
 import { manifest } from "virtual:sri-manifest"
 
+declare const HTMLRewriter: any
+
 function assertManifest(obj: unknown): asserts obj is Record<string, string> {
   if (!obj || typeof obj !== "object") throw new Error("Expected manifest")
 }
@@ -23,7 +25,7 @@ export const sri = defineMiddleware(async (_, next) => {
   if (typeof HTMLRewriter !== "undefined") {
     return new HTMLRewriter()
       .on("script[src]", {
-        element(el) {
+        element(el: any) {
           const src = el.getAttribute("src")
           if (src && manifest[src]) {
             el.setAttribute("integrity", manifest[src])
@@ -32,7 +34,7 @@ export const sri = defineMiddleware(async (_, next) => {
         }
       })
       .on('link[rel="stylesheet"][href]', {
-        element(el) {
+        element(el: any) {
           const href = el.getAttribute("href")
           if (href && manifest[href]) {
             el.setAttribute("integrity", manifest[href])