@rimelight/ui 0.0.42 → 0.0.44

package/src/resolver.ts

@@ -0,0 +1,132 @@
+import uiConfig from "virtual:rimelight/ui"
+import type { ClassValue, ThemeConfig } from "./types"
+
+export function cx(...args: ClassValue[]): string {
+  let str = ""
+  for (let i = 0; i < args.length; i++) {
+    const val = args[i]
+    if (!val) continue
+    if (typeof val === "string" || typeof val === "number") {
+      str += (str ? " " : "") + val
+    } else if (Array.isArray(val)) {
+      if (val.length) {
+        const inner = cx(...val)
+        if (inner) str += (str ? " " : "") + inner
+      }
+    } else if (typeof val === "object") {
+      for (const k in val) {
+        if (val[k]) str += (str ? " " : "") + k
+      }
+    }
+  }
+  return str
+}
+
+export function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>) {
+  const custom = uiConfig?.components?.themes?.[name]
+  const slots = (custom?.slots ?? themeConfig.slots ?? ["root" as S]) as readonly S[]
+  const rootSlot = (slots.includes("root" as S) ? "root" : slots[0] || "root") as S
+
+  if (uiConfig?.unstyled) {
+    return (props: any = {}): Record<S, string> => {
+      const res = {} as Record<S, string>
+      const hasClass = props.class || props.className
+      for (let i = 0; i < slots.length; i++) {
+        const slot = slots[i]!
+        const base = slot === rootSlot && hasClass ? cx(props.class, props.className) : ""
+        const fn = props.ui?.[slot]
+        res[slot] = typeof fn === "function" ? fn(base) : cx(base, fn)
+      }
+      return res
+    }
+  }
+
+  const autoColor = (custom?.variants ?? themeConfig.variants)?.color === "auto"
+  const defaultVariants = { ...themeConfig.defaultVariants, ...custom?.defaultVariants }
+  const compoundVariants = [
+    ...(themeConfig.compoundVariants ?? []),
+    ...(custom?.compoundVariants ?? [])
+  ]
+
+  const compiledCV = compoundVariants.map((cv) => {
+    const { classNames, class: cls, ...rest } = cv
+    const matchers: Array<{ key: string; exp: any }> = []
+    for (const k in rest) {
+      matchers.push({ key: k, exp: rest[k] })
+    }
+    return { matchers, cls: classNames || cls }
+  })
+
+  const baseMap: Record<string, string> = {}
+  for (let i = 0; i < slots.length; i++) {
+    const s = slots[i]!
+    baseMap[s] = cx(themeConfig.base?.[s], custom?.base?.[s])
+  }
+
+  const variants: Record<string, Record<string, any>> = { ...themeConfig.variants }
+  if (custom?.variants) {
+    for (const k in custom.variants) variants[k] = { ...variants[k], ...custom.variants[k] }
+  }
+
+  const variantKeys = Object.keys(variants).filter((k) => !(k === "color" && autoColor))
+
+  return (props: any = {}): Record<S, string> => {
+    const res = {} as Record<S, string>
+    for (let i = 0; i < slots.length; i++) {
+      res[slots[i]!] = baseMap[slots[i]!] || ""
+    }
+
+    const values = { ...defaultVariants, ...props }
+    const color = autoColor ? (props.color ?? defaultVariants.color) : undefined
+
+    for (let k = 0; k < variantKeys.length; k++) {
+      const key = variantKeys[k]!
+      const selected = values[key]
+      if (selected != null && variants[key]?.[selected]) {
+        const layer = variants[key][selected]
+        for (let i = 0; i < slots.length; i++) {
+          const s = slots[i]!
+          const l = layer[s]
+          if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l)
+        }
+      }
+    }
+
+    if (compiledCV.length) {
+      for (let c = 0; c < compiledCV.length; c++) {
+        const { matchers, cls } = compiledCV[c]!
+        if (!cls) continue
+        let match = true
+        for (let m = 0; m < matchers.length; m++) {
+          const { key, exp } = matchers[m]!
+          const actual = values[key]
+          if (Array.isArray(exp) ? !exp.includes(actual) : actual !== exp) {
+            match = false
+            break
+          }
+        }
+        if (match) {
+          for (let i = 0; i < slots.length; i++) {
+            const s = slots[i]!
+            const l = cls[s]
+            if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l)
+          }
+        }
+      }
+    }
+
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i]!
+      let slotClass = res[slot]!
+      if (slot === rootSlot) {
+        if (color) slotClass = slotClass ? `${slotClass} rl-color-${color}` : `rl-color-${color}`
+        const extra = cx(props.class, props.className)
+        if (extra) slotClass = slotClass ? `${slotClass} ${extra}` : extra
+      }
+      const override = props.ui?.[slot]
+      res[slot] = typeof override === "function" ? override(slotClass) : cx(slotClass, override)
+    }
+
+    return res
+  }
+}

