@fayz-ai/ui 0.6.0 → 0.7.0

package/src/layout/Sidebar.tsx

@@ -7,40 +7,53 @@ import {
   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,
@@ -49,7 +62,12 @@ import {
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
+  Landmark,
+  CircleDollarSign,
   Layers,
   Music,
   Eye,
@@ -61,8 +79,16 @@ import {
   Award,
   LayoutDashboard,
   MessageSquare,
+  Inbox,
   Star,
+  TrendingUp,
+  UserCheck,
+  UserPlus,
+  UserX,
   Workflow,
+  Boxes,
+  Clock3,
+  FileCheck2,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -112,13 +138,13 @@ export interface SidebarProps {
 }
 
 const ICON_MAP: Record<string, LucideIcon> = {
-  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
+  Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
   FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench,
-  ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
-  Percent, Tag, Camera, UtensilsCrossed, MapPin, Handshake, Contact,
-  Building2, Filter, Plus, List, Search, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
-  PartyPopper, Radio, CalendarDays, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
-  Zap, Award, LayoutDashboard, MessageSquare, Star, Workflow,
+  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,
 }
 
 export { ICON_MAP }
@@ -192,24 +218,45 @@ function NavItem({
   return content
 }
 
+/** How specifically `route` matches `path` (-1 = no match; higher = more specific).
+ *  An exact match beats a prefix match; a longer prefix beats a shorter one. */
+function routeMatchScore(route: string, path: string): number {
+  if (path === route) return route.length + 1
+  if (route !== '/' && path.startsWith(route + '/')) return route.length
+  return -1
+}
+
+/** The single most-specific nav route that matches the current path (longest wins).
+ *  Prevents a parent like `/courses` from staying active on `/courses/sales`. */
+function resolveActiveRoute(navigation: NavigationItem[], path: string): string | null {
+  let best: string | null = null
+  let bestScore = 0
+  const consider = (route?: string) => {
+    if (!route) return
+    const score = routeMatchScore(route, path)
+    if (score > bestScore) { bestScore = score; best = route }
+  }
+  for (const item of navigation) {
+    consider(item.route)
+    for (const child of item.children ?? []) consider(child.route)
+  }
+  return best
+}
+
 function NavGroup({
   item,
   collapsed,
-  currentPath,
+  activeRoute,
   onNavigate,
 }: {
   item: NavigationItem
   collapsed: boolean
-  currentPath: string
+  activeRoute: string | null
   onNavigate: (route: string) => void
 }) {
-  const [open, setOpen] = React.useState(() =>
-    item.children?.some((c) => currentPath === c.route || currentPath.startsWith(c.route + '/')) ?? false
-  )
+  const isChildActive = item.children?.some((c) => c.route === activeRoute)
+  const [open, setOpen] = React.useState(() => isChildActive ?? false)
   const Icon = getIcon(item.icon)
-  const isChildActive = item.children?.some(
-    (c) => currentPath === c.route || currentPath.startsWith(c.route + '/')
-  )
 
   if (collapsed) {
     return (
@@ -254,7 +301,7 @@ function NavGroup({
         <div className="ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border/50 pl-3">
           {item.children?.map((child) => {
             const ChildIcon = getIcon(child.icon)
-            const isActive = currentPath === child.route || currentPath.startsWith(child.route + '/')
+            const isActive = child.route === activeRoute
             return (
               <button
                 key={child.id}
@@ -296,6 +343,10 @@ export function Sidebar({
   const currentPath = currentPathProp
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
 
+  // Most-specific match wins, so sibling routes that share a prefix (e.g.
+  // /courses vs /courses/sales) don't both light up.
+  const activeRoute = resolveActiveRoute(navigation, currentPath)
+
   const mainItems = navigation.filter((item) => item.section === 'main')
   const secondaryItems = navigation.filter((item) => item.section === 'secondary')
   const settingsItems = navigation.filter((item) => item.section === 'settings')
@@ -353,13 +404,13 @@ export function Sidebar({
             <div className="space-y-1">
               {mainItems.map((item) =>
                 item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} currentPath={currentPath} onNavigate={handleNavigate} />
+                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
                 ) : (
                   <NavItem
                     key={item.id}
                     item={item}
                     collapsed={collapsed}
-                    isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                    isActive={item.route === activeRoute}
                     onNavigate={handleNavigate}
                   />
                 )
@@ -371,13 +422,13 @@ export function Sidebar({
             <div className="mt-6 space-y-1">
               {secondaryItems.map((item) =>
                 item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} currentPath={currentPath} onNavigate={handleNavigate} />
+                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
                 ) : (
                   <NavItem
                     key={item.id}
                     item={item}
                     collapsed={collapsed}
-                    isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                    isActive={item.route === activeRoute}
                     onNavigate={handleNavigate}
                   />
                 )
@@ -394,7 +445,7 @@ export function Sidebar({
                 key={item.id}
                 item={item}
                 collapsed={collapsed}
-                isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                isActive={item.route === activeRoute}
                 onNavigate={handleNavigate}
               />
             ))}

package/src/layout/Topbar.tsx

@@ -11,23 +11,30 @@ import {
   CreditCard,
   Bell,
   Calendar,
+  CalendarClock,
   Package,
+  Activity,
   BarChart3,
+  Clapperboard,
   FileText,
   Mail,
   DollarSign,
   Megaphone,
   ShoppingCart,
+  ShoppingBag,
   Target,
   Wrench,
   ClipboardList,
+  ClipboardCheck,
   Briefcase,
   UserCog,
   BookOpen,
+  BookOpenCheck,
   MessageCircle,
   Globe,
   Percent,
   Tag,
+  Tags,
   Camera,
   UtensilsCrossed,
   MapPin,
@@ -35,7 +42,11 @@ import {
   Contact,
   Building2,
   Plus,
+  Shield,
   List,
+  ListChecks,
+  FileCheck2,
+  FolderOpen,
   Dog,
   Cat,
   PawPrint,
@@ -64,18 +75,32 @@ import {
   SlidersHorizontal,
   TableProperties,
   UserPlus,
+  UserCheck,
+  UserX,
   TreePalm,
+  Boxes,
+  Box,
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
   Layers,
   Music,
   Eye,
   ListMusic,
+  ListPlus,
+  Map,
+  Ban,
+  Clock3,
   Disc3,
   UsersRound,
   Mic,
+  Inbox,
+  Star,
+  Zap,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -175,13 +200,14 @@ function TopbarUserMenu({
 }
 
 export const ICON_MAP: Record<string, LucideIcon> = {
-  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
-  FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench,
-  ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
-  Percent, Tag, Camera, UtensilsCrossed, Search, MapPin, Handshake,
-  Contact, Building2, ChevronDown, Filter, Plus, List, 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, TreePalm,
-  PartyPopper, Radio, CalendarDays, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
+  Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
+  FileText, Mail, DollarSign, Megaphone, ShoppingCart, ShoppingBag, Target, Wrench,
+  ClipboardList, ClipboardCheck, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
+  BookOpenCheck, Percent, Tag, Tags, Camera, UtensilsCrossed, Search, MapPin, Handshake,
+  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,
 }
 
 function getIcon(name: string): LucideIcon {
@@ -281,15 +307,19 @@ export function Topbar({
       {/* Row 1: Logo + Search + Actions */}
       <div className="border-b border-sidebar-border bg-sidebar text-sidebar-foreground">
         <div className="flex h-14 w-full items-center justify-between px-4 md:px-6">
-          {/* Left: Mobile menu + Logo */}
+          {/* Left: Mobile menu + Logo — the hamburger is only rendered when an
+              onMenuClick handler is supplied. Mobile-first apps with a bottom
+              nav omit it so the bottom bar is the primary navigation. */}
           <div className="flex items-center gap-3">
-            <button
-              onClick={onMenuClick}
-              className="inline-flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar/30 hover:text-sidebar-foreground md:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
+            {onMenuClick && (
+              <button
+                onClick={onMenuClick}
+                className="inline-flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar/30 hover:text-sidebar-foreground md:hidden"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
+            )}
             <div className="hidden shrink-0 items-center md:flex">
               {logo ?? <span className="text-lg font-bold">App</span>}
             </div>
@@ -299,7 +329,7 @@ export function Topbar({
           <div className="mx-8 hidden max-w-sm flex-1 md:flex">
             <button
               onClick={() => setCommandPaletteOpen(true)}
-              className="relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:bg-card"
+              className="relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:border-sidebar-foreground/25 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
             >
               <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-sidebar-muted" />
               <span className="text-xs">{searchPlaceholder}</span>
@@ -335,7 +365,7 @@ export function Topbar({
               const left = active.offsetLeft - el.offsetWidth / 2 + active.offsetWidth / 2
               el.scrollTo({ left: Math.max(0, left), behavior: 'smooth' })
             }
-          }} className="flex items-center gap-0.5 overflow-x-auto scrollbar-hide">
+          }} className="flex items-center gap-0.5 overflow-x-auto scrollbar-none">
             {allNav.map((item) => {
               if (item.children && item.children.length > 0) {
                 return (

package/src/layout/index.ts

@@ -1,4 +1,12 @@
-export { AppShell, type AppShellProps, type AppShellUser } from './AppShell'
+export {
+  AppShell,
+  type AppShellProps,
+  type AppShellUser,
+  type BottomNavItem,
+  type BottomNavRouteItem,
+  type BottomNavActionItem,
+  type MobileHeaderVariant,
+} from './AppShell'
 export { Sidebar, type SidebarProps, type SidebarUser, type NavigationItem, ICON_MAP } from './Sidebar'
 export { Topbar, type TopbarProps } from './Topbar'
 export {
@@ -23,3 +31,9 @@ export {
   useNavTransition,
   type NavTransition,
 } from './PageTransition'
+export {
+  ContentSplit,
+  ContentSplitTrigger,
+  type ContentSplitProps,
+  type ContentSplitTriggerProps,
+} from './ContentSplit'

package/src/primitives/dropdown.tsx

@@ -25,7 +25,7 @@ const DropdownSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted',
+      'flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted',
       inset && 'pl-8',
       className
     )}
@@ -79,7 +79,7 @@ const DropdownItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -95,7 +95,7 @@ const DropdownCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}

package/src/primitives/index.ts

@@ -81,3 +81,5 @@ export { CurrencyInput } from './currency-input'
 export { ConfirmDialog } from './confirm-dialog'
 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'

package/src/primitives/markdown-editor.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+import { SegmentedControl } from './segmented-control'
+import { Markdown } from './markdown'
+
+export interface MarkdownEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  /** Minimum visible rows for the textarea. */
+  minRows?: number
+  defaultMode?: 'edit' | 'preview'
+  /** i18n injection — ui stays locale-agnostic. */
+  editLabel?: string
+  previewLabel?: string
+  /** Custom preview renderer — e.g. a social-post mockup instead of plain
+   *  markdown. Defaults to the built-in Markdown renderer. */
+  renderPreview?: (value: string) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Markdown editor with an edit/preview toggle. Plain textarea + the zero-dep
+ * Markdown renderer — deliberately not a block/WYSIWYG editor (that's a later
+ * milestone); this covers script/brief documents today.
+ */
+export function MarkdownEditor({
+  value,
+  onChange,
+  placeholder,
+  minRows = 16,
+  defaultMode = 'preview',
+  editLabel = 'Edit',
+  previewLabel = 'Preview',
+  renderPreview,
+  className,
+}: MarkdownEditorProps) {
+  const [mode, setMode] = React.useState<'edit' | 'preview'>(
+    defaultMode === 'preview' && value.trim() === '' ? 'edit' : defaultMode,
+  )
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      <div className="flex justify-end">
+        <SegmentedControl
+          aria-label="Markdown mode"
+          options={[
+            { value: 'edit', label: editLabel },
+            { value: 'preview', label: previewLabel },
+          ]}
+          value={mode}
+          onChange={(m) => setMode(m as 'edit' | 'preview')}
+        />
+      </div>
+      {mode === 'edit' ? (
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          rows={Math.max(minRows, value.split('\n').length + 1)}
+          className={cn(
+            'w-full resize-y rounded-md border border-border bg-card p-3',
+            'font-mono text-[13px] leading-relaxed text-foreground',
+            'placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+          )}
+        />
+      ) : renderPreview ? (
+        renderPreview(value)
+      ) : (
+        <div className="rounded-md border border-border bg-card p-4">
+          <Markdown source={value} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/primitives/markdown.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+
+/**
+ * Minimal markdown renderer — builds React elements directly (no HTML string,
+ * no dangerouslySetInnerHTML), so untrusted content is safe by construction.
+ * Supports the subset content docs actually use: h1–h3, ---, blockquote,
+ * ul/ol, paragraphs, and inline **bold** / *italic* / `code`.
+ */
+
+const INLINE_TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g
+
+function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
+  return text.split(INLINE_TOKEN).map((part, i) => {
+    const key = `${keyPrefix}-${i}`
+    if (part.startsWith('**') && part.endsWith('**') && part.length > 4) {
+      return <strong key={key}>{part.slice(2, -2)}</strong>
+    }
+    if (part.startsWith('*') && part.endsWith('*') && part.length > 2) {
+      return <em key={key}>{part.slice(1, -1)}</em>
+    }
+    if (part.startsWith('`') && part.endsWith('`') && part.length > 2) {
+      return (
+        <code key={key} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">
+          {part.slice(1, -1)}
+        </code>
+      )
+    }
+    return part === '' ? null : <React.Fragment key={key}>{part}</React.Fragment>
+  })
+}
+
+type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; text: string }
+  | { type: 'hr' }
+  | { type: 'blockquote'; lines: string[] }
+  | { type: 'ul'; items: string[] }
+  | { type: 'ol'; items: string[] }
+  | { type: 'p'; lines: string[] }
+
+function parseBlocks(source: string): Block[] {
+  const lines = source.replace(/\r\n/g, '\n').split('\n')
+  const blocks: Block[] = []
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i]
+    const trimmed = line.trim()
+    if (trimmed === '') { i++; continue }
+    const heading = /^(#{1,3})\s+(.*)$/.exec(trimmed)
+    if (heading) {
+      blocks.push({ type: 'heading', level: heading[1].length as 1 | 2 | 3, text: heading[2] })
+      i++
+      continue
+    }
+    if (/^(-{3,}|\*{3,})$/.test(trimmed)) {
+      blocks.push({ type: 'hr' })
+      i++
+      continue
+    }
+    if (trimmed.startsWith('>')) {
+      const quote: string[] = []
+      while (i < lines.length && lines[i].trim().startsWith('>')) {
+        quote.push(lines[i].trim().replace(/^>\s?/, ''))
+        i++
+      }
+      blocks.push({ type: 'blockquote', lines: quote })
+      continue
+    }
+    if (/^[-*]\s+/.test(trimmed)) {
+      const items: string[] = []
+      while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
+        items.push(lines[i].trim().replace(/^[-*]\s+/, ''))
+        i++
+      }
+      blocks.push({ type: 'ul', items })
+      continue
+    }
+    if (/^\d+[.)]\s+/.test(trimmed)) {
+      const items: string[] = []
+      while (i < lines.length && /^\d+[.)]\s+/.test(lines[i].trim())) {
+        items.push(lines[i].trim().replace(/^\d+[.)]\s+/, ''))
+        i++
+      }
+      blocks.push({ type: 'ol', items })
+      continue
+    }
+    const para: string[] = []
+    while (i < lines.length && lines[i].trim() !== '' && !/^(#{1,3}\s|>|[-*]\s|\d+[.)]\s|-{3,}$|\*{3,}$)/.test(lines[i].trim())) {
+      para.push(lines[i].trim())
+      i++
+    }
+    blocks.push({ type: 'p', lines: para })
+  }
+  return blocks
+}
+
+const HEADING_CLASS: Record<1 | 2 | 3, string> = {
+  1: 'text-xl font-semibold tracking-tight',
+  2: 'text-base font-semibold tracking-tight',
+  3: 'text-sm font-semibold',
+}
+
+export function renderMarkdown(source: string): React.ReactNode {
+  const blocks = parseBlocks(source)
+  return blocks.map((block, bi) => {
+    const key = `md-${bi}`
+    switch (block.type) {
+      case 'heading': {
+        const Tag = (`h${block.level}`) as 'h1' | 'h2' | 'h3'
+        return (
+          <Tag key={key} className={HEADING_CLASS[block.level]}>
+            {renderInline(block.text, key)}
+          </Tag>
+        )
+      }
+      case 'hr':
+        return <hr key={key} className="border-border" />
+      case 'blockquote':
+        return (
+          <blockquote key={key} className="border-l-2 border-border pl-3 text-muted-foreground">
+            {block.lines.map((l, li) => (
+              <p key={`${key}-${li}`}>{renderInline(l, `${key}-${li}`)}</p>
+            ))}
+          </blockquote>
+        )
+      case 'ul':
+        return (
+          <ul key={key} className="list-disc space-y-1 pl-5">
+            {block.items.map((item, li) => (
+              <li key={`${key}-${li}`}>{renderInline(item, `${key}-${li}`)}</li>
+            ))}
+          </ul>
+        )
+      case 'ol':
+        return (
+          <ol key={key} className="list-decimal space-y-1 pl-5">
+            {block.items.map((item, li) => (
+              <li key={`${key}-${li}`}>{renderInline(item, `${key}-${li}`)}</li>
+            ))}
+          </ol>
+        )
+      case 'p':
+        return (
+          <p key={key}>
+            {block.lines.map((l, li) => (
+              <React.Fragment key={`${key}-${li}`}>
+                {li > 0 && <br />}
+                {renderInline(l, `${key}-${li}`)}
+              </React.Fragment>
+            ))}
+          </p>
+        )
+    }
+  })
+}
+
+export interface MarkdownProps {
+  source: string
+  className?: string
+}
+
+/** Rendered markdown block — spacing tuned for script/brief documents. */
+export function Markdown({ source, className }: MarkdownProps) {
+  return (
+    <div className={cn('space-y-3 text-sm leading-relaxed text-foreground', className)}>
+      {renderMarkdown(source)}
+    </div>
+  )
+}

package/src/primitives/select.tsx

@@ -116,7 +116,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-muted focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-muted focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}