@rimelight/ui 0.0.43 → 0.0.44

package/src/components/table-of-contents/RLATableOfContents.astro

@@ -35,10 +35,10 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
     <details class:list={[className]} data-rla-toc-collapsible data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
       <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-highlighted cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
         <span class="flex items-center gap-2">
-          <RLAIcon name="list" class="size-4 text-primary shrink-0" />
+          <RLAIcon name="i-rl-list" class="size-4 text-primary shrink-0" />
           <span>On this page</span>
         </span>
-        <RLAIcon name="chevronDown" class="rla-toc-chevron size-4 text-muted shrink-0 transition-transform duration-200" />
+        <RLAIcon name="i-rl-chevronDown" class="rla-toc-chevron size-4 text-muted shrink-0 transition-transform duration-200" />
       </summary>
       <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-default/50 bg-default">
         <ul class="flex flex-col gap-0.5 pb-8">
@@ -63,12 +63,12 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
     <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
       <div class={classes.container} data-slot="container">
         <h4 class={classes.title} data-slot="title">On this page</h4>
-        <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
+        <ul class:list={[classes.list, "mt-2xl flex flex-col gap-xs"]} data-slot="list">
           {filteredHeadings.map(heading => (
             <li
               class:list={[
                 classes.item,
-                heading.depth === 2 && "pl-3xs",
+                heading.depth === 2 && "pl-xs",
                 heading.depth === 3 && "pl-6",
                 heading.depth >= 4 && "pl-9"
               ]}
@@ -91,7 +91,7 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 
 <style is:global>
   .toc-active {
-    color: var(--primary);
+    color: var(--rl-primary-500);
     font-weight: 600;
   }
 </style>

package/src/components/theme-selector/RLAThemeSelector.astro

@@ -22,33 +22,35 @@ const classes = themeSelectorTheme(Astro.props);
             square
             aria-label="Toggle theme"
     >
-        <RLAIcon name="sun" class={classes.sun} />
-        <RLAIcon name="moon" class={classes.moon} />
+        <RLAIcon name="i-rl-sun" class={classes.sun} />
+        <RLAIcon name="i-rl-moon" class={classes.moon} />
     </RLAButton>
 </rla-theme-selector>
 
+<style is:global>
+    .rla-theme-sun { display: none; }
+    [data-theme="dark"] .rla-theme-sun { display: block; }
+    .rla-theme-moon { display: block; }
+    [data-theme="dark"] .rla-theme-moon { display: none; }
+</style>
+
 <script>
     import { defineShortcuts } from "../../shortcuts"
 
     function applyStoredTheme() {
         const stored = localStorage.getItem('theme');
-        if (stored === 'dark') {
-            document.documentElement.classList.add('dark');
-            document.documentElement.classList.remove('light');
-        } else if (stored === 'light') {
-            document.documentElement.classList.remove('dark');
-            document.documentElement.classList.add('light');
+        if (stored === 'dark' || stored === 'light') {
+            document.documentElement.setAttribute('data-theme', stored);
         }
     }
 
     applyStoredTheme();
 
     function onToggle() {
-        const willBeDark = !document.documentElement.classList.contains('dark');
-        document.documentElement.classList.toggle('dark',  willBeDark);
-        document.documentElement.classList.toggle('light', !willBeDark);
+        const willBeDark = document.documentElement.getAttribute('data-theme') !== 'dark';
+        document.documentElement.setAttribute('data-theme', willBeDark ? 'dark' : 'light');
         localStorage.setItem('theme', willBeDark ? 'dark' : 'light');
-        
+
         document.querySelectorAll('.theme-toggle-button').forEach(btn => {
             btn.setAttribute('data-state', willBeDark ? 'on' : 'off');
             btn.setAttribute('aria-pressed', willBeDark.toString());
@@ -63,7 +65,7 @@ const classes = themeSelectorTheme(Astro.props);
             const button = this.querySelector('.theme-toggle-button');
             if (!button) return;
 
-            const isDark = document.documentElement.classList.contains('dark');
+            const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
             button.setAttribute('data-state', isDark ? 'on' : 'off');
             button.setAttribute('aria-pressed', isDark.toString());
 
@@ -95,4 +97,4 @@ const classes = themeSelectorTheme(Astro.props);
     if (!customElements.get('rla-theme-selector')) {
         customElements.define('rla-theme-selector', RLAThemeSelector);
     }
-</script>
+</script>

package/src/components/theme-selector/theme-selector.theme.ts

@@ -4,8 +4,8 @@ export const themeSelectorTheme = defineTheme("theme-selector", {
   slots: ["root", "sun", "moon"],
   base: {
     root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
-    sun: "hidden dark:block w-5 h-5 text-current",
-    moon: "dark:hidden w-5 h-5 text-current"
+    sun: "rla-theme-sun w-5 h-5 text-current",
+    moon: "rla-theme-moon w-5 h-5 text-current"
   },
   variants: {},
   defaultVariants: {}

package/src/components/toast/RLAToast.astro

@@ -24,11 +24,11 @@ const classes = toastTheme({
 })
 
 const variantIcons: Record<string, string> = {
-  default: "bell",
-  error: "circleX",
-  success: "circleCheck",
-  warning: "alertTriangle",
-  info: "info",
+  default: "i-rl-bell",
+  error: "i-rl-circleCheck",
+  success: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info",
 }
 
 const icon = variantIcons[variant] ?? variantIcons.default!
@@ -90,7 +90,7 @@ const isError = variant === "error"
       data-toast-close
       aria-label="Dismiss notification"
     >
-      <RLAIcon name="close" class="size-3.5" aria-hidden="true" />
+      <RLAIcon name="i-rl-close" class="size-3.5" aria-hidden="true" />
     </button>
   )}
 </div>

package/src/components/toast/store.ts

@@ -1,4 +1,4 @@
-import { atom } from "nanostores"
+import { atom } from "../../stores"
 
 export interface ToastItem {
   id: string

package/src/components/tooltip/tooltip.theme.ts

@@ -6,7 +6,7 @@ export const tooltipTheme = defineTheme("tooltip", {
     root: "relative inline-block group/tooltip",
     trigger: "",
     content: [
-      "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+      "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-neutral-50 shadow-md animate-in fade-in-0 zoom-in-95",
       "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
       "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
     ]

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

@@ -1,68 +1,35 @@
-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>`
+import uiConfig from "virtual:rimelight/ui"
+import { getIconSvg, ICONS, svg } from "./icons.raw"
 
-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
+export { ICONS, svg }
 
-export const DEFAULT_ICONS = Object.fromEntries(
-  Object.entries(ICONS).map(([k, v]) => [k, svg(v)])
-) as { readonly [K in keyof typeof ICONS]: string }
+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

@@ -1,31 +1,32 @@
-import type { AstroIntegration } from "astro"
-import UnoCSS from "unocss/astro"
-import type { UIConfig } from "./types"
+import UnoCSS from "@unocss/vite"
 import rimelightUiPreset from "./preset"
+import type { UIConfig } from "./types"
 
-export const ui = (config: UIConfig = {}): AstroIntegration[] => [
+const ID = "virtual:rimelight/ui"
+
+export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
   UnoCSS({
-    ...config.unocss,
-    presets: [rimelightUiPreset(config), ...(config.unocss?.presets ?? [])],
+    ...unocss,
+    presets: [rimelightUiPreset(cfg), ...(unocss.presets || [])],
     content: {
-      ...config.unocss?.content,
-      pipeline: config.unocss?.content?.pipeline !== false && {
-        ...config.unocss?.content?.pipeline,
+      ...unocss.content,
+      pipeline: unocss.content?.pipeline !== false && {
+        ...unocss.content?.pipeline,
         include: [
           /\.(vue|svelte|[jt]sx?|mdx?|astro|html)($|\?)/,
-          /[\\/](@rimelight\/ui|packages\/ui)[\\/]/,
-          ...[config.unocss?.content?.pipeline?.include ?? []].flat()
+          /[\\/](@rimelight\/(ui|cms)|packages\/(ui|cms))[\\/]/,
+          ...[unocss.content?.pipeline?.include]
+            .flat()
+            .filter((v): v is string | RegExp => Boolean(v))
         ]
       }
     }
   }),
   {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig }) =>
-        void updateConfig({
-          vite: { define: { "import.meta.env.RIMELIGHT_UI_CONFIG": JSON.stringify(config) } }
-        })
-    }
+    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
   }
 ]