@rimelight/ui 0.0.5 → 0.0.7

package/src/components/tooltip/Tooltip.astro

@@ -1,422 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface TooltipProps extends HTMLAttributes<"div"> {
-  /**
-   * Time in milliseconds to wait before showing the tooltip
-   */
-  openDelay?: number;
-  /**
-   * Time in milliseconds to wait before hiding the tooltip
-   */
-  closeDelay?: number;
-  /**
-   * When true, prevents the tooltip from staying open when hovering over its content
-   */
-  disableHoverableContent?: boolean;
-}
-
-type Props = TooltipProps;
-
-export const tooltip = cv({ base: "starwind-tooltip relative i-block" });
-
-const {
-  openDelay = 200,
-  closeDelay = 200,
-  disableHoverableContent = false,
-  class: className,
-} = Astro.props;
----
-
-<div
-  class:list={[tooltip(), className]}
-  data-state="closed"
-  data-open-delay={openDelay}
-  data-close-delay={closeDelay}
-  {...!disableHoverableContent && { "data-content-hoverable": "" }}
-  data-slot="tooltip"
->
-  <slot />
-</div>
-
-<script>
-  import {
-    type FloatingAlign,
-    type FloatingSide,
-    getTransformOrigin,
-    resolvePlacement,
-  } from "../../lib/utils/starwind/positioning";
-
-  class TooltipHandler {
-    private tooltip: HTMLElement;
-    private trigger: HTMLElement | null;
-    private content: HTMLElement | null;
-    private openTimerRef: number | null = null;
-    private closeTimerRef: number | null = null;
-    private hideAnimationTimerRef: number | null = null;
-    private contentId: string;
-    private animationDuration = 150;
-    private side: FloatingSide = "top";
-    private align: FloatingAlign = "center";
-    private sideOffset = 8;
-    private avoidCollisions = true;
-    private isOpen = false;
-    private contentPlaceholder: Comment | null = null;
-    private cleanupAutoUpdate: (() => void) | null = null;
-    private abortController: AbortController;
-
-    constructor(tooltip: HTMLElement, idx: number) {
-      this.contentId = `starwind-tooltip${idx}`;
-      this.tooltip = tooltip;
-      this.abortController = new AbortController();
-      this.content = tooltip.querySelector(".starwind-tooltip-content");
-
-      // if tooltip.firstElementChild is this.content, then get the next element
-      this.trigger = tooltip.firstElementChild as HTMLElement;
-      if (this.trigger === this.content) {
-        this.trigger = this.trigger.nextElementSibling as HTMLElement;
-      }
-
-      if (!this.trigger || !this.content) return;
-
-      this.trigger.classList.add("starwind-tooltip-trigger");
-
-      // animationDuration is set with inline styles through passed prop to TooltipContent
-      const animationDurationString = this.content.style.animationDuration;
-      if (animationDurationString.endsWith("ms")) {
-        this.animationDuration = parseFloat(animationDurationString);
-      } else if (animationDurationString.endsWith("s")) {
-        // using something like @playform/compress might optimize to use "s" instead of "ms"
-        this.animationDuration = parseFloat(animationDurationString) * 1000;
-      }
-
-      const contentSide = this.content.getAttribute("data-side");
-      if (
-        contentSide === "top" ||
-        contentSide === "bottom" ||
-        contentSide === "left" ||
-        contentSide === "right"
-      ) {
-        this.side = contentSide;
-      }
-
-      const contentAlign = this.content.getAttribute("data-align");
-      if (contentAlign === "start" || contentAlign === "center" || contentAlign === "end") {
-        this.align = contentAlign;
-      }
-
-      const contentSideOffset = parseFloat(this.content.getAttribute("data-side-offset") || "8");
-      if (Number.isFinite(contentSideOffset)) {
-        this.sideOffset = contentSideOffset;
-      }
-
-      this.avoidCollisions = this.content.hasAttribute("data-avoid-collisions");
-      this.isOpen = this.tooltip.getAttribute("data-state") === "open";
-
-      this.init();
-    }
-
-    private init() {
-      this.setupAccessibility();
-      this.setupEvents();
-      this.setInitialState();
-    }
-
-    private setupAccessibility() {
-      if (!this.trigger || !this.content) return;
-      this.trigger.setAttribute("aria-describedby", this.contentId);
-      this.content.id = this.contentId;
-    }
-
-    private setInitialState() {
-      if (!this.content || !this.trigger) return;
-
-      if (this.isOpen) {
-        this.tooltip.setAttribute("data-state", "open");
-        this.trigger.setAttribute("data-state", "open");
-        this.content.setAttribute("data-state", "open");
-        this.content.classList.remove("hidden");
-        this.portalContent();
-        this.positionTooltip();
-        requestAnimationFrame(() => this.positionTooltip());
-      } else {
-        this.tooltip.setAttribute("data-state", "closed");
-        this.trigger.setAttribute("data-state", "closed");
-        this.content.setAttribute("data-state", "closed");
-        this.content.classList.add("hidden");
-      }
-    }
-
-    private setupEvents() {
-      if (!this.trigger || !this.content) return;
-
-      // Trigger events
-      this.trigger.addEventListener("mouseenter", () => this.show(), {
-        signal: this.abortController.signal,
-      });
-      this.trigger.addEventListener("mouseleave", () => this.hide(), {
-        signal: this.abortController.signal,
-      });
-      this.trigger.addEventListener("focus", () => this.show(true), {
-        signal: this.abortController.signal,
-      });
-      this.trigger.addEventListener("blur", () => this.hide(true), {
-        signal: this.abortController.signal,
-      });
-
-      // Content events
-      if (this.tooltip.hasAttribute("data-content-hoverable")) {
-        this.content.addEventListener("mouseenter", () => this.show(), {
-          signal: this.abortController.signal,
-        });
-        this.content.addEventListener("mouseleave", () => this.hide(), {
-          signal: this.abortController.signal,
-        });
-      }
-
-      // Document events
-      document.addEventListener(
-        "keydown",
-        (e) => {
-          if (e.key === "Escape" && this.isOpen) {
-            this.hide(true);
-          }
-        },
-        { signal: this.abortController.signal },
-      );
-
-      document.addEventListener(
-        "pointerdown",
-        (e) => {
-          if (
-            this.isOpen &&
-            !this.tooltip.contains(e.target as Node) &&
-            !this.content?.contains(e.target as Node)
-          ) {
-            this.hide(true);
-          }
-        },
-        { signal: this.abortController.signal },
-      );
-    }
-
-    private portalContent() {
-      if (!this.content) return;
-      if (this.contentPlaceholder || this.content.parentElement === document.body) return;
-
-      this.contentPlaceholder = document.createComment("tooltip-content-placeholder");
-      this.content.parentNode?.insertBefore(this.contentPlaceholder, this.content);
-
-      document.body.appendChild(this.content);
-
-      this.content.style.position = "fixed";
-      this.content.style.zIndex = "50";
-
-      const updatePosition = () => this.positionTooltip();
-      window.addEventListener("scroll", updatePosition, true);
-      window.addEventListener("resize", updatePosition);
-
-      const resizeObserver = new ResizeObserver(() => this.positionTooltip());
-      resizeObserver.observe(this.content);
-      if (this.trigger) {
-        resizeObserver.observe(this.trigger);
-      }
-
-      this.cleanupAutoUpdate = () => {
-        window.removeEventListener("scroll", updatePosition, true);
-        window.removeEventListener("resize", updatePosition);
-        resizeObserver.disconnect();
-      };
-    }
-
-    private unportalContent() {
-      if (!this.content) return;
-
-      this.cleanupAutoUpdate?.();
-      this.cleanupAutoUpdate = null;
-
-      if (this.contentPlaceholder) {
-        this.contentPlaceholder.parentNode?.insertBefore(this.content, this.contentPlaceholder);
-        this.contentPlaceholder.remove();
-        this.contentPlaceholder = null;
-      }
-
-      this.content.style.removeProperty("position");
-      this.content.style.removeProperty("z-index");
-      this.content.style.removeProperty("top");
-      this.content.style.removeProperty("left");
-      this.content.style.removeProperty("transform-origin");
-    }
-
-    private openNow() {
-      if (!this.content || !this.trigger) return;
-      if (this.abortController.signal.aborted) return;
-
-      this.clearHideAnimationTimer();
-      this.isOpen = true;
-      this.tooltip.setAttribute("data-state", "open");
-      this.trigger.setAttribute("data-state", "open");
-      this.content.setAttribute("data-state", "open");
-      this.content.classList.remove("hidden");
-      this.portalContent();
-      this.positionTooltip();
-      requestAnimationFrame(() => this.positionTooltip());
-    }
-
-    private show(immediate: boolean = false) {
-      if (!this.content || !this.trigger) return;
-
-      this.clearCloseTimer();
-      this.clearHideAnimationTimer();
-      this.clearOpenTimer();
-
-      if (immediate) {
-        this.openNow();
-        this.clearOpenTimer();
-        return;
-      }
-
-      const delay = parseInt(this.tooltip.getAttribute("data-open-delay") || "200");
-      this.openTimerRef = window.setTimeout(() => {
-        if (this.abortController.signal.aborted) return;
-        this.openNow();
-        this.openTimerRef = null;
-      }, delay);
-    }
-
-    private positionTooltip() {
-      if (!this.content || !this.trigger || !this.isOpen) return;
-
-      const triggerRect = this.trigger.getBoundingClientRect();
-      const contentWidth = this.content.offsetWidth;
-      const contentHeight = this.content.offsetHeight;
-      if (contentWidth === 0 || contentHeight === 0) return;
-
-      const resolvedPlacement = resolvePlacement({
-        side: this.side,
-        align: this.align,
-        sideOffset: this.sideOffset,
-        triggerRect,
-        contentWidth,
-        contentHeight,
-        viewportWidth: window.innerWidth,
-        viewportHeight: window.innerHeight,
-        viewportPadding: 8,
-        avoidCollisions: this.avoidCollisions,
-      });
-
-      this.content.style.left = `${Math.round(resolvedPlacement.left)}px`;
-      this.content.style.top = `${Math.round(resolvedPlacement.top)}px`;
-      this.content.style.transformOrigin = getTransformOrigin(
-        resolvedPlacement.side,
-        resolvedPlacement.align,
-      );
-      this.content.setAttribute("data-side", resolvedPlacement.side);
-      this.content.setAttribute("data-align", resolvedPlacement.align);
-    }
-
-    private closeNow() {
-      if (!this.content || !this.trigger) return;
-      this.isOpen = false;
-      this.tooltip.setAttribute("data-state", "closed");
-      this.trigger.setAttribute("data-state", "closed");
-      this.content.setAttribute("data-state", "closed");
-
-      this.clearHideAnimationTimer();
-      this.hideAnimationTimerRef = window.setTimeout(() => {
-        if (this.abortController.signal.aborted) return;
-        if (!this.content) return;
-        this.content.classList.add("hidden");
-        this.unportalContent();
-      }, this.animationDuration);
-    }
-
-    private hide(immediate: boolean = false) {
-      if (!this.content || !this.trigger) return;
-      this.clearOpenTimer();
-      this.clearCloseTimer();
-
-      if (immediate) {
-        this.closeNow();
-        return;
-      }
-
-      this.closeTimerRef = window.setTimeout(
-        () => {
-          if (this.abortController.signal.aborted) return;
-          this.closeNow();
-          this.closeTimerRef = null;
-        },
-        parseInt(this.tooltip.getAttribute("data-close-delay") || "200"),
-      );
-    }
-
-    destroy() {
-      if (this.abortController.signal.aborted) return;
-
-      this.abortController.abort();
-      this.clearOpenTimer();
-      this.clearCloseTimer();
-      this.clearHideAnimationTimer();
-      this.unportalContent();
-      this.isOpen = false;
-    }
-
-    private clearOpenTimer() {
-      if (this.openTimerRef) {
-        window.clearTimeout(this.openTimerRef);
-        this.openTimerRef = null;
-      }
-    }
-
-    private clearCloseTimer() {
-      if (this.closeTimerRef) {
-        window.clearTimeout(this.closeTimerRef);
-        this.closeTimerRef = null;
-      }
-    }
-
-    private clearHideAnimationTimer() {
-      if (this.hideAnimationTimerRef) {
-        window.clearTimeout(this.hideAnimationTimerRef);
-        this.hideAnimationTimerRef = null;
-      }
-    }
-  }
-
-  const tooltipInstances = new Map<HTMLElement, TooltipHandler>();
-  let tooltipCounter = 0;
-
-  const cleanupStaleTooltips = () => {
-    for (const [tooltipEl, tooltipHandler] of tooltipInstances.entries()) {
-      if (!document.contains(tooltipEl)) {
-        tooltipHandler.destroy();
-        tooltipInstances.delete(tooltipEl);
-      }
-    }
-  };
-
-  const destroyAllTooltips = () => {
-    for (const tooltipHandler of tooltipInstances.values()) {
-      tooltipHandler.destroy();
-    }
-
-    tooltipInstances.clear();
-  };
-
-  const setupTooltips = () => {
-    cleanupStaleTooltips();
-
-    document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip) => {
-      if (!tooltipInstances.has(tooltip)) {
-        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, tooltipCounter++));
-      }
-    });
-  };
-
-  setupTooltips();
-  document.addEventListener("astro:before-swap", destroyAllTooltips);
-  document.addEventListener("astro:after-swap", setupTooltips);
-  document.addEventListener("starwind:init", setupTooltips);
-</script>

package/src/components/tooltip/TooltipContent.astro

@@ -1,83 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-import IconCaretUp from "~icons/lucide/caret-up";
-
-export interface TooltipContentProps extends HTMLAttributes<"div"> {
-  /**
-   * Side of the tooltip
-   * @default top
-   */
-  side?: "top" | "right" | "bottom" | "left";
-  /**
-   * Alignment of the tooltip
-   * @default center
-   */
-  align?: "start" | "center" | "end";
-  /**
-   * Offset distance in pixels
-   * @default 8
-   */
-  sideOffset?: number;
-  /**
-   * Prevent the tooltip from colliding with other elements
-   * @default true
-   */
-  avoidCollisions?: boolean;
-  /**
-   * Open and close animation duration in milliseconds
-   * @default 150
-   */
-  animationDuration?: number;
-}
-
-type Props = TooltipContentProps;
-
-export const tooltipContent = cv({
-  base: [
-    "starwind-tooltip-content",
-    "group fixed z-50 hidden w-fit px-xs py-5xs",
-    "bg-foreground text-background rounded-md",
-    "animate-in fade-in zoom-in-95",
-    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
-    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-    "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-  ],
-});
-
-export const tooltipCaret = cv({
-  base: [
-    "text-foreground absolute z-50 size-4",
-    "group-data-[side=top]:bottom-0 group-data-[side=top]:left-1/2 group-data-[side=top]:-translate-x-1/2 group-data-[side=top]:translate-y-[calc(50%+1px)] group-data-[side=top]:rotate-180",
-    "group-data-[side=bottom]:top-0 group-data-[side=bottom]:left-1/2 group-data-[side=bottom]:-translate-x-1/2 group-data-[side=bottom]:-translate-y-[calc(50%+1px)]",
-    "group-data-[side=left]:top-1/2 group-data-[side=left]:right-0 group-data-[side=left]:translate-x-[calc(50%+1px)] group-data-[side=left]:-translate-y-1/2 group-data-[side=left]:rotate-90",
-    "group-data-[side=right]:top-1/2 group-data-[side=right]:left-0 group-data-[side=right]:-translate-x-[calc(50%+1px)] group-data-[side=right]:-translate-y-1/2 group-data-[side=right]:-rotate-90",
-  ],
-});
-
-const {
-  side = "top",
-  align = "center",
-  sideOffset = 8,
-  avoidCollisions = true,
-  animationDuration = 150,
-  class: className,
-} = Astro.props;
----
-
-<div
-  class:list={[tooltipContent(), className]}
-  data-state="closed"
-  data-side={side}
-  data-align={align}
-  data-side-offset={sideOffset}
-  {...avoidCollisions && { "data-avoid-collisions": "" }}
-  role="tooltip"
-  style={{ animationDuration: `${animationDuration}ms` }}
-  data-slot="tooltip-content"
->
-  <slot> My tooltip! </slot>
-  <span class={tooltipCaret()}>
-    <IconCaretUp />
-  </span>
-</div>

package/src/components/tooltip/TooltipTrigger.astro

@@ -1,13 +0,0 @@
----
-/**
- * This component is used to trigger the tooltip
- * All it does is require a slot
- */
-
-export interface TooltipTriggerProps {
-  children: any;
-}
-type Props = TooltipTriggerProps;
----
-
-<slot />

package/src/components/video/Video.astro

@@ -1,121 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export const video = cv({
-  base: "starwind-video aspect-video h-auto w-full",
-});
-
-export interface VideoProps extends HTMLAttributes<"video">, HTMLAttributes<"iframe"> {
-  src: string;
-  title?: string;
-  autoplay?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  controls?: boolean;
-  poster?: string;
-}
-
-type Props = VideoProps;
-
-const {
-  class: className,
-  src,
-  title = "Video",
-  autoplay = false,
-  muted = false,
-  loop = false,
-  controls = true,
-  poster,
-  ...rest
-} = Astro.props;
-
-/**
- * Detects the video type from the src URL
- */
-function getVideoType(url: string): "youtube" | "youtube-shorts" | "native" {
-  if (url.includes("youtube.com/shorts/") || url.includes("youtu.be/shorts/")) {
-    return "youtube-shorts";
-  }
-  if (
-    url.includes("youtube.com") ||
-    url.includes("youtu.be") ||
-    url.includes("youtube-nocookie.com")
-  ) {
-    return "youtube";
-  }
-  return "native";
-}
-
-/**
- * Extracts YouTube video ID from various URL formats
- */
-function getYouTubeId(url: string): string | null {
-  const patterns = [
-    /youtube\.com\/shorts\/([^?&]+)/,
-    /youtube\.com\/watch\?v=([^&]+)/,
-    /youtube\.com\/embed\/([^?&]+)/,
-    /youtu\.be\/([^?&]+)/,
-    /youtube-nocookie\.com\/embed\/([^?&]+)/,
-  ];
-
-  for (const pattern of patterns) {
-    const match = url.match(pattern);
-    if (match) return match[1] || null;
-  }
-  return null;
-}
-
-/**
- * Builds YouTube embed URL with parameters
- */
-function buildYouTubeEmbedUrl(videoId: string, _isShort: boolean): string {
-  const params = new URLSearchParams();
-  if (autoplay) params.set("autoplay", "1");
-  if (muted) params.set("mute", "1");
-  if (loop) {
-    params.set("loop", "1");
-    params.set("playlist", videoId);
-  }
-  if (!controls) params.set("controls", "0");
-
-  const baseUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
-  const queryString = params.toString();
-  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
-}
-
-const videoType = getVideoType(src);
-const youtubeId = videoType !== "native" ? getYouTubeId(src) : null;
-const isShort = videoType === "youtube-shorts";
-const embedUrl = youtubeId ? buildYouTubeEmbedUrl(youtubeId, isShort) : null;
----
-
-{
-  videoType === "native" || !embedUrl ? (
-    <video
-      class:list={[video(), className]}
-      src={src}
-      autoplay={autoplay}
-      muted={muted}
-      loop={loop}
-      controls={controls}
-      poster={poster}
-      {...rest}
-      data-slot="video"
-    >
-      <track kind="captions" />
-    </video>
-  ) : (
-    <iframe
-      class:list={[video(), className]}
-      src={embedUrl}
-      title={title}
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      referrerpolicy="strict-origin-when-cross-origin"
-      allowfullscreen
-      data-video-type={isShort ? "youtube-shorts" : "youtube"}
-      {...rest}
-      data-slot="video"
-    />
-  )
-}

package/src/config/cookies.ts

@@ -1,5 +0,0 @@
-// Cookies / runtime-policy
-
-export const COOKIE_TTL = {
-  oneYear: 60 * 60 * 24 * 365
-} as const

package/src/config/links.ts

@@ -1,4 +0,0 @@
-export const LINKS = {
-  edgeKitsSite: "https://edgekits.dev",
-  twitter: `https://x.com/GaryEdgeKits`
-} as const

package/src/domain/cms/index.ts

@@ -1 +0,0 @@
-export * from "./types"

package/src/domain/cms/types.ts

@@ -1,20 +0,0 @@
-/**
- * Minimal shape of an Astro Content Collection entry. Explicitly allowing undefined for all common
- * SEO fields to resolve monorepo type clashes.
- */
-export interface BaseCMSContentEntry {
-  id: string
-  data: {
-    title?: string | undefined | null
-    description?: string | undefined | null
-    publishedDate?: Date | undefined | null
-    [key: string]: unknown
-  }
-}
-
-/**
- * Type guard to safely identify a content entry that satisfies the base library requirements.
- */
-export function isBaseCMSContentEntry(entry: unknown): entry is BaseCMSContentEntry {
-  return !!entry && typeof entry === "object" && entry !== null && "id" in entry && "data" in entry
-}

package/src/domain/i18n/constants.ts

@@ -1,21 +0,0 @@
-// Locales Configuration
-export const SUPPORTED_LOCALES = ["en", "pt", "ja", "de", "es"] as const
-export type SupportedLocales = (typeof SUPPORTED_LOCALES)[number]
-
-// Default locale
-export const DEFAULT_LOCALE: SupportedLocales = "en"
-
-// Missing translation banner flag
-export const ENABLE_MISSING_TRANSLATION_BANNER = true
-
-// UI Labels
-export const LANGUAGES: Record<SupportedLocales, string> = {
-  en: "English",
-  pt: "Português",
-  ja: "日本語",
-  de: "Deutsch",
-  es: "Español"
-}
-
-// Cookie name
-export const LANG_COOKIE_NAME = "lang"