@fayz-ai/ui 0.8.3 → 0.8.4

package/dist/theme/index.js

@@ -1,4 +1,4 @@
-export { ThemeProvider, createFayzTheme, createTheme, darkTheme, fayzThemePresets, lightTheme, useTheme } from '../chunk-O5F4LLSL.js';
+export { ThemeProvider, createFayzTheme, createTheme, darkTheme, fayzThemePresets, lightTheme, useTheme } from '../chunk-DYMBFHD7.js';
 export { fayzUiPreset } from '../chunk-IWBXYV4U.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -3,7 +3,7 @@
   "fayz": {
     "status": "beta"
   },
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Fayz SDK UI — Radix + Tailwind component library with CRUD engine and layout shells",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -84,8 +84,8 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "zustand": "^4.5.0",
-    "@fayz-ai/core": "^0.8.3",
-    "@fayz-ai/auth": "^0.8.3"
+    "@fayz-ai/auth": "^0.8.4",
+    "@fayz-ai/core": "^0.8.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/dashboard/OnboardingWidget.tsx

@@ -3,6 +3,7 @@ import { Check, Circle } from 'lucide-react'
 import { cn } from '../utils/cn'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../primitives/card'
 import { Button } from '../primitives/button'
+import { Skeleton } from '../primitives/skeleton'
 import { renderIcon } from './icon'
 import type { IconRef } from './types'
 
@@ -30,6 +31,33 @@ export interface OnboardingWidgetProps {
   className?: string
 }
 
+/** Placeholder mirroring the widget's layout while the async checks resolve. */
+function OnboardingSkeleton({ rows, className }: { rows: number; className?: string }) {
+  return (
+    <Card className={className} aria-busy="true">
+      <CardHeader>
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="mt-1.5 h-3.5 w-64 max-w-full" />
+        <div className="mt-2 flex items-center gap-3">
+          <Skeleton className="h-1.5 flex-1 rounded-full" />
+          <Skeleton className="h-3 w-8" />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-1 pt-0">
+        {Array.from({ length: Math.max(rows, 1) }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-2 py-2.5">
+            <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
+            <div className="min-w-0 flex-1 space-y-1.5">
+              <Skeleton className="h-3.5 w-1/2" />
+              <Skeleton className="h-3 w-3/4" />
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
 /** Getting-started checklist ("first steps to set up") with progress. */
 export function OnboardingWidget({
   title = 'Getting started', subtitle, steps, onNavigate, hideWhenComplete = true, className,
@@ -58,7 +86,10 @@ export function OnboardingWidget({
 
   const doneCount = steps.filter((s) => completed[s.id]).length
   const allDone = doneCount === steps.length
-  if (!resolved) return null
+  // Hold the card's real shape while the checks settle. Painting the resolved
+  // checklist here would flash 0/N at an already-onboarded tenant, and painting
+  // nothing collapsed the row and shifted the dashboard on resolve.
+  if (!resolved) return <OnboardingSkeleton rows={steps.length} className={className} />
   if (allDone && hideWhenComplete) return null
 
   const runAction = (action: OnboardingStepInput['action']) => {

package/src/layout/Sidebar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
   Crown,
+  ExternalLink,
   Home,
   Users,
   Settings,
@@ -25,6 +26,7 @@ import {
   ShoppingBag,
   Target,
   Wrench,
+  Truck,
   ClipboardList,
   ListChecks,
   Briefcase,
@@ -114,6 +116,10 @@ export interface NavigationItem {
    *  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[]
 }
 
@@ -162,7 +168,7 @@ export interface SidebarProps {
 
 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,
@@ -199,33 +205,46 @@ function NavItem({
   onNavigate: (route: string) => void
 }) {
   const Icon = getIcon(item.icon)
+  const isExternal = !!item.href
+
+  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 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 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="ml-auto h-3.5 w-3.5 shrink-0 text-amber-500" aria-hidden />
+            <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>
   )
 
@@ -342,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>
             )
           })}
@@ -422,7 +454,13 @@ export function Sidebar({
   // 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>}
+      {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)}
@@ -509,7 +547,9 @@ export function Sidebar({
         <nav
           className={cn(
             'relative flex-1 p-2',
-            outgoing ? 'overflow-hidden' : 'overflow-y-auto',
+            // 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',
           )}
         >
           {outgoing && (

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/theme/index.ts

@@ -60,16 +60,19 @@ export function useTheme() {
 export function createTheme(overrides: CreateThemeOptions): ThemeTokens {
   const colors = { ...lightTheme.colors, ...overrides.colors }
 
-  // Brand shorthand: auto-derive primary, ring, accent from single HSL
+  // Brand shorthand: auto-derive primary, ring, accent from single HSL.
+  // Explicit `colors.*` overrides win — the shorthand is a default, not a
+  // mandate, so an app can pin any one of these without dropping the rest.
   if (overrides.brand) {
-    colors.primary = overrides.brand
-    colors.primaryForeground = '0 0% 100%'
-    colors.ring = overrides.brand
+    const given = overrides.colors ?? {}
+    if (given.primary == null) colors.primary = overrides.brand
+    if (given.primaryForeground == null) colors.primaryForeground = '0 0% 100%'
+    if (given.ring == null) colors.ring = overrides.brand
     const parts = overrides.brand.split(' ')
     if (parts.length >= 3) {
       const hue = (parseFloat(parts[0]) - 50 + 360) % 360
-      colors.accent = `${hue} ${parts[1]} ${parts[2]}`
-      colors.accentForeground = '0 0% 100%'
+      if (given.accent == null) colors.accent = `${hue} ${parts[1]} ${parts[2]}`
+      if (given.accentForeground == null) colors.accentForeground = '0 0% 100%'
     }
   }