@rimelight/ui 0.0.31 → 0.0.32

package/src/components/astro/RLATimeline.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TimelineProps } from "../../types"
+import timelineThemeDefault from "../../themes/timeline.theme"
+
+const timeline = scv(timelineThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TimelineProps
+
+const classes = resolveClasses(timeline, {}, useUi("timeline", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLATour.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TourProps } from "../../types"
+import tourThemeDefault from "../../themes/tour.theme"
+
+const tour = scv(tourThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TourProps
+
+const classes = resolveClasses(tour, {}, useUi("tour", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLATree.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TreeProps } from "../../types"
+import treeThemeDefault from "../../themes/tree.theme"
+
+const tree = scv(treeThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TreeProps
+
+const classes = resolveClasses(tree, {}, useUi("tree", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAUser.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { UserProps } from "../../types"
+import userThemeDefault from "../../themes/user.theme"
+
+const user = scv(userThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as UserProps
+
+const classes = resolveClasses(user, {}, useUi("user", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLAEmbedYoutube.astro → RLAVideo.astro}

@@ -1,8 +1,8 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { EmbedYoutubeProps } from "../../types"
-import embedYoutubeTheme from "../../themes/embedYoutube.theme"
+import type { VideoProps } from "../../types"
+import videoTheme from "../../themes/video.theme"
 import { Image } from "astro:assets"
 
 const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
@@ -109,7 +109,7 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
   return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
 }
 
-const embedYoutube = scv(embedYoutubeTheme)
+const video = scv(videoTheme)
 
 const {
   src,
@@ -118,12 +118,12 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as EmbedYoutubeProps
+} = Astro.props as VideoProps
 
-const classes = resolveClasses(embedYoutube, {
+const classes = resolveClasses(video, {
   title: !!(Astro.slots.has("title") || title),
   icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("embedYoutube", uiProp), className);
+}, useUi("video", uiProp), className);
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);

package/src/components/astro/RLAWatermark.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WatermarkProps } from "../../types"
+import watermarkThemeDefault from "../../themes/watermark.theme"
+
+const watermark = scv(watermarkThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WatermarkProps
+
+const classes = resolveClasses(watermark, {}, useUi("watermark", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAWindowMockup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WindowMockupProps } from "../../types"
+import windowMockupThemeDefault from "../../themes/window-mockup.theme"
+
+const windowMockup = scv(windowMockupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WindowMockupProps
+
+const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/integrations/ui.ts

@@ -1,143 +1,208 @@
-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"
-import tailwindcss from "@tailwindcss/vite"
-import { defaultUIConfig } from "../themes"
-import type { ComponentTheme } from "../utils/defineTheme"
-
-/**
- * Shape of the `ui` config that can be passed to the integration.
- */
-export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
-
-export interface UIOptions {
-  /**
-   * 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 UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
-   */
-  ui?: UIConfigOverrides
-  /**
-   * Custom color names to dynamically generate variants for.
-   */
-  colors?: string[]
-}
-
-/**
- * Astro integration for `@rimelight/ui`.
- *
- * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
- * to access the merged config.
- *
- * @example
- *   // astro.config.mjs
- *   import { ui } from "@rimelight/ui/integrations"
- *
- *   export default defineConfig({
- *     integrations: [
- *       ui({
- *         ui: {
- *           button: {
- *             defaultVariants: { variant: "primary" }
- *           }
- *         }
- *       })
- *     ]
- *   })
- */
-export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
-  const coreColors = [
-    "primary",
-    "secondary",
-    "info",
-    "success",
-    "warning",
-    "error",
-    "commentary",
-    "ideation",
-    "source"
-  ]
-  const mergedColors = [...new Set([...coreColors, ...(options.colors || [])])]
-  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {}, colors: mergedColors }
-
-  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,
-            colorMode: false,
-            scanPackages: ["@rimelight/ui"]
-          }),
-          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")
-        setViteConfig(updateConfig)
-      }
-    }
-  }
-
-  return [
-    UnoCSS(),
-    vue({
-      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
-    }),
-    rimelightUIIntegration
-  ]
-}
+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"
+import tailwindcss from "@tailwindcss/vite"
+import { defaultUIConfig } from "../themes"
+import type { ComponentTheme } from "../utils/defineTheme"
+import rimelightUiPreset, { uiSrcGlob, uiFilesystemGlob } from "../presets"
+
+/**
+ * Shape of the `ui` config that can be passed to the integration.
+ */
+export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
+
+export interface UIOptions {
+  /**
+   * 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 UI overrides applied to all components. Merged with defaults via `defu` (first arg
+   * wins).
+   */
+  ui?: UIConfigOverrides
+  /**
+   * Custom colors. Each color can be:
+   *
+   * - **Flat format**: `{ "500": "#7146ff", "600": "#6222ff" }` — used in all modes.
+   *   No mode-specific buckets needed.
+   *
+   * - **Mode format**: flat shades at root define the base; `light`, `dark`,
+   *   `flat` buckets layer on top:
+   *
+   *   ```ts
+   *   { "500": "base", light: { "600": "light-blue" }, dark: { "500": "dark-blue" } }
+   *   ```
+   *
+   *   Each shade falls back through: **mode bucket → flat → unthemed → light → dark**.
+   *   Defining a single source (e.g. only `dark`) propagates to all modes.
+   *
+   *   Use the `theme` prop on components to pin colors: `<Button theme="flat">` forces
+   *   the flat bucket regardless of current mode.
+   */
+  colors?: Record<string, Record<string, string> | { light?: Record<string, string>; dark?: Record<string, string>; flat?: Record<string, string> }>
+  /**
+   * When `true`, auto-generates missing `light`/`dark` mode buckets from flat color values
+   * using `color-mix(in oklch, ...)`. Explicitly provided buckets always take precedence.
+   * Defaults to `true`.
+   */
+  autogenerateColorModes?: boolean
+}
+
+/**
+ * Astro integration for `@rimelight/ui`.
+ *
+ * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
+ * to access the merged config.
+ *
+ * @example
+ *   // astro.config.mjs
+ *   import { ui } from "@rimelight/ui/integrations"
+ *
+ *   export default defineConfig({
+ *     integrations: [
+ *       ui({
+ *         ui: {
+ *           button: {
+ *             defaultVariants: { variant: "primary" }
+ *           }
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function ui(options: UIOptions = {}): AstroIntegration[] {
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const coreColors = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "commentary",
+    "ideation",
+    "source"
+  ]
+  const userColors = options.colors ?? {}
+  const userColorNames = Object.keys(userColors)
+  const mergedColors = [...new Set([...coreColors, ...userColorNames])]
+  const resolvedConfig = {
+    ...resolvedUI,
+    logos: options.logos ?? {},
+    colors: mergedColors
+  }
+
+  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,
+            colorMode: false,
+            scanPackages: ["@rimelight/ui"]
+          }),
+          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")
+        setViteConfig(updateConfig)
+      }
+    }
+  }
+
+  return [
+    UnoCSS({
+      presets: [rimelightUiPreset({ colors: userColors, autogenerateColorModes: options.autogenerateColorModes })],
+      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-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)` })
+        ]
+      ],
+      configResolved(config) {
+        if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
+          process.env.UNO_CONFIG_LOGGED = "true"
+          console.log(`[UnoCSS] Presets: ${config.presets.map((p) => p.name).join(", ")}`)
+          console.log(`[UnoCSS] Rules: ${config.rules.length}`)
+          console.log(`[UnoCSS] 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 filtered = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
+          if (filtered.length > 0) console.warn(`[UnoCSS] Rule collisions: ${filtered.join(", ")}`)
+        }
+      }
+    }),
+    vue({
+      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
+    }),
+    rimelightUIIntegration
+  ]
+}