@fayz-ai/ui 0.8.3 → 0.8.5

package/src/dashboard/ChartWidget.tsx

@@ -1,27 +1,8 @@
 import * as React from 'react'
-import {
-  ResponsiveContainer,
-  LineChart, Line,
-  BarChart, Bar,
-  AreaChart, Area,
-  PieChart, Pie, Cell,
-  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts'
 import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
 import { renderIcon } from './icon'
 import type { ChartSeries, ChartType, IconRef } from './types'
 
-/** Theme-driven palette (HSL triplet CSS vars defined in styles.css). */
-const PALETTE = [
-  'hsl(var(--info))',
-  'hsl(var(--magic))',
-  'hsl(var(--success))',
-  'hsl(var(--warning))',
-  'hsl(var(--destructive))',
-]
-const AXIS = 'hsl(var(--muted-foreground))'
-const GRID = 'hsl(var(--border))'
-
 export interface ChartWidgetProps {
   type: ChartType
   /** Rows of data; each key referenced by a series.dataKey. */
@@ -37,12 +18,15 @@ export interface ChartWidgetProps {
   className?: string
 }
 
+// The recharts body is lazy so recharts ships as an async chunk instead of in
+// every consumer's entry bundle; the Card shell renders immediately and the
+// fallback reserves the chart's height to avoid layout shift.
+const ChartWidgetInner = React.lazy(() => import('./ChartWidgetInner'))
+
 /** recharts-backed chart in a Card. Replaces the hand-rolled CSS bar charts. */
 export function ChartWidget({
   type, data, series, categoryKey = 'name', title, icon, headerAction, height = 240, className,
 }: ChartWidgetProps) {
-  const color = (i: number, explicit?: string) => explicit ?? PALETTE[i % PALETTE.length]
-
   return (
     <Card className={className}>
       {(title || headerAction) && (
@@ -57,50 +41,9 @@ export function ChartWidget({
         </CardHeader>
       )}
       <CardContent className="p-4 pt-2">
-        <ResponsiveContainer width="100%" height={height}>
-          {type === 'pie' ? (
-            <PieChart>
-              <Tooltip />
-              <Pie data={data} dataKey={series[0]?.dataKey ?? 'value'} nameKey={categoryKey} innerRadius={50} outerRadius={80} paddingAngle={2}>
-                {data.map((_, i) => <Cell key={i} fill={color(i, series[0]?.color)} />)}
-              </Pie>
-              <Legend />
-            </PieChart>
-          ) : type === 'bar' ? (
-            <BarChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip cursor={{ fill: GRID, opacity: 0.3 }} />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Bar key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} fill={color(i, s.color)} radius={[4, 4, 0, 0]} />
-              ))}
-            </BarChart>
-          ) : type === 'area' ? (
-            <AreaChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Area key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} fill={color(i, s.color)} fillOpacity={0.15} />
-              ))}
-            </AreaChart>
-          ) : (
-            <LineChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Line key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} strokeWidth={2} dot={false} />
-              ))}
-            </LineChart>
-          )}
-        </ResponsiveContainer>
+        <React.Suspense fallback={<div style={{ height }} />}>
+          <ChartWidgetInner type={type} data={data} series={series} categoryKey={categoryKey} height={height} />
+        </React.Suspense>
       </CardContent>
     </Card>
   )

