@rimelight/ui 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -36,9 +36,13 @@
     "./integrations": "./src/integrations/index.ts",
     "./integrations/vue-entrypoint": "./src/integrations/vue-entrypoint.ts",
     "./integrations/*": "./src/integrations/*",
+    "./plugins/*": "./src/plugins/*",
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
     "./nuxt": "./src/nuxt.ts",
+    "./preset": "./src/preset.ts",
+    "./preset/*": "./src/preset/*",
+    "./package-managers": "./src/plugins/starlightAddons/PackageManagers.astro",
     "./*": "./src/*"
   },
   "publishConfig": {
@@ -49,11 +53,14 @@
     "@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",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
     "unplugin-icons": "23.0.1"
   },
   "devDependencies": {
@@ -62,12 +69,14 @@
     "@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-plugin-virtual": "^0.5.0",
+    "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/index.ts

@@ -1,3 +1,5 @@
 export * from "./sri"
 export { ui } from "./ui"
 export type { UIOptions, UIConfigOverrides } from "./ui"
+export { default as starlightAddons } from "../plugins/starlightAddons"
+export type { StarlightAddonsConfig } from "../plugins/starlightAddons"

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"
@@ -104,6 +105,7 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
   }
 
   return [
+    UnoCSS(),
     vue({
       appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
     }),

package/src/plugins/starlightAddons/PackageManagers.astro

@@ -0,0 +1,45 @@
+---
+import { Tabs, TabItem } from "@astrojs/starlight/components"
+import { Code as AstroCode } from "astro:components"
+
+interface Props {
+  pkg: string
+  type?: "add" | "create" | "install" | "remove" | "run"
+  dev?: boolean
+}
+
+const { pkg, type = "add", dev = false } = Astro.props
+
+const commands: Record<string, Record<string, string>> = {
+  npm: { add: "npm i", create: "npm create", install: "npm install", remove: "npm uninstall", run: "npm run", devOption: "-D" },
+  yarn: { add: "yarn add", create: "yarn create", install: "yarn install", remove: "yarn remove", run: "yarn run", devOption: "-D" },
+  pnpm: { add: "pnpm add", create: "pnpm create", install: "pnpm install", remove: "pnpm remove", run: "pnpm run", devOption: "-D" },
+  bun: { add: "bun add", create: "bun create", install: "bun install", remove: "bun remove", run: "bun run", devOption: "-d" },
+}
+
+function getCommand(manager: string, cmdType: string, pkgName: string, devFlag: boolean): string {
+  const mgrCmds = commands[manager]
+  if (!mgrCmds) return ""
+  let cmd = mgrCmds[cmdType]
+  if (!cmd) return ""
+  if (cmdType === "add" && devFlag && mgrCmds.devOption) cmd += " " + mgrCmds.devOption
+  if (pkgName && cmdType !== "install") cmd += " " + pkgName
+  return cmd
+}
+
+const managers = ["npm", "pnpm", "yarn", "bun"]
+const singleManager = managers[0]
+const command = getCommand(singleManager, type, pkg, dev)
+---
+
+{managers.length === 1 ? (
+  <AstroCode code={command} lang="sh" />
+) : (
+  <Tabs syncKey="package-managers">
+    {managers.map((manager: string) => (
+      <TabItem label={manager}>
+        <AstroCode code={getCommand(manager, type, pkg, dev)} lang="sh" />
+      </TabItem>
+    ))}
+  </Tabs>
+)}

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,69 @@
+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
+  pkgManagers?: string[]
+}
+
+export interface PackageManagersProps {
+  pkg: string
+  type?: "add" | "create" | "install" | "remove" | "run"
+  dev?: boolean
+}
+
+export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
+  const defaultConfig: StarlightAddonsConfig = {
+    copy: true,
+    share: true,
+    pkgManagers: ["npm"]
+  }
+
+  const config: StarlightAddonsConfig = {
+    ...defaultConfig,
+    ...userConfig
+  }
+
+  return {
+    name: "rimelight-ui-starlight-addons",
+    hooks: {
+      "config:setup"({ addIntegration, updateConfig, logger }) {
+        if (
+          !config.copy &&
+          !config.share &&
+          (!config.pkgManagers || config.pkgManagers.length === 0)
+        ) {
+          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)}`
+                    })
+                  ]
+                }
+              })
+            }
+          }
+        })
+
+        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/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: {