@rimelight/ui 0.0.10 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.10",
+  "version": "0.0.14",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -34,15 +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",
-    "./preset": "./src/preset.ts",
-    "./preset/*": "./src/preset/*",
-    "./package-managers": "./src/plugins/starlightAddons/PackageManagers.astro",
+    "./presets": "./src/presets/index.ts",
+    "./presets/*": "./src/presets/*",
     "./*": "./src/*"
   },
   "publishConfig": {
@@ -61,7 +61,8 @@
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
-    "unplugin-icons": "23.0.1"
+    "unplugin-icons": "23.0.1",
+    "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
@@ -72,7 +73,6 @@
     "astro": "6.1.8",
     "eslint-plugin-regexp": "3.1.0",
     "unocss": "66.6.8",
-    "vite-plugin-virtual": "^0.5.0",
     "vite-plus": "0.1.19"
   },
   "peerDependencies": {

package/src/env.d.ts

@@ -12,6 +12,29 @@ declare module "virtual:rimelight-ui" {
   export function getUIConfig(): DefaultUIConfig
 }
 
+interface StarlightAddonsConfig {
+  copy?: boolean
+  share?: boolean
+}
+
+declare module "virtual:rimelight-starlight-addons-config" {
+  const config: StarlightAddonsConfig
+  export default config
+}
+
+declare module "turndown" {
+  class TurndownService {
+    constructor(options?: Record<string, unknown>)
+    turndown(html: Node | string): string
+    use(plugin: () => void): void
+  }
+  export default TurndownService
+}
+
+declare module "turndown-plugin-gfm" {
+  export function gfm(): void
+}
+
 declare namespace App {
   interface Locals {
     cfContext?: Record<string, unknown>

package/src/integrations/index.ts

@@ -1,5 +1,3 @@
 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

@@ -51,55 +51,58 @@ 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)
       }
     }
   }

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/PackageManagers.astro

@@ -27,16 +27,16 @@ function getCommand(manager: string, cmdType: string, pkgName: string, devFlag:
   return cmd
 }
 
-const managers = ["npm", "pnpm", "yarn", "bun"]
-const singleManager = managers[0]
+const managers = ["npm", "pnpm", "yarn", "bun"] as const
+const singleManager = managers[0] as string
 const command = getCommand(singleManager, type, pkg, dev)
 ---
 
-{managers.length === 1 ? (
+{(managers.length as number) === 1 ? (
   <AstroCode code={command} lang="sh" />
 ) : (
   <Tabs syncKey="package-managers">
-    {managers.map((manager: string) => (
+    {managers.map((manager) => (
       <TabItem label={manager}>
         <AstroCode code={getCommand(manager, type, pkg, dev)} lang="sh" />
       </TabItem>

package/src/plugins/starlightAddons/PageTitle.astro

@@ -3,9 +3,6 @@ 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 />
@@ -67,7 +64,7 @@ const currentTitle = (Astro.locals as any).starlightRoute?.entry?.data?.title ||
   });
   turndown.use(gfm);
 
-  const copyBtn = document.getElementById("rl-copy-markdown");
+  const copyBtn = document.getElementById("rl-copy-markdown") as HTMLButtonElement | null;
   const shareBtn = document.getElementById("rl-share");
 
   if (copyBtn) {
@@ -78,8 +75,8 @@ const currentTitle = (Astro.locals as any).starlightRoute?.entry?.data?.title ||
         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 clone = contentEl.cloneNode(true) as Element;
+        clone.querySelectorAll("script, style, noscript, .sl-anchor-link, [data-pagefind-ignore]").forEach((el: Element) => el.remove());
         const markdown = turndown.turndown(clone as HTMLElement);
         await navigator.clipboard.writeText(markdown);
         copyBtn.classList.add("copied");
@@ -92,13 +89,15 @@ const currentTitle = (Astro.locals as any).starlightRoute?.entry?.data?.title ||
     });
   }
 
-  if (shareBtn) {
-    shareBtn.addEventListener("click", async () => {
+  const typedShareBtn = shareBtn as HTMLButtonElement | null;
+  if (typedShareBtn) {
+    typedShareBtn.addEventListener("click", async () => {
       if (navigator.share) {
         try {
           await navigator.share({ title: document.title, url: window.location.href });
         } catch (err) {
-          if (err.name !== "AbortError") {
+          const error = err as { name?: string };
+          if (error.name !== "AbortError") {
             console.error("Share failed:", err);
           }
         }

package/src/plugins/starlightAddons/index.ts

@@ -8,20 +8,14 @@ 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
+  packageManagers?: string[]
 }
 
 export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
   const defaultConfig: StarlightAddonsConfig = {
     copy: true,
     share: true,
-    pkgManagers: ["npm"]
+    packageManagers: ["npm"]
   }
 
   const config: StarlightAddonsConfig = {
@@ -36,7 +30,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
         if (
           !config.copy &&
           !config.share &&
-          (!config.pkgManagers || config.pkgManagers.length === 0)
+          (!config.packageManagers || config.packageManagers.length === 0)
         ) {
           logger.warn("StarlightAddons: Nothing enabled.")
         }
@@ -53,7 +47,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
                     })
                   ]
                 }
-              })
+              } as Record<string, unknown>)
             }
           }
         })

package/src/preset.ts

@@ -60,49 +60,34 @@ export default definePreset(() => {
         ([, 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
+        /^([hw])-(6xs|5xs|4xs|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl)$/,
+        ([, prop, s]) => {
+          if (!s) return false
+          const spacing: Record<string, string> = {
+            "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"
+          }
+          const val = spacing[s]
+          if (!val) return false
           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)",

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(", ")}`)
+        }
+      }
+    }
+  }
+})