@fayz-ai/ui 0.8.1 → 0.8.3

package/src/layout/Sidebar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
+  Crown,
   Home,
   Users,
   Settings,
@@ -82,6 +83,8 @@ import {
   Inbox,
   Star,
   TrendingUp,
+  GraduationCap,
+  Repeat,
   UserCheck,
   UserPlus,
   UserX,
@@ -89,6 +92,11 @@ import {
   Boxes,
   Clock3,
   FileCheck2,
+  User,
+  Palette,
+  ShieldCheck,
+  SlidersHorizontal,
+  Puzzle,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -102,6 +110,10 @@ export interface NavigationItem {
   section: 'main' | 'secondary' | 'settings'
   badge?: string | number
   permission?: { feature: string; action: 'read' | 'create' | 'edit' | 'delete' }
+  /** Freemium discovery: the user's role allows this item, but their plan does
+   *  not entitle the feature. The item stays visible with a small Crown badge
+   *  and, on click, leads to the plan's UpgradePrompt. */
+  premium?: boolean
   children?: NavigationItem[]
 }
 
@@ -135,6 +147,17 @@ export interface SidebarProps {
   notificationSlot?: React.ReactNode
   /** Unread notification count for the bell indicator */
   unreadCount?: number
+  /** Optional headings above each nav section. Used by contextual sidebars
+   *  (e.g. /settings swaps the rail for "Settings links" + "Plugins"); the
+   *  normal app rail leaves them undefined and renders no headings. */
+  sectionLabels?: { main?: string; secondary?: string; settings?: string }
+  /** Identity of the current rail context. When it changes, the rail animates
+   *  as a push: the new nav slides in while the previous one slides out.
+   *  Leave undefined for a static rail (no swap animation). */
+  navKey?: string
+  /** Push direction for a `navKey` change. 'forward' pulls the new rail in
+   *  from the right (drilling in), 'back' from the left (returning). */
+  navDirection?: 'forward' | 'back'
 }
 
 const ICON_MAP: Record<string, LucideIcon> = {
@@ -145,10 +168,21 @@ const ICON_MAP: Record<string, LucideIcon> = {
   Building2, Filter, Plus, List, ListPlus, Search, Shield, Ban, Clock, Dog, Cat, PawPrint, Heart, FolderOpen, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
   PartyPopper, Radio, CalendarDays, CalendarCheck2, CalendarX, BadgeDollarSign, Banknote, Landmark, CircleDollarSign, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
   Zap, Award, LayoutDashboard, MessageSquare, Inbox, Star, TrendingUp, UserCheck, UserPlus, UserX, Workflow, Boxes, Clock3, FileCheck2,
+  GraduationCap, Repeat,
+  User, Palette, ShieldCheck, SlidersHorizontal, Puzzle,
 }
 
 export { ICON_MAP }
 
+/** Kept in sync with --saas-rail-duration in styles.css. */
+const RAIL_PUSH_MS = 260
+
+/** Layout effect on the client, plain effect during SSR (avoids the warning).
+ *  The rail push needs the layout variant: the animation classes must be on
+ *  the DOM before paint, or the new rail shows one frame at its final spot. */
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
 function getIcon(name: string): LucideIcon {
   return ICON_MAP[name] ?? Home
 }
@@ -182,6 +216,9 @@ function NavItem({
       {!collapsed && (
         <>
           <span className="flex-1 truncate text-left">{item.label}</span>
+          {item.premium && (
+            <Crown className="ml-auto h-3.5 w-3.5 shrink-0 text-amber-500" aria-hidden />
+          )}
           {item.badge !== undefined && (
             <span className="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground">
               {item.badge}
@@ -203,6 +240,9 @@ function NavItem({
             className="fayz-glass-surface z-50 rounded-md bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md"
           >
             {item.label}
+            {item.premium && (
+              <Crown className="ml-1.5 inline h-3 w-3 text-amber-500" aria-hidden />
+            )}
             {item.badge !== undefined && (
               <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground">
                 {item.badge}
@@ -339,6 +379,9 @@ export function Sidebar({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  sectionLabels,
+  navKey,
+  navDirection = 'forward',
 }: SidebarProps) {
   const currentPath = currentPathProp
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
@@ -355,6 +398,70 @@ export function Sidebar({
     onNavigate?.(route)
   }
 
+  const sectionHeading = (label?: string) =>
+    label && !collapsed ? (
+      <p className="px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted">
+        {label}
+      </p>
+    ) : null
+
+  const renderItem = (item: NavigationItem) =>
+    item.children && item.children.length > 0 ? (
+      <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
+    ) : (
+      <NavItem
+        key={item.id}
+        item={item}
+        collapsed={collapsed}
+        isActive={item.route === activeRoute}
+        onNavigate={handleNavigate}
+      />
+    )
+
+  // The swappable part of the rail (top slot + both nav sections). Kept as one
+  // node so a context change can snapshot the outgoing rail and animate it out.
+  const navBody = (
+    <>
+      {topContent && <div className="mb-4 space-y-2">{topContent}</div>}
+      {mainItems.length > 0 && (
+        <div className="space-y-1">
+          {sectionHeading(sectionLabels?.main)}
+          {mainItems.map(renderItem)}
+        </div>
+      )}
+      {secondaryItems.length > 0 && (
+        <div className="mt-6 space-y-1">
+          {sectionHeading(sectionLabels?.secondary)}
+          {secondaryItems.map(renderItem)}
+        </div>
+      )}
+    </>
+  )
+
+  // Rail push: when `navKey` changes, hold the previous rail on screen for one
+  // animation cycle. `lastBodyRef` is refreshed after every render, so the
+  // snapshot is the rail exactly as it looked before the swap (correct active
+  // item included) rather than a stale one.
+  const [outgoing, setOutgoing] = React.useState<{ body: React.ReactNode; direction: 'forward' | 'back' } | null>(null)
+  const lastBodyRef = React.useRef<React.ReactNode>(null)
+  const lastKeyRef = React.useRef(navKey)
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    if (lastKeyRef.current !== navKey) {
+      const previousBody = lastBodyRef.current
+      lastKeyRef.current = navKey
+      if (previousBody) {
+        setOutgoing({ body: previousBody, direction: navDirection })
+        if (timerRef.current) clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => setOutgoing(null), RAIL_PUSH_MS)
+      }
+    }
+    lastBodyRef.current = navBody
+  })
+
+  React.useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current) }, [])
+
   return (
     <Tooltip.Provider>
       <aside
@@ -396,45 +503,35 @@ export function Sidebar({
           )}
         </div>
 
-        {/* Main Navigation */}
-        <nav className="flex-1 space-y-1 overflow-y-auto p-2">
-          {topContent && <div className="mb-4 space-y-2">{topContent}</div>}
-
-          {mainItems.length > 0 && (
-            <div className="space-y-1">
-              {mainItems.map((item) =>
-                item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
-                ) : (
-                  <NavItem
-                    key={item.id}
-                    item={item}
-                    collapsed={collapsed}
-                    isActive={item.route === activeRoute}
-                    onNavigate={handleNavigate}
-                  />
-                )
-              )}
-            </div>
+        {/* Main Navigation. During a rail swap the outgoing nav is pinned on
+            top of the incoming one so the two cross-slide; overflow is clipped
+            for the duration so neither pane can scroll the rail sideways. */}
+        <nav
+          className={cn(
+            'relative flex-1 p-2',
+            outgoing ? 'overflow-hidden' : 'overflow-y-auto',
           )}
-
-          {secondaryItems.length > 0 && (
-            <div className="mt-6 space-y-1">
-              {secondaryItems.map((item) =>
-                item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
-                ) : (
-                  <NavItem
-                    key={item.id}
-                    item={item}
-                    collapsed={collapsed}
-                    isActive={item.route === activeRoute}
-                    onNavigate={handleNavigate}
-                  />
-                )
+        >
+          {outgoing && (
+            <div
+              aria-hidden
+              className={cn(
+                'pointer-events-none absolute inset-x-2 top-2 space-y-1',
+                outgoing.direction === 'back' ? 'saas-rail-out-back' : 'saas-rail-out-forward',
               )}
+            >
+              {outgoing.body}
             </div>
           )}
+          <div
+            key={navKey}
+            className={cn(
+              'space-y-1',
+              outgoing && (outgoing.direction === 'back' ? 'saas-rail-in-back' : 'saas-rail-in-forward'),
+            )}
+          >
+          {navBody}
+          </div>
         </nav>
 
         {/* Settings nav items */}

package/src/layout/Topbar.tsx

@@ -31,6 +31,8 @@ import {
   UserCog,
   BookOpen,
   BookOpenCheck,
+  GraduationCap,
+  Repeat,
   MessageCircle,
   Globe,
   Percent,
@@ -102,6 +104,8 @@ import {
   Inbox,
   Star,
   Zap,
+  Crown,
+  LogOut,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -116,6 +120,9 @@ export interface NavigationItem {
   badge?: string | number
   children?: NavigationItem[]
   permission?: { feature: string; action: 'read' | 'create' | 'edit' | 'delete' }
+  /** Freemium discovery: role-allowed but not entitled by the current plan.
+   *  Renders a small Crown badge; clicking leads to the plan's UpgradePrompt. */
+  premium?: boolean
 }
 
 export interface TopbarProps {
@@ -123,6 +130,8 @@ export interface TopbarProps {
   logo?: React.ReactNode
   user?: { fullName: string; avatarUrl?: string; email: string }
   onMenuClick?: () => void
+  /** Workspace/org switcher rendered right after the logo (desktop). */
+  orgSwitcher?: React.ReactNode
   leftContent?: React.ReactNode
   rightContent?: React.ReactNode
   currentPath?: string
@@ -132,17 +141,23 @@ export interface TopbarProps {
   onProfile?: () => void
   onSettings?: () => void
   onBilling?: () => void
+  /** Current-plan pill shown next to the user in the dropdown header. */
+  userPlan?: { label: string; paid: boolean }
+  /** i18n label for the billing/subscription menu item (host owns translation). */
+  billingLabel?: string
   userMenuExtras?: { label: string; icon?: React.ReactNode; onClick: () => void }[]
 }
 
 function TopbarUserMenu({
   user,
+  userPlan,
+  billingLabel = 'Subscription',
   onSignOut,
   onProfile,
   onSettings,
   onBilling,
   userMenuExtras,
-}: Pick<TopbarProps, 'user' | 'onSignOut' | 'onProfile' | 'onSettings' | 'onBilling' | 'userMenuExtras'>) {
+}: Pick<TopbarProps, 'user' | 'userPlan' | 'billingLabel' | 'onSignOut' | 'onProfile' | 'onSettings' | 'onBilling' | 'userMenuExtras'>) {
   const [open, setOpen] = React.useState(false)
   if (!user) return null
   const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? '?').toUpperCase()
@@ -185,12 +200,33 @@ function TopbarUserMenu({
           <div className="mt-1 space-y-0.5">
             {item('Perfil', onProfile, UserCog)}
             {item('Configurações', onSettings, Settings)}
-            {item('Cobrança', onBilling, CreditCard)}
+            {onBilling && (
+              <button
+                key="billing"
+                onClick={() => { setOpen(false); onBilling() }}
+                className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-popover-foreground transition-colors hover:bg-muted/70"
+              >
+                <CreditCard className="h-4 w-4 text-muted-foreground" />
+                <span className="flex-1 text-left">{billingLabel}</span>
+                {userPlan && (
+                  <span
+                    className={
+                      userPlan.paid
+                        ? 'inline-flex items-center gap-1 rounded-full border border-amber-400/40 bg-amber-400/15 px-2 py-0.5 text-[10px] font-semibold text-amber-600 dark:text-amber-300'
+                        : 'inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground'
+                    }
+                  >
+                    {userPlan.paid ? <Crown className="h-3 w-3" /> : <Sparkles className="h-3 w-3" />}
+                    {userPlan.label}
+                  </span>
+                )}
+              </button>
+            )}
             {userMenuExtras?.map((e) => item(e.label, e.onClick))}
             {onSignOut && (
               <>
                 <div className="my-1 border-t border-border" />
-                {item('Sair', onSignOut)}
+                {item('Sair', onSignOut, LogOut)}
               </>
             )}
           </div>
@@ -208,7 +244,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   Contact, Building2, ChevronDown, Filter, Plus, Shield, List, ListChecks, FolderOpen, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
   ArrowDownCircle, ArrowUpCircle, ArrowLeftRight, Plug, SlidersHorizontal, TableProperties, Landmark, Receipt, TrendingUp, CircleDollarSign, Clock, AlertTriangle, Sparkles, Wallet, Warehouse, Ruler, ArrowUpRight, ArrowDownRight, UserPlus, UserX, TreePalm,
   Boxes, Box, FileCheck2, PartyPopper, Radio, CalendarDays, BadgeDollarSign, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
-  CalendarCheck2, CalendarX, ListPlus, Map, Ban, Clock3, Inbox, UserCheck, Star, Zap, Clapperboard, Newspaper,
+  CalendarCheck2, CalendarX, ListPlus, Map, Ban, Clock3, Inbox, UserCheck, Star, Zap, Clapperboard, Newspaper, GraduationCap, Repeat,
 }
 
 function getIcon(name: string): LucideIcon {
@@ -282,6 +318,7 @@ export function Topbar({
   logo,
   user,
   onMenuClick,
+  orgSwitcher,
   leftContent,
   rightContent,
   currentPath = '/',
@@ -291,6 +328,8 @@ export function Topbar({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   userMenuExtras,
 }: TopbarProps) {
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
@@ -324,6 +363,9 @@ export function Topbar({
             <div className="hidden shrink-0 items-center md:flex">
               {logo ?? <span className="text-lg font-bold">App</span>}
             </div>
+            {orgSwitcher && (
+              <div className="hidden min-w-0 items-center md:flex">{orgSwitcher}</div>
+            )}
           </div>
 
           {/* Center: Search (desktop only) */}
@@ -346,6 +388,8 @@ export function Topbar({
             {rightContent}
             <TopbarUserMenu
               user={user}
+              userPlan={userPlan}
+              billingLabel={billingLabel}
               onSignOut={onSignOut}
               onProfile={onProfile}
               onSettings={onSettings}
@@ -399,6 +443,9 @@ export function Topbar({
                 >
                   <Icon className="h-4 w-4" />
                   <span>{item.label}</span>
+                  {item.premium && (
+                    <Crown className="h-3 w-3 text-amber-500" aria-hidden />
+                  )}
                   {item.badge !== undefined && (
                     <span className="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
                       {item.badge}

package/src/primitives/SearchCombobox.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { Search, Plus } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Reusable search combobox with keyboard navigation + optional create
+// ---------------------------------------------------------------------------
+
+export interface ComboboxOption {
+  id: string
+  label: string
+  subtitle?: string
+  price?: number
+  data?: Record<string, unknown>
+}
+
+interface SearchComboboxProps {
+  value: string
+  onChange: (value: string) => void
+  onSelect: (option: ComboboxOption) => void
+  options: ComboboxOption[]
+  placeholder?: string
+  autoFocus?: boolean
+  onBlurEmpty?: () => void
+  renderRight?: (option: ComboboxOption) => React.ReactNode
+  /** Show a "+ Create ..." option when search has no exact match */
+  allowCreate?: boolean
+  /** Called when user clicks the create option. Receives the current search text. */
+  onCreateNew?: (searchText: string) => void
+  /** Label for the create option (default: 'Create') */
+  createLabel?: string
+  className?: string
+  /** Minimal style — no border/bg, just underline on focus. For inline use. */
+  minimal?: boolean
+  /** Inline label shown when collapsed. Click reveals the search input. */
+  inlineLabel?: string
+  /** Icon for the inline label: 'search' (default) or 'plus' (for "add" actions) */
+  inlineIcon?: 'search' | 'plus'
+  /** Show a loading skeleton in the dropdown while results are being fetched */
+  loading?: boolean
+  /** Called when the input gains focus */
+  onFocus?: () => void
+}
+
+export function SearchCombobox({
+  value, onChange, onSelect, options, placeholder, autoFocus, onBlurEmpty,
+  renderRight, allowCreate, onCreateNew, createLabel = 'Create', className, minimal, inlineLabel, inlineIcon = 'search',
+  loading, onFocus: onFocusProp,
+}: SearchComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const [expanded, setExpanded] = useState(!inlineLabel)
+  const [dropRect, setDropRect] = useState<DOMRect | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  // When value is set externally (e.g. edit mode), auto-expand; collapse when cleared
+  useEffect(() => {
+    if (value && inlineLabel) setExpanded(true)
+    if (!value && inlineLabel && !open) setExpanded(false)
+  }, [value, open])
+
+  function updateRect() {
+    if (wrapperRef.current) setDropRect(wrapperRef.current.getBoundingClientRect())
+  }
+
+  // Show create option only when dropdown is open, has text, and no exact match
+  const showCreate = open && allowCreate && onCreateNew && value.trim().length > 0 &&
+    !options.some((o) => o.label.toLowerCase() === value.trim().toLowerCase())
+
+  const totalItems = options.length + (showCreate ? 1 : 0)
+
+  useEffect(() => { setActiveIndex(-1) }, [options])
+  useEffect(() => {
+    if ((options.length > 0 || showCreate || loading) && document.activeElement === inputRef.current) setOpen(true)
+  }, [options, showCreate, loading])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!open || totalItems === 0) {
+      if (e.key === 'ArrowDown' && totalItems > 0) {
+        e.preventDefault()
+        setOpen(true)
+        setActiveIndex(0)
+      }
+      return
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setActiveIndex((prev) => (prev + 1) % totalItems)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setActiveIndex((prev) => (prev <= 0 ? totalItems - 1 : prev - 1))
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (activeIndex >= 0 && activeIndex < options.length) {
+          onSelect(options[activeIndex])
+          setOpen(false)
+          setActiveIndex(-1)
+        } else if (showCreate && activeIndex === options.length) {
+          onCreateNew?.(value.trim())
+          setOpen(false)
+          setActiveIndex(-1)
+        }
+        break
+      case 'Escape':
+        e.preventDefault()
+        setOpen(false)
+        setActiveIndex(-1)
+        break
+    }
+  }, [open, options, totalItems, activeIndex, onSelect, showCreate, onCreateNew, value])
+
+  useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return
+    const items = listRef.current.children
+    if (items[activeIndex]) (items[activeIndex] as HTMLElement).scrollIntoView({ block: 'nearest' })
+  }, [activeIndex])
+
+  function handleBlur() {
+    setTimeout(() => {
+      setOpen(false)
+      setActiveIndex(-1)
+      if (!value && onBlurEmpty) onBlurEmpty()
+      if (!value && inlineLabel) setExpanded(false)
+    }, 200)
+  }
+
+  const hasDropdown = open && (options.length > 0 || showCreate || loading)
+
+  // Collapsed inline label — click to expand
+  if (!expanded && inlineLabel) {
+    const isPlus = inlineIcon === 'plus'
+    return (
+      <button type="button" onClick={() => { setExpanded(true); setTimeout(() => inputRef.current?.focus(), 50) }}
+        className={`flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 transition-colors ${
+          isPlus ? 'text-primary hover:text-primary/80' : 'text-muted-foreground hover:text-foreground'
+        } ${className ?? ''}`}>
+        {isPlus && <Plus className="h-3.5 w-3.5 shrink-0" />}
+        {inlineLabel}
+      </button>
+    )
+  }
+
+  return (
+    <div ref={wrapperRef} className={`relative ${className ?? ''}`}>
+      {!minimal && (
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+      )}
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => { onChange(e.target.value); updateRect(); setOpen(true) }}
+        onFocus={() => { updateRect(); onFocusProp?.(); if (options.length > 0 || showCreate || loading) setOpen(true) }}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        className={minimal
+          ? 'w-full bg-transparent pl-2 pr-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors'
+          : 'w-full rounded-lg border bg-background pl-8 pr-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring'
+        }
+        role="combobox"
+        aria-expanded={hasDropdown}
+        aria-autocomplete="list"
+        aria-activedescendant={activeIndex >= 0 ? `combobox-opt-${activeIndex}` : undefined}
+      />
+      {hasDropdown && dropRect && createPortal(
+        <div ref={listRef} role="listbox" data-modal-passthrough
+          style={{ position: 'fixed', left: dropRect.left, top: dropRect.bottom + 4, width: dropRect.width, zIndex: 9999, pointerEvents: 'auto' }}
+          className="fayz-glass-surface max-h-52 overflow-y-auto rounded-lg border bg-popover shadow-lg py-0.5 animate-in fade-in zoom-in-95 duration-100">
+          {loading && options.length === 0 && (
+            <div className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground">
+              <svg className="h-3.5 w-3.5 animate-spin shrink-0" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
+                <path d="M14.5 8a6.5 6.5 0 00-6.5-6.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              <span>Buscando…</span>
+            </div>
+          )}
+          {options.map((opt, i) => (
+            <div key={opt.id} id={`combobox-opt-${i}`} role="option" aria-selected={i === activeIndex}
+              onMouseDown={(e) => { e.preventDefault(); onSelect(opt); setOpen(false) }}
+              onMouseEnter={() => setActiveIndex(i)}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors ${
+                i === activeIndex ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
+              }`}>
+              <div className="flex-1 min-w-0">
+                <p className="truncate font-medium">{opt.label}</p>
+                {opt.subtitle && <p className="truncate text-[11px] text-muted-foreground">{opt.subtitle}</p>}
+              </div>
+              {renderRight && <div className="shrink-0">{renderRight(opt)}</div>}
+            </div>
+          ))}
+          {showCreate && (
+            <div id={`combobox-opt-${options.length}`} role="option" aria-selected={activeIndex === options.length}
+              onMouseDown={(e) => { e.preventDefault(); onCreateNew?.(value.trim()); setOpen(false) }}
+              onMouseEnter={() => setActiveIndex(options.length)}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors border-t ${
+                activeIndex === options.length ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
+              }`}>
+              <Plus className="h-3.5 w-3.5 shrink-0" />
+              <span>{createLabel} &ldquo;<span className="font-medium">{value.trim()}</span>&rdquo;</span>
+            </div>
+          )}
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

package/src/primitives/data-table.tsx

@@ -35,7 +35,12 @@ function DataTable<TData, TValue>({
   compact = false,
 }: DataTableProps<TData, TValue>) {
   const isCard = variant === 'card'
-  const wrapperCls = isCard ? 'rounded-lg border bg-card shadow-sm overflow-x-auto' : 'rounded-lg border overflow-x-auto'
+  // Rounded box and scroll container must be SEPARATE elements: a scroll
+  // container paints its content over its own border-radius, which squared
+  // the corners the moment a row background met them.
+  const wrapperCls = isCard
+    ? 'overflow-hidden rounded-lg border bg-card shadow-sm'
+    : 'overflow-hidden rounded-lg border'
   const headerCls = isCard ? 'border-b bg-muted/50' : 'border-b bg-muted/30'
   const thCls = compact ? 'px-3 py-1.5 text-left text-[11px] font-medium text-muted-foreground' : 'px-4 py-2.5 text-left font-medium text-muted-foreground'
   const tdCls = compact ? 'px-3 py-1.5 align-middle text-xs' : 'px-4 py-3 align-middle'
@@ -55,6 +60,7 @@ function DataTable<TData, TValue>({
   if (loading) {
     return (
       <div className={wrapperCls}>
+        <div className="overflow-x-auto">
         <table className={tableCls}>
           <thead>
             <tr className={headerCls}>
@@ -77,12 +83,14 @@ function DataTable<TData, TValue>({
             ))}
           </tbody>
         </table>
+        </div>
       </div>
     )
   }
 
   return (
     <div className={wrapperCls}>
+      <div className="overflow-x-auto">
       <table className={tableCls}>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -144,6 +152,7 @@ function DataTable<TData, TValue>({
           )}
         </tbody>
       </table>
+      </div>
     </div>
   )
 }

package/src/primitives/index.ts

@@ -83,3 +83,4 @@ export { Popover, PopoverTrigger, PopoverContent } from './popover'
 export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './segmented-control'
 export { Markdown, renderMarkdown, type MarkdownProps } from './markdown'
 export { MarkdownEditor, type MarkdownEditorProps } from './markdown-editor'
+export { SearchCombobox, type ComboboxOption } from './SearchCombobox'