@rimelight/ui 0.0.36 → 0.0.38

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/resolveClasses.ts

@@ -1,16 +1,34 @@
 import { cx } from "css-variants"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+// Hoisted once at module load — getUIConfig() returns a static frozen object.
+const uiConfig = getUIConfig()
 
 export function resolveClasses<T extends (...args: never[]) => Record<string, string>>(
   themeFn: T,
   variants: Parameters<T>[0],
-  mergedUI: Record<string, string | undefined>,
+  mergedUI: Record<string, string | Function | undefined>,
   rootClass?: string
 ): Record<string, string> {
-  const resolved = themeFn(variants)
+  const isUnstyled = uiConfig?.unstyled === true
+
+  const resolved = isUnstyled ? {} : themeFn(variants)
   const result: Record<string, string> = {}
 
-  for (const [slot, value] of Object.entries(resolved)) {
-    result[slot] = cx(value, mergedUI[slot])
+  // Fill in slots from theme function or default to empty strings if unstyled
+  const slots = isUnstyled ? Object.keys(mergedUI) : Object.keys(resolved)
+  if (isUnstyled && rootClass && !slots.includes("root")) {
+    slots.push("root")
+  }
+
+  for (const slot of slots) {
+    const value = isUnstyled ? "" : (resolved[slot] ?? "")
+    const override = mergedUI[slot]
+    if (typeof override === "function") {
+      result[slot] = cx(override(value))
+    } else {
+      result[slot] = cx(value, override)
+    }
   }
 
   if (rootClass) {

package/src/utils/resolveTheme.ts

@@ -0,0 +1,13 @@
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+
+export function resolveTheme<T>(
+  themeDefault: T,
+  themeCreator?: (colors: readonly string[]) => T
+): T {
+  if (uiConfig.colors && themeCreator) {
+    return themeCreator(uiConfig.colors)
+  }
+  return themeDefault
+}

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/shortcuts.ts

@@ -49,8 +49,8 @@ const macOS =
 const kbdKeysMap: Record<string, string> = {
   meta: macOS ? "⌘" : "Ctrl",
   command: macOS ? "⌘" : "Ctrl",
-  ctrl: macOS ? "Ctrl" : "Ctrl",
-  control: macOS ? "Ctrl" : "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
   alt: macOS ? "⌥" : "Alt",
   option: macOS ? "⌥" : "Alt",
   shift: macOS ? "⇧" : "Shift",
@@ -68,8 +68,7 @@ const kbdKeysMap: Record<string, string> = {
 
 // Convert a combination string (e.g. meta_alt_t) into platform-specific readable key symbol arrays
 export function formatShortcutKeys(keyStr: string): string[] {
-  const separator = keyStr.includes("-") ? "-" : "_"
-  const parts = keyStr.split(separator)
+  const parts = keyStr.split("_")
   return parts.map((part) => {
     const lower = part.toLowerCase()
     if (kbdKeysMap[lower] !== undefined) {
@@ -85,30 +84,25 @@ export function formatShortcutKeys(keyStr: string): string[] {
 // Reactive store containing all currently registered shortcuts on the page
 export const activeShortcutsStore = atom<RegisteredShortcut[]>([])
 
+const specialKeysMap: Record<string, string> = {
+  space: "Space",
+  enter: "Enter",
+  escape: "Escape",
+  tab: "Tab",
+  backspace: "Backspace",
+  delete: "Delete",
+  arrowup: "ArrowUp",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight"
+}
+
 // Simple key to code conversion for layout/translation independence under Alt
 function convertKeyToCode(key: string): string {
-  if (/^[a-z]$/i.test(key)) {
-    return `Key${key.toUpperCase()}`
-  }
-  if (/^\d$/.test(key)) {
-    return `Digit${key}`
-  }
-  if (/^f\d+$/i.test(key)) {
-    return key.toUpperCase()
-  }
-  const specialKeys: Record<string, string> = {
-    space: "Space",
-    enter: "Enter",
-    escape: "Escape",
-    tab: "Tab",
-    backspace: "Backspace",
-    delete: "Delete",
-    arrowup: "ArrowUp",
-    arrowdown: "ArrowDown",
-    arrowleft: "ArrowLeft",
-    arrowright: "ArrowRight"
-  }
-  return specialKeys[key.toLowerCase()] || key
+  if (/^[a-z]$/i.test(key)) return `Key${key.toUpperCase()}`
+  if (/^\d$/.test(key)) return `Digit${key}`
+  if (/^f\d+$/i.test(key)) return key.toUpperCase()
+  return specialKeysMap[key.toLowerCase()] || key
 }
 
 // Input tag checking
@@ -127,25 +121,19 @@ function isUsingInput(activeElement: Element | null): boolean | string {
   return false
 }
 
-export function defineShortcuts(
-  config: ShortcutsConfig,
-  options: ShortcutsOptions = {}
-): () => void {
-  if (typeof window === "undefined") {
-    return () => {}
-  }
+interface ParsedShortcuts {
+  shortcuts: Shortcut[]
+  registered: RegisteredShortcut[]
+}
 
-  const chainDelay = options.chainDelay ?? 800
-  const chainedInputs: string[] = []
-  let debounceTimer: any = null
+const parseCache = new WeakMap<ShortcutsConfig, ParsedShortcuts>()
 
-  const clearChainedInput = () => {
-    chainedInputs.length = 0
-  }
+function parseShortcutConfig(config: ShortcutsConfig): ParsedShortcuts {
+  const cached = parseCache.get(config)
+  if (cached) return cached
 
-  // Pre-parse the shortcuts configuration
-  const parsedShortcuts: Shortcut[] = Object.entries(config)
-    .map(([key, shortcutConfig]) => {
+  const shortcuts: Shortcut[] = Object.entries(config)
+    .map(([key, shortcutConfig]): Shortcut | null => {
       if (!shortcutConfig) return null
 
       let handler: Handler
@@ -179,33 +167,22 @@ export function defineShortcuts(
         shiftKey = parts.includes("shift")
         altKey = parts.includes("alt") || parts.includes("option")
 
-        // Normalize Cmd/Ctrl for non-macOS
         if (!macOS && metaKey && !ctrlKey) {
           metaKey = false
           ctrlKey = true
         }
       }
 
-      return {
-        key: baseKey,
-        handler,
-        chained,
-        ctrlKey,
-        metaKey,
-        shiftKey,
-        altKey,
-        usingInput
-      } as Shortcut
+      return { key: baseKey, handler, chained, ctrlKey, metaKey, shiftKey, altKey, usingInput }
     })
-    .filter((item): item is Shortcut => item != null)
+    .filter((item): item is Shortcut => item !== null)
 
-  // Register documented shortcuts to the store
-  const itemsToRegister: RegisteredShortcut[] = Object.entries(config).flatMap(
+  const registered: RegisteredShortcut[] = Object.entries(config).flatMap(
     ([key, shortcutConfig]) => {
       if (!shortcutConfig || typeof shortcutConfig !== "object") return []
 
       const { label, description, category, order } = shortcutConfig
-      if (!label && !description) return [] // only register documented shortcuts
+      if (!label && !description) return []
 
       const item: RegisteredShortcut = {
         id: `${key}-${Math.random().toString(36).slice(2, 7)}`,
@@ -219,6 +196,29 @@ export function defineShortcuts(
     }
   )
 
+  const result = { shortcuts, registered }
+  parseCache.set(config, result)
+  return result
+}
+
+export function defineShortcuts(
+  config: ShortcutsConfig,
+  options: ShortcutsOptions = {}
+): () => void {
+  if (typeof window === "undefined") {
+    return () => {}
+  }
+
+  const { shortcuts: parsedShortcuts, registered: itemsToRegister } = parseShortcutConfig(config)
+
+  const chainDelay = options.chainDelay ?? 800
+  const chainedInputs: string[] = []
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+  const clearChainedInput = () => {
+    chainedInputs.length = 0
+  }
+
   if (itemsToRegister.length > 0) {
     activeShortcutsStore.set([...activeShortcutsStore.get(), ...itemsToRegister])
   }

package/src/utils/toast.ts

@@ -0,0 +1,36 @@
+import { atom } from "nanostores"
+import type { ThemeColor } from "../types/component"
+
+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) return
+  if (target.callback) target.callback()
+  toastsStore.set(currentToasts.filter((t) => t.id !== id))
+}

package/src/utils/useUi.ts

@@ -1,19 +1,33 @@
-import defu from "defu"
+import { merge } from "./merge"
 import { getUIConfig } from "virtual:rimelight-ui"
-import type { DefaultUIConfig } from "../themes"
+
+const mergeCache = new WeakMap<object, Record<string, string | Function | undefined>>()
 
 export function useUi(
-  componentName: keyof DefaultUIConfig,
-  uiProp?: Record<string, string | undefined>
-): Record<string, string | undefined> {
+  componentName: string,
+  uiProp?: Record<string, string | Function | undefined>
+): Record<string, string | Function | undefined> {
   const globalConfig = getUIConfig()
-  const defaults = globalConfig[componentName] ?? {}
-  const merged = defu(uiProp ?? {}, defaults)
+  const defaults = globalConfig[componentName]
+
+  if (!defaults) return {}
+
+  if (!uiProp || Object.keys(uiProp).length === 0) {
+    return defaults
+  }
+
+  const cached = mergeCache.get(uiProp)
+  if (cached) return cached
+
+  const merged = merge(uiProp, defaults)
+  const result: Record<string, string | Function | undefined> = {}
+  for (const key of Object.keys(merged)) {
+    const value = merged[key]
+    if (typeof value === "string" || typeof value === "function") {
+      result[key] = value
+    }
+  }
 
-  return Object.fromEntries(
-    Object.entries(merged).map(([key, value]) => [
-      key,
-      typeof value === "string" ? value : undefined
-    ])
-  )
+  mergeCache.set(uiProp, result)
+  return result
 }

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>