@rimelight/ui 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -48,6 +48,7 @@
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
     "./nuxt": "./src/nuxt.ts",
+    "./nuxt/types": "./src/nuxt-types.ts",
     "./presets": "./src/presets/index.ts",
     "./presets/*": "./src/presets/*",
     "./*": "./src/*"
@@ -70,7 +71,6 @@
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
-    "unplugin-icons": "23.0.1",
     "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {

package/src/components/ThemeToggle.astro

@@ -1,7 +1,5 @@
 ---
 import RLAButton from "./astro/RLAButton.astro";
-import IconSun from "~icons/lucide/sun"
-import IconMoon from "~icons/lucide/moon"
 
 export interface ThemeToggleProps {
   class?: string;
@@ -23,8 +21,8 @@ const { class: className, size = "md" } = Astro.props as Props
   variant="ghost"
   aria-label="Toggle theme"
 >
-    <IconSun class="sun-wrapper block dark:hidden" />
-    <IconMoon class="moon-wrapper hidden dark:block" />
+    <span class="sun-wrapper block dark:hidden i-lucide-sun" />
+    <span class="moon-wrapper hidden dark:block i-lucide-moon" />
 </RLAButton>
 
 <script>

package/src/components/astro/RLAButton.astro

@@ -15,36 +15,21 @@ const button = scv({
 });
 
 export interface RLAButtonProps {
-  /**
-   * Button variant style.
-   * @default "solid"
-   */
   variant?: keyof typeof buttonTheme.variants.variant;
-  /**
-   * Button color.
-   * @default "primary"
-   */
   color?: keyof typeof buttonTheme.variants.color;
-  /**
-   * Button size.
-   * @default "md"
-   */
   size?: keyof typeof buttonTheme.variants.size;
-  /**
-   * When provided, renders as <a> instead of <button>.
-   */
   href?: string;
-  /**
-   * UI overrides for individual slots, derived from the button theme.
-   */
-  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  loading?: boolean;
+  square?: boolean;
+  block?: boolean;
+  active?: boolean;
+  activeColor?: keyof typeof buttonTheme.variants.color;
+  activeVariant?: keyof typeof buttonTheme.variants.variant;
+  ui?: Partial<Record<string, string>>;
   class?: string;
-  /**
-   * Standard HTML attributes for <button>
-   */
   [key: string]: unknown;
 }
 
@@ -55,6 +40,15 @@ const {
   class: className,
   ui: uiProp,
   href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
   ...rest
 } = Astro.props as RLAButtonProps
 
@@ -63,23 +57,62 @@ const globalConfig = getUIConfig();
 const mergedUI = defu(
   uiProp ?? {},
   (globalConfig.button as Record<string, unknown>) ?? {},
-) as Record<keyof typeof buttonTheme.base, string | undefined>;
+) as Record<string, string | undefined>;
 
