@fayz-ai/ui 0.6.0 → 0.7.0

package/src/dashboard/KpiCard.tsx

@@ -222,8 +222,10 @@ export function KpiCard(props: KpiCardProps) {
   }
 
   return (
-    <Card>
-      <CardContent className="p-4">
+    // h-full so cards fill the (stretch) grid cell and every card in a row matches
+    // the tallest — labels/subtitles of different lengths no longer misalign them.
+    <Card className="h-full">
+      <CardContent className="flex h-full flex-col p-4">
         <div className="mb-2 flex items-center justify-between gap-2">
           <span className="text-sm text-muted-foreground">{label}</span>
           <span className="text-muted-foreground">{renderIcon(icon)}</span>

package/src/dashboard/index.ts

@@ -10,6 +10,7 @@ export { resolveDashboardLayout, type LaidOutWidget } from './layout'
 export { useDashboardPreferences, type DashboardPreferencesState } from './preferences'
 export { DashboardCustomizeMenu, type DashboardCustomizeMenuProps } from './DashboardCustomizeMenu'
 export { DashboardGrid, type DashboardGridItem, type DashboardGridProps } from './DashboardGrid'
+export { GoldCard, type GoldCardProps } from './GoldCard'
 export {
   DashboardRangeProvider,
   DashboardRangeControl,

package/src/index.ts

@@ -98,6 +98,11 @@ export {
   SegmentedControl,
   type SegmentedControlProps,
   type SegmentedOption,
+  Markdown,
+  renderMarkdown,
+  type MarkdownProps,
+  MarkdownEditor,
+  type MarkdownEditorProps,
 } from './primitives'
 
 // Layout
@@ -105,6 +110,10 @@ export {
   AppShell,
   type AppShellProps,
   type AppShellUser,
+  type BottomNavItem,
+  type BottomNavRouteItem,
+  type BottomNavActionItem,
+  type MobileHeaderVariant,
   Sidebar,
   type SidebarProps,
   type SidebarUser,
@@ -114,6 +123,8 @@ export {
   type TopbarProps,
   ModulePage,
   SubpageHeader,
+  ContentSplit,
+  ContentSplitTrigger,
   ModuleLayoutProvider,
   useModuleLayout,
   PageHeaderActions,
@@ -134,6 +145,8 @@ export {
   type ModuleNavItem,
   type ModuleNavVariant,
   type SubpageHeaderProps,
+  type ContentSplitProps,
+  type ContentSplitTriggerProps,
   type BackButtonStyle,
 } from './layout'
 
@@ -179,6 +192,8 @@ export {
   DashboardGrid,
   type DashboardGridItem,
   type DashboardGridProps,
+  GoldCard,
+  type GoldCardProps,
   DashboardRangeProvider,
   DashboardRangeControl,
   useDashboardRange,

package/src/layout/AppShell.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react'
-import { Menu } from 'lucide-react'
+import {
+  Menu,
+  Home,
+  Receipt,
+  ArrowLeftRight,
+  Calendar,
+  CreditCard,
+  Settings,
+  MessageCircle,
+  Wallet,
+  PiggyBank,
+  Plus,
+  type LucideIcon,
+} from 'lucide-react'
 import { Sidebar, type NavigationItem, type SidebarUser, type SidebarProps } from './Sidebar'
 import { Topbar } from './Topbar'
 import { SaveBar, SaveBarProvider } from './SaveBar'
@@ -35,6 +48,41 @@ export interface AppShellUser {
   email: string
 }
 
+// ---------------------------------------------------------------------------
+// Bottom-nav item model
+//
+// Two kinds share the mobile tab bar:
+//  - route  (default): a normal tab that navigates to `route`.
+//  - action: a NON-route item rendered as a raised, elevated circular center
+//    button (Mobills style). It fires `onBottomNavAction(id)` instead of
+//    navigating — e.g. a global quick-add "+".
+// ---------------------------------------------------------------------------
+
+export interface BottomNavRouteItem {
+  kind?: 'route'
+  label: string
+  icon: string
+  route: string
+}
+
+export interface BottomNavActionItem {
+  kind: 'action'
+  /** Identifier passed to onBottomNavAction. */
+  id: string
+  icon: string
+  /** Optional accessible label. */
+  label?: string
+}
+
+export type BottomNavItem = BottomNavRouteItem | BottomNavActionItem
+
+/** Mobile header treatment (small screens, <md). Desktop is unaffected.
+ *  - 'minimal'     : a small top header bar (the default / today's behavior).
+ *  - 'transparent' : NO header bar; content is edge-to-edge with a floating
+ *                    profile avatar pinned top-right (calls onProfile).
+ *  - 'hidden'      : no header bar and no floating avatar. */
+export type MobileHeaderVariant = 'transparent' | 'minimal' | 'hidden'
+
 export interface AppShellProps {
   /** Layout variant */
   variant: 'sidebar' | 'topbar' | 'minimal'
@@ -58,7 +106,11 @@ export interface AppShellProps {
   topbarEnd?: React.ReactNode
   sidebarTopContent?: React.ReactNode
   sidebarFooterContent?: React.ReactNode
-  bottomNav?: Array<{ label: string; icon: string; route: string }>
+  bottomNav?: BottomNavItem[]
+  /** Fired when a bottom-nav `action` item (e.g. the center "+") is tapped. */
+  onBottomNavAction?: (id: string) => void
+  /** Mobile header treatment (<md). Default: 'minimal'. Desktop unaffected. */
+  mobileHeader?: MobileHeaderVariant
   /** Rendered in sidebar bottom user slot */
   userMenuSlot?: React.ReactNode
   /** Rendered in sidebar bottom notification slot */
@@ -93,6 +145,8 @@ function SidebarLayout({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  hasBottomNav = false,
+  mobileHeader = 'minimal',
 }: {
   navigation?: NavigationItem[]
   logo?: React.ReactNode
@@ -115,6 +169,11 @@ function SidebarLayout({
   userMenuSlot?: React.ReactNode
   notificationSlot?: React.ReactNode
   unreadCount?: number
+  /** When a mobile bottom-nav bar is present, the mobile hamburger is
+   *  suppressed so the bottom nav is the primary mobile navigation. */
+  hasBottomNav?: boolean
+  /** Mobile header treatment (<md). Desktop keeps its top bar untouched. */
+  mobileHeader?: MobileHeaderVariant
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed)
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed)
@@ -126,7 +185,13 @@ function SidebarLayout({
     <SaveBarProvider>
     <ModuleHeaderSlotContext.Provider value={headerSlot}>
     <ModuleHeaderActionsSlotContext.Provider value={actionsSlot}>
-    <div className="flex h-screen overflow-hidden bg-background">
+    <div className={cn(
+      'flex h-screen overflow-hidden bg-background',
+      // Frame mode: the inset gap around the framed card takes the sidebar (menu)
+      // color, so the white card reads as a panel floating on the same tone as the
+      // left menu. The card's own md:m-2 margin reveals this behind it.
+      frame && 'md:bg-sidebar',
+    )}>
       {/* Desktop Sidebar — always flush / full-height (GoHighLevel style) */}
       <div className="hidden md:flex">
         <Sidebar
@@ -158,16 +223,27 @@ function SidebarLayout({
         'relative flex flex-1 flex-col overflow-hidden',
         frame && 'md:m-2 md:rounded-xl md:border md:border-border md:bg-card'
       )}>
-        {/* Top bar — mobile hamburger + module header slot (title + sub-nav) + actions */}
-        <div className="flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2">
+        {/* Top bar — mobile hamburger + module header slot (title + sub-nav) + actions.
+            On mobile the bar is suppressed for the 'transparent' / 'hidden' header
+            treatments (content goes edge-to-edge); desktop keeps it always. The
+            portal targets below stay mounted (display:none on mobile) so module
+            pages can still portal their sub-nav on desktop without crashing. */}
+        <div className={cn(
+          'flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2',
+          mobileHeader !== 'minimal' && 'hidden md:flex',
+        )}>
           <div className="flex min-w-0 flex-1 items-center gap-3">
-            <button
-              onClick={() => setMobileMenuOpen(true)}
-              className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
+            {/* Mobile hamburger — suppressed when a bottom-nav bar owns mobile
+                navigation (mobile-first apps). Desktop sidebar is untouched. */}
+            {!hasBottomNav && (
+              <button
+                onClick={() => setMobileMenuOpen(true)}
+                className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
+            )}
             {pageTitle && <h2 className="font-semibold text-lg">{pageTitle}</h2>}
             {topbarStart}
             {/* Module pages (tabs variant) portal their sub-nav here */}
@@ -181,7 +257,7 @@ function SidebarLayout({
         </div>
 
         {/* Page content */}
-        <main className="flex-1 overflow-y-auto">
+        <main className="flex-1 overflow-y-auto pb-16 md:pb-0">
           {children}
         </main>
 
@@ -236,6 +312,7 @@ function TopbarLayout({
   currentPath,
   topbarStart,
   topbarEnd,
+  hasBottomNav = false,
 }: {
   navigation?: NavigationItem[]
   logo?: React.ReactNode
@@ -251,6 +328,9 @@ function TopbarLayout({
   currentPath?: string
   topbarStart?: React.ReactNode
   topbarEnd?: React.ReactNode
+  /** When a mobile bottom-nav bar is present, the mobile hamburger is
+   *  suppressed so the bottom nav is the primary mobile navigation. */
+  hasBottomNav?: boolean
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
 
@@ -271,10 +351,12 @@ function TopbarLayout({
         userMenuExtras={userMenuExtras}
         leftContent={topbarStart}
         rightContent={topbarEnd}
-        onMenuClick={() => setMobileMenuOpen(true)}
+        onMenuClick={hasBottomNav ? undefined : () => setMobileMenuOpen(true)}
       />
-      {/* Frame inset/border only from md up, so mobile stays edge-to-edge. */}
-      <main className={cn('flex-1 overflow-y-auto', frame && 'md:p-2')}>
+      {/* Frame inset/border only from md up, so mobile stays edge-to-edge. The
+          inset gap behind the framed card is the header color (bg-sidebar), so the
+          white card reads as a panel floating on the same navy as the topbar. */}
+      <main className={cn('flex-1 overflow-y-auto pb-16 md:pb-0', frame && 'md:bg-sidebar md:p-2')}>
         <div className={cn('min-h-full', frame && 'md:rounded-xl md:border md:border-border md:bg-card')}>
           {children}
         </div>
@@ -345,7 +427,7 @@ function MinimalLayout({
         </div>
         {headerEnd && <div className="flex items-center gap-2">{headerEnd}</div>}
       </header>
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto pb-16 md:pb-0">
         {children}
       </main>
     </div>
@@ -426,6 +508,111 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }: MobileOverlayPr
   )
 }
 
+// ---------------------------------------------------------------------------
+// Mobile bottom tab bar — rendered for every variant on small screens.
+// ui must NOT import from saas, so the icon lookup is a small local map (a
+// mirror of the saas icon convention). Unknown icon names fall back to Home.
+// ---------------------------------------------------------------------------
+
+const BOTTOM_NAV_ICONS: Record<string, LucideIcon> = {
+  Home,
+  Receipt,
+  ArrowLeftRight,
+  Calendar,
+  CreditCard,
+  Settings,
+  Menu,
+  MessageCircle,
+  Wallet,
+  PiggyBank,
+  Plus,
+}
+
+// Floating profile avatar — mobile-only (md:hidden), pinned top-right over the
+// content. Used with the 'transparent' mobile header treatment so there is no
+// header bar but the user still has a one-tap route into their profile.
+function FloatingProfileAvatar({ user, onClick }: { user?: AppShellUser; onClick?: () => void }) {
+  if (!user) return null
+  const label = user.fullName || user.email
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Profile"
+      className="fixed right-3 top-3 z-40 md:hidden"
+    >
+      {user.avatarUrl ? (
+        <img
+          src={user.avatarUrl}
+          alt=""
+          className="h-9 w-9 rounded-full object-cover shadow-md ring-2 ring-background"
+        />
+      ) : (
+        <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-md ring-2 ring-background">
+          {(label || '?').charAt(0).toUpperCase()}
+        </span>
+      )}
+    </button>
+  )
+}
+
+function MobileBottomNav({
+  items,
+  currentPath,
+  onNavigate,
+  onAction,
+}: {
+  items: NonNullable<AppShellProps['bottomNav']>
+  currentPath?: string
+  onNavigate?: (route: string) => void
+  onAction?: (id: string) => void
+}) {
+  const path = currentPath ?? ''
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-50 flex h-16 items-center justify-around border-t border-border bg-background md:hidden">
+      {items.map((item) => {
+        // Elevated center ACTION button (Mobills style) — raised above the bar,
+        // circular, primary-filled; fires onBottomNavAction instead of routing.
+        if (item.kind === 'action') {
+          const ActionIcon = BOTTOM_NAV_ICONS[item.icon] ?? Plus
+          return (
+            <div key={item.id} className="flex flex-1 items-start justify-center">
+              <button
+                type="button"
+                onClick={() => onAction?.(item.id)}
+                aria-label={item.label ?? 'Add'}
+                className="-mt-6 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-4 ring-background transition-transform active:scale-95"
+              >
+                <ActionIcon className="h-6 w-6" />
+              </button>
+            </div>
+          )
+        }
+        const isActive =
+          item.route === '/'
+            ? path === '/' || path === ''
+            : path === item.route || path.startsWith(item.route + '/')
+        const Icon = BOTTOM_NAV_ICONS[item.icon] ?? Home
+        return (
+          <button
+            key={item.route}
+            type="button"
+            onClick={() => onNavigate?.(item.route)}
+            className={cn(
+              'flex flex-1 flex-col items-center justify-center gap-0.5 px-1 py-1 transition-colors',
+              isActive ? 'text-primary' : 'text-muted-foreground',
+            )}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            <Icon className="h-5 w-5" />
+            <span className="text-xs">{item.label}</span>
+          </button>
+        )
+      })}
+    </nav>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // AppShell — main entry point
 // ---------------------------------------------------------------------------
@@ -450,13 +637,32 @@ export function AppShell({
   topbarEnd,
   sidebarTopContent,
   sidebarFooterContent,
+  bottomNav,
+  onBottomNavAction,
+  mobileHeader = 'minimal',
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
 }: AppShellProps) {
+  const hasBottomNav = !!bottomNav?.length
+  const bottomBar = hasBottomNav ? (
+    <MobileBottomNav
+      items={bottomNav!}
+      currentPath={currentPath}
+      onNavigate={onNavigate}
+      onAction={onBottomNavAction}
+    />
+  ) : null
+  // Transparent mobile header → no bar, a floating avatar top-right instead.
+  const floatingAvatar =
+    mobileHeader === 'transparent' && user ? (
+      <FloatingProfileAvatar user={user} onClick={onProfile} />
+    ) : null
+
+  let layoutElement: React.ReactNode
   switch (variant) {
     case 'sidebar':
-      return (
+      layoutElement = (
         <SidebarLayout
           navigation={navigation}
           logo={logo}
@@ -478,13 +684,16 @@ export function AppShell({
           userMenuSlot={userMenuSlot}
           notificationSlot={notificationSlot}
           unreadCount={unreadCount}
+          hasBottomNav={hasBottomNav}
+          mobileHeader={mobileHeader}
         >
           {children}
         </SidebarLayout>
       )
+      break
 
     case 'topbar':
-      return (
+      layoutElement = (
         <TopbarLayout
           navigation={navigation}
           logo={logo}
@@ -499,21 +708,32 @@ export function AppShell({
           currentPath={currentPath}
           topbarStart={topbarStart}
           topbarEnd={topbarEnd}
+          hasBottomNav={hasBottomNav}
         >
           {children}
         </TopbarLayout>
       )
+      break
 
     case 'minimal':
-      return (
+      layoutElement = (
         <MinimalLayout logo={logo} user={user} headerEnd={topbarEnd}>
           {children}
         </MinimalLayout>
       )
+      break
 
     default: {
       const _exhaustive: never = variant
       return null
     }
   }
+
+  return (
+    <>
+      {layoutElement}
+      {floatingAvatar}
+      {bottomBar}
+    </>
+  )
 }

package/src/layout/ContentSplit.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react'
+import { PanelRight, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import {
+  Sheet, SheetContent, SheetHeader, SheetBody, SheetTitle, SheetDescription,
+} from '../primitives/sheet'
+
+// ---------------------------------------------------------------------------
+// ContentSplit — main content with a right-aligned companion panel, mobile
+// first. Below `lg` the aside lives in a right Sheet (opened by a trigger the
+// host places wherever fits — typically SubpageHeader actions, via
+// <ContentSplitTrigger/>). From `lg` up it docks as a sticky right column.
+//
+// Pairs with SubpageHeader/ModulePage: the page keeps its own back-button
+// header; ContentSplit only owns the columns below it. Reuse for any
+// "document + operational panel" page (script + shooting checklist, form +
+// help, detail + activity feed).
+// ---------------------------------------------------------------------------
+
+interface ContentSplitContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const ContentSplitContext = React.createContext<ContentSplitContextValue | null>(null)
+
+export interface ContentSplitProps {
+  /** Main column (the document). */
+  children: React.ReactNode
+  /** Companion panel content (the checklist / help / activity). */
+  aside: React.ReactNode
+  /** Panel title — Sheet header on mobile, card header on desktop. */
+  asideTitle: React.ReactNode
+  /** Optional subtitle under the title. */
+  asideDescription?: React.ReactNode
+  /** Desktop column width (defaults to 20rem). */
+  asideWidth?: string
+  /** Controlled mobile-sheet state; uncontrolled when omitted. */
+  asideOpen?: boolean
+  onAsideOpenChange?: (open: boolean) => void
+  /** Desktop column can collapse into a slim reopen rail. */
+  collapsible?: boolean
+  /** Initial desktop collapsed state (e.g. expand only on the relevant day). */
+  defaultCollapsed?: boolean
+  className?: string
+}
+
+export function ContentSplit({
+  children,
+  aside,
+  asideTitle,
+  asideDescription,
+  asideWidth = '20rem',
+  asideOpen,
+  onAsideOpenChange,
+  collapsible = false,
+  defaultCollapsed = false,
+  className,
+}: ContentSplitProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = asideOpen ?? internalOpen
+  const setOpen = onAsideOpenChange ?? setInternalOpen
+  const [collapsed, setCollapsed] = React.useState(collapsible && defaultCollapsed)
+
+  return (
+    <ContentSplitContext.Provider value={{ open, setOpen }}>
+      <div
+        className={cn('lg:grid lg:items-start lg:gap-6', className)}
+        style={{ gridTemplateColumns: `minmax(0, 1fr) ${collapsed ? 'auto' : asideWidth}` }}
+      >
+        <div className="min-w-0">{children}</div>
+
+        {/* Desktop: docked sticky column (or slim reopen rail when collapsed) */}
+        <aside className="hidden lg:block lg:sticky lg:top-4">
+          {collapsed ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCollapsed(false)}
+              className="h-9 w-9 p-0"
+              aria-label={typeof asideTitle === 'string' ? asideTitle : undefined}
+              title={typeof asideTitle === 'string' ? asideTitle : undefined}
+            >
+              <PanelRightOpen className="h-4 w-4" />
+            </Button>
+          ) : (
+            <div className="rounded-card border border-border bg-card">
+              <div className="flex items-start justify-between gap-2 border-b border-border px-4 py-3">
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold text-foreground">{asideTitle}</p>
+                  {asideDescription && (
+                    <p className="mt-0.5 text-xs text-muted-foreground">{asideDescription}</p>
+                  )}
+                </div>
+                {collapsible && (
+                  <button
+                    type="button"
+                    onClick={() => setCollapsed(true)}
+                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+                    aria-label="collapse"
+                  >
+                    <PanelRightClose className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              <div className="p-4">{aside}</div>
+            </div>
+          )}
+        </aside>
+      </div>
+
+      {/* Mobile: right sheet */}
+      <div className="lg:hidden">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetContent width="max-w-sm">
+            <SheetHeader>
+              <SheetTitle>{asideTitle}</SheetTitle>
+              {asideDescription && <SheetDescription>{asideDescription}</SheetDescription>}
+            </SheetHeader>
+            <SheetBody>{aside}</SheetBody>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </ContentSplitContext.Provider>
+  )
+}
+
+export interface ContentSplitTriggerProps {
+  /** Accessible label; also the visible text unless `iconOnly`. */
+  label: React.ReactNode
+  iconOnly?: boolean
+  className?: string
+}
+
+/** Opens the mobile aside sheet. Renders nothing from `lg` up (the panel is
+ *  already docked). Place inside SubpageHeader `actions` or any toolbar. */
+export function ContentSplitTrigger({ label, iconOnly, className }: ContentSplitTriggerProps) {
+  const ctx = React.useContext(ContentSplitContext)
+  if (!ctx) return null
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => ctx.setOpen(true)}
+      className={cn('lg:hidden', className)}
+      aria-label={typeof label === 'string' ? label : undefined}
+    >
+      <PanelRight className={cn('h-4 w-4', !iconOnly && 'mr-1.5')} />
+      {!iconOnly && label}
+    </Button>
+  )
+}

package/src/layout/ModulePage.tsx

@@ -139,7 +139,7 @@ function MobileTabs({ nav }: { nav: ModuleNavItem[] }) {
 
   return (
     <div className="md:hidden -mx-1 mb-4 no-print">
-      <div ref={scrollRef} className="flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-hide">
+      <div ref={scrollRef} className="flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none">
         {nav.map((item) => {
           const Icon = item.icon ? (ICON_MAP[item.icon] ?? null) : null
           const hasChildren = item.children && item.children.length > 0
@@ -340,7 +340,7 @@ function ModuleHeader({ nav }: { nav: ModuleNavItem[] }) {
 
   const content = (
     <div className="flex w-full min-w-0 items-center gap-4">
-      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-hide">
+      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none">
         {nav.map((item) => {
           const Icon = item.icon ? (ICON_MAP[item.icon] ?? null) : null
           const hasChildren = item.children && item.children.length > 0