@wakastellar/ui 2.1.2 → 2.3.2

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

@@ -0,0 +1,275 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useEffect, useState, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { ExternalLink } from "lucide-react"
+
+export type SponsoredCardVariant = "article" | "product" | "compact" | "horizontal"
+
+export interface WakaSponsoredCardProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Card variant */
+  variant?: SponsoredCardVariant
+  /** GPT ad unit path */
+  adUnitPath?: string
+  /** Show image */
+  showImage?: boolean
+  /** Show description */
+  showDescription?: boolean
+  /** Show CTA button */
+  showCta?: boolean
+  /** Image aspect ratio */
+  aspectRatio?: "video" | "square" | "portrait"
+  /** Custom class name */
+  className?: string
+  /** Callback when clicked */
+  onClick?: () => void
+  /** Callback when loaded */
+  onLoad?: () => void
+}
+
+export function WakaSponsoredCard({
+  slotId,
+  variant = "article",
+  adUnitPath,
+  showImage = true,
+  showDescription = true,
+  showCta = true,
+  aspectRatio = "video",
+  className,
+  onClick,
+  onLoad,
+}: WakaSponsoredCardProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading")
+  const [ad, setAd] = useState<CustomAd | null>(null)
+
+  // Load ad
+  useEffect(() => {
+    if (!isReady || !isVisible || hasConsent === false) return
+
+    const loadAd = async () => {
+      try {
+        const customAd = await getCustomAd(slotId)
+        if (customAd) {
+          setAd(customAd)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+          trackEvent({ type: "impression", slotId, timestamp: new Date() })
+          onLoad?.()
+
+          // Fire tracking
+          if (customAd.impressionUrl) {
+            fetch(customAd.impressionUrl, { mode: "no-cors" }).catch(() => {})
+          }
+        } else {
+          setStatus("error")
+        }
+      } catch {
+        setStatus("error")
+      }
+    }
+
+    loadAd()
+  }, [isReady, isVisible, hasConsent, slotId, getCustomAd, trackEvent, onLoad])
+
+  const handleClick = useCallback(() => {
+    if (!ad) return
+
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onClick?.()
+
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }, [ad, slotId, trackEvent, onClick])
+
+  const aspectRatioClasses = {
+    video: "aspect-video",
+    square: "aspect-square",
+    portrait: "aspect-[3/4]",
+  }
+
+  if (status === "error" || !ad) {
+    return null // Don't show anything if no ad
+  }
+
+  if (status === "loading") {
+    return (
+      <div
+        ref={containerRef}
+        className={cn(
+          "rounded-lg border bg-muted animate-pulse",
+          variant === "horizontal" ? "h-32" : "h-64",
+          className
+        )}
+      />
+    )
+  }
+
+  // Horizontal variant
+  if (variant === "horizontal") {
+    return (
+      <div ref={containerRef} className={cn("group", className)}>
+        <button
+          onClick={handleClick}
+          className="w-full flex gap-4 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors text-left"
+        >
+          {showImage && ad.imageUrl && (
+            <div className="w-24 h-24 flex-shrink-0 rounded-md overflow-hidden bg-muted">
+              <img
+                src={ad.imageUrl}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <h3 className="font-semibold text-sm line-clamp-2 group-hover:text-primary transition-colors">
+                {ad.title}
+              </h3>
+              <WakaSponsoredBadge sponsor={ad.sponsor} size="sm" showIcon={false} />
+            </div>
+
+            {showDescription && ad.description && (
+              <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
+                {ad.description}
+              </p>
+            )}
+
+            {showCta && ad.cta && (
+              <span className="text-xs text-primary font-medium inline-flex items-center gap-1">
+                {ad.cta}
+                <ExternalLink className="h-3 w-3" />
+              </span>
+            )}
+          </div>
+        </button>
+      </div>
+    )
+  }
+
+  // Compact variant
+  if (variant === "compact") {
+    return (
+      <div ref={containerRef} className={cn("group", className)}>
+        <button
+          onClick={handleClick}
+          className="w-full p-2 rounded-lg border bg-card hover:bg-accent/50 transition-colors text-left"
+        >
+          <div className="flex items-center gap-2 mb-1">
+            <WakaSponsoredBadge sponsor={ad.sponsor} size="sm" showIcon={false} />
+          </div>
+          <h3 className="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors">
+            {ad.title}
+          </h3>
+        </button>
+      </div>
+    )
+  }
+
+  // Product variant
+  if (variant === "product") {
+    return (
+      <div ref={containerRef} className={cn("group", className)}>
+        <button
+          onClick={handleClick}
+          className="w-full rounded-lg border bg-card overflow-hidden hover:shadow-md transition-shadow text-left"
+        >
+          {showImage && ad.imageUrl && (
+            <div className={cn("relative bg-muted", aspectRatioClasses[aspectRatio])}>
+              <img
+                src={ad.imageUrl}
+                alt=""
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+              <div className="absolute top-2 left-2">
+                <WakaSponsoredBadge variant="subtle" size="sm" showIcon={false} />
+              </div>
+            </div>
+          )}
+
+          <div className="p-4">
+            <h3 className="font-semibold text-sm mb-1 group-hover:text-primary transition-colors line-clamp-2">
+              {ad.title}
+            </h3>
+
+            {showDescription && ad.description && (
+              <p className="text-xs text-muted-foreground line-clamp-2 mb-3">
+                {ad.description}
+              </p>
+            )}
+
+            {showCta && ad.cta && (
+              <span className="inline-flex items-center justify-center w-full px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
+                {ad.cta}
+              </span>
+            )}
+          </div>
+        </button>
+      </div>
+    )
+  }
+
+  // Article variant (default)
+  return (
+    <div ref={containerRef} className={cn("group", className)}>
+      <button
+        onClick={handleClick}
+        className="w-full rounded-lg border bg-card overflow-hidden hover:shadow-md transition-shadow text-left"
+      >
+        {showImage && ad.imageUrl && (
+          <div className={cn("relative bg-muted", aspectRatioClasses[aspectRatio])}>
+            <img
+              src={ad.imageUrl}
+              alt=""
+              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+            <div className="absolute top-2 right-2">
+              <WakaSponsoredBadge variant="subtle" size="sm" />
+            </div>
+          </div>
+        )}
+
+        <div className="p-4">
+          {!showImage && (
+            <div className="mb-2">
+              <WakaSponsoredBadge sponsor={ad.sponsor} size="sm" />
+            </div>
+          )}
+
+          <h3 className="font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
+            {ad.title}
+          </h3>
+
+          {showDescription && ad.description && (
+            <p className="text-sm text-muted-foreground line-clamp-3 mb-3">
+              {ad.description}
+            </p>
+          )}
+
+          {showCta && ad.cta && (
+            <span className="text-sm text-primary font-medium inline-flex items-center gap-1">
+              {ad.cta}
+              <ExternalLink className="h-4 w-4" />
+            </span>
+          )}
+        </div>
+      </button>
+    </div>
+  )
+}
+
+export default WakaSponsoredCard

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

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { WakaSponsoredCard, type SponsoredCardVariant } from "../waka-sponsored-card"
+
+export interface WakaSponsoredFeedProps<T> {
+  /** Content items */
+  items: T[]
+  /** Render function for content items */
+  renderItem: (item: T, index: number) => React.ReactNode
+  /** Ad slot IDs to inject */
+  adSlots: Array<{
+    slotId: string
+    adUnitPath?: string
+  }>
+  /** Insert ad every N items */
+  adFrequency?: number
+  /** Starting position for first ad (0-indexed) */
+  adStartPosition?: number
+  /** Card variant for ads */
+  adVariant?: SponsoredCardVariant
+  /** Maximum number of ads to show */
+  maxAds?: number
+  /** Grid columns for items */
+  columns?: 1 | 2 | 3 | 4
+  /** Gap between items */
+  gap?: "sm" | "md" | "lg"
+  /** Custom class name */
+  className?: string
+  /** Key extractor for items */
+  keyExtractor?: (item: T, index: number) => string
+}
+
+export function WakaSponsoredFeed<T>({
+  items,
+  renderItem,
+  adSlots,
+  adFrequency = 5,
+  adStartPosition = 2,
+  adVariant = "article",
+  maxAds,
+  columns = 1,
+  gap = "md",
+  className,
+  keyExtractor,
+}: WakaSponsoredFeedProps<T>) {
+  const gapClasses = {
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+  }
+
+  const columnClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+  }
+
+  // Calculate positions for ads
+  const getAdsForPosition = (position: number): typeof adSlots[number] | null => {
+    if (position < adStartPosition) return null
+
+    const adIndex = Math.floor((position - adStartPosition) / (adFrequency + 1))
+    const isAdPosition = (position - adStartPosition) % (adFrequency + 1) === 0
+
+    if (!isAdPosition) return null
+    if (maxAds !== undefined && adIndex >= maxAds) return null
+    if (adIndex >= adSlots.length) return null
+
+    return adSlots[adIndex]
+  }
+
+  // Build the feed with interspersed ads
+  const feedItems: Array<{ type: "content"; item: T; index: number } | { type: "ad"; slot: typeof adSlots[number] }> = []
+  let contentIndex = 0
+  let position = 0
+
+  while (contentIndex < items.length) {
+    const adSlot = getAdsForPosition(position)
+
+    if (adSlot) {
+      feedItems.push({ type: "ad", slot: adSlot })
+    } else {
+      feedItems.push({ type: "content", item: items[contentIndex], index: contentIndex })
+      contentIndex++
+    }
+    position++
+  }
+
+  return (
+    <div
+      className={cn(
+        "grid",
+        columnClasses[columns],
+        gapClasses[gap],
+        className
+      )}
+    >
+      {feedItems.map((feedItem, idx) => {
+        if (feedItem.type === "ad") {
+          return (
+            <WakaSponsoredCard
+              key={`ad-${feedItem.slot.slotId}`}
+              slotId={feedItem.slot.slotId}
+              adUnitPath={feedItem.slot.adUnitPath}
+              variant={adVariant}
+            />
+          )
+        }
+
+        const key = keyExtractor
+          ? keyExtractor(feedItem.item, feedItem.index)
+          : `item-${feedItem.index}`
+
+        return (
+          <div key={key}>
+            {renderItem(feedItem.item, feedItem.index)}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default WakaSponsoredFeed

package/src/components/waka-spotlight/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { safeNavigate } from "../../utils/security"
 import { Search, X, Clock, ArrowRight, FileText, User, Settings, Folder, ExternalLink } from "lucide-react"
 
 // ============================================================================
@@ -196,7 +197,7 @@ export function WakaSpotlight({
   const handleSelect = (item: SpotlightResult) => {
     item.action?.()
     if (item.href) {
-      window.location.href = item.href
+      safeNavigate(item.href)
     }
     onOpenChange(false)
   }

package/src/components/waka-success-explosion/index.tsx

@@ -64,13 +64,13 @@ const sizeConfig = {
 }
 
 // ============================================================================
-// Default colors
+// Default colors (using CSS variables for theme support)
 // ============================================================================
 
 const defaultColors = {
-  primary: "#22c55e", // green-500
-  secondary: "#3b82f6", // blue-500
-  accent: "#f59e0b", // amber-500
+  primary: "hsl(var(--success))",
+  secondary: "hsl(var(--info))",
+  accent: "hsl(var(--warning))",
 }
 
 // ============================================================================