-const { root } = button({
-  variant,
-  color,
+const isLeading = (leadingIcon || Astro.slots.has("leading")) || loading
+const isTrailing = (trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingClasses = loading ? "animate-spin" : ""
+const trailingClasses = loading ? "animate-spin" : ""
+
+const resolved = button({
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
   size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active
 });
 
-// Determine whether to render <a> or <button>
 const Tag = href ? "a" : "button";
 ---
-
 <Tag
-  class={twMerge(root, mergedUI.root, className)}
+  class={twMerge(resolved.root, mergedUI.root, className)}
   data-slot="rla-button"
   {...(Tag === "a" ? { href } : {})}
   {...rest}
 >
-  <slot />
+  <slot name="leading" {...{ ui: resolved }}>
+    {isLeading && (
+      <span class={twMerge(resolved.leadingIcon, mergedUI.leadingIcon)} data-slot="leading-icon">
+        <span class={twMerge(showLeadingIcon, leadingClasses)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={twMerge(resolved.label, mergedUI.label)} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: resolved }}>
+    {isTrailing && (
+      <span class={twMerge(resolved.trailingIcon, mergedUI.trailingIcon)} data-slot="trailing-icon">
+        <span class={twMerge(showTrailingIcon, trailingClasses)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
 </Tag>

package/src/components/astro/RLAIcon.astro

@@ -0,0 +1,61 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { iconTheme } from "../../themes/icon.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAIconProps {
+  /**
+   * Icon name following the UnoCSS icons format.
+   * @example "i-lucide-home"
+   */
+  name: string
+  /**
+   * Size variant for the icon.
+   */
+  size?: keyof typeof iconTheme.variants.size
+  /**
+   * External class applied to the root element.
+   */
+  class?: string
+  /**
+   * UI overrides for individual slots.
+   */
+  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  [key: string]: unknown
+}
+
+const {
+  name,
+  size = "md",
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAIconProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.icon as Record<string, unknown>) ?? {}
+) as Record<keyof typeof iconTheme.base, string | undefined>
+
+const { root } = icon({ size })
+---
+
+<span
+  class={twMerge(root, mergedUI.root, className, name)}
+  data-slot="rla-icon"
+  aria-hidden="true"
+  {...rest}
+>
+</span>

package/src/components/astro/RLALogo.astro

@@ -0,0 +1,100 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { logoTheme } from "../../themes/logo.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const logo = scv({
+  slots: [...logoTheme.slots],
+  base: logoTheme.base,
+  variants: logoTheme.variants,
+  defaultVariants: logoTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLALogoProps {
+  /**
+   * The variant of the logo to display.
+   * @default "logomark"
+   */
+  variant?: string;
+  /**
+   * Override the color mode.
+   */
+  mode?: "color" | "white" | "black";
+  /**
+   * The URL to link to.
+   * @default "/"
+   */
+  href?: string;
+  /**
+   * UI overrides for individual slots, derived from the logo theme.
+   */
+  ui?: Partial<Record<keyof typeof logoTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * The alt text for the logo image.
+   */
+  alt?: string;
+  /**
+   * Standard HTML attributes for <a>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  variant = "logomark",
+  mode,
+  href = "/",
+  class: className,
+  ui: uiProp,
+  alt,
+  ...rest
+} = Astro.props as RLALogoProps;
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.logo as Record<string, unknown>) ?? {},
+) as Record<keyof typeof logoTheme.base, string | undefined>;
+
+const { root } = logo();
+
+const rcLogos = globalConfig.logos as Record<string, any>;
+let logoSrc: string | null = null;
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    logoSrc = src[mode || "color"] || src.black || src.color;
+  } else if (typeof src === "string") {
+    logoSrc = src;
+  }
+}
+
+// Support for UnoCSS icons (e.g. `i-heroicons-home`)
+const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+---
+
+<a
+  class={twMerge(root, mergedUI.root, className)}
+  href={href}
+  aria-label={alt || variant}
+  data-slot="rla-logo"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : (
+      <img src={logoSrc} alt={alt || ""} class="size-full block object-contain shrink-0" />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAPlaceholder.astro

@@ -0,0 +1,71 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { placeholderTheme } from "../../themes/placeholder.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAPlaceholderProps {
+  /**
+   * UI overrides for individual slots, derived from the placeholder theme.
+   */
+  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const {
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAPlaceholderProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.placeholder as Record<string, unknown>) ?? {}
+) as Record<keyof typeof placeholderTheme.base, string | undefined>
+
+const { base, svg } = placeholder()
+---
+
+<div class={twMerge(base, mergedUI.base, className)} {...rest}>
+  <svg class={twMerge(svg, mergedUI.svg)}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>

package/src/components/vue/RLVButton.vue

@@ -1,97 +1,139 @@
-<script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { buttonTheme } from "../../themes/button.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
-export interface RLVButtonProps {
-  /**
-   * Button variant.
-   *
-   * @default "solid"
-   */
-  variant?: keyof typeof buttonTheme.variants.variant
-  /**
-   * Button color.
-   *
-   * @default "primary"
-   */
-  color?: keyof typeof buttonTheme.variants.color
-  /**
-   * Button size.
-   *
-   * @default "md"
-   */
-  size?: keyof typeof buttonTheme.variants.size
-  /**
-   * When provided, renders as <a> instead of <button>.
-   */
-  href?: string
-  /**
-   * UI overrides for individual slots, derived from the button theme.
-   */
-  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
-  /**
-   * Standard HTML attributes for <button>
-   */
-  [key: string]: unknown
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href
-} = defineProps<RLVButtonProps>()
-
-defineSlots<{
-  /**
-   * The default slot for the button content (e.g., text, icons).
-   */
-  default(props: {}): any
-}>()
-
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {}
-) as Record<keyof typeof buttonTheme.base, string | undefined>
-
-const { root } = button({
-  variant,
-  color,
-  size
-})
-
-// Determine whether to render <a> or <button>
-const Tag = href ? "a" : "button"
-</script>
-
-<template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="twMerge(root, mergedUI.root, className)"
-    data-slot="rlv-button"
-  >
-    <slot />
-  </component>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { buttonTheme } from "../../themes/button.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVButtonProps {
+  variant?: keyof typeof buttonTheme.variants.variant
+  color?: keyof typeof buttonTheme.variants.color
+  size?: keyof typeof buttonTheme.variants.size
+  href?: string
+  label?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  loading?: boolean
+  square?: boolean
+  block?: boolean
+  active?: boolean
+  activeColor?: keyof typeof buttonTheme.variants.color
+  activeVariant?: keyof typeof buttonTheme.variants.variant
+  ui?: Partial<Record<string, string>>
+  class?: string
+  [key: string]: unknown
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant
+} = defineProps<RLVButtonProps>()
+
+const slots = useSlots()
+
+const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isTrailing = computed(() => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value))
+
+const showLeadingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return leadingIcon
+})
+
+const showTrailingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return trailingIcon
+})
+
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
+
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
+})
+
+defineSlots<{
+  default(props: {}): any
+  leading(props: { ui: Record<string, string> }): any
+  trailing(props: { ui: Record<string, string> }): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.button as Record<string, unknown>) ?? {}
+) as Record<string, string | undefined>
+
+const resolved = computed(() => button({
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !slots.default),
+  leading: isLeading.value,
+  trailing: isTrailing.value,
+  loading,
+  active
+}))
+
+const Tag = href ? "a" : "button"
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="href"
+    :class="twMerge(resolved.root, mergedUI.root, className)"
+    data-slot="rlv-button"
+  >
+    <slot name="leading" :ui="resolved">
+      <span
+        v-if="isLeading"
+        :class="twMerge(resolved.leadingIcon, mergedUI.leadingIcon)"
+        data-slot="leading-icon"
+      >
+        <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <span v-if="label !== undefined && label !== null" :class="twMerge(resolved.label, mergedUI.label)" data-slot="label">
+      {{ label }}
+    </span>
+    <slot v-else />
+
+    <slot name="trailing" :ui="resolved">
+      <span
+        v-if="isTrailing"
+        :class="twMerge(resolved.trailingIcon, mergedUI.trailingIcon)"
+        data-slot="trailing-icon"
+      >
+        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+  </component>
+</template>

