@rimelight/ui 0.0.35 → 0.0.37

package/src/themes/popover.theme.ts

@@ -5,13 +5,10 @@ export const createPopoverTheme = (_colors: readonly string[] = defaultColors) =
   defineTheme({
     slots: ["root", "trigger", "content"],
     base: {
-      root: "relative inline-block group/popover",
+      root: "relative inline-block",
       trigger: "",
       content: [
-        "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-        "transition-all duration-200 invisible opacity-0 scale-95 origin-center",
-        "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:scale-100",
-        "focus-within:visible focus-within:opacity-100 focus-within:scale-100"
+        "absolute z-50 w-72 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none"
       ]
     },
     variants: {

package/src/themes/select.theme.ts

@@ -9,7 +9,7 @@ export const createSelectTheme = () =>
       trigger:
         "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       content:
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg transition-all w-full mt-1 max-h-60 overflow-y-auto",
       item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       itemText: "truncate",
       itemIcon: "ml-auto size-4"

package/src/themes/toast.theme.ts

@@ -8,18 +8,24 @@ export const createToastTheme = () =>
       title: "text-sm font-semibold",
       description: "text-xs opacity-90",
       action:
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:hover:border-error-500/30 group-[.error]:hover:bg-error-500 group-[.error]:hover:text-white group-[.error]:focus:ring-error-500",
       close:
         "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
     },
     variants: {
       variant: {
         default: { root: "bg-background border-border" },
-        destructive: {
-          root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
+        error: {
+          root: "error group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
         },
         success: {
           root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
+        },
+        warning: {
+          root: "border-warning-500/20 bg-warning-500/10 text-warning-700 dark:text-warning-400"
+        },
+        info: {
+          root: "border-info-500/20 bg-info-500/10 text-info-700 dark:text-info-400"
         }
       }
     },

package/src/types/components/button.ts

@@ -1,6 +1,7 @@
 import type { Theme, ThemeColor } from "../theme"
+import type { LinkProps } from "./link"
 
-export interface ButtonProps {
+export interface ButtonProps extends LinkProps {
   /**
    * The visual style variant of the button
    */

package/src/types/components/link.ts

@@ -1,5 +1,3 @@
-import type { ThemeColor } from "../theme"
-
 export interface LinkProps {
   to?: string | object
   href?: string
@@ -13,14 +11,6 @@ export interface LinkProps {
   exactHash?: boolean
   inactiveClass?: string
   activeClass?: string
-  variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
-  color?: ThemeColor
-  /**
-   * Styles the link visually as a button
-   *
-   * @default false
-   */
-  isButton?: boolean
   /**
    * Screen reader accessibility label. Will automatically append " (opens in a new tab)" for
    * external links if not customized

package/src/types/components/sidebar.ts

@@ -8,7 +8,7 @@ export interface BadgeConfig {
     | "note"
     | "tip"
     | "caution"
-    | "danger"
+    | "error"
     | "success"
     | "default"
   class?: string

package/src/types/components/table-of-contents.ts

@@ -21,6 +21,11 @@ export interface TableOfContentsProps {
    * @default ".markdown-content"
    */
   containerSelector?: string
+  /**
+   * Render as a collapsible dropdown (<details>/<summary>) with a scrollable list and a built-in
+   * bottom gap. Intended for small-screen / mobile contexts.
+   */
+  collapsible?: boolean
   /**
    * The component the root element should render as.
    *

package/src/types/components/toast.ts

@@ -11,7 +11,7 @@ export interface ToastProps {
   /**
    * Visual variant.
    */
-  variant?: "default" | "destructive" | "success" | "warning" | "info"
+  variant?: "default" | "error" | "success" | "warning" | "info"
   /**
    * Action button label.
    */

package/src/utils/index.ts

@@ -5,3 +5,5 @@ export * from "./docs"
 export * from "./embed"
 export * from "./shortcuts"
 export * from "./color"
+export * from "./scroll"
+export * from "./toast"

package/src/utils/merge.ts

@@ -0,0 +1,62 @@
+export function isPlainObject(value: unknown): boolean {
+  if (value === null || typeof value !== "object") {
+    return false
+  }
+  const prototype = Object.getPrototypeOf(value)
+
+  if (
+    prototype !== null &&
+    prototype !== Object.prototype &&
+    Object.getPrototypeOf(prototype) !== null
+  ) {
+    return false
+  }
+
+  if (Symbol.iterator in value) {
+    return false
+  }
+
+  if (Symbol.toStringTag in value) {
+    return Object.prototype.toString.call(value) === "[object Module]"
+  }
+
+  return true
+}
+
+export function merge<T extends Record<string, any>>(base: T, defaults: Record<string, any>): T
+
+export function merge(
+  base: Record<string, any>,
+  defaults: Record<string, any>
+): Record<string, any> {
+  if (!isPlainObject(defaults)) {
+    return merge(base, {})
+  }
+  if (!isPlainObject(base)) {
+    return { ...defaults }
+  }
+
+  const object = { ...defaults }
+
+  for (const key of Object.keys(base)) {
+    if (key === "__proto__" || key === "constructor") {
+      continue
+    }
+
+    const value = base[key]
+
+    if (value === null || value === undefined) {
+      continue
+    }
+
+    if (Array.isArray(value) && Array.isArray(object[key])) {
+      object[key] = [...value, ...object[key]]
+    } else if (isPlainObject(value) && isPlainObject(object[key])) {
+      object[key] = merge(value, object[key])
+    } else {
+      object[key] = value
+    }
+  }
+
+  return object
+}

package/src/utils/scroll.ts

@@ -0,0 +1,41 @@
+export interface ScrollState {
+  isVisible: boolean
+  scrollPercentage: number
+}
+
+export function trackScroll(
+  options: { threshold?: number } = {},
+  onUpdate: (state: ScrollState) => void
+): () => void {
+  if (typeof window === "undefined") {
+    onUpdate({ isVisible: false, scrollPercentage: 0 })
+    return () => {}
+  }
+
+  const { threshold = 200 } = options
+
+  function update() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+    onUpdate({
+      isVisible: scrollTop > threshold,
+      scrollPercentage: scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+    })
+  }
+
+  window.addEventListener("scroll", update, { passive: true })
+  update()
+
+  return () => {
+    window.removeEventListener("scroll", update)
+  }
+}
+
+export function scrollToTop() {
+  if (typeof window !== "undefined") {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    })
+  }
+}

package/src/utils/toast.ts

@@ -0,0 +1,37 @@
+import { atom } from "nanostores"
+import type { ThemeColor } from "../types"
+
+export interface Toast {
+  id?: string | number
+  title?: string
+  description?: string
+  icon?: string
+  color?: ThemeColor
+  timeout?: number
+  callback?: () => void
+}
+
+export const toastsStore = atom<Toast[]>([])
+
+export function addToast(toast: Toast) {
+  const id = toast.id || Date.now()
+  const newToast = { ...toast, id }
+  toastsStore.set([...toastsStore.get(), newToast])
+
+  if (toast.timeout !== 0) {
+    setTimeout(() => {
+      removeToast(id)
+    }, toast.timeout || 5000)
+  }
+
+  return newToast
+}
+
+export function removeToast(id: string | number) {
+  const currentToasts = toastsStore.get()
+  const target = currentToasts.find((t) => t.id === id)
+  if (target && target.callback) {
+    target.callback()
+  }
+  toastsStore.set(currentToasts.filter((t) => t.id !== id))
+}

package/src/utils/useUi.ts

@@ -1,4 +1,4 @@
-import defu from "defu"
+import { merge } from "./merge"
 import { getUIConfig } from "virtual:rimelight-ui"
 import type { DefaultUIConfig } from "../themes"
 
@@ -8,7 +8,7 @@ export function useUi(
 ): Record<string, string | undefined> {
   const globalConfig = getUIConfig()
   const defaults = globalConfig[componentName] ?? {}
-  const merged = defu(uiProp ?? {}, defaults)
+  const merged = merge(uiProp ?? {}, defaults)
 
   return Object.fromEntries(
     Object.entries(merged).map(([key, value]) => [

package/src/components/HttpObservatory.astro

@@ -1,103 +0,0 @@
----
-/**
- * HttpObservatory.astro
- * A callout component displaying an HTTP Observatory score
- * Designed to match the authentic Mozilla Observatory report aesthetic
- */
-export interface HttpObservatoryProps {
-  grade?: string;
-  score?: number;
-  testsPassed?: number;
-  totalTests?: number;
-}
-
-type Props = HttpObservatoryProps;
-
-const {
-  grade = "A+",
-  score = 145,
-  testsPassed = 10,
-  totalTests = 10,
-} = Astro.props;
----
-
-<div class="http-obs-container mt-6xl px-2xs sm:px-0">
-  <!-- Header -->
-  <div class="mb-4xl text-center">
-    <h3 class="font-heading text-foreground text-3xl font-bold md:text-4xl">
-      HTTP Observatory
-    </h3>
-  </div>
-
-  <div
-    class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-border bg-[#181a1b] p-6xl text-white shadow-xl sm:p-4xl"
-  >
-    <div
-      class="flex flex-col items-center gap-4xl sm:flex-row sm:items-start sm:justify-between"
-    >
-      <!-- Grade & Stats -->
-      <div class="flex flex-col items-center gap-4xl sm:flex-row sm:items-center">
-        <!-- Grade Box -->
-        <div
-          class="flex size-6xl shrink-0 items-center p-lg justify-center rounded-lg border-2 border-[#1eac4e] bg-[#1eac4e]/20 text-5xl font-bold text-[#1eac4e] sm:size-5xl sm:text-6xl"
-          aria-label={`Grade ${grade}`}
-        >
-          {grade}
-        </div>
-
-        <!-- Stats -->
-        <div class="flex flex-col gap-2xs text-center sm:text-left">
-          <a
-            href="https://developer.mozilla.org/en-US/observatory/analyze?host=danielmarchi.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-sm font-semibold text-[#4fa9ff] hover:underline sm:text-base"
-          >
-            Run the scan.
-          </a>
-
-          <div class="flex flex-col gap-2xs font-medium text-gray-200">
-            <p>
-              <span
-                class="text-white decoration-white/40 underline-offset-4 hover:underline"
-                >Score</span
-              >:
-              <span class="text-white">{score} / 100</span>
-            </p>
-            <p>
-              <span
-                class="text-white decoration-white/40 underline-offset-4 hover:underline"
-                >Tests Passed</span
-              >:
-              <span class="text-white">{testsPassed} / {totalTests}</span>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .http-obs-container {
-    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
-    animation-delay: 0.4s;
-  }
-
-  @keyframes fade-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .http-obs-container {
-      animation: none;
-    }
-  }
-</style>

package/src/components/LighthouseScores.astro

@@ -1,204 +0,0 @@
----
-/**
- * LighthouseScores.astro
- * A callout component displaying perfect Lighthouse scores
- * Designed to match the authentic Lighthouse report aesthetic
- */
-export interface LighthouseScore {
-  label: string;
-  value: number;
-}
-
-export interface LighthouseScoresProps {
-  performance?: number;
-  accessibility?: number;
-  bestPractices?: number;
-  seo?: number;
-}
-
-const {
-  performance = 100,
-  accessibility = 100,
-  bestPractices = 100,
-  seo = 100,
-} = Astro.props;
-
-const scores = [
-  { label: 'Performance', value: performance },
-  { label: 'Accessibility', value: accessibility },
-  { label: 'Best Practices', value: bestPractices },
-  { label: 'SEO', value: seo },
-];
----
-
-<div class="lighthouse-container">
-  <!-- Header -->
-  <div class="mb-4xl text-center">
-    <h3 class="font-heading text-foreground text-3xl font-bold md:text-4xl">
-      Lighthouse Report
-    </h3>
-  </div>
-
-  <!-- Scores Grid -->
-  <div
-    class="lighthouse-scores mx-auto grid max-w-2xl grid-cols-2 gap-4xl sm:grid-cols-4"
-    role="list"
-    aria-label="Lighthouse scores"
-  >
-    {
-      scores.map((score) => {
-        const radius = 54;
-        const circumference = 2 * Math.PI * radius;
-        const offset = circumference - (score.value / 100) * circumference;
-        const color = score.value >= 90 ? "#0cce6b" : score.value >= 50 ? "#ffa400" : "#ff4e42";
-
-        return (
-          <div
-            class="lighthouse-score group flex flex-col items-center"
-            role="listitem"
-          >
-            <div class="relative">
-              <svg
-                class="lighthouse-gauge"
-                width="120"
-                height="120"
-                viewBox="0 0 120 120"
-                aria-hidden="true"
-                style="width: 96px; height: 96px;"
-              >
-                <style>
-                  @media (min-width: 640px) {
-                    .lighthouse-gauge {
-                      width: 112px !important;
-                      height: 112px !important;
-                    }
-                  }
-                  @media (min-width: 768px) {
-                    .lighthouse-gauge {
-                      width: 144px !important;
-                      height: 144px !important;
-                    }
-                  }
-                </style>
-                <circle
-                  cx="60"
-                  cy="60"
-                  r={radius}
-                  fill="none"
-                  stroke="#e0e0e0"
-                  stroke-width="8"
-                />
-                <circle
-                  cx="60"
-                  cy="60"
-                  r={radius}
-                  fill="none"
-                  stroke={color}
-                  stroke-width="8"
-                  stroke-linecap="round"
-                  stroke-dasharray={circumference}
-                  stroke-dashoffset={offset}
-                  class="lighthouse-progress"
-                  transform="rotate(-90 60 60)"
-                  style={`--target-offset: ${offset}`}
-                />
-                <text
-                  x="60"
-                  y="60"
-                  text-anchor="middle"
-                  dominant-baseline="central"
-                  class="lighthouse-number font-semibold font-sans"
-                  fill={color}
-                  style="font-size: 2rem;"
-                >
-                  {score.value}
-                </text>
-              </svg>
-            </div>
-
-            <span class="text-muted-foreground mt-2xl text-center text-sm font-medium">
-              {score.label}
-            </span>
-          </div>
-        );
-      })
-    }
-  </div>
-
-  <!-- Footer note -->
-  <p class="text-muted-foreground/60 mt-4xl text-center text-xs italic">
-    *Results represent the starting template. Changes to styling and features may affect final results.
-  </p>
-</div>
-
-<style>
-  /* Entrance animations */
-  .lighthouse-score {
-    animation: score-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
-  }
-
-  .lighthouse-progress {
-    animation: progress-fill 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
-  }
-
-  /* Staggered delays via nth-child to avoid inline style attributes */
-  .lighthouse-score:nth-child(1) { animation-delay: 100ms; }
-  .lighthouse-score:nth-child(2) { animation-delay: 180ms; }
-  .lighthouse-score:nth-child(3) { animation-delay: 260ms; }
-  .lighthouse-score:nth-child(4) { animation-delay: 340ms; }
-
-  .lighthouse-progress:nth-child(1) { animation-delay: 200ms; }
-  .lighthouse-progress:nth-child(2) { animation-delay: 280ms; }
-  .lighthouse-progress:nth-child(3) { animation-delay: 360ms; }
-  .lighthouse-progress:nth-child(4) { animation-delay: 440ms; }
-
-  @keyframes score-enter {
-    from {
-      opacity: 0;
-      transform: scale(0.9) translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-
-  @keyframes progress-fill {
-    from {
-      stroke-dashoffset: 339.292; /* Approximate circumference */
-    }
-    to {
-      stroke-dashoffset: var(--target-offset, 0);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .lighthouse-score,
-    .lighthouse-progress {
-      animation: none;
-    }
-
-    .lighthouse-progress {
-      stroke-dashoffset: 0;
-    }
-  }
-</style>
-
-<script>
-  // Run animations immediately
-  const initLighthouse = () => {
-    const scoresContainer = document.querySelector('.lighthouse-scores');
-    if (scoresContainer) {
-      const elements = scoresContainer.querySelectorAll<HTMLElement>('.lighthouse-score, .lighthouse-progress');
-      elements.forEach((el) => {
-        el.style.animationPlayState = 'running';
-      });
-    }
-  };
-
-  // Run on initial load
-  initLighthouse();
-
-  // Run on View Transitions navigate
-  document.addEventListener('astro:after-swap', initLighthouse);
-</script>

package/src/composables/index.ts

@@ -1,4 +0,0 @@
-export { useScrollToTop } from "./useScrollToTop"
-export { useToast } from "./useToast"
-export { headerLayersStore } from "./useHeaderStore"
-export { useShortcuts } from "./useShortcuts"

package/src/composables/useHeaderStore.ts

@@ -1,14 +0,0 @@
-import { map } from "nanostores"
-
-export interface HeaderLayerInfo {
-  type: "banner" | "header"
-  order: number
-  isVisible: boolean
-  height: number
-}
-
-/**
- * Global store tracking all registered header layers. This allows child components to subscribe to
- * header layer changes even across Vue/Astro boundaries, since nanostores is framework-agnostic.
- */
-export const headerLayersStore = map<Record<string, HeaderLayerInfo>>({})

package/src/composables/useScrollToTop.ts

@@ -1,62 +0,0 @@
-import { ref, onMounted, onUnmounted, type Ref } from "vue"
-
-export interface UseScrollToTopOptions {
-  /**
-   * The scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
-  threshold?: number
-}
-
-export interface UseScrollToTopReturn {
-  /**
-   * Whether the scroll-to-top button should be visible.
-   */
-  isVisible: Ref<boolean>
-  /**
-   * The current scroll percentage (0-100).
-   */
-  scrollPercentage: Ref<number>
-  /**
-   * Scrolls the window to the top with a smooth animation.
-   */
-  scrollToTop: () => void
-}
-
-function scrollToTop() {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth"
-  })
-}
-
-export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
-  const { threshold = 200 } = options
-
-  const isVisible = ref(false)
-  const scrollPercentage = ref(0)
-
-  function updateScrollState() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-
-    isVisible.value = scrollTop > threshold
-    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-  }
-
-  onMounted(() => {
-    window.addEventListener("scroll", updateScrollState, { passive: true })
-    updateScrollState()
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener("scroll", updateScrollState)
-  })
-
-  return {
-    isVisible,
-    scrollPercentage,
-    scrollToTop
-  }
-}