package/src/dashboard/ChartWidgetInner.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ResponsiveContainer,
+  LineChart, Line,
+  BarChart, Bar,
+  AreaChart, Area,
+  PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts'
+import type { ChartSeries, ChartType } from './types'
+
+/** Theme-driven palette (HSL triplet CSS vars defined in styles.css). */
+const PALETTE = [
+  'hsl(var(--info))',
+  'hsl(var(--magic))',
+  'hsl(var(--success))',
+  'hsl(var(--warning))',
+  'hsl(var(--destructive))',
+]
+const AXIS = 'hsl(var(--muted-foreground))'
+const GRID = 'hsl(var(--border))'
+
+export interface ChartWidgetInnerProps {
+  type: ChartType
+  data: Array<Record<string, string | number>>
+  series: ChartSeries[]
+  categoryKey: string
+  height: number
+}
+
+// recharts-backed chart body. Default export + own module so ChartWidget can
+// React.lazy it — recharts (~400 KB min) then lives in an async chunk instead
+// of every consumer's entry bundle.
+export default function ChartWidgetInner({ type, data, series, categoryKey, height }: ChartWidgetInnerProps) {
+  const color = (i: number, explicit?: string) => explicit ?? PALETTE[i % PALETTE.length]
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      {type === 'pie' ? (
+        <PieChart>
+          <Tooltip />
+          <Pie data={data} dataKey={series[0]?.dataKey ?? 'value'} nameKey={categoryKey} innerRadius={50} outerRadius={80} paddingAngle={2}>
+            {data.map((_, i) => <Cell key={i} fill={color(i, series[0]?.color)} />)}
+          </Pie>
+          <Legend />
+        </PieChart>
+      ) : type === 'bar' ? (
+        <BarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip cursor={{ fill: GRID, opacity: 0.3 }} />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Bar key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} fill={color(i, s.color)} radius={[4, 4, 0, 0]} />
+          ))}
+        </BarChart>
+      ) : type === 'area' ? (
+        <AreaChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Area key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} fill={color(i, s.color)} fillOpacity={0.15} />
+          ))}
+        </AreaChart>
+      ) : (
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Line key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} strokeWidth={2} dot={false} />
+          ))}
+        </LineChart>
+      )}
+    </ResponsiveContainer>
+  )
+}

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/dashboard/icon.ts

@@ -1,12 +1,12 @@
 import * as React from 'react'
-import * as LucideIcons from 'lucide-react'
+import { getLucideIcon } from '../icons'
 import type { IconRef } from './types'
 
 /** Resolve an IconRef (lucide name or component) to a renderable element. */
 export function renderIcon(icon: IconRef | undefined, className = 'h-4 w-4'): React.ReactNode {
   if (!icon) return null
   if (typeof icon === 'string') {
-    const Comp = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[icon]
+    const Comp = getLucideIcon(icon)
     return Comp ? React.createElement(Comp, { className }) : null
   }
   return React.createElement(icon, { className })

package/src/icons.ts

@@ -0,0 +1,66 @@
+import type { LucideIcon } from 'lucide-react'
+import {
+  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
+  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
+  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
+  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
+  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
+  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
+  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
+  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
+  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
+  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
+  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
+  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
+  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
+  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
+  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
+  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
+  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
+  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
+  Zap,
+} from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Central lucide icon registry. The SDK's manifest-driven surfaces resolve
+// icons by string name; a namespace import (`import * as LucideIcons`) defeats
+// tree-shaking and drags all ~1,500 icons (~500 KB min) into every bundle, so
+// the SDK ships this curated set instead — the union of every icon name the
+// SDK, plugins, and app templates reference. Apps using names outside the set
+// call registerIcons({ Name: Component }) with their own named imports.
+// ---------------------------------------------------------------------------
+
+const registry: Record<string, LucideIcon> = {
+  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
+  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
+  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
+  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
+  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
+  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
+  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
+  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
+  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
+  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
+  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
+  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
+  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
+  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
+  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
+  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
+  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
+  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
+  Zap,
+}
+
+/** Add or override icons resolvable by string name (e.g. from app manifests). */
+export function registerIcons(icons: Record<string, LucideIcon>): void {
+  Object.assign(registry, icons)
+}
+
+/** Resolve a lucide icon by name; undefined when not registered. */
+export function getLucideIcon(name: string): LucideIcon | undefined {
+  return registry[name]
+}
+
+/** The registered icon map (live reference — do not mutate directly). */
+export const ICON_MAP = registry

package/src/index.ts

@@ -228,3 +228,7 @@ export {
   type ChartType,
   type ChartSeries,
 } from './dashboard'
+
+// Central lucide icon registry — curated tree-shakable set + escape hatch for
+// apps that need icon names outside it (registerIcons({ Name: Component })).
+export { registerIcons, getLucideIcon } from './icons'

package/src/layout/Sidebar.tsx

@@ -1,104 +1,10 @@
 import * as React from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
-  Crown,
-  Home,
-  Users,
-  Settings,
-  CreditCard,
-  Bell,
-  Calendar,
-  CalendarClock,
-  Package,
-  Activity,
-  BarChart3,
-  FileText,
-  Mail,
-  PanelLeftClose,
-  PanelLeft,
-  Search,
-  Shield,
-  DollarSign,
-  Megaphone,
-  Receipt,
-  ShoppingCart,
-  ShoppingBag,
-  Target,
-  Wrench,
-  ClipboardList,
-  ListChecks,
-  Briefcase,
-  UserCog,
-  BookOpen,
-  BookOpenCheck,
-  MessageCircle,
-  Globe,
-  Percent,
-  Tag,
-  Tags,
-  Camera,
-  UtensilsCrossed,
-  MapPin,
-  Map,
-  Handshake,
-  Contact,
-  Building2,
-  Filter,
-  Plus,
-  List,
-  ListPlus,
-  ChevronDown,
-  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,
-  GraduationCap,
-  Repeat,
-  UserCheck,
-  UserPlus,
-  UserX,
-  Workflow,
-  Boxes,
-  Clock3,
-  FileCheck2,
-  User,
-  Palette,
-  ShieldCheck,
-  SlidersHorizontal,
-  Puzzle,
+  Bell, ChevronDown, Crown, ExternalLink, Home, PanelLeft, PanelLeftClose, Search, Settings, User,
   type LucideIcon,
 } from 'lucide-react'
