@rimelight/ui 0.0.34 → 0.0.36

package/src/utils/shortcuts.ts

@@ -0,0 +1,322 @@
+import { atom } from "nanostores"
+
+export type Handler = (e: KeyboardEvent) => void
+
+export interface ShortcutConfig {
+  handler: Handler
+  usingInput?: boolean | string
+  label?: string
+  description?: string
+  category?: string
+  order?: number
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Handler | false | null | undefined
+}
+
+export interface ShortcutsOptions {
+  chainDelay?: number
+}
+
+interface Shortcut {
+  key: string
+  handler: Handler
+  chained: boolean
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+  altKey: boolean
+  usingInput?: boolean | string
+}
+
+export interface RegisteredShortcut {
+  id: string
+  keys: string[]
+  label?: string
+  description?: string
+  category?: string
+  order?: number
+}
+
+// OS detection
+const macOS =
+  typeof window !== "undefined" &&
+  typeof navigator !== "undefined" &&
+  /Macintosh;/.test(navigator.userAgent)
+
+// Modifiers map for human-readable display
+const kbdKeysMap: Record<string, string> = {
+  meta: macOS ? "⌘" : "Ctrl",
+  command: macOS ? "⌘" : "Ctrl",
+  ctrl: macOS ? "Ctrl" : "Ctrl",
+  control: macOS ? "Ctrl" : "Ctrl",
+  alt: macOS ? "⌥" : "Alt",
+  option: macOS ? "⌥" : "Alt",
+  shift: macOS ? "⇧" : "Shift",
+  enter: "↵",
+  delete: "⌦",
+  backspace: "⌫",
+  escape: "Esc",
+  tab: "⇥",
+  space: "Space",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→"
+}
+
+// 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)
+  return parts.map((part) => {
+    const lower = part.toLowerCase()
+    if (kbdKeysMap[lower] !== undefined) {
+      return kbdKeysMap[lower]
+    }
+    if (lower.length === 1) {
+      return lower.toUpperCase()
+    }
+    return part.charAt(0).toUpperCase() + part.slice(1)
+  })
+}
+
+// Reactive store containing all currently registered shortcuts on the page
+export const activeShortcutsStore = atom<RegisteredShortcut[]>([])
+
+// 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
+}
+
+// Input tag checking
+function isUsingInput(activeElement: Element | null): boolean | string {
+  if (!activeElement) return false
+  const tagName = activeElement.tagName
+  const contentEditable = activeElement.getAttribute("contenteditable")
+  const isInput =
+    tagName === "INPUT" ||
+    tagName === "TEXTAREA" ||
+    contentEditable === "true" ||
+    contentEditable === "plaintext-only"
+  if (isInput) {
+    return activeElement.getAttribute("name") || true
+  }
+  return false
+}
+
+export function defineShortcuts(
+  config: ShortcutsConfig,
+  options: ShortcutsOptions = {}
+): () => void {
+  if (typeof window === "undefined") {
+    return () => {}
+  }
+
+  const chainDelay = options.chainDelay ?? 800
+  const chainedInputs: string[] = []
+  let debounceTimer: any = null
+
+  const clearChainedInput = () => {
+    chainedInputs.length = 0
+  }
+
+  // Pre-parse the shortcuts configuration
+  const parsedShortcuts: Shortcut[] = Object.entries(config)
+    .map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) return null
+
+      let handler: Handler
+      let usingInput: boolean | string = false
+
+      if (typeof shortcutConfig === "function") {
+        handler = shortcutConfig
+      } else {
+        handler = shortcutConfig.handler
+        usingInput = shortcutConfig.usingInput ?? false
+      }
+
+      if (!handler) return null
+
+      const chained = key.includes("-") && key !== "-" && !key.includes("_")
+      let baseKey = ""
+      let ctrlKey = false
+      let metaKey = false
+      let shiftKey = false
+      let altKey = false
+
+      if (chained) {
+        baseKey = key.toLowerCase()
+      } else {
+        const parts = key.toLowerCase().split("_")
+        baseKey = parts
+          .filter((p) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(p))
+          .join("_")
+        ctrlKey = parts.includes("ctrl")
+        metaKey = parts.includes("meta") || parts.includes("command")
+        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
+    })
+    .filter((item): item is Shortcut => item != null)
+
+  // Register documented shortcuts to the store
+  const itemsToRegister: 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
+
+      const item: RegisteredShortcut = {
+        id: `${key}-${Math.random().toString(36).slice(2, 7)}`,
+        keys: formatShortcutKeys(key),
+        category: category || "system"
+      }
+      if (label) item.label = label
+      if (description) item.description = description
+      if (order !== undefined) item.order = order
+      return [item]
+    }
+  )
+
+  if (itemsToRegister.length > 0) {
+    activeShortcutsStore.set([...activeShortcutsStore.get(), ...itemsToRegister])
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (!e.key) return
+
+    const activeEl = document.activeElement
+    const currentlyUsingInput = isUsingInput(activeEl)
+
+    // Helper to check if a shortcut is enabled given current focus state
+    const isShortcutEnabled = (shortcut: Shortcut) => {
+      if (!shortcut.usingInput) {
+        return !currentlyUsingInput
+      }
+      if (typeof shortcut.usingInput === "string") {
+        return currentlyUsingInput === shortcut.usingInput
+      }
+      return true
+    }
+
+    // Handle chained shortcuts
+    chainedInputs.push(e.key.toLowerCase())
+    clearTimeout(debounceTimer)
+
+    if (chainedInputs.length >= 2) {
+      const chainedKey = chainedInputs.slice(-2).join("-")
+      const matchedChained = parsedShortcuts.find((s) => s.chained && s.key === chainedKey)
+      if (matchedChained && isShortcutEnabled(matchedChained)) {
+        e.preventDefault()
+        matchedChained.handler(e)
+        clearChainedInput()
+        return
+      }
+    }
+
+    // Handle standard shortcuts
+    for (const shortcut of parsedShortcuts) {
+      if (shortcut.chained) continue
+
+      if (e.ctrlKey !== shortcut.ctrlKey) continue
+      if (e.metaKey !== shortcut.metaKey) continue
+      if (e.altKey !== shortcut.altKey) continue
+
+      // Match by code when Alt modifier is active to avoid key translation issues
+      const useCode = shortcut.altKey && e.altKey
+      if (useCode) {
+        if (e.code !== convertKeyToCode(shortcut.key)) continue
+      } else {
+        const pressedKey = e.key.toLowerCase()
+        if (pressedKey !== shortcut.key) continue
+      }
+
+      // Shift modifier check:
+      // If the shortcut explicitly specifies shiftKey: true, then e.shiftKey must be true.
+      // If the shortcut does NOT specify shiftKey: true, but e.shiftKey is true:
+      // - If the base key is a letter (e.g. 'k'), then we do NOT match (because it's Shift+K, not K).
+      // - If the base key is a shiftable control key (like 'arrowleft'), we do NOT match.
+      // - For other keys (like '?', '/', etc.), we allow it to match even if e.shiftKey is true.
+      const alphabetKey = /^[a-z]$/i.test(shortcut.key)
+      const shiftableKeys = [
+        "arrowleft",
+        "arrowright",
+        "arrowup",
+        "arrowdown",
+        "tab",
+        "escape",
+        "enter",
+        "backspace"
+      ]
+      const shiftableKey = shiftableKeys.includes(shortcut.key)
+
+      if (shortcut.shiftKey && !e.shiftKey) continue
+      if (!shortcut.shiftKey && e.shiftKey && (alphabetKey || shiftableKey)) continue
+
+      if (isShortcutEnabled(shortcut)) {
+        e.preventDefault()
+        shortcut.handler(e)
+        clearChainedInput()
+        return
+      }
+    }
+
+    debounceTimer = setTimeout(clearChainedInput, chainDelay)
+  }
+
+  window.addEventListener("keydown", onKeyDown)
+
+  return () => {
+    window.removeEventListener("keydown", onKeyDown)
+    clearTimeout(debounceTimer)
+
+    // Unregister items from the active store
+    if (itemsToRegister.length > 0) {
+      const idsToRemove = new Set(itemsToRegister.map((item) => item.id))
+      activeShortcutsStore.set(
+        activeShortcutsStore.get().filter((item) => !idsToRemove.has(item.id))
+      )
+    }
+  }
+}

