@rimelight/ui 0.0.42 → 0.0.44

package/src/components/tour/RLATour.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { TourProps } from "./tour"
-import tourTheme from "./tour.theme"
-
-
-const tour = scv(tourTheme)
-
-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 />
+---
+import { tourTheme } from "./tour.theme"
+
+
+
+const classes = tourTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/tour/tour.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTourTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createTourTheme()
+export const tourTheme = defineTheme("tour", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/tree/RLATree.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { TreeProps } from "./tree"
-import treeTheme from "./tree.theme"
-
-
-const tree = scv(treeTheme)
-
-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 />
+---
+import { treeTheme } from "./tree.theme"
+
+
+
+const classes = treeTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/tree/tree.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTreeTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createTreeTheme()
+export const treeTheme = defineTheme("tree", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/user/RLAUser.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { UserProps } from "./user"
-import userTheme from "./user.theme"
-
-
-const user = scv(userTheme)
-
-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 />
+---
+import { userTheme } from "./user.theme"
+
+
+
+const classes = userTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/user/user.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createUserTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createUserTheme()
+export const userTheme = defineTheme("user", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/video/RLAVideo.astro

@@ -1,9 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { VideoProps } from "./video"
-import videoTheme from "./video.theme"
+import { videoTheme } from "./video.theme"
 import { Image } from "astro:assets"
 import RLAIcon from "../icon/RLAIcon.astro"
 
@@ -112,21 +109,19 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
 }
 
 
-const video = scv(videoTheme)
 
 const {
   src,
   title = "YouTube Video Player",
   icon = "play",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as VideoProps
 
-const classes = resolveClasses(video, {
+const classes = videoTheme({
+  ...Astro.props,
   title: !!(Astro.slots.has("title") || title),
-  icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("video", uiProp), className);
+  icon: !!(Astro.slots.has("icon") || icon)
+});
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);

package/src/components/video/video.theme.ts

@@ -1,17 +1,14 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createVideoTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "image", "icon"],
-    base: {
-      root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
-      trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
-      image: "h-full w-full object-cover",
-      icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
-    },
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {}
-  })
-
-export default createVideoTheme()
+export const videoTheme = defineTheme("video", {
+  slots: ["root", "trigger", "image", "icon"],
+  base: {
+    root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
+    trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
+    image: "h-full w-full object-cover",
+    icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})

package/src/components/watermark/RLAWatermark.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { WatermarkProps } from "./watermark"
-import watermarkTheme from "./watermark.theme"
-
-
-const watermark = scv(watermarkTheme)
-
-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 />
+---
+import { watermarkTheme } from "./watermark.theme"
+
+
+
+const classes = watermarkTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/watermark/watermark.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createWatermarkTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createWatermarkTheme()
+export const watermarkTheme = defineTheme("watermark", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/window-mockup/RLAWindowMockup.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { WindowMockupProps } from "./window-mockup"
-import windowMockupTheme from "./window-mockup.theme"
-
-
-const windowMockup = scv(windowMockupTheme)
-
-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 />
+---
+import { windowMockupTheme } from "./window-mockup.theme"
+
+
+
+const classes = windowMockupTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/window-mockup/window-mockup.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createWindowMockupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createWindowMockupTheme()
+export const windowMockupTheme = defineTheme("window-mockup", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/icons.raw.ts

@@ -0,0 +1,67 @@
+export const svg = (inner: string) =>
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="100%" height="100%">${inner}</svg>`
+
+export const getIconSvg = (name: string): string | undefined => {
+  if (!Object.prototype.hasOwnProperty.call(ICONS, name)) return undefined
+  return svg(ICONS[name as keyof typeof ICONS])
+}
+
+export const ICONS = {
+  alertTriangle: `<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"/>`,
+  alignLeft: `<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"/>`,
+  arrowLeft: `<path d="M19 12H5M12 19l-7-7 7-7"/>`,
+  arrowRight: `<path d="M5 12h14M12 5l7 7-7 7"/>`,
+  bell: `<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"/>`,
+  check: `<path d="M20 6 9 17l-5-5"/>`,
+  chevronDown: `<path d="m6 9 6 6 6-6"/>`,
+  chevronLeft: `<path d="m15 18-6-6 6-6"/>`,
+  chevronRight: `<path d="m9 18 6-6-6-6"/>`,
+  chevronsUpDown: `<path d="m7 15 5 5 5-5M7 9l5-5 5 5"/>`,
+  circleCheck: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`,
+  circleX: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/>`,
+  close: `<path d="M18 6 6 18M6 6l12 12"/>`,
+  copy: `<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"/>`,
+  download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>`,
+  externalLink: `<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"/>`,
+  fileQuestion: `<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"/>`,
+  gripHorizontal: `<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"/>`,
+  gripVertical: `<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"/>`,
+  hardDrive: `<rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01M10 18h.01M2 14L5 3h14l3 11"/>`,
+  image: `<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"/>`,
+  imageUpscale: `<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"/>`,
+  info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>`,
+  layers: `<path d="m12 3-10 5L12 13l10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>`,
+  list: `<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"/>`,
+  loaderCircle: `<path d="M21 12a9 9 0 1 1-6.219-8.56"/>`,
+  moon: `<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>`,
+  panelLeft: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/>`,
+  play: `<polygon points="6 3 20 12 6 21 6 3"/>`,
+  quote: `<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"/>`,
+  search: `<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>`,
+  share: `<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"/>`,
+  sun: `<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"/>`,
+  uploadCloud: `<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"/>`,
+  user: `<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+  star: `<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"/>`,
+  lock: `<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+  eye: `<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/>`,
+  eyeOff: `<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22"/><line x1="2" x2="22" y1="2" y2="22"/>`,
+  arrowUp: `<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  arrowDown: `<path d="M12 5v14M19 12l-7 7-7-7"/>`,
+  edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+  link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
+  plus: `<path d="M5 12h14M12 5v14"/>`,
+  trash: `<path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
+  fileText: `<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 2h4"/><path d="M10 9H8M16 13H8M16 17H8"/>`,
+  settings: `<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`,
+  type: `<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>`,
+  code: `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+  film: `<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4"/>`,
+  messageSquare: `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,
+  bookOpen: `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
+  panelRight: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/>`,
+  pin: `<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>`,
+  ellipsisVertical: `<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>`,
+  arrowUpFromLine: `<path d="m18 9-6-6-6 6"/><path d="M12 3v14"/><path d="M5 21h14"/>`,
+  arrowDownToLine: `<path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M5 21h14"/>`
+} as const

package/src/icons.ts

@@ -0,0 +1,35 @@
+import uiConfig from "virtual:rimelight/ui"
+import { getIconSvg, ICONS, svg } from "./icons.raw"
+
+export { ICONS, svg }
+
+export const getSvgIcon = (k: string): string => getIconSvg(k) ?? ""
+
+export const DEFAULT_ICONS: Record<keyof typeof ICONS, string> = Object.fromEntries(
+  Object.keys(ICONS).map((k) => [k, getSvgIcon(k)])
+) as Record<keyof typeof ICONS, string>
+
+export type RimelightIcons = Partial<Record<keyof typeof ICONS | (string & {}), string>>
+
+const EMPTY_ICON = { isClass: false, content: "" }
+const cache = new Map<string, { isClass: boolean; content: string }>()
+
+export const resolveIcon = (name = "", custom?: string) => {
+  if (!name) return EMPTY_ICON
+  const raw = custom || uiConfig?.icons?.[name] || name
+  let res = cache.get(raw)
+  if (!res) {
+    const content = getIconSvg(raw)
+    res =
+      content !== undefined
+        ? { isClass: false, content }
+        : raw.startsWith("i-") || raw.includes(":")
+          ? { isClass: true, content: raw }
+          : {
+              isClass: false,
+              content: raw.startsWith("<svg") ? raw : raw.startsWith("<") ? svg(raw) : ""
+            }
+    cache.set(raw, res)
+  }
+  return res
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import UnoCSS from "@unocss/vite"
+import rimelightUiPreset from "./preset"
+import type { UIConfig } from "./types"
+
+const ID = "virtual:rimelight/ui"
+
+export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
+  UnoCSS({
+    ...unocss,
+    presets: [rimelightUiPreset(cfg), ...(unocss.presets || [])],
+    content: {
+      ...unocss.content,
+      pipeline: unocss.content?.pipeline !== false && {
+        ...unocss.content?.pipeline,
+        include: [
+          /\.(vue|svelte|[jt]sx?|mdx?|astro|html)($|\?)/,
+          /[\\/](@rimelight\/(ui|cms)|packages\/(ui|cms))[\\/]/,
+          ...[unocss.content?.pipeline?.include]
+            .flat()
+            .filter((v): v is string | RegExp => Boolean(v))
+        ]
+      }
+    }
+  }),
+  {
+    name: "rimelight/ui",
+    enforce: "pre",
+    resolveId: (id: string) => (id === ID ? `\0${ID}` : null),
+    load: (id: string) =>
+      id === `\0${ID}` ? `import "virtual:uno.css";\nexport default ${JSON.stringify(cfg)};` : null
+  }
+]

package/src/preset.ts

@@ -0,0 +1,148 @@
+import { presetIcons, presetTypography, presetWind4, type Preset } from "unocss"
+import type { ColorModeInput, UIConfig } from "./types"
+import { getIconSvg } from "./icons.raw"
+
+export const PALETTES = {
+  neutral: [0, 0],
+  primary: [0.21, 260],
+  secondary: [0.18, 70],
+  info: [0.24, 260],
+  success: [0.2, 150],
+  warning: [0.17, 86],
+  error: [0.24, 25],
+  commentary: [0.29, 322],
+  ideation: [0.28, 293],
+  source: [0.13, 215]
+} as const
+
+const SHADES = {
+  "50": [0.985, 0.1, 0.145, 0.2],
+  "100": [0.965, 0.25, 0.2, 0.35],
+  "200": [0.925, 0.45, 0.28, 0.55],
+  "300": [0.85, 0.7, 0.35, 0.75],
+  "400": [0.72, 0.9, 0.44, 0.9],
+  "500": [0.55, 1, 0.53, 1],
+  "600": [0.44, 0.9, 0.61, 0.85],
+  "700": [0.35, 0.75, 0.69, 0.7],
+  "800": [0.27, 0.6, 0.77, 0.55],
+  "900": [0.2, 0.45, 0.86, 0.4],
+  "950": [0.145, 0.3, 0.93, 0.25]
+} as const
+
+const SHADE_ENTRIES = Object.entries(SHADES)
+
+const INTENTS: Record<string, Record<string, string>> = {
+  default: { text: "700", bg: "50", border: "200", ring: "300" },
+  muted: { text: "600", bg: "100", border: "200", ring: "300" },
+  elevated: { text: "800", bg: "100", border: "200", ring: "400" },
+  accented: { text: "900", bg: "200", border: "300", ring: "500" },
+  dimmed: { text: "500", bg: "50", border: "300", ring: "400" },
+  toned: { text: "800", bg: "700", border: "600", ring: "900" },
+  highlighted: { text: "950", bg: "200", border: "800", ring: "950" },
+  inverted: { text: "50", bg: "950", border: "800", ring: "700" }
+}
+
+const createThemeShades = (name: string) => ({
+  DEFAULT: `var(--rl-${name}-500)`,
+  ...Object.fromEntries(SHADE_ENTRIES.map(([s]) => [s, `var(--rl-${name}-${s})`]))
+})
+
+const createOklchShadeGetter = ([c, h]: readonly [number, number]) => {
+  const oklch = (l: number, factor: number) => `oklch(${l} ${(factor * c).toFixed(3)} ${h})`
+  return (_: string, [l1, c1, l2, c2]: readonly [number, number, number, number]) => [
+    oklch(l1, c1),
+    oklch(l2, c2)
+  ]
+}
+
+const createCustomShadeGetter = (val: any) => {
+  const isSplit = "light" in val || "dark" in val
+  const light = (isSplit ? val.light : val) ?? {}
+  const dark = (isSplit ? val.dark : light) ?? light
+  const fallback = light["500"] ?? Object.values(light)[0] ?? "oklch(0.55 0.15 0)"
+  return (s: string) => [light[s] ?? fallback, dark[s] ?? fallback]
+}
+
+function resolveTokens(custom: Record<string, ColorModeInput> = {}) {
+  const themeColors: Record<string, Record<string, string>> = {}
+  const tokenVarLines: string[] = []
+
+  for (const [name, val] of Object.entries({ ...PALETTES, ...custom })) {
+    themeColors[name] = createThemeShades(name)
+    const getShade = Array.isArray(val) ? createOklchShadeGetter(val) : createCustomShadeGetter(val)
+
+    for (const [s, coords] of SHADE_ENTRIES) {
+      const [light, dark] = getShade(s, coords as any)
+      tokenVarLines.push(`--rl-${name}-${s}: light-dark(${light}, ${dark});`)
+    }
+  }
+
+  return { themeColors, tokenVarLines }
+}
+
+export default function rimelightUiPreset({ colors, icons, presets = {} }: UIConfig = {}): Preset {
+  const { themeColors, tokenVarLines } = resolveTokens(colors)
+
+  return {
+    name: "rimelight-ui",
+    outputToCssLayers: true,
+    safelist: [
+      ...Object.keys(themeColors).map((c) => `rl-color-${c}`),
+      ...Object.values(icons ?? {}).filter(
+        (v): v is string => typeof v === "string" && v.startsWith("i-")
+      )
+    ],
+    presets: [
+      presets.wind !== false && presetWind4(),
+      presets.typography !== false && presetTypography(),
+      presets.icons !== false && presetIcons({ collections: { rl: getIconSvg } }),
+      {
+        name: "rimelight-theme",
+        theme: {
+          spacing: { md: "1rem" },
+          colors: themeColors
+        }
+      }
+    ].filter(Boolean) as Preset[],
+    shortcuts: [
+      [
+        /^(text|bg|ring|border)-([a-z]+)(?:\/(\d+))?$/,
+        ([, p, n, o]) => {
+          const s = INTENTS[n!]?.[p!]
+          if (!s) return
+          const base = `${p}-neutral-${s}${o ? `/${o}` : ""}`
+          return p === "bg" && n === "inverted" ? `${base} text-neutral-50` : base
+        }
+      ]
+    ],
+    rules: [
+      [
+        /^rl-color-([\w-]+)$/,
+        ([, c]) => {
+          const v500 = `var(--rl-${c}-500)`
+          const v600 = `var(--rl-${c}-600)`
+          return {
+            "--rl-bg": v500,
+            "--rl-ring": v500,
+            "--rl-border": v500,
+            "--rl-bg-hover": v600,
+            "--rl-text": v600
+          }
+        }
+      ]
+    ],
+    preflights: [
+      {
+        getCSS: () => `:root {
+  color-scheme: light dark;
+  --rl-header-height: 4rem;
+  --rl-container: 90rem;
+  ${tokenVarLines.join("\n  ")}
+}
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }`
+      }
+    ]
+  }
+}