@fayz-ai/ui 0.8.2 → 0.8.4

package/src/layout/Sidebar.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
+  Crown,
+  ExternalLink,
   Home,
   Users,
   Settings,
@@ -24,6 +26,7 @@ import {
   ShoppingBag,
   Target,
   Wrench,
+  Truck,
   ClipboardList,
   ListChecks,
   Briefcase,
@@ -82,6 +85,8 @@ import {
   Inbox,
   Star,
   TrendingUp,
+  GraduationCap,
+  Repeat,
   UserCheck,
   UserPlus,
   UserX,
@@ -89,6 +94,11 @@ import {
   Boxes,
   Clock3,
   FileCheck2,
+  User,
+  Palette,
+  ShieldCheck,
+  SlidersHorizontal,
+  Puzzle,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -102,6 +112,14 @@ 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
+  /** Sales-channel / external link: when set, the item opens this URL in a new
+   *  tab instead of navigating an internal route. Rendered as an anchor with an
+   *  external-link glyph. `route` is ignored for matching when `href` is set. */
+  href?: string
   children?: NavigationItem[]
 }
 
@@ -135,20 +153,42 @@ 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> = {
   Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
-  FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench,
+  FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench, Truck,
   Receipt, ShoppingBag, ClipboardList, ListChecks, Briefcase, UserCog, BookOpen, BookOpenCheck, MessageCircle, Globe,
   Percent, Tag, Tags, Camera, UtensilsCrossed, MapPin, Map, Handshake, Contact,
   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
 }
@@ -165,30 +205,46 @@ function NavItem({
   onNavigate: (route: string) => void
 }) {
   const Icon = getIcon(item.icon)
+  const isExternal = !!item.href
 
-  const content = (
-    <button
-      onClick={() => onNavigate(item.route)}
-      className={cn(
-        'flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors',
-        'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
-        isActive
-          ? 'bg-sidebar-accent font-semibold text-sidebar-accent-foreground shadow-sm'
-          : 'text-sidebar-foreground/80',
-        collapsed && 'justify-center px-2',
-      )}
-    >
+  const className = cn(
+    'flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors',
+    'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
+    isActive
+      ? 'bg-sidebar-accent font-semibold text-sidebar-accent-foreground shadow-sm'
+      : 'text-sidebar-foreground/80',
+    collapsed && 'justify-center px-2',
+  )
+
+  const inner = (
+    <>
       <Icon className="h-4 w-4 shrink-0" />
       {!collapsed && (
         <>
           <span className="flex-1 truncate text-left">{item.label}</span>
+          {isExternal && (
+            <ExternalLink className="ml-auto h-3.5 w-3.5 shrink-0 opacity-50" aria-hidden />
+          )}
+          {item.premium && (
+            <Crown className={cn('h-3.5 w-3.5 shrink-0 text-amber-500', !isExternal && 'ml-auto')} 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">
+            <span className={cn('rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground', !isExternal && !item.premium && 'ml-auto')}>
               {item.badge}
             </span>
           )}
         </>
       )}
+    </>
+  )
+
+  const content = isExternal ? (
+    <a href={item.href} target="_blank" rel="noopener noreferrer" className={className}>
+      {inner}
+    </a>
+  ) : (
+    <button onClick={() => onNavigate(item.route)} className={className}>
+      {inner}
     </button>
   )
 
@@ -203,6 +259,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}
@@ -302,19 +361,32 @@ function NavGroup({
           {item.children?.map((child) => {
             const ChildIcon = getIcon(child.icon)
             const isActive = child.route === activeRoute
-            return (
-              <button
-                key={child.id}
-                onClick={() => onNavigate(child.route)}
-                className={cn(
-                  'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors',
-                  isActive
-                    ? 'font-medium text-sidebar-accent-foreground'
-                    : 'text-sidebar-muted hover:text-sidebar-accent-foreground'
-                )}
-              >
+            const childExternal = !!child.href
+            const childClass = cn(
+              'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors',
+              isActive
+                ? 'font-medium text-sidebar-accent-foreground'
+                : 'text-sidebar-muted hover:text-sidebar-accent-foreground'
+            )
+            const childInner = (
+              <>
                 <ChildIcon className="h-3.5 w-3.5 shrink-0" />
-                <span className="truncate">{child.label}</span>
+                <span className="flex-1 truncate text-left">{child.label}</span>
+                {childExternal && (
+                  <ExternalLink className="h-3 w-3 shrink-0 opacity-50" aria-hidden />
+                )}
+                {child.premium && (
+                  <Crown className="h-3 w-3 shrink-0 text-amber-500" aria-hidden />
+                )}
+              </>
+            )
+            return childExternal ? (
+              <a key={child.id} href={child.href} target="_blank" rel="noopener noreferrer" className={childClass}>
+                {childInner}
+              </a>
+            ) : (
+              <button key={child.id} onClick={() => onNavigate(child.route)} className={childClass}>
+                {childInner}
               </button>
             )
           })}
@@ -339,6 +411,9 @@ export function Sidebar({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  sectionLabels,
+  navKey,
+  navDirection = 'forward',
 }: SidebarProps) {
   const currentPath = currentPathProp
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
@@ -355,6 +430,76 @@ 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">
+          {React.isValidElement(topContent)
+            ? React.cloneElement(topContent as React.ReactElement<any>, { collapsed })
+            : 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 +541,37 @@ 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',
+            // scrollbar-none: the rail still scrolls, but without the native
+            // scrollbar gutter eating into the nav items.
+            outgoing ? 'overflow-hidden' : 'overflow-y-auto scrollbar-none',
           )}
-
-          {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/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/search-select.tsx

@@ -43,7 +43,9 @@ export interface SearchSelectProps {
   onCreate?: (query: string) => void | Promise<void>
   /** Custom render for each option */
   renderOption?: (option: SearchSelectOption) => React.ReactNode
-  /** Load initial results when dropdown opens (calls onSearch('')) */
+  /** Load initial results when dropdown opens (calls onSearch('')). Default
+   *  true — clicking lists options before any typing; pass false to require
+   *  a query first (e.g. very large datasets with no cheap top-N). */
   loadOnOpen?: boolean
   /** Additional className for the container */
   className?: string
@@ -69,7 +71,7 @@ export function SearchSelect({
   createLabel = 'Add',
   onCreate,
   renderOption,
-  loadOnOpen,
+  loadOnOpen = true,
   className,
   disabled,
 }: SearchSelectProps) {
@@ -162,6 +164,10 @@ export function SearchSelect({
     if (disabled || creating) return
     setOpen(true)
     setQuery('')
+    // Stale results from a previous typed query would render for the empty
+    // query now that the dropdown shows immediately — drop them so the
+    // loadOnOpen effect refetches the initial listing.
+    setResults([])
     setTimeout(() => inputRef.current?.focus(), 0)
   }
 
@@ -177,7 +183,9 @@ export function SearchSelect({
   }, [results])
 
   const hasValue = !!value && !!selectedLabel
-  const showDropdown = open && query.length >= minChars
+  // With loadOnOpen the dropdown must show for the EMPTY query too — gating it
+  // on minChars silently hid the initial listing loadOnOpen had just fetched.
+  const showDropdown = open && (query.length >= minChars || loadOnOpen)
 
   return (
     <div ref={containerRef} className={cn('relative', className)}>
@@ -246,7 +254,7 @@ export function SearchSelect({
             </div>
           ) : results.length === 0 ? (
             <div className="px-4 py-4 text-center">
-              <p className="text-xs text-muted-foreground">No results for "{query}"</p>
+              <p className="text-xs text-muted-foreground">{query ? `No results for "${query}"` : 'No results'}</p>
               {allowCreate && onCreate && (
                 <button
                   onClick={() => handleCreate(query)}

package/src/styles.css

@@ -370,6 +370,7 @@ select.bg-card,
   --saas-page-enter-duration: 250ms;
   --saas-page-enter-offset: 4px;
   --saas-nav-slide-offset: 12px;
+  --saas-rail-duration: 260ms;
 }
 
 /* Page content transition */
@@ -425,3 +426,36 @@ select.bg-card,
   from { opacity: 0; transform: translateX(calc(-1 * var(--saas-nav-slide-offset))); }
   to { opacity: 1; transform: translateX(0); }
 }
+
+/* Sidebar rail push — when the whole left menu swaps context (e.g. app nav →
+   settings nav) the incoming rail pulls in from one side while the outgoing
+   one slides off the other, iOS-push style. The outgoing pane is absolutely
+   positioned over the incoming one for the duration of the animation. */
+.saas-rail-in-forward  { animation: saas-rail-in-forward  var(--saas-rail-duration) var(--saas-transition-easing) both; }
+.saas-rail-out-forward { animation: saas-rail-out-forward var(--saas-rail-duration) var(--saas-transition-easing) both; }
+.saas-rail-in-back     { animation: saas-rail-in-back     var(--saas-rail-duration) var(--saas-transition-easing) both; }
+.saas-rail-out-back    { animation: saas-rail-out-back    var(--saas-rail-duration) var(--saas-transition-easing) both; }
+
+@keyframes saas-rail-in-forward {
+  from { opacity: 0; transform: translateX(100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes saas-rail-out-forward {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-35%); }
+}
+@keyframes saas-rail-in-back {
+  from { opacity: 0; transform: translateX(-100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes saas-rail-out-back {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(35%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .saas-rail-in-forward, .saas-rail-out-forward,
+  .saas-rail-in-back, .saas-rail-out-back {
+    animation-duration: 1ms;
+  }
+}