@rimelight/ui 0.0.37 → 0.0.39

package/src/config/ui.config.ts

@@ -0,0 +1,89 @@
+import type { UserConfig } from "unocss"
+import type { ComponentTheme } from "../types/component"
+import type { RimelightIcons } from "../icons/defaults"
+
+export interface UIConfig {
+  /**
+   * Whether to strip default theme classes from all components (bringing your own styling).
+   */
+  unstyled?: boolean
+  /**
+   * Configuration for keyboard shortcuts.
+   */
+  shortcuts?: {
+    categories?: Record<string, { label: string }>
+  }
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<
+    string,
+    | string
+    | {
+        light?: string
+        dark?: string
+        color?: string
+        white?: string
+        black?: string
+        [key: string]: string | undefined
+      }
+  >
+  /**
+   * Global component configuration overrides.
+   */
+  components?: {
+    /**
+     * Global UI overrides applied to all components. Merged with defaults via our custom recursive
+     * merge utility (first arg wins).
+     */
+    themes?: Record<string, Partial<ComponentTheme>>
+    /**
+     * Default prop values overrides for components.
+     */
+    props?: Record<string, Record<string, any>>
+  }
+  /**
+   * Custom colors. Each color can be:
+   *
+   * - **Flat format**: `{ "500": "#7146ff", "600": "#6222ff" }` — used as the base for autogenerated
+   *   light and dark shades via `color-mix(in oklch, ...)`.
+   * - **Mode format**: provide explicit `light` and/or `dark` buckets to control each scheme
+   *   independently:
+   *
+   *   ```ts
+   *   { light: { "500": "#0064d7" }, dark: { "500": "#60a5fa" } }
+   *   ```
+   *
+   *   Shades fall back through: **mode bucket → flat → light → dark**. Defining only one side
+   *   autogenerates the other when `autogenerateColorModes` is enabled.
+   *
+   *   To pin a component to a specific scheme, use `theme="light"` or `theme="dark"` on the component
+   *   — this sets `color-scheme` natively on the element, causing all `light-dark()` variables to
+   *   resolve to the correct side.
+   */
+  colors?: Record<
+    string,
+    | Record<string, string>
+    | {
+        light?: Record<string, string>
+        dark?: Record<string, string>
+      }
+  >
+  autogenerateColorModes?: boolean
+  /**
+   * Global icon overrides mapping icon names to class names (e.g. `i-lucide-x`) or raw SVG strings.
+   */
+  icons?: RimelightIcons
+  /**
+   * Configure which built-in UnoCSS presets are enabled/disabled.
+   */
+  presets?: {
+    wind?: boolean
+    typography?: boolean
+    icons?: boolean
+  }
+  /**
+   * Custom UnoCSS configuration overrides, routed directly down to the UnoCSS instance.
+   */
+  unocss?: UserConfig
+}

package/src/env.d.ts

@@ -1,25 +1,23 @@
-/// <reference types="astro/client" />
-
-
-declare module "virtual:rimelight-ui" {
-  import type { DefaultUIConfig } from "../themes"
-
-  export function getUIConfig(): DefaultUIConfig & { colors?: string[] }
-}
-
-interface StarlightAddonsConfig {
-  copy?: boolean
-  share?: boolean
-}
-
-declare module "virtual:rimelight-ui-docs-meta" {
-  const meta: Record<string, unknown>
-  export default meta
-}
-
-
-declare namespace App {
-  interface Locals {
-    cfContext?: Record<string, unknown>
-  }
-}
+/// <reference types="astro/client" />
+
+declare module "virtual:rimelight-ui" {
+  import type { ComponentTheme } from "./types/component"
+  import type { RimelightIcons } from "./icons/defaults"
+
+  export interface VirtualUIConfig {
+    /** Component theme overrides keyed by camelCase component name */
+    [componentName: string]: ComponentTheme | undefined
+    /** All active color names (built-in + user-defined) */
+    colors: string[]
+    /** Logo variant map passed to ui() */
+    logos: Record<string, string | { light?: string; dark?: string; color?: string; white?: string; black?: string; [key: string]: string | undefined }>
+    /** Keyboard shortcut category config */
+    shortcuts: Record<string, any>
+    /** Icon overrides */
+    icons: RimelightIcons
+    /** When true, strip all default theme classes from components */
+    unstyled?: boolean
+  }
+
+  export function getUIConfig(): VirtualUIConfig
+}

package/src/icons/defaults.ts