package/src/components/TableOfContents.astro

@@ -1,107 +0,0 @@
----
-export interface TableOfContentsHeading {
-  depth: number;
-  slug: string;
-  text: string;
-}
-
-export interface TableOfContentsConfig {
-  minHeadingLevel?: number;
-  maxHeadingLevel?: number;
-}
-
-export interface TableOfContentsProps {
-  headings: TableOfContentsHeading[];
-  /** false = hide entirely, object = heading level bounds */
-  tableOfContents?: false | TableOfContentsConfig;
-  /** @deprecated use tableOfContents.maxHeadingLevel instead */
-  levels?: 1 | 2 | 3;
-}
-
-type Props = TableOfContentsProps;
-
-const { headings, tableOfContents, levels = 2 } = Astro.props as Props;
-
-if (tableOfContents === false) {
-  // Render nothing — parent should also skip rendering this component,
-  // but guard here as a safety net.
-}
-
-const minLevel = (tableOfContents !== false && tableOfContents?.minHeadingLevel) ?? 2;
-const maxLevel = (tableOfContents !== false && tableOfContents?.maxHeadingLevel) ?? levels;
-
-const filteredHeadings = tableOfContents !== false
-  ? headings.filter(h => h.depth >= minLevel && h.depth <= maxLevel)
-  : [];
----
-
-{tableOfContents !== false && filteredHeadings.length > 0 && (
-  <div class="border-border rounded-xs border p-3xs text-sm leading-tight">
-    <h4 class="text-xl font-medium">On this page</h4>
-    <ul class="mt-2xl flex flex-col gap-3xs">
-      {filteredHeadings.map(heading => (
-        <li
-          class:list={{
-            "pl-3xs": heading.depth === 2,
-            "pl-6": heading.depth === 3,
-            "pl-9": heading.depth >= 4
-          }}
-        >
-          <a
-            href={`#${heading.slug}`}
-            class="toc-link transition hover:text-primary-accent"
-          >
-            {heading.text}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </div>
-)}
-
-<style>
-  .toc-current {
-    color: var(--primary);
-    font-weight: 500;
-  }
-</style>
-
-<script>
-  let wrappingElement: Element | null;
-  let observeHeaderTags: IntersectionObserver;
-  let allHeaderTags: NodeListOf<Element>;
-
-  function setCurrent(e: IntersectionObserverEntry[]) {
-    const allSectionLinks = document.querySelectorAll(".toc-link");
-    e.map(i => {
-      if (i.isIntersecting === true) {
-        allSectionLinks.forEach(link => link.classList.remove("toc-current"));
-        const targetLink = document.querySelector(`a[href="#${i.target.id}"].toc-link`);
-        if (targetLink) targetLink.classList.add("toc-current");
-      }
-    });
-  }
-
-  function initTOC() {
-    wrappingElement = document.querySelector(".markdown-content");
-    if (wrappingElement !== null) {
-      allHeaderTags = wrappingElement.querySelectorAll(":scope > h1, :scope > h2, :scope > h3, :scope > h4");
-    }
-
-    const options: IntersectionObserverInit = {
-      root: null,
-      rootMargin: "0px 0px -50% 0px",
-      threshold: [1]
-    };
-
-    observeHeaderTags = new IntersectionObserver(setCurrent, options);
-    if (wrappingElement === null) return;
-    allHeaderTags.forEach(tag => {
-      tag.classList.add("scroll-mt-3xl");
-      observeHeaderTags.observe(tag);
-    });
-  }
-
-  initTOC();
-  document.addEventListener("astro:after-swap", initTOC);
-</script>

package/src/components/astro/RLAAlert.astro

@@ -1,93 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AlertProps } from "../../types"
-import alertThemeDefault, { createAlertTheme } from "../../themes/alert.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAAvatar from "./RLAAvatar.astro"
-
-const uiConfig = getUIConfig()
-const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
-const alert = scv(alertTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  title,
-  description,
-  icon,
-  avatar,
-  actions,
-  close,
-  orientation = "horizontal",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AlertProps
-
-const isIcon = !!(icon || Astro.slots.has("icon"))
-
-const classes = resolveClasses(alert, {
-  variant,
-  color,
-  orientation,
-  title: !!(title || Astro.slots.has("title")),
-  theme
-}, useUi("alert", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role="alert"
-  {...rest}
->
-  <slot name="icon">
-    {icon && (
-      <span class={classes.icon} data-slot="icon">
-        <span class={cx(icon)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  <slot name="avatar" {...{ ui: classes }}>
-    {avatar && (
-      <RLAAvatar 
-        {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
-        size={classes.avatarSize as any} 
-        class={classes.avatar} 
-        data-slot="avatar" 
-      />
-    )}
-  </slot>
-
-  <div class={classes.wrapper} data-slot="wrapper">
-    {(title || Astro.slots.has("title")) && (
-      <h5 class={classes.title} data-slot="title">
-        {title}
-        <slot name="title" />
-      </h5>
-    )}
-
-    {(description || Astro.slots.has("default")) && (
-      <div class={classes.description} data-slot="description">
-        {description}
-        <slot />
-      </div>
-    )}
-
-    {(actions || Astro.slots.has("actions")) && (
-      <div class={classes.actions} data-slot="actions">
-        <slot name="actions" />
-      </div>
-    )}
-  </div>
-
-  <slot name="close" {...{ ui: classes }}>
-    {close && (
-      <button class={classes.close} data-slot="close">
-        <span class="i-lucide-x size-4" />
-      </button>
-    )}
-  </slot>
-</div>

package/src/components/astro/RLAChangelog.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChangelogProps } from "../../types"
-import changelogThemeDefault, { createChangelogTheme } from "../../themes/changelog.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const changelogTheme = uiConfig.colors ? createChangelogTheme() : changelogThemeDefault
-
-const changelog = scv(changelogTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChangelogProps
-
-const classes = resolveClasses(changelog, {}, useUi("changelog", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAMegamenu.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { MegamenuProps } from "../../types"
-import megamenuThemeDefault, { createMegamenuTheme } from "../../themes/megamenu.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const megamenuTheme = uiConfig.colors ? createMegamenuTheme() : megamenuThemeDefault
-
-const megamenu = scv(megamenuTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as MegamenuProps
-
-const classes = resolveClasses(megamenu, {}, useUi("megamenu", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/plugins/index.ts

@@ -1,2 +0,0 @@
-export { default as starlightDocsApi } from "./starlightDocsApi"
-export type { StarlightDocsApiConfig } from "./starlightDocsApi"

package/src/plugins/starlightDocsApi/components/ApiTheme.astro

@@ -1,27 +0,0 @@
----
-import type { ComponentMetaMap } from "../types"
-import { generateThemeCode } from "../utils"
-import meta from "virtual:rimelight-ui-docs-meta"
-
-interface Props {
-  component: string
-}
-
-const { component } = Astro.props
-
-const allMeta = meta as unknown as ComponentMetaMap
-const compMeta = allMeta[component]
-
-const theme = compMeta?.theme ?? null
-const themeCode = theme ? generateThemeCode(component, theme) : null
----
-
-{themeCode ? (
-  <div class="expressive-code">
-    <figure class="frame">
-      <pre class="language-ts overflow-x-auto"><code class="language-ts">{themeCode}</code></pre>
-    </figure>
-  </div>
-) : (
-  <p class="text-sm italic text-gray-500">No theme data available.</p>
-)}