@fayz-ai/ui 0.1.7 → 0.2.1

package/src/layout/ModulePage.tsx

@@ -7,6 +7,7 @@ import { ICON_MAP } from './Topbar'
 import { useModuleHeaderSlot, useModuleHeaderActionsSlot } from './AppShell'
 import { PageTransition } from './PageTransition'
 import { useBackHandler } from './SaveBar'
+import { useCrossModuleBack } from './useCrossModuleBack'
 
 // ---------------------------------------------------------------------------
 // PageHeaderActions — portals a page's primary action button(s) into the shell
@@ -248,19 +249,25 @@ export interface SubpageHeaderProps {
 export function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle }: SubpageHeaderProps) {
   const t = useTranslation()
   const appStyle = useBackStyle()
+
+  // Defer to the global navigation history when the user came from another
+  // module, so the back link points at the actual previous page. Within the
+  // same module the page's own onBack/parentLabel pass through unchanged.
+  const { onBack: effectiveOnBack, parentLabel: effectiveParentLabel } = useCrossModuleBack(onBack, parentLabel)
+
   // Wire this page's back action into the app-wide Escape key (no per-plugin code).
-  useBackHandler(onBack)
+  useBackHandler(effectiveOnBack)
   const Icon = icon ? (ICON_MAP[icon] ?? null) : null
   // Breadcrumb/link need a parent label; without one we fall back to the icon button.
-  const style: BackButtonStyle = !onBack ? 'icon' : (backStyle ?? appStyle)
-  const effectiveStyle: BackButtonStyle = style !== 'icon' && !parentLabel ? 'icon' : style
+  const style: BackButtonStyle = !effectiveOnBack ? 'icon' : (backStyle ?? appStyle)
+  const effectiveStyle: BackButtonStyle = style !== 'icon' && !effectiveParentLabel ? 'icon' : style
 
   const titleBlock = (
     <div className="flex items-center justify-between gap-4">
       <div className="flex items-center gap-3">
-        {effectiveStyle === 'icon' && onBack && (
+        {effectiveStyle === 'icon' && effectiveOnBack && (
           <button
-            onClick={onBack}
+            onClick={effectiveOnBack}
             className="flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
           >
             <ChevronLeft className="h-4 w-4" />
@@ -285,7 +292,7 @@ export function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, acti
       <div className="space-y-4 mb-6">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <button onClick={onBack} className="hover:text-foreground transition-colors">{parentLabel}</button>
+            <button onClick={effectiveOnBack} className="hover:text-foreground transition-colors">{effectiveParentLabel}</button>
             <ChevronRight className="h-3.5 w-3.5" />
             <span className="text-foreground font-medium">{title}</span>
           </div>
@@ -300,11 +307,11 @@ export function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, acti
     return (
       <div className="space-y-3 mb-6">
         <button
-          onClick={onBack}
+          onClick={effectiveOnBack}
           className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
           <ChevronLeft className="h-4 w-4" />
-          {t('crud.detail.backTo', { entities: parentLabel as string })}
+          {t('crud.detail.backTo', { entities: effectiveParentLabel as string })}
         </button>
         {titleBlock}
       </div>

package/src/layout/Topbar.tsx

@@ -59,6 +59,10 @@ import {
   Ruler,
   ArrowUpRight,
   ArrowDownRight,
+  ArrowLeftRight,
+  Plug,
+  SlidersHorizontal,
+  TableProperties,
   UserPlus,
   TreePalm,
   PartyPopper,
@@ -176,7 +180,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   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, Landmark, Receipt, TrendingUp, CircleDollarSign, Clock, AlertTriangle, Sparkles, Wallet, Warehouse, Ruler, ArrowUpRight, ArrowDownRight, UserPlus, TreePalm,
+  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,
 }
 

package/src/layout/useCrossModuleBack.ts

@@ -0,0 +1,30 @@
+import { useNavReferrer, navHistoryBack, routeModule } from '@fayz-ai/core'
+
+/**
+ * Context-aware back target shared by all header/breadcrumb components.
+ *
+ * When the user arrived from a *different* module (tracked in the global
+ * navigation history), a page's own onBack/parentLabel point at its local
+ * parent — wrong for the referrer. In that case we return the referrer's label
+ * and a back action that pops the browser history to the actual previous page.
+ * Within the same module the page's own (more specific) values pass through
+ * unchanged, so existing behavior is preserved.
+ */
+export function useCrossModuleBack(onBack?: () => void, parentLabel?: string): {
+  onBack?: () => void
+  parentLabel?: string
+  isCrossModule: boolean
+} {
+  const currentPath = typeof window !== 'undefined'
+    ? ((window.location.hash ? window.location.hash.slice(1) : window.location.pathname) || '/')
+    : '/'
+  const referrer = useNavReferrer(currentPath)
+  const cross = referrer && referrer.label && routeModule(referrer.path) !== routeModule(currentPath)
+    ? referrer
+    : null
+  return {
+    onBack: cross ? () => navHistoryBack(onBack) : onBack,
+    parentLabel: cross ? cross.label : parentLabel,
+    isCrossModule: !!cross,
+  }
+}

package/src/primitives/breadcrumb.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { ArrowLeft } from 'lucide-react'
 import { useBackHandler } from '../layout/SaveBar'
+import { useCrossModuleBack } from '../layout/useCrossModuleBack'
 
 interface BreadcrumbProps {
   /** Parent label (e.g. "Invoices", "Clients") — clicking navigates back */
@@ -12,17 +13,20 @@ interface BreadcrumbProps {
 }
 
 export function Breadcrumb({ parent, current, onBack }: BreadcrumbProps) {
+  // When the user came from another module, point "back" at that actual
+  // previous page; otherwise keep this page's own parent/onBack.
+  const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parent)
   // Wire this page's back action into the app-wide Escape key (no per-plugin code).
-  useBackHandler(onBack)
+  useBackHandler(effectiveOnBack)
   return (
     <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
       <button
         type="button"
-        onClick={onBack}
+        onClick={effectiveOnBack}
         className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        {parent}
+        {effectiveParent}
       </button>
       {current !== undefined && (
         <>