@annondeveloper/ui-kit 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annondeveloper/ui-kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "A React component library with dark/light theming, built on Radix UI, Tailwind CSS v4, and Framer Motion.",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.0.0",
     "sonner": "^2.0.0",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
     "react-hook-form": {
@@ -58,39 +58,37 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.11.1",
-    "@radix-ui/react-alert-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-tooltip": "^1.0.0",
-    "@storybook/addon-a11y": "^8.6.18",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.18",
-    "@storybook/react-vite": "^8.6.18",
-    "@tanstack/react-table": "^8.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/react": "^10.3.0",
+    "@storybook/react-vite": "^10.3.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
     "axe-core": "^4.11.1",
-    "clsx": "^2.0.0",
-    "framer-motion": "^12.0.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.0.0",
-    "lucide-react": ">=0.400.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "lucide-react": ">=0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
-    "sonner": "^2.0.0",
-    "storybook": "^8.6.18",
-    "tailwind-merge": "^2.0.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.8.0",
+    "sonner": "^2.0.7",
+    "storybook": "^10.3.0",
+    "tailwind-merge": "^3.5.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
     "vite": "^8.0.0",
     "vitest": "^4.1.0"
   },

package/src/components/animated-counter.tsx

@@ -33,11 +33,15 @@ export function AnimatedCounter({
   const prevRef = useRef(value)
   const rafRef = useRef<number | null>(null)
   const [displayed, setDisplayed] = useState(value)
+  const decimalPlacesRef = useRef(
+    Number.isInteger(value) ? 0 : (value.toString().split('.')[1]?.length ?? 1)
+  )
 
   useEffect(() => {
     const from = prevRef.current
     const to = value
     prevRef.current = value
+    decimalPlacesRef.current = Number.isInteger(to) ? 0 : (to.toString().split('.')[1]?.length ?? 1)
 
     if (reduced || from === to) {
       setDisplayed(to)
@@ -72,11 +76,9 @@ export function AnimatedCounter({
 
   const formatted = format
     ? format(displayed)
-    : Number.isInteger(value)
+    : decimalPlacesRef.current === 0
       ? Math.round(displayed).toString()
-      : displayed.toFixed(
-          value.toString().split('.')[1]?.length ?? 1
-        )
+      : displayed.toFixed(decimalPlacesRef.current)
 
   return (
     <span className={cn('tabular-nums', className)}>

package/src/components/color-input.tsx

@@ -88,6 +88,12 @@ function formatColor(hex: string, fmt: 'hex' | 'rgb' | 'hsl'): string {
   return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
 }
 
+function isSafeColor(c: string): boolean {
+  return /^#[0-9a-f]{3,8}$/i.test(c) ||
+    /^rgba?\(\s*[\d.]+/.test(c) ||
+    /^hsla?\(\s*[\d.]+/.test(c)
+}
+
 const RECENT_COLORS_KEY = 'ui-kit-recent-colors'
 const MAX_RECENT = 8
 
@@ -110,18 +116,24 @@ export function ColorInput({
   className,
 }: ColorInputProps): React.JSX.Element {
   const prefersReducedMotion = useReducedMotion()
+  const isValidHex = /^#[0-9a-f]{3,8}$/i.test(value)
+  const safeValue = isValidHex ? value : '#000000'
   const [open, setOpen] = useState(false)
   const [copied, setCopied] = useState(false)
   const [textInput, setTextInput] = useState('')
   const [alpha, setAlpha] = useState(1)
   const panelRef = useRef<HTMLDivElement>(null)
   const satAreaRef = useRef<HTMLDivElement>(null)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => () => { if (copyTimerRef.current) clearTimeout(copyTimerRef.current) }, [])
 
   // Recent colors
   const [recentColors, setRecentColors] = useState<string[]>(() => {
     if (typeof window === 'undefined') return []
     try {
-      return JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? '[]') as string[]
+      const raw = JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? '[]')
+      return Array.isArray(raw) ? raw.filter((x: unknown) => typeof x === 'string' && x.length < 256).slice(0, MAX_RECENT) : []
     } catch { return [] }
   })
 
@@ -134,13 +146,13 @@ export function ColorInput({
   }, [])
 
   // HSL from current value
-  const { r, g, b } = useMemo(() => hexToRgb(value), [value])
+  const { r, g, b } = useMemo(() => hexToRgb(safeValue), [safeValue])
   const hsl = useMemo(() => rgbToHsl(r, g, b), [r, g, b])
 
   // Sync text input
   useEffect(() => {
-    setTextInput(formatColor(value, format))
-  }, [value, format])
+    setTextInput(formatColor(safeValue, format))
+  }, [safeValue, format])
 
   // Close on click outside
   useEffect(() => {
@@ -220,16 +232,17 @@ export function ColorInput({
       return
     }
     // Revert
-    setTextInput(formatColor(value, format))
-  }, [textInput, value, format, onChange])
+    setTextInput(formatColor(safeValue, format))
+  }, [textInput, safeValue, format, onChange])
 
   const handleCopy = useCallback(async () => {
     try {
-      await navigator.clipboard.writeText(formatColor(value, format))
+      await navigator.clipboard.writeText(formatColor(safeValue, format))
       setCopied(true)
-      setTimeout(() => setCopied(false), 1500)
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = setTimeout(() => setCopied(false), 1500)
     } catch { /* noop */ }
-  }, [value, format])
+  }, [safeValue, format])
 
   // Position for sat/brightness marker
   const markerX = hsl.s * 100
@@ -256,7 +269,7 @@ export function ColorInput({
       >
         <span
           className="h-5 w-5 rounded-md border border-[hsl(var(--border-subtle))]"
-          style={{ backgroundColor: value }}
+          style={{ backgroundColor: isSafeColor(safeValue) ? safeValue : undefined }}
         />
         <span className="font-mono text-xs text-[hsl(var(--text-primary))]">
           {formatColor(value, format)}
@@ -294,7 +307,7 @@ export function ColorInput({
                 style={{
                   left: `${markerX}%`,
                   top: `${Math.max(0, Math.min(100, markerY))}%`,
-                  backgroundColor: value,
+                  backgroundColor: isSafeColor(safeValue) ? safeValue : undefined,
                 }}
               />
             </div>
@@ -325,7 +338,7 @@ export function ColorInput({
                   onChange={e => setAlpha(Number(e.target.value) / 100)}
                   className="w-full h-3 rounded-full appearance-none cursor-pointer"
                   style={{
-                    background: `linear-gradient(to right, transparent, ${value})`,
+                    background: `linear-gradient(to right, transparent, ${isSafeColor(safeValue) ? safeValue : '#000'})`,
                   }}
                 />
               </div>
@@ -376,7 +389,7 @@ export function ColorInput({
                           ? 'border-[hsl(var(--brand-primary))] ring-2 ring-[hsl(var(--brand-primary)/0.3)] scale-110'
                           : 'border-[hsl(var(--border-subtle))] hover:scale-110',
                       )}
-                      style={{ backgroundColor: color }}
+                      style={{ backgroundColor: isSafeColor(color) ? color : undefined }}
                       title={color}
                     />
                   ))}
@@ -399,7 +412,7 @@ export function ColorInput({
                         'h-6 w-6 rounded-md border border-[hsl(var(--border-subtle))]',
                         'hover:scale-110 transition-transform',
                       )}
-                      style={{ backgroundColor: color }}
+                      style={{ backgroundColor: isSafeColor(color) ? color : undefined }}
                       title={color}
                     />
                   ))}

package/src/components/command-bar.tsx

@@ -115,7 +115,8 @@ export function CommandBar({
   const [recentIds, setRecentIds] = useState<string[]>(() => {
     if (typeof window === 'undefined') return []
     try {
-      return JSON.parse(localStorage.getItem(recentKey) ?? '[]') as string[]
+      const raw = JSON.parse(localStorage.getItem(recentKey) ?? '[]')
+      return Array.isArray(raw) ? raw.filter((x: unknown) => typeof x === 'string' && x.length < 256).slice(0, maxRecent) : []
     } catch {
       return []
     }

package/src/components/copy-block.tsx

@@ -48,6 +48,9 @@ export function CopyBlock({
   const [isCollapsed, setIsCollapsed] = useState(true)
   const [needsCollapse, setNeedsCollapse] = useState(false)
   const contentRef = useRef<HTMLPreElement>(null)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => () => { if (copyTimerRef.current) clearTimeout(copyTimerRef.current) }, [])
 
   // Check if content exceeds maxHeight
   useEffect(() => {
@@ -61,19 +64,11 @@ export function CopyBlock({
     try {
       await navigator.clipboard.writeText(content)
       setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2000)
     } catch {
-      // Fallback for older browsers
-      const textarea = document.createElement('textarea')
-      textarea.value = content
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      // Clipboard API not available
+      console.warn('Clipboard API not available')
     }
   }, [content])
 

package/src/components/data-table.tsx

@@ -19,6 +19,7 @@ import type { LucideIcon } from 'lucide-react'
 import { TruncatedText } from './truncated-text'
 import { EmptyState } from './empty-state'
 import { Skeleton } from './skeleton'
+import { Select } from './select'
 import { cn } from '../utils'
 
 // ---------------------------------------------------------------------------
@@ -679,18 +680,12 @@ export function DataTable<T>({
           </span>
 
           <div className="flex items-center gap-2">
-            <select
-              value={pageSize}
-              onChange={e => table.setPageSize(Number(e.target.value))}
-              className="rounded-md border border-[hsl(var(--border-subtle))]
-                bg-[hsl(var(--bg-surface))] px-2 py-1 text-[12px]
-                text-[hsl(var(--text-secondary))] outline-none
-                focus:border-[hsl(var(--brand-primary))] transition-colors"
-            >
-              {PAGE_SIZES.map(size => (
-                <option key={size} value={size}>{size} / page</option>
-              ))}
-            </select>
+            <Select
+              value={String(pageSize)}
+              onValueChange={v => table.setPageSize(Number(v))}
+              options={PAGE_SIZES.map(size => ({ value: String(size), label: `${size} / page` }))}
+              className="w-[110px] text-[12px]"
+            />
 
             <div className="flex items-center gap-1">
               <PaginationButton

package/src/components/diff-viewer.tsx

@@ -27,8 +27,29 @@ interface DiffLine {
   newLineNo?: number
 }
 
+const MAX_LINES = 2000
+
 /** Simple line-by-line diff using longest common subsequence. */
 function computeDiff(oldLines: string[], newLines: string[]): DiffLine[] {
+  // Fall back to simple line-by-line comparison for large inputs
+  if (oldLines.length > MAX_LINES || newLines.length > MAX_LINES) {
+    const result: DiffLine[] = oldLines.map((l, i) => ({
+      type: (l === (newLines[i] ?? '') ? 'unchanged' : 'removed') as LineType,
+      content: l,
+      oldLineNo: i + 1,
+      newLineNo: i + 1,
+    }))
+    for (let i = oldLines.length; i < newLines.length; i++) {
+      result.push({
+        type: 'added' as LineType,
+        content: newLines[i],
+        oldLineNo: undefined,
+        newLineNo: i + 1,
+      })
+    }
+    return result
+  }
+
   // Build LCS table
   const m = oldLines.length
   const n = newLines.length

package/src/components/heatmap-calendar.tsx

@@ -47,8 +47,13 @@ function toDateKey(d: Date): string {
 }
 
 function parseDate(s: string): Date {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+    return new Date()
+  }
   const [y, m, d] = s.split('-').map(Number)
-  return new Date(y, m - 1, d)
+  const date = new Date(y, m - 1, d)
+  if (isNaN(date.getTime())) return new Date()
+  return date
 }
 
 /**

package/src/components/infinite-scroll.tsx

@@ -28,6 +28,8 @@ export interface InfiniteScrollProps<T> {
   itemHeight?: number
   /** Content to display when items array is empty. */
   emptyState?: React.ReactNode
+  /** Function to derive a stable key for each item. Falls back to index. */
+  getItemKey?: (item: T, index: number) => string | number
   /** Additional class name for the scroll container. */
   className?: string
 }
@@ -49,6 +51,7 @@ export function InfiniteScroll<T>({
   isLoading = false,
   threshold = 200,
   itemHeight,
+  getItemKey,
   emptyState,
   className,
 }: InfiniteScrollProps<T>): React.JSX.Element {
@@ -57,6 +60,8 @@ export function InfiniteScroll<T>({
   const sentinelRef = useRef<HTMLDivElement>(null)
   const [showScrollTop, setShowScrollTop] = useState(false)
   const loadingRef = useRef(false)
+  const loadMoreRef = useRef(loadMore)
+  useEffect(() => { loadMoreRef.current = loadMore }, [loadMore])
 
   // IntersectionObserver for infinite load trigger
   useEffect(() => {
@@ -68,7 +73,7 @@ export function InfiniteScroll<T>({
         const entry = entries[0]
         if (entry?.isIntersecting && hasMore && !isLoading && !loadingRef.current) {
           loadingRef.current = true
-          const result = loadMore()
+          const result = loadMoreRef.current()
           if (result && typeof result.then === 'function') {
             result.then(() => { loadingRef.current = false }).catch(() => { loadingRef.current = false })
           } else {
@@ -84,7 +89,7 @@ export function InfiniteScroll<T>({
 
     observer.observe(sentinel)
     return () => observer.disconnect()
-  }, [hasMore, isLoading, loadMore, threshold])
+  }, [hasMore, isLoading, threshold])
 
   // Update loadingRef when isLoading changes
   useEffect(() => {
@@ -179,7 +184,7 @@ export function InfiniteScroll<T>({
       ) : (
         /* Non-virtualized rendering */
         items.map((item, index) => (
-          <div key={index}>
+          <div key={getItemKey ? getItemKey(item, index) : index}>
             {renderItem(item, index)}
           </div>
         ))

package/src/components/live-feed.tsx

@@ -143,6 +143,8 @@ export function LiveFeed({
         ref={scrollRef}
         onScroll={handleScroll}
         className="flex-1 overflow-y-auto"
+        aria-live="polite"
+        aria-atomic="false"
       >
         {visibleItems.length === 0 ? (
           <div className="flex items-center justify-center py-12 text-sm text-[hsl(var(--text-tertiary))]">

package/src/components/log-viewer.tsx

@@ -151,6 +151,8 @@ export function LogViewer({
         onScroll={checkAtBottom}
         className="overflow-y-auto"
         style={{ maxHeight }}
+        aria-live="polite"
+        aria-atomic="false"
       >
         {filtered.map((entry, i) => (
           <div

package/src/components/notification-stack.tsx

@@ -53,6 +53,13 @@ const TYPE_ICON_COLOR: Record<Notification['type'], string> = {
   error: 'text-[hsl(var(--status-critical))]',
 }
 
+const TYPE_PROGRESS_BG: Record<Notification['type'], string> = {
+  info: 'bg-[hsl(var(--brand-secondary))]',
+  success: 'bg-[hsl(var(--status-ok))]',
+  warning: 'bg-[hsl(var(--status-warning))]',
+  error: 'bg-[hsl(var(--status-critical))]',
+}
+
 const POSITION_CLASSES: Record<NonNullable<NotificationStackProps['position']>, string> = {
   'top-right': 'top-4 right-4',
   'top-left': 'top-4 left-4',
@@ -216,7 +223,7 @@ function NotificationCard({
       {duration > 0 && (
         <div className="h-0.5 bg-[hsl(var(--bg-overlay))]">
           <div
-            className={cn('h-full transition-[width] duration-100', TYPE_COLOR[type].replace('border-l-', 'bg-'))}
+            className={cn('h-full transition-[width] duration-100', TYPE_PROGRESS_BG[type])}
             style={{ width: `${progress}%` }}
           />
         </div>

package/src/components/sortable-list.tsx

@@ -70,6 +70,8 @@ export function SortableList<T extends SortableItem>({
   const containerRef = useRef<HTMLDivElement>(null)
   const startPos = useRef({ x: 0, y: 0 })
   const dragItemId = useRef<string | null>(null)
+  const dragIdxRef = useRef<number | null>(null)
+  const overIdxRef = useRef<number | null>(null)
 
   const handlePointerDown = useCallback(
     (index: number) => (e: React.PointerEvent) => {
@@ -79,6 +81,8 @@ export function SortableList<T extends SortableItem>({
 
       setDragIdx(index)
       setOverIdx(index)
+      dragIdxRef.current = index
+      overIdxRef.current = index
       dragItemId.current = items[index]?.id ?? null
       startPos.current = { x: e.clientX, y: e.clientY }
 
@@ -97,6 +101,7 @@ export function SortableList<T extends SortableItem>({
             : ev.clientX < midX + rect.width / 2 && ev.clientX > midX - rect.width / 2
 
           if (isOver) {
+            overIdxRef.current = i
             setOverIdx(i)
             break
           }
@@ -107,19 +112,18 @@ export function SortableList<T extends SortableItem>({
         document.removeEventListener('pointermove', handlePointerMove)
         document.removeEventListener('pointerup', handlePointerUp)
 
-        setDragIdx(prev => {
-          setOverIdx(over => {
-            if (prev !== null && over !== null && prev !== over) {
-              const newItems = [...items]
-              const [moved] = newItems.splice(prev, 1)
-              if (moved) newItems.splice(over, 0, moved)
-              // Use setTimeout to avoid state update during render
-              setTimeout(() => onReorder(newItems), 0)
-            }
-            return null
-          })
-          return null
-        })
+        const prev = dragIdxRef.current
+        const over = overIdxRef.current
+        if (prev !== null && over !== null && prev !== over) {
+          const newItems = [...items]
+          const [moved] = newItems.splice(prev, 1)
+          if (moved) newItems.splice(over, 0, moved)
+          onReorder(newItems)
+        }
+        dragIdxRef.current = null
+        overIdxRef.current = null
+        setDragIdx(null)
+        setOverIdx(null)
       }
 
       document.addEventListener('pointermove', handlePointerMove)

package/src/components/step-wizard.tsx

@@ -97,6 +97,8 @@ export function StepWizard({
   const [direction, setDirection] = useState(1) // 1=forward, -1=backward
   const [isComplete, setIsComplete] = useState(false)
   const contentRef = useRef<HTMLDivElement>(null)
+  const wizardRef = useRef<HTMLDivElement>(null)
+  const validatingRef = useRef(false)
 
   // Save state to sessionStorage
   useEffect(() => {
@@ -118,20 +120,25 @@ export function StepWizard({
   }, [currentStep, onStepChange])
 
   const handleNext = useCallback(async () => {
+    if (validatingRef.current) return
     const step = steps[currentStep]
     if (step?.validate) {
+      validatingRef.current = true
       setIsValidating(true)
       try {
         const valid = await step.validate()
         if (!valid) {
           setIsValidating(false)
+          validatingRef.current = false
           return
         }
       } catch {
         setIsValidating(false)
+        validatingRef.current = false
         return
       }
       setIsValidating(false)
+      validatingRef.current = false
     }
 
     setCompleted(prev => new Set(prev).add(currentStep))
@@ -165,6 +172,7 @@ export function StepWizard({
   // Keyboard navigation
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
+      if (!wizardRef.current?.contains(e.target as Node)) return
       if (e.key === 'Enter' && !e.shiftKey && !(e.target instanceof HTMLTextAreaElement)) {
         handleNext()
       }
@@ -188,7 +196,7 @@ export function StepWizard({
   const isHorizontal = orientation === 'horizontal'
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div ref={wizardRef} className={cn('flex flex-col', className)}>
       {/* Step indicator */}
       <div className={cn(
         'mb-6',

package/src/components/streaming-text.tsx

@@ -73,6 +73,9 @@ export function StreamingText({
   const containerRef = useRef<HTMLDivElement>(null)
   const prevStreamingRef = useRef(isStreaming)
   const [copied, setCopied] = useState(false)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => () => { if (copyTimerRef.current) clearTimeout(copyTimerRef.current) }, [])
 
   useEffect(() => {
     if (prevStreamingRef.current && !isStreaming) {
@@ -91,7 +94,8 @@ export function StreamingText({
   const handleCopy = useCallback(() => {
     void navigator.clipboard.writeText(text).then(() => {
       setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2000)
     })
   }, [text])
 
@@ -114,6 +118,7 @@ export function StreamingText({
                     animation: `streaming-cursor-blink ${speed}ms step-end infinite`,
                   }
             }
+            aria-hidden="true"
           />
         )}
         <AnimatePresence>
@@ -150,14 +155,6 @@ export function StreamingText({
         )}
       </AnimatePresence>
 
-      {showCursor && isStreaming && !reduced && (
-        <style>{`
-          @keyframes streaming-cursor-blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
-          }
-        `}</style>
-      )}
     </div>
   )
 }

package/src/theme.css

@@ -168,6 +168,12 @@ html.light {
   color: hsl(var(--text-primary));
 }
 
+/* ── Streaming cursor ────────────────────────────────────────────────────── */
+@keyframes streaming-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
 /* ── Reduced motion ──────────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   .animate-pulse-ring,