@rimelight/ui 0.0.9 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -34,11 +34,15 @@
     "./utils": "./src/utils/index.ts",
     "./utils/*": "./src/utils/*",
     "./integrations": "./src/integrations/index.ts",
-    "./integrations/vue-entrypoint": "./src/integrations/vue-entrypoint.ts",
     "./integrations/*": "./src/integrations/*",
+    "./integrations/vue-entrypoint": "./src/integrations/vue-entrypoint.ts",
+    "./plugins": "./src/plugins/index.ts",
+    "./plugins/*": "./src/plugins/*",
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
     "./nuxt": "./src/nuxt.ts",
+    "./presets": "./src/presets/index.ts",
+    "./presets/*": "./src/presets/*",
     "./*": "./src/*"
   },
   "publishConfig": {
@@ -49,12 +53,16 @@
     "@iconify-json/lucide": "^1.2.102",
     "@nuxt/ui": "4.6.1",
     "@tailwindcss/vite": "^4.2.3",
+    "@unocss/astro": "^66.6.8",
     "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"
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
+    "unplugin-icons": "23.0.1",
+    "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
@@ -62,12 +70,13 @@
     "@e18e/eslint-plugin": "0.3.0",
     "@types/node": "25.5.2",
     "@unocss/eslint-plugin": "66.6.8",
-    "astro": "6.1.4",
+    "astro": "6.1.8",
     "eslint-plugin-regexp": "3.1.0",
     "unocss": "66.6.8",
-    "vite-plus": "0.1.18"
+    "vite-plus": "0.1.19"
   },
   "peerDependencies": {
+    "@astrojs/starlight": ">=0.5.0",
     "astro": ">=6.0.0",
     "vue": ">=3.4.0"
   },

package/src/components/astro/RLAButton.astro

@@ -2,7 +2,7 @@
 import { scv, cx } from "css-variants"
 import { twMerge } from "tailwind-merge"
 import defu from "defu"
-import { buttonTheme } from "@/themes/button.theme.ts"
+import { buttonTheme } from "../../themes/button.theme.ts"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const button = scv({

package/src/components/vue/RLVButton.vue

@@ -2,7 +2,7 @@
 import { scv, cx } from "css-variants"
 import { twMerge } from "tailwind-merge"
 import defu from "defu"
-import { buttonTheme } from "@/themes/button.theme.ts"
+import { buttonTheme } from "../../themes/button.theme.ts"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const button = scv({
@@ -60,6 +60,13 @@ const {
   href
 } = defineProps<RLVButtonProps>()
 
+defineSlots<{
+  /**
+   * The default slot for the button content (e.g., text, icons).
+   */
+  default(props: {}): any
+}>()
+
 const globalConfig = getUIConfig()
 
 const mergedUI = defu(

package/src/components/vue/RLVHeader.vue

@@ -43,6 +43,21 @@ const {
   ui: uiProp
 } = defineProps<RLVHeaderProps>()
 
+defineSlots<{
+  /**
+   * Content to display on the left side of the header (e.g., Logo).
+   */
+  left(props: {}): any
+  /**
+   * Content to display in the center of the header (e.g., Navigation Links).
+   */
+  center(props: {}): any
+  /**
+   * Content to display on the right side of the header (e.g., User Menu, Theme Toggle).
+   */
+  right(props: {}): any
+}>()
+
 const mergedUI = useUi("header", uiProp as Record<string, unknown> | undefined)
 
 const resolvedClasses = computed(() => {

package/src/integrations/ui.ts

@@ -1,4 +1,5 @@
 import type { AstroIntegration } from "astro"
+import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
 import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
@@ -50,60 +51,64 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
 
+  function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
+    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
+            }
+          }
+        ]
+      }
+    })
+  }
+
   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
