@rimelight/ui 0.0.36 → 0.0.38

package/src/components/astro/RLARating.astro

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

package/src/components/astro/RLAScrollArea.astro

@@ -1,160 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollAreaProps } from "../../types"
-import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scroll-area.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const scrollAreaTheme = uiConfig.colors ? createScrollAreaTheme() : scrollAreaThemeDefault
-const scrollArea = scv(scrollAreaTheme)
-
-const {
-  orientation = "vertical",
-  scrollHideDelay = 600,
-  height,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ScrollAreaProps
-
-const classes = resolveClasses(scrollArea, {
-  orientation
-}, useUi("scrollArea", uiProp), className)
-
-const heightStyle = height
-  ? `height:${typeof height === "number" ? `${height}px` : height}`
-  : undefined
----
-
-<div
-  class={classes.root}
-  data-slot="root"
-  data-scroll-area
-  data-orientation={orientation}
-  data-hide-delay={scrollHideDelay}
-  style={heightStyle}
-  {...rest}
->
-  {/* Scrollable viewport */}
-  <div
-    class={classes.viewport}
-    data-slot="viewport"
-    data-scroll-viewport
-  >
-    <slot />
-  </div>
-
-  {/* Vertical scrollbar */}
-  {(orientation === "vertical" || orientation === "both") && (
-    <div
-      class={classes.scrollbar + " opacity-0 transition-opacity"}
-      data-slot="scrollbar"
-      data-scroll-bar="vertical"
-      aria-hidden="true"
-    >
-      <div class={classes.thumb} data-scroll-thumb="vertical" />
-    </div>
-  )}
-
-  {/* Horizontal scrollbar */}
-  {(orientation === "horizontal" || orientation === "both") && (
-    <div
-      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 opacity-0 transition-opacity"}
-      data-slot="scrollbar"
-      data-scroll-bar="horizontal"
-      aria-hidden="true"
-    >
-      <div class={classes.thumb} data-scroll-thumb="horizontal" />
-    </div>
-  )}
-</div>
-
-<script>
-  document.querySelectorAll("[data-scroll-area]").forEach(area => {
-    const viewport = area.querySelector("[data-scroll-viewport]") as HTMLElement | null;
-    if (!viewport) return;
-
-    const hideDelay = parseInt((area as HTMLElement).dataset.hideDelay ?? "600", 10);
-
-    const vBar = area.querySelector("[data-scroll-bar='vertical']") as HTMLElement | null;
-    const hBar = area.querySelector("[data-scroll-bar='horizontal']") as HTMLElement | null;
-    const vThumb = area.querySelector("[data-scroll-thumb='vertical']") as HTMLElement | null;
-    const hThumb = area.querySelector("[data-scroll-thumb='horizontal']") as HTMLElement | null;
-
-    let hideTimer: ReturnType<typeof setTimeout>;
-
-    const showBars = () => {
-      vBar?.classList.replace("opacity-0", "opacity-100");
-      hBar?.classList.replace("opacity-0", "opacity-100");
-    };
-
-    const hideBars = () => {
-      hideTimer = setTimeout(() => {
-        vBar?.classList.replace("opacity-100", "opacity-0");
-        hBar?.classList.replace("opacity-100", "opacity-0");
-      }, hideDelay);
-    };
-
-    const updateThumbs = () => {
-      if (vThumb) {
-        const ratio = viewport.clientHeight / viewport.scrollHeight;
-        const thumbH = Math.max(ratio * (vBar?.clientHeight ?? 0), 20);
-        const thumbTop = (viewport.scrollTop / viewport.scrollHeight) * (vBar?.clientHeight ?? 0);
-        vThumb.style.height = `${thumbH}px`;
-        vThumb.style.transform = `translateY(${thumbTop}px)`;
-      }
-      if (hThumb) {
-        const ratio = viewport.clientWidth / viewport.scrollWidth;
-        const thumbW = Math.max(ratio * (hBar?.clientWidth ?? 0), 20);
-        const thumbLeft = (viewport.scrollLeft / viewport.scrollWidth) * (hBar?.clientWidth ?? 0);
-        hThumb.style.width = `${thumbW}px`;
-        hThumb.style.transform = `translateX(${thumbLeft}px)`;
-      }
-    };
-
-    viewport.addEventListener("scroll", () => {
-      clearTimeout(hideTimer);
-      showBars();
-      updateThumbs();
-      hideBars();
-    });
-
-    // Drag-to-scroll for custom thumbs
-    const makeDraggable = (
-      thumb: HTMLElement | null,
-      scrollProp: "scrollTop" | "scrollLeft",
-      clientProp: "clientY" | "clientX",
-      sizeProp: "scrollHeight" | "scrollWidth",
-      clientSizeProp: "clientHeight" | "clientWidth"
-    ) => {
-      if (!thumb) return;
-      let startPos = 0;
-      let startScroll = 0;
-
-      thumb.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        startPos = (e as MouseEvent)[clientProp];
-        startScroll = viewport[scrollProp];
-
-        const onMove = (ev: MouseEvent) => {
-          const delta = ev[clientProp] - startPos;
-          const ratio = viewport[sizeProp] / viewport[clientSizeProp];
-          viewport[scrollProp] = startScroll + delta * ratio;
-        };
-        const onUp = () => {
-          document.removeEventListener("mousemove", onMove);
-          document.removeEventListener("mouseup", onUp);
-        };
-        document.addEventListener("mousemove", onMove);
-        document.addEventListener("mouseup", onUp);
-      });
-    };
-
-    makeDraggable(vThumb, "scrollTop", "clientY", "scrollHeight", "clientHeight");
-    makeDraggable(hThumb, "scrollLeft", "clientX", "scrollWidth", "clientWidth");
-
-    updateThumbs();
-  });
-</script>

package/src/components/astro/RLAScrollToTop.astro

@@ -1,200 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollToTopProps } from "../../types"
-import scrollToTopThemeDefault, { createScrollToTopTheme } from "../../themes/scroll-to-top.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const scrollToTopTheme = uiConfig.colors ? createScrollToTopTheme(uiConfig.colors) : scrollToTopThemeDefault
-
-const scrollToTop = scv(scrollToTopTheme)
-
-const {
-  color = "primary",
-  progressWidth = 6,
-  duration = 0.1,
-  threshold = 200,
-  showProgress = false,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ScrollToTopProps
-
-const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop", uiProp), className)
-
----
-
-<rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} {...rest}>
-  <div
-    class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
-  >
-    <button
-      type="button"
-      class={classes.button}
-      aria-label="Scroll to top"
-      data-scroll-to-top-button
-    >
-      <div class={classes.progressBase}>
-        <div class="gauge-track"></div>
-        {showProgress && (
-        <div class="gauge-progress" data-gauge-progress></div>
-        )}
-        <div class={classes.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={classes.icon}
-          >
-            <path d="m5 12 7-7 7 7" />
-            <path d="M12 19V5" />
-          </svg>
-        </div>
-      </div>
-    </button>
-  </div>
-</rla-scroll-to-top>
-
-<script>
-  function onClick() {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-
-  class RLAScrollToTop extends HTMLElement {
-    private cleanupScroll: (() => void) | null = null;
-    private styleEl: HTMLStyleElement | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const button = this.querySelector('[data-scroll-to-top-button]');
-      const innerElement = this.querySelector('.rla-scroll-to-top-inner') as HTMLElement | null;
-
-      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 gaugeBorderWidth = progressWidth * 0.5;
-      const nonce = (document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? '');
-
-      const getStyleEl = () => {
-        if (!this.styleEl) {
-          this.styleEl = document.createElement('style');
-          if (nonce) this.styleEl.setAttribute('nonce', nonce);
-          document.head.appendChild(this.styleEl);
-        }
-        return this.styleEl;
-      };
-
-      const updateStyles = () => {
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
-        const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
-
-        if (scrollTop > threshold) {
-          innerElement.classList.add('visible');
-        } else {
-          innerElement.classList.remove('visible');
-        }
-
-        getStyleEl().textContent = `
-          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-track {
-            border-width: ${gaugeBorderWidth}px;
-            border-color: var(--color-${color}-900);
-            background-color: #000;
-          }
-          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
-            --gauge-progress: ${scrollPercentage};
-            --gauge-stroke-width: ${gaugeBorderWidth}px;
-            --gauge-color: var(--color-${color}-500);
-          }
-        `;
-      };
-
-      innerElement.dataset.rlaInstance = String(id);
-
-      button.addEventListener('click', onClick);
-
-      window.addEventListener('scroll', updateStyles, { passive: true });
-      updateStyles();
-
-      this.cleanupScroll = () => {
-        button.removeEventListener('click', onClick);
-        window.removeEventListener('scroll', updateStyles);
-        if (this.styleEl) {
-          this.styleEl.remove();
-          this.styleEl = null;
-        }
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.cleanupScroll) {
-        this.cleanupScroll();
-        this.cleanupScroll = null;
-      }
-    }
-
-    static instanceCounter = 0;
-  }
-
-  if (!customElements.get('rla-scroll-to-top')) {
-    customElements.define('rla-scroll-to-top', RLAScrollToTop);
-  }
-</script>
-
-<style>
-  .rla-scroll-to-top-inner {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .rla-scroll-to-top-inner.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(--color-primary-500)) 0deg,
-      var(--gauge-color, var(--color-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))
-    );
-  }
-</style>