package/src/shortcuts.ts

@@ -0,0 +1,191 @@
+import { atom } from "./stores"
+
+export type Handler = (e: KeyboardEvent) => void
+export interface ShortcutConfig {
+  handler: Handler
+  usingInput?: boolean | string | undefined
+  label?: string | undefined
+  description?: string | undefined
+  category?: string | undefined
+  order?: number | undefined
+}
+export type ShortcutsConfig = Record<string, ShortcutConfig | Handler | false | null | undefined>
+export interface ShortcutsOptions {
+  chainDelay?: number | undefined
+}
+export interface RegisteredShortcut {
+  id: string
+  keys: string[]
+  label?: string | undefined
+  description?: string | undefined
+  category?: string | undefined
+  order?: number | undefined
+}
+
+interface Shortcut {
+  handler: Handler
+  usingInput?: boolean | string | undefined
+}
+
+const isMac = typeof navigator !== "undefined" && /Mac|iP/.test(navigator.userAgent),
+  KEYS: Record<string, string> = {
+    ctrl: "Ctrl",
+    meta: isMac ? "⌘" : "Ctrl",
+    alt: isMac ? "⌥" : "Alt",
+    shift: isMac ? "⇧" : "Shift",
+    enter: "↵",
+    delete: "⌦",
+    backspace: "⌫",
+    escape: "Esc",
+    tab: "⇥",
+    space: "Space",
+    arrowup: "↑",
+    arrowdown: "↓",
+    arrowleft: "←",
+    arrowright: "→"
+  }
+
+const MODS: Record<string, string> = {
+  cmd: "meta",
+  command: "meta",
+  control: "ctrl",
+  opt: "alt",
+  option: "alt"
+}
+
+export const normalizeModifier = (m: string) => MODS[m.toLowerCase()] || m.toLowerCase()
+
+export const formatShortcutKeys = (k: string): string[] =>
+  k.split(/[_-]/).map((p) => {
+    const norm = normalizeModifier(p)
+    return KEYS[norm] ?? (p ? p[0]!.toUpperCase() + p.slice(1) : "")
+  })
+
+export const activeShortcutsStore = atom<RegisteredShortcut[]>([])
+
+const isUsingInput = (el: Element | null): boolean | string => {
+  const target = (el?.shadowRoot?.activeElement || el) as HTMLElement | null
+  return target && (/INPUT|TEXTAREA|SELECT/.test(target.tagName) || target.isContentEditable)
+    ? target.getAttribute("name") || true
+    : false
+}
+
+const isEnabled = (s: Shortcut, input: boolean | string) =>
+  s.usingInput === true || (s.usingInput ? input === s.usingInput : !input)
+
+const normalizeCombo = (combo: string) => {
+  const parts = combo.toLowerCase().split("_")
+  let meta = ""
+  let ctrl = ""
+  let alt = ""
+  let shift = ""
+  for (let i = 0; i < parts.length - 1; i++) {
+    const m = MODS[parts[i]!] || parts[i]!
+    if (m === "meta") meta = "meta_"
+    else if (m === "ctrl") ctrl = "ctrl_"
+    else if (m === "alt") alt = "alt_"
+    else if (m === "shift") shift = "shift_"
+  }
+  return `${meta}${ctrl}${alt}${shift}${parts[parts.length - 1] || ""}`
+}
+
+export function defineShortcuts(
+  config: ShortcutsConfig,
+  options: ShortcutsOptions = {}
+): () => void {
+  if (typeof window === "undefined") return () => {}
+
+  const map = new Map<string, Shortcut>()
+  const reg: RegisteredShortcut[] = []
+
+  for (const [k, cfg] of Object.entries(config)) {
+    if (!cfg) continue
+    const obj = typeof cfg === "object" ? cfg : null
+    const handler = obj ? obj.handler : cfg
+    if (typeof handler !== "function") continue
+
+    const key =
+      k.includes("-") && k !== "-" && !k.includes("_") ? k.toLowerCase() : normalizeCombo(k)
+    map.set(key, { handler, usingInput: obj?.usingInput })
+
+    if (obj?.label || obj?.description) {
+      reg.push({
+        id: `${obj.category || "system"}-${k}`,
+        keys: formatShortcutKeys(k),
+        category: obj.category || "system",
+        label: obj.label,
+        description: obj.description,
+        order: obj.order
+      })
+    }
+  }
+
+  const ids = new Set(reg.map((i) => i.id))
+  if (ids.size) {
+    activeShortcutsStore.set(
+      activeShortcutsStore
+        .get()
+        .filter((i) => !ids.has(i.id))
+        .concat(reg)
+    )
+  }
+
+  const buffer: string[] = []
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (!e.key || e.isComposing) return
+    const key = e.key === " " ? "space" : e.key.toLowerCase()
+    const codeKey = e.code
+      ? e.code
+          .replace(/^Key/, "")
+          .replace(/^Digit/, "")
+          .toLowerCase()
+      : ""
+    const input = isUsingInput(typeof document !== "undefined" ? document.activeElement : null)
+
+    buffer.push(key)
+    if (buffer.length > 2) buffer.shift()
+    clearTimeout(timer)
+
+    // Chained sequence check (e.g. g-d)
+    if (buffer.length === 2) {
+      const chainedMatch = map.get(buffer.join("-"))
+      if (chainedMatch && isEnabled(chainedMatch, input)) {
+        e.preventDefault()
+        chainedMatch.handler(e)
+        buffer.length = 0
+        return
+      }
+    }
+
+    // Unified event normalization
+    const keysToCheck = Array.from(new Set([key, codeKey].filter(Boolean)))
+    for (const k of keysToCheck) {
+      const sig = `${e.metaKey ? "meta_" : ""}${e.ctrlKey ? "ctrl_" : ""}${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`
+      const primarySig =
+        !isMac && e.ctrlKey && !e.metaKey
+          ? `meta_${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`
+          : sig
+
+      const match = map.get(sig) || map.get(primarySig) || map.get(k)
+      if (match && isEnabled(match, input)) {
+        e.preventDefault()
+        match.handler(e)
+        buffer.length = 0
+        return
+      }
+    }
+
+    timer = setTimeout(() => void (buffer.length = 0), options.chainDelay ?? 800)
+  }
+
+  window.addEventListener("keydown", onKeyDown)
+  return () => {
+    window.removeEventListener("keydown", onKeyDown)
+    clearTimeout(timer)
+    if (ids.size) {
+      activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)))
+    }
+  }
+}

package/src/stores.ts

@@ -0,0 +1,22 @@
+export interface Atom<T> {
+  get: () => T
+  set: (next: T) => void
+  subscribe: (fn: (val: T) => void) => () => void
+}
+
+export function atom<T>(initial: T): Atom<T> {
+  let val = initial
+  const subs = new Set<(v: T) => void>()
+  return {
+    get: () => val,
+    set: (next: T) => {
+      val = next
+      subs.forEach((fn) => fn(val))
+    },
+    subscribe: (fn: (v: T) => void) => {
+      subs.add(fn)
+      fn(val)
+      return () => subs.delete(fn)
+    }
+  }
+}

package/src/types.ts

@@ -0,0 +1,75 @@
+import type { UserConfig } from "unocss"
+import type { RimelightIcons } from "./icons"
+import type { PALETTES } from "./preset"
+
+export type Theme = "light" | "dark"
+export type BuiltinThemeColor = keyof typeof PALETTES
+export type ThemeColor = BuiltinThemeColor | (string & {})
+
+export type ClassValue =
+  | string
+  | number
+  | boolean
+  | undefined
+  | null
+  | { [key: string]: any }
+  | ClassValue[]
+
+export interface ThemeConfig<S extends string = string> {
+  slots?: readonly S[] | S[]
+  base?: Partial<Record<S, ClassValue>>
+  variants?: Record<string, any>
+  compoundVariants?: Array<
+    Record<string, any> & {
+      classNames?: Partial<Record<S, ClassValue>>
+      class?: Partial<Record<S, ClassValue>>
+    }
+  >
+  defaultVariants?: Record<string, any>
+}
+
+export type ColorModeInput =
+  | [chroma: number, hue: number]
+  | readonly [chroma: number, hue: number]
+  | Record<string, string>
+  | { light?: Record<string, string>; dark?: Record<string, string> }
+
+export interface PresetOptions {
+  /**
+   * Custom colors.
+   */
+  colors?: Record<string, ColorModeInput>
+  /**
+   * Global icon overrides mapping icon names to class names (e.g. `i-lucide-x`) or raw SVG strings.
+   */
+  icons?: RimelightIcons
+  /**
+   * Configure which built-in UnoCSS presets are enabled/disabled.
+   */
+  presets?: { wind?: boolean; typography?: boolean; icons?: boolean }
+}
+
+export interface UIConfig extends PresetOptions {
+  /**
+   * Whether to strip default theme classes from all components.
+   */
+  unstyled?: boolean
+  /**
+   * Configuration for keyboard shortcuts.
+   */
+  shortcuts?: { categories?: Record<string, { label: string }> }
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<string, string | Record<string, string | undefined>>
+  /**
+   * Global component configuration overrides.
+   */
+  components?: {
+    themes?: Record<string, ThemeConfig<string>>
+  }
+  /**
+   * Custom UnoCSS configuration overrides.
+   */
+  unocss?: UserConfig
+}

package/src/virtual.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:rimelight/ui" {
+  import type { UIConfig } from "./types"
+  export default {} as UIConfig
+}