-          }
-        })
+        setViteConfig(updateConfig)
       }
     }
   }
 
   return [
+    UnoCSS(),
     vue({
       appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
     }),

package/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export { default as starlightAddons } from "../plugins/starlightAddons"
+export type { StarlightAddonsConfig } from "../plugins/starlightAddons"

package/src/plugins/starlightAddons/PageTitle.astro

@@ -0,0 +1,114 @@
+---
+import DefaultPageTitle from "@astrojs/starlight/components/PageTitle.astro";
+import config from "virtual:rimelight-starlight-addons-config";
+
+const { copy = true, share = true } = config ?? {};
+
+const currentUrl = Astro.url.href;
+const currentTitle = (Astro.locals as any).starlightRoute?.entry?.data?.title || "";
+---
+
+<DefaultPageTitle />
+{(copy || share) && (
+  <div class="rl-addons">
+    {copy && (
+      <button class="rl-addon-btn" id="rl-copy-markdown" title="Copy Markdown">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+      </button>
+    )}
+    {share && (
+      <button class="rl-addon-btn" id="rl-share" title="Share">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
+      </button>
+    )}
+  </div>
+)}
+
+<style>
+  .rl-addons {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .rl-addon-btn {
+    background-color: var(--sl-color-gray-6);
+    color: var(--sl-color-white);
+    border: 1px solid var(--sl-color-gray-5);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .rl-addon-btn:hover {
+    background-color: var(--sl-color-gray-5);
+  }
+
+  .rl-addon-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
+
+<script>
+  import TurndownService from "turndown";
+  import { gfm } from "turndown-plugin-gfm";
+
+  const turndown = new TurndownService({
+    headingStyle: "atx",
+    codeBlockStyle: "fenced",
+    bulletListMarker: "-",
+  });
+  turndown.use(gfm);
+
+  const copyBtn = document.getElementById("rl-copy-markdown");
+  const shareBtn = document.getElementById("rl-share");
+
+  if (copyBtn) {
+    copyBtn.addEventListener("click", async () => {
+      try {
+        copyBtn.disabled = true;
+        const contentEl = document.querySelector("main .sl-markdown-content");
+        if (!contentEl) {
+          throw new Error("Content not found");
+        }
+        const clone = contentEl.cloneNode(true);
+        clone.querySelectorAll("script, style, noscript, .sl-anchor-link, [data-pagefind-ignore]").forEach(el => el.remove());
+        const markdown = turndown.turndown(clone as HTMLElement);
+        await navigator.clipboard.writeText(markdown);
+        copyBtn.classList.add("copied");
+        setTimeout(() => copyBtn.classList.remove("copied"), 2000);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      } finally {
+        copyBtn.disabled = false;
+      }
+    });
+  }
+
+  if (shareBtn) {
+    shareBtn.addEventListener("click", async () => {
+      if (navigator.share) {
+        try {
+          await navigator.share({ title: document.title, url: window.location.href });
+        } catch (err) {
+          if (err.name !== "AbortError") {
+            console.error("Share failed:", err);
+          }
+        }
+      } else {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+        } catch (err) {
+          console.error("Failed to copy link:", err);
+        }
+      }
+    });
+  }
+</script>

package/src/plugins/starlightAddons/index.ts

@@ -0,0 +1,57 @@
+import type { StarlightPlugin } from "@astrojs/starlight/types"
+import virtual from "vite-plugin-virtual"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export interface StarlightAddonsConfig {
+  copy?: boolean
+  share?: boolean
+}
+
+export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
+  const defaultConfig: StarlightAddonsConfig = {
+    copy: true,
+    share: true
+  }
+
+  const config: StarlightAddonsConfig = {
+    ...defaultConfig,
+    ...userConfig
+  }
+
+  return {
+    name: "rimelight-ui-starlight-addons",
+    hooks: {
+      "config:setup"({ addIntegration, updateConfig, logger }) {
+        if (!config.copy && !config.share) {
+          logger.warn("StarlightAddons: Nothing enabled.")
+        }
+
+        addIntegration({
+          name: "rimelight-ui-starlight-addons-integration",
+          hooks: {
+            "astro:config:setup": ({ updateConfig: updateAstroConfig }) => {
+              updateAstroConfig({
+                vite: {
+                  plugins: [
+                    virtual({
+                      "virtual:rimelight-starlight-addons-config": `export default ${JSON.stringify(config)}`
+                    })
+                  ]
+                }
+              } as Record<string, unknown>)
+            }
+          }
+        })
+
+        updateConfig({
+          components: {
+            PageTitle: path.join(__dirname, "PageTitle.astro")
+          }
+        })
+      }
+    }
+  }
+}

package/src/preset.ts

@@ -0,0 +1,408 @@
+import {
+  definePreset,
+  presetTypography,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup
+} from "unocss"
+
+export default definePreset(() => {
+  return {
+    name: "rimelight-ui",
+    presets: [
+      presetWind4(),
+      presetTypography({
+        cssExtend: {
+          "h1,h2,h3,h4,h5,h6": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "p,li,blockquote,code": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "pre,code": {
+            "font-family": "var(--font-mono), monospace"
+          }
+        }
+      })
+    ],
+    transformers: [transformerDirectives(), transformerVariantGroup()],
+
+    // Enable CSS Cascade Layers for better specificity control
+    outputToCssLayers: true,
+    layers: {
+      theme: 1,
+      preflights: 2,
+      shortcuts: 3,
+      default: 4
+    },
+
+    // Tighten content scanning for better performance
+    content: {
+      pipeline: {
+        include: [
+          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+          "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+          "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
+        ]
+      },
+      filesystem: ["../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+    },
+
+    shortcuts: {
+      // Layout & Components
+      "container": "mx-auto w-full max-w-90rem px-md",
+      "sr-only":
+        "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
+    },
+    rules: [
+      [
+        /^clip-rect-(\d+)-(\d+)-(\d+)-(\d+)$/,
+        ([, t, r, b, l]) => ({ clip: `rect(${t}px, ${r}px, ${b}px, ${l}px)` })
+      ],
+      [
+        /^([hw])-(6xs|5xs|4xs|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl)$/,
+        ([, prop, s], { theme }) => {
+          if (!s) return
+          const val = (theme as { spacing?: Record<string, string> }).spacing?.[s]
+          if (!val) return
+          return prop === "h" ? { height: val } : { width: val }
+        }
+      ]
+    ],
+
+    theme: {
+      spacing: {
+        // 2px
+        "6xs": "0.125rem",
+        // 4px
+        "5xs": "0.25rem",
+        // 6px
+        "4xs": "0.375rem",
+        // 8px
+        "3xs": "0.5rem",
+        // 10px
+        "2xs": "0.625rem",
+        // 12px
+        "xs": "0.75rem",
+        // 14px
+        "sm": "0.875rem",
+        // 16px
+        "md": "1rem",
+        // 20px
+        "lg": "1.25rem",
+        // 24px
+        "xl": "1.5rem",
+        // 32px
+        "2xl": "2rem",
+        // 48px
+        "3xl": "3rem",
+        // 64px
+        "4xl": "4rem",
+        // 96px
+        "5xl": "6rem",
+        // 128px
+        "6xl": "8rem"
+      },
+      colors: {
+        "background": "var(--background)",
+        "foreground": "var(--foreground)",
+        "card": {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
+        },
+        "popover": {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
+        },
+        "primary": {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+          accent: "var(--primary-accent)"
+        },
+        "secondary": {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+          accent: "var(--secondary-accent)"
+        },
+        "muted": {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
+        },
+        "accent": {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
+        },
+        "info": {
+          DEFAULT: "var(--info)",
+          foreground: "var(--info-foreground)"
+        },
+        "success": {
+          DEFAULT: "var(--success)",
+          foreground: "var(--success-foreground)"
+        },
+        "warning": {
+          DEFAULT: "var(--warning)",
+          foreground: "var(--warning-foreground)"
+        },
+        "error": {
+          DEFAULT: "var(--error)",
+          foreground: "var(--error-foreground)"
+        },
+        "commentary": {
+          DEFAULT: "var(--commentary)",
+          foreground: "var(--commentary-foreground)"
+        },
+        "ideation": {
+          DEFAULT: "var(--ideation)",
+          foreground: "var(--ideation-foreground)"
+        },
+        "source": {
+          DEFAULT: "var(--source)",
+          foreground: "var(--source-foreground)"
+        },
+        "border": "var(--border)",
+        "input": "var(--input)",
+        "outline": "var(--outline)",
+        "ring": "var(--ring)",
+        "destructive": {
+          DEFAULT: "var(--destructive)",
+          subtle: "var(--color-destructive-subtle)"
+        },
+        "sidebar": {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: {
+            DEFAULT: "var(--sidebar-primary)",
+            foreground: "var(--sidebar-primary-foreground)"
+          },
+          accent: {
+            DEFAULT: "var(--sidebar-accent)",
+            foreground: "var(--sidebar-accent-foreground)"
+          },
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)"
+        },
+        "chart": {
+          "1": "var(--chart-1)",
+          "2": "var(--chart-2)",
+          "3": "var(--chart-3)",
+          "4": "var(--chart-4)",
+          "5": "var(--chart-5)"
+        },
+        "hover": "var(--color-hover)",
+        "surface": "var(--color-surface)",
+        "muted-strong": "var(--color-muted-strong)",
+        "foreground-secondary": "var(--color-foreground-secondary)",
+        "foreground-tertiary": "var(--color-foreground-tertiary)",
+        "placeholder": "var(--color-placeholder)",
+        "input-border": "var(--color-input-border)",
+        "accent-subtle": "var(--color-accent-subtle)"
+      },
+      radius: {
+        "xs": "calc(var(--radius) - 0.375rem)",
+        "sm": "calc(var(--radius) - 0.25rem)",
+        "md": "calc(var(--radius) - 0.125rem)",
+        "lg": "var(--radius)",
+        "xl": "calc(var(--radius) + 0.25rem)",
+        "2xl": "calc(var(--radius) + 0.5rem)",
+        "3xl": "calc(var(--radius) + 1rem)"
+      },
+      animation: {
+        keyframes: {
+          "accordion-down":
+            "{ from { height: 0; } to { height: var(--starwind-accordion-content-height); } }",
+          "accordion-up":
+            "{ from { height: var(--starwind-accordion-content-height); } to { height: 0; } }",
+          "marquee": "{ from { transform: translateX(0); } to { transform: translateX(-100%); } }"
+        },
+        durations: {
+          "accordion-down": "0.2s",
+          "accordion-up": "0.2s",
+          "marquee": "30s"
+        },
+        timingFns: {
+          "accordion-down": "ease-out",
+          "accordion-up": "ease-out",
+          "marquee": "linear"
+        },
+        counts: { marquee: "infinite" }
+      }
+    },
+
+    preflights: [
+      {
+        getCSS: () => `
+          :root {
+            --background: #ffffff;
+            --foreground: #030712;
+            --card: #ffffff;
+            --card-foreground: #030712;
+            --popover: #ffffff;
+            --popover-foreground: #030712;
+            --primary: #f97316;
+            --primary-foreground: #f9fafb;
+            --primary-accent: #ea580c;
+            --secondary: #8b5cf6;
+            --secondary-foreground: #f9fafb;
+            --secondary-accent: #7c3aed;
+            --muted: #f3f4f6;
+            --muted-foreground: #4b5563;
+            --accent: #f3f4f6;
+            --accent-foreground: #111827;
+            --info: #3b82f6;
+            --info-foreground: #ffffff;
+            --success: #22c55e;
+            --success-foreground: #ffffff;
+            --warning: #f59e0b;
+            --warning-foreground: #000000;
+            --error: #ef4444;
+            --error-foreground: #f9fafb;
+            --commentary: #ec4899;
+            --commentary-foreground: #f9fafb;
+            --ideation: #8b5cf6;
+            --ideation-foreground: #f9fafb;
+            --source: #38bdf8;
+            --source-foreground: #0f172a;
+            --border: #e5e7eb;
+            --input: #e5e7eb;
+            --outline: #9ca3af;
+            --ring: #9ca3af;
+            --radius: 0.625rem;
+            --sidebar: #f9fafb;
+            --sidebar-foreground: #030712;
+            --sidebar-primary: #1d4ed8;
+            --sidebar-primary-foreground: #f9fafb;
+            --sidebar-accent: #f3f4f6;
+            --sidebar-accent-foreground: #111827;
+            --sidebar-border: #e5e7eb;
+            --sidebar-ring: #9ca3af;
+            --chart-1: #3b82f6;
+            --chart-2: #6366f1;
+            --chart-3: #8b5cf6;
+            --chart-4: #a855f7;
+            --chart-5: #ec4899;
+            --destructive: #ef4444;
+            --color-surface: #ffffff;
+            --color-muted-strong: #e5e7eb;
+            --color-foreground-secondary: #4b5563;
+            --color-foreground-tertiary: #6b7280;
+            --color-placeholder: #9ca3af;
+            --color-input-border: #d1d5db;
+            --color-hover: #f3f4f6;
+            --color-destructive-subtle: #fef2f2;
+            --color-accent-subtle: #eff6ff;
+            --font-sans: "Noto Sans", sans-serif;
+            --font-serif: "Noto Serif", serif;
+            --font-mono: "Noto Sans Mono", monospace;
+          }
+
+          .dark {
+            --background: #030712;
+            --foreground: #f9fafb;
+            --card: #111827;
+            --card-foreground: #f9fafb;
+            --popover: #1f2937;
+            --popover-foreground: #f9fafb;
+            --primary: #f97316;
+            --primary-foreground: #f9fafb;
+            --primary-accent: #fb923c;
+            --secondary: #8b5cf6;
+            --secondary-foreground: #f9fafb;
+            --secondary-accent: #a78bfa;
+            --muted: #1f2937;
+            --muted-foreground: #9ca3af;
+            --accent: #374151;
+            --accent-foreground: #f3f4f6;
+            --info: #3b82f6;
+            --info-foreground: #ffffff;
+            --success: #22c55e;
+            --success-foreground: #ffffff;
+            --warning: #f59e0b;
+            --warning-foreground: #000000;
+            --error: #ef4444;
+            --error-foreground: #f9fafb;
+            --commentary: #f472b6;
+            --commentary-foreground: #0f172a;
+            --ideation: #a78bfa;
+            --ideation-foreground: #0f172a;
+            --source: #7dd3fc;
+            --source-foreground: #0f172a;
+            --border: rgba(249, 250, 251, 0.1);
+            --input: rgba(249, 250, 251, 0.15);
+            --outline: #6b7280;
+            --ring: #6b7280;
+            --sidebar: #111827;
+            --sidebar-foreground: #f9fafb;
+            --sidebar-primary: #1d4ed8;
+            --sidebar-primary-foreground: #f9fafb;
+            --sidebar-accent: #1f2937;
+            --sidebar-accent-foreground: #f3f4f6;
+            --sidebar-border: #1f2937;
+            --sidebar-ring: #6b7280;
+            --chart-1: #60a5fa;
+            --chart-2: #818cf8;
+            --chart-3: #a78bfa;
+            --chart-4: #c084fc;
+            --chart-5: #f472b6;
+            --destructive: #f87171;
+            --color-surface: #1f2937;
+            --color-muted-strong: #374151;
+            --color-foreground-secondary: #d1d5db;
+            --color-foreground-tertiary: #9ca3af;
+            --color-placeholder: #6b7280;
+            --color-input-border: #4b5563;
+            --color-hover: #374151;
+            --color-destructive-subtle: #451a1a;
+            --color-accent-subtle: #1e293b;
+          }
+
+          * {
+            border-color: var(--border);
+            outline-color: rgba(156, 163, 175, 0.5);
+          }
+
+          body {
+            background-color: var(--background);
+            color: var(--foreground);
+            font-family: var(--font-sans);
+          }
+
+          button {
+            cursor: pointer;
+          }
+
+          ::selection {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+          }
+
+          @view-transition {
+            navigation: auto;
+          }
+        `
+      }
+    ],
+
+    async configResolved(config) {
+      // Only log in dev mode and only once per process
+      if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
+        process.env.UNO_CONFIG_LOGGED = "true"
+
+        console.log(
+          `[UnoCSS] Config resolved. Presets: ${config.presets.map((p) => p.name).join(", ")}`
+        )
+        console.log(`[UnoCSS] Total rules: ${config.rules.length}`)
+        console.log(`[UnoCSS] Total shortcuts: ${Object.keys(config.shortcuts).length}`)
+
+        // Collision Detection: Identify potential conflicting regex rules
+        const ruleNames = config.rules.map((r) => (Array.isArray(r) ? r[0].toString() : "dynamic"))
+        const duplicates = ruleNames.filter((item, index) => ruleNames.indexOf(item) !== index)
+        const filteredDuplicates = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
+
+        if (filteredDuplicates.length > 0) {
+          console.warn(`[UnoCSS] Potential Rule Collisions: ${filteredDuplicates.join(", ")}`)
+        }
+      }
+    }
+  }
+})

package/src/presets/index.ts

@@ -0,0 +1,379 @@
+import {
+  definePreset,
+  presetTypography,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup
+} from "unocss"
+
+export default definePreset(() => {
+  return {
+    name: "rimelight-ui",
+    presets: [
+      presetWind4(),
+      presetTypography({
+        cssExtend: {
+          "h1,h2,h3,h4,h5,h6": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "p,li,blockquote,code": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "pre,code": {
+            "font-family": "var(--font-mono), monospace"
+          }
+        }
+      })
+    ],
+    transformers: [transformerDirectives(), transformerVariantGroup()],
+
+    outputToCssLayers: true,
+    layers: {
+      theme: 1,
+      preflights: 2,
+      shortcuts: 3,
+      default: 4
+    },
+
+    content: {
+      pipeline: {
+        include: [
+          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+          "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+          "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
+        ]
+      },
+      filesystem: ["../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+    },
+
+    shortcuts: {
+      "container": "mx-auto w-full max-w-90rem px-md",
+      "sr-only":
+        "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
+    },
+    rules: [
+      [
+        /^clip-rect-(\d+)-(\d+)-(\d+)-(\d+)$/,
+        ([, t, r, b, l]) => ({ clip: `rect(${t}px, ${r}px, ${b}px, ${l}px)` })
+      ]
+    ],
+
+    theme: {
+      spacing: {
+        "6xs": "0.125rem",
+        "5xs": "0.25rem",
+        "4xs": "0.375rem",
+        "3xs": "0.5rem",
+        "2xs": "0.625rem",
+        "xs": "0.75rem",
+        "sm": "0.875rem",
+        "md": "1rem",
+        "lg": "1.25rem",
+        "xl": "1.5rem",
+        "2xl": "2rem",
+        "3xl": "3rem",
+        "4xl": "4rem",
+        "5xl": "6rem",
+        "6xl": "8rem"
+      },
+      colors: {
+        "background": "var(--background)",
+        "foreground": "var(--foreground)",
+        "card": {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
+        },
+        "popover": {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
+        },
+        "primary": {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+          accent: "var(--primary-accent)"
+        },
+        "secondary": {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+          accent: "var(--secondary-accent)"
+        },
+        "muted": {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
+        },
+        "accent": {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
+        },
+        "info": {
+          DEFAULT: "var(--info)",
+          foreground: "var(--info-foreground)"
+        },
+        "success": {
+          DEFAULT: "var(--success)",
+          foreground: "var(--success-foreground)"
+        },
+        "warning": {
+          DEFAULT: "var(--warning)",
+          foreground: "var(--warning-foreground)"
+        },
+        "error": {
+          DEFAULT: "var(--error)",
+          foreground: "var(--error-foreground)"
+        },
+        "commentary": {
+          DEFAULT: "var(--commentary)",
+          foreground: "var(--commentary-foreground)"
+        },
+        "ideation": {
+          DEFAULT: "var(--ideation)",
+          foreground: "var(--ideation-foreground)"
+        },
+        "source": {
+          DEFAULT: "var(--source)",
+          foreground: "var(--source-foreground)"
+        },
+        "border": "var(--border)",
+        "input": "var(--input)",
+        "outline": "var(--outline)",
+        "ring": "var(--ring)",
+        "destructive": {
+          DEFAULT: "var(--destructive)",
+          subtle: "var(--color-destructive-subtle)"
+        },
+        "sidebar": {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: {
+            DEFAULT: "var(--sidebar-primary)",
+            foreground: "var(--sidebar-primary-foreground)"
+          },
+          accent: {
+            DEFAULT: "var(--sidebar-accent)",
+            foreground: "var(--sidebar-accent-foreground)"
+          },
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)"
+        },
+        "chart": {
+          "1": "var(--chart-1)",
+          "2": "var(--chart-2)",
+          "3": "var(--chart-3)",
+          "4": "var(--chart-4)",
+          "5": "var(--chart-5)"
+        },
+        "hover": "var(--color-hover)",
+        "surface": "var(--color-surface)",
+        "muted-strong": "var(--color-muted-strong)",
+        "foreground-secondary": "var(--color-foreground-secondary)",
+        "foreground-tertiary": "var(--color-foreground-tertiary)",
+        "placeholder": "var(--color-placeholder)",
+        "input-border": "var(--color-input-border)",
+        "accent-subtle": "var(--color-accent-subtle)"
+      },
+      radius: {
+        "xs": "calc(var(--radius) - 0.375rem)",
+        "sm": "calc(var(--radius) - 0.25rem)",
+        "md": "calc(var(--radius) - 0.125rem)",
+        "lg": "var(--radius)",
+        "xl": "calc(var(--radius) + 0.25rem)",
+        "2xl": "calc(var(--radius) + 0.5rem)",
+        "3xl": "calc(var(--radius) + 1rem)"
+      },
+      animation: {
+        keyframes: {
+          "accordion-down":
+            "{ from { height: 0; } to { height: var(--starwind-accordion-content-height); } }",
+          "accordion-up":
+            "{ from { height: var(--starwind-accordion-content-height); } to { height: 0; } }",
+          "marquee": "{ from { transform: translateX(0); } to { transform: translateX(-100%); } }"
+        },
+        durations: {
+          "accordion-down": "0.2s",
+          "accordion-up": "0.2s",
+          "marquee": "30s"
+        },
+        timingFns: {
+          "accordion-down": "ease-out",
+          "accordion-up": "ease-out",
+          "marquee": "linear"
+        },
+        counts: { marquee: "infinite" }
+      }
+    },
+
+    preflights: [
+      {
+        getCSS: () => `
+          :root {
+            --background: #ffffff;
+            --foreground: #030712;
+            --card: #ffffff;
+            --card-foreground: #030712;
+            --popover: #ffffff;
+            --popover-foreground: #030712;
+            --primary: #f97316;
+            --primary-foreground: #f9fafb;
+            --primary-accent: #ea580c;
+            --secondary: #8b5cf6;
+            --secondary-foreground: #f9fafb;
+            --secondary-accent: #7c3aed;
+            --muted: #f3f4f6;
+            --muted-foreground: #4b5563;
+            --accent: #f3f4f6;
+            --accent-foreground: #111827;
+            --info: #3b82f6;
+            --info-foreground: #ffffff;
+            --success: #22c55e;
+            --success-foreground: #ffffff;
+            --warning: #f59e0b;
+            --warning-foreground: #000000;
+            --error: #ef4444;
+            --error-foreground: #f9fafb;
+            --commentary: #ec4899;
+            --commentary-foreground: #f9fafb;
+            --ideation: #8b5cf6;
+            --ideation-foreground: #f9fafb;
+            --source: #38bdf8;
+            --source-foreground: #0f172a;
+            --border: #e5e7eb;
+            --input: #e5e7eb;
+            --outline: #9ca3af;
+            --ring: #9ca3af;
+            --radius: 0.625rem;
+            --sidebar: #f9fafb;
+            --sidebar-foreground: #030712;
+            --sidebar-primary: #1d4ed8;
+            --sidebar-primary-foreground: #f9fafb;
+            --sidebar-accent: #f3f4f6;
+            --sidebar-accent-foreground: #111827;
+            --sidebar-border: #e5e7eb;
+            --sidebar-ring: #9ca3af;
+            --chart-1: #3b82f6;
+            --chart-2: #6366f1;
+            --chart-3: #8b5cf6;
+            --chart-4: #a855f7;
+            --chart-5: #ec4899;
+            --destructive: #ef4444;
+            --color-surface: #ffffff;
+            --color-muted-strong: #e5e7eb;
+            --color-foreground-secondary: #4b5563;
+            --color-foreground-tertiary: #6b7280;
+            --color-placeholder: #9ca3af;
+            --color-input-border: #d1d5db;
+            --color-hover: #f3f4f6;
+            --color-destructive-subtle: #fef2f2;
+            --color-accent-subtle: #eff6ff;
+            --font-sans: "Noto Sans", sans-serif;
+            --font-serif: "Noto Serif", serif;
+            --font-mono: "Noto Sans Mono", monospace;
+          }
+
+          .dark {
+            --background: #030712;
+            --foreground: #f9fafb;
+            --card: #111827;
+            --card-foreground: #f9fafb;
+            --popover: #1f2937;
+            --popover-foreground: #f9fafb;
+            --primary: #f97316;
+            --primary-foreground: #f9fafb;
+            --primary-accent: #fb923c;
+            --secondary: #8b5cf6;
+            --secondary-foreground: #f9fafb;
+            --secondary-accent: #a78bfa;
+            --muted: #1f2937;
+            --muted-foreground: #9ca3af;
+            --accent: #374151;
+            --accent-foreground: #f3f4f6;
+            --info: #3b82f6;
+            --info-foreground: #ffffff;
+            --success: #22c55e;
+            --success-foreground: #ffffff;
+            --warning: #f59e0b;
+            --warning-foreground: #000000;
+            --error: #ef4444;
+            --error-foreground: #f9fafb;
+            --commentary: #f472b6;
+            --commentary-foreground: #0f172a;
+            --ideation: #a78bfa;
+            --ideation-foreground: #0f172a;
+            --source: #7dd3fc;
+            --source-foreground: #0f172a;
+            --border: rgba(249, 250, 251, 0.1);
+            --input: rgba(249, 250, 251, 0.15);
+            --outline: #6b7280;
+            --ring: #6b7280;
+            --sidebar: #111827;
+            --sidebar-foreground: #f9fafb;
+            --sidebar-primary: #1d4ed8;
+            --sidebar-primary-foreground: #f9fafb;
+            --sidebar-accent: #1f2937;
+            --sidebar-accent-foreground: #f3f4f6;
+            --sidebar-border: #1f2937;
+            --sidebar-ring: #6b7280;
+            --chart-1: #60a5fa;
+            --chart-2: #818cf8;
+            --chart-3: #a78bfa;
+            --chart-4: #c084fc;
+            --chart-5: #f472b6;
+            --destructive: #f87171;
+            --color-surface: #1f2937;
+            --color-muted-strong: #374151;
+            --color-foreground-secondary: #d1d5db;
+            --color-foreground-tertiary: #9ca3af;
+            --color-placeholder: #6b7280;
+            --color-input-border: #4b5563;
+            --color-hover: #374151;
+            --color-destructive-subtle: #451a1a;
+            --color-accent-subtle: #1e293b;
+          }
+
+          * {
+            border-color: var(--border);
+            outline-color: rgba(156, 163, 175, 0.5);
+          }
+
+          body {
+            background-color: var(--background);
+            color: var(--foreground);
+            font-family: var(--font-sans);
+          }
+
+          button {
+            cursor: pointer;
+          }
+
+          ::selection {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+          }
+
+          @view-transition {
+            navigation: auto;
+          }
+        `
+      }
+    ],
+
+    async configResolved(config) {
+      if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
+        process.env.UNO_CONFIG_LOGGED = "true"
+
+        console.log(
+          `[UnoCSS] Config resolved. Presets: ${config.presets.map((p) => p.name).join(", ")}`
+        )
+        console.log(`[UnoCSS] Total rules: ${config.rules.length}`)
+        console.log(`[UnoCSS] Total shortcuts: ${Object.keys(config.shortcuts).length}`)
+
+        const ruleNames = config.rules.map((r) => (Array.isArray(r) ? r[0].toString() : "dynamic"))
+        const duplicates = ruleNames.filter((item, index) => ruleNames.indexOf(item) !== index)
+        const filteredDuplicates = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
+
+        if (filteredDuplicates.length > 0) {
+          console.warn(`[UnoCSS] Potential Rule Collisions: ${filteredDuplicates.join(", ")}`)
+        }
+      }
+    }
+  }
+})

package/src/themes/button.theme.ts

@@ -1,3 +1,7 @@
+/**
+ * Theme configuration for the Button component. Defines the slots, base styles, and an extensive
+ * set of variants including color logic.
+ */
 export const buttonTheme = {
   slots: ["root"],
   base: {

package/src/themes/header.theme.ts

@@ -1,3 +1,7 @@
+/**
+ * Theme configuration for the Header component. Defines the slots, base styles, and variants for
+ * layout management.
+ */
 export const headerTheme = {
   slots: ["root", "container", "left", "center", "right"],
   base: {