+import { ICON_MAP } from '../icons'
 import { cn } from '../utils/cn'
 import { useLayoutStore } from '../stores/layout.store'
 
@@ -114,6 +20,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[]
 }
 
@@ -160,18 +70,8 @@ export interface SidebarProps {
   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,
-  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,
-}
-
+// ICON_MAP now lives in ../icons (central curated registry, shared by every
+// string-name icon lookup in the SDK); re-exported here for compat.
 export { ICON_MAP }
 
 /** Kept in sync with --saas-rail-duration in styles.css. */
@@ -199,33 +99,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 +255,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 +348,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 +441,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/date-picker.tsx

@@ -28,6 +28,17 @@ function formatDate(date: Date, locale: string) {
   return date.toLocaleDateString(toDateLocale(locale), { month: 'short', day: 'numeric', year: 'numeric' })
 }
 
+/** Toolbar label: the year is noise while you're inside it, and two of these sit
+ *  side by side in a range — it only earns its space on another year. */
+function formatDateCompact(date: Date, locale: string) {
+  const sameYear = date.getFullYear() === new Date().getFullYear()
+  return date.toLocaleDateString(toDateLocale(locale), {
+    month: 'short',
+    day: 'numeric',
+    ...(sameYear ? {} : { year: 'numeric' }),
+  })
+}
+
 function toDateStr(d: Date) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
@@ -42,13 +53,24 @@ interface DatePickerProps {
   value: string
   onChange: (value: string) => void
   className?: string
+  /**
+   * `input` (default) is the form-field trigger. `toolbar` is the 26px pill that
+   * matches SegmentedControl/Button `sm`, for filter bars where a full-height
+   * form field towers over everything beside it.
+   */
+  variant?: 'input' | 'toolbar'
   /** Open the dropdown immediately on mount */
   defaultOpen?: boolean
   /** Called when the dropdown opens or closes */
   onOpenChange?: (open: boolean) => void
 }
 
-export function DatePicker({ value, onChange, className, defaultOpen, onOpenChange }: DatePickerProps) {
+const TRIGGER_VARIANT: Record<'input' | 'toolbar', string> = {
+  input: 'rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm w-full',
+  toolbar: 'h-[26px] rounded-button border border-border bg-card shadow-button px-2.5 text-xs font-medium',
+}
+
+export function DatePicker({ value, onChange, className, variant = 'input', defaultOpen, onOpenChange }: DatePickerProps) {
   const t = useTranslation()
   const locale = getCurrentLocale()
   const [open, setOpen] = useState(defaultOpen ?? false)
@@ -129,9 +151,13 @@ export function DatePicker({ value, onChange, className, defaultOpen, onOpenChan
     <div ref={ref} className={`relative ${className ?? ''}`}>
       {/* Trigger */}
       <button ref={triggerRef} type="button" onClick={() => setOpen((p) => !p)}
-        className="flex items-center gap-2 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm hover:bg-muted/30  transition-colors w-full text-left">
-        <Calendar className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-        <span>{value ? formatDate(selectedDate, locale) : t('common.selectDate')}</span>
+        className={`flex items-center gap-2 text-left transition-colors hover:bg-muted/30 ${TRIGGER_VARIANT[variant]}`}>
+        <Calendar className={`shrink-0 text-muted-foreground ${variant === 'toolbar' ? 'h-3 w-3' : 'h-3.5 w-3.5'}`} />
+        <span className="whitespace-nowrap">
+          {value
+            ? (variant === 'toolbar' ? formatDateCompact : formatDate)(selectedDate, locale)
+            : t('common.selectDate')}
+        </span>
       </button>
 
       {/* Dropdown — portal to escape overflow containers */}