@rimelight/ui 0.0.46 → 0.0.48

package/src/components/scroll-area/RLSScrollArea.tsx

@@ -0,0 +1,210 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ScrollAreaProps } from "./scroll-area"
+import { scrollAreaTheme } from "./scroll-area.theme"
+
+export interface RLSScrollAreaProps extends ScrollAreaProps {
+  children?: JSX.Element
+}
+
+const RLSScrollArea: Component<RLSScrollAreaProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "orientation",
+    "scrollHideDelay",
+    "height",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const orientation = () => props.orientation ?? "vertical"
+  const hideDelay = () => props.scrollHideDelay ?? 600
+
+  let viewportRef: HTMLDivElement | null = null
+  let vBarRef: HTMLDivElement | null = null
+  let hBarRef: HTMLDivElement | null = null
+  let vThumbRef: HTMLDivElement | null = null
+  let hThumbRef: HTMLDivElement | null = null
+
+  const [barsVisible, setBarsVisible] = createSignal(false)
+  let hideTimer: ReturnType<typeof setTimeout> | undefined
+
+  const showBars = () => {
+    setBarsVisible(true)
+  }
+
+  const hideBars = () => {
+    if (hideTimer) clearTimeout(hideTimer)
+    hideTimer = setTimeout(() => {
+      setBarsVisible(false)
+    }, hideDelay())
+  }
+
+  const updateThumbs = () => {
+    const vp = viewportRef
+    if (!vp) return
+
+    if (vThumbRef && vBarRef) {
+      const ratio = vp.clientHeight / vp.scrollHeight
+      const thumbH = Math.max(ratio * vBarRef.clientHeight, 20)
+      const thumbTop = (vp.scrollTop / vp.scrollHeight) * vBarRef.clientHeight
+      vThumbRef.style.height = `${thumbH}px`
+      vThumbRef.style.transform = `translateY(${thumbTop}px)`
+    }
+
+    if (hThumbRef && hBarRef) {
+      const ratio = vp.clientWidth / vp.scrollWidth
+      const thumbW = Math.max(ratio * hBarRef.clientWidth, 20)
+      const thumbLeft = (vp.scrollLeft / vp.scrollWidth) * hBarRef.clientWidth
+      hThumbRef.style.width = `${thumbW}px`
+      hThumbRef.style.transform = `translateX(${thumbLeft}px)`
+    }
+  }
+
+  const handleScroll = () => {
+    if (hideTimer) clearTimeout(hideTimer)
+    showBars()
+    updateThumbs()
+    hideBars()
+  }
+
+  const setupDraggable = (
+    thumb: HTMLDivElement | null,
+    scrollProp: "scrollTop" | "scrollLeft",
+    clientProp: "clientY" | "clientX",
+    sizeProp: "scrollHeight" | "scrollWidth",
+    clientSizeProp: "clientHeight" | "clientWidth"
+  ) => {
+    if (!thumb) return () => {}
+    let startPos = 0
+    let startScroll = 0
+
+    const onMouseDown = (e: MouseEvent) => {
+      const vp = viewportRef
+      if (!vp) return
+      e.preventDefault()
+      startPos = e[clientProp]
+      startScroll = vp[scrollProp]
+
+      const onMouseMove = (ev: MouseEvent) => {
+        const vpCurrent = viewportRef
+        if (!vpCurrent) return
+        const delta = ev[clientProp] - startPos
+        const ratio = vpCurrent[sizeProp] / vpCurrent[clientSizeProp]
+        vpCurrent[scrollProp] = startScroll + delta * ratio
+      }
+
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove)
+        document.removeEventListener("mouseup", onMouseUp)
+      }
+
+      document.addEventListener("mousemove", onMouseMove)
+      document.addEventListener("mouseup", onMouseUp)
+    }
+
+    thumb.addEventListener("mousedown", onMouseDown)
+    return () => thumb.removeEventListener("mousedown", onMouseDown)
+  }
+
+  onMount(() => {
+    updateThumbs()
+    const cleanV = setupDraggable(vThumbRef, "scrollTop", "clientY", "scrollHeight", "clientHeight")
+    const cleanH = setupDraggable(hThumbRef, "scrollLeft", "clientX", "scrollWidth", "clientWidth")
+
+    onCleanup(() => {
+      if (hideTimer) clearTimeout(hideTimer)
+      cleanV()
+      cleanH()
+    })
+  })
+
+  createEffect(() => {
+    void props.children
+    requestAnimationFrame(() => updateThumbs())
+  })
+
+  const resolvedClasses = createMemo(() =>
+    scrollAreaTheme({
+      orientation: orientation(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const heightStyle = () =>
+    props.height
+      ? typeof props.height === "number"
+        ? `${props.height}px`
+        : props.height
+      : undefined
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-scroll-area
+      data-orientation={orientation()}
+      data-hide-delay={hideDelay()}
+      style={{ height: heightStyle() }}
+      {...rest}
+    >
+      <div
+        ref={(el) => (viewportRef = el)}
+        class={resolvedClasses().viewport}
+        data-slot="viewport"
+        data-scroll-viewport
+        onScroll={handleScroll}
+      >
+        {props.children}
+      </div>
+
+      <Show when={orientation() === "vertical" || orientation() === "both"}>
+        <div
+          ref={(el) => (vBarRef = el)}
+          class={`${resolvedClasses().scrollbar} transition-opacity ${
+            barsVisible() ? "opacity-100" : "opacity-0"
+          }`}
+          data-slot="scrollbar"
+          data-scroll-bar="vertical"
+          aria-hidden="true"
+        >
+          <div
+            ref={(el) => (vThumbRef = el)}
+            class={resolvedClasses().thumb}
+            data-scroll-thumb="vertical"
+          />
+        </div>
+      </Show>
+
+      <Show when={orientation() === "horizontal" || orientation() === "both"}>
+        <div
+          ref={(el) => (hBarRef = el)}
+          class={`absolute bottom-0 left-0 right-0 h-2.5 flex-row flex p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10 transition-opacity ${
+            barsVisible() ? "opacity-100" : "opacity-0"
+          }`}
+          data-slot="scrollbar"
+          data-scroll-bar="horizontal"
+          aria-hidden="true"
+        >
+          <div
+            ref={(el) => (hThumbRef = el)}
+            class={resolvedClasses().thumb}
+            data-scroll-thumb="horizontal"
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSScrollArea

package/src/components/scroll-to-top/RLAScrollToTop.astro

@@ -21,6 +21,7 @@ const classes = scrollToTopTheme(Astro.props)
 <rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} data-theme={theme} {...rest}>
   <div
     class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
+    data-slot="root"
   >
     <button
       type="button"
@@ -69,12 +70,12 @@ const classes = scrollToTopTheme(Astro.props)
       if (!button || !innerElement) return;
 
       const id = ++RLAScrollToTop.instanceCounter;
-      const threshold = Number(this.dataset.threshold) || 200;
-      const color = this.dataset.color || 'primary';
-      const progressWidth = Number(this.dataset.progressWidth) || 6;
+      const threshold = Number(this.dataset["threshold"]) || 200;
+      const color = this.dataset["color"] || 'primary';
+      const progressWidth = Number(this.dataset["progressWidth"]) || 6;
       const gaugeBorderWidth = progressWidth * 0.5;
 
-      innerElement.dataset.rlaInstance = String(id);
+      innerElement.dataset["rlaInstance"] = String(id);
 
       button.addEventListener('click', scrollToTop);
 

package/src/components/scroll-to-top/RLSScrollToTop.tsx

@@ -0,0 +1,145 @@
+import { createMemo, createSignal, splitProps, onMount, onCleanup, type Component } from "solid-js"
+import type { ScrollToTopProps } from "./scroll-to-top"
+import { scrollToTopTheme } from "./scroll-to-top.theme"
+import { trackScroll, scrollToTop } from "./scroll"
+
+export interface RLSScrollToTopProps extends ScrollToTopProps {}
+
+const SCROLL_TO_TOP_CSS = `
+.rla-scroll-to-top-inner {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-in-out;
+}
+.rla-scroll-to-top-inner.js-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.progress-circle-base {
+  position: relative;
+  transform: translateZ(0);
+}
+.gauge-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border-style: solid;
+}
+.gauge-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--gauge-color, var(--rl-primary-500)) 0deg,
+    var(--gauge-color, var(--rl-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    transparent calc(var(--gauge-progress, 0) * 3.6deg)
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 6px)),
+    #000 calc(100% - var(--gauge-stroke-width, 6px))
+  );
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 6px)),
+    #000 calc(100% - var(--gauge-stroke-width, 6px))
+  );
+}
+`
+
+const RLSScrollToTop: Component<RLSScrollToTopProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "color",
+    "progressWidth",
+    "duration",
+    "threshold",
+    "showProgress",
+    "theme",
+    "ui",
+    "class"
+  ])
+
+  const [isVisible, setIsVisible] = createSignal(false)
+  const [scrollPercentage, setScrollPercentage] = createSignal(0)
+
+  onMount(() => {
+    const unsubscribe = trackScroll({ threshold: props.threshold ?? 200 }, (state) => {
+      setIsVisible(state.isVisible)
+      setScrollPercentage(state.scrollPercentage)
+    })
+    onCleanup(unsubscribe)
+  })
+
+  const resolvedClasses = createMemo(() =>
+    scrollToTopTheme({
+      color: props.color ?? "primary",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const color = () => props.color ?? "primary"
+  const progressWidth = () => props.progressWidth ?? 6
+  const gaugeBorderWidth = () => progressWidth() * 0.5
+
+  const progressStyle = () =>
+    ({
+      "--gauge-stroke-width": `${gaugeBorderWidth()}px`,
+      "--gauge-color": `var(--rl-${color()}-500)`,
+      "--gauge-progress": String(scrollPercentage())
+    }) as Record<string, string>
+
+  const trackStyle = () =>
+    ({
+      "border-width": `${gaugeBorderWidth()}px`,
+      "border-color": `var(--rl-${color()}-900)`,
+      "background-color": "#000"
+    }) as Record<string, string>
+
+  return (
+    <div
+      class={`rla-scroll-to-top-inner scroll-to-top-inner fixed bottom-6 right-6 z-50 ${resolvedClasses().root} ${
+        isVisible() ? "js-visible" : ""
+      }`}
+      data-slot="root"
+      data-theme={props.theme}
+      {...rest}
+    >
+      <button
+        type="button"
+        class={resolvedClasses().button}
+        aria-label="Scroll to top"
+        data-scroll-to-top-button
+        onClick={scrollToTop}
+      >
+        <div class={resolvedClasses().progressBase}>
+          <div class="gauge-track" style={trackStyle()} />
+          {props.showProgress ? (
+            <div class="gauge-progress" data-gauge-progress style={progressStyle()} />
+          ) : null}
+          <div class={resolvedClasses().iconContainer}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class={resolvedClasses().icon}
+            >
+              <path d="m5 12 7-7 7 7" />
+              <path d="M12 19V5" />
+            </svg>
+          </div>
+        </div>
+      </button>
+      <style>{SCROLL_TO_TOP_CSS}</style>
+    </div>
+  )
+}
+
+export default RLSScrollToTop

package/src/components/search/RLASearch.astro

@@ -112,12 +112,12 @@ const emptyId = `search-empty-${uniqueId}`
 
     connectedCallback() {
       this.style.display = 'contents';
-      const triggerId = this.dataset.triggerId;
-      const modalId = this.dataset.modalId;
-      const inputId = this.dataset.inputId;
-      const resultsId = this.dataset.resultsId;
-      const emptyId = this.dataset.emptyId;
-      const endpoint = this.dataset.endpoint;
+      const triggerId = this.dataset["triggerId"];
+      const modalId = this.dataset["modalId"];
+      const inputId = this.dataset["inputId"];
+      const resultsId = this.dataset["resultsId"];
+      const emptyId = this.dataset["emptyId"];
+      const endpoint = this.dataset["endpoint"];
 
       const trigger = this.querySelector(`#${triggerId}`);
       const modal = this.querySelector(`#${modalId}`) as HTMLElement | null;

package/src/components/search/RLSSearch.tsx

@@ -0,0 +1,237 @@
+import {
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { SearchProps } from "./search"
+import { searchTheme } from "./search.theme"
+import RLSIcon from "../icon/RLSIcon"
+import RLSInput from "../input/RLSInput"
+import RLSKbd from "../kbd/RLSKbd"
+import RLSButton from "../button/RLSButton"
+import { defineShortcuts } from "../../shortcuts"
+
+export interface SearchResultItem {
+  title?: string
+  url?: string
+  sourceType?: string
+  snippet?: string
+  [key: string]: any
+}
+
+export interface RLSSearchProps extends SearchProps {
+  children?: JSX.Element
+  triggerSlot?: JSX.Element
+}
+
+const RLSSearch: Component<RLSSearchProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "endpoint",
+    "placeholder",
+    "messages",
+    "ui",
+    "class",
+    "children",
+    "triggerSlot"
+  ])
+
+  const endpoint = () => props.endpoint ?? "/api/search"
+  const searchPlaceholder = () =>
+    props.messages?.searchPlaceholder || props.placeholder || "Search..."
+  const noResultsLabel = () => props.messages?.noResultsLabel || "No results found"
+  const footerCloseHint = () => props.messages?.footerCloseHint || "Escape to close"
+  const footerBackendHint = () => props.messages?.footerBackendHint || "Postgres Full-Text Search"
+
+  const [isOpen, setIsOpen] = createSignal(false)
+  const [query, setQuery] = createSignal("")
+  const [results, setResults] = createSignal<SearchResultItem[]>([])
+  const [hasSearched, setHasSearched] = createSignal(false)
+  const [loading, setLoading] = createSignal(false)
+
+  let inputRef: HTMLInputElement | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+  const openModal = () => {
+    setIsOpen(true)
+    setTimeout(() => inputRef?.focus(), 50)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+    setQuery("")
+    setResults([])
+    setHasSearched(false)
+    if (debounceTimer) clearTimeout(debounceTimer)
+  }
+
+  onMount(() => {
+    const metaKCleanup = defineShortcuts({
+      meta_k: {
+        handler: () => openModal(),
+        label: "Open Search",
+        description: "Open the global site search modal",
+        category: "navigation"
+      }
+    })
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen()) {
+        closeModal()
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    onCleanup(() => {
+      metaKCleanup()
+      window.removeEventListener("keydown", onKeyDown)
+      if (debounceTimer) clearTimeout(debounceTimer)
+    })
+  })
+
+  const handleInput = (val: string) => {
+    setQuery(val)
+    if (debounceTimer) clearTimeout(debounceTimer)
+
+    const trimmed = val.trim()
+    if (!trimmed) {
+      setResults([])
+      setHasSearched(false)
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    debounceTimer = setTimeout(async () => {
+      try {
+        const res = await fetch(`${endpoint()}?q=${encodeURIComponent(trimmed)}`)
+        if (!res.ok) throw new Error(`HTTP status ${res.status}`)
+        const data = await res.json()
+        setResults(Array.isArray(data) ? data : [])
+        setHasSearched(true)
+      } catch (err) {
+        console.error("[RLSSearch] Search query failed:", err)
+        setResults([])
+        setHasSearched(true)
+      } finally {
+        setLoading(false)
+      }
+    }, 200)
+  }
+
+  const resolvedClasses = createMemo(() =>
+    searchTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={`${resolvedClasses().root} rla-search-wrapper`} data-slot="root" {...rest}>
+      {props.triggerSlot ? (
+        <div class="cursor-pointer" onClick={openModal}>
+          {props.triggerSlot}
+        </div>
+      ) : props.children ? (
+        <div class="cursor-pointer" onClick={openModal}>
+          {props.children}
+        </div>
+      ) : (
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          square
+          aria-label="Open Search"
+          onClick={openModal}
+        >
+          <RLSIcon name="i-rl-search" class="w-5 h-5" />
+        </RLSButton>
+      )}
+
+      <Show when={isOpen()}>
+        <div
+          class={resolvedClasses().modal}
+          style={{ display: "flex" }}
+          data-slot="modal"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) closeModal()
+          }}
+        >
+          <div class={resolvedClasses().dialog} data-slot="dialog">
+            <div class={resolvedClasses().header} data-slot="header">
+              <RLSInput
+                ref={(el) => (inputRef = el)}
+                variant="ghost"
+                type="text"
+                value={query()}
+                placeholder={searchPlaceholder()}
+                autocomplete="off"
+                onInput={(e) => handleInput(e.currentTarget.value)}
+                leading={<RLSIcon name="i-rl-search" class={resolvedClasses().headerIcon} />}
+                trailing={
+                  <div class="flex items-center gap-2">
+                    <RLSKbd size="sm">Esc</RLSKbd>
+                    <button
+                      type="button"
+                      class={resolvedClasses().close}
+                      aria-label="Close search"
+                      onClick={closeModal}
+                    >
+                      <RLSIcon name="i-rl-close" class={resolvedClasses().closeIcon} />
+                    </button>
+                  </div>
+                }
+                ui={{
+                  root: "relative flex items-center w-full",
+                  input:
+                    "pl-8 pr-20 py-1.5 text-base outline-none text-white placeholder-neutral-500",
+                  leading: "absolute left-0 text-neutral-400 flex items-center",
+                  trailing: "absolute right-0 flex items-center gap-2"
+                }}
+              />
+            </div>
+
+            <div class={resolvedClasses().results} data-slot="results">
+              <For each={results()}>
+                {(item) => (
+                  <a
+                    href={item.url || "#"}
+                    class={resolvedClasses().resultItem}
+                    onClick={closeModal}
+                  >
+                    <div class={resolvedClasses().resultHeader}>
+                      <span class={resolvedClasses().resultTitle}>{item.title || "Untitled"}</span>
+                      {item.sourceType && (
+                        <span class={resolvedClasses().resultBadge}>{item.sourceType}</span>
+                      )}
+                    </div>
+                    {item.snippet && <p class={resolvedClasses().resultSnippet}>{item.snippet}</p>}
+                  </a>
+                )}
+              </For>
+            </div>
+
+            <Show when={hasSearched() && results().length === 0 && !loading()}>
+              <div class={resolvedClasses().empty} style={{ display: "block" }} data-slot="empty">
+                {noResultsLabel()}
+              </div>
+            </Show>
+
+            <div class={resolvedClasses().footer} data-slot="footer">
+              <span>{footerCloseHint()}</span>
+              <span>{footerBackendHint()}</span>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSSearch