@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAScrollToTop.astro

@@ -1,172 +1,200 @@
----
-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)
-
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
-
-
----
-
-<div
-  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", classes.root]}
-  data-threshold={threshold}
-  data-duration={duration}
-  data-circle-stroke-width={progressWidth}
-  {...rest}
->
-  <button
-    type="button"
-    class={classes.button}
-    aria-label="Scroll to top"
-    data-scroll-to-top-button
-  >
-    <div class={classes.progressBase}>
-      <svg class={classes.svg} viewBox="0 0 100 100" shape-rendering="geometricPrecision">
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          stroke={`var(--color-${color}-900)`}
-          fill={`var(--color-${color}-950)`}
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-secondary-stroke opacity-100"
-        />
-        {showProgress && (
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          fill="transparent"
-          stroke={`var(--color-${color}-500)`}
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-primary-stroke opacity-100"
-          data-progress-circle
-        />
-        )}
-      </svg>
-      <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>
-
-<script>
-  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
-    const element = el as HTMLElement
-    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
-    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
-
-    if (!button) return
-
-    const threshold = Number(element.dataset.threshold) || 200
-
-    function updateScrollState() {
-      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) {
-        element.classList.add('visible')
-      } else {
-        element.classList.remove('visible')
-      }
-
-      if (progressCircle) {
-        const circumference = 2 * Math.PI * 45
-        const percentPx = circumference / 100
-        const duration = element.dataset.duration || '0.1'
-        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
-        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
-        progressCircle.style.setProperty('--circumference', circumference.toString())
-        progressCircle.style.setProperty('--duration', `${duration}s`)
-      }
-    }
-
-    button.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    })
-
-    window.addEventListener('scroll', updateScrollState, { passive: true })
-    updateScrollState()
-  })
-</script>
-
-<style>
-  .rla-scroll-to-top {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .rla-scroll-to-top.visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .progress-circle-base {
-    transform: translateZ(0);
-  }
-
-  .gauge-primary-stroke {
-    stroke-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
-    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
-    transform: rotate(-90deg);
-    transform-origin: center;
-    shape-rendering: geometricPrecision;
-  }
-
-  .gauge-secondary-stroke {
-    stroke-dasharray: 282.6;
-    transform: rotate(-90deg);
-    transform-origin: center;
-  }
-
-  [data-progress-circle] {
-    --stroke-percent: 0;
-    --percent-to-px: 2.826px;
-    --circumference: 282.6;
-    --duration: 0.1s;
-  }
-</style>
+---
+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

@@ -0,0 +1,282 @@
+---
+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>