@toolr/ui-design 0.1.0

package/components/ui/input.tsx

@@ -0,0 +1,211 @@
+/**
+ * Input - Controlled text input with error state support
+ *
+ * Used by:
+ * - Forms - text fields, URLs, names
+ * - Search bars - filter inputs
+ * - Dialogs - single-line text entry
+ *
+ * Features:
+ * - Visual variants (filled, outline)
+ * - Size variants (sm, md)
+ * - Error state with optional message
+ * - Action slot inside the field (hover/focus reveal)
+ * - Search type with built-in icon, clear button, and auto-attributes
+ * - Password type with built-in reveal/hide toggle button
+ * - Optional debounce with visual SVG animation
+ * - Extends native input attributes
+ */
+
+import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
+import { Search, X, Eye, EyeOff } from 'lucide-react'
+import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
+  value: string
+  onChange: (value: string) => void
+  type?: 'text' | 'search' | 'password'
+  debounceMs?: number
+  error?: boolean | string
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  mono?: boolean
+  /** Test ID for E2E testing */
+  testId?: string
+  /** Element rendered inside the input (right side), visible on hover/focus. Use IconButton size="xss". */
+  actionSlot?: ReactNode
+}
+
+const sizeClasses = {
+  xss: 'px-1 py-0.5 text-[10px]',
+  xs: 'px-1.5 py-0.5 text-xs',
+  sm: 'px-2 py-1 text-xs',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-3 py-2 text-sm',
+}
+
+const variantClasses = {
+  filled: 'bg-neutral-800',
+  outline: 'bg-transparent',
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
+  value,
+  onChange,
+  type = 'text',
+  debounceMs = 0,
+  error,
+  variant = 'outline',
+  color = 'blue',
+  size = 'sm',
+  disabled = false,
+  className = '',
+  mono = false,
+  testId,
+  actionSlot,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  ...props
+}, ref) {
+  const hasError = Boolean(error)
+  const hasAction = actionSlot && !disabled
+  const [hovered, setHovered] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const showAction = hasAction && (hovered || focused)
+  const isSearch = type === 'search'
+  const isPassword = type === 'password'
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+
+  // Debounce state
+  const [internalValue, setInternalValue] = useState(value)
+  const [debounceKey, setDebounceKey] = useState(0)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  // Sync internalValue when prop value changes externally
+  useEffect(() => {
+    setInternalValue(value)
+  }, [value])
+
+  const displayValue = debounceMs > 0 ? internalValue : value
+
+  function handleChange(newValue: string) {
+    if (debounceMs > 0) {
+      setInternalValue(newValue)
+      setDebounceKey(k => k + 1)
+      clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => {
+        onChange(newValue)
+        setDebounceKey(0)
+      }, debounceMs)
+    } else {
+      onChange(newValue)
+    }
+  }
+
+  function handleClear() {
+    clearTimeout(timerRef.current)
+    setInternalValue('')
+    setDebounceKey(0)
+    onChange('')
+  }
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current)
+  }, [])
+
+  const searchAutoProps = isSearch ? {
+    autoComplete: 'off' as const,
+    autoCorrect: 'off' as const,
+    autoCapitalize: 'off' as const,
+    spellCheck: false as const,
+  } : {}
+
+  const showClear = isSearch && displayValue && !disabled
+
+  return (
+    <div
+      className="w-full"
+      onMouseEnter={hasAction ? () => setHovered(true) : undefined}
+      onMouseLeave={hasAction ? () => setHovered(false) : undefined}
+    >
+      <div className="relative">
+        {isSearch && (
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500 z-10 pointer-events-none" />
+        )}
+        <input
+          ref={ref}
+          type={isSearch ? 'text' : isPassword ? (isPasswordVisible ? 'text' : 'password') : type}
+          value={displayValue}
+          onChange={(e) => handleChange(e.target.value)}
+          onFocus={(e) => { setFocused(true); onFocusProp?.(e) }}
+          onBlur={(e) => { setFocused(false); onBlurProp?.(e) }}
+          disabled={disabled}
+          data-testid={testId}
+          {...searchAutoProps}
+          className={`
+            w-full border rounded-lg text-neutral-200 placeholder-neutral-500
+            focus:outline-none transition-colors
+            disabled:opacity-50 disabled:cursor-not-allowed
+            ${sizeClasses[size]}
+            ${hasError ? 'border-red-500 focus:border-red-500' : `${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus}`}
+            ${mono ? 'font-mono' : ''}
+            ${isSearch ? 'pl-8 pr-8' : (hasAction || isPassword) ? 'pr-8' : ''}
+            ${className}
+          `}
+          {...props}
+        />
+        {showClear && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
+          >
+            <X className="w-2.5 h-2.5" />
+          </button>
+        )}
+        {showAction && (
+          <div className="absolute right-1.5 top-1/2 -translate-y-1/2">
+            {actionSlot}
+          </div>
+        )}
+        {isPassword && !disabled && (
+          <button
+            type="button"
+            onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+            title={isPasswordVisible ? 'Hide' : 'Reveal'}
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
+          >
+            {isPasswordVisible ? <EyeOff className="w-2.5 h-2.5" /> : <Eye className="w-2.5 h-2.5" />}
+          </button>
+        )}
+        {debounceMs > 0 && debounceKey > 0 && (
+          <svg
+            key={debounceKey}
+            className="absolute inset-0 pointer-events-none"
+            style={{ width: '100%', height: '100%' }}
+          >
+            <rect
+              x="1" y="1" rx="5" ry="5"
+              fill="none"
+              stroke="rgb(52 211 153 / 0.7)"
+              strokeWidth="1.5"
+              pathLength="100"
+              strokeDasharray="100"
+              strokeDashoffset="0"
+              style={{
+                width: 'calc(100% - 2px)',
+                height: 'calc(100% - 2px)',
+                animation: `debounce-border-drain ${debounceMs}ms linear forwards`,
+              }}
+            />
+          </svg>
+        )}
+      </div>
+      {typeof error === 'string' && error && (
+        <p className="text-xs text-red-400 mt-1 text-right">{error}</p>
+      )}
+    </div>
+  )
+})

package/components/ui/label.tsx

@@ -0,0 +1,159 @@
+/**
+ * Label - Border-focused colored badge/tag with icon and tooltip
+ *
+ * Single source of truth for all badge/tag patterns in the app.
+ * Matches the SeedrBadges border-focused style: colored border + text, no background.
+ *
+ * Features:
+ * - 14 color variants
+ * - Required leading icon and tooltip (always cursor-help)
+ * - Optional trailing icons
+ * - Text transform with smart capitalize (handles after-dash)
+ * - Clickable with hover state
+ */
+
+import { iconMap, type IconName } from './icon-button.tsx'
+import { Tooltip } from './tooltip.tsx'
+
+export type LabelColor =
+  | 'neutral'
+  | 'green'
+  | 'red'
+  | 'blue'
+  | 'yellow'
+  | 'orange'
+  | 'purple'
+  | 'amber'
+  | 'emerald'
+  | 'cyan'
+  | 'indigo'
+  | 'teal'
+  | 'violet'
+  | 'pink'
+
+export interface LabelProps {
+  text: string
+  color: LabelColor
+  /** Leading icon(s). Pass a single name or an array for multiple icons before text. */
+  icon?: IconName | IconName[]
+  /** Custom icon component. Takes precedence over icon. */
+  IconComponent?: React.ComponentType<{ className?: string }>
+  tooltip: { title?: string; description: string }
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  textTransform?: 'capitalize' | 'lowercase' | 'uppercase'
+  onClick?: () => void
+  className?: string
+  testId?: string
+}
+
+const colorClasses: Record<LabelColor, string> = {
+  neutral: 'border-neutral-500/50 text-neutral-400',
+  green: 'border-green-500/50 text-green-400',
+  red: 'border-red-500/50 text-red-400',
+  blue: 'border-blue-500/50 text-blue-400',
+  yellow: 'border-yellow-500/50 text-yellow-400',
+  orange: 'border-orange-500/50 text-orange-400',
+  purple: 'border-purple-500/50 text-purple-400',
+  amber: 'border-amber-500/50 text-amber-400',
+  emerald: 'border-emerald-500/50 text-emerald-400',
+  cyan: 'border-cyan-500/50 text-cyan-400',
+  indigo: 'border-indigo-500/50 text-indigo-400',
+  teal: 'border-teal-500/50 text-teal-400',
+  violet: 'border-violet-500/50 text-violet-400',
+  pink: 'border-pink-500/50 text-pink-400',
+}
+
+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' },
+  sm: { height: 18, padding: 'px-1.5', text: 'text-[10px]', iconSize: 'w-2.5 h-2.5', gap: 'gap-1.5' },
+  md: { height: 20, padding: 'px-1.5', text: 'text-[11px]', iconSize: 'w-3 h-3', gap: 'gap-1' },
+  lg: { height: 22, padding: 'px-2', text: 'text-xs', iconSize: 'w-3 h-3', gap: 'gap-1' },
+}
+
+/** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
+function smartCapitalize(value: string): string {
+  return value.replace(/(^|[\s-])(\w)/g, (_match, separator: string, char: string) => separator + char.toUpperCase())
+}
+
+function transformText(text: string, textTransform?: 'capitalize' | 'lowercase' | 'uppercase'): string {
+  if (textTransform === 'capitalize') return smartCapitalize(text)
+  return text
+}
+
+export function Label({
+  text,
+  color,
+  icon,
+  IconComponent: CustomIcon,
+  tooltip,
+  size = 'sm',
+  textTransform,
+  onClick,
+  className = '',
+  testId,
+}: LabelProps) {
+  const s = sizeConfig[size]
+  const cssTransform = textTransform === 'lowercase' || textTransform === 'uppercase' ? textTransform : undefined
+
+  const baseClasses = [
+    `inline-flex items-center ${s.gap}`,
+    s.padding,
+    s.text,
+    'border rounded font-medium leading-none',
+    colorClasses[color],
+    onClick ? 'cursor-pointer hover:brightness-125 transition-all' : 'cursor-help',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const icons: IconName[] = CustomIcon ? [] : !icon ? [] : Array.isArray(icon) ? icon : [icon]
+
+  const content = (
+    <>
+      {CustomIcon && (
+        <span className={`${s.iconSize} flex-shrink-0`}><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>
+        ) : null
+      })}
+      <span className="min-w-0 truncate" style={cssTransform ? { textTransform: cssTransform } : undefined}>
+        {transformText(text, textTransform)}
+      </span>
+    </>
+  )
+
+  const labelElement = onClick ? (
+    <button
+      type="button"
+      onClick={(e) => { e.stopPropagation(); onClick() }}
+      data-testid={testId}
+      className={baseClasses}
+      style={{ height: `${s.height}px` }}
+    >
+      {content}
+    </button>
+  ) : (
+    <span
+      data-testid={testId}
+      className={baseClasses}
+      style={{ height: `${s.height}px` }}
+    >
+      {content}
+    </span>
+  )
+
+  return (
+    <Tooltip
+      content={tooltip}
+      position="top"
+      align="start"
+    >
+      {labelElement}
+    </Tooltip>
+  )
+}

package/components/ui/layout-tab-bar.tsx

@@ -0,0 +1,289 @@
+/** Browser-style chrome tab bar with two-line tabs, accent borders, gradient backgrounds, close on hover, scroll arrows, and drag reordering. */
+
+import { useState, useRef, useCallback, useEffect, type ReactNode } from 'react'
+import { ChevronLeft, ChevronRight, X } from 'lucide-react'
+import { cn } from '../lib/cn.ts'
+
+export interface LayoutTab {
+  id: string
+  title: string
+  subtitle?: string
+  subtitleIcon?: ReactNode
+  icon?: ReactNode
+  color?: string
+  selectedColor?: string
+  titleColor?: string
+  iconColor?: string
+  subtitleColor?: string
+  subtitleIconColor?: string
+  closable?: boolean
+}
+
+export interface LayoutTabBarProps {
+  tabs: LayoutTab[]
+  activeId: string | null
+  onSelect: (id: string) => void
+  onClose?: (id: string) => void
+  onReorder?: (fromIndex: number, toIndex: number) => void
+  className?: string
+}
+
+const COLORS: Record<string, { border: string; text: string }> = {
+  white:   { border: 'border-t-white',       text: 'text-white' },
+  blue:    { border: 'border-t-blue-400',    text: 'text-blue-400' },
+  green:   { border: 'border-t-green-400',   text: 'text-green-400' },
+  purple:  { border: 'border-t-purple-400',  text: 'text-purple-400' },
+  orange:  { border: 'border-t-orange-400',  text: 'text-orange-400' },
+  red:     { border: 'border-t-red-400',     text: 'text-red-400' },
+  cyan:    { border: 'border-t-cyan-400',    text: 'text-cyan-400' },
+  amber:   { border: 'border-t-amber-400',   text: 'text-amber-400' },
+  emerald: { border: 'border-t-emerald-400', text: 'text-emerald-400' },
+  teal:    { border: 'border-t-teal-400',    text: 'text-teal-400' },
+  indigo:  { border: 'border-t-indigo-400',  text: 'text-indigo-400' },
+  violet:  { border: 'border-t-violet-400',  text: 'text-violet-400' },
+  pink:    { border: 'border-t-pink-400',    text: 'text-pink-400' },
+  neutral:    { border: 'border-t-neutral-500',     text: 'text-neutral-400' },
+}
+
+// RGB values for gradient computation (Tailwind 400-level)
+const COLOR_RGB: Record<string, string> = {
+  blue:    '96, 165, 250',
+  green:   '74, 222, 128',
+  purple:  '192, 132, 252',
+  orange:  '251, 146, 60',
+  red:     '248, 113, 113',
+  cyan:    '34, 211, 238',
+  amber:   '251, 191, 36',
+  emerald: '52, 211, 153',
+  teal:    '45, 212, 191',
+  indigo:  '129, 140, 248',
+  violet:  '167, 139, 250',
+  pink:    '244, 114, 182',
+}
+
+function getTextClass(color?: string): string {
+  return color && COLORS[color] ? COLORS[color].text : ''
+}
+
+function getBorderClass(color?: string): string {
+  return color && COLORS[color] ? COLORS[color].border : COLORS.neutral.border
+}
+
+function getGradient(color?: string, isActive?: boolean): string | undefined {
+  if (!color || !COLOR_RGB[color]) return undefined
+  const rgb = COLOR_RGB[color]
+  return isActive
+    ? `linear-gradient(135deg, rgba(${rgb}, 0.54) 0%, rgba(${rgb}, 0.10) 100%)`
+    : `linear-gradient(135deg, rgba(${rgb}, 0.36) 0%, rgba(${rgb}, 0.06) 100%)`
+}
+
+export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className }: LayoutTabBarProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [showLeft, setShowLeft] = useState(false)
+  const [showRight, setShowRight] = useState(false)
+  const [drag, setDrag] = useState<{ from: number; insertAt: number | null; x: number; y: number } | null>(null)
+  const skipClickRef = useRef(false)
+
+  // ── Scroll arrows ──────────────────────────────────────
+
+  const updateArrows = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    setShowLeft(el.scrollLeft > 0)
+    setShowRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1)
+  }, [])
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    updateArrows()
+    el.addEventListener('scroll', updateArrows)
+    const ro = new ResizeObserver(updateArrows)
+    ro.observe(el)
+    return () => { el.removeEventListener('scroll', updateArrows); ro.disconnect() }
+  }, [updateArrows, tabs.length])
+
+  useEffect(() => {
+    if (!activeId || !scrollRef.current) return
+    const idx = tabs.findIndex(t => t.id === activeId)
+    const child = scrollRef.current.children[idx] as HTMLElement | undefined
+    child?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+  }, [activeId, tabs])
+
+  const scroll = useCallback((dir: 'left' | 'right') => {
+    scrollRef.current?.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' })
+  }, [])
+
+  // ── Drag and drop ─────────────────────────────────────
+
+  const handleMouseDown = useCallback((e: React.MouseEvent, index: number) => {
+    if (e.button !== 0 || !onReorder) return
+    if ((e.target as HTMLElement).closest('[role="button"]')) return
+    const sx = e.clientX, sy = e.clientY
+    let active = false
+    let lastInsert: number | null = null
+
+    const findInsert = (cx: number): number | null => {
+      const el = scrollRef.current
+      if (!el) return null
+      const kids = el.children
+      for (let i = 0; i < kids.length; i++) {
+        const r = kids[i].getBoundingClientRect()
+        if (cx >= r.left && cx <= r.right) return cx < r.left + r.width / 2 ? i : i + 1
+      }
+      if (kids.length) {
+        const last = kids[kids.length - 1].getBoundingClientRect()
+        if (cx > last.right) return kids.length
+      }
+      return null
+    }
+
+    const onMove = (e: MouseEvent) => {
+      if (!active) {
+        const dx = e.clientX - sx, dy = e.clientY - sy
+        if (Math.sqrt(dx * dx + dy * dy) > 5) {
+          active = true
+          skipClickRef.current = true
+        } else return
+      }
+      lastInsert = findInsert(e.clientX)
+      setDrag({ from: index, insertAt: lastInsert, x: e.clientX, y: e.clientY })
+    }
+
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+      if (active && lastInsert !== null && lastInsert !== index && lastInsert !== index + 1) {
+        onReorder(index, lastInsert > index ? lastInsert - 1 : lastInsert)
+      }
+      setDrag(null)
+      setTimeout(() => { skipClickRef.current = false }, 50)
+    }
+
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+  }, [onReorder])
+
+  // ── Render ────────────────────────────────────────────
+
+  return (
+    <div className={cn('relative flex items-center min-h-12 flex-shrink-0 bg-neutral-900/80 border-b border-neutral-700/50', className)}>
+      {showLeft && (
+        <div className="flex items-center px-2 shrink-0">
+          <button type="button" onClick={() => scroll('left')} className="text-neutral-500 hover:text-neutral-400 transition-colors cursor-pointer">
+            <ChevronLeft className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+      <div ref={scrollRef} className="flex items-end gap-1 px-3 overflow-x-auto flex-1 h-full" style={{ scrollbarWidth: 'none' }}>
+        {tabs.map((tab, i) => {
+          const isActive = tab.id === activeId
+          const borderC = getBorderClass(tab.selectedColor || tab.color)
+          const titleC = getTextClass(tab.titleColor || 'white')
+          const iconC = getTextClass(tab.iconColor || tab.titleColor || 'white')
+          const subC = getTextClass(tab.subtitleColor || tab.selectedColor || tab.color)
+          const subIconC = getTextClass(tab.subtitleIconColor || tab.subtitleColor || tab.selectedColor || tab.color)
+          const isDragged = drag?.from === i
+          const insertHere = drag && drag.insertAt === i && drag.from !== i && drag.from !== i - 1
+          const insertAfterLast = drag && drag.insertAt === tabs.length && i === tabs.length - 1 && drag.from !== i
+
+          return (
+            <div key={tab.id} className="relative flex-shrink-0">
+              {insertHere && <div className="absolute -left-1 top-0 bottom-0 w-0.5 bg-blue-500 rounded-full z-10" />}
+
+              <button
+                type="button"
+                onClick={() => { if (!skipClickRef.current) onSelect(tab.id) }}
+                onMouseDown={(e) => {
+                  if (e.button === 1 && onClose && tab.closable) {
+                    e.preventDefault()
+                    onClose(tab.id)
+                  } else {
+                    handleMouseDown(e, i)
+                  }
+                }}
+                className={cn(
+                  'group flex flex-col justify-start gap-0.5 px-2.5 rounded-t-lg cursor-pointer transition-all shrink-0 select-none relative border-t-2',
+                  isActive
+                    ? cn('bg-neutral-800', borderC)
+                    : 'bg-neutral-800/50 text-neutral-400 hover:bg-neutral-800/80 hover:text-neutral-300 border-transparent opacity-60 hover:opacity-90',
+                  isDragged && 'opacity-50',
+                )}
+                style={{
+                  minWidth: 160,
+                  maxWidth: 260,
+                  height: 42,
+                  backgroundImage: getGradient(tab.color, isActive),
+                }}
+              >
+                {/* Line 1: Icon + Title */}
+                <div className="flex items-center gap-1.5 w-full transition-[padding] duration-150 group-hover:pr-5">
+                  {tab.icon && <span className={cn('shrink-0 inline-flex', isActive ? iconC : 'text-neutral-400')} style={{ width: 14, height: 14 }}>{tab.icon}</span>}
+                  <span className={cn('truncate text-sm font-medium', isActive ? titleC : 'text-neutral-300')}>{tab.title}</span>
+                </div>
+
+                {/* Line 2: Subtitle with optional icon */}
+                {tab.subtitle && (
+                  <div className="flex items-center gap-1 w-full">
+                    {tab.subtitleIcon && <span className={cn('shrink-0 inline-flex', isActive ? subIconC : 'text-neutral-500')} style={{ width: 10, height: 10 }}>{tab.subtitleIcon}</span>}
+                    <span className={cn('truncate text-xs', isActive ? subC : 'text-neutral-500')}>{tab.subtitle}</span>
+                  </div>
+                )}
+
+                {/* Close button */}
+                {tab.closable && onClose && (
+                  <span
+                    role="button"
+                    tabIndex={-1}
+                    onClick={(e) => { e.stopPropagation(); onClose(tab.id) }}
+                    onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onClose(tab.id) } }}
+                    className="absolute right-1.5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 hover:bg-neutral-700 rounded p-0.5 transition-opacity cursor-pointer"
+                  >
+                    <X className="w-3 h-3" />
+                  </span>
+                )}
+              </button>
+
+              {insertAfterLast && <div className="absolute -right-1 top-0 bottom-0 w-0.5 bg-blue-500 rounded-full z-10" />}
+            </div>
+          )
+        })}
+      </div>
+
+      {showRight && (
+        <div className="flex items-center px-2 shrink-0">
+          <button type="button" onClick={() => scroll('right')} className="text-neutral-500 hover:text-neutral-400 transition-colors cursor-pointer">
+            <ChevronRight className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+      {/* Drag ghost */}
+      {drag && tabs[drag.from] && (() => {
+        const t = tabs[drag.from]
+        const ghostBorder = getBorderClass(t.selectedColor || t.color)
+        const ghostTitleC = getTextClass(t.titleColor || 'white')
+        const ghostIconC = getTextClass(t.iconColor || t.titleColor || 'white')
+        const ghostSubC = getTextClass(t.subtitleColor || t.selectedColor || t.color)
+        const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color)
+        return (
+          <div className="fixed z-50 pointer-events-none opacity-90" style={{ left: drag.x + 12, top: drag.y - 20 }}>
+            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800', ghostBorder)}>
+              <div className="flex items-center gap-1.5">
+                {t.icon && <span className={cn('shrink-0 inline-flex', ghostIconC)} style={{ width: 14, height: 14 }}>{t.icon}</span>}
+                <span className={cn('text-sm font-medium', ghostTitleC)}>{t.title}</span>
+              </div>
+              {t.subtitle && (
+                <div className="flex items-center gap-1">
+                  {t.subtitleIcon && <span className={cn('shrink-0 inline-flex', ghostSubIconC)} style={{ width: 10, height: 10 }}>{t.subtitleIcon}</span>}
+                  <span className={cn('text-xs', ghostSubC)}>{t.subtitle}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )
+      })()}
+    </div>
+  )
+}