@@ -0,0 +1,41 @@
+export const DEFAULT_ICONS = {
+  alertTriangle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>`,
+  alignLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>`,
+  arrowLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`,
+  arrowRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M5 12h14M12 5l7 7-7 7"/></svg>`,
+  bell: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>`,
+  check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M20 6 9 17l-5-5"/></svg>`,
+  chevronDown: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m6 9 6 6 6-6"/></svg>`,
+  chevronLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m15 18-6-6 6-6"/></svg>`,
+  chevronRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m9 18 6-6-6-6"/></svg>`,
+  chevronsUpDown: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"/></svg>`,
+  circleCheck: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`,
+  circleX: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>`,
+  close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M18 6 6 18M6 6l12 12"/></svg>`,
+  copy: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><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>`,
+  download: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>`,
+  externalLink: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>`,
+  fileQuestion: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01"/></svg>`,
+  gripHorizontal: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>`,
+  gripVertical: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>`,
+  hardDrive: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01M10 18h.01M2 14L5 3h14l3 11"/></svg>`,
+  image: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
+  imageUpscale: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M16 3H3v13h13V3z"/><path d="M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1"/></svg>`,
+  info: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>`,
+  layers: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="m12 3-10 5L12 13l10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
+  list: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>`,
+  loaderCircle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`,
+  moon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`,
+  panelLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/></svg>`,
+  play: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><polygon points="6 3 20 12 6 21 6 3"/></svg>`,
+  quote: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z"/></svg>`,
+  search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
+  share: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>`,
+  sun: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>`,
+  uploadCloud: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3"/></svg>`,
+  user: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  star: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`
+} as const
+
+export type RimelightIcons = Partial<Record<keyof typeof DEFAULT_ICONS, string>> &
+  Record<string, string | undefined>

package/src/presets/index.ts

@@ -6,9 +6,10 @@ import {
   presetWind4,
   presetIcons,
   transformerDirectives,
-  transformerVariantGroup
+  transformerVariantGroup,
+  type Preset
 } from "unocss"
-import { defaultColorScales, defaultColors } from "./defaults"
+import { colorConfig } from "../config/color.config"
 
 const pathDirname = dirname(fileURLToPath(import.meta.url))
 export const uiSrcGlob = join(pathDirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,astro}")
@@ -39,13 +40,9 @@ function resolveColorModes(
   const raw = entry as Record<string, unknown>
 
   const modeLight =
-    typeof raw.light === "object" && raw.light !== null
-      ? ({ ...raw.light } as ColorShades)
-      : ({} as ColorShades)
+    typeof raw.light === "object" && raw.light !== null ? { ...raw.light } : ({} as ColorShades)
   const modeDark =
-    typeof raw.dark === "object" && raw.dark !== null
-      ? ({ ...raw.dark } as ColorShades)
-      : ({} as ColorShades)
+    typeof raw.dark === "object" && raw.dark !== null ? { ...raw.dark } : ({} as ColorShades)
 
   const modeKeys = new Set(["light", "dark"])
   const flatShades: ColorShades = {}
@@ -98,49 +95,65 @@ const createScale = (colorName: string, shadeKeys: string[]) => ({
 export interface RimelightPresetOptions {
   colors?: Record<string, ColorConfigValue>
   autogenerateColorModes?: boolean
+  presets?: {
+    wind?: boolean
+    typography?: boolean
+    icons?: boolean
+  }
 }
 
 export default definePreset((options?: RimelightPresetOptions) => {
   const userColors = options?.colors ?? {}
   const autoGen = options?.autogenerateColorModes ?? true
-  const coreColors = [...defaultColors, "neutral"]
-  const mergedColorScales = { ...defaultColorScales, ...userColors }
-  const allColors = [...new Set([...coreColors, ...Object.keys(userColors)])]
-
-  const resolvedColors = Object.fromEntries(
-    Object.entries(mergedColorScales).map(([name, entry]) => [
-      name,
-      resolveColorModes(entry, autoGen)
-    ])
+  const allColors = [...new Set([...colorConfig.colors, ...Object.keys(userColors)])]
+
+  // Built-in scales already have explicit {light, dark} buckets — pass through directly.
+  // Only user-provided colors need resolveColorModes (they may be flat shades or partial modes).
+  const resolvedBuiltins = Object.fromEntries(
+    Object.entries(colorConfig.scales).map(([name, entry]) => [name, entry])
   )
+  const resolvedUserColors = Object.fromEntries(
+    Object.entries(userColors).map(([name, entry]) => [name, resolveColorModes(entry, autoGen)])
+  )
+  const resolvedColors = { ...resolvedBuiltins, ...resolvedUserColors }
 
   const safelist = allColors.flatMap((color) => ["rl-color-" + color])
 
+  const enabledPresets = {
+    wind: options?.presets?.wind !== false,
+    typography: options?.presets?.typography !== false,
+    icons: options?.presets?.icons !== false
+  }
+
   return {
     name: "rimelight-ui",
     safelist,
-    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"
-          }
-        }
-      }),
-      presetIcons({
-        extraProperties: {
-          "display": "inline-block",
-          "vertical-align": "middle"
-        }
-      })
-    ],
+    presets: (
+      [
+        enabledPresets.wind && presetWind4(),
+        enabledPresets.typography &&
+          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"
+              }
+            }
+          }),
+        enabledPresets.icons &&
+          presetIcons({
+            extraProperties: {
+              "display": "inline-block",
+              "vertical-align": "middle"
+            }
+          })
+      ] as const
+    ).filter((p): p is Preset => Boolean(p)),
     transformers: [transformerDirectives(), transformerVariantGroup()],
 
     outputToCssLayers: true,
@@ -151,20 +164,8 @@ export default definePreset((options?: RimelightPresetOptions) => {
       default: 4
     },
 
-    content: {
-      pipeline: {
-        include: [
-          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
-          "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
-          uiSrcGlob,
-          "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
-        ]
-      },
-      filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
-    },
-
     shortcuts: {
-      "container": "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl",
+      "container": "mx-auto w-full max-w-[var(--rl-container)] px-xs sm:px-md md:px-xl lg:px-xl",
       "sr-only":
         "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
     },
@@ -192,6 +193,14 @@ export default definePreset((options?: RimelightPresetOptions) => {
       // Resets color-scheme back to reactive — follows the page-level preference
       // (i.e. whatever is set on <html>). Use inside a pinned wrapper to opt a subtree back out.
       ["rl-auto", { "color-scheme": "light dark", "color": "var(--foreground)" }],
+      // Visibility-aware rendering utility to prevent unsafe inline style attributes in strict CSPs
+      [
+        "rla-visibility-aware",
+        {
+          "content-visibility": "auto",
+          "contain-intrinsic-size": "var(--rla-contain-intrinsic-size, auto 500px)"
+        }
+      ],
       [
         /^(text)-(default|inverted|muted|dimmed|toned|highlighted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
@@ -361,13 +370,15 @@ export default definePreset((options?: RimelightPresetOptions) => {
           // Single pass: emit light-dark() for every color shade.
           // The browser resolves each call based on the element's inherited color-scheme.
           const lightDarkLines = Object.entries(resolvedColors)
-            .flatMap(([color, modes]) =>
-              Object.keys(modes.light).map((shade) => {
-                const l = modes.light[shade]
-                const d = modes.dark[shade] ?? modes.light[shade]
+            .flatMap(([color, modes]) => {
+              const light = modes.light as Record<string, string>
+              const dark = (modes.dark ?? modes.light) as Record<string, string>
+              return Object.keys(light).map((shade) => {
+                const l = light[shade]
+                const d = dark[shade] ?? l
                 return `            --color-${color}-${shade}: light-dark(${l}, ${d});`
               })
-            )
+            })
             .join("\n")
 
           return `
@@ -445,8 +456,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
           --font-mono: "Noto Sans Mono", monospace;
 
           --ui-header-height: 4rem;
-          --ui-container: 80rem;
-          --rl-container: 1440px;
+          --rl-container: 90rem;
 
           /* Text / background / border / ring semantic tokens using responsive neutral variables */
           --text-color-default: var(--color-neutral-700);
@@ -500,6 +510,35 @@ ${lightDarkLines}
         .light {
           color-scheme: light;
         }
+
+        /* Accessibility fallback for hidden="until-found" in older/non-supporting browsers */
+        @supports not (content-visibility: hidden) {
+          [hidden="until-found"] {
+            display: none !important;
+          }
+        }
+
+        /* ── Global body reset ───────────────────────────────────────────── */
+        body {
+          background-color: var(--background);
+          color: var(--foreground);
+          font-family: var(--font-sans);
+        }
+
+        /* ── Uniform focus styles ────────────────────────────────────────── */
+        *,
+        ::before,
+        ::after {
+          /* Setup default ring/outline parameters or halo */
+          --un-ring-color: var(--primary);
+        }
+
+        *:focus-visible,
+        *:has(> a:focus-visible) {
+          outline: 2px solid color-mix(in srgb, var(--un-ring-color, var(--primary)) 25%, transparent);
+          outline-offset: 2px;
+        }
+
         `
         }
       }

package/src/themes.ts

@@ -0,0 +1,26 @@
+import type { ComponentTheme } from "./types/component"
+
+export { defineTheme } from "./utils/defineTheme"
+
+const themeModules = import.meta.glob<{ default: ComponentTheme }>("./components/**/*.theme.ts", {
+  eager: true
+})
+
+function kebabToCamel(str: string): string {
+  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
+}
+
+function themeNameFromFile(path: string): string {
+  const fileName =
+    path
+      .split("/")
+      .pop()
+      ?.replace(/\.theme\.ts$/, "") || ""
+  return kebabToCamel(fileName)
+}
+
+export const uiConfig: Record<string, ComponentTheme> = Object.fromEntries(
+  Object.entries(themeModules)
+    .filter(([_, mod]) => Boolean(mod && mod.default))
+    .map(([path, module]) => [themeNameFromFile(path), module.default])
+)

package/src/types/component.ts

@@ -0,0 +1,28 @@
+import type { colorScales } from "../config/color.config"
+
+export type Theme = "light" | "dark"
+
+export type ThemeColor = keyof typeof colorScales | (string & {})
+
+export interface ComponentTheme {
+  slots: string[]
+  base: Record<string, string | string[]>
+  variants?: Record<string, Record<string, Record<string, string | string[]>>>
+  compoundVariants?: any[]
+  defaultVariants?: Record<string, unknown>
+}
+
+export type ComponentVariants<T extends { variants?: Record<string, Record<string, unknown>> }> =
+  T["variants"] extends Record<string, Record<string, unknown>>
+    ? {
+        [K in keyof T["variants"]]?: T["variants"][K] extends { true: unknown; false: unknown }
+          ? boolean
+          : T["variants"][K] extends { true: unknown }
+            ? boolean
+            : keyof T["variants"][K]
+      }
+    : never
+
+export type ComponentSlots<T extends { slots: readonly string[] }> = Partial<
+  Record<T["slots"][number], string>
+>

package/src/ui.ts

@@ -0,0 +1,159 @@
+import type { AstroIntegration } from "astro"
+import UnoCSS from "unocss/astro"
+import { merge } from "./utils/merge"
+import { uiConfig } from "./themes"
+import type { UIConfig } from "./config/ui.config"
+import { colorConfig } from "./config/color.config"
+import rimelightUiPreset, { uiSrcGlob, uiFilesystemGlob } from "./presets"
+import type { RimelightPresetOptions } from "./presets"
+
+export type { UIConfig } from "./config/ui.config"
+export type { RimelightIcons } from "./icons/defaults"
+export { defineTheme } from "./themes"
+
+export function ui(options: UIConfig = {}): AstroIntegration[] {
+  let astroLogger: any = null
+
+  const presetOptions: RimelightPresetOptions = {
+    colors: options.colors ?? {},
+    ...(options.autogenerateColorModes !== undefined && {
+      autogenerateColorModes: options.autogenerateColorModes
+    }),
+    ...(options.presets !== undefined && {
+      presets: options.presets
+    })
+  }
+
+  const resolvedConfig = {
+    ...merge(options.components?.themes ?? {}, uiConfig),
+    logos: options.logos ?? {},
+    colors: Array.from(new Set([...colorConfig.colors, ...Object.keys(options.colors ?? {})])),
+    shortcuts: options.shortcuts ?? {},
+    icons: options.icons ?? {}
+  }
+
+  const userUnoConfig = options.unocss ?? {}
+
+  const contentObj =
+    userUnoConfig.content && typeof userUnoConfig.content === "object"
+      ? userUnoConfig.content
+      : null
+  const pipeline =
+    contentObj &&
+    "pipeline" in contentObj &&
+    typeof contentObj.pipeline === "object" &&
+    contentObj.pipeline !== null
+      ? contentObj.pipeline
+      : null
+  const rawIncludes = pipeline && "include" in pipeline ? pipeline.include : undefined
+  let userPipelineIncludes: (string | RegExp)[] = []
+  if (Array.isArray(rawIncludes)) {
+    userPipelineIncludes = rawIncludes.filter(
+      (item): item is string | RegExp => typeof item === "string" || item instanceof RegExp
+    )
+  } else if (typeof rawIncludes === "string" || rawIncludes instanceof RegExp) {
+    userPipelineIncludes = [rawIncludes]
+  }
+
+  const rawFilesystem = contentObj && "filesystem" in contentObj ? contentObj.filesystem : undefined
+  let userFilesystem: string[] = []
+  if (Array.isArray(rawFilesystem)) {
+    userFilesystem = rawFilesystem.filter((item): item is string => typeof item === "string")
+  } else if (typeof rawFilesystem === "string") {
+    userFilesystem = [rawFilesystem]
+  }
+
+  return [
+    UnoCSS({
+      ...userUnoConfig,
+      presets: [rimelightUiPreset(presetOptions), ...(userUnoConfig.presets ?? [])],
+      safelist: [
+        ...Object.values(options.icons ?? {}).filter(
+          (v): v is string => typeof v === "string" && v.startsWith("i-")
+        ),
+        ...(userUnoConfig.safelist ?? [])
+      ],
+      content: {
+        pipeline: {
+          include: [
+            /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+            "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+            uiSrcGlob,
+            ...userPipelineIncludes
+          ]
+        },
+        filesystem: [uiFilesystemGlob, "src/components/**/*", "src/pages/**/*", ...userFilesystem]
+      },
+      configResolved(config) {
+        logUnoConfig(config, astroLogger)
+        userUnoConfig.configResolved?.(config)
+      }
+    }),
+    {
+      name: "@rimelight/ui",
+      hooks: {
+        "astro:config:setup": ({ updateConfig, logger }) => {
+          astroLogger = logger
+          logger.info("Initializing @rimelight/ui core")
+          updateConfig({
+            vite: {
+              plugins: [createVirtualModulePlugin(resolvedConfig)]
+            }
+          })
+        }
+      }
+    }
+  ]
+}
+
+/**
+ * Creates a Vite plugin to resolve and load the virtual config module.
+ */
+function createVirtualModulePlugin(config: any) {
+  const id = "virtual:rimelight-ui"
+  return {
+    name: "vite-plugin-rimelight-ui-virtual",
+    enforce: "pre" as const,
+    resolveId: (rId: string) => (rId === id ? "\0" + id : null),
+    load: (rId: string) =>
+      rId === "\0" + id
+        ? `const _config = ${JSON.stringify(config)}; export const getUIConfig = () => _config;`
+        : null
+  }
+}
+
+/**
+ * Helper to log UnoCSS configuration details and rule collisions in development.
+ */
+function logUnoConfig(config: any, astroLogger: any) {
+  if (process.env.NODE_ENV !== "development" || process.env.UNO_CONFIG_LOGGED) {
+    return
+  }
+  process.env.UNO_CONFIG_LOGGED = "true"
+
+  const log = (msg: string, isWarn = false) => {
+    const logger = astroLogger ?? console
+    const method = isWarn ? "warn" : astroLogger ? "info" : "log"
+    logger[method](msg)
+  }
+
+  log(`[UnoCSS] Presets: ${config.presets.map((p: any) => p.name).join(", ")}`)
+  log(`[UnoCSS] Rules: ${config.rules.length}`)
+  log(`[UnoCSS] Shortcuts: ${Object.keys(config.shortcuts).length}`)
+
+  const ruleNames = config.rules.map((r: any) => (Array.isArray(r) ? r[0].toString() : "dynamic"))
+  const seen = new Set<string>()
+  const duplicates = new Set<string>()
+  for (const name of ruleNames) {
+    if (seen.has(name)) {
+      duplicates.add(name)
+    } else {
+      seen.add(name)
+    }
+  }
+  const filtered = Array.from(duplicates).filter((d: string) => d !== "/^(.+?)-(\\$.+)$/")
+
+  if (filtered.length > 0) {
+    log(`[UnoCSS] Rule collisions: ${filtered.join(", ")}`, true)
+  }
+}

package/src/utils/defineTheme.ts

@@ -1,10 +1,4 @@
-export interface ComponentTheme {
-  slots: string[]
-  base: Record<string, string | string[]>
-  variants?: Record<string, Record<string, Record<string, string | string[]>>>
-  compoundVariants?: Record<string, unknown>[]
-  defaultVariants?: Record<string, unknown>
-}
+import type { ComponentTheme } from "../types/component"
 
 export function defineTheme<const T extends ComponentTheme>(theme: T): T {
   return theme