package/src/components/astro/RLASearch.astro

@@ -1,282 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SearchProps } from "../../types"
-import searchThemeDefault, { createSearchTheme } from "../../themes/search.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAInput from "./RLAInput.astro"
-import RLAKbd from "./RLAKbd.astro"
-import RLAButton from "./RLAButton.astro"
-
-const uiConfig = getUIConfig()
-const searchTheme = uiConfig.colors ? createSearchTheme() : searchThemeDefault
-
-const search = scv(searchTheme)
-
-const {
-  endpoint = "/api/search",
-  placeholder = "Search...",
-  messages = {},
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SearchProps
-
-const classes = resolveClasses(search, {}, useUi("search", uiProp), className)
-
-// Default messages
-const searchPlaceholder = messages.searchPlaceholder || placeholder
-const noResultsLabel = messages.noResultsLabel || "No results found"
-const footerCloseHint = messages.footerCloseHint || "Escape to close"
-const footerBackendHint = messages.footerBackendHint || "Postgres Full-Text Search"
-
-// Generate unique IDs for this instance to avoid collisions if multiple search bars exist
-const uniqueId = Math.random().toString(36).slice(2, 8)
-const triggerId = `search-trigger-${uniqueId}`
-const modalId = `search-modal-${uniqueId}`
-const inputId = `search-input-${uniqueId}`
-const resultsId = `search-results-${uniqueId}`
-const emptyId = `search-empty-${uniqueId}`
----
-
-<rla-search 
-  class:list={[classes.root, "rla-search-wrapper"]} 
-  data-slot="root" 
-  data-trigger-id={triggerId} 
-  data-modal-id={modalId} 
-  data-input-id={inputId} 
-  data-results-id={resultsId} 
-  data-empty-id={emptyId}
-  data-endpoint={endpoint}
-  {...rest}
->
-  {Astro.slots.has("trigger") ? (
-    <div id={triggerId} class="cursor-pointer">
-      <slot name="trigger" />
-    </div>
-  ) : (
-    <RLAButton
-      id={triggerId}
-      variant="ghost"
-      color="neutral"
-      square
-      aria-label="Open Search"
-    >
-      <span class="i-lucide-search w-5 h-5" />
-    </RLAButton>
-  )}
-
-  <!-- Search modal -->
-  <div id={modalId} class={classes.modal} data-slot="modal">
-    <div class={classes.dialog} data-slot="dialog">
-      <!-- Search header -->
-      <div class={classes.header} data-slot="header">
-        <RLAInput
-          variant="ghost"
-          type="text"
-          id={inputId}
-          placeholder={searchPlaceholder}
-          autocomplete="off"
-          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"
-          }}
-        >
-          <span slot="leading" class={classes.headerIcon} />
-          <div slot="trailing" class="flex items-center gap-2">
-            <RLAKbd size="sm">Esc</RLAKbd>
-            <button id={`${modalId}-close`} class={classes.close} aria-label="Close search">
-              <span class={classes.closeIcon}></span>
-            </button>
-          </div>
-        </RLAInput>
-      </div>
-
-      <!-- Results list -->
-      <div id={resultsId} class={classes.results} data-slot="results"></div>
-
-      <!-- Empty state -->
-      <div id={emptyId} class={classes.empty} data-slot="empty">
-        {noResultsLabel}
-      </div>
-
-      <!-- Footer -->
-      <div class={classes.footer} data-slot="footer">
-        <span>{footerCloseHint}</span>
-        <span>{footerBackendHint}</span>
-      </div>
-    </div>
-  </div>
-</rla-search>
-
-<script>
-  import { defineShortcuts } from "../../utils/shortcuts"
-
-  class RLASearch extends HTMLElement {
-    private searchCleanup: (() => void) | null = null;
-
-    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 trigger = this.querySelector(`#${triggerId}`);
-      const modal = this.querySelector(`#${modalId}`) as HTMLElement | null;
-      const closeBtn = this.querySelector(`#${modalId}-close`);
-      const input = this.querySelector(`#${inputId}`) as HTMLInputElement | null;
-      const resultsContainer = this.querySelector(`#${resultsId}`) as HTMLElement | null;
-      const emptyState = this.querySelector(`#${emptyId}`) as HTMLElement | null;
-
-      // Teleport modal to body to avoid containing block/transform clipping from header containers
-      if (modal && modal.parentNode !== document.body) {
-        document.body.appendChild(modal);
-      }
-
-      let escapeCleanup: (() => void) | null = null;
-
-      const openModal = () => {
-        modal?.classList.remove("hidden");
-        modal?.classList.add("flex");
-        input?.focus();
-        document.body.style.overflow = "hidden";
-
-        escapeCleanup = defineShortcuts({
-          escape: {
-            handler: () => closeModal(),
-            usingInput: true
-          }
-        });
-      };
-
-      const closeModal = () => {
-        modal?.classList.add("hidden");
-        modal?.classList.remove("flex");
-        document.body.style.overflow = "";
-        if (input) input.value = "";
-        if (resultsContainer) resultsContainer.innerHTML = "";
-        emptyState?.classList.add("hidden");
-
-        if (escapeCleanup) {
-          escapeCleanup();
-          escapeCleanup = null;
-        }
-      };
-
-      const onTriggerClick = () => openModal();
-      const onCloseClick = () => closeModal();
-      const onModalClick = (e: MouseEvent) => {
-        const target = e.target as HTMLElement | null;
-        if (target && (target === modal || !target.closest('[data-slot="dialog"]'))) {
-          closeModal();
-        }
-      };
-
-      trigger?.addEventListener("click", onTriggerClick);
-      closeBtn?.addEventListener("click", onCloseClick);
-      modal?.addEventListener("click", onModalClick);
-
-      // Register global shortcut key Cmd+K / Ctrl+K
-      const metaKCleanup = defineShortcuts({
-        meta_k: {
-          handler: () => openModal(),
-          label: "Open Search",
-          description: "Open the global site search modal",
-          category: "navigation"
-        }
-      });
-
-      let debounceTimer: any;
-      const onInput = () => {
-        clearTimeout(debounceTimer);
-        const query = input?.value.trim();
-        if (!query) {
-          if (resultsContainer) resultsContainer.innerHTML = "";
-          emptyState?.classList.add("hidden");
-          return;
-        }
-
-        debounceTimer = setTimeout(async () => {
-          try {
-            console.log("[Search UI] Fetching search results for:", query);
-            const res = await fetch(`${endpoint}?q=${encodeURIComponent(query)}`);
-            
-            if (!res.ok) {
-              throw new Error(`HTTP status: ${res.status}`);
-            }
-
-            const results = await res.json();
-            console.log("[Search UI] Received results:", results);
-
-            if (resultsContainer) resultsContainer.innerHTML = "";
-
-            if (!Array.isArray(results) || results.length === 0) {
-              emptyState?.classList.remove("hidden");
-              return;
-            }
-
-            emptyState?.classList.add("hidden");
-            results.forEach((item) => {
-              const div = document.createElement("a");
-              div.href = item.url || "#";
-              div.className = "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none";
-              
-              div.innerHTML = `
-                <div class="flex items-center justify-between">
-                  <span class="text-sm font-semibold text-white">${item.title || "Untitled"}</span>
-                  ${item.sourceType ? `<span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono">${item.sourceType}</span>` : ""}
-                </div>
-                ${item.snippet ? `<p class="text-xs text-neutral-400 line-clamp-2 m-0">${item.snippet}</p>` : ""}
-              `;
-              resultsContainer?.appendChild(div);
-            });
-          } catch (err) {
-            console.error("[Search UI] Search failed:", err);
-            if (resultsContainer) resultsContainer.innerHTML = "";
-            emptyState?.classList.remove("hidden");
-          }
-        }, 200);
-      };
-      input?.addEventListener("input", onInput);
-
-      this.searchCleanup = () => {
-        clearTimeout(debounceTimer);
-        trigger?.removeEventListener("click", onTriggerClick);
-        closeBtn?.removeEventListener("click", onCloseClick);
-        modal?.removeEventListener("click", onModalClick);
-        input?.removeEventListener("input", onInput);
-        if (escapeCleanup) escapeCleanup();
-        metaKCleanup();
-        if (modal && modal.parentNode === document.body) {
-          modal.remove();
-        }
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.searchCleanup) {
-        this.searchCleanup();
-        this.searchCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-search')) {
-    customElements.define('rla-search', RLASearch);
-  }
-</script>
-
-<style is:global>
-  #search-results mark {
-    background-color: rgba(168, 85, 247, 0.3) !important;
-    color: rgb(233, 213, 255) !important;
-    padding-left: 2px;
-    padding-right: 2px;
-    border-radius: 4px;
-  }
-</style>