@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/src/components/waka-kubernetes-overview/index.tsx

@@ -225,6 +225,10 @@ function ClusterSummary({
   const totalMem = nodes.reduce((acc, n) => acc + n.memory.total, 0)
   const usedMem = nodes.reduce((acc, n) => acc + n.memory.used, 0)
 
+  // Guard empty cluster: x/0 is NaN, and NaN.toFixed(0) renders the string "NaN".
+  const pct = (used: number, total: number) =>
+    total > 0 ? (used / total) * 100 : 0
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-b">
       <div className="space-y-1">
@@ -232,24 +236,24 @@ function ClusterSummary({
         <div className="text-2xl font-bold">
           {healthyNodes}/{nodes.length}
         </div>
-        <Progress value={(healthyNodes / nodes.length) * 100} className="h-1" />
+        <Progress value={pct(healthyNodes, nodes.length)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">Pods</div>
         <div className="text-2xl font-bold">
           {runningPods}/{pods.length}
         </div>
-        <Progress value={(runningPods / pods.length) * 100} className="h-1" />
+        <Progress value={pct(runningPods, pods.length)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">CPU Usage</div>
-        <div className="text-2xl font-bold">{((usedCpu / totalCpu) * 100).toFixed(0)}%</div>
-        <Progress value={(usedCpu / totalCpu) * 100} className="h-1" />
+        <div className="text-2xl font-bold">{pct(usedCpu, totalCpu).toFixed(0)}%</div>
+        <Progress value={pct(usedCpu, totalCpu)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">Memory Usage</div>
-        <div className="text-2xl font-bold">{((usedMem / totalMem) * 100).toFixed(0)}%</div>
-        <Progress value={(usedMem / totalMem) * 100} className="h-1" />
+        <div className="text-2xl font-bold">{pct(usedMem, totalMem).toFixed(0)}%</div>
+        <Progress value={pct(usedMem, totalMem)} className="h-1" />
       </div>
     </div>
   )

package/src/components/waka-level-progress/index.tsx

@@ -335,7 +335,8 @@ export function WakaLevelProgress({
   const xpInCurrentLevel = currentXp - xpAtCurrentLevel
   const xpNeededForLevel = xpForNextLevel - xpAtCurrentLevel
   const progressPercent = Math.min(100, (xpInCurrentLevel / xpNeededForLevel) * 100)
-  const xpRemaining = xpForNextLevel - currentXp
+  // Clamp so an over-threshold XP doesn't render a negative "X XP to next level".
+  const xpRemaining = Math.max(0, xpForNextLevel - currentXp)
 
   // Size configurations
   const sizeConfig = {

package/src/components/waka-log-viewer/index.tsx

@@ -195,7 +195,9 @@ export function WakaLogViewer({
           return (
             log.message.toLowerCase().includes(query) ||
             log.source?.toLowerCase().includes(query) ||
-            JSON.stringify(log.metadata).toLowerCase().includes(query)
+            // metadata is optional: JSON.stringify(undefined) returns the value
+            // `undefined`, so `.toLowerCase()` would throw — coalesce to {} first.
+            JSON.stringify(log.metadata ?? {}).toLowerCase().includes(query)
           )
         }
         return true

package/src/components/waka-magnetic-button/index.tsx

@@ -179,7 +179,7 @@ function useMagneticEffect(
   const { enabled, radius, strength, duration } = options
   const [transform, setTransform] = React.useState({ x: 0, y: 0 })
   const [contentTransform, setContentTransform] = React.useState({ x: 0, y: 0 })
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const targetRef = React.useRef({ x: 0, y: 0 })
   const currentRef = React.useRef({ x: 0, y: 0 })
   const isActiveRef = React.useRef(false)

package/src/components/waka-mention-input/index.tsx

@@ -482,7 +482,7 @@ export const WakaMentionInput = React.forwardRef<HTMLTextAreaElement, WakaMentio
     const [searchQuery, setSearchQuery] = React.useState("")
     const [loading, setLoading] = React.useState(false)
 
-    const searchTimeoutRef = React.useRef<NodeJS.Timeout>()
+    const searchTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)
     const triggerStartRef = React.useRef<number>(-1)
 
     // Sync with external value
@@ -514,6 +514,15 @@ export const WakaMentionInput = React.forwardRef<HTMLTextAreaElement, WakaMentio
       setMentions(parsedMentions)
     }, [triggers])
 
+    // Parse mentions from the initial (possibly controlled) value once on mount:
+    // the sync effect above only runs when externalValue !== internal value, but
+    // at mount they're equal, so pre-filled markup wouldn't render chips until the
+    // first edit. parseMentions only setMentions (no setValue) -> no render loop.
+    React.useEffect(() => {
+      if (value) parseMentions(value)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     // Get plain text
     const plainText = React.useMemo(() => {
       let text = value

package/src/components/waka-order-tracker/index.tsx

@@ -268,13 +268,15 @@ export function useOrderTracker(
 
   const currentStepIndex = React.useMemo(() => {
     if (!order) return 0
-    return statusOrder.indexOf(order.status)
+    // indexOf returns -1 for an unknown status; clamp to 0 so progress never
+    // goes negative (a -1 index yielded e.g. -25%).
+    return Math.max(0, statusOrder.indexOf(order.status))
   }, [order])
 
   const isDelivered = order?.status === "delivered"
 
   const progressPercentage = React.useMemo(() => {
-    return (currentStepIndex / (statusOrder.length - 1)) * 100
+    return Math.max(0, Math.min(100, (currentStepIndex / (statusOrder.length - 1)) * 100))
   }, [currentStepIndex])
 
   const timeUntilDelivery = React.useMemo(() => {

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

@@ -254,7 +254,11 @@ function ContainerCard({
                   </span>
                 </div>
                 <Progress
-                  value={(container.resources.cpu.used / container.resources.cpu.limit) * 100}
+                  value={
+                    container.resources.cpu.limit > 0
+                      ? Math.min(100, (container.resources.cpu.used / container.resources.cpu.limit) * 100)
+                      : 0
+                  }
                   className="h-1.5"
                 />
               </div>
@@ -268,7 +272,11 @@ function ContainerCard({
                   </span>
                 </div>
                 <Progress
-                  value={(container.resources.memory.used / container.resources.memory.limit) * 100}
+                  value={
+                    container.resources.memory.limit > 0
+                      ? Math.min(100, (container.resources.memory.used / container.resources.memory.limit) * 100)
+                      : 0
+                  }
                   className="h-1.5"
                 />
               </div>

package/src/components/waka-presence-indicator/index.tsx

@@ -140,7 +140,7 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
   })
 
   // Auto-away timer
-  const autoAwayTimerRef = React.useRef<NodeJS.Timeout>()
+  const autoAwayTimerRef = React.useRef<NodeJS.Timeout>(undefined)
   const lastActivityRef = React.useRef<number>(Date.now())
 
   // Persist to localStorage

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

@@ -1176,7 +1176,11 @@ export function useQuests({ initialQuests, onQuestComplete, onQuestClaimed }: Us
         )
 
         const completedCount = updatedObjectives.filter((o) => o.completed).length
-        const progress = (completedCount / updatedObjectives.length) * 100
+        // Guard against a quest with no objectives (0/0 -> NaN).
+        const progress =
+          updatedObjectives.length > 0
+            ? (completedCount / updatedObjectives.length) * 100
+            : 0
         const allComplete = completedCount === updatedObjectives.length
 
         const newStatus = allComplete
@@ -1220,7 +1224,11 @@ export function useQuests({ initialQuests, onQuestComplete, onQuestClaimed }: Us
         })
 
         const completedCount = updatedObjectives.filter((o) => o.completed).length
-        const progress = (completedCount / updatedObjectives.length) * 100
+        // Guard against a quest with no objectives (0/0 -> NaN).
+        const progress =
+          updatedObjectives.length > 0
+            ? (completedCount / updatedObjectives.length) * 100
+            : 0
         const allComplete = completedCount === updatedObjectives.length
 
         const newStatus = allComplete

package/src/components/waka-rating-input/index.tsx

@@ -228,10 +228,13 @@ function RatingIcon({
       return filled ? customFilledIcon : customIcon
     }
     if (customIcon) {
-      return React.cloneElement(customIcon as React.ReactElement, {
-        className: iconClasses,
-        style: { color: filled ? currentColor : inactiveColor },
-      })
+      return React.cloneElement(
+        customIcon as React.ReactElement<{ className?: string; style?: React.CSSProperties }>,
+        {
+          className: iconClasses,
+          style: { color: filled ? currentColor : inactiveColor },
+        }
+      )
     }
 
     return (

package/src/components/waka-reaction-picker/index.tsx

@@ -702,6 +702,9 @@ interface EmojiGridProps {
   onHover: (emoji: Emoji | CustomEmoji | null) => void
   selectedIndex: number
   showRecent: boolean
+  /** When true (search results), show `emojis` as-is across all categories
+   *  instead of re-filtering by activeCategory. */
+  searchMode?: boolean
 }
 
 function EmojiGrid({
@@ -715,18 +718,24 @@ function EmojiGrid({
   onHover,
   selectedIndex,
   showRecent,
+  searchMode = false,
 }: EmojiGridProps) {
   const gridRef = React.useRef<HTMLDivElement>(null)
 
   // Get emojis for current category
   const categoryEmojis = React.useMemo(() => {
+    // Search results span all categories — show them as-is. Re-filtering by
+    // activeCategory dropped cross-category matches (e.g. "pizza" -> 🍕 in food).
+    if (searchMode) {
+      return emojis
+    }
     if (activeCategory === "recent" && showRecent) {
       return recentEmojis
         .map((e) => EMOJI_DATA.find((ed) => ed.emoji === e || applySkintone(ed.emoji, skinTone) === e))
         .filter(Boolean) as Emoji[]
     }
     return emojis.filter((e) => e.category === activeCategory)
-  }, [emojis, activeCategory, recentEmojis, skinTone, showRecent])
+  }, [emojis, activeCategory, recentEmojis, skinTone, showRecent, searchMode])
 
   // Scroll selected into view
   React.useEffect(() => {
@@ -1029,7 +1038,8 @@ export function WakaReactionPicker({
         emojis={searchQuery ? filteredEmojis : EMOJI_DATA}
         customEmojis={customEmojis}
         recentEmojis={recentEmojis}
-        activeCategory={searchQuery ? "smileys" : activeCategory}
+        activeCategory={activeCategory}
+        searchMode={!!searchQuery}
         skinTone={skinTone}
         columns={columns}
         onSelect={handleSelect}

package/src/components/waka-resource-gauge/index.tsx

@@ -284,14 +284,16 @@ export function WakaResourceGauge({
 }: WakaResourceGaugeProps) {
   const [displayValue, setDisplayValue] = React.useState(0)
   const [isAnimating, setIsAnimating] = React.useState(false)
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
 
   const config = SIZE_CONFIG[size]
   const variantConfig = VARIANT_CONFIG[variant]
 
-  // Calculate percentage
-  const percentage = Math.min(100, Math.max(0, (value / max) * 100))
-  const displayPercentage = Math.min(100, Math.max(0, (displayValue / max) * 100))
+  // Calculate percentage. Guard max <= 0: (value / 0) * 100 is NaN/Infinity,
+  // which slips past Math.min/max and renders literally as "NaN".
+  const percentage = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0
+  const displayPercentage =
+    max > 0 ? Math.min(100, Math.max(0, (displayValue / max) * 100)) : 0
 
   // Get color based on current value
   const { color, glowColor, zone } = getColorForValue(percentage, thresholds)

package/src/components/waka-resource-pool/index.tsx

@@ -989,14 +989,17 @@ export function useResourcePool({ initialPools, onPoolChange }: UseResourcePoolO
     const pool = pools.find((p) => p.id === poolId)
     if (!pool) return null
 
+    // Guard total <= 0: dividing by it yields Infinity/-Infinity (non-finite
+    // percentages). An empty pool reports 0% rather than non-finite values.
+    const pct = (n: number) => (pool.total > 0 ? (n / pool.total) * 100 : 0)
     return {
       used: pool.used,
       reserved: pool.reserved || 0,
       available: pool.total - pool.used - (pool.reserved || 0),
       total: pool.total,
-      usedPercent: (pool.used / pool.total) * 100,
-      reservedPercent: ((pool.reserved || 0) / pool.total) * 100,
-      availablePercent: ((pool.total - pool.used - (pool.reserved || 0)) / pool.total) * 100,
+      usedPercent: pct(pool.used),
+      reservedPercent: pct(pool.reserved || 0),
+      availablePercent: pct(pool.total - pool.used - (pool.reserved || 0)),
       isNearCapacity: isNearCapacity(pool),
       isCritical: isCritical(pool),
     }

package/src/components/waka-rich-text-editor/index.tsx

@@ -117,6 +117,12 @@ export interface WakaRichTextEditorProps {
   description?: string
   /** Mode éditable */
   editable?: boolean
+  /**
+   * Si false (défaut), Tiptap reporte le rendu de l'éditeur au prochain tick
+   * pour éviter les hydration mismatches Next.js / React 19.
+   * Mettre à true uniquement dans un environnement purement client (ex. SPA Vite).
+   */
+  immediatelyRender?: boolean
 }
 
 // Configuration par défaut de la toolbar
@@ -148,6 +154,7 @@ export const WakaRichTextEditor = React.forwardRef<HTMLDivElement, WakaRichTextE
       label,
       description,
       editable = true,
+      immediatelyRender = false,
     },
     ref
   ) => {
@@ -210,6 +217,7 @@ export const WakaRichTextEditor = React.forwardRef<HTMLDivElement, WakaRichTextE
           label={label}
           description={description}
           editable={editable}
+          immediatelyRender={immediatelyRender}
           linkUrl={linkUrl}
           setLinkUrl={setLinkUrl}
           editor={editor}
@@ -267,6 +275,7 @@ const TiptapEditorComponent = React.forwardRef<HTMLDivElement, WakaRichTextEdito
       label,
       description,
       editable,
+      immediatelyRender = false,
       linkUrl,
       setLinkUrl,
       setEditor,
@@ -293,6 +302,7 @@ const TiptapEditorComponent = React.forwardRef<HTMLDivElement, WakaRichTextEdito
       ],
       content: value,
       editable: editable && !disabled,
+      immediatelyRender,
       onUpdate: ({ editor: ed }: { editor: TiptapEditor }) => {
         const html = ed.getHTML()
         if (!maxLength || html.length <= maxLength) {

package/src/components/waka-schedule-picker/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey as getLocalDateKey } from "../../utils/local-date"
 import {
   Clock,
   Calendar,
@@ -214,6 +215,7 @@ function isSameDay(date1: Date, date2: Date): boolean {
   )
 }
 
+
 function isWithinBusinessHours(
   time: string,
   businessHours?: BusinessHours,
@@ -257,7 +259,7 @@ function generateDaySlots(
       const isBusinessHour = isWithinBusinessHours(startTime, businessHours, dayOfWeek)
 
       slots.push({
-        id: `${date.toISOString().split("T")[0]}-${startTime}`,
+        id: `${getLocalDateKey(date)}-${startTime}`,
         date: new Date(date),
         startTime,
         endTime,
@@ -712,7 +714,7 @@ export function WakaSchedulePicker({
   const slotsByDate = React.useMemo(() => {
     const grouped = new Map<string, TimeSlot[]>()
     slots.forEach((slot) => {
-      const dateKey = slot.date.toISOString().split("T")[0]
+      const dateKey = getLocalDateKey(slot.date)
       if (!grouped.has(dateKey)) {
         grouped.set(dateKey, [])
       }
@@ -895,7 +897,7 @@ export function WakaSchedulePicker({
         <div className="hidden md:block overflow-x-auto">
           <div className="grid grid-cols-7 gap-2 min-w-[700px]">
             {weekDates.map((date, index) => {
-              const dateKey = date.toISOString().split("T")[0]
+              const dateKey = getLocalDateKey(date)
               const daySlots = slotsByDate.get(dateKey) || []
               const isToday = isSameDay(date, today)
               const dayOfWeek = date.getDay()
@@ -964,7 +966,7 @@ export function WakaSchedulePicker({
           <ScrollArea className="h-[400px]">
             <div className="space-y-3">
               {weekDates.map((date) => {
-                const dateKey = date.toISOString().split("T")[0]
+                const dateKey = getLocalDateKey(date)
                 const daySlots = slotsByDate.get(dateKey) || []
                 const isToday = isSameDay(date, today)
                 const dayOfWeek = date.getDay()

package/src/components/waka-season-pass/index.tsx

@@ -37,7 +37,7 @@ export interface SeasonPassReward {
   /** Reward type identifier */
   type: string
   /** Reward value (e.g., amount, item name, etc.) */
-  value: any
+  value: React.ReactNode
   /** Custom icon for the reward */
   icon?: React.ReactNode
   /** Whether the reward has been claimed */

package/src/components/waka-skill-tree/index.tsx

@@ -1043,6 +1043,9 @@ export function useSkillTree({
     resetSkills,
     totalUnlocked: skills.filter(s => s.unlocked).length,
     totalSkills: skills.length,
-    progress: (skills.filter(s => s.unlocked).length / skills.length) * 100,
+    // Guard against an empty skill list (0/0 -> NaN).
+    progress: skills.length > 0
+      ? (skills.filter(s => s.unlocked).length / skills.length) * 100
+      : 0,
   }
 }

package/src/components/waka-sla-tracker/index.tsx

@@ -118,7 +118,10 @@ const SIZE_CONFIG = {
 
 function getSLAStatus(uptime: number, target: number): SLAStatus {
   if (uptime < target) return "breached"
-  const buffer = uptime - target
+  // Round the buffer before comparing to the thresholds: 99.95 - 99.9 is
+  // 0.04999… in floating point and would misclassify the exact 0.05 boundary
+  // (likewise 99.91 - 99.9 = 0.00999… at the 0.01 boundary).
+  const buffer = Math.round((uptime - target) * 1e4) / 1e4
   if (buffer < 0.01) return "critical"
   if (buffer < 0.05) return "warning"
   return "healthy"

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

@@ -87,7 +87,7 @@ export function WakaSpotlight({
   const [previewItem, setPreviewItem] = React.useState<SpotlightResult | null>(null)
 
   const inputRef = React.useRef<HTMLInputElement>(null)
-  const debounceRef = React.useRef<NodeJS.Timeout>()
+  const debounceRef = React.useRef<NodeJS.Timeout>(undefined)
 
   // Debounced search
   React.useEffect(() => {

package/src/components/waka-status-matrix/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey as getDateKey, parseLocalDate as parseDate } from "../../utils/local-date"
 
 // ============================================
 // TYPES
@@ -115,17 +116,6 @@ const STATUS_LABELS: Record<StatusType, string> = {
 // HELPER FUNCTIONS
 // ============================================
 
-function getDateKey(date: Date): string {
-  return date.toISOString().split("T")[0]
-}
-
-function parseDate(date: string | Date): Date {
-  if (typeof date === "string") {
-    return new Date(date)
-  }
-  return date
-}
-
 function getDateRange(view: ViewType, startDate?: Date, endDate?: Date): { start: Date; end: Date } {
   const now = new Date()
   let start: Date

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

@@ -177,7 +177,14 @@ export const WakaSuccessExplosion = React.forwardRef<
     const startTimeRef = React.useRef<number>(0)
 
     const config = sizeConfig[size]
-    const colors = [primaryColor, secondaryColor, accentColor]
+    // Memoize so `colors` keeps a stable reference: it feeds `explode`'s deps,
+    // and `explode` feeds the `trigger` effect — a fresh array every render made
+    // `explode` unstable, re-firing the effect and re-exploding on every render
+    // (an infinite render loop while `trigger` is true).
+    const colors = React.useMemo(
+      () => [primaryColor, secondaryColor, accentColor],
+      [primaryColor, secondaryColor, accentColor]
+    )
 
     const explode = React.useCallback(() => {
       setIsVisible(true)

package/src/components/waka-theme-creator/index.tsx

@@ -25,7 +25,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
 import { Badge } from "../badge"
 import { Separator } from "../separator"
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../alert-dialog"
-import { useToast } from "../../hooks/useToast"
+import { useToast } from "../../hooks/use-toast"
 import { 
   Upload, 
   Download, 

package/src/components/waka-thread-view/index.tsx

@@ -307,7 +307,9 @@ function ThreadMessageComponent({
   showReplyButton = true,
 }: ThreadMessageProps) {
   const hasReplies = message.replies && message.replies.length > 0
-  const replyCount = hasReplies ? countTotalReplies(message) + message.replies!.length : 0
+  // countTotalReplies already includes message.replies.length (plus nested) —
+  // adding it again double-counted the direct replies (e.g. "4 replies" for 2).
+  const replyCount = hasReplies ? countTotalReplies(message) : 0
   const canNest = depth < maxDepth
 
   return (

package/src/components/waka-tooltip-tour/index.tsx

@@ -556,7 +556,7 @@ export function WakaTooltipTour({
   const [isTransitioning, setIsTransitioning] = React.useState(false)
 
   const tooltipRef = React.useRef<HTMLDivElement>(null)
-  const autoAdvanceTimerRef = React.useRef<NodeJS.Timeout>()
+  const autoAdvanceTimerRef = React.useRef<NodeJS.Timeout>(undefined)
 
   const step = steps[currentStep]
   const isFirstStep = currentStep === 0

package/src/components/waka-tournament-bracket/index.tsx

@@ -1107,46 +1107,56 @@ export function useTournamentBracket({
       matchId: string,
       updates: Partial<Pick<Match, "score1" | "score2" | "winnerId" | "status">>
     ) => {
-      setRounds((prev) =>
-        prev.map((round) => ({
-          ...round,
-          matches: round.matches.map((match) => {
-            if (match.id !== matchId) return match
-
-            const updated = { ...match, ...updates }
-
-            // If match completed, propagate winner to next round
-            if (updated.status === "completed" && updated.winnerId) {
-              const nextRoundIdx = match.round + 1
-              const nextMatchIdx = Math.floor(match.position / 2)
-              const isFirstSlot = match.position % 2 === 0
-
-              const winner =
+      setRounds((prev) => {
+        // First locate the target match and, if it completes, compute where its
+        // winner must go. Doing the propagation as a NESTED setRounds inside this
+        // updater (the previous approach) is impure: the inner update is computed
+        // against stale state and overwritten, so the winner never reached the
+        // next round. Resolve both in a single pure pass instead.
+        let propagation: {
+          nextRoundIdx: number
+          nextMatchIdx: number
+          isFirstSlot: boolean
+          winner: Match["participant1"]
+        } | null = null
+
+        for (const round of prev) {
+          const match = round.matches.find((m) => m.id === matchId)
+          if (!match) continue
+          const updated = { ...match, ...updates }
+          if (updated.status === "completed" && updated.winnerId) {
+            propagation = {
+              nextRoundIdx: match.round + 1,
+              nextMatchIdx: Math.floor(match.position / 2),
+              isFirstSlot: match.position % 2 === 0,
+              winner:
                 updated.winnerId === match.participant1?.id
                   ? match.participant1
-                  : match.participant2
-
-              setRounds((currentRounds) =>
-                currentRounds.map((r, rIdx) => {
-                  if (rIdx !== nextRoundIdx) return r
-                  return {
-                    ...r,
-                    matches: r.matches.map((m, mIdx) => {
-                      if (mIdx !== nextMatchIdx) return m
-                      return {
-                        ...m,
-                        [isFirstSlot ? "participant1" : "participant2"]: winner,
-                      }
-                    }),
-                  }
-                })
-              )
+                  : match.participant2,
             }
+          }
+          break
+        }
 
-            return updated
+        return prev.map((round, rIdx) => ({
+          ...round,
+          matches: round.matches.map((m, mIdx) => {
+            if (m.id === matchId) return { ...m, ...updates }
+            if (
+              propagation &&
+              rIdx === propagation.nextRoundIdx &&
+              mIdx === propagation.nextMatchIdx
+            ) {
+              return {
+                ...m,
+                [propagation.isFirstSlot ? "participant1" : "participant2"]:
+                  propagation.winner,
+              }
+            }
+            return m
           }),
         }))
-      )
+      })
     },
     []
   )

package/src/components/waka-treemap-chart/index.tsx

@@ -320,16 +320,19 @@ export function useTreemapChart(options: UseTreemapChartOptions): UseTreemapChar
         isHorizontal: boolean,
         nodeIndex: number
       ) => {
-        const rowArea = row.reduce(
-          (sum, n) => sum + (n.value / totalValue) * (w * h),
-          0
-        )
-        const rowLength = rowArea / shortSide
+        // Guard totalValue <= 0: (value / 0) yields NaN, which propagates through
+        // rowArea/rowLength into NaN cell width/height. An all-zero dataset lays
+        // out as zero-area cells instead.
+        const rowArea =
+          totalValue > 0
+            ? row.reduce((sum, n) => sum + (n.value / totalValue) * (w * h), 0)
+            : 0
+        const rowLength = shortSide > 0 ? rowArea / shortSide : 0
         let offset = 0
 
         row.forEach((node, i) => {
-          const nodeArea = (node.value / totalValue) * (w * h)
-          const nodeDim = nodeArea / rowLength
+          const nodeArea = totalValue > 0 ? (node.value / totalValue) * (w * h) : 0
+          const nodeDim = rowLength > 0 ? nodeArea / rowLength : 0
 
           const nx = isHorizontal ? x : x + offset
           const ny = isHorizontal ? y + offset : y

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

@@ -132,7 +132,7 @@ export function WakaVideo({
   const [showControls, setShowControls] = React.useState(true)
   const [playbackSpeed, setPlaybackSpeed] = React.useState(1)
   const [currentQuality, setCurrentQuality] = React.useState<string>("")
-  const controlsTimeoutRef = React.useRef<NodeJS.Timeout>()
+  const controlsTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)
 
   // Get sources array
   const sources = React.useMemo(() => {