@rimelight/ui 0.0.36 → 0.0.37

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
-  }
-}

package/src/composables/useShortcuts.ts

@@ -1,11 +0,0 @@
-import { onUnmounted } from "vue"
-import { defineShortcuts } from "../utils/shortcuts"
-import type { ShortcutsConfig, ShortcutsOptions } from "../utils/shortcuts"
-
-export function useShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions) {
-  const cleanup = defineShortcuts(config, options)
-  onUnmounted(() => {
-    cleanup()
-  })
-  return cleanup
-}

package/src/composables/useToast.ts

@@ -1,43 +0,0 @@
-import { reactive } from "vue"
-import type { ThemeColor } from "../types"
-
-export interface Toast {
-  id?: string | number
-  title?: string
-  description?: string
-  icon?: string
-  color?: ThemeColor
-  timeout?: number
-  callback?: () => void
-}
-
-const toasts = reactive<Toast[]>([])
-
-export function useToast() {
-  const add = (toast: Toast) => {
-    const id = toast.id || Date.now()
-    const newToast = { ...toast, id }
-    toasts.push(newToast)
-
-    if (toast.timeout !== 0) {
-      setTimeout(() => {
-        remove(id)
-      }, toast.timeout || 5000)
-    }
-
-    return newToast
-  }
-
-  const remove = (id: string | number) => {
-    const index = toasts.findIndex((t) => t.id === id)
-    if (index !== -1) {
-      toasts.splice(index, 1)
-    }
-  }
-
-  return {
-    toasts,
-    add,
-    remove
-  }
-}