@rimelight/ui 0.0.34 → 0.0.35

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>

package/src/components/astro/RLASelect.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { SelectProps } from "../../types"
 import selectThemeDefault, { createSelectTheme } from "../../themes/select.theme"
 
-const selectTheme = selectThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const selectTheme = uiConfig.colors ? createSelectTheme() : selectThemeDefault
 const select = scv(selectTheme)
 
 const {
@@ -35,63 +38,69 @@ const normalizedItems = items.map(item => {
 const selectedItem = normalizedItems.find(item => item.value === value)
 const initialLabel = selectedItem ? selectedItem.label : ""
 ---
-<div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
-  {label && <label class={classes.label} data-slot="label">{label}</label>}
-  
-  <div class="relative w-full" data-select-wrapper>
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      disabled={disabled}
-      data-select-trigger
-      {...rest}
-    >
-      <span data-select-value>{initialLabel || placeholder}</span>
-      <span class="i-lucide-chevron-down opacity-50" />
-    </button>
-
-    <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
-      <div class="py-1" data-select-items>
-        {normalizedItems.map(item => (
-          <div
-            class={classes.item}
-            data-slot="item"
-            data-value={item.value}
-            data-label={item.label}
-            data-select-item
-          >
-            <span class={classes.itemText}>{item.label}</span>
-            <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
-          </div>
-        ))}
+<rla-select {...rest}>
+  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+    {label && <label class={classes.label} data-slot="label">{label}</label>}
+    
+    <div class="relative w-full" data-select-wrapper>
+      <button
+        type="button"
+        class={classes.trigger}
+        data-slot="trigger"
+        disabled={disabled}
+        data-select-trigger
+      >
+        <span data-select-value>{initialLabel || placeholder}</span>
+        <span class="i-lucide-chevron-down opacity-50" />
+      </button>
+
+      <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
+        <div class="py-1" data-select-items>
+          {normalizedItems.map(item => (
+            <div
+              class={classes.item}
+              data-slot="item"
+              data-value={item.value}
+              data-label={item.label}
+              data-select-item
+            >
+              <span class={classes.itemText}>{item.label}</span>
+              <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
+    <input type="hidden" name={name} value={value} data-select-hidden-input />
   </div>
-  <input type="hidden" name={name} value={value} data-select-hidden-input />
-</div>
+</rla-select>
 
 <script>
-  const initializeSelects = () => {
-    document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
-      if (wrapper.hasAttribute("data-initialized")) return;
-      wrapper.setAttribute("data-initialized", "true");
+  class RLASelect extends HTMLElement {
+    private selectCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
+      if (!wrapper) return;
 
       const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
       const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-      const items = wrapper.querySelectorAll("[data-select-item]");
+      const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
       const valueSpan = wrapper.querySelector("[data-select-value]");
-      const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-select-hidden-input]") as HTMLInputElement;
+      const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
 
       if (!trigger || !dropdown) return;
 
-      trigger.addEventListener("click", (e) => {
+      const onTriggerClick = (e: MouseEvent) => {
         e.stopPropagation();
         dropdown.classList.toggle("hidden");
-      });
+      };
+      trigger.addEventListener("click", onTriggerClick);
 
+      const itemCleanups: (() => void)[] = [];
       items.forEach(item => {
-        item.addEventListener("click", (e) => {
+        const onItemClick = (e: MouseEvent) => {
           e.stopPropagation();
           const val = (item as HTMLElement).dataset.value || "";
           const label = (item as HTMLElement).dataset.label || "";
@@ -106,18 +115,32 @@ const initialLabel = selectedItem ? selectedItem.label : ""
           item.querySelector("[data-check-icon]")?.classList.remove("hidden");
           
           dropdown.classList.add("hidden");
-        });
+        };
+        item.addEventListener("click", onItemClick);
+        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
       });
-    });
-  };
-
-  // Close all dropdowns when clicking outside
-  document.addEventListener("click", () => {
-    document.querySelectorAll("[data-select-dropdown]").forEach(dropdown => {
-      dropdown.classList.add("hidden");
-    });
-  });
-
-  document.addEventListener("DOMContentLoaded", initializeSelects);
-  document.addEventListener("astro:page-load", initializeSelects);
+
+      const onDocumentClick = () => {
+        dropdown.classList.add("hidden");
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      this.selectCleanup = () => {
+        trigger.removeEventListener("click", onTriggerClick);
+        itemCleanups.forEach(fn => fn());
+        document.removeEventListener("click", onDocumentClick);
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.selectCleanup) {
+        this.selectCleanup();
+        this.selectCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-select')) {
+    customElements.define('rla-select', RLASelect);
+  }
 </script>

package/src/components/astro/RLASeparator.astro

@@ -8,7 +8,7 @@ import RLAAvatar from "./RLAAvatar.astro"
 import { cx } from "css-variants"
 
 const uiConfig = getUIConfig()
-const separatorTheme = uiConfig.colors ? createSeparatorTheme() : separatorThemeDefault
+const separatorTheme = uiConfig.colors ? createSeparatorTheme(uiConfig.colors) : separatorThemeDefault
 
 const separator = scv(separatorTheme)
 
@@ -25,14 +25,19 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as SeparatorProps
+} = Astro.props as SeparatorProps & {
+  color?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  type?: "solid" | "dashed" | "dotted"
+  position?: "start" | "center" | "end"
+}
 
 const classes = resolveClasses(separator, {
   orientation,
-  color,
-  size,
-  type,
-  position
+  color: color as "neutral",
+  size: size as "xs",
+  type: type as "solid",
+  position: position as "center"
 }, useUi("separator", uiProp), className)
 ---
 <div

package/src/components/astro/RLAShare.astro

@@ -0,0 +1,60 @@
+---
+import RLAButton from "./RLAButton.astro"
+import type { ButtonProps } from "../../types"
+
+interface Props extends Omit<ButtonProps, "href" | "label" | "leadingIcon" | "trailingIcon" | "loading" | "loadingAuto" | "square" | "active" | "activeColor" | "activeVariant"> {}
+
+const {
+  ...rest
+} = Astro.props
+---
+
+<RLAButton
+  id="rl-share"
+  color="neutral"
+  variant="outline"
+  size="sm"
+  leadingIcon="i-lucide-share-2"
+  label="Share"
+  {...rest}
+/>
+
+<script>
+  function setupShare() {
+    const shareBtn = document.getElementById("rl-share") as (HTMLButtonElement & { rlShareRegistered?: boolean }) | null;
+    if (!shareBtn) return;
+
+    if (shareBtn.rlShareRegistered) return;
+    shareBtn.rlShareRegistered = true;
+
+    shareBtn.addEventListener("click", async () => {
+      if (navigator.share) {
+        try {
+          await navigator.share({ title: document.title, url: window.location.href });
+        } catch (err) {
+          const error = err as { name?: string };
+          if (error.name !== "AbortError") {
+            console.error("Share failed:", err);
+          }
+        }
+      } else {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+          const labelEl = shareBtn.querySelector('[data-slot="label"]');
+          if (labelEl) {
+            const origText = labelEl.textContent;
+            labelEl.textContent = "Link Copied!";
+            setTimeout(() => {
+              labelEl.textContent = origText;
+            }, 2000);
+          }
+        } catch (err) {
+          console.error("Failed to copy link:", err);
+        }
+      }
+    });
+  }
+
+  setupShare();
+  document.addEventListener("astro:after-swap", setupShare);
+</script>