@toolr/ui-design 0.1.0 → 0.1.2

package/components/settings/settings-tree-utils.ts

@@ -0,0 +1,120 @@
+import type { ReactNode } from 'react'
+
+export type SettingsTreeNode = {
+  id: string
+  label: string
+  icon: ReactNode
+  children?: SettingsTreeNode[]
+}
+
+export function findNodeByPath(tree: SettingsTreeNode[], path: string): SettingsTreeNode | null {
+  const parts = path.split('.')
+  let current: SettingsTreeNode | undefined
+
+  for (const part of parts) {
+    const found = (current?.children ?? tree).find((n) => n.id === part)
+    if (!found) return null
+    current = found
+  }
+
+  return current ?? null
+}
+
+export function getBreadcrumbFromPath(
+  tree: SettingsTreeNode[],
+  path: string,
+): Array<{ label: string; icon: ReactNode; path: string }> {
+  const parts = path.split('.')
+  const breadcrumb: Array<{ label: string; icon: ReactNode; path: string }> = []
+  let currentPath = ''
+  let currentNodes: SettingsTreeNode[] = tree
+
+  for (const part of parts) {
+    const node = currentNodes.find((n) => n.id === part)
+    if (!node) break
+
+    currentPath = currentPath ? `${currentPath}.${part}` : part
+    breadcrumb.push({
+      label: node.label,
+      icon: node.icon,
+      path: currentPath,
+    })
+    currentNodes = node.children ?? []
+  }
+
+  return breadcrumb
+}
+
+export function isLeafNode(node: SettingsTreeNode): boolean {
+  return !node.children || node.children.length === 0
+}
+
+export function getAllLeafPaths(tree: SettingsTreeNode[], parentPath = ''): string[] {
+  const paths: string[] = []
+
+  for (const node of tree) {
+    const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id
+
+    if (isLeafNode(node)) {
+      paths.push(nodePath)
+    } else if (node.children) {
+      paths.push(...getAllLeafPaths(node.children, nodePath))
+    }
+  }
+
+  return paths
+}
+
+export function collectExpandablePaths(nodes: SettingsTreeNode[], parentPath = ''): string[] {
+  const paths: string[] = []
+  for (const node of nodes) {
+    const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id
+    if (!isLeafNode(node) && node.children) {
+      paths.push(nodePath)
+      paths.push(...collectExpandablePaths(node.children, nodePath))
+    }
+  }
+  return paths
+}
+
+export function getParentPaths(path: string): string[] {
+  const parts = path.split('.')
+  const parents: string[] = []
+  let current = ''
+  for (let i = 0; i < parts.length - 1; i++) {
+    current = current ? `${current}.${parts[i]}` : parts[i]
+    parents.push(current)
+  }
+  return parents
+}
+
+export function filterTree(
+  nodes: SettingsTreeNode[],
+  query: string,
+  parentPath = '',
+): SettingsTreeNode[] {
+  if (!query.trim()) return nodes
+
+  const lowerQuery = query.toLowerCase()
+
+  return nodes
+    .map((node) => {
+      const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id
+      const labelMatches = node.label.toLowerCase().includes(lowerQuery)
+
+      if (isLeafNode(node)) {
+        return labelMatches ? node : null
+      }
+
+      const filteredChildren = filterTree(node.children || [], query, nodePath)
+
+      if (labelMatches) {
+        return node
+      } else if (filteredChildren.length > 0) {
+        return { ...node, children: filteredChildren }
+      }
+
+      return null
+    })
+    .filter((n): n is SettingsTreeNode => n !== null)
+}

package/components/ui/breadcrumb.tsx

@@ -6,7 +6,7 @@ import {
   Globe, Star, Users, User, Tag, Search, Heart,
   Zap, Shield, ShieldCheck, Sparkles, Eye, Lock,
   Cloud, Wand2, Bell, Bookmark, Pin, Mail, Send,
-  Image, Bot, Puzzle, Plug, Webhook,
+  Image, Bot, Puzzle, Plug, Webhook, House, Package,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
@@ -44,6 +44,8 @@ const iconSubset: Partial<Record<IconName, LucideIcon>> = {
   puzzle: Puzzle,
   plug: Plug,
   webhook: Webhook,
+  home: House,
+  'package': Package,
 }
 
 export interface BreadcrumbSegment {
@@ -58,6 +60,8 @@ export interface BreadcrumbProps {
   segments: BreadcrumbSegment[]
   separator?: 'chevron' | 'slash' | 'dot'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  /** 'box' (default) wraps in a bordered container; 'plain' renders inline with no background */
+  variant?: 'box' | 'plain'
   className?: string
 }
 
@@ -116,17 +120,23 @@ export function Breadcrumb({
   segments,
   separator = 'chevron',
   size = 'sm',
+  variant = 'box',
   className,
 }: BreadcrumbProps) {
   const s = sizeConfig[size]
+  const isBox = variant === 'box'
 
   return (
     <nav className={cn('flex items-center', className)}>
-      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg')}>
+      <div className={cn(
+        'flex items-center gap-1',
+        isBox && [s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg'],
+      )}>
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1
           const isClickable = !isLast && !!segment.onClick
           const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null
+          const isFirstPlain = !isBox && index === 0
 
           return (
             <div key={segment.id} className="flex items-center gap-1">
@@ -136,7 +146,8 @@ export function Breadcrumb({
                   type="button"
                   onClick={segment.onClick}
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    isFirstPlain ? 'pl-0' : 'pl-2',
                     s.text,
                     'font-medium hover:text-white',
                     colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
@@ -148,7 +159,8 @@ export function Breadcrumb({
               ) : (
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md',
+                    isFirstPlain ? 'pl-0' : 'pl-2',
                     s.text,
                     isLast
                       ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']

package/components/ui/cookie-consent.tsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react'
+import { IconButton } from './icon-button.tsx'
+
+export type ConsentChoice = 'accepted' | 'declined' | 'essential'
+
+export interface CookieConsentProps {
+  /** localStorage key used to persist the choice */
+  storageKey: string
+  /** Accent color for the "Accept All" button (default: 'cyan') */
+  accentColor?: string
+  /** Heading text (default: 'We value your privacy') */
+  heading?: string
+  /** Description text */
+  description?: string
+  /** Called after the user makes a choice */
+  onConsent?: (choice: ConsentChoice) => void
+}
+
+export function CookieConsent({
+  storageKey,
+  accentColor = 'cyan',
+  heading = 'We value your privacy',
+  description = 'This site uses only essential cookies for functionality. No tracking or analytics.',
+  onConsent,
+}: CookieConsentProps) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const consent = localStorage.getItem(storageKey)
+    if (!consent) setIsVisible(true)
+  }, [storageKey])
+
+  const handleConsent = (choice: ConsentChoice) => {
+    localStorage.setItem(storageKey, choice)
+    setIsVisible(false)
+    onConsent?.(choice)
+  }
+
+  if (!isVisible) return null
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50">
+      <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
+        <div className="flex-grow">
+          <p className="text-sm text-neutral-200 mb-1">{heading}</p>
+          <p className="text-xs text-neutral-400">{description}</p>
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <button
+            onClick={() => handleConsent('declined')}
+            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+          >
+            Decline
+          </button>
+          <button
+            onClick={() => handleConsent('essential')}
+            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+          >
+            Essential Only
+          </button>
+          <button
+            onClick={() => handleConsent('accepted')}
+            className={`px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`}
+          >
+            Accept All
+          </button>
+        </div>
+
+        <IconButton
+          icon="x"
+          color="neutral"
+          size="xs"
+          tooltip={{ description: 'Dismiss' }}
+          tooltipPosition="top"
+          onClick={() => handleConsent('declined')}
+          className="absolute top-2 right-2 sm:relative sm:top-auto sm:right-auto"
+        />
+      </div>
+    </div>
+  )
+}

package/components/ui/file-tree.tsx

@@ -1,4 +1,4 @@
-import { FileCode, Folder, ChevronRight, ChevronDown } from 'lucide-react'
+import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
 
 export interface FileTreeNode {
   name: string
@@ -126,8 +126,8 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const rowClass = isSelected
     ? `${base} ${selectedClass}`
     : isDir
-      ? `${base} cursor-pointer hover:text-neutral-200 text-neutral-400`
-      : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 text-neutral-400`
+      ? `${base} cursor-pointer hover:text-neutral-200 ${iconColorClass}`
+      : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 ${iconColorClass}`
 
   return (
     <li>
@@ -141,9 +141,9 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
           <span className="w-3" />
         )}
         {isDir ? (
-          <Folder className={`w-3.5 h-3.5 shrink-0 ${iconColorClass}`} />
+          expanded ? <FolderOpen className={`w-3.5 h-3.5 shrink-0 ${iconColorClass}`} /> : <Folder className={`w-3.5 h-3.5 shrink-0 ${iconColorClass}`} />
         ) : (
-          <FileCode className={`w-3.5 h-3.5 shrink-0 ${isSelected ? iconColorClass : 'text-neutral-500'}`} />
+          <FileCode className={`w-3.5 h-3.5 shrink-0 ${iconColorClass}`} />
         )}
         <span className="truncate">{node.name}</span>
       </button>

package/components/ui/filter-dropdown.tsx

@@ -8,7 +8,7 @@ const SEARCH_THRESHOLD = 20
 
 const VARIANT_CLASSES = {
   filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
-  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700' },
 }
 
 export interface FilterDropdownProps {
@@ -112,9 +112,9 @@ export function FilterDropdown({
       )}
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
           {showSearch && (
-            <div className={`sticky top-0 p-1.5 ${v.bg} border-b ${FORM_COLORS[color].border} z-10`}>
+            <div className={`sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`}>
               <div className="relative">
                 <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" />
                 <input
@@ -124,7 +124,7 @@ export function FilterDropdown({
                   onChange={(e) => setSearch(e.target.value)}
                   onKeyDown={handleKeyDown}
                   placeholder="Search..."
-                  className={`w-full pl-6 pr-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`}
+                  className={`w-full pl-6 pr-2 py-1 text-xs bg-[var(--popover)] border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`}
                 />
               </div>
             </div>

package/components/ui/form-actions.tsx

@@ -67,7 +67,7 @@ export function FormActions({
   const base = PADDING_CLASSES[padding]
   const paddingClass = showBorder
     ? base
-    : base.replace(/\s*border-t\s+border-\[#374151\]/g, '')
+    : base.replace(/\s*border-t\s+border-neutral-700/g, '')
 
   const hasLeft = onBack || statusText
 

package/components/ui/label.tsx

@@ -41,6 +41,8 @@ export interface LabelProps {
   tooltip: { title?: string; description: string }
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   textTransform?: 'capitalize' | 'lowercase' | 'uppercase'
+  /** Progress fill (0–100). Shows a colored background bar behind the label content. */
+  progress?: number
   onClick?: () => void
   className?: string
   testId?: string
@@ -63,6 +65,23 @@ const colorClasses: Record<LabelColor, string> = {
   pink: 'border-pink-500/50 text-pink-400',
 }
 
+const progressFillColors: Record<LabelColor, string> = {
+  neutral: 'bg-neutral-500/20',
+  green: 'bg-green-500/20',
+  red: 'bg-red-500/20',
+  blue: 'bg-blue-500/20',
+  yellow: 'bg-yellow-500/20',
+  orange: 'bg-orange-500/20',
+  purple: 'bg-purple-500/20',
+  amber: 'bg-amber-500/20',
+  emerald: 'bg-emerald-500/20',
+  cyan: 'bg-cyan-500/20',
+  indigo: 'bg-indigo-500/20',
+  teal: 'bg-teal-500/20',
+  violet: 'bg-violet-500/20',
+  pink: 'bg-pink-500/20',
+}
+
 const sizeConfig = {
   xss: { height: 14, padding: 'px-1', text: 'text-[9px]', iconSize: 'w-2 h-2', gap: 'gap-0.5' },
   xs: { height: 16, padding: 'px-1.5', text: 'text-[10px]', iconSize: 'w-2.5 h-2.5', gap: 'gap-1' },
@@ -89,18 +108,21 @@ export function Label({
   tooltip,
   size = 'sm',
   textTransform,
+  progress,
   onClick,
   className = '',
   testId,
 }: LabelProps) {
   const s = sizeConfig[size]
   const cssTransform = textTransform === 'lowercase' || textTransform === 'uppercase' ? textTransform : undefined
+  const hasProgress = progress !== undefined && progress >= 0
 
   const baseClasses = [
     `inline-flex items-center ${s.gap}`,
     s.padding,
     s.text,
     'border rounded font-medium leading-none',
+    hasProgress ? 'relative overflow-hidden' : '',
     colorClasses[color],
     onClick ? 'cursor-pointer hover:brightness-125 transition-all' : 'cursor-help',
     className,
@@ -112,16 +134,22 @@ export function Label({
 
   const content = (
     <>
+      {hasProgress && (
+        <span
+          className={`absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`}
+          style={{ width: `${Math.min(progress, 100)}%` }}
+        />
+      )}
       {CustomIcon && (
-        <span className={`${s.iconSize} flex-shrink-0`}><CustomIcon className={s.iconSize} /></span>
+        <span className={`${s.iconSize} flex-shrink-0 ${hasProgress ? 'relative' : ''}`}><CustomIcon className={s.iconSize} /></span>
       )}
       {icons.map((iconName, i) => {
         const Icon = iconMap[iconName]
         return Icon ? (
-          <span key={i} className={`${s.iconSize} flex-shrink-0`}><Icon className={s.iconSize} /></span>
+          <span key={i} className={`${s.iconSize} flex-shrink-0 ${hasProgress ? 'relative' : ''}`}><Icon className={s.iconSize} /></span>
         ) : null
       })}
-      <span className="min-w-0 truncate" style={cssTransform ? { textTransform: cssTransform } : undefined}>
+      <span className={`min-w-0 truncate ${hasProgress ? 'relative' : ''}`} style={cssTransform ? { textTransform: cssTransform } : undefined}>
         {transformText(text, textTransform)}
       </span>
     </>

package/components/ui/resizable-textarea.tsx

@@ -176,8 +176,8 @@ function ResizableCode({
               inherit: true,
               rules: [],
               colors: {
-                'editor.background': variant === 'filled' ? '#1f2937' : '#00000000',
-                'editorGutter.background': variant === 'filled' ? '#1f2937' : '#00000000',
+                'editor.background': variant === 'filled' ? '#262626' : '#00000000',
+                'editorGutter.background': variant === 'filled' ? '#262626' : '#00000000',
                 'editor.lineHighlightBackground': '#00000000',
                 'editor.lineHighlightBorder': '#00000000',
               },

package/components/ui/segmented-toggle.tsx

@@ -3,7 +3,8 @@ import { Tooltip, type TooltipContent, type TooltipPosition } from './tooltip.ts
 
 export interface SegmentedToggleOption<T extends string> {
   value: T
-  icon: ReactNode
+  icon?: ReactNode
+  label?: string
   tooltip: TooltipContent
 }
 
@@ -22,8 +23,8 @@ export interface SegmentedToggleProps<T extends string> {
   disabledTooltip?: TooltipContent
 }
 
-/** Button sizes match IconButton dimensions */
-const BUTTON_SIZE_CLASSES = {
+/** Icon-only button sizes match IconButton dimensions */
+const ICON_SIZE_CLASSES = {
   xss: 'w-[18px] h-[18px]',
   xs: 'w-6 h-6',
   sm: 'w-7 h-7',
@@ -31,6 +32,15 @@ const BUTTON_SIZE_CLASSES = {
   lg: 'w-9 h-9',
 }
 
+/** Text label button sizes — horizontal padding instead of fixed width */
+const TEXT_SIZE_CLASSES = {
+  xss: 'h-[18px] px-1.5 text-[9px]',
+  xs: 'h-6 px-2 text-[10px]',
+  sm: 'h-7 px-2.5 text-xs',
+  md: 'h-8 px-3 text-xs',
+  lg: 'h-9 px-3.5 text-sm',
+}
+
 const ROUNDING_CLASSES = {
   xss: 'rounded-[3px]',
   xs: 'rounded-[5px]',
@@ -102,18 +112,21 @@ export function SegmentedToggle<T extends string>({
         const isFirst = i === 0
         const isLast = i === options.length - 1
         const rounding = isFirst && isLast ? ROUNDING_CLASSES[size] : isFirst ? `rounded-l-[5px]` : isLast ? `rounded-r-[5px]` : ''
+        const hasLabel = !!option.label
+        const sizeClass = hasLabel ? TEXT_SIZE_CLASSES[size] : ICON_SIZE_CLASSES[size]
         return (
           <Tooltip key={option.value} content={option.tooltip} position={tooltipPosition}>
             <button
               onClick={() => onChange(option.value)}
               disabled={disabled}
-              className={`flex items-center justify-center ${BUTTON_SIZE_CLASSES[size]} ${rounding} text-xs font-medium transition-all cursor-pointer ${
+              className={`flex items-center justify-center ${sizeClass} ${rounding} font-medium transition-all cursor-pointer ${
                 isActive
                   ? ACTIVE_COLORS[accentColor] || ACTIVE_COLORS.blue
                   : `text-neutral-400 ${HOVER_COLORS[accentColor] || HOVER_COLORS.blue}`
               }`}
             >
               {option.icon}
+              {option.label}
             </button>
           </Tooltip>
         )

package/components/ui/select.tsx

@@ -24,8 +24,8 @@ export interface SelectProps<T extends string | number = string> {
 }
 
 const VARIANT_CLASSES = {
-  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-neutral-800' },
-  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800', menuBg: 'bg-neutral-800/90 backdrop-blur-sm' },
+  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-[var(--popover)]' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-[var(--popover)]' },
 }
 
 const SIZE_CLASSES = {
@@ -134,7 +134,7 @@ export function Select<T extends string | number = string>({
       {isOpen && menuPos && createPortal(
         <div
           ref={menuRef}
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,

package/components/ui/sort-dropdown.tsx

@@ -6,7 +6,7 @@ import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
 
 const VARIANT_CLASSES = {
   filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
-  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700' },
 }
 
 export interface SortField {
@@ -88,7 +88,7 @@ export function SortDropdown({
       </button>
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
           {fields.map((f, idx) => (
             <button
               key={f.value}

package/components/ui/status-card.tsx

@@ -66,7 +66,7 @@ export function StatusCard({
         <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
       </div>
 
-      <div className="divide-y divide-[#374151]/60">
+      <div className="divide-y divide-neutral-700/60">
         {items.map((item) => (
           <div key={item.label} className="flex items-center justify-between px-4 py-2.5">
             <span className="text-xs text-neutral-400">{item.label}</span>

package/components/ui/tooltip.tsx

@@ -135,7 +135,7 @@ function clampToViewport(
   return { top, left }
 }
 
-const ARROW_BASE_CLASSES = 'absolute w-3 h-3 bg-neutral-800 border-neutral-600 rotate-45'
+const ARROW_BASE_CLASSES = 'absolute w-3 h-3 bg-[var(--popover)] border-neutral-600 rotate-45'
 
 function getAlignmentClass(align: TooltipAlign): string {
   if (align === 'start') return 'left-2'
@@ -258,7 +258,7 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] backdrop-blur border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,