@wakastellar/ui 2.3.0 → 2.3.2

package/src/components/waka-outstream-video/index.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useState, useEffect } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { X, Volume2, VolumeX } from "lucide-react"
+
+export interface WakaOutstreamVideoProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Collapse when video ends or is closed */
+  collapseOnEnd?: boolean
+  /** Collapse animation duration (ms) */
+  collapseDuration?: number
+  /** Start muted */
+  muted?: boolean
+  /** Show close button */
+  showClose?: boolean
+  /** Close after seconds (0 = manual only) */
+  closeAfter?: number
+  /** Minimum visibility to start playing (0-1) */
+  visibilityThreshold?: number
+  /** Custom class name */
+  className?: string
+  /** Callback when video completes */
+  onComplete?: () => void
+  /** Callback when closed */
+  onClose?: () => void
+}
+
+export function WakaOutstreamVideo({
+  slotId,
+  collapseOnEnd = true,
+  collapseDuration = 300,
+  muted = true,
+  showClose = true,
+  closeAfter = 0,
+  visibilityThreshold = 0.5,
+  className,
+  onComplete,
+  onClose,
+}: WakaOutstreamVideoProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef, visibilityThreshold)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | "collapsed">("loading")
+  const [ad, setAd] = useState<CustomAd | null>(null)
+  const [isMuted, setIsMuted] = useState(muted)
+  const [isCollapsing, setIsCollapsing] = useState(false)
+  const [containerHeight, setContainerHeight] = useState<number | "auto">("auto")
+  const [hasStarted, setHasStarted] = useState(false)
+
+  // Load ad
+  useEffect(() => {
+    if (!isReady || hasConsent === false) return
+
+    const loadAd = async () => {
+      try {
+        const customAd = await getCustomAd(slotId)
+        if (customAd?.videoUrl) {
+          setAd(customAd)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+        } else {
+          setStatus("collapsed")
+        }
+      } catch {
+        setStatus("collapsed")
+      }
+    }
+
+    loadAd()
+  }, [isReady, hasConsent, slotId, getCustomAd, trackEvent])
+
+  // Play/pause based on visibility
+  useEffect(() => {
+    if (!videoRef.current || status !== "loaded") return
+
+    if (isVisible) {
+      videoRef.current.play().then(() => {
+        if (!hasStarted) {
+          setHasStarted(true)
+          trackEvent({ type: "impression", slotId, timestamp: new Date() })
+          if (ad?.impressionUrl) {
+            fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+          }
+        }
+      }).catch(() => {})
+    } else {
+      videoRef.current.pause()
+    }
+  }, [isVisible, status, hasStarted, slotId, ad, trackEvent])
+
+  // Auto-close timer
+  useEffect(() => {
+    if (closeAfter === 0 || !hasStarted) return
+
+    const timer = setTimeout(() => {
+      handleCollapse()
+    }, closeAfter * 1000)
+
+    return () => clearTimeout(timer)
+  }, [closeAfter, hasStarted])
+
+  // Set initial height after load
+  useEffect(() => {
+    if (status === "loaded" && containerRef.current) {
+      setContainerHeight(containerRef.current.offsetHeight)
+    }
+  }, [status])
+
+  const handleCollapse = () => {
+    if (collapseOnEnd) {
+      setIsCollapsing(true)
+      setContainerHeight(0)
+      setTimeout(() => {
+        setStatus("collapsed")
+        onClose?.()
+      }, collapseDuration)
+    } else {
+      setStatus("collapsed")
+      onClose?.()
+    }
+  }
+
+  const handleEnded = () => {
+    trackEvent({ type: "viewable", slotId, timestamp: new Date(), data: { completed: true } })
+    onComplete?.()
+    handleCollapse()
+  }
+
+  const handleToggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted
+      setIsMuted(!isMuted)
+    }
+  }
+
+  const handleClick = () => {
+    if (!ad) return
+
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }
+
+  if (status === "collapsed" || status === "error") {
+    return null
+  }
+
+  if (status === "loading") {
+    return (
+      <div
+        ref={containerRef}
+        className={cn("w-full aspect-video bg-muted animate-pulse rounded-lg", className)}
+      />
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative w-full overflow-hidden rounded-lg bg-black",
+        isCollapsing && "transition-all",
+        className
+      )}
+      style={{
+        height: containerHeight,
+        transitionDuration: `${collapseDuration}ms`,
+      }}
+    >
+      <div className="relative aspect-video">
+        {/* Video */}
+        <video
+          ref={videoRef}
+          src={ad?.videoUrl}
+          muted={isMuted}
+          playsInline
+          loop={false}
+          onClick={handleClick}
+          onEnded={handleEnded}
+          className="w-full h-full object-contain cursor-pointer"
+        />
+
+        {/* Overlay controls */}
+        <div className="absolute inset-0 pointer-events-none">
+          {/* Top bar */}
+          <div className="absolute top-0 left-0 right-0 p-3 flex items-center justify-between bg-gradient-to-b from-black/50 to-transparent pointer-events-auto">
+            <WakaSponsoredBadge variant="dark" size="sm" sponsor={ad?.sponsor} />
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleToggleMute}
+                className="p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors"
+              >
+                {isMuted ? (
+                  <VolumeX className="h-4 w-4 text-white" />
+                ) : (
+                  <Volume2 className="h-4 w-4 text-white" />
+                )}
+              </button>
+
+              {showClose && (
+                <button
+                  onClick={handleCollapse}
+                  className="p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors"
+                >
+                  <X className="h-4 w-4 text-white" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* CTA button */}
+          {ad?.cta && (
+            <div className="absolute bottom-3 left-3 right-3 pointer-events-auto">
+              <button
+                onClick={handleClick}
+                className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors text-center"
+              >
+                {ad.cta}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WakaOutstreamVideo

package/src/components/waka-player-card/index.tsx

@@ -59,7 +59,7 @@ const rarityConfig: Record<PlayerRarity, {
   common: {
     borderColor: "border-zinc-400 dark:border-zinc-500",
     bgGradient: "from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900",
-    glowColor: "rgba(161, 161, 170, 0.3)",
+    glowColor: "hsl(var(--muted-foreground) / 0.3)",
     textColor: "text-zinc-600 dark:text-zinc-400",
     label: "Common",
     frameGradient: "from-zinc-300 via-zinc-400 to-zinc-300 dark:from-zinc-600 dark:via-zinc-500 dark:to-zinc-600",
@@ -67,7 +67,7 @@ const rarityConfig: Record<PlayerRarity, {
   rare: {
     borderColor: "border-blue-400 dark:border-blue-500",
     bgGradient: "from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900",
-    glowColor: "rgba(59, 130, 246, 0.4)",
+    glowColor: "hsl(var(--info) / 0.4)",
     textColor: "text-blue-600 dark:text-blue-400",
     label: "Rare",
     frameGradient: "from-blue-300 via-blue-500 to-blue-300 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600",
@@ -75,7 +75,7 @@ const rarityConfig: Record<PlayerRarity, {
   epic: {
     borderColor: "border-purple-400 dark:border-purple-500",
     bgGradient: "from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900",
-    glowColor: "rgba(168, 85, 247, 0.5)",
+    glowColor: "hsl(var(--chart-2) / 0.5)",
     textColor: "text-purple-600 dark:text-purple-400",
     label: "Epic",
     frameGradient: "from-purple-300 via-purple-500 to-purple-300 dark:from-purple-600 dark:via-purple-400 dark:to-purple-600",
@@ -83,7 +83,7 @@ const rarityConfig: Record<PlayerRarity, {
   legendary: {
     borderColor: "border-amber-400 dark:border-amber-500",
     bgGradient: "from-amber-50 to-orange-100 dark:from-amber-950 dark:to-orange-900",
-    glowColor: "rgba(245, 158, 11, 0.5)",
+    glowColor: "hsl(var(--warning) / 0.5)",
     textColor: "text-amber-600 dark:text-amber-400",
     label: "Legendary",
     frameGradient: "from-yellow-300 via-amber-500 to-orange-400 dark:from-yellow-500 dark:via-amber-400 dark:to-orange-500",
@@ -91,7 +91,7 @@ const rarityConfig: Record<PlayerRarity, {
   mythic: {
     borderColor: "border-rose-400 dark:border-rose-500",
     bgGradient: "from-rose-50 via-pink-50 to-violet-50 dark:from-rose-950 dark:via-pink-950 dark:to-violet-950",
-    glowColor: "rgba(244, 63, 94, 0.6)",
+    glowColor: "hsl(var(--destructive) / 0.6)",
     textColor: "text-rose-600 dark:text-rose-400",
     label: "Mythic",
     frameGradient: "from-rose-400 via-pink-500 to-violet-500 dark:from-rose-500 dark:via-pink-400 dark:to-violet-400",

package/src/components/waka-quota-bar/index.tsx

@@ -53,10 +53,10 @@ export interface WakaQuotaBarProps {
 // ============================================================================
 
 const defaultColors: WakaQuotaBarColors = {
-  normal: "bg-green-500",
-  warning: "bg-yellow-500",
-  danger: "bg-red-500",
-  overflow: "bg-red-600",
+  normal: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  overflow: "bg-destructive",
 }
 
 // ============================================================================

package/src/components/waka-radar-score/index.tsx

@@ -171,14 +171,14 @@ export function WakaRadarScore({
       .join(" ") + " Z"
   }
 
-  // Default colors for datasets
+  // Default colors for datasets - using CSS variables for theme support
   const defaultColors = [
-    "#3b82f6", // blue
-    "#ef4444", // red
-    "#22c55e", // green
-    "#f59e0b", // amber
-    "#8b5cf6", // violet
-    "#ec4899", // pink
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))",
+    "hsl(var(--chart-3))",
+    "hsl(var(--chart-4))",
+    "hsl(var(--chart-5))",
+    "hsl(var(--primary))",
   ]
 
   const getDatasetColor = (index: number, dataset: RadarDataSet) => {
@@ -443,7 +443,7 @@ export interface WakaRadarScoreSimpleProps
 
 export function WakaRadarScoreSimple({
   data,
-  color = "#3b82f6",
+  color = "hsl(var(--chart-1))",
   fillOpacity = 0.2,
   ...props
 }: WakaRadarScoreSimpleProps) {
@@ -494,14 +494,14 @@ export function WakaRadarScoreCompare({
       id: "a",
       label: dataA.label,
       data: dataA.data,
-      color: dataA.color || "#3b82f6",
+      color: dataA.color || "hsl(var(--chart-1))",
       fillOpacity: 0.15,
     },
     {
       id: "b",
       label: dataB.label,
       data: dataB.data,
-      color: dataB.color || "#ef4444",
+      color: dataB.color || "hsl(var(--chart-2))",
       fillOpacity: 0.15,
     },
   ]

package/src/components/waka-scratch-card/index.tsx

@@ -100,6 +100,7 @@ export interface UseScratchCardReturn {
 // Rarity Configuration
 // ============================================================================
 
+// Rarity configuration using CSS variables for theme support
 const rarityConfig: Record<PrizeRarity, {
   gradient: string
   glowColor: string
@@ -111,7 +112,7 @@ const rarityConfig: Record<PrizeRarity, {
 }> = {
   common: {
     gradient: "from-slate-400 to-slate-600",
-    glowColor: "#94a3b8",
+    glowColor: "hsl(var(--muted-foreground))",
     borderColor: "border-slate-400",
     bgColor: "bg-slate-100",
     textColor: "text-slate-600",
@@ -120,7 +121,7 @@ const rarityConfig: Record<PrizeRarity, {
   },
   rare: {
     gradient: "from-blue-400 to-blue-600",
-    glowColor: "#60a5fa",
+    glowColor: "hsl(var(--info))",
     borderColor: "border-blue-400",
     bgColor: "bg-blue-100",
     textColor: "text-blue-600",
@@ -129,7 +130,7 @@ const rarityConfig: Record<PrizeRarity, {
   },
   epic: {
     gradient: "from-purple-400 to-purple-600",
-    glowColor: "#a855f7",
+    glowColor: "hsl(var(--chart-3))",
     borderColor: "border-purple-400",
     bgColor: "bg-purple-100",
     textColor: "text-purple-600",
@@ -138,7 +139,7 @@ const rarityConfig: Record<PrizeRarity, {
   },
   legendary: {
     gradient: "from-amber-400 via-orange-500 to-red-500",
-    glowColor: "#fbbf24",
+    glowColor: "hsl(var(--warning))",
     borderColor: "border-amber-400",
     bgColor: "bg-amber-100",
     textColor: "text-amber-600",

package/src/components/waka-server-rack/index.tsx

@@ -49,26 +49,27 @@ export interface WakaServerRackProps {
 // Constants
 // ============================================================================
 
+// Status colors using CSS variables for theme support
 const STATUS_COLORS = {
   online: {
-    led: "#22c55e",
-    glow: "rgba(34, 197, 94, 0.6)",
-    bg: "rgba(34, 197, 94, 0.1)",
+    led: "hsl(var(--success))",
+    glow: "hsl(var(--success) / 0.6)",
+    bg: "hsl(var(--success) / 0.1)",
   },
   warning: {
-    led: "#eab308",
-    glow: "rgba(234, 179, 8, 0.6)",
-    bg: "rgba(234, 179, 8, 0.1)",
+    led: "hsl(var(--warning))",
+    glow: "hsl(var(--warning) / 0.6)",
+    bg: "hsl(var(--warning) / 0.1)",
   },
   offline: {
-    led: "#ef4444",
-    glow: "rgba(239, 68, 68, 0.6)",
-    bg: "rgba(239, 68, 68, 0.1)",
+    led: "hsl(var(--destructive))",
+    glow: "hsl(var(--destructive) / 0.6)",
+    bg: "hsl(var(--destructive) / 0.1)",
   },
   maintenance: {
-    led: "#3b82f6",
-    glow: "rgba(59, 130, 246, 0.6)",
-    bg: "rgba(59, 130, 246, 0.1)",
+    led: "hsl(var(--info))",
+    glow: "hsl(var(--info) / 0.6)",
+    bg: "hsl(var(--info) / 0.1)",
   },
 }
 
@@ -87,8 +88,8 @@ interface MetricBarProps {
 
 function MetricBar({ value, label, color, animated }: MetricBarProps) {
   const getBarColor = () => {
-    if (value >= 90) return "#ef4444"
-    if (value >= 70) return "#eab308"
+    if (value >= 90) return "hsl(var(--destructive))"
+    if (value >= 70) return "hsl(var(--warning))"
     return color
   }
 
@@ -245,20 +246,20 @@ function ServerUnitRow({
                 <MetricBar
                   value={server.cpu}
                   label="CPU"
-                  color="#3b82f6"
+                  color="hsl(var(--chart-1))"
                   animated={animated}
                 />
                 <MetricBar
                   value={server.ram}
                   label="RAM"
-                  color="#8b5cf6"
+                  color="hsl(var(--chart-3))"
                   animated={animated}
                 />
                 {server.height >= 3 && (
                   <MetricBar
                     value={server.disk}
                     label="DSK"
-                    color="#06b6d4"
+                    color="hsl(var(--info))"
                     animated={animated}
                   />
                 )}
@@ -279,8 +280,8 @@ function ServerUnitRow({
           <div className="flex items-center gap-0.5">
             {server.network && (
               <div className="flex flex-col items-end mr-2 text-[7px] font-mono text-zinc-500">
-                <span className="text-green-500">{"\u25B2"} {server.network.out}</span>
-                <span className="text-blue-400">{"\u25BC"} {server.network.in}</span>
+                <span className="text-success">{"\u25B2"} {server.network.out}</span>
+                <span className="text-info">{"\u25BC"} {server.network.in}</span>
               </div>
             )}
             {/* Drive activity indicators */}
@@ -344,21 +345,21 @@ function ServerUnitRow({
               <span className="font-mono">{server.height}U</span>
             </div>
             <div className="border-t border-zinc-700 my-2" />
-            <MetricBar value={server.cpu} label="CPU" color="#3b82f6" />
-            <MetricBar value={server.ram} label="RAM" color="#8b5cf6" />
-            <MetricBar value={server.disk} label="DSK" color="#06b6d4" />
+            <MetricBar value={server.cpu} label="CPU" color="hsl(var(--chart-1))" />
+            <MetricBar value={server.ram} label="RAM" color="hsl(var(--chart-3))" />
+            <MetricBar value={server.disk} label="DSK" color="hsl(var(--info))" />
             {server.network && (
               <>
                 <div className="border-t border-zinc-700 my-2" />
                 <div className="flex justify-between text-zinc-400">
                   <span>Network In</span>
-                  <span className="font-mono text-blue-400">
+                  <span className="font-mono text-info">
                     {server.network.in} Mbps
                   </span>
                 </div>
                 <div className="flex justify-between text-zinc-400">
                   <span>Network Out</span>
-                  <span className="font-mono text-green-500">
+                  <span className="font-mono text-success">
                     {server.network.out} Mbps
                   </span>
                 </div>
@@ -626,10 +627,10 @@ export function WakaServerRack({
         style={{
           background: `radial-gradient(ellipse at center, ${
             servers.some((s) => s.status === "offline")
-              ? "rgba(239,68,68,0.05)"
+              ? "hsl(var(--destructive) / 0.05)"
               : servers.some((s) => s.status === "warning")
-                ? "rgba(234,179,8,0.05)"
-                : "rgba(34,197,94,0.03)"
+                ? "hsl(var(--warning) / 0.05)"
+                : "hsl(var(--success) / 0.03)"
           } 0%, transparent 70%)`,
           filter: "blur(20px)",
         }}

package/src/components/waka-sponsored-badge/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export type SponsoredBadgeVariant = "default" | "subtle" | "outline" | "dark"
+export type SponsoredBadgeSize = "sm" | "md" | "lg"
+
+export interface WakaSponsoredBadgeProps {
+  /** Sponsor name (optional) */
+  sponsor?: string
+  /** Badge variant */
+  variant?: SponsoredBadgeVariant
+  /** Badge size */
+  size?: SponsoredBadgeSize
+  /** Show info icon */
+  showIcon?: boolean
+  /** Custom label text */
+  label?: string
+  /** Custom class name */
+  className?: string
+  /** Callback when info is clicked */
+  onInfoClick?: () => void
+}
+
+export function WakaSponsoredBadge({
+  sponsor,
+  variant = "default",
+  size = "sm",
+  showIcon = true,
+  label = "Sponsored",
+  className,
+  onInfoClick,
+}: WakaSponsoredBadgeProps) {
+  const variantClasses: Record<SponsoredBadgeVariant, string> = {
+    default: "bg-muted text-muted-foreground border-transparent",
+    subtle: "bg-black/50 text-white border-transparent backdrop-blur-sm",
+    outline: "bg-transparent text-muted-foreground border-muted-foreground/30",
+    dark: "bg-black/70 text-white border-transparent",
+  }
+
+  const sizeClasses: Record<SponsoredBadgeSize, string> = {
+    sm: "text-[10px] px-1.5 py-0.5 gap-1",
+    md: "text-xs px-2 py-1 gap-1.5",
+    lg: "text-sm px-2.5 py-1 gap-2",
+  }
+
+  const iconSizes: Record<SponsoredBadgeSize, string> = {
+    sm: "h-2.5 w-2.5",
+    md: "h-3 w-3",
+    lg: "h-3.5 w-3.5",
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded border font-medium",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+    >
+      <span className="whitespace-nowrap">
+        {sponsor ? `${label} by ${sponsor}` : label}
+      </span>
+
+      {showIcon && (
+        <button
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            onInfoClick?.()
+          }}
+          className={cn(
+            "rounded-full hover:opacity-70 transition-opacity focus:outline-none focus:ring-1 focus:ring-current",
+            iconSizes[size]
+          )}
+          aria-label="Why am I seeing this ad?"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            className="w-full h-full"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}
+
+export default WakaSponsoredBadge