@rimelight/ui 0.0.10 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "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/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/PageTitle.astro

@@ -1,114 +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);
-        }
-      }
-    });
-  }
+---
+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

@@ -8,20 +8,12 @@ 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"]
+    share: true
   }
 
   const config: StarlightAddonsConfig = {
@@ -33,11 +25,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
     name: "rimelight-ui-starlight-addons",
     hooks: {
       "config:setup"({ addIntegration, updateConfig, logger }) {
-        if (
-          !config.copy &&
-          !config.share &&
-          (!config.pkgManagers || config.pkgManagers.length === 0)
-        ) {
+        if (!config.copy && !config.share) {
           logger.warn("StarlightAddons: Nothing enabled.")
         }
 
@@ -53,7 +41,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
                     })
                   ]
                 }
-              })
+              } as Record<string, unknown>)
             }
           }
         })

package/src/preset.ts

@@ -60,7 +60,7 @@ 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))$/,
+        /^([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]

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

@@ -1,45 +0,0 @@
----
-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>
-)}