@rimelight/ui 0.0.36 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -34,8 +34,6 @@
     "./components/vue/*": "./src/components/vue/*",
     "./themes": "./src/themes/index.ts",
     "./themes/*": "./src/themes/*",
-    "./composables": "./src/composables/index.ts",
-    "./composables/*": "./src/composables/*",
     "./config": "./src/config/index.ts",
     "./config/*": "./src/config/*",
     "./utils": "./src/utils/index.ts",
@@ -46,8 +44,6 @@
     "./docs/*": "./src/docs/*",
     "./plugins": "./src/plugins/index.ts",
     "./plugins/*": "./src/plugins/*",
-    "./middleware": "./src/middleware/index.ts",
-    "./middleware/*": "./src/middleware/*",
     "./types": "./src/types/index.ts",
     "./types/*": "./src/types/*",
     "./presets": "./src/presets/index.ts",
@@ -62,38 +58,46 @@
     "docs:meta": "tsx scripts/extract-meta.ts"
   },
   "dependencies": {
-    "@astrojs/vue": "6.0.1",
     "@iconify-json/lucide": "1.2.113",
     "@unocss/astro": "^66.7.2",
     "css-variants": "2.3.5",
-    "defu": "6.1.7",
-    "embla-carousel": "8.6.0",
-    "nanostores": "1.3.0",
-    "picomatch": "^4.0.4",
-    "vite-plugin-virtual": "^0.5.0",
-    "vue": "3.5.38"
+    "nanostores": "1.3.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.9",
+    "@astrojs/solid-js": "7.0.1",
     "@astrojs/ts-plugin": "1.10.9",
-    "@e18e/eslint-plugin": "0.5.1",
-    "@types/node": "25.9.3",
-    "@types/picomatch": "^4.0.3",
-    "@unocss/eslint-plugin": "66.7.2",
-    "astro": "6.4.8",
-    "eslint-plugin-regexp": "3.1.0",
+    "@astrojs/vue": "7.0.1",
+    "astro": "7.0.2",
+    "solid-js": "1.9.13",
     "tsx": "4.22.4",
     "typescript": "6.0.3",
     "unocss": "66.7.2",
-    "vite-plus": "0.2.1"
+    "vue": "3.5.38"
   },
   "peerDependencies": {
+    "@astrojs/solid-js": ">=7.0.1",
+    "@astrojs/vue": ">=7.0.1",
     "@rimelight/i18n": "workspace:^0.0.1",
-    "astro": ">=6.0.0"
+    "astro": ">=7.0.1",
+    "solid-js": ">=1.9.13",
+    "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
+    "@astrojs/solid-js": {
+      "optional": true
+    },
+    "@astrojs/vue": {
+      "optional": true
+    },
     "@rimelight/i18n": {
       "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "packageManager": "pnpm@11.8.0"

package/src/components/astro/RLAButton.astro

@@ -5,6 +5,7 @@ import type { ButtonProps } from "../../types"
 import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 import RLAAvatar from "./RLAAvatar.astro"
+import RLALink from "./RLALink.astro"
 
 const uiConfig = getUIConfig()
 const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
@@ -16,6 +17,7 @@ const {
   color = "primary",
   size = "md",
   href,
+  to,
   label,
   leadingIcon,
   trailingIcon,
@@ -38,7 +40,7 @@ const {
   activeVariant?: string
 }
 
-const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
+const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading") || loading)
 const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
 
 const showLeadingIcon = loading
@@ -66,14 +68,14 @@ const classes = resolveClasses(button, {
   theme
 }, useUi("button", uiProp), className);
 
-const Tag = href ? "a" : "button";
+const Tag = (href || to) ? RLALink : "button";
 
 const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
 ---
 <Tag
   class={classes.root}
   data-slot="root"
-  {...(Tag === "a" ? { href } : {})}
+  {...(Tag === RLALink ? { href, to, noExternalIcon: true } : {})}
   {...loadingAutoProps}
   {...rest}
 >
@@ -113,31 +115,61 @@ const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
 {loadingAuto && (
   <script>
     document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
-      button.addEventListener('click', async (_event) => {
-        // Find if there are any other click listeners that return a promise
-        // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
-        // the user wants us to track the click.
-        // If the button is already loading, don't do anything
+      button.addEventListener('click', async (event) => {
         if (button.getAttribute('data-loading') === 'true') return;
 
-        // We can't easily intercept other listeners, but if this is an Astro component,
-        // the onClick might be passed via ...rest as a string or handled via a separate script.
-
-        // A better way: if data-loading-auto is present, we wrap the click.
-        // But we need to know what to wait for.
-
-        // In Rimelight UI, we handle this via native DOM events.
-        // In Astro, if the user adds an event listener in their own script, we don't know.
-
-        // If they use standard onClick attribute:
-        const onClick = button.getAttribute('onclick');
-        if (onClick) {
-           button.setAttribute('data-loading', 'true');
-           button.classList.add('is-loading'); // We might need to ensure the CSS handles this
-           // Actually, the styles are driven by the classes generated by scv.
-           // Changing those classes dynamically is hard without knowing the full list.
-
-           // However, if we just want PARITY in the API, we can at least provide the hook.
+        // Extract onclick attribute if available
+        const onClickAttr = button.getAttribute('onclick');
+        if (onClickAttr) {
+          // Temporarily disable default onclick execution to run it through our promise tracker
+          event.preventDefault();
+          event.stopImmediatePropagation();
+
+          // Construct a function to await the promise
+          try {
+            button.setAttribute('data-loading', 'true');
+            button.setAttribute('disabled', 'true');
+            
+            // To spin the icon dynamically:
+            let leadingIconSpan = button.querySelector('[data-slot="leading-icon"]');
+            let icon = leadingIconSpan ? leadingIconSpan.querySelector('span') : null;
+            let origClass = '';
+            let isDynamicallyAdded = false;
+
+            if (!leadingIconSpan) {
+              isDynamicallyAdded = true;
+              leadingIconSpan = document.createElement('span');
+              leadingIconSpan.className = 'flex items-center justify-center shrink-0';
+              leadingIconSpan.setAttribute('data-slot', 'leading-icon');
+              icon = document.createElement('span');
+              icon.className = 'i-lucide-loader-circle animate-spin';
+              leadingIconSpan.appendChild(icon);
+              button.insertBefore(leadingIconSpan, button.firstChild);
+            } else if (icon) {
+              origClass = icon.className;
+              icon.className = 'i-lucide-loader-circle animate-spin';
+            }
+
+            // Execute the promise
+            const promiseFn = new Function('event', `
+              const fn = () => { ${onClickAttr} };
+              return fn();
+            `);
+            await promiseFn.call(button, event);
+
+            // Restore state
+            button.removeAttribute('data-loading');
+            button.removeAttribute('disabled');
+            if (isDynamicallyAdded && leadingIconSpan) {
+              leadingIconSpan.remove();
+            } else if (icon) {
+              icon.className = origClass;
+            }
+          } catch (err) {
+            console.error(err);
+            button.removeAttribute('data-loading');
+            button.removeAttribute('disabled');
+          }
         }
       });
     });

package/src/components/astro/RLACarousel.astro

@@ -28,13 +28,15 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
         {slides ? (
           slides.map((slide) => (
             <div class={classes.slide} data-slot="slide">
-              {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full aspect-video object-cover rounded-lg" />}
-              {(slide.title || slide.description) && (
-                <div class="absolute bottom-4 left-4 right-4 p-4 rounded-lg bg-black/60 backdrop-blur-sm text-white">
-                  {slide.title && <h4 class="text-sm font-semibold">{slide.title}</h4>}
-                  {slide.description && <p class="text-xs opacity-95 mt-1">{slide.description}</p>}
-                </div>
-              )}
+              <div class="relative w-full aspect-video">
+                {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full h-full object-cover rounded-lg" draggable="false" />}
+                {(slide.title || slide.description) && (
+                  <div class="absolute bottom-4 left-4 right-4 p-4 rounded-lg bg-black/60 backdrop-blur-sm text-white">
+                    {slide.title && <h4 class="text-sm font-semibold">{slide.title}</h4>}
+                    {slide.description && <p class="text-xs opacity-95 mt-1">{slide.description}</p>}
+                  </div>
+                )}
+              </div>
             </div>
           ))
         ) : (
@@ -53,47 +55,221 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
 </rla-carousel>
 
 <script>
-  import EmblaCarousel from "embla-carousel"
-
   class RLACarousel extends HTMLElement {
-    private emblaCleanup: (() => void) | null = null;
+    private cleanup: (() => void) | null = null;
 
     connectedCallback() {
       this.style.display = 'contents';
       const autoplay = this.getAttribute("data-autoplay") === "true";
       const viewport = this.querySelector('[data-slot="viewport"]') as HTMLElement;
+      const container = this.querySelector('[data-slot="container"]') as HTMLElement;
       const prevBtn = this.querySelector('[data-slot="prev-button"]') as HTMLButtonElement;
       const nextBtn = this.querySelector('[data-slot="next-button"]') as HTMLButtonElement;
 
-      if (!viewport) return;
+      if (!viewport || !container) return;
+
+      const originalSlides = Array.from(container.children) as HTMLElement[];
+      const N = originalSlides.length;
+      if (N === 0) return;
+
+      // Clone first and last slides for seamless looping
+      const firstClone = originalSlides[0].cloneNode(true) as HTMLElement;
+      const lastClone = originalSlides[N - 1].cloneNode(true) as HTMLElement;
+
+      container.insertBefore(lastClone, originalSlides[0]);
+      container.appendChild(firstClone);
+
+      // Add draggable="false" to all images inside clones as well
+      container.querySelectorAll('img').forEach(img => {
+        img.setAttribute('draggable', 'false');
+      });
 
-      const embla = EmblaCarousel(viewport, { loop: true });
+      let currentIndex = 1; // Start at the first actual slide
+      let isTransitioning = false;
+      let startX = 0;
+      let startY = 0;
+      let isDragging = false;
+      let hasDragged = false;
+      let autoplayIntervalId: any = null;
+
+      const updateTransform = (withTransition: boolean, translatePercent?: number) => {
+        if (withTransition) {
+          container.style.transition = 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)';
+        } else {
+          container.style.transition = 'none';
+        }
+        const pct = translatePercent !== undefined ? translatePercent : -currentIndex * 100;
+        container.style.transform = `translate3d(${pct}%, 0px, 0px)`;
+      };
+
+      // Set initial position
+      updateTransform(false);
+
+      const handleTransitionEnd = () => {
+        isTransitioning = false;
+        if (currentIndex === 0) {
+          currentIndex = N;
+          updateTransform(false);
+        } else if (currentIndex === N + 1) {
+          currentIndex = 1;
+          updateTransform(false);
+        }
+      };
 
-      const onPrevClick = () => embla.scrollPrev();
-      const onNextClick = () => embla.scrollNext();
+      const goToIndex = (index: number) => {
+        if (isTransitioning) return;
+        isTransitioning = true;
+        currentIndex = index;
+        updateTransform(true);
+      };
+
+      const scrollPrev = () => {
+        goToIndex(currentIndex - 1);
+      };
+
+      const scrollNext = () => {
+        goToIndex(currentIndex + 1);
+      };
+
+      // Autoplay
+      const startAutoplay = () => {
+        if (autoplay && !autoplayIntervalId) {
+          autoplayIntervalId = setInterval(scrollNext, 5000);
+        }
+      };
+
+      const stopAutoplay = () => {
+        if (autoplayIntervalId) {
+          clearInterval(autoplayIntervalId);
+          autoplayIntervalId = null;
+        }
+      };
+
+      startAutoplay();
+
+      // Button event listeners with throttle
+      let lastBtnClickTime = 0;
+      const handleBtnClick = (action: () => void) => {
+        const now = Date.now();
+        if (now - lastBtnClickTime < 500) return;
+        lastBtnClickTime = now;
+        stopAutoplay();
+        action();
+        startAutoplay();
+      };
+
+      const onPrevClick = (e: MouseEvent) => {
+        e.preventDefault();
+        handleBtnClick(scrollPrev);
+      };
+
+      const onNextClick = (e: MouseEvent) => {
+        e.preventDefault();
+        handleBtnClick(scrollNext);
+      };
 
       if (prevBtn) prevBtn.addEventListener("click", onPrevClick);
       if (nextBtn) nextBtn.addEventListener("click", onNextClick);
 
-      let intervalId: any = null;
-      if (autoplay) {
-        intervalId = setInterval(() => {
-          embla.scrollNext();
-        }, 4000);
-      }
+      // Pointer events for drag/swipe
+      const onPointerDown = (e: PointerEvent) => {
+        if (isTransitioning) return;
+        stopAutoplay();
+        startX = e.clientX;
+        startY = e.clientY;
+        isDragging = true;
+        hasDragged = false;
+        try {
+          viewport.setPointerCapture(e.pointerId);
+        } catch (err) {}
+      };
+
+      const onPointerMove = (e: PointerEvent) => {
+        if (!isDragging) return;
+        const deltaX = e.clientX - startX;
+        const deltaY = e.clientY - startY;
+
+        if (!hasDragged) {
+          // If vertical movement is greater than horizontal early on, cancel drag to let page scroll
+          if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 5) {
+            isDragging = false;
+            try {
+              viewport.releasePointerCapture(e.pointerId);
+            } catch (err) {}
+            return;
+          }
+          if (Math.abs(deltaX) > 5) {
+            hasDragged = true;
+            container.style.transition = 'none'; // Only disable transition when we actually start dragging
+          }
+        }
+
+        if (hasDragged) {
+          e.preventDefault();
+          const width = viewport.clientWidth;
+          const deltaPercent = (deltaX / width) * 100;
+          const basePercent = -currentIndex * 100;
+          updateTransform(false, basePercent + deltaPercent);
+        }
+      };
+
+      const onPointerUp = (e: PointerEvent) => {
+        if (!isDragging) return;
+        isDragging = false;
+        try {
+          viewport.releasePointerCapture(e.pointerId);
+        } catch (err) {}
+
+        if (hasDragged) {
+          const deltaX = e.clientX - startX;
+          const width = viewport.clientWidth;
+          const threshold = width * 0.15;
+
+          if (deltaX < -threshold) {
+            scrollNext();
+          } else if (deltaX > threshold) {
+            scrollPrev();
+          } else {
+            // Snap back
+            isTransitioning = true;
+            updateTransform(true);
+            setTimeout(() => {
+              isTransitioning = false;
+            }, 50);
+          }
+        } else {
+          // If it was just a click, make sure transition settings are restored
+          container.style.transition = 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)';
+          isTransitioning = false;
+        }
+        startAutoplay();
+      };
+
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove, { passive: false });
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+      container.addEventListener("transitionend", handleTransitionEnd);
 
-      this.emblaCleanup = () => {
+      this.cleanup = () => {
+        stopAutoplay();
         if (prevBtn) prevBtn.removeEventListener("click", onPrevClick);
         if (nextBtn) nextBtn.removeEventListener("click", onNextClick);
-        if (intervalId) clearInterval(intervalId);
-        embla.destroy();
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        container.removeEventListener("transitionend", handleTransitionEnd);
+        
+        if (container.contains(firstClone)) container.removeChild(firstClone);
+        if (container.contains(lastClone)) container.removeChild(lastClone);
       };
     }
 
     disconnectedCallback() {
-      if (this.emblaCleanup) {
-        this.emblaCleanup();
-        this.emblaCleanup = null;
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = null;
       }
     }
   }

package/src/components/astro/RLALink.astro

@@ -1,44 +1,42 @@
 ---
-import RLAButton from "./RLAButton.astro"
 import type { LinkProps } from "../../types"
 
 const {
   to,
   href,
-  variant = "link",
-  color = "neutral",
   external,
-  isButton = false,
   ariaLabel,
   externalIcon,
   target,
   rel,
   trailingIcon,
+  noExternalIcon,
+  class: className,
   ...rest
-} = Astro.props as LinkProps
+} = Astro.props as LinkProps & { noExternalIcon?: boolean }
 
 const linkHref = href || (typeof to === 'string' ? to : undefined);
 
 const isExternal = !!(external || (linkHref && (linkHref.startsWith('http://') || linkHref.startsWith('https://') || linkHref.startsWith('//'))));
 
-const linkVariant = isButton && variant === "link" ? "solid" : variant;
 const linkTarget = target || (isExternal ? "_blank" : undefined);
 const linkRel = rel || (isExternal ? "noopener noreferrer" : undefined);
 
-const showExternalIcon = isExternal && !trailingIcon ? (externalIcon || "i-lucide-external-link") : trailingIcon;
+const showExternalIcon = isExternal && !noExternalIcon && !trailingIcon ? (externalIcon || "i-lucide-external-link") : trailingIcon;
 ---
-<RLAButton
-  variant={linkVariant as any}
-  color={color as any}
+<a
   href={linkHref}
   target={linkTarget}
   rel={linkRel}
   aria-label={ariaLabel}
-  trailingIcon={showExternalIcon}
+  class={className}
   {...rest}
 >
   <slot />
+  {showExternalIcon && (
+    <span class={showExternalIcon} aria-hidden="true" />
+  )}
   {isExternal && !ariaLabel && (
     <span class="sr-only"> (opens in a new tab)</span>
   )}
-</RLAButton>
+</a>

package/src/components/astro/RLALocaleSelector.astro

@@ -49,7 +49,8 @@ function getLocaleDisplayName(localeCode: string): string {
 }
 
 const items = processedLocales.map((item) => {
-    const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+    const basePath = Astro.url.pathname.replace(/^\/[^/]+/, '') || '/';
+    const targetUrl = getRelativeLocaleUrl(item.code, basePath) + Astro.url.search;
     return {
         label: item.label !== item.code ? item.label : getLocaleDisplayName(item.code),
         value: targetUrl,

package/src/components/astro/RLAPopover.astro

@@ -21,16 +21,110 @@ const {
 const classes = resolveClasses(popover, {
   placement
 }, useUi("popover", uiProp), className)
-const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={classes.root} data-slot="popover-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger">
+<div class={classes.root} data-slot="popover-container" data-placement={placement} {...rest}>
+  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
     <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer" popovertarget={popoverId}>{triggerLabel}</button>}
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
     </slot>
   </div>
 
-  <div id={popoverId} popover class={classes.content} data-slot="content">
+  <div class={`${classes.content} popover-content hidden`} data-slot="content">
     <slot />
   </div>
 </div>
+
+<script>
+  function initPopovers() {
+    document.querySelectorAll('[data-slot="popover-container"]').forEach(container => {
+      const el = container as any;
+      if (el.dataset && el.dataset.popoverInitialized) return;
+      if (el.dataset) el.dataset.popoverInitialized = "true";
+
+      const trigger = container.querySelector('.popover-trigger');
+      const content = container.querySelector('.popover-content') as HTMLElement;
+
+      if (!trigger || !content) return;
+
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = !content.classList.contains('hidden');
+        
+        document.querySelectorAll('.popover-content').forEach(otherContent => {
+          const other = otherContent as HTMLElement;
+          if (other !== content && !other.classList.contains('hidden')) {
+            other.classList.add('hidden');
+            other.style.left = '';
+            other.style.right = '';
+            other.style.transform = '';
+            other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+          }
+        });
+
+        if (isOpen) {
+          content.classList.add('hidden');
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        } else {
+          content.classList.remove('hidden');
+
+          // Reset styles to measure original computed bounds
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+
+          const rect = content.getBoundingClientRect();
+          const viewportWidth = window.innerWidth;
+          const placement = container.getAttribute('data-placement') || 'bottom';
+          
+          let shift = 0;
+          const safetyMargin = 24;
+          if (rect.right > viewportWidth - safetyMargin) {
+            shift = (viewportWidth - safetyMargin) - rect.right;
+          } else if (rect.left < safetyMargin) {
+            shift = safetyMargin - rect.left;
+          }
+
+          if (shift !== 0) {
+            const isCentered = (placement === 'top' || placement === 'bottom') && 
+                               !content.classList.contains('right-0') && 
+                               !content.classList.contains('left-0');
+            if (isCentered) {
+              content.style.transform = `translateX(calc(-50% + ${shift}px))`;
+            } else {
+              content.style.transform = `translateX(${shift}px)`;
+            }
+          }
+
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
+        }
+      });
+
+      content.addEventListener('click', (e) => {
+        e.stopPropagation();
+      });
+    });
+  }
+
+  const win = window as any;
+  if (!win.hasGlobalPopoverListener) {
+    win.hasGlobalPopoverListener = true;
+    document.addEventListener('click', () => {
+      document.querySelectorAll('.popover-content').forEach(content => {
+        const c = content as HTMLElement;
+        if (!c.classList.contains('hidden')) {
+          c.classList.add('hidden');
+          c.style.left = '';
+          c.style.right = '';
+          c.style.transform = '';
+          c.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        }
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', initPopovers);
+  initPopovers();
+</script>