package/src/components/vue/RLVIcon.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { useUi } from "../../composables"
+import { iconTheme } from "../../themes/icon.theme"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVIconProps {
+  /**
+   * Icon name following the UnoCSS icons format. Can be a string like "i-lucide-home" or a Vue
+   * component.
+   *
+   * @example
+   *   "i-lucide-home"
+   */
+  name: string
+  /**
+   * Size variant for the icon.
+   */
+  size?: keyof typeof iconTheme.variants.size
+  /**
+   * External class applied to the root element.
+   */
+  class?: string
+  /**
+   * UI overrides for individual slots.
+   */
+  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+}
+
+const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+
+const mergedUI = useUi("icon", uiProp as Record<string, unknown> | undefined)
+
+const resolvedClasses = computed(() => {
+  const { root } = icon({ size })
+  return {
+    root: twMerge(root, mergedUI.value.root, className)
+  }
+})
+
+defineSlots<{
+  default(props: {}): any
+}>()
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    :class="[resolvedClasses.root, name]"
+    data-slot="rlv-icon"
+    aria-hidden="true"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/vue/RLVLogo.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { logoTheme } from "../../themes/logo.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const logo = scv({
+  slots: [...logoTheme.slots],
+  base: logoTheme.base,
+  variants: logoTheme.variants,
+  defaultVariants: logoTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVLogoProps {
+  /**
+   * The variant of the logo to display.
+   *
+   * @default "logomark"
+   */
+  variant?: string
+  /**
+   * Override the color mode.
+   */
+  mode?: "color" | "white" | "black"
+  /**
+   * The URL to link to.
+   *
+   * @default "/"
+   */
+  href?: string
+  /**
+   * UI overrides for individual slots, derived from the logo theme.
+   */
+  ui?: Partial<Record<keyof typeof logoTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * The alt text for the logo image.
+   */
+  alt?: string
+  /**
+   * Standard HTML attributes for <a>
+   */
+  [key: string]: unknown
+}
+
+const props = withDefaults(defineProps<RLVLogoProps>(), {
+  variant: "logomark",
+  href: "/"
+})
+
+defineSlots<{
+  /**
+   * The default slot for the logo content (e.g., text, custom elements).
+   */
+  default(props: {}): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = computed(
+  () =>
+    defu(props.ui ?? {}, (globalConfig.logo as Record<string, unknown>) ?? {}) as Record<
+      keyof typeof logoTheme.base,
+      string | undefined
+    >
+)
+
+const resolvedClasses = computed(() => {
+  const { root } = logo()
+  return {
+    root: twMerge(root, mergedUI.value.root, props.class)
+  }
+})
+
+const logoSrc = computed<string | null>(() => {
+  const rcLogos = globalConfig.logos as Record<string, any>
+  let src: any = null
+
+  if (rcLogos && typeof rcLogos === "object") {
+    src = rcLogos[props.variant]
+    if (src && typeof src === "object") {
+      src = src[props.mode || "color"] || src.black || src.color
+    }
+  }
+
+  if (src && typeof src === "string" && src) return src
+
+  return null
+})
+
+const isIcon = computed(() => {
+  const src = logoSrc.value
+  if (!src) return false
+  if (src.startsWith("http") || src.startsWith("/") || src.startsWith(".")) return false
+  return src.includes(":") || src.startsWith("i-")
+})
+
+const Tag = computed(() => (props.href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="Tag === 'a' ? href : undefined"
+    :aria-label="alt || variant"
+    :class="resolvedClasses.root"
+    data-slot="rlv-logo"
+  >
+    <template v-if="logoSrc">
+      <!-- Using mode='svg' pattern is not strictly needed for UnoCSS icons -->
+      <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />
+      <img v-else :src="logoSrc" :alt="alt || ''" class="size-full block object-contain shrink-0" />
+    </template>
+    <slot v-else />
+  </component>
+</template>

package/src/components/vue/RLVPlaceholder.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { placeholderTheme } from "../../themes/placeholder.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVPlaceholderProps {
+  /**
+   * UI overrides for individual slots, derived from the placeholder theme.
+   */
+  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+
+defineSlots<{
+  /**
+   * The default slot for placeholder content.
+   */
+  default(props: {}): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.placeholder as Record<string, unknown>) ?? {}
+) as Record<keyof typeof placeholderTheme.base, string | undefined>
+
+const { base, svg } = placeholder()
+</script>
+
+<template>
+  <div :class="twMerge(base, mergedUI.base, className)" v-bind="$attrs">
+    <svg :class="twMerge(svg, mergedUI.svg)">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect
+        stroke="none"
+        fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+        width="100%"
+        height="100%"
+      />
+    </svg>
+
+    <slot />
+  </div>
+</template>

package/src/integrations/ui.ts

@@ -3,7 +3,6 @@ import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
 import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
-import Icons from "unplugin-icons/vite"
 import tailwindcss from "@tailwindcss/vite"
 import { defaultUIConfig } from "../themes"
 
@@ -14,9 +13,25 @@ export type UIConfigOverrides = {
   "button"?: Partial<(typeof defaultUIConfig)["button"]>
   "header"?: Partial<(typeof defaultUIConfig)["header"]>
   "scroll-to-top"?: Partial<(typeof defaultUIConfig)["scroll-to-top"]>
+  "logo"?: Partial<(typeof defaultUIConfig)["logo"]>
 }
 
 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).
@@ -47,7 +62,8 @@ export interface UIOptions {
  *   })
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {} }
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
@@ -74,10 +90,6 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
             router: false,
             scanPackages: ["@rimelight/ui"]
           }),
-          Icons({
-            compiler: "astro",
-            autoInstall: true
-          }),
           tailwindcss(),
           {
             name: "vite-plugin-rimelight-ui-config",

package/src/nuxt-types.ts

@@ -0,0 +1,3 @@
+export type * from "@nuxt/ui/runtime/types"
+export type * from "@nuxt/ui/runtime/composables"
+export type * from "@nuxt/ui/runtime/utils"

package/src/presets/index.ts

@@ -2,6 +2,7 @@ import {
   definePreset,
   presetTypography,
   presetWind4,
+  presetIcons,
   transformerDirectives,
   transformerVariantGroup
 } from "unocss"
@@ -23,6 +24,12 @@ export default definePreset(() => {
             "font-family": "var(--font-mono), monospace"
           }
         }
+      }),
+      presetIcons({
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
       })
     ],
     transformers: [transformerDirectives(), transformerVariantGroup()],

package/src/themes/button.theme.ts

@@ -3,7 +3,7 @@
  * set of variants including color logic.
  */
 export const buttonTheme = {
-  slots: ["root"],
+  slots: ["root", "label", "leadingIcon", "trailingIcon"],
   base: {
     root: [
       "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
@@ -11,12 +11,16 @@ export const buttonTheme = {
       "transition-all outline-none focus-visible:ring-3",
       "disabled:pointer-events-none disabled:op-50",
       "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-    ]
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    trailingIcon: "shrink-0"
   },
   variants: {
     variant: {
       solid: { root: "b shadow-xs" },
-      outlined: { root: "b shadow-xs border" },
+      outline: { root: "b shadow-xs border" },
+      soft: { root: "" },
       subtle: { root: "" },
       ghost: { root: "" },
       link: { root: "p-0 h-auto" }
@@ -33,11 +37,24 @@ export const buttonTheme = {
       source: { root: "" }
     },
     size: {
-      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5" },
-      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4" },
-      md: { root: "h-9 px-sm text-sm [&_svg]:size-4" },
-      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5" },
-      xl: { root: "h-11 px-lg text-base [&_svg]:size-5" }
+      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5", leadingIcon: "[&_svg]:size-3.5", trailingIcon: "[&_svg]:size-3.5" },
+      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
+      md: { root: "h-9 px-sm text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
+      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5", leadingIcon: "[&_svg]:size-4.5", trailingIcon: "[&_svg]:size-4.5" },
+      xl: { root: "h-11 px-lg text-base [&_svg]:size-5", leadingIcon: "[&_svg]:size-5", trailingIcon: "[&_svg]:size-5" }
+    },
+    block: {
+      true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
+    },
+    square: {
+      true: { root: "" }
+    },
+    leading: { true: {} },
+    trailing: { true: {} },
+    loading: { true: {} },
+    active: {
+      true: { root: "" },
+      false: { root: "" }
     }
   },
   compoundVariants: [
@@ -105,63 +122,63 @@ export const buttonTheme = {
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "primary",
       classNames: {
         root: "border-primary/20 text-primary-600 bg-primary/5 hover:bg-primary/10 hover:border-primary/30 focus-visible:ring-primary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "secondary",
       classNames: {
         root: "border-secondary/20 text-secondary-600 bg-secondary/5 hover:bg-secondary/10 hover:border-secondary/30 focus-visible:ring-secondary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "info",
       classNames: {
         root: "border-info/20 text-info-600 bg-info/5 hover:bg-info/10 hover:border-info/30 focus-visible:ring-info/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "success",
       classNames: {
         root: "border-success/20 text-success-600 bg-success/5 hover:bg-success/10 hover:border-success/30 focus-visible:ring-success/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "warning",
       classNames: {
         root: "border-warning/20 text-warning-600 bg-warning/5 hover:bg-warning/10 hover:border-warning/30 focus-visible:ring-warning/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "error",
       classNames: {
         root: "border-error/20 text-error-600 bg-error/5 hover:bg-error/10 hover:border-error/30 focus-visible:ring-error/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "commentary",
       classNames: {
         root: "border-commentary/20 text-commentary-600 bg-commentary/5 hover:bg-commentary/10 hover:border-commentary/30 focus-visible:ring-commentary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "ideation",
       classNames: {
         root: "border-ideation/20 text-ideation-600 bg-ideation/5 hover:bg-ideation/10 hover:border-ideation/30 focus-visible:ring-ideation/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "source",
       classNames: {
         root: "border-source/20 text-source-600 bg-source/5 hover:bg-source/10 hover:border-source/30 focus-visible:ring-source/40"
@@ -355,6 +372,130 @@ export const buttonTheme = {
       classNames: {
         root: "text-source-600 hover:underline hover:decoration-source/30"
       }
+    },
+    // soft variant compound variants
+    {
+      variant: "soft",
+      color: "primary",
+      classNames: {
+        root: "text-primary-600 bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      classNames: {
+        root: "text-secondary-600 bg-secondary/10 hover:bg-secondary/20 focus-visible:ring-secondary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      classNames: {
+        root: "text-info-600 bg-info/10 hover:bg-info/20 focus-visible:ring-info/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      classNames: {
+        root: "text-success-600 bg-success/10 hover:bg-success/20 focus-visible:ring-success/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      classNames: {
+        root: "text-warning-600 bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "error",
+      classNames: {
+        root: "text-error-600 bg-error/10 hover:bg-error/20 focus-visible:ring-error/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "commentary",
+      classNames: {
+        root: "text-commentary-600 bg-commentary/10 hover:bg-commentary/20 focus-visible:ring-commentary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "ideation",
+      classNames: {
+        root: "text-ideation-600 bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "source",
+      classNames: {
+        root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
+      }
+    },
+    // square + size compound variants (explicit width to match height)
+    {
+      square: true,
+      size: "xs",
+      classNames: {
+        root: "p-1 w-7"
+      }
+    },
+    {
+      square: true,
+      size: "sm",
+      classNames: {
+        root: "p-1.5 w-8"
+      }
+    },
+    {
+      square: true,
+      size: "md",
+      classNames: {
+        root: "p-1.5 w-9"
+      }
+    },
+    {
+      square: true,
+      size: "lg",
+      classNames: {
+        root: "p-2 w-10"
+      }
+    },
+    {
+      square: true,
+      size: "xl",
+      classNames: {
+        root: "p-2 w-11"
+      }
+    },
+    // loading compound variants
+    {
+      loading: true,
+      leading: true,
+      classNames: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: false,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
     }
   ],
   defaultVariants: {

package/src/themes/icon.theme.ts

@@ -0,0 +1,18 @@
+export const iconTheme = {
+  slots: ["root"],
+  base: {
+    root: ["inline-block", "align-middle"]
+  },
+  variants: {
+    size: {
+      xs: { root: ["h-3", "w-3"] },
+      sm: { root: ["h-4", "w-4"] },
+      md: { root: ["h-5", "w-5"] },
+      lg: { root: ["h-6", "w-6"] },
+      xl: { root: ["h-8", "w-8"] }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+} as const

package/src/themes/index.ts

@@ -2,6 +2,9 @@ import { headerTheme } from "./header.theme"
 import { footerTheme } from "./footer.theme"
 import { scrollToTopTheme } from "./scroll-to-top.theme"
 import { buttonTheme } from "./button.theme"
+import { logoTheme } from "./logo.theme"
+import { iconTheme } from "./icon.theme"
+import { placeholderTheme } from "./placeholder.theme"
 
 /**
  * Default UI configuration for all components. This is the baseline that gets merged with
@@ -10,8 +13,11 @@ import { buttonTheme } from "./button.theme"
 export const defaultUIConfig = {
   "header": headerTheme,
   "footer": footerTheme,
+  "logo": logoTheme,
   "scroll-to-top": scrollToTopTheme,
-  "button": buttonTheme
+  "button": buttonTheme,
+  "icon": iconTheme,
+  "placeholder": placeholderTheme
 } as const
 
 export type DefaultUIConfig = typeof defaultUIConfig

package/src/themes/logo.theme.ts

@@ -0,0 +1,8 @@
+export const logoTheme = {
+  slots: ["root"],
+  base: {
+    root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+} as const

package/src/themes/placeholder.theme.ts

@@ -0,0 +1,14 @@
+/**
+ * Theme configuration for the Placeholder component. Defines the slots, base styles for a
+ * placeholder container with a decorative SVG pattern overlay.
+ */
+export const placeholderTheme = {
+  slots: ["base", "svg"],
+  base: {
+    base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+    svg: "absolute inset-0 h-full w-full stroke-primary/10"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+} as const