@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/src/components/toggle-group/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+import { toggleVariants } from "../toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/typography/index.tsx

@@ -120,7 +120,7 @@ export interface HeadingProps
  */
 const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   ({ className, level = "h2", variant, asChild = false, ...props }, ref) => {
-    const Comp = (asChild ? Slot : level) as any
+    const Comp = (asChild ? Slot : level) as React.ElementType
     return (
       <Comp
         className={cn(headingVariants({ level, variant }), className)}

package/src/components/waka-ad-provider/index.tsx

@@ -114,7 +114,7 @@ export function useAdContext() {
 
 // ==================== Hooks ====================
 
-export function useAdVisibility(ref: React.RefObject<HTMLElement>, threshold = 0.5) {
+export function useAdVisibility(ref: React.RefObject<HTMLElement | null>, threshold = 0.5) {
   const [isVisible, setIsVisible] = useState(false)
   const [viewableTime, setViewableTime] = useState(0)
   const viewableStartRef = useRef<number | null>(null)
@@ -194,7 +194,7 @@ export function WakaAdProvider({ children, config, onEvent }: WakaAdProviderProp
           })
         }
 
-        window.googletag = window.googletag || ({ cmd: [] } as Window["googletag"])
+        window.googletag = window.googletag || ({ cmd: [] } as unknown as Window["googletag"])
         window.googletag.cmd.push(() => {
           window.googletag.pubads().enableSingleRequest()
           if (config.enableLazyLoad) {

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

@@ -36,7 +36,7 @@ export interface AdmincrumbItem {
   id: string
   name: string
   type: "partner" | "network" | "customer"
-  metadata?: Record<string, any>
+  metadata?: { count?: number } & Record<string, unknown>
 }
 
 export interface AdmincrumbLevel {
@@ -153,7 +153,7 @@ const AdmincrumbSelector = React.forwardRef<
           role="combobox"
           aria-expanded={open}
           className={cn(
-            selectorVariants({ variant: variant as any }),
+            selectorVariants({ variant }),
             selected?.id ? "border-primary/50" : ""
           )}
           disabled={isLoading || items.length === 0}

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

@@ -404,16 +404,21 @@ export function useAllocationMatrix({
   const setAllocation = React.useCallback(
     (resourceId: string, consumerId: string, value: number) => {
       const key = getAllocationKey(resourceId, consumerId)
+      // Clamp once and use it for BOTH the stored value and the callback —
+      // previously the Map stored Math.max(0, value) but the callback reported
+      // the raw (possibly negative) value, so consumers saw a value the matrix
+      // never actually held.
+      const clamped = Math.max(0, value)
       setAllocations((prev) => {
         const next = new Map(prev)
-        if (value === 0) {
+        if (clamped === 0) {
           next.delete(key)
         } else {
-          next.set(key, Math.max(0, value))
+          next.set(key, clamped)
         }
         return next
       })
-      onAllocationChange?.(resourceId, consumerId, value)
+      onAllocationChange?.(resourceId, consumerId, clamped)
     },
     [onAllocationChange]
   )

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

@@ -16,6 +16,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey } from "../../utils/local-date"
 import {
   Activity,
   LogIn,
@@ -422,7 +423,7 @@ function formatFullTimestamp(date: Date): string {
 
 function formatLocation(location?: AuditLocation): string | null {
   if (!location) return null
-  const parts = []
+  const parts: string[] = []
   if (location.city) parts.push(location.city)
   if (location.country) parts.push(location.country)
   return parts.length > 0 ? parts.join(", ") : null
@@ -997,7 +998,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
               <input
                 type="date"
                 aria-label="Start date"
-                value={filters.startDate?.toISOString().split("T")[0] || ""}
+                value={filters.startDate ? localDateKey(filters.startDate) : ""}
                 onChange={(e) =>
                   onFilterChange({
                     ...filters,
@@ -1010,7 +1011,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
               <input
                 type="date"
                 aria-label="End date"
-                value={filters.endDate?.toISOString().split("T")[0] || ""}
+                value={filters.endDate ? localDateKey(filters.endDate) : ""}
                 onChange={(e) =>
                   onFilterChange({
                     ...filters,

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

@@ -86,7 +86,7 @@ export const WakaAutocomplete = React.forwardRef<HTMLButtonElement, WakaAutocomp
     const [search, setSearch] = React.useState("")
     const [options, setOptions] = React.useState<AutocompleteOption[]>(initialOptions)
     const [loading, setLoading] = React.useState(false)
-    const searchTimeoutRef = React.useRef<NodeJS.Timeout>()
+    const searchTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)
 
     // Synchroniser les options quand elles changent
     React.useEffect(() => {

package/src/components/waka-capacity-planner/index.tsx

@@ -306,7 +306,10 @@ export function useCapacityPlanner({
   // Get status for current usage
   const getResourceStatus = React.useCallback(
     (resource: ResourceData): ThresholdStatus => {
-      const percentage = (resource.current / resource.total) * 100
+      // Guard total <= 0: (current / 0) * 100 is Infinity, silently classed as
+      // "critical" — treat an undefined capacity as 0% instead.
+      const percentage =
+        resource.total > 0 ? (resource.current / resource.total) * 100 : 0
       return getStatusFromPercentage(percentage, thresholds)
     },
     [thresholds]

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

@@ -588,7 +588,9 @@ export const WakaCarousel: React.FC<WakaCarouselProps> = ({
           />
         ) : currentImage ? (
           <img
-            ref={el => imageRefs.current[safeIndex] = el}
+            ref={el => {
+              imageRefs.current[safeIndex] = el
+            }}
             src={currentImage.src}
             alt={currentImage.alt}
             className={cn(

package/src/components/waka-cart-summary/index.tsx

@@ -627,15 +627,20 @@ export const WakaCartSummary: React.FC<WakaCartSummaryProps> = ({
       shipping = 0
     }
 
-    // Calculate discount
+    // Calculate discount. A "shipping" discount only zeroes the shipping line —
+    // it must NOT also reduce the taxable product amount, otherwise the shipping
+    // cost is removed twice (once by `shipping = 0`, once via `taxableAmount`).
+    // Track it separately so it still shows as savings without being subtracted
+    // from the products total.
     let discountAmount = 0
+    let shippingDiscount = 0
     if (discount) {
       if (discount.type === "percentage") {
         discountAmount = subtotal * (discount.value / 100)
       } else if (discount.type === "fixed") {
         discountAmount = Math.min(discount.value, subtotal)
       } else if (discount.type === "shipping") {
-        discountAmount = shipping
+        shippingDiscount = shipping
         shipping = 0
       }
     }
@@ -650,7 +655,7 @@ export const WakaCartSummary: React.FC<WakaCartSummaryProps> = ({
       tax,
       taxRate,
       shipping,
-      discount: discountAmount,
+      discount: discountAmount + shippingDiscount,
       total: Math.max(0, total),
     }
   }, [items, shippingCost, freeShippingThreshold, discount, taxRate])

package/src/components/waka-charts/hooks/useRechartsLoader.ts

@@ -184,23 +184,25 @@ export function useRechartsLoader(): UseRechartsLoaderResult {
         const recharts = await import("recharts")
 
         if (mounted) {
-          // Use type assertions to avoid strict type incompatibilities with recharts
+          // Cast through unknown to bridge the narrow local prop types
+          // with Recharts' own (broader) component types without using `any`.
           setComponents({
-            ResponsiveContainer: recharts.ResponsiveContainer as any,
-            BarChart: recharts.BarChart as any,
-            LineChart: recharts.LineChart as any,
-            AreaChart: recharts.AreaChart as any,
-            PieChart: recharts.PieChart as any,
-            Bar: recharts.Bar as any,
-            Line: recharts.Line as any,
-            Area: recharts.Area as any,
-            Pie: recharts.Pie as any,
-            Cell: recharts.Cell as any,
-            XAxis: recharts.XAxis as any,
-            YAxis: recharts.YAxis as any,
-            CartesianGrid: recharts.CartesianGrid as any,
-            Tooltip: recharts.Tooltip as any,
-            Legend: recharts.Legend as any,
+            ResponsiveContainer:
+              recharts.ResponsiveContainer as unknown as RechartsComponents["ResponsiveContainer"],
+            BarChart: recharts.BarChart as unknown as RechartsComponents["BarChart"],
+            LineChart: recharts.LineChart as unknown as RechartsComponents["LineChart"],
+            AreaChart: recharts.AreaChart as unknown as RechartsComponents["AreaChart"],
+            PieChart: recharts.PieChart as unknown as RechartsComponents["PieChart"],
+            Bar: recharts.Bar as unknown as RechartsComponents["Bar"],
+            Line: recharts.Line as unknown as RechartsComponents["Line"],
+            Area: recharts.Area as unknown as RechartsComponents["Area"],
+            Pie: recharts.Pie as unknown as RechartsComponents["Pie"],
+            Cell: recharts.Cell as unknown as RechartsComponents["Cell"],
+            XAxis: recharts.XAxis as unknown as RechartsComponents["XAxis"],
+            YAxis: recharts.YAxis as unknown as RechartsComponents["YAxis"],
+            CartesianGrid: recharts.CartesianGrid as unknown as RechartsComponents["CartesianGrid"],
+            Tooltip: recharts.Tooltip as unknown as RechartsComponents["Tooltip"],
+            Legend: recharts.Legend as unknown as RechartsComponents["Legend"],
             // SVG elements from React, not Recharts
             defs: "defs" as unknown as RechartsComponents["defs"],
             linearGradient: "linearGradient" as unknown as RechartsComponents["linearGradient"],

package/src/components/waka-cohort-table/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey } from "../../utils/local-date"
 import { Download, Info, TrendingDown, TrendingUp, Users } from "lucide-react"
 
 // ============================================================================
@@ -466,7 +467,7 @@ export function WakaCohortTable({
   const handleExport = React.useCallback(
     (format: "csv" | "json") => {
       const label = metricLabel || metric
-      const filename = `cohort-${label}-${new Date().toISOString().split("T")[0]}`
+      const filename = `cohort-${label}-${localDateKey(new Date())}`
 
       if (onExport) {
         onExport({ format, filename, includeMetadata: true })

package/src/components/waka-compare-period/index.tsx

@@ -1080,11 +1080,21 @@ export function useComparePeriod(
   const {
     initialPreset = "last_week",
     initialMetrics = [],
-    referenceDate = new Date(),
+    referenceDate: referenceDateOption,
     autoRefreshInterval,
     onRefresh,
   } = options
 
+  // Stabilize referenceDate. A `= new Date()` default created a fresh Date on
+  // every render; since it's a dependency of the period-recompute effect below,
+  // that effect ran every render -> setPeriods -> re-render -> new Date -> …, an
+  // infinite render loop pinning the CPU (froze any consumer of this hook that
+  // didn't pass a stable referenceDate). Memoize so the default is created once.
+  const referenceDate = React.useMemo(
+    () => referenceDateOption ?? new Date(),
+    [referenceDateOption]
+  )
+
   const [preset, setPreset] = React.useState(initialPreset)
   const [metrics, setMetrics] = React.useState<Metric[]>(initialMetrics)
   const [isLoading, setIsLoading] = React.useState(false)

package/src/components/waka-contribution-graph/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey, parseLocalDate } from "../../utils/local-date"
 
 // ============================================
 // TYPES
@@ -91,14 +92,8 @@ function getEndOfYear(year: number): Date {
   return new Date(year, 11, 31)
 }
 
-function formatDate(date: Date): string {
-  return date.toISOString().split("T")[0]
-}
-
-function parseDate(date: string | Date): Date {
-  if (date instanceof Date) return date
-  return new Date(date)
-}
+const formatDate = localDateKey
+const parseDate = parseLocalDate
 
 function isSameDay(date1: Date, date2: Date): boolean {
   return (

package/src/components/waka-credit-balance/index.tsx

@@ -134,7 +134,7 @@ function useAnimatedCounter(
   duration: number = 800
 ): number {
   const [displayValue, setDisplayValue] = React.useState(targetValue)
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const previousValueRef = React.useRef(targetValue)
 
   React.useEffect(() => {

package/src/components/waka-credit-card-input/index.tsx

@@ -165,7 +165,7 @@ function formatCardNumber(value: string, cardType: CardType): string {
   }
 
   // Standard 4-4-4-4 format
-  const parts = []
+  const parts: string[] = []
   for (let i = 0; i < cleaned.length; i += 4) {
     parts.push(cleaned.slice(i, i + 4))
   }
@@ -937,7 +937,7 @@ export function WakaCreditCardInput({
                 type={cvvVisible ? "text" : "password"}
                 inputMode="numeric"
                 autoComplete="cc-csc"
-                placeholder={placeholders?.cvv || cardData.cardType === "amex" ? "1234" : "123"}
+                placeholder={placeholders?.cvv ?? (cardData.cardType === "amex" ? "1234" : "123")}
                 value={cardData.cvv}
                 onChange={(e) => updateCvv(e.target.value)}
                 onFocus={handleCvvFocus}

package/src/components/waka-credit-meter/index.tsx

@@ -167,7 +167,7 @@ function useAnimatedValue(
   duration: number = 800
 ): number {
   const [displayValue, setDisplayValue] = React.useState(animated ? 0 : targetValue)
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const previousValueRef = React.useRef(animated ? 0 : targetValue)
 
   React.useEffect(() => {

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

@@ -240,13 +240,15 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
     const { t } = useTranslation()
     const [open, setOpen] = React.useState(false)
     const [internalValue, setInternalValue] = React.useState<Date | DateRange | Date[] | null>(
-      variant === "range" && value && !('from' in value) ? { from: value as Date, to: undefined } : value as any
+      variant === "range" && value && !('from' in value)
+        ? { from: value as Date, to: undefined }
+        : (value as Date | DateRange | Date[] | null)
     )
     const [validationError, setValidationError] = React.useState<string | null>(null)
     const [hoveredDate, setHoveredDate] = React.useState<Date | null>(null)
 
     // Locales supportées
-    const localeMap: Record<string, any> = {
+    const localeMap: Record<string, typeof fr> = {
       fr,
       en: enUS,
       es,
@@ -433,7 +435,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
       }
 
       // Validation
-      if (newValue && !(newValue as any).from && !Array.isArray(newValue)) {
+      if (newValue && !Array.isArray(newValue) && !("from" in newValue)) {
         const error = validateDate(newValue as Date)
         if (error) {
           setValidationError(error)
@@ -538,7 +540,11 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
 
     // Render du composant principal
     const renderDatePicker = () => {
-    const pickerProps: any = {
+    // react-datepicker's props form a discriminated union (selectsRange vs
+    // selectsMultiple vs single) that this object intentionally spans at
+    // runtime; we infer the literal shape here and bridge it to the component's
+    // props via `unknown` at the spread site instead of using `any`.
+    const pickerProps = {
       selected: variant === "range" 
         ? (internalValue as DateRange)?.from 
         : variant === "multiple"
@@ -559,6 +565,9 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
         timeCaption: t?.("time") || "Heure",
         dateFormat: displayFormat,
         locale: locale,
+        // Truncate weekday header to 2 chars (e.g. "lu", "ma") so full FR
+        // names ("lundi", "mercredi"...) don't overflow the grid columns.
+        formatWeekDay: (name: string) => name.charAt(0).toUpperCase() + name.charAt(1),
         placeholderText: placeholder,
         disabled,
         minDate,
@@ -568,7 +577,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
         showWeekNumbers,
         filterDate: (date: Date) => !isDateDisabled(date),
         dayClassName: (date: Date) => {
-          const classes = []
+          const classes: string[] = []
           if (isDateHighlighted(date)) {
             classes.push("highlighted-date")
           }
@@ -618,7 +627,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
           )}
           
           <div className="flex-1">
-            <DatePicker {...pickerProps} />
+            <DatePicker {...(pickerProps as unknown as React.ComponentProps<typeof DatePicker>)} />
             
             {showSelectionInfo && internalValue && (
               <div className="mt-3 p-2 bg-muted rounded-md text-xs space-y-1">

package/src/components/waka-datetime-picker.form-integration/index.tsx

@@ -59,7 +59,7 @@ export function WakaDateTimePickerForm<T extends FieldValues>({
     <Controller
       name={name}
       control={control}
-      defaultValue={defaultValue as any}
+      defaultValue={defaultValue as React.ComponentProps<typeof Controller<T>>["defaultValue"]}
       render={({ field, fieldState }) => (
         <WakaDateTimePicker
           {...props}

package/src/components/waka-doc-code-block/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import { escapeHtml } from "../../utils/security"
 import { Copy, Check, FileCode } from "lucide-react"
 import { Button } from "../button"
 import Prism from "prismjs"
@@ -85,12 +86,20 @@ export function WakaDocCodeBlock({
         <pre className="p-4 text-sm leading-relaxed">
           <code>
             {lines.map((line, i) => {
-              let highlightedLine = line
-              try {
-                if (language && Prism.languages[language]) {
+              // Default to an HTML-escaped version of the raw line so the
+              // dangerouslySetInnerHTML below can never inject untrusted HTML
+              // (P0 security fix). Only the trusted Prism.highlight() output
+              // — which produces sanitized HTML by construction — bypasses
+              // the escape.
+              let highlightedLine = escapeHtml(line)
+              if (language && Prism.languages[language]) {
+                try {
                   highlightedLine = Prism.highlight(line, Prism.languages[language], language)
+                } catch {
+                  // Prism failure → keep escaped fallback.
+                  highlightedLine = escapeHtml(line)
                 }
-              } catch {}
+              }
 
               return (
                 <div

package/src/components/waka-doc-renderer/index.tsx

@@ -38,7 +38,7 @@ export function WakaDocRenderer({ content, onHeadingsExtracted, className }: Wak
           import("rehype-raw"),
         ])
         setMdModule({
-          ReactMarkdown: rm.default,
+          ReactMarkdown: rm.default as MarkdownModule["ReactMarkdown"],
           remarkGfm: gfm.default || gfm,
           rehypeSlug: slug.default || slug,
           rehypeRaw: raw.default || raw,

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

@@ -227,7 +227,7 @@ export function WakaFloatingDock({
 }: WakaFloatingDockProps) {
   const [isVisible, setIsVisible] = React.useState(false)
   const [isHovered, setIsHovered] = React.useState(false)
-  const timeoutRef = React.useRef<NodeJS.Timeout>()
+  const timeoutRef = React.useRef<NodeJS.Timeout>(undefined)
 
   React.useEffect(() => {
     const handleScroll = () => {

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

@@ -124,21 +124,26 @@ export function useFunnelChart({
 
     return data.map((stage, index) => {
       const previousStage = index > 0 ? data[index - 1] : null
-      const conversionRate = previousStage
-        ? (stage.value / previousStage.value) * 100
-        : null
+      // Guard against a zero previous/first stage: dividing by it yields
+      // Infinity/NaN that gets rendered verbatim ("Infinity%"). Treat an
+      // undefined ratio as null (no rate), consistent with the no-previous case.
+      const conversionRate =
+        previousStage && previousStage.value > 0
+          ? (stage.value / previousStage.value) * 100
+          : null
       const dropOff = previousStage ? previousStage.value - stage.value : null
-      const dropOffPercentage = previousStage
-        ? ((previousStage.value - stage.value) / previousStage.value) * 100
-        : null
+      const dropOffPercentage =
+        previousStage && previousStage.value > 0
+          ? ((previousStage.value - stage.value) / previousStage.value) * 100
+          : null
 
       // Calculate width percentage with minimum
-      const rawWidthPercentage = (stage.value / maxValue) * 100
+      const rawWidthPercentage = maxValue > 0 ? (stage.value / maxValue) * 100 : 0
       const widthPercentage = Math.max(rawWidthPercentage, minWidthPercentage)
 
       return {
         ...stage,
-        percentageOfTotal: (stage.value / totalValue) * 100,
+        percentageOfTotal: totalValue > 0 ? (stage.value / totalValue) * 100 : 0,
         conversionRate,
         dropOff,
         dropOffPercentage,

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

@@ -967,7 +967,12 @@ export function WakaCompactGoalProgress({
   className,
 }: WakaCompactGoalProgressProps) {
   const themeStyles = themeConfig[theme]
-  const progressPercent = Math.min(100, (currentValue / targetValue) * 100)
+  // Match useGoalProgress: clamp to [0,100] and guard a zero target (otherwise
+  // Infinity caps to a misleading 100%, and 0/0 renders NaN).
+  const progressPercent =
+    targetValue > 0
+      ? Math.max(0, Math.min(100, (currentValue / targetValue) * 100))
+      : 0
 
   return (
     <div className={cn("flex items-center gap-2", className)}>

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

@@ -223,7 +223,7 @@ export function WakaHotspot({
   const [isHidden, setIsHidden] = React.useState(false)
   const [hasAppeared, setHasAppeared] = React.useState(false)
   const hotspotRef = React.useRef<HTMLDivElement>(null)
-  const autoDismissRef = React.useRef<NodeJS.Timeout>()
+  const autoDismissRef = React.useRef<NodeJS.Timeout>(undefined)
 
   const storageKey = `${storageKeyPrefix}-${id}`
 

package/src/components/waka-invoice-preview/index.tsx

@@ -389,6 +389,9 @@ interface TotalsSectionProps {
 
 function TotalsSection({ invoice, compact }: TotalsSectionProps) {
   const subtotal = calculateSubtotal(invoice.items)
+  // When any line carries its own taxRate, calculateTotalTax sums per-line taxes
+  // and ignores the global rate — so the global % must not be shown as the label.
+  const hasItemTax = invoice.items.some((item) => item.taxRate !== undefined)
   const taxAmount = calculateTotalTax(invoice.items, invoice.taxRate)
   const discountAmount = invoice.discountAmount || (invoice.discountPercentage ? subtotal * invoice.discountPercentage : 0)
   const shippingCost = invoice.shippingCost || 0
@@ -425,7 +428,9 @@ function TotalsSection({ invoice, compact }: TotalsSectionProps) {
             <div className={rowClass}>
               <span className="text-muted-foreground">
                 Tax
-                {invoice.taxRate && ` (${(invoice.taxRate * 100).toFixed(0)}%)`}
+                {!hasItemTax && invoice.taxRate
+                  ? ` (${(invoice.taxRate * 100).toFixed(0)}%)`
+                  : ""}
               </span>
               <span>{formatCurrency(taxAmount, invoice.currency)}</